vibrant-tool 0.1.4 → 0.1.5

package/dist/vibrant-tool.es.js

@@ -99600,7 +99600,7 @@ function PreviewModal({ onClose }) {
       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 = "";
@@ -99638,6 +99638,10 @@ function PreviewModal({ onClose }) {
     setRotY((dragRef.current.rotY + (e3.clientX - dragRef.current.x) * 0.5) % 360);
     setRotX(Math.max(-60, Math.min(60, dragRef.current.rotX - (e3.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__ */ jsx("div", { className: "fixed inset-0 z-[99999] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 select-none", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-4xl bg-white border border-gray-200 rounded-2xl shadow-2xl overflow-hidden flex flex-col h-[85vh]", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-gray-200 bg-gray-50/90", children: [
@@ -99683,7 +99687,7 @@ function PreviewModal({ onClose }) {
         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__ */ jsxs("div", { className: "relative w-full h-full flex items-center justify-center [perspective:1200px]", children: [
+        children: viewMode === "3d" ? /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full flex items-center justify-center [perspective:1200px] p-6", children: [
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -99691,10 +99695,13 @@ function PreviewModal({ onClose }) {
                 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__ */ jsxs(
                   "div",
@@ -99702,12 +99709,12 @@ function PreviewModal({ onClose }) {
                     style: { backfaceVisibility: "hidden" },
                     className: "absolute inset-0 rounded-xl overflow-hidden bg-white shadow-xl border border-gray-200",
                     children: [
-                      frontUrl ? /* @__PURE__ */ jsx("img", { src: frontUrl, alt: "Front", className: "w-full h-full object-contain pointer-events-none" }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center text-xs text-gray-400", children: "Front Design" }),
+                      frontUrl ? /* @__PURE__ */ jsx("img", { src: frontUrl, alt: "Front", className: "w-full h-full object-fill pointer-events-none block" }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center text-xs text-gray-400", children: "Front Design" }),
                       /* @__PURE__ */ 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"
                         }
@@ -99721,7 +99728,7 @@ function PreviewModal({ onClose }) {
                     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__ */ jsx("img", { src: backUrl, alt: "Back", className: "w-full h-full object-contain pointer-events-none" }) : /* @__PURE__ */ 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__ */ jsx("img", { src: backUrl, alt: "Back", className: "w-full h-full object-fill pointer-events-none block" }) : /* @__PURE__ */ 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__ */ jsx("span", { className: "font-semibold text-gray-600", children: "Back Side" }),
                         /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 mt-1", children: "Design added to Back tab will render here" })
                       ] }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-slate-50 flex items-center justify-center text-xs text-gray-400", children: "Single-sided Product" }),
@@ -99729,37 +99736,29 @@ function PreviewModal({ onClose }) {
                         "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__ */ jsx("div", { style: { transform: "translateZ(-1px)" }, className: "absolute inset-0 rounded-xl bg-gray-300 -z-10 shadow-md" })
+                )
               ]
             }
           ),
-          /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-[#02bc71] animate-ping" }),
             /* @__PURE__ */ jsx("span", { children: "Drag to Rotate 360°" })
           ] })
-        ] }) : /* @__PURE__ */ jsxs("div", { className: "p-6 flex flex-col items-center justify-center", children: [
-          isTwoSided && /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative w-full h-full flex items-center justify-center p-6", children: [
+          isTwoSided && /* @__PURE__ */ 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__ */ 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"
               }
             ),
@@ -99768,12 +99767,32 @@ function PreviewModal({ onClose }) {
               {
                 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__ */ jsx("div", { className: "rounded-xl border border-gray-200 bg-white p-2 shadow-xl max-w-full", children: /* @__PURE__ */ jsx("img", { src: currentProof, alt: "2D Proof", className: "max-h-[50vh] w-auto object-contain rounded-lg" }) }) : /* @__PURE__ */ jsxs("div", { className: "p-8 text-center bg-gray-50 rounded-xl border border-gray-200 text-xs text-gray-400", children: [
+          currentProof ? /* @__PURE__ */ 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__ */ jsx(
+                "img",
+                {
+                  src: currentProof,
+                  alt: `${activeSide} 2D Proof`,
+                  className: "w-full h-full object-fill pointer-events-none block"
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: "p-8 text-center bg-gray-50 rounded-xl border border-gray-200 text-xs text-gray-400", children: [
             "No preview available for ",
             activeSide,
             " side."
@@ -100387,7 +100406,7 @@ function Panel({ panelName }) {
         onClick: () => setActivePanel(null)
       }
     ),
-    /* @__PURE__ */ 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__ */ 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__ */ jsxs(
         "div",
         {
@@ -100407,7 +100426,7 @@ function Panel({ panelName }) {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto pt-4", children: panelName })
+            /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto pt-4 flex flex-col custom-scrollbar", children: panelName })
           ]
         }
       ),
@@ -100572,7 +100591,7 @@ function TemplatesPanel() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "h-[calc(100vh-125px)] overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "h-[calc(100vh-125px)] overflow-auto custom-scrollbar", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
       templates.map((tpl) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -101296,7 +101315,7 @@ function ElementsPanel() {
       ] })
     ] }),
     /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-    /* @__PURE__ */ jsxs("div", { className: "h-[calc(100dvh-180px)] overflow-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "h-[calc(100dvh-180px)] overflow-auto custom-scrollbar", children: [
       recentItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "py-5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -101553,7 +101572,7 @@ function TextPanel() {
       )
     ] }),
     /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] my-4" }),
-    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "h-[calc(100vh-250px)] overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "h-[calc(100vh-250px)] overflow-auto custom-scrollbar", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pb-12 mx-4", children: [
       textElements.map((tpl, index) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -101735,6 +101754,23 @@ function InstagramIcon() {
   );
 }
 const VibrantLogo = "data:image/png;base64,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";
+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
 }) {
@@ -101892,10 +101928,12 @@ const imageOptions = [
 ];
 function PhotosPanel() {
   const { startLoading, stopLoading, isLoading } = useLoaderStore();
+  const [source, setSource] = useState("external");
   const [socialImages, setSocialImages] = useState([]);
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
   const [category, setCategory] = useState(imageOptions[0]);
+  const [searchQuery, setSearchQuery] = useState("");
   const scrollRef = useRef(null);
   const {
     handleGoogleAuth,
@@ -101920,32 +101958,57 @@ function PhotosPanel() {
     }
   });
   const fetchImages = 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]
   );
   useEffect(() => {
-    fetchImages(category, 1);
-  }, []);
+    fetchImages(searchQuery || (source === "vibrant" ? "" : category), 1, source);
+  }, [source]);
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -101954,13 +102017,13 @@ function PhotosPanel() {
       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__ */ jsxs(Fragment, { children: [
+  }, [hasMore, isLoading, page, searchQuery, category, source, fetchImages]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full min-h-0", children: [
     /* @__PURE__ */ jsx("script", { src: "https://apis.google.com/js/api.js" }),
     /* @__PURE__ */ jsx(
       "script",
@@ -101980,73 +102043,159 @@ function PhotosPanel() {
         });
       }
     } }),
-    /* @__PURE__ */ jsx("div", { className: "bg-neutral-800 px-3 py-2 rounded flex items-center gap-2 mb-4 mx-4", children: /* @__PURE__ */ jsx(
-      "input",
-      {
-        className: "bg-transparent outline-none text-sm text-gray-300 w-full",
-        onKeyDown: (e3) => {
-          e3.stopPropagation();
-          if (e3.key === "Enter") {
-            fetchImages(e3.target.value, 1);
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0 pt-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-neutral-800 px-3 py-2 rounded flex items-center gap-2 mb-3 mx-4", children: /* @__PURE__ */ 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: (e3) => setSearchQuery(e3.target.value),
+          onKeyDown: (e3) => {
+            e3.stopPropagation();
+            if (e3.key === "Enter") {
+              setPage(1);
+              fetchImages(searchQuery, 1, source);
+            }
           }
         }
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "m-4", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-md font-medium mb-3", children: "Upload From Other Media" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", onClick: () => handleGoogleAuth("googledrives"), children: /* @__PURE__ */ jsx(GoogleDriveIcon, {}) }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", onClick: () => handleGoogleAuth("googlephotos"), children: /* @__PURE__ */ jsx(GooglePhotoIcon, {}) }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", onClick: handleDropboxAuth, children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: "https://vibrantprintshopimage.s3.amazonaws.com/dropbox.svg",
-            alt: "dropbox",
-            height: 30,
-            width: 30,
-            className: "object-contain"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", onClick: handleFacebookAuth, children: /* @__PURE__ */ jsx(FacebookIcon, {}) }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", onClick: handleInstagramAuth, children: /* @__PURE__ */ jsx(InstagramIcon, {}) }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer", children: /* @__PURE__ */ jsx(
-          "img",
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "mx-4 mb-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-md font-medium mb-2 text-gray-200", children: "Upload From Other Media" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ 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__ */ jsx(GoogleDriveIcon, {})
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(GooglePhotoIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "cursor-pointer p-1.5 rounded-lg hover:bg-white/10 transition-colors",
+              onClick: handleDropboxAuth,
+              title: "Dropbox",
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: "https://vibrantprintshopimage.s3.amazonaws.com/dropbox.svg",
+                  alt: "dropbox",
+                  height: 26,
+                  width: 26,
+                  className: "object-contain"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "cursor-pointer p-1.5 rounded-lg hover:bg-white/10 transition-colors",
+              onClick: handleFacebookAuth,
+              title: "Facebook",
+              children: /* @__PURE__ */ jsx(FacebookIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "cursor-pointer p-1.5 rounded-lg hover:bg-white/10 transition-colors",
+              onClick: handleInstagramAuth,
+              title: "Instagram",
+              children: /* @__PURE__ */ jsx(InstagramIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setSource("vibrant");
+                setPage(1);
+                setSearchQuery("");
+                fetchImages("", 1, "vibrant");
+              },
+              title: "Vibrant Stock Images",
+              className: "cursor-pointer",
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: VibrantLogo,
+                  alt: "vibrant",
+                  height: 64,
+                  width: 64,
+                  className: "object-contain"
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] my-3" }),
+      source === "external" ? /* @__PURE__ */ jsx("div", { className: "mx-4 mb-3", children: /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-auto scrollbar-none custom-scrollbar", children: imageOptions.map((item) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "mx-4 mb-3 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-[#02bc71] flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 rounded-full bg-[#02bc71]" }),
+          "Vibrant Cloud Images"
+        ] }),
+        /* @__PURE__ */ 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__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px] my-4" }),
-    /* @__PURE__ */ jsx("div", { className: "m-4", children: /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-auto", children: imageOptions.map((item) => /* @__PURE__ */ 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__ */ jsx("div", { className: "h-[calc(100vh-288px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3 mx-4 pb-5", children: socialImages.length > 0 && socialImages.map((item, i) => {
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto pb-8 custom-scrollbar", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 md:grid-cols-3 gap-3 mx-4 pb-5", children: socialImages.length > 0 ? socialImages.map((item, i) => {
       return /* @__PURE__ */ jsx(
         "button",
         {
-          className: "relative aspect-square rounded overflow-hidden group cursor-pointer",
+          className: "relative aspect-square rounded overflow-hidden group cursor-pointer bg-neutral-900  transition-all",
           onClick: async () => {
             try {
               startLoading();
-              const image = await ShapeService.convertImages(item.largeImage);
-              const imageUrl = image?.success ? image?.url : null;
-              if (!imageUrl) return;
-              addImageToCanvas(imageUrl);
+              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);
               }
@@ -102062,14 +102211,14 @@ function PhotosPanel() {
               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"
             }
           )
         },
         i
       );
-    }) }) })
+    }) : !isLoading ? /* @__PURE__ */ jsx("div", { className: "col-span-full py-8 text-center text-xs text-gray-500", children: "No images found" }) : null }) })
   ] });
 }
 async function addBackgroundImage(url) {
@@ -102084,7 +102233,7 @@ async function addBackgroundImage(url) {
   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,
@@ -102153,6 +102302,13 @@ function extractAllTargetColors(targets) {
     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);
@@ -102583,8 +102739,9 @@ function CMYKColorPicker({ value, onChange, className = "" } = {}) {
         "div",
         {
           ref: popoverRef,
+          "data-cmyk-popover": "true",
           style: { position: "fixed", top: `${coords.top}px`, left: `${coords.left}px`, zIndex: 999999 },
-          className: "bg-white rounded-2xl shadow-2xl p-3.5 w-[270px] text-gray-800 border border-gray-100 select-none font-sans",
+          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__ */ jsx(
               "div",
@@ -102875,7 +103032,7 @@ function BackgroundPanel() {
         hex
       ))
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-165px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 mx-4 pb-5", children: backgroundImages.map((item, i) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-165px)] overflow-auto custom-scrollbar", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 mx-4 pb-5", children: backgroundImages.map((item, i) => /* @__PURE__ */ jsx(
       "button",
       {
         className: "relative aspect-square rounded overflow-hidden group cursor-pointer",
@@ -105462,7 +105619,7 @@ END:VCARD`;
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "h-[calc(100vh-200px)] overflow-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "h-[calc(100vh-200px)] overflow-auto custom-scrollbar", children: [
       type === "url" && /* @__PURE__ */ jsx(FormField$1, { label: "Website URL", error: errors.url, children: /* @__PURE__ */ jsx(
         "input",
         {
@@ -106772,7 +106929,7 @@ function EffectsPanel() {
     { id: "natural", label: "Natural" },
     { id: "warm", label: "Warm" }
   ];
-  return /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto custom-scrollbar overflow-x-hidden px-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto custom-scrollbar overflow-x-hidden px-4 custom-scrollbar", children: [
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 mb-6", children: PRESETS.map((p2) => /* @__PURE__ */ jsx(
       "button",
       {
@@ -107358,7 +107515,7 @@ function MaskPanel() {
     saveState();
     setActivePanel(null);
   };
-  return /* @__PURE__ */ jsxs("aside", { className: "bg-neutral-900 border-r border-neutral-800 p-4 text-white h-full overflow-y-auto", children: [
+  return /* @__PURE__ */ jsxs("aside", { className: "bg-neutral-900 border-r border-neutral-800 p-4 text-white h-full overflow-y-auto custom-scrollbar", children: [
     /* @__PURE__ */ jsx("div", { onClick: () => setActivePanel(null), className: "cursor-pointer mb-2", children: "← Back" }),
     /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center mb-4", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold ", children: "Mask image" }) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: mask.map((m2, index) => /* @__PURE__ */ jsx(
@@ -107532,7 +107689,7 @@ function FontPanel() {
       )
     ] }),
     /* @__PURE__ */ jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-    /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-126px)] overflow-auto", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "mx-4 py-5", children: fontData.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm text-center", children: "No results found" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "h-[calc(100vh-126px)] overflow-auto custom-scrollbar", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "mx-4 py-5", children: fontData.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm text-center", children: "No results found" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4", children: fontData.map((item, i) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -152844,7 +153001,7 @@ function BarcodePanel() {
     }
   };
   const stopPropagation = (e3) => e3.stopPropagation();
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col h-full mx-4", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto space-y-5 pr-2", children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col h-full mx-4", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto space-y-5 pr-2 custom-scrollbar", children: [
     /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-white", children: "Bar Code" }),
     /* @__PURE__ */ jsx(FormField, { label: "Select Bar Code Type", children: /* @__PURE__ */ jsx(
       "select",
@@ -152978,7 +153135,7 @@ function QuotesPanel() {
       "div",
       {
         ref: scrollRef,
-        className: "flex-1 min-h-0 overflow-y-auto flex flex-col gap-3 px-4 py-2",
+        className: "flex-1 min-h-0 overflow-y-auto flex flex-col gap-3 px-4 py-2 custom-scrollbar",
         children: [
           quotes.map((q2, i) => /* @__PURE__ */ jsxs(
             "button",
@@ -153030,7 +153187,7 @@ const ColorService = {
       if (params?.status !== void 0) searchParams.append("status", String(params.status));
       searchParams.append("limit", String(params?.limit || 100));
       if (params?.page) searchParams.append("page", String(params.page));
-      const res = await apiFetch(`/colors?${searchParams.toString()}`, {
+      const res = await apiFetch(`/api/colors?${searchParams.toString()}`, {
         method: "GET"
       });
       if (Array.isArray(res)) return res;
@@ -153246,8 +153403,8 @@ function ColorPanel() {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto space-y-5 p-4 pr-3", children: [
-      objectColors.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto space-y-5 p-4 pr-3 custom-scrollbar", children: [
+      objectColors.length > 1 && /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
           /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-bold text-neutral-400 uppercase tracking-wider", children: [
             "Object Colors (",
@@ -153893,6 +154050,36 @@ function TextToolbar() {
   const [strokeColor, setStrokeColor] = useState("#000000");
   const [strokeSize, setStrokeSize] = useState(0);
   const [strokeStyle, setStrokeStyle] = useState("Line");
+  const strokeControlsRef = useRef(null);
+  const textPopupRef = useRef(null);
+  const textPopupButtonRef = useRef(null);
+  useEffect(() => {
+    if (!showStrokeControls) return;
+    const handleClickOutside = (e3) => {
+      const target = e3.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]);
+  useEffect(() => {
+    if (!showTextPopup) return;
+    const handleClickOutside = (e3) => {
+      const target = e3.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 = useMemo(() => {
     if (type !== "textbox") return null;
     return isTextbox(objects[0]) ? objects[0] : null;
@@ -154019,6 +154206,7 @@ function TextToolbar() {
     /* @__PURE__ */ jsx(
       "button",
       {
+        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"}`,
@@ -154040,6 +154228,7 @@ function TextToolbar() {
     showTextPopup && /* @__PURE__ */ jsxs(
       "div",
       {
+        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"
@@ -154132,7 +154321,7 @@ function TextToolbar() {
         children: "Aa"
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", ref: strokeControlsRef, children: [
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -154143,20 +154332,17 @@ function TextToolbar() {
         }
       ),
       showStrokeControls && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 top-full z-50 mt-2 flex items-center gap-3 rounded-md border border-neutral-700 bg-[#1d1d1d] px-3 py-2 text-white shadow-[0_12px_30px_rgba(0,0,0,0.35)]", children: [
-        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-[13px] font-medium text-white", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[13px] font-medium text-white", children: [
           /* @__PURE__ */ jsx("span", { children: "Color" }),
           /* @__PURE__ */ jsx(
-            "input",
+            CMYKColorPicker,
             {
-              type: "color",
               value: strokeColor,
-              onChange: (e3) => {
-                const nextColor = e3.target.value;
+              onChange: (hex) => {
+                const nextColor = typeof hex === "string" ? hex : "#000000";
                 setStrokeColor(nextColor);
                 applyTextStroke(nextColor, strokeSize, strokeStyle);
-              },
-              className: "h-8 w-10 cursor-pointer rounded border border-neutral-600 bg-transparent p-0",
-              "aria-label": "Text stroke color"
+              }
             }
           )
         ] }),