@retinalabsllc/zairusjs 0.2.2 → 0.2.4

package/dist/index.js

@@ -55,6 +55,12 @@ __export(index_exports, {
   TextInput: () => TextInput,
   ThreeDActionButton: () => ThreeDActionButton,
   ThreeDButton: () => ThreeDButton,
+  UniversalHeader: () => UniversalHeader,
+  UniversalIdentityPage: () => UniversalIdentityPage,
+  UniversalMembersPage: () => UniversalMembersPage,
+  UniversalOrganizationPage: () => UniversalOrganizationPage,
+  UniversalProfileSettings: () => UniversalProfileSettings,
+  UniversalSidebar: () => UniversalSidebar,
   ZairusAuth: () => ZairusAuth
 });
 module.exports = __toCommonJS(index_exports);
@@ -1124,12 +1130,11 @@ var PageSpinner = ({
 // src/components/ManagedToaster.tsx
 var import_react29 = __toESM(require("react"));
 var import_react_hot_toast2 = require("react-hot-toast");
-var ManagedToaster = (props) => {
+var ManagedToaster = () => {
   return /* @__PURE__ */ import_react29.default.createElement(
     import_react_hot_toast2.Toaster,
     {
       position: "top-right",
-      ...props,
       toastOptions: {
         style: {
           background: "#171717",
@@ -1151,9 +1156,7 @@ var ManagedToaster = (props) => {
             primary: "#fafafa",
             secondary: "#171717"
           }
-        },
-        ...props.toastOptions
-        // Allows overriding specific toast styles if needed
+        }
       }
     }
   );
@@ -1486,6 +1489,888 @@ var GifFeatureCard = ({
     }
   ), /* @__PURE__ */ import_react35.default.createElement("div", { className: "absolute inset-x-0 bottom-0 p-6 sm:p-8 z-30 flex flex-col justify-end text-left pointer-events-none" }, title && /* @__PURE__ */ import_react35.default.createElement("h3", { className: "text-xl sm:text-2xl md:text-3xl font-medium text-white tracking-tight mb-2 sm:mb-3 drop-shadow-md" }, title), subtitle && /* @__PURE__ */ import_react35.default.createElement("p", { className: "text-[13px] sm:text-[15px] leading-relaxed text-neutral-300 max-w-2xl drop-shadow-sm" }, subtitle)));
 };
+
+// src/components/UniversalSidebar.tsx
+var import_react37 = __toESM(require("react"));
+var import_link10 = __toESM(require("next/link"));
+var import_react38 = require("@hugeicons/react");
+var import_core_free_icons9 = require("@hugeicons/core-free-icons");
+var UniversalSidebar = ({
+  navItems,
+  currentPath,
+  isMobileOpen,
+  closeMobile,
+  onNavClick,
+  showInterceptDialog = false,
+  onCancelIntercept,
+  onConfirmIntercept,
+  interceptTitle = "Discard Changes",
+  interceptMessage = "Are you sure you want to leave? All unsaved changes will be lost."
+}) => {
+  const [isCollapsed, setIsCollapsed] = (0, import_react37.useState)(false);
+  (0, import_react37.useEffect)(() => {
+    if (isMobileOpen) {
+      closeMobile();
+    }
+  }, [currentPath]);
+  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(
+    "div",
+    {
+      className: `fixed inset-0 bg-black/30 shadow-2xl transition-opacity duration-300 md:hidden z-90 ${isMobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`,
+      onClick: closeMobile
+    }
+  ), /* @__PURE__ */ import_react37.default.createElement(
+    "aside",
+    {
+      className: `
+                    fixed md:relative top-0 left-0 h-full bg-white  
+                    transition-all duration-300 ease-in-out shrink-0 flex flex-col z-100 md:z-10
+                    ${isMobileOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}
+                    ${isCollapsed ? "md:w-16 w-64" : "w-64"}
+                `
+    },
+    /* @__PURE__ */ import_react37.default.createElement("div", { className: "md:hidden flex justify-end p-4 shrink-0" }, /* @__PURE__ */ import_react37.default.createElement(
+      "button",
+      {
+        onClick: closeMobile,
+        className: "text-neutral-400 hover:text-black transition-colors outline-none",
+        "aria-label": "Close Menu"
+      },
+      /* @__PURE__ */ import_react37.default.createElement(import_react38.HugeiconsIcon, { icon: import_core_free_icons9.Cancel01Icon, size: 24 })
+    )),
+    /* @__PURE__ */ import_react37.default.createElement("nav", { className: "flex-1 py-6 flex flex-col gap-1.5 px-3 overflow-y-auto custom-scrollbar" }, navItems.map((item) => {
+      const isCurrentRoute = item.path === "/mod" || item.path === "/app" ? currentPath === item.path : currentPath === item.path || currentPath?.startsWith(`${item.path}/`);
+      return /* @__PURE__ */ import_react37.default.createElement(
+        import_link10.default,
+        {
+          key: item.name,
+          href: item.path,
+          onClick: (e) => onNavClick ? onNavClick(e, item.path) : void 0,
+          className: `flex items-center gap-3 px-3 py-2 rounded-full transition-all outline-none group ${isCurrentRoute ? "bg-neutral-100 text-black " : "text-neutral-500 hover:text-black hover:bg-neutral-50"}`,
+          title: isCollapsed && !isMobileOpen ? item.name : void 0
+        },
+        /* @__PURE__ */ import_react37.default.createElement(
+          import_react38.HugeiconsIcon,
+          {
+            icon: item.icon,
+            size: 18,
+            className: `shrink-0 transition-colors ${isCurrentRoute ? "text-black" : "text-neutral-400 group-hover:text-black"}`
+          }
+        ),
+        (!isCollapsed || isMobileOpen) && /* @__PURE__ */ import_react37.default.createElement("span", { className: "text-xs tracking-wide truncate" }, item.name)
+      );
+    })),
+    /* @__PURE__ */ import_react37.default.createElement("div", { className: "p-4 hidden md:block shrink-0" }, /* @__PURE__ */ import_react37.default.createElement(
+      "button",
+      {
+        onClick: () => setIsCollapsed(!isCollapsed),
+        className: "flex items-center justify-center md:justify-start gap-3 w-full p-2.5 rounded-full text-neutral-500 hover:text-black hover:bg-neutral-50 transition-colors outline-none"
+      },
+      /* @__PURE__ */ import_react37.default.createElement(import_react38.HugeiconsIcon, { icon: import_core_free_icons9.SidebarLeft01Icon, size: 18, className: "shrink-0 text-neutral-400" }),
+      !isCollapsed && /* @__PURE__ */ import_react37.default.createElement("span", { className: "text-xs" }, "Collapse")
+    ))
+  ), showInterceptDialog && /* @__PURE__ */ import_react37.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react37.default.createElement(
+    "div",
+    {
+      className: "absolute inset-0 bg-black/30",
+      onClick: onCancelIntercept
+    }
+  ), /* @__PURE__ */ import_react37.default.createElement("div", { className: "relative w-72 bg-white rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react37.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react37.default.createElement("h3", { className: "text-[14px] text-black tracking-tight mb-1" }, interceptTitle), /* @__PURE__ */ import_react37.default.createElement("p", { className: "text-[12px] text-neutral-500 leading-snug mt-2" }, interceptMessage)), /* @__PURE__ */ import_react37.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react37.default.createElement(
+    "button",
+    {
+      onClick: onCancelIntercept,
+      className: "flex-1 py-2 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none"
+    },
+    "Cancel"
+  ), /* @__PURE__ */ import_react37.default.createElement(
+    "button",
+    {
+      onClick: onConfirmIntercept,
+      className: "flex-1 py-2 text-[13px] text-[#F16A50] hover:bg-neutral-50 transition-colors flex justify-center items-center outline-none"
+    },
+    "Leave"
+  )))));
+};
+
+// src/components/UniversalHeader.tsx
+var import_react39 = __toESM(require("react"));
+var import_link11 = __toESM(require("next/link"));
+var import_react40 = require("@hugeicons/react");
+var import_core_free_icons10 = require("@hugeicons/core-free-icons");
+var ButtonSpinner = () => /* @__PURE__ */ import_react39.default.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react39.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react39.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
+var UniversalHeader = ({
+  onOpenMobile,
+  title,
+  subtitle,
+  homeUrl = "/app",
+  showBackButton = false,
+  backUrl = "/app",
+  showWorkspaceSwitcher = false,
+  workspaces = [],
+  activeWorkspaceId,
+  onSwitchWorkspace,
+  showLogoutAction = false,
+  onLogout
+}) => {
+  const [showSwitcherDialog, setShowSwitcherDialog] = (0, import_react39.useState)(false);
+  const [showLogoutDialog, setShowLogoutDialog] = (0, import_react39.useState)(false);
+  const [isLoggingOut, setIsLoggingOut] = (0, import_react39.useState)(false);
+  const handleLogoutInitiation = async () => {
+    if (isLoggingOut || !onLogout) return;
+    setIsLoggingOut(true);
+    try {
+      await onLogout();
+    } catch (error) {
+      setIsLoggingOut(false);
+      setShowLogoutDialog(false);
+    }
+  };
+  return /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-full shrink-0 z-50 flex flex-col relative pointer-events-none" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-full pointer-events-auto relative z-20" }, /* @__PURE__ */ import_react39.default.createElement("header", { className: "w-full bg-white pt-6 pb-3" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "max-w-7xl mx-auto px-6 flex justify-between items-center" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ import_react39.default.createElement(
+    "button",
+    {
+      className: "md:hidden text-neutral-500 hover:text-black transition-colors outline-none",
+      onClick: onOpenMobile,
+      "aria-label": "Open Menu"
+    },
+    /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons10.SidebarLeft01Icon, size: 24 })
+  ), /* @__PURE__ */ import_react39.default.createElement(import_link11.default, { href: homeUrl, className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[13px] text-black leading-none truncate tracking-wide mb-1" }, title), subtitle && /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[9px] text-neutral-500 truncate tracking-[0.2em] leading-none" }, subtitle)))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center gap-3" }, showWorkspaceSwitcher && workspaces.length > 0 && /* @__PURE__ */ import_react39.default.createElement(
+    "button",
+    {
+      onClick: () => setShowSwitcherDialog(true),
+      className: "w-10 h-10 rounded-full border border-neutral-200 bg-white flex items-center justify-center text-neutral-500 hover:text-black hover:border-black hover:bg-neutral-50 transition-all group outline-none",
+      "aria-label": "Switch Workspace"
+    },
+    /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons10.ArrowDataTransferHorizontalIcon, size: 16, className: "transition-transform group-hover:-translate-x-0.5" })
+  ), showLogoutAction && /* @__PURE__ */ import_react39.default.createElement(
+    "button",
+    {
+      onClick: () => setShowLogoutDialog(true),
+      className: "w-10 h-10 rounded-full border border-neutral-200 bg-white flex items-center justify-center text-neutral-500 hover:text-black hover:border-black hover:bg-neutral-50 transition-all group outline-none",
+      "aria-label": "Secure Logout"
+    },
+    /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons10.LogoutCircle02Icon, size: 16, className: "transition-transform group-hover:-translate-x-0.5" })
+  ), showBackButton && /* @__PURE__ */ import_react39.default.createElement(
+    import_link11.default,
+    {
+      href: backUrl,
+      className: "flex items-center justify-center w-10 h-10 border border-neutral-200 bg-white rounded-full text-neutral-500 hover:text-black hover:border-black hover:bg-neutral-50 transition-all group outline-none",
+      "aria-label": "Go Back"
+    },
+    /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons10.ArrowLeft01Icon, size: 16, className: "transition-transform group-hover:-translate-x-0.5" })
+  ))))), showSwitcherDialog && showWorkspaceSwitcher && workspaces.length > 0 && /* @__PURE__ */ import_react39.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react39.default.createElement(
+    "div",
+    {
+      className: "absolute inset-0 bg-black/30",
+      onClick: () => setShowSwitcherDialog(false)
+    }
+  ), /* @__PURE__ */ import_react39.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-5 text-center w-full" }, /* @__PURE__ */ import_react39.default.createElement("h3", { className: "text-[14px] text-black tracking-tight mb-1" }, "Switch Workspace"), /* @__PURE__ */ import_react39.default.createElement("p", { className: "text-[11px] text-neutral-500 leading-snug" }, "Select an organization to switch your current context.")), /* @__PURE__ */ import_react39.default.createElement("div", { className: "max-h-75 overflow-y-auto w-full custom-scrollbar" }, workspaces.map((org) => /* @__PURE__ */ import_react39.default.createElement(
+    "button",
+    {
+      key: org.id,
+      onClick: () => {
+        if (onSwitchWorkspace) onSwitchWorkspace(org.id);
+        setShowSwitcherDialog(false);
+      },
+      className: "w-full text-left px-5 py-4 flex items-center justify-between hover:bg-neutral-50 transition-colors group outline-none last:border-0"
+    },
+    /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col truncate pr-4" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: `text-[13px] truncate ${activeWorkspaceId === org.id ? "text-black" : "text-neutral-600 group-hover:text-black"}` }, org.name), /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[9px] text-neutral-400 tracking-[0.2em] mt-1" }, "Role: ", org.role)),
+    activeWorkspaceId === org.id && /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons10.CheckmarkCircle01Icon, size: 18, className: "text-black shrink-0" })
+  ))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-full flex mt-auto" }, /* @__PURE__ */ import_react39.default.createElement(
+    "button",
+    {
+      onClick: () => setShowSwitcherDialog(false),
+      className: "w-full py-2.5 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none"
+    },
+    "Cancel"
+  )))), showLogoutDialog && showLogoutAction && /* @__PURE__ */ import_react39.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react39.default.createElement(
+    "div",
+    {
+      className: "absolute inset-0 bg-black/30",
+      onClick: () => !isLoggingOut && setShowLogoutDialog(false)
+    }
+  ), /* @__PURE__ */ import_react39.default.createElement("div", { className: "relative w-72 bg-white rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react39.default.createElement("h3", { className: "text-[14px] text-black tracking-tight mb-1" }, "Secure Logout"), /* @__PURE__ */ import_react39.default.createElement("p", { className: "text-[12px] text-neutral-500 leading-snug mt-2" }, "Are you sure you want to log out? You will need to authenticate to return.")), /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react39.default.createElement(
+    "button",
+    {
+      onClick: () => setShowLogoutDialog(false),
+      disabled: isLoggingOut,
+      className: "flex-1 py-2 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none"
+    },
+    "Cancel"
+  ), /* @__PURE__ */ import_react39.default.createElement(
+    "button",
+    {
+      onClick: handleLogoutInitiation,
+      disabled: isLoggingOut,
+      className: "flex-1 py-2 text-[13px] text-[#F16A50] hover:bg-neutral-50 transition-colors disabled:opacity-50 flex justify-center items-center outline-none"
+    },
+    isLoggingOut ? /* @__PURE__ */ import_react39.default.createElement(ButtonSpinner, null) : "Log Out"
+  )))));
+};
+
+// src/components/UniversalOrganizationPage.tsx
+var import_react41 = __toESM(require("react"));
+var import_react_hot_toast3 = __toESM(require("react-hot-toast"));
+var InputSpinner2 = () => /* @__PURE__ */ import_react41.default.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react41.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react41.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
+var UniversalOrganizationPage = ({
+  initialOrgName,
+  initialSlug,
+  orgId,
+  isReadOnly = false,
+  slugPrefixUrl = "ecosystem.com/org/",
+  onSaveConfiguration,
+  onCheckSlugAvailability
+}) => {
+  const [orgName, setOrgName] = (0, import_react41.useState)(initialOrgName);
+  const [slug, setSlug] = (0, import_react41.useState)(initialSlug);
+  const [isCheckingSlug, setIsCheckingSlug] = (0, import_react41.useState)(false);
+  const [slugAvailable, setSlugAvailable] = (0, import_react41.useState)(null);
+  const [isSubmitting, setIsSubmitting] = (0, import_react41.useState)(false);
+  (0, import_react41.useEffect)(() => {
+    setOrgName(initialOrgName || "");
+    setSlug(initialSlug || "");
+  }, [initialOrgName, initialSlug]);
+  const handleOrgNameChange = (val) => {
+    setOrgName(val.replace(/[^a-zA-Z0-9\s-]/g, "").substring(0, 50));
+  };
+  const handleSlugChange = (val) => {
+    setSlug(val.toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").substring(0, 50));
+  };
+  (0, import_react41.useEffect)(() => {
+    if (!slug || slug === initialSlug) {
+      setSlugAvailable(null);
+      setIsCheckingSlug(false);
+      return;
+    }
+    if (slug.length < 3) {
+      setSlugAvailable(false);
+      setIsCheckingSlug(false);
+      return;
+    }
+    setIsCheckingSlug(true);
+    setSlugAvailable(null);
+    const checkTimer = setTimeout(async () => {
+      try {
+        const res = await onCheckSlugAvailability(slug);
+        setSlugAvailable(res.available);
+      } catch (error) {
+        setSlugAvailable(null);
+      } finally {
+        setIsCheckingSlug(false);
+      }
+    }, 1500);
+    return () => clearTimeout(checkTimer);
+  }, [slug, initialSlug, onCheckSlugAvailability]);
+  const handleSave = async (e) => {
+    e.preventDefault();
+    if (isSubmitting || isCheckingSlug || isReadOnly) return;
+    if (slug !== initialSlug && slugAvailable === false) {
+      import_react_hot_toast3.default.error("Please select an available workspace URL.");
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const payload = {
+        organizationId: orgId,
+        organizationName: orgName !== initialOrgName ? orgName : void 0,
+        slug: slug !== initialSlug ? slug : void 0
+      };
+      const responseData = await onSaveConfiguration(payload);
+      if (responseData.success) {
+        import_react_hot_toast3.default.success("Organization updated successfully.");
+        setTimeout(() => window.location.reload(), 1e3);
+      } else {
+        import_react_hot_toast3.default.error(responseData.error || "Failed to update organization.");
+        setIsSubmitting(false);
+      }
+    } catch (error) {
+      import_react_hot_toast3.default.error("Service unavailable. Try again later.");
+      setIsSubmitting(false);
+    }
+  };
+  const hasChanges = orgName !== initialOrgName || slug !== initialSlug;
+  const isSaveDisabled = isSubmitting || isReadOnly || isCheckingSlug || !hasChanges || orgName.length < 3 || slug.length < 3 || slug !== initialSlug && slugAvailable === false;
+  return /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-3xl rounded-2xl p-6 bg-white fade-in duration-300 min-h-full" }, /* @__PURE__ */ import_react41.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react41.default.createElement("div", null, /* @__PURE__ */ import_react41.default.createElement("h1", { className: "text-xl text-black mb-1 tracking-tight" }, "Organization"), /* @__PURE__ */ import_react41.default.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your tenant workspace details and identity.")), isReadOnly && /* @__PURE__ */ import_react41.default.createElement("span", { className: "px-3 py-1 bg-neutral-50 text-neutral-500 rounded-full text-[10px] tracking-[0.2em] shrink-0" }, "Read Only Access")), /* @__PURE__ */ import_react41.default.createElement("div", { className: "w-full max-w-2xl" }, /* @__PURE__ */ import_react41.default.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ import_react41.default.createElement(
+    TextInput,
+    {
+      label: "Organization Name",
+      value: orgName,
+      onChange: handleOrgNameChange,
+      disabled: isReadOnly || isSubmitting,
+      placeholder: "Acme Corporation",
+      maxLength: 50
+    }
+  ), /* @__PURE__ */ import_react41.default.createElement("div", { className: "space-y-2 relative w-full" }, /* @__PURE__ */ import_react41.default.createElement("label", { className: "text-[10px] text-neutral-400 tracking-[0.2em] block uppercase" }, "Organization Slug"), /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex items-center relative w-full" }, /* @__PURE__ */ import_react41.default.createElement("span", { className: "text-neutral-400 text-sm py-3 pr-2 border-b border-neutral-200 shrink-0" }, slugPrefixUrl), /* @__PURE__ */ import_react41.default.createElement(
+    "input",
+    {
+      type: "text",
+      value: slug,
+      disabled: isReadOnly || isSubmitting,
+      onChange: (e) => handleSlugChange(e.target.value),
+      spellCheck: "false",
+      autoComplete: "off",
+      className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black transition-all outline-none focus:border-black pr-8 disabled:opacity-50 disabled:cursor-not-allowed",
+      placeholder: "acme-corp"
+    }
+  ), /* @__PURE__ */ import_react41.default.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ import_react41.default.createElement(InputSpinner2, null), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ import_react41.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ import_react41.default.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react41.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === true && /* @__PURE__ */ import_react41.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ import_react41.default.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react41.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ import_react41.default.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ import_react41.default.createElement(
+    ThreeDActionButton,
+    {
+      type: "submit",
+      disabled: isSaveDisabled,
+      isLoading: isSubmitting,
+      className: "min-w-32"
+    },
+    "Save Changes"
+  ), hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */ import_react41.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setOrgName(initialOrgName);
+        setSlug(initialSlug);
+      },
+      className: "text-[11px] tracking-widest text-neutral-500 hover:text-black transition-colors outline-none"
+    },
+    "Cancel"
+  )))));
+};
+
+// src/components/UniversalIdentityPage.tsx
+var import_react42 = __toESM(require("react"));
+var import_react_hot_toast4 = __toESM(require("react-hot-toast"));
+var ButtonSpinner2 = () => /* @__PURE__ */ import_react42.default.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react42.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react42.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
+var UniversalIdentityPage = ({
+  headerTitle,
+  headerDescription,
+  primaryInputLabel,
+  secondaryInputLabel,
+  initialPrimaryValue,
+  initialSecondaryValue = "",
+  resourceId,
+  isReadOnly = false,
+  allowDeletion = false,
+  deleteWarningText = "This action will permanently delete all records and data for this entity.",
+  onSaveIdentity,
+  onDeleteResource,
+  onSuccessfulDeleteRedirect = "/app"
+}) => {
+  const [primaryValue, setPrimaryValue] = (0, import_react42.useState)(initialPrimaryValue);
+  const [secondaryValue, setSecondaryValue] = (0, import_react42.useState)(initialSecondaryValue);
+  const [isSubmitting, setIsSubmitting] = (0, import_react42.useState)(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = (0, import_react42.useState)(false);
+  const [isDeleting, setIsDeleting] = (0, import_react42.useState)(false);
+  (0, import_react42.useEffect)(() => {
+    setPrimaryValue(initialPrimaryValue || "");
+    setSecondaryValue(initialSecondaryValue || "");
+  }, [initialPrimaryValue, initialSecondaryValue]);
+  const handlePrimaryChange = (val) => {
+    setPrimaryValue(val.replace(/[^a-zA-Z0-9\s-]/g, "").substring(0, 50));
+  };
+  const handleSecondaryChange = (val) => {
+    setSecondaryValue(val.replace(/[^a-zA-Z0-9\s.,!-]/g, "").substring(0, 150));
+  };
+  const handleSave = async (e) => {
+    e.preventDefault();
+    if (isSubmitting || isReadOnly) return;
+    setIsSubmitting(true);
+    try {
+      const res = await onSaveIdentity({
+        resourceId,
+        primaryValue: primaryValue !== initialPrimaryValue ? primaryValue : void 0,
+        secondaryValue: secondaryValue !== initialSecondaryValue ? secondaryValue : void 0
+      });
+      if (res.success) {
+        import_react_hot_toast4.default.success("Update successful.");
+      } else {
+        import_react_hot_toast4.default.error(res.error || "Update failed.");
+      }
+    } catch (error) {
+      import_react_hot_toast4.default.error("Service unavailable.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleDelete = async () => {
+    if (isDeleting || isReadOnly || !onDeleteResource) return;
+    setIsDeleting(true);
+    try {
+      const res = await onDeleteResource(resourceId);
+      if (res.success) {
+        import_react_hot_toast4.default.success("Deletion permanent.");
+        setIsDeleteModalOpen(false);
+        window.location.href = onSuccessfulDeleteRedirect;
+      } else {
+        import_react_hot_toast4.default.error(res.error || "Failed to delete.");
+        setIsDeleting(false);
+      }
+    } catch (error) {
+      import_react_hot_toast4.default.error("Network error occurred.");
+      setIsDeleting(false);
+    }
+  };
+  const hasChanges = primaryValue !== initialPrimaryValue || secondaryValue !== initialSecondaryValue;
+  const isSaveDisabled = isSubmitting || isReadOnly || !hasChanges || primaryValue.trim().length < 3;
+  return /* @__PURE__ */ import_react42.default.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-3xl rounded-2xl p-6 bg-white fade-in duration-300 min-h-full" }, /* @__PURE__ */ import_react42.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react42.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react42.default.createElement("div", null, /* @__PURE__ */ import_react42.default.createElement("h1", { className: "text-xl text-black mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ import_react42.default.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription)), isReadOnly && /* @__PURE__ */ import_react42.default.createElement("span", { className: "px-3 py-1 bg-neutral-50 text-neutral-500 rounded-full text-[10px] tracking-[0.2em] shrink-0" }, "Read Only Access")), /* @__PURE__ */ import_react42.default.createElement("div", { className: "w-full max-w-2xl" }, /* @__PURE__ */ import_react42.default.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ import_react42.default.createElement(
+    TextInput,
+    {
+      label: primaryInputLabel,
+      value: primaryValue,
+      onChange: handlePrimaryChange,
+      disabled: isReadOnly || isSubmitting,
+      maxLength: 50
+    }
+  ), secondaryInputLabel && /* @__PURE__ */ import_react42.default.createElement(
+    TextInput,
+    {
+      label: secondaryInputLabel,
+      value: secondaryValue,
+      onChange: handleSecondaryChange,
+      disabled: isReadOnly || isSubmitting,
+      maxLength: 150
+    }
+  ), !isReadOnly && /* @__PURE__ */ import_react42.default.createElement("div", { className: "pt-8 mt-2 flex flex-col sm:flex-row sm:items-center justify-between gap-6" }, /* @__PURE__ */ import_react42.default.createElement("div", { className: "flex items-center gap-4 w-full sm:w-auto" }, /* @__PURE__ */ import_react42.default.createElement(
+    ThreeDActionButton,
+    {
+      type: "submit",
+      disabled: isSaveDisabled,
+      isLoading: isSubmitting,
+      className: "min-w-32 w-full sm:w-auto"
+    },
+    "Save Changes"
+  ), hasChanges && !isSubmitting && /* @__PURE__ */ import_react42.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setPrimaryValue(initialPrimaryValue);
+        setSecondaryValue(initialSecondaryValue);
+      },
+      className: "text-[11px] tracking-widest text-neutral-500 hover:text-black transition-colors w-full sm:w-auto py-2 sm:py-0 outline-none"
+    },
+    "Cancel"
+  )), allowDeletion && /* @__PURE__ */ import_react42.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsDeleteModalOpen(true),
+      className: "px-6 py-2 text-[11px] tracking-widest text-red-400 border border-red-200 hover:border-red-400 rounded-full transition-all w-full sm:w-auto outline-none"
+    },
+    "Delete ",
+    headerTitle.split(" ")[0]
+  )))), isDeleteModalOpen && !isReadOnly && allowDeletion && /* @__PURE__ */ import_react42.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react42.default.createElement("div", { className: "absolute inset-0 bg-black/30 shadow-2xl", onClick: () => !isDeleting && setIsDeleteModalOpen(false) }), /* @__PURE__ */ import_react42.default.createElement("div", { className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react42.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react42.default.createElement("h3", { className: "text-[14px] text-black tracking-tight mb-1" }, "Confirm Deletion"), /* @__PURE__ */ import_react42.default.createElement("p", { className: "text-[12px] text-neutral-500 leading-snug mt-2" }, deleteWarningText)), /* @__PURE__ */ import_react42.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react42.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsDeleteModalOpen(false),
+      disabled: isDeleting,
+      className: "flex-1 py-2 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none"
+    },
+    "Cancel"
+  ), /* @__PURE__ */ import_react42.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleDelete,
+      disabled: isDeleting,
+      className: "flex-1 py-2 text-[13px] text-red-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 flex justify-center items-center outline-none"
+    },
+    isDeleting ? /* @__PURE__ */ import_react42.default.createElement(ButtonSpinner2, null) : "Delete"
+  )))));
+};
+
+// src/components/UniversalMembersPage.tsx
+var import_react43 = __toESM(require("react"));
+var import_react_hot_toast5 = __toESM(require("react-hot-toast"));
+var import_react44 = require("@hugeicons/react");
+var import_core_free_icons11 = require("@hugeicons/core-free-icons");
+var ButtonSpinner3 = () => /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 16, className: "animate-spin text-white" });
+var PageSpinner2 = () => /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 32, className: "animate-spin mb-4 text-black" }));
+var getInitials = (name) => {
+  if (!name) return "U";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  return parts[0].substring(0, 2).toUpperCase();
+};
+var resolveThemeColor = (colorCode) => {
+  switch (colorCode) {
+    case "COLOR_A":
+      return "bg-blue-100 border-blue-200";
+    case "COLOR_B":
+      return "bg-emerald-100 border-emerald-200";
+    case "COLOR_C":
+      return "bg-rose-100 border-rose-200";
+    case "COLOR_D":
+      return "bg-amber-100 border-amber-200";
+    case "COLOR_E":
+      return "bg-purple-100 border-purple-200";
+    case "COLOR_F":
+      return "bg-pink-100 border-pink-200";
+    default:
+      return "bg-neutral-100 border-neutral-200";
+  }
+};
+var cleanName = (val) => val.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50);
+var UniversalMembersPage = ({
+  headerTitle,
+  headerDescription,
+  currentUserId,
+  members,
+  isLoading,
+  currentPage,
+  totalPages,
+  onPageChange,
+  canManage,
+  canChangeRoles,
+  availableRoles,
+  requireNamesForInvite,
+  onInviteMember,
+  onRemoveMember,
+  onUpdateRole
+}) => {
+  const [currentView, setCurrentView] = (0, import_react43.useState)("list");
+  const [selectedMember, setSelectedMember] = (0, import_react43.useState)(null);
+  const [inviteEmail, setInviteEmail] = (0, import_react43.useState)("");
+  const [inviteFirst, setInviteFirst] = (0, import_react43.useState)("");
+  const [inviteLast, setInviteLast] = (0, import_react43.useState)("");
+  const [isInviting, setIsInviting] = (0, import_react43.useState)(false);
+  const [isRoleModalOpen, setIsRoleModalOpen] = (0, import_react43.useState)(false);
+  const [isUpdatingRole, setIsUpdatingRole] = (0, import_react43.useState)(false);
+  const [memberToDelete, setMemberToDelete] = (0, import_react43.useState)(null);
+  const [isDeleting, setIsDeleting] = (0, import_react43.useState)(false);
+  const dropdownRef = (0, import_react43.useRef)(null);
+  (0, import_react43.useEffect)(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsRoleModalOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleInvite = async (e) => {
+    e.preventDefault();
+    if (isInviting || !canManage) return;
+    setIsInviting(true);
+    try {
+      const res = await onInviteMember(inviteEmail, inviteFirst, inviteLast);
+      if (res.success) {
+        import_react_hot_toast5.default.success("Member added successfully.");
+        setInviteEmail("");
+        setInviteFirst("");
+        setInviteLast("");
+        setCurrentView("list");
+      } else {
+        import_react_hot_toast5.default.error(res.error || "Failed to add member.");
+      }
+    } catch (error) {
+      import_react_hot_toast5.default.error("Service unavailable.");
+    } finally {
+      setIsInviting(false);
+    }
+  };
+  const handleDelete = async () => {
+    if (!memberToDelete || isDeleting || !canManage) return;
+    setIsDeleting(true);
+    try {
+      const res = await onRemoveMember(memberToDelete);
+      if (res.success) {
+        import_react_hot_toast5.default.success("Member removed successfully.");
+        setMemberToDelete(null);
+        setCurrentView("list");
+      } else {
+        import_react_hot_toast5.default.error(res.error || "Failed to remove member.");
+      }
+    } catch (error) {
+      import_react_hot_toast5.default.error("Service unavailable.");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  const handleRoleUpdate = async (newRole) => {
+    if (!selectedMember || isUpdatingRole || selectedMember.role === newRole || !canChangeRoles) {
+      setIsRoleModalOpen(false);
+      return;
+    }
+    setIsRoleModalOpen(false);
+    setIsUpdatingRole(true);
+    try {
+      const res = await onUpdateRole(selectedMember, newRole);
+      if (res.success) {
+        import_react_hot_toast5.default.success("Role updated successfully.");
+        setSelectedMember({ ...selectedMember, role: newRole });
+      } else {
+        import_react_hot_toast5.default.error(res.error || "Failed to update role.");
+      }
+    } catch (error) {
+      import_react_hot_toast5.default.error("Service unavailable.");
+    } finally {
+      setIsUpdatingRole(false);
+    }
+  };
+  const goBack = () => {
+    setCurrentView("list");
+    setSelectedMember(null);
+    setIsRoleModalOpen(false);
+  };
+  return /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-3xl fade-in duration-300 p-6 rounded-2xl bg-white min-h-full" }, /* @__PURE__ */ import_react43.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" && /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("h1", { className: "text-xl text-black mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ import_react43.default.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription)), canManage && /* @__PURE__ */ import_react43.default.createElement(
+    ThreeDActionButton,
+    {
+      onClick: () => setCurrentView("invite"),
+      className: "w-fit shrink-0 gap-2"
+    },
+    /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons11.UserAdd01Icon, size: 12 }),
+    "Add Member"
+  )), currentView !== "list" && /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ import_react43.default.createElement("button", { onClick: goBack, className: "text-[10px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons11.ArrowLeft01Icon, size: 12 }), " Back"), /* @__PURE__ */ import_react43.default.createElement("h1", { className: "text-lg text-black tracking-tight" }, currentView === "invite" ? "Add New Member" : "Member Profile"))), currentView === "list" && /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ import_react43.default.createElement(PageSpinner2, null) : /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "divide-y divide-neutral-100" }, members.map((member) => /* @__PURE__ */ import_react43.default.createElement(
+    "div",
+    {
+      key: member.id,
+      onClick: () => {
+        setSelectedMember(member);
+        setCurrentView("details");
+      },
+      className: "flex items-center justify-between p-4 sm:p-5 hover:bg-neutral-50/50 transition-colors cursor-pointer group min-w-0"
+    },
+    /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex items-center gap-3 sm:gap-4 min-w-0 flex-1" }, member.displayImage && member.displayImage !== "NO_IMAGE" ? /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-10 h-10 shrink-0 rounded-full overflow-hidden bg-neutral-100" }, /* @__PURE__ */ import_react43.default.createElement(
+      "img",
+      {
+        src: member.displayImage,
+        alt: member.fullName,
+        className: "w-full h-full object-cover blur-sm transition-all duration-300",
+        onLoad: (e) => e.currentTarget.classList.remove("blur-sm")
+      }
+    )) : /* @__PURE__ */ import_react43.default.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center text-black text-xs ${resolveThemeColor(member.profileColor)}` }, getInitials(member.fullName)), /* @__PURE__ */ import_react43.default.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ import_react43.default.createElement("p", { className: "text-sm text-black truncate pr-2 sm:pr-4" }, member.fullName, " ", member.userId === currentUserId && /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-neutral-400 ml-1 sm:ml-2" }, "(You)")), /* @__PURE__ */ import_react43.default.createElement("p", { className: "text-xs text-neutral-500 truncate pr-2 sm:pr-4 mt-0.5" }, member.email))),
+    /* @__PURE__ */ import_react43.default.createElement("div", { className: `shrink-0 pl-2 sm:pl-4 transition-opacity hidden sm:block ${canManage ? "opacity-0 group-hover:opacity-100" : "opacity-100"}` }, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-black border border-neutral-200 px-4 py-2 rounded-full bg-white whitespace-nowrap" }, canManage ? "Manage" : "View"))
+  ))), /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex items-center justify-between p-4 sm:p-5" }, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react43.default.createElement(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage - 1),
+      disabled: currentPage === 1 || isLoading,
+      className: "p-2 border border-neutral-200 rounded-full bg-white text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
+    },
+    /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons11.ArrowLeft01Icon, size: 14 })
+  ), /* @__PURE__ */ import_react43.default.createElement(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage + 1),
+      disabled: currentPage >= totalPages || isLoading,
+      className: "p-2 border border-neutral-200 rounded-full bg-white text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
+    },
+    /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons11.ArrowRight01Icon, size: 14 })
+  ))))), currentView === "details" && selectedMember && /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-full max-w-2xl text-left" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex flex-col gap-8" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex items-center gap-5" }, selectedMember.displayImage && selectedMember.displayImage !== "NO_IMAGE" ? /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-16 h-16 shrink-0 rounded-full overflow-hidden bg-neutral-100" }, /* @__PURE__ */ import_react43.default.createElement(
+    "img",
+    {
+      src: selectedMember.displayImage,
+      alt: selectedMember.fullName,
+      className: "w-full h-full object-cover blur-sm transition-all duration-300",
+      onLoad: (e) => e.currentTarget.classList.remove("blur-sm")
+    }
+  )) : /* @__PURE__ */ import_react43.default.createElement("div", { className: `w-16 h-16 shrink-0 rounded-full flex items-center justify-center text-black text-sm ${resolveThemeColor(selectedMember.profileColor)}` }, getInitials(selectedMember.fullName)), /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("h2", { className: "text-lg text-black" }, selectedMember.fullName), /* @__PURE__ */ import_react43.default.createElement("p", { className: "text-sm text-neutral-500 mt-1" }, selectedMember.email))), /* @__PURE__ */ import_react43.default.createElement("div", { className: "grid grid-cols-2 gap-6 border-t border-neutral-200 pt-8" }, /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-3" }, "Role"), canChangeRoles && selectedMember.userId !== currentUserId ? /* @__PURE__ */ import_react43.default.createElement(
+    "button",
+    {
+      onClick: () => !isUpdatingRole && setIsRoleModalOpen(true),
+      disabled: isUpdatingRole,
+      className: `flex items-center gap-3 text-xs text-black pl-4 pr-3 py-2 border rounded-full transition-colors disabled:opacity-50 outline-none ${isRoleModalOpen ? "bg-neutral-50 border-neutral-300" : "bg-white border-neutral-200 hover:bg-neutral-50"}`
+    },
+    selectedMember.role,
+    isUpdatingRole ? /* @__PURE__ */ import_react43.default.createElement(ButtonSpinner3, null) : /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons11.ArrowDown01Icon, size: 14, className: "text-neutral-400" })
+  ) : /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-xs text-black bg-neutral-50 px-4 py-2 rounded-full inline-block" }, selectedMember.role)), /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-3" }, "Joined Date"), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-sm text-black" }, new Date(selectedMember.joinedAt).toLocaleDateString()))), canManage && selectedMember.userId !== currentUserId && /* @__PURE__ */ import_react43.default.createElement("div", { className: "pt-8 mt-2 border-t border-neutral-200" }, /* @__PURE__ */ import_react43.default.createElement(
+    "button",
+    {
+      onClick: () => setMemberToDelete(selectedMember),
+      className: "flex items-center gap-2 text-[11px] tracking-widest text-red-600 hover:text-red-700 transition-colors w-fit outline-none"
+    },
+    /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons11.Delete01Icon, size: 14 }),
+    " Remove Member"
+  )))), currentView === "invite" && canManage && /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-full max-w-2xl text-left" }, /* @__PURE__ */ import_react43.default.createElement("form", { onSubmit: handleInvite, className: "space-y-8", autoComplete: "off" }, /* @__PURE__ */ import_react43.default.createElement(
+    TextInput,
+    {
+      label: "Email Address",
+      value: inviteEmail,
+      onChange: (val) => setInviteEmail(val.toLowerCase()),
+      disabled: isInviting,
+      placeholder: "developer@acme.com"
+    }
+  ), requireNamesForInvite && /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ import_react43.default.createElement(
+    TextInput,
+    {
+      label: "First Name",
+      value: inviteFirst,
+      onChange: (val) => setInviteFirst(cleanName(val)),
+      disabled: isInviting,
+      placeholder: "Jane"
+    }
+  ), /* @__PURE__ */ import_react43.default.createElement(
+    TextInput,
+    {
+      label: "Last Name",
+      value: inviteLast,
+      onChange: (val) => setInviteLast(cleanName(val)),
+      disabled: isInviting,
+      placeholder: "Doe"
+    }
+  )), /* @__PURE__ */ import_react43.default.createElement("div", { className: "pt-8 mt-2" }, /* @__PURE__ */ import_react43.default.createElement(
+    ThreeDActionButton,
+    {
+      type: "submit",
+      disabled: isInviting || !inviteEmail || requireNamesForInvite && (!inviteFirst || !inviteLast),
+      isLoading: isInviting,
+      className: "min-w-40"
+    },
+    "Send Invitation"
+  )))), isRoleModalOpen && canChangeRoles && /* @__PURE__ */ import_react43.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isUpdatingRole && setIsRoleModalOpen(false) }), /* @__PURE__ */ import_react43.default.createElement("div", { ref: dropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react43.default.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Update Role")), /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, availableRoles.map((roleOption) => /* @__PURE__ */ import_react43.default.createElement(
+    "button",
+    {
+      key: roleOption,
+      onClick: () => handleRoleUpdate(roleOption),
+      disabled: isUpdatingRole,
+      className: `text-left px-4 py-3 text-[12px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${selectedMember?.role === roleOption ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
+    },
+    /* @__PURE__ */ import_react43.default.createElement("span", { className: "truncate pr-2" }, roleOption),
+    selectedMember?.role === roleOption && /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-1.5 h-1.5 rounded-full shrink-0 bg-black" })
+  ))), /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react43.default.createElement(
+    "button",
+    {
+      onClick: () => setIsRoleModalOpen(false),
+      disabled: isUpdatingRole,
+      className: "w-full py-2.5 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none"
+    },
+    "Cancel"
+  )))), memberToDelete && canManage && /* @__PURE__ */ import_react43.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isDeleting && setMemberToDelete(null) }), /* @__PURE__ */ import_react43.default.createElement("div", { className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react43.default.createElement("h3", { className: "text-[14px] text-black tracking-tight mb-1" }, "Remove Member"), /* @__PURE__ */ import_react43.default.createElement("p", { className: "text-[12px] text-neutral-500 leading-snug mt-2" }, "Are you sure you want to remove this member? They will lose access instantly.")), /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react43.default.createElement("button", { onClick: () => setMemberToDelete(null), disabled: isDeleting, className: "flex-1 py-2 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none" }, "Cancel"), /* @__PURE__ */ import_react43.default.createElement("button", { onClick: handleDelete, disabled: isDeleting, className: "flex-1 py-2 text-[13px] text-red-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 flex justify-center outline-none" }, isDeleting ? /* @__PURE__ */ import_react43.default.createElement(ButtonSpinner3, null) : "Remove")))));
+};
+
+// src/components/UniversalProfileSettings.tsx
+var import_react45 = __toESM(require("react"));
+var import_react_hot_toast6 = __toESM(require("react-hot-toast"));
+var import_react46 = require("@hugeicons/react");
+var import_core_free_icons12 = require("@hugeicons/core-free-icons");
+var UniversalProfileSettings = ({
+  initialFirstName,
+  initialLastName,
+  email,
+  initialProfileColor,
+  accountStatus = "GOOD",
+  memberSince,
+  isReadOnly = false,
+  themeColors,
+  onSaveProfile
+}) => {
+  const [firstName, setFirstName] = (0, import_react45.useState)(initialFirstName);
+  const [lastName, setLastName] = (0, import_react45.useState)(initialLastName);
+  const [profileColor, setProfileColor] = (0, import_react45.useState)(initialProfileColor);
+  const [isSubmitting, setIsSubmitting] = (0, import_react45.useState)(false);
+  const [isColorModalOpen, setIsColorModalOpen] = (0, import_react45.useState)(false);
+  (0, import_react45.useEffect)(() => {
+    setFirstName(initialFirstName || "");
+    setLastName(initialLastName || "");
+    setProfileColor(initialProfileColor || "NONE");
+  }, [initialFirstName, initialLastName, initialProfileColor]);
+  const handleFirstNameChange = (val) => {
+    setFirstName(val.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50));
+  };
+  const handleLastNameChange = (val) => {
+    setLastName(val.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50));
+  };
+  const handleSave = async (e) => {
+    e.preventDefault();
+    if (isSubmitting || isReadOnly) return;
+    setIsSubmitting(true);
+    try {
+      const res = await onSaveProfile({ firstName, lastName, profileColor });
+      if (res.success) {
+        import_react_hot_toast6.default.success("Profile updated successfully.");
+        setTimeout(() => window.location.reload(), 1e3);
+      } else {
+        import_react_hot_toast6.default.error(res.error || "Failed to update profile.");
+        setIsSubmitting(false);
+      }
+    } catch (error) {
+      import_react_hot_toast6.default.error("Service unavailable. Try again later.");
+      setIsSubmitting(false);
+    }
+  };
+  const hasChanges = firstName !== initialFirstName || lastName !== initialLastName || profileColor !== initialProfileColor;
+  const isSaveDisabled = isSubmitting || isReadOnly || !hasChanges || firstName.trim().length === 0 || lastName.trim().length === 0;
+  const selectedColorDef = themeColors.find((c) => c.id === profileColor) || themeColors[0] || { label: "Default", bgClass: "bg-neutral-100", borderClass: "border-neutral-200" };
+  return /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-col max-w-3xl rounded-2xl p-6 bg-white gap-8 animate-in fade-in duration-300 min-h-full" }, /* @__PURE__ */ import_react45.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react45.default.createElement("h1", { className: "text-xl text-black mb-1 truncate tracking-tight" }, "Personal Settings"), /* @__PURE__ */ import_react45.default.createElement("p", { className: "text-xs text-neutral-500 truncate" }, "Manage your personal account profile.")), isReadOnly && /* @__PURE__ */ import_react45.default.createElement("span", { className: "px-3 py-1 bg-neutral-50 text-neutral-500 rounded-full text-[10px] tracking-[0.2em] shrink-0 w-fit" }, "Read Only Access")), /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-full max-w-2xl" }, /* @__PURE__ */ import_react45.default.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react45.default.createElement(
+    TextInput,
+    {
+      label: "First Name",
+      value: firstName,
+      onChange: handleFirstNameChange,
+      disabled: isReadOnly || isSubmitting,
+      placeholder: "System"
+    }
+  )), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react45.default.createElement(
+    TextInput,
+    {
+      label: "Last Name",
+      value: lastName,
+      onChange: handleLastNameChange,
+      disabled: isReadOnly || isSubmitting,
+      placeholder: "Admin"
+    }
+  ))), /* @__PURE__ */ import_react45.default.createElement("div", { className: "space-y-2 min-w-0" }, /* @__PURE__ */ import_react45.default.createElement(
+    TextInput,
+    {
+      label: "Email ID",
+      value: email,
+      onChange: () => {
+      },
+      disabled: true
+    }
+  ), /* @__PURE__ */ import_react45.default.createElement("p", { className: "text-[10px] text-neutral-400 mt-1 truncate" }, "To change your email address, please contact support.")), /* @__PURE__ */ import_react45.default.createElement("div", { className: "space-y-2 min-w-0" }, /* @__PURE__ */ import_react45.default.createElement("label", { className: "text-[10px] text-neutral-400 tracking-[0.2em] truncate block uppercase" }, "Profile Color"), /* @__PURE__ */ import_react45.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => !isReadOnly && setIsColorModalOpen(true),
+      disabled: isReadOnly || isSubmitting,
+      className: "w-full flex items-center justify-between px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black transition-all outline-none focus:border-black disabled:opacity-50 disabled:cursor-not-allowed text-left"
+    },
+    /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: `w-4 h-4 rounded-full border ${selectedColorDef.bgClass} ${selectedColorDef.borderClass}` }), /* @__PURE__ */ import_react45.default.createElement("span", null, selectedColorDef.label)),
+    /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: import_core_free_icons12.ArrowDown01Icon, size: 14, className: "text-neutral-400 shrink-0" })
+  )), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4 border-t border-neutral-100" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react45.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-[0.2em] block truncate uppercase" }, "Account Status"), /* @__PURE__ */ import_react45.default.createElement("span", { className: "text-xs text-black block truncate" }, accountStatus)), /* @__PURE__ */ import_react45.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react45.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-[0.2em] block truncate uppercase" }, "Member Since"), /* @__PURE__ */ import_react45.default.createElement("span", { className: "text-xs text-black block truncate" }, memberSince ? new Date(memberSince).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "N/A"))), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-col-reverse sm:flex-row items-center gap-3 sm:gap-4 w-full sm:w-auto shrink-0" }, hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */ import_react45.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        setFirstName(initialFirstName);
+        setLastName(initialLastName);
+        setProfileColor(initialProfileColor);
+      },
+      className: "text-[11px] tracking-widest text-neutral-500 hover:text-black transition-colors w-full sm:w-auto py-2 sm:py-0 outline-none"
+    },
+    "Cancel"
+  ), /* @__PURE__ */ import_react45.default.createElement(
+    ThreeDActionButton,
+    {
+      type: "submit",
+      disabled: isSaveDisabled,
+      isLoading: isSubmitting,
+      className: "min-w-32 w-full sm:w-auto"
+    },
+    "Save Changes"
+  ))))), isColorModalOpen && !isReadOnly && /* @__PURE__ */ import_react45.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsColorModalOpen(false) }), /* @__PURE__ */ import_react45.default.createElement("div", { className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react45.default.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Pick Profile Color")), /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 pb-2" }, themeColors.map((colorOption) => /* @__PURE__ */ import_react45.default.createElement(
+    "button",
+    {
+      type: "button",
+      key: colorOption.id,
+      onClick: () => {
+        setProfileColor(colorOption.id);
+        setIsColorModalOpen(false);
+      },
+      className: `text-left px-4 py-3 text-[12px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${profileColor === colorOption.id ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
+    },
+    /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: `w-3.5 h-3.5 rounded-full border ${colorOption.bgClass} ${colorOption.borderClass}` }), /* @__PURE__ */ import_react45.default.createElement("span", { className: "truncate pr-2" }, colorOption.label)),
+    profileColor === colorOption.id && /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-1.5 h-1.5 rounded-full shrink-0 bg-black" })
+  ))), /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react45.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsColorModalOpen(false),
+      className: "w-full py-2.5 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none"
+    },
+    "Cancel"
+  )))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AITranscriptionFeature,
@@ -1512,5 +2397,11 @@ var GifFeatureCard = ({
   TextInput,
   ThreeDActionButton,
   ThreeDButton,
+  UniversalHeader,
+  UniversalIdentityPage,
+  UniversalMembersPage,
+  UniversalOrganizationPage,
+  UniversalProfileSettings,
+  UniversalSidebar,
   ZairusAuth
 });