@retinalabsllc/zairusjs 20.1.15 → 20.1.20

package/dist/index.js

@@ -5512,6 +5512,8 @@ var UniversalSettings = ({
   const [isSavingProfile, setIsSavingProfile] = (0, import_react89.useState)(false);
   const orgFileInputRef = (0, import_react89.useRef)(null);
   const userFileInputRef = (0, import_react89.useRef)(null);
+  const [pendingOrgAvatar, setPendingOrgAvatar] = (0, import_react89.useState)(null);
+  const [pendingUserAvatar, setPendingUserAvatar] = (0, import_react89.useState)(null);
   const [isUploadingOrgAvatar, setIsUploadingOrgAvatar] = (0, import_react89.useState)(false);
   const [isUploadingUserAvatar, setIsUploadingUserAvatar] = (0, import_react89.useState)(false);
   (0, import_react89.useEffect)(() => {
@@ -5525,7 +5527,7 @@ var UniversalSettings = ({
     setDescription(initialDescription || "");
     setAvatarUrl(initialAvatarUrl || "");
   }, [initialOrgName, initialOrgSlug, initialOrgAvatarUrl, initialFullName, initialJobTitle, initialDescription, initialAvatarUrl]);
-  const handleFileSelect = async (e, type) => {
+  const handleFileSelect = (e, type) => {
     const file = e.target.files?.[0];
     if (!file) return;
     if (file.size > 1024 * 1024) {
@@ -5539,27 +5541,15 @@ var UniversalSettings = ({
       e.target.value = "";
       return;
     }
-    if (!onUploadAvatar) {
-      import_react_hot_toast15.default.error("Upload service not configured.");
-      e.target.value = "";
-      return;
-    }
-    try {
-      if (type === "USER") setIsUploadingUserAvatar(true);
-      if (type === "ORGANIZATION") setIsUploadingOrgAvatar(true);
-      const res = await onUploadAvatar(file, type);
-      if (res?.url) {
-        if (type === "USER") setAvatarUrl(res.url);
-        if (type === "ORGANIZATION") setOrgAvatarUrl(res.url);
-        import_react_hot_toast15.default.success("Image uploaded. Remember to save changes.");
-      }
-    } catch (error) {
-      import_react_hot_toast15.default.error("Failed to process image upload.");
-    } finally {
-      if (type === "USER") setIsUploadingUserAvatar(false);
-      if (type === "ORGANIZATION") setIsUploadingOrgAvatar(false);
-      e.target.value = "";
+    const previewUrl = URL.createObjectURL(file);
+    if (type === "USER") {
+      setPendingUserAvatar(file);
+      setAvatarUrl(previewUrl);
+    } else if (type === "ORGANIZATION") {
+      setPendingOrgAvatar(file);
+      setOrgAvatarUrl(previewUrl);
     }
+    e.target.value = "";
   };
   (0, import_react89.useEffect)(() => {
     if (activeTab !== "MEMBERS") return;
@@ -5651,13 +5641,32 @@ var UniversalSettings = ({
     if (orgSlug !== initialOrgSlug && slugAvailable === false) return import_react_hot_toast15.default.error("Address handle unavailable.");
     setIsSavingOrg(true);
     try {
-      const res = await onSaveOrganization({ name: orgName, slug: orgSlug, avatarUrl: orgAvatarUrl });
+      let finalAvatarUrl = orgAvatarUrl;
+      if (pendingOrgAvatar && onUploadAvatar) {
+        setIsUploadingOrgAvatar(true);
+        try {
+          const res2 = await onUploadAvatar(pendingOrgAvatar, "ORGANIZATION");
+          if (res2?.url) {
+            finalAvatarUrl = res2.url;
+            setOrgAvatarUrl(finalAvatarUrl);
+          }
+        } catch (err) {
+          import_react_hot_toast15.default.error("Failed to securely upload workspace avatar.");
+          setIsSavingOrg(false);
+          setIsUploadingOrgAvatar(false);
+          return;
+        }
+        setPendingOrgAvatar(null);
+        setIsUploadingOrgAvatar(false);
+      }
+      const res = await onSaveOrganization({ name: orgName, slug: orgSlug, avatarUrl: finalAvatarUrl });
       if (res.success) import_react_hot_toast15.default.success("Workspace updated successfully.");
       else import_react_hot_toast15.default.error(res.error || "Failed to update workspace.");
     } catch (error) {
       import_react_hot_toast15.default.error("Service unavailable.");
     } finally {
       setIsSavingOrg(false);
+      setIsUploadingOrgAvatar(false);
     }
   };
   const handleSaveProfile = async (e) => {
@@ -5665,13 +5674,32 @@ var UniversalSettings = ({
     if (isSavingProfile || !onSaveProfile) return;
     setIsSavingProfile(true);
     try {
-      const res = await onSaveProfile({ firstName, lastName, jobTitle, description, avatarUrl });
+      let finalAvatarUrl = avatarUrl;
+      if (pendingUserAvatar && onUploadAvatar) {
+        setIsUploadingUserAvatar(true);
+        try {
+          const res2 = await onUploadAvatar(pendingUserAvatar, "USER");
+          if (res2?.url) {
+            finalAvatarUrl = res2.url;
+            setAvatarUrl(finalAvatarUrl);
+          }
+        } catch (err) {
+          import_react_hot_toast15.default.error("Failed to securely upload profile avatar.");
+          setIsSavingProfile(false);
+          setIsUploadingUserAvatar(false);
+          return;
+        }
+        setPendingUserAvatar(null);
+        setIsUploadingUserAvatar(false);
+      }
+      const res = await onSaveProfile({ firstName, lastName, jobTitle, description, avatarUrl: finalAvatarUrl });
       if (res.success) import_react_hot_toast15.default.success("Identity updated successfully.");
       else import_react_hot_toast15.default.error(res.error || "Failed to update identity.");
     } catch (error) {
       import_react_hot_toast15.default.error("Service unavailable.");
     } finally {
       setIsSavingProfile(false);
+      setIsUploadingUserAvatar(false);
     }
   };
   const hasOrgChanges = orgName !== initialOrgName || orgSlug !== initialOrgSlug || orgAvatarUrl !== initialOrgAvatarUrl;
@@ -5719,6 +5747,7 @@ var UniversalSettings = ({
     setOrgName(initialOrgName || "");
     setOrgSlug(initialOrgSlug || "");
     setOrgAvatarUrl(initialOrgAvatarUrl || "");
+    setPendingOrgAvatar(null);
   }, className: "text-xs tracking-widest text-stone-400 hover:text-black transition-colors outline-none" }, "Cancel")))), activeTab === "ACCOUNT" && /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col gap-8 rounded-2xl p-6 bg-white w-full" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "relative group cursor-pointer shrink-0", onClick: () => !isSavingProfile ? userFileInputRef.current?.click() : void 0 }, /* @__PURE__ */ import_react89.default.createElement(MemberAvatar3, { src: avatarUrl, status: "ACTIVE", sizeClass: "w-14 h-14" }), /* @__PURE__ */ import_react89.default.createElement("div", { className: "absolute -bottom-1 -right-1 w-6 h-6 bg-white border border-stone-200 rounded-full flex items-center justify-center text-stone-500  group-hover:text-black transition-colors z-20" }, isUploadingUserAvatar ? /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.Loading03Icon, size: 12, className: "animate-spin" }) : /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.PlusSignIcon, size: 14 })), /* @__PURE__ */ import_react89.default.createElement("input", { type: "file", ref: userFileInputRef, className: "hidden", accept: ".png, .jpg, .jpeg", onChange: (e) => handleFileSelect(e, "USER") })), /* @__PURE__ */ import_react89.default.createElement("div", null, /* @__PURE__ */ import_react89.default.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Personal Identity"), /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-xs text-stone-500" }, "Update your system display name and contact email.")))), /* @__PURE__ */ import_react89.default.createElement("form", { className: "flex flex-col gap-6 w-full max-w-5xl", onSubmit: handleSaveProfile, autoComplete: "off" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ import_react89.default.createElement(TextInput, { label: "First Name", value: firstName, onChange: (v) => setFirstName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "First name", maxLength: 50 }), /* @__PURE__ */ import_react89.default.createElement(TextInput, { label: "Last Name", value: lastName, onChange: (v) => setLastName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "Last name", maxLength: 50 })), /* @__PURE__ */ import_react89.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ import_react89.default.createElement(TextInput, { label: "Job Title", value: jobTitle, onChange: (v) => setJobTitle(v.substring(0, 50)), disabled: isSavingProfile, placeholder: "e.g. HR Manager, CEO", maxLength: 50 }), /* @__PURE__ */ import_react89.default.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ import_react89.default.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ import_react89.default.createElement("input", { type: "email", value: initialEmail, disabled: true, className: "w-full pb-3 pt-3 text-sm bg-transparent text-stone-400 border-b border-stone-200 outline-none cursor-not-allowed" }))), /* @__PURE__ */ import_react89.default.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ import_react89.default.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "About Me"), /* @__PURE__ */ import_react89.default.createElement(
     "textarea",
     {

package/dist/index.mjs

@@ -5567,6 +5567,8 @@ var UniversalSettings = ({
   const [isSavingProfile, setIsSavingProfile] = useState38(false);
   const orgFileInputRef = useRef14(null);
   const userFileInputRef = useRef14(null);
+  const [pendingOrgAvatar, setPendingOrgAvatar] = useState38(null);
+  const [pendingUserAvatar, setPendingUserAvatar] = useState38(null);
   const [isUploadingOrgAvatar, setIsUploadingOrgAvatar] = useState38(false);
   const [isUploadingUserAvatar, setIsUploadingUserAvatar] = useState38(false);
   useEffect21(() => {
@@ -5580,7 +5582,7 @@ var UniversalSettings = ({
     setDescription(initialDescription || "");
     setAvatarUrl(initialAvatarUrl || "");
   }, [initialOrgName, initialOrgSlug, initialOrgAvatarUrl, initialFullName, initialJobTitle, initialDescription, initialAvatarUrl]);
-  const handleFileSelect = async (e, type) => {
+  const handleFileSelect = (e, type) => {
     const file = e.target.files?.[0];
     if (!file) return;
     if (file.size > 1024 * 1024) {
@@ -5594,27 +5596,15 @@ var UniversalSettings = ({
       e.target.value = "";
       return;
     }
-    if (!onUploadAvatar) {
-      toast14.error("Upload service not configured.");
-      e.target.value = "";
-      return;
-    }
-    try {
-      if (type === "USER") setIsUploadingUserAvatar(true);
-      if (type === "ORGANIZATION") setIsUploadingOrgAvatar(true);
-      const res = await onUploadAvatar(file, type);
-      if (res?.url) {
-        if (type === "USER") setAvatarUrl(res.url);
-        if (type === "ORGANIZATION") setOrgAvatarUrl(res.url);
-        toast14.success("Image uploaded. Remember to save changes.");
-      }
-    } catch (error) {
-      toast14.error("Failed to process image upload.");
-    } finally {
-      if (type === "USER") setIsUploadingUserAvatar(false);
-      if (type === "ORGANIZATION") setIsUploadingOrgAvatar(false);
-      e.target.value = "";
+    const previewUrl = URL.createObjectURL(file);
+    if (type === "USER") {
+      setPendingUserAvatar(file);
+      setAvatarUrl(previewUrl);
+    } else if (type === "ORGANIZATION") {
+      setPendingOrgAvatar(file);
+      setOrgAvatarUrl(previewUrl);
     }
+    e.target.value = "";
   };
   useEffect21(() => {
     if (activeTab !== "MEMBERS") return;
@@ -5706,13 +5696,32 @@ var UniversalSettings = ({
     if (orgSlug !== initialOrgSlug && slugAvailable === false) return toast14.error("Address handle unavailable.");
     setIsSavingOrg(true);
     try {
-      const res = await onSaveOrganization({ name: orgName, slug: orgSlug, avatarUrl: orgAvatarUrl });
+      let finalAvatarUrl = orgAvatarUrl;
+      if (pendingOrgAvatar && onUploadAvatar) {
+        setIsUploadingOrgAvatar(true);
+        try {
+          const res2 = await onUploadAvatar(pendingOrgAvatar, "ORGANIZATION");
+          if (res2?.url) {
+            finalAvatarUrl = res2.url;
+            setOrgAvatarUrl(finalAvatarUrl);
+          }
+        } catch (err) {
+          toast14.error("Failed to securely upload workspace avatar.");
+          setIsSavingOrg(false);
+          setIsUploadingOrgAvatar(false);
+          return;
+        }
+        setPendingOrgAvatar(null);
+        setIsUploadingOrgAvatar(false);
+      }
+      const res = await onSaveOrganization({ name: orgName, slug: orgSlug, avatarUrl: finalAvatarUrl });
       if (res.success) toast14.success("Workspace updated successfully.");
       else toast14.error(res.error || "Failed to update workspace.");
     } catch (error) {
       toast14.error("Service unavailable.");
     } finally {
       setIsSavingOrg(false);
+      setIsUploadingOrgAvatar(false);
     }
   };
   const handleSaveProfile = async (e) => {
@@ -5720,13 +5729,32 @@ var UniversalSettings = ({
     if (isSavingProfile || !onSaveProfile) return;
     setIsSavingProfile(true);
     try {
-      const res = await onSaveProfile({ firstName, lastName, jobTitle, description, avatarUrl });
+      let finalAvatarUrl = avatarUrl;
+      if (pendingUserAvatar && onUploadAvatar) {
+        setIsUploadingUserAvatar(true);
+        try {
+          const res2 = await onUploadAvatar(pendingUserAvatar, "USER");
+          if (res2?.url) {
+            finalAvatarUrl = res2.url;
+            setAvatarUrl(finalAvatarUrl);
+          }
+        } catch (err) {
+          toast14.error("Failed to securely upload profile avatar.");
+          setIsSavingProfile(false);
+          setIsUploadingUserAvatar(false);
+          return;
+        }
+        setPendingUserAvatar(null);
+        setIsUploadingUserAvatar(false);
+      }
+      const res = await onSaveProfile({ firstName, lastName, jobTitle, description, avatarUrl: finalAvatarUrl });
       if (res.success) toast14.success("Identity updated successfully.");
       else toast14.error(res.error || "Failed to update identity.");
     } catch (error) {
       toast14.error("Service unavailable.");
     } finally {
       setIsSavingProfile(false);
+      setIsUploadingUserAvatar(false);
     }
   };
   const hasOrgChanges = orgName !== initialOrgName || orgSlug !== initialOrgSlug || orgAvatarUrl !== initialOrgAvatarUrl;
@@ -5774,6 +5802,7 @@ var UniversalSettings = ({
     setOrgName(initialOrgName || "");
     setOrgSlug(initialOrgSlug || "");
     setOrgAvatarUrl(initialOrgAvatarUrl || "");
+    setPendingOrgAvatar(null);
   }, className: "text-xs tracking-widest text-stone-400 hover:text-black transition-colors outline-none" }, "Cancel")))), activeTab === "ACCOUNT" && /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-8 rounded-2xl p-6 bg-white w-full" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React52.createElement("div", { className: "relative group cursor-pointer shrink-0", onClick: () => !isSavingProfile ? userFileInputRef.current?.click() : void 0 }, /* @__PURE__ */ React52.createElement(MemberAvatar3, { src: avatarUrl, status: "ACTIVE", sizeClass: "w-14 h-14" }), /* @__PURE__ */ React52.createElement("div", { className: "absolute -bottom-1 -right-1 w-6 h-6 bg-white border border-stone-200 rounded-full flex items-center justify-center text-stone-500  group-hover:text-black transition-colors z-20" }, isUploadingUserAvatar ? /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Loading03Icon25, size: 12, className: "animate-spin" }) : /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: PlusSignIcon3, size: 14 })), /* @__PURE__ */ React52.createElement("input", { type: "file", ref: userFileInputRef, className: "hidden", accept: ".png, .jpg, .jpeg", onChange: (e) => handleFileSelect(e, "USER") })), /* @__PURE__ */ React52.createElement("div", null, /* @__PURE__ */ React52.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Personal Identity"), /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-stone-500" }, "Update your system display name and contact email.")))), /* @__PURE__ */ React52.createElement("form", { className: "flex flex-col gap-6 w-full max-w-5xl", onSubmit: handleSaveProfile, autoComplete: "off" }, /* @__PURE__ */ React52.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ React52.createElement(TextInput, { label: "First Name", value: firstName, onChange: (v) => setFirstName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "First name", maxLength: 50 }), /* @__PURE__ */ React52.createElement(TextInput, { label: "Last Name", value: lastName, onChange: (v) => setLastName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "Last name", maxLength: 50 })), /* @__PURE__ */ React52.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ React52.createElement(TextInput, { label: "Job Title", value: jobTitle, onChange: (v) => setJobTitle(v.substring(0, 50)), disabled: isSavingProfile, placeholder: "e.g. HR Manager, CEO", maxLength: 50 }), /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ React52.createElement("input", { type: "email", value: initialEmail, disabled: true, className: "w-full pb-3 pt-3 text-sm bg-transparent text-stone-400 border-b border-stone-200 outline-none cursor-not-allowed" }))), /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "About Me"), /* @__PURE__ */ React52.createElement(
     "textarea",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "20.1.15",
+  "version": "20.1.20",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",