vibrant-tool 0.1.4 → 0.1.5

package/dist/vibrant-tool.umd.js

@@ -99601,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 = "";
@@ -99639,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: [
@@ -99684,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",
               {
@@ -99692,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",
@@ -99703,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"
                           }
@@ -99722,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" }),
@@ -99730,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"
                 }
               ),
@@ -99769,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."
@@ -100388,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",
           {
@@ -100408,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 })
             ]
           }
         ),
@@ -100573,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",
           {
@@ -101297,7 +101316,7 @@ end`);
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[calc(100dvh-180px)] overflow-auto", children: [
+      /* @__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: [
@@ -101554,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",
           {
@@ -101736,6 +101755,23 @@ end`);
     );
   }
   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
   }) {
@@ -101893,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,
@@ -101921,32 +101959,57 @@ end`);
       }
     });
     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;
@@ -101955,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",
@@ -101981,73 +102044,159 @@ 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",
+            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);
                 }
@@ -102063,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) {
@@ -102085,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,
@@ -102154,6 +102303,13 @@ end`);
       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);
@@ -102584,8 +102740,9 @@ end`);
           "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__ */ jsxRuntime.jsx(
                 "div",
@@ -102876,7 +103033,7 @@ end`);
           hex
         ))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100vh-165px)] 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",
@@ -105463,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",
           {
@@ -106773,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",
         {
@@ -107359,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(
@@ -107533,7 +107690,7 @@ END:VCARD`;
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "text-neutral-800 h-[0.5px]" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100vh-126px)] 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",
           {
@@ -152845,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",
@@ -152979,7 +153136,7 @@ ${elements2.join("\n")}
         "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, i2) => /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
@@ -153031,7 +153188,7 @@ ${elements2.join("\n")}
         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;
@@ -153247,8 +153404,8 @@ ${elements2.join("\n")}
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto space-y-5 p-4 pr-3", children: [
-        objectColors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__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 (",
@@ -153894,6 +154051,36 @@ ${elements2.join("\n")}
     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;
@@ -154020,6 +154207,7 @@ ${elements2.join("\n")}
       /* @__PURE__ */ jsxRuntime.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"}`,
@@ -154041,6 +154229,7 @@ ${elements2.join("\n")}
       showTextPopup && /* @__PURE__ */ jsxRuntime.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"
@@ -154133,7 +154322,7 @@ ${elements2.join("\n")}
           children: "Aa"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: strokeControlsRef, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -154144,20 +154333,17 @@ ${elements2.join("\n")}
           }
         ),
         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("label", { className: "flex items-center gap-2 text-[13px] font-medium text-white", 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(
-              "input",
+              CMYKColorPicker,
               {
-                type: "color",
                 value: strokeColor,
-                onChange: (e2) => {
-                  const nextColor = e2.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"
+                }
               }
             )
           ] }),