@streamoid/settings 0.4.7 → 0.6.1

package/dist/index.mjs

@@ -7,7 +7,6 @@ import {
 } from "react";
 import {
   ScSidebarMenu,
-  ScVDivider,
   ScHDivider,
   ScMenuOptions
 } from "@streamoid/ui";
@@ -1476,7 +1475,11 @@ var TAB_LABELS = {
   organizationWorkspaces: "Workspaces",
   organizationDomains: "Domains & requests",
   referral: "Referral",
-  billing: "Billing",
+  /* "Billing & usage", not "Billing". The tab has held usage history as well
+     as the plan and invoices since the credits work, and hosts had started
+     saying "Billing & usage" in their own rails while this said "Billing" —
+     so the nav item and the thing it opened disagreed by a word. */
+  billing: "Billing & usage",
   apikey: "API Keys"
 };
 var TAB_DESCRIPTIONS = {
@@ -1564,7 +1567,7 @@ function ScopeHeader({
 }) {
   const displayName = name?.trim() || (kind === "workspace" ? "Workspace" : "Organization");
   const ScopeIcon = kind === "workspace" ? SiconWorkspace : SiconGlobe;
-  const roleLabel = role === "admin" ? "You're an admin" : role ? "You're a member" : null;
+  const roleLabel = role === "admin" ? "You're an admin" : role === "member" ? "You're a member" : role === "guest" ? "You're a guest" : null;
   const detail = [roleLabel, ...facts].filter((part) => typeof part === "string" && part.length > 0).join(" \xB7 ");
   return /* @__PURE__ */ jsxs5(
     "div",
@@ -2062,8 +2065,9 @@ function OrganizationAffiliationCard({
     let cancelled = false;
     organizationAdapter.list().then((orgs) => {
       if (cancelled) return;
-      setAvailableOrgs(orgs);
-      setSelectedOrgId((prev) => prev || orgs[0]?._id || "");
+      const joinable = orgs.filter((org) => org.role !== "guest");
+      setAvailableOrgs(joinable);
+      setSelectedOrgId((prev) => prev || joinable[0]?._id || "");
     }).catch(() => {
       if (!cancelled) setAvailableOrgs([]);
     });
@@ -2564,12 +2568,19 @@ function InviteUpdateModal({
   onSave,
   onRemove,
   canRemove = true,
+  showOrganizationStanding = false,
+  organizationName,
+  allowGuestStanding = true,
+  initialOrganizationStanding = "guest",
   onInvite
 }) {
   useOverlayOpen(open, onClose);
   const [emailValue, setEmailValue] = useState5("");
   const [hasChanges, setHasChanges] = useState5(false);
   const [role, setRole] = useState5("admin");
+  const [orgStanding, setOrgStanding] = useState5(
+    initialOrganizationStanding
+  );
   const [canUseCredits, setCanUseCredits] = useState5(false);
   const [canInviteUser, setCanInviteUser] = useState5(false);
   const [artifaxOn, setArtifaxOn] = useState5(!hiddenApps.includes("artifax"));
@@ -2606,6 +2617,7 @@ function InviteUpdateModal({
       setEmailValue("");
       setHasChanges(false);
       setRole("admin");
+      setOrgStanding(initialOrganizationStanding);
       setCanUseCredits(true);
       setCanInviteUser(true);
       setArtifaxOn(!hidden.has("artifax"));
@@ -2615,7 +2627,7 @@ function InviteUpdateModal({
       setStoreSearch("");
       setSelectedStores(/* @__PURE__ */ new Set());
     }
-  }, [open, initialPermissions, hiddenKey]);
+  }, [open, initialPermissions, hiddenKey, initialOrganizationStanding]);
   if (!open) return null;
   const isInvite = mode === "invite";
   const hasEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue.trim());
@@ -2991,6 +3003,95 @@ function InviteUpdateModal({
                       ]
                     }
                   ),
+                  showOrganizationStanding && mode === "invite" && /* @__PURE__ */ jsxs8(
+                    "div",
+                    {
+                      className: "flex flex-col items-start justify-center shrink-0 w-full",
+                      style: { gap: T6.spXs },
+                      children: [
+                        /* @__PURE__ */ jsx10(FieldLabel2, { text: "Organization access" }),
+                        /* @__PURE__ */ jsxs8(
+                          "div",
+                          {
+                            className: "shrink-0 w-full relative",
+                            style: { borderRadius: T6.rXl },
+                            children: [
+                              /* @__PURE__ */ jsx10(
+                                "div",
+                                {
+                                  "aria-hidden": true,
+                                  className: "absolute inset-0 pointer-events-none",
+                                  style: {
+                                    border: `0.5px solid ${T6.borderSubtle}`,
+                                    borderRadius: T6.rXl
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx10("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx10(
+                                "div",
+                                {
+                                  className: "flex items-center w-full",
+                                  style: { padding: T6.spXs },
+                                  children: [
+                                    ["colleague", "Colleague"],
+                                    ...allowGuestStanding ? [["guest", "Guest"]] : []
+                                  ].map(([value, label]) => /* @__PURE__ */ jsx10(
+                                    "div",
+                                    {
+                                      className: "flex-1 min-w-0 cursor-pointer",
+                                      style: {
+                                        background: orgStanding === value ? T6.neutral300 : "transparent",
+                                        borderRadius: T6.rMd
+                                      },
+                                      onClick: () => {
+                                        setOrgStanding(value);
+                                        markChanged();
+                                      },
+                                      children: /* @__PURE__ */ jsx10("div", { className: "flex flex-row items-center justify-center size-full", children: /* @__PURE__ */ jsx10(
+                                        "div",
+                                        {
+                                          className: "flex items-center justify-center w-full",
+                                          style: { padding: T6.spMd },
+                                          children: /* @__PURE__ */ jsx10(
+                                            "span",
+                                            {
+                                              style: {
+                                                fontFamily: T6.font,
+                                                fontSize: T6.fsSm,
+                                                fontWeight: orgStanding === value ? 500 : 400,
+                                                lineHeight: T6.lhSm,
+                                                color: orgStanding === value ? T6.inverse : T6.muted,
+                                                textAlign: "center"
+                                              },
+                                              children: label
+                                            }
+                                          )
+                                        }
+                                      ) })
+                                    },
+                                    value
+                                  ))
+                                }
+                              ) })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx10(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: T6.font,
+                              fontSize: T6.fsXs,
+                              fontWeight: 400,
+                              lineHeight: T6.lhXs,
+                              color: T6.tertiary
+                            },
+                            children: orgStanding === "colleague" ? `Joins ${organizationName || "the organization"} as a member \u2014 they'll also see its shared workspaces.` : `This workspace only. They see nothing else in ${organizationName || "the organization"}.`
+                          }
+                        )
+                      ]
+                    }
+                  ),
                   role !== "admin" && shownApps.length > 0 && /* @__PURE__ */ jsxs8(
                     "div",
                     {
@@ -3623,7 +3724,11 @@ function InviteUpdateModal({
                             catalogixStores: role === "admin" || showsApp("catalogix") ? Array.from(selectedStores) : []
                           };
                           if (isInvite && onInvite) {
-                            onInvite(perms, emailValue.trim());
+                            onInvite(
+                              perms,
+                              emailValue.trim(),
+                              showOrganizationStanding ? orgStanding : void 0
+                            );
                           } else if (onSave) {
                             onSave(perms);
                           }
@@ -4353,7 +4458,7 @@ function TeamsContent({
   organizationName,
   hiddenApps
 } = {}) {
-  const { auth, api, workspace, toast } = useSettingsAdapters();
+  const { auth, api, workspace, organization, toast } = useSettingsAdapters();
   const user = auth.user;
   const [activeTab, setActiveTab] = useState6("active");
   const [activeMembers, setActiveMembers] = useState6([]);
@@ -4655,7 +4760,7 @@ function TeamsContent({
       toast.error(msg);
     }
   };
-  const handleInvite = async (permissions, email) => {
+  const handleInvite = async (permissions, email, organizationStanding) => {
     if (highestRole === "member") {
       toast.error("You do not have permission to invite users");
       closeModal();
@@ -4669,7 +4774,12 @@ function TeamsContent({
         inviteAccess: permissions.canInviteUser,
         role: permissions.role,
         serviceIds,
-        storeIds: permissions.catalogixStores || []
+        storeIds: permissions.catalogixStores || [],
+        // Omitted when the control was never shown, which leaves the backend
+        // deriving the standing from the invitee's email domain as before.
+        ...organizationStanding ? {
+          organizationRole: organizationStanding === "colleague" ? "member" : "guest"
+        } : {}
       });
       toast.success(`Invitation sent to ${email}`);
       await fetchData();
@@ -4690,6 +4800,9 @@ function TeamsContent({
   const members = activeTab === "active" ? filteredActive : filteredPending;
   const workspaceCurrent = workspace.current;
   const orgVisibility = workspaceCurrent?.orgVisibility ?? "private";
+  const workspaceOrgId = workspaceCurrent?.organizationId;
+  const orgCurrent = organization.current;
+  const mayGrantOrgMembership = !!workspaceOrgId && orgCurrent?.id === workspaceOrgId && orgCurrent?.role !== "guest" && (orgCurrent?.role === "admin" || orgCurrent?.inviteAccess === true);
   const teamInnerContent = /* @__PURE__ */ jsxs10(Fragment6, { children: [
     /* @__PURE__ */ jsx12(
       ScopeHeader,
@@ -4797,6 +4910,8 @@ function TeamsContent({
           // Must be admin or have invite permission, AND cannot remove yourself
           (highestRole === "admin" || currentMemberPermissions?.canInviteUser === true) && modal.target?.userId !== user?.id
         ),
+        showOrganizationStanding: mayGrantOrgMembership,
+        organizationName: organizationName ?? orgCurrent?.name,
         onInvite: handleInvite
       }
     )
@@ -5005,6 +5120,10 @@ function OrganizationInviteModal({
   mode,
   userEmail = "email@domain.in",
   initialRole,
+  lockRole,
+  canClaimDomain = true,
+  claimableDomain,
+  lockedRoleLabel,
   initialInviteAccess,
   allowSubmitWithoutChanges = false,
   canRemove = true,
@@ -5017,7 +5136,7 @@ function OrganizationInviteModal({
   useOverlayOpen(open, onClose);
   const [inviteMode, setInviteMode] = useState7("email");
   const [emailValue, setEmailValue] = useState7("");
-  const [domainValue, setDomainValue] = useState7("");
+  const [domainValue, setDomainValue] = useState7(claimableDomain ?? "");
   const [hasChanges, setHasChanges] = useState7(false);
   const [role, setRole] = useState7("admin");
   const [inviteAccess, setInviteAccess] = useState7(false);
@@ -5029,19 +5148,22 @@ function OrganizationInviteModal({
     if (!open) {
       setInviteMode("email");
       setEmailValue("");
-      setDomainValue("");
+      setDomainValue(claimableDomain ?? "");
       setHasChanges(false);
       setRole("admin");
       setInviteAccess(true);
     }
-  }, [open, mode, initialRole, initialInviteAccess]);
+  }, [open, mode, initialRole, initialInviteAccess, claimableDomain]);
   if (!open) return null;
   const isInvite = mode === "invite";
   const isEmailInvite = isInvite && inviteMode === "email";
   const isDomainInvite = isInvite && inviteMode === "domain";
   const hasEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue.trim());
   const hasDomain = /^[^\s@]+\.[^\s@]+$/.test(domainValue.trim());
-  const isSubmitDisabled = isEmailInvite ? !hasEmail : isDomainInvite ? !hasDomain : !(allowSubmitWithoutChanges || hasChanges);
+  const isSubmitDisabled = isEmailInvite ? !hasEmail : isDomainInvite ? !hasDomain : (
+    // A locked role has nothing this modal can legitimately submit.
+    lockRole || !(allowSubmitWithoutChanges || hasChanges)
+  );
   function markChanged() {
     setHasChanges(true);
   }
@@ -5116,7 +5238,7 @@ function OrganizationInviteModal({
                 className: "flex flex-col items-start w-full",
                 style: { padding: `${T9.sp3xl} ${T9.sp6xl}`, gap: T9.sp3xl },
                 children: [
-                  isInvite && /* @__PURE__ */ jsxs11(
+                  isInvite && canClaimDomain && /* @__PURE__ */ jsxs11(
                     "div",
                     {
                       className: "flex flex-col items-start justify-center shrink-0 w-full",
@@ -5177,9 +5299,9 @@ function OrganizationInviteModal({
                                     }
                                   ),
                                   isDomainInvite && /* @__PURE__ */ jsx13(
-                                    "input",
+                                    "span",
                                     {
-                                      className: "flex-1 min-w-0 bg-transparent border-none outline-none",
+                                      className: "flex-1 min-w-0 truncate",
                                       style: {
                                         fontFamily: T9.font,
                                         fontSize: T9.fsSm,
@@ -5187,9 +5309,7 @@ function OrganizationInviteModal({
                                         lineHeight: T9.lhSm,
                                         color: T9.primary
                                       },
-                                      placeholder: "streamoid.com",
-                                      value: domainValue,
-                                      onChange: (e) => setDomainValue(e.target.value)
+                                      children: domainValue
                                     }
                                   ),
                                   !isInvite && /* @__PURE__ */ jsx13(
@@ -5222,9 +5342,10 @@ function OrganizationInviteModal({
                               color: T9.muted
                             },
                             children: [
-                              "Anyone signing up or logging in with a verified ",
-                              domainValue.trim() || "this",
-                              " email address will automatically join this organization going forward."
+                              "Anyone who signs up or logs in with an @",
+                              domainValue.trim(),
+                              " ",
+                              "address will automatically join this organization from now on."
                             ]
                           }
                         )
@@ -5238,7 +5359,21 @@ function OrganizationInviteModal({
                       style: { gap: T9.spXs },
                       children: [
                         /* @__PURE__ */ jsx13(FieldLabel3, { text: isDomainInvite ? "Auto-join role" : "Role" }),
-                        /* @__PURE__ */ jsx13(
+                        lockRole ? /* @__PURE__ */ jsxs11(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: T9.font,
+                              fontSize: T9.fsSm,
+                              lineHeight: T9.lhSm,
+                              color: T9.muted
+                            },
+                            children: [
+                              lockedRoleLabel || "Guest",
+                              " \u2014 invited to specific workspaces only, with no access to the rest of the organization. Remove them to end that access."
+                            ]
+                          }
+                        ) : /* @__PURE__ */ jsx13(
                           SegmentedToggle,
                           {
                             options: [
@@ -5256,7 +5391,7 @@ function OrganizationInviteModal({
                       ]
                     }
                   ),
-                  !isDomainInvite && role === "member" && /* @__PURE__ */ jsxs11(
+                  !isDomainInvite && !lockRole && role === "member" && /* @__PURE__ */ jsxs11(
                     "div",
                     {
                       className: "flex items-center shrink-0 w-full cursor-pointer",
@@ -5770,6 +5905,12 @@ function OrganizationModal({
 
 // src/organization-content.tsx
 import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function orgRoleLabel(role) {
+  if (role === "admin") return "Org admin";
+  if (role === "member") return "Member";
+  if (role === "guest") return "Guest";
+  return role || "Member";
+}
 var T11 = {
   primary: "var(--alias-text---icons-primary)",
   inverse: "var(--alias-text---icons-inverse)",
@@ -5913,7 +6054,7 @@ function MemberRow({
           RoleChip,
           {
             role: member.role === "admin" ? "admin" : "member",
-            label: member.role === "admin" ? "Org admin" : "Member"
+            label: orgRoleLabel(member.role)
           }
         ),
         /* @__PURE__ */ jsx15(
@@ -6021,7 +6162,7 @@ function InviteRow({
           RoleChip,
           {
             role: role === "admin" ? "admin" : "member",
-            label: role === "admin" ? "Org admin" : "Member"
+            label: orgRoleLabel(role)
           }
         ),
         /* @__PURE__ */ jsx15(
@@ -6168,7 +6309,8 @@ function JoinRequestRow({
 function Section({
   title,
   children,
-  empty
+  empty,
+  emptyText
 }) {
   return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-start shrink-0 w-full", style: { gap: T11.spMd }, children: [
     /* @__PURE__ */ jsx15(
@@ -6203,7 +6345,7 @@ function Section({
               lineHeight: T11.lhSm,
               color: T11.muted
             },
-            children: "Nothing here yet"
+            children: emptyText ?? "Nothing here yet"
           }
         ) }) : children
       }
@@ -6223,7 +6365,9 @@ function OrganizationContent({
   const [invites, setInvites] = useState9([]);
   const [workspaces, setWorkspaces] = useState9([]);
   const [joinRequests, setJoinRequests] = useState9([]);
-  const [highestRole, setHighestRole] = useState9("admin");
+  const [highestRole, setHighestRole] = useState9("guest");
+  const [emailDomain, setEmailDomain] = useState9(null);
+  const [canClaimEmailDomain, setCanClaimEmailDomain] = useState9(true);
   const [searchQuery, setSearchQuery] = useState9("");
   const [loadingData, setLoadingData] = useState9(false);
   const [modal, setModal] = useState9({ open: false, mode: "invite" });
@@ -6238,6 +6382,12 @@ function OrganizationContent({
         organization.getHighestRole?.().catch(() => null) ?? Promise.resolve(null)
       ]);
       if (highestRoleRes?.role) setHighestRole(highestRoleRes.role);
+      if (highestRoleRes?.emailDomain !== void 0) {
+        setEmailDomain(highestRoleRes.emailDomain ?? null);
+      }
+      if (highestRoleRes?.canClaimEmailDomain !== void 0) {
+        setCanClaimEmailDomain(highestRoleRes.canClaimEmailDomain);
+      }
       if (membersRes) setMembers(membersRes.filter((m) => m?.user));
       if (invitesRes) setInvites(invitesRes);
       if (workspacesRes) setWorkspaces(workspacesRes);
@@ -6328,7 +6478,7 @@ function OrganizationContent({
   const openUpdateModal = (member) => setModal({ open: true, mode: "update", target: member });
   const closeModal = () => setModal({ open: false, mode: "invite" });
   const handleInviteEmail = async (input) => {
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to invite members");
       closeModal();
       return;
@@ -6343,7 +6493,7 @@ function OrganizationContent({
     }
   };
   const handleInviteDomain = async (input) => {
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to invite members");
       closeModal();
       return;
@@ -6363,7 +6513,7 @@ function OrganizationContent({
       closeModal();
       return;
     }
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to manage members");
       closeModal();
       return;
@@ -6396,7 +6546,7 @@ function OrganizationContent({
       closeModal();
       return;
     }
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to manage members");
       closeModal();
       return;
@@ -6415,7 +6565,7 @@ function OrganizationContent({
     closeModal();
   };
   const handleCancelInvite = async (invite) => {
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to manage invites");
       return;
     }
@@ -6440,7 +6590,7 @@ function OrganizationContent({
   };
   const handleResendInvite = async (invite) => {
     if (invite.kind !== "email") return;
-    if (highestRole === "member") {
+    if (highestRole !== "admin") {
       toast.error("You do not have permission to invite members");
       return;
     }
@@ -6656,14 +6806,22 @@ function OrganizationContent({
     }
   );
   const domainsView = /* @__PURE__ */ jsxs13(Fragment9, { children: [
-    /* @__PURE__ */ jsx15(Section, { title: "Auto-join by email domain", empty: domainInvites.length === 0, children: domainInvites.map((inv) => /* @__PURE__ */ jsx15(
-      InviteRow,
+    /* @__PURE__ */ jsx15(
+      Section,
       {
-        invite: inv,
-        onCancel: () => void handleCancelInvite(inv)
-      },
-      inv._id
-    )) }),
+        title: "Auto-join by email domain",
+        empty: domainInvites.length === 0,
+        emptyText: canClaimEmailDomain ? void 0 : `Auto-join needs a company email domain.${emailDomain ? ` ${emailDomain} is a public email provider, so it` : " A public email provider"} can't be claimed \u2014 invite people by email instead.`,
+        children: domainInvites.map((inv) => /* @__PURE__ */ jsx15(
+          InviteRow,
+          {
+            invite: inv,
+            onCancel: () => void handleCancelInvite(inv)
+          },
+          inv._id
+        ))
+      }
+    ),
     /* @__PURE__ */ jsx15(
       Section,
       {
@@ -6693,10 +6851,14 @@ function OrganizationContent({
         open: modal.open,
         mode: modal.mode,
         userEmail: modal.target?.user.email,
-        initialRole: modal.target?.role,
+        initialRole: modal.target?.role === "admin" || modal.target?.role === "member" ? modal.target.role : void 0,
         initialInviteAccess: modal.target?.inviteAccess,
         allowSubmitWithoutChanges: false,
+        lockRole: modal.target?.role === "guest",
+        lockedRoleLabel: orgRoleLabel(modal.target?.role),
         canRemove: highestRole === "admin",
+        canClaimDomain: canClaimEmailDomain,
+        claimableDomain: emailDomain,
         onClose: closeModal,
         onInviteEmail: handleInviteEmail,
         onInviteDomain: handleInviteDomain,
@@ -6766,7 +6928,7 @@ function OrganizationContent({
               variant: "primary",
               size: "md",
               styleVariant: "icon-left",
-              state: highestRole === "member" ? "disabled" : "default",
+              state: highestRole !== "admin" ? "disabled" : "default",
               icon: /* @__PURE__ */ jsx15(SiconUserAdd2, { className: "w-5 h-5", color: "var(--alias-text---icons-inverse)" }),
               onClick: openInviteModal
             }
@@ -10818,194 +10980,202 @@ function ProfileTab() {
     }
     auth.clearAuth();
   };
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: "flex flex-col items-start flex-1 min-w-0",
       style: { gap: "var(--spacing-3xl)" },
-      children: /* @__PURE__ */ jsxs18(
-        "div",
-        {
-          className: "flex items-start w-full",
-          style: {
-            backgroundColor: "var(--alias-surface-base)",
-            borderRadius: "var(--radius-3xl)",
-            border: "1px solid var(--alias-border-subtle)",
-            padding: "var(--spacing-6xl)",
-            gap: "var(--spacing-6xl)"
-          },
-          children: [
-            /* @__PURE__ */ jsxs18(
-              "div",
-              {
-                className: "flex flex-col items-center shrink-0",
-                style: { gap: "var(--spacing-md)", width: 120 },
-                children: [
-                  profileImage ? /* @__PURE__ */ jsx20(
-                    "img",
-                    {
-                      src: profileImage,
-                      alt: "Profile",
-                      style: {
-                        width: 100,
-                        height: 100,
-                        borderRadius: "var(--radius-full)",
-                        objectFit: "cover",
-                        flexShrink: 0
-                      }
-                    }
-                  ) : /* @__PURE__ */ jsx20(
-                    "div",
-                    {
-                      "aria-label": "Profile",
-                      className: "flex items-center justify-center",
-                      style: {
-                        width: 100,
-                        height: 100,
-                        borderRadius: "var(--radius-full)",
-                        backgroundColor: "var(--alias-surface-raised)",
-                        border: "1px solid var(--alias-border-subtle)",
-                        flexShrink: 0
-                      },
-                      children: /* @__PURE__ */ jsx20(
-                        "span",
-                        {
-                          style: {
-                            color: "var(--alias-text---icons-primary)",
-                            fontFamily: "var(--font-family-font-family-display)",
-                            fontSize: 34,
-                            fontWeight: 600,
-                            lineHeight: "34px"
-                          },
-                          children: profileInitial
+      children: [
+        /* @__PURE__ */ jsxs18(
+          "div",
+          {
+            className: "flex items-start w-full",
+            style: {
+              backgroundColor: "var(--alias-surface-base)",
+              borderRadius: "var(--radius-3xl)",
+              border: "1px solid var(--alias-border-subtle)",
+              padding: "var(--spacing-6xl)",
+              gap: "var(--spacing-6xl)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs18(
+                "div",
+                {
+                  className: "flex flex-col items-center shrink-0",
+                  style: { gap: "var(--spacing-md)", width: 120 },
+                  children: [
+                    profileImage ? /* @__PURE__ */ jsx20(
+                      "img",
+                      {
+                        src: profileImage,
+                        alt: "Profile",
+                        style: {
+                          width: 100,
+                          height: 100,
+                          borderRadius: "var(--radius-full)",
+                          objectFit: "cover",
+                          flexShrink: 0
                         }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx20(
-                    "input",
-                    {
-                      ref: fileInputRef,
-                      type: "file",
-                      accept: "image/*",
-                      style: { display: "none" },
-                      onChange: handleImageChange
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-center", style: { gap: 10 }, children: [
-                    /* @__PURE__ */ jsx20(
-                      ScButton7,
+                      }
+                    ) : /* @__PURE__ */ jsx20(
+                      "div",
                       {
-                        icon: /* @__PURE__ */ jsx20(SiconUpload2, { className: "w-5 h-5", color: PRIMARY_COLOR3 }),
-                        styleVariant: "icon-only",
-                        variant: "tertiary",
-                        size: "md",
-                        state: disableAllActions ? "disabled" : "default",
-                        onClick: handleUploadClick
+                        "aria-label": "Profile",
+                        className: "flex items-center justify-center",
+                        style: {
+                          width: 100,
+                          height: 100,
+                          borderRadius: "var(--radius-full)",
+                          backgroundColor: "var(--alias-surface-raised)",
+                          border: "1px solid var(--alias-border-subtle)",
+                          flexShrink: 0
+                        },
+                        children: /* @__PURE__ */ jsx20(
+                          "span",
+                          {
+                            style: {
+                              color: "var(--alias-text---icons-primary)",
+                              fontFamily: "var(--font-family-font-family-display)",
+                              fontSize: 34,
+                              fontWeight: 600,
+                              lineHeight: "34px"
+                            },
+                            children: profileInitial
+                          }
+                        )
                       }
                     ),
-                    /* @__PURE__ */ jsx20(ScVDivider, {}),
                     /* @__PURE__ */ jsx20(
-                      ScButton7,
+                      "input",
                       {
-                        icon: /* @__PURE__ */ jsx20(
-                          SiconDelete,
-                          {
-                            className: "w-5 h-5",
-                            color: "var(--primitives-error-500)"
-                          }
-                        ),
-                        styleVariant: "icon-only",
-                        variant: "tertiary",
-                        size: "md",
-                        state: disableAllActions || !profileImage ? "disabled" : "default",
-                        onClick: handleDeleteImage
+                        ref: fileInputRef,
+                        type: "file",
+                        accept: "image/*",
+                        style: { display: "none" },
+                        onChange: handleImageChange
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs18(
+                      "div",
+                      {
+                        className: "flex flex-col items-stretch w-full",
+                        style: { gap: "var(--spacing-md)" },
+                        children: [
+                          /* @__PURE__ */ jsx20(
+                            ScButton7,
+                            {
+                              text: "Upload photo",
+                              icon: /* @__PURE__ */ jsx20(SiconUpload2, { className: "w-5 h-5", color: PRIMARY_COLOR3 }),
+                              styleVariant: "icon-left",
+                              variant: "outline",
+                              size: "md",
+                              state: disableAllActions ? "disabled" : "default",
+                              onClick: handleUploadClick
+                            }
+                          ),
+                          /* @__PURE__ */ jsx20(
+                            ScButton7,
+                            {
+                              text: "Remove photo",
+                              icon: /* @__PURE__ */ jsx20(
+                                SiconDelete,
+                                {
+                                  className: "w-5 h-5",
+                                  color: PRIMARY_COLOR3
+                                }
+                              ),
+                              styleVariant: "icon-left",
+                              variant: "outline",
+                              size: "md",
+                              state: disableAllActions || !profileImage ? "disabled" : "default",
+                              onClick: handleDeleteImage
+                            }
+                          )
+                        ]
                       }
                     )
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx20(
-              "div",
-              {
-                className: "shrink-0",
-                style: {
-                  width: 0,
-                  alignSelf: "stretch",
-                  borderLeft: "0.5px solid var(--alias-border-divider)"
+                  ]
                 }
-              }
-            ),
-            /* @__PURE__ */ jsxs18(
-              "div",
-              {
-                className: "flex flex-col flex-1 min-w-0",
-                style: { gap: "var(--spacing-3xl)" },
-                children: [
-                  /* @__PURE__ */ jsxs18("div", { className: "flex items-start w-full", style: { gap: "var(--spacing-3xl)" }, children: [
-                    /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx20(
+              ),
+              /* @__PURE__ */ jsx20(
+                "div",
+                {
+                  className: "shrink-0",
+                  style: {
+                    width: 0,
+                    alignSelf: "stretch",
+                    borderLeft: "0.5px solid var(--alias-border-divider)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs18(
+                "div",
+                {
+                  className: "flex flex-col flex-1 min-w-0",
+                  style: { gap: "var(--spacing-3xl)" },
+                  children: [
+                    /* @__PURE__ */ jsxs18("div", { className: "flex items-start w-full", style: { gap: "var(--spacing-3xl)" }, children: [
+                      /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx20(
+                        ScTextField,
+                        {
+                          label: "Full Name",
+                          labelGroup: "label",
+                          state: "filled",
+                          placeholderFilled: "Enter your name",
+                          tfGroup: "none",
+                          className: "sc-text-field-full-width",
+                          style: { width: "100%" },
+                          value: fullName,
+                          onChange: (e) => setFullName(e.target.value)
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx20(
+                        SpecializationDropdown,
+                        {
+                          value: selectedSpec,
+                          onChange: setSelectedSpec,
+                          disabled: disableAllActions
+                        }
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ jsxs18("div", { className: "flex items-start w-full", style: { gap: "var(--spacing-3xl)" }, children: [
+                      /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx20(
+                        LanguageDropdown,
+                        {
+                          value: selectedLanguage,
+                          onChange: setSelectedLanguage,
+                          disabled: disableAllActions
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0" })
+                    ] }),
+                    /* @__PURE__ */ jsx20("div", { className: "w-full", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx20(
                       ScTextField,
                       {
-                        label: "Full Name",
+                        label: "Email ID",
                         labelGroup: "label",
-                        state: "filled",
-                        placeholderFilled: "Enter your name",
-                        tfGroup: "none",
+                        state: "default",
+                        value: user?.email ?? "",
+                        placeholderFilled: user?.email ?? "chris@kepler.com",
+                        tfGroup: "icon-right",
+                        tfRightIcon: /* @__PURE__ */ jsx20(
+                          SiconLock,
+                          {
+                            className: "w-6 h-6",
+                            color: "var(--alias-text---icons-primary)"
+                          }
+                        ),
                         className: "sc-text-field-full-width",
                         style: { width: "100%" },
-                        value: fullName,
-                        onChange: (e) => setFullName(e.target.value)
+                        readOnly: true
                       }
                     ) }),
-                    /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx20(
-                      SpecializationDropdown,
-                      {
-                        value: selectedSpec,
-                        onChange: setSelectedSpec,
-                        disabled: disableAllActions
-                      }
-                    ) })
-                  ] }),
-                  /* @__PURE__ */ jsxs18("div", { className: "flex items-start w-full", style: { gap: "var(--spacing-3xl)" }, children: [
-                    /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx20(
-                      LanguageDropdown,
+                    /* @__PURE__ */ jsx20(
+                      "div",
                       {
-                        value: selectedLanguage,
-                        onChange: setSelectedLanguage,
-                        disabled: disableAllActions
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0" })
-                  ] }),
-                  /* @__PURE__ */ jsx20("div", { className: "w-full", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx20(
-                    ScTextField,
-                    {
-                      label: "Email ID",
-                      labelGroup: "label",
-                      state: "default",
-                      value: user?.email ?? "",
-                      placeholderFilled: user?.email ?? "chris@kepler.com",
-                      tfGroup: "icon-right",
-                      tfRightIcon: /* @__PURE__ */ jsx20(
-                        SiconLock,
-                        {
-                          className: "w-6 h-6",
-                          color: "var(--alias-text---icons-primary)"
-                        }
-                      ),
-                      className: "sc-text-field-full-width",
-                      style: { width: "100%" },
-                      readOnly: true
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxs18(
-                    "div",
-                    {
-                      className: "flex items-center w-full",
-                      style: { gap: "var(--spacing-3xl)", justifyContent: "flex-end", paddingTop: "var(--spacing-md)" },
-                      children: [
-                        /* @__PURE__ */ jsx20(
+                        className: "flex items-center w-full",
+                        style: { justifyContent: "flex-end", paddingTop: "var(--spacing-md)" },
+                        children: /* @__PURE__ */ jsx20(
                           ScButton7,
                           {
                             text: saving ? "Saving..." : "Save changes",
@@ -11014,25 +11184,69 @@ function ProfileTab() {
                             state: saving || !dirty ? "disabled" : "default",
                             onClick: handleSave
                           }
-                        ),
-                        /* @__PURE__ */ jsx20(
-                          ScButton7,
-                          {
-                            text: "Logout",
-                            variant: "error",
-                            size: "md",
-                            onClick: handleLogout
-                          }
                         )
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs18(
+          "div",
+          {
+            className: "flex items-center w-full",
+            style: {
+              backgroundColor: "var(--alias-surface-base)",
+              borderRadius: "var(--radius-3xl)",
+              border: "1px solid var(--alias-border-subtle)",
+              padding: "var(--spacing-6xl)",
+              gap: "var(--spacing-3xl)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs18("div", { className: "flex flex-col min-w-0 flex-1", style: { gap: "var(--spacing-xs)" }, children: [
+                /* @__PURE__ */ jsx20(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "var(--font-family-font-family-body)",
+                      fontSize: "var(--font-size-font-size-md)",
+                      fontWeight: 600,
+                      lineHeight: "var(--line-height-line-height-md)",
+                      color: "var(--alias-text---icons-primary)"
+                    },
+                    children: "Session"
+                  }
+                ),
+                /* @__PURE__ */ jsx20(
+                  "span",
+                  {
+                    className: "truncate",
+                    style: {
+                      fontFamily: "var(--font-family-font-family-body)",
+                      fontSize: "var(--font-size-font-size-sm)",
+                      lineHeight: "var(--line-height-line-height-sm)",
+                      color: "var(--alias-text---icons-muted)"
+                    },
+                    title: user?.email ?? void 0,
+                    children: user?.email ? `Signed in as ${user.email}` : "Signed in"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx20(
+                ScButton7,
+                {
+                  text: "Log out",
+                  variant: "outline",
+                  size: "md",
+                  onClick: handleLogout
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
   );
 }
@@ -11251,6 +11465,7 @@ function SettingsContent({
   adapters,
   activeTab = "profile",
   onClose,
+  onBack,
   hiddenApps
 }) {
   return /* @__PURE__ */ jsx20(SettingsAdaptersProvider, { adapters, children: /* @__PURE__ */ jsx20(
@@ -11258,6 +11473,7 @@ function SettingsContent({
     {
       activeTab,
       onClose: onClose ?? adapters.navigation.close,
+      onBack: onBack === null ? null : onBack ?? adapters.navigation.back,
       hiddenApps
     }
   ) });
@@ -11265,6 +11481,7 @@ function SettingsContent({
 function SettingsContentInner({
   activeTab,
   onClose,
+  onBack,
   hiddenApps
 }) {
   const {
@@ -11635,6 +11852,33 @@ function SettingsContentInner({
               width: "100%"
             },
             children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col w-full flex-1 min-h-0", style: { gap: 20, paddingTop: 16 }, children: [
+              onBack !== null && /* @__PURE__ */ jsx20("div", { className: "flex items-center shrink-0", style: { paddingLeft: 20 }, children: /* @__PURE__ */ jsxs18(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Back to previous screen",
+                  className: "flex items-center cursor-pointer",
+                  style: {
+                    gap: "var(--spacing-sm)",
+                    padding: "var(--spacing-xs) var(--spacing-md)",
+                    marginLeft: "calc(var(--spacing-md) * -1)",
+                    border: "1px solid transparent",
+                    borderRadius: "var(--radius-xl)",
+                    background: "transparent",
+                    height: 32,
+                    color: "var(--alias-text---icons-muted)",
+                    fontFamily: "var(--font-family-font-family-body)",
+                    fontSize: "var(--font-size-font-size-sm)",
+                    fontWeight: 500,
+                    lineHeight: "var(--line-height-line-height-sm)"
+                  },
+                  onClick: () => onBack ? onBack() : window.history.back(),
+                  children: [
+                    /* @__PURE__ */ jsx20(SiconLeft3, { className: "w-4 h-4 shrink-0", color: "var(--alias-text---icons-muted)" }),
+                    "Back"
+                  ]
+                }
+              ) }),
               /* @__PURE__ */ jsxs18(
                 "div",
                 {