@the-portland-company/shell 0.36.0 → 0.36.1

package/dist/app-chrome.cjs

@@ -2154,116 +2154,118 @@ function NavTopBar({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 z-30 mt-2 w-72 rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 z-30 mt-2 flex max-h-[calc(100vh-5rem)] w-72 flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(TopBarPanelArrow, {}),
-          userMenu?.myProfileHref ? /* @__PURE__ */ jsxRuntime.jsxs(
-            "a",
-            {
-              href: safeHref(userMenu.myProfileHref),
-              className: "flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ProfileIcon, {}),
-                "My Profile"
-              ]
-            }
-          ) : null,
-          userMenu?.organizationSettingsHref ? /* @__PURE__ */ jsxRuntime.jsxs(
-            "a",
-            {
-              href: safeHref(userMenu.organizationSettingsHref),
-              className: "flex w-full items-center gap-2.5 border-t border-[color:var(--line)] px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(BriefcaseIcon, {}),
-                "Organization Settings"
-              ]
-            }
-          ) : null,
-          userMenu?.roles && userMenu.roles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[color:var(--line)] px-4 py-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Roles & Organizations" }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: userMenu.roles.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex flex-wrap items-center gap-1.5 text-sm", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-md bg-[color:var(--panel)] px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-[color:var(--foreground)]", children: r.role }),
-              r.orgName ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[color:var(--muted)]", children: [
-                "in ",
-                r.orgName
-              ] }) : null
-            ] }, `${r.role}-${i}`)) })
-          ] }) : null,
-          userMenu?.accounts && userMenu.accounts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[color:var(--line)] px-4 py-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Accounts" }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: userMenu.accounts.map((a) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: [
+            userMenu?.myProfileHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "a",
+              {
+                href: safeHref(userMenu.myProfileHref),
+                className: "flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ProfileIcon, {}),
+                  "My Profile"
+                ]
+              }
+            ) : null,
+            userMenu?.organizationSettingsHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "a",
+              {
+                href: safeHref(userMenu.organizationSettingsHref),
+                className: "flex w-full items-center gap-2.5 border-t border-[color:var(--line)] px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(BriefcaseIcon, {}),
+                  "Organization Settings"
+                ]
+              }
+            ) : null,
+            userMenu?.roles && userMenu.roles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[color:var(--line)] px-4 py-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Roles & Organizations" }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: userMenu.roles.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex flex-wrap items-center gap-1.5 text-sm", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-md bg-[color:var(--panel)] px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-[color:var(--foreground)]", children: r.role }),
+                r.orgName ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[color:var(--muted)]", children: [
+                  "in ",
+                  r.orgName
+                ] }) : null
+              ] }, `${r.role}-${i}`)) })
+            ] }) : null,
+            userMenu?.accounts && userMenu.accounts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[color:var(--line)] px-4 py-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Accounts" }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: userMenu.accounts.map((a) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      if (!a.active) userMenu.onSwitchAccount?.(a.id);
+                    },
+                    className: "flex min-w-0 flex-1 items-center gap-2.5 rounded-lg px-1 py-1 text-left hover:bg-[color:var(--panel)]",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-race-red)] text-[11px] font-bold text-white", children: a.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: a.avatarUrl, alt: "", className: "h-full w-full object-cover" }) : (a.name ?? a.email ?? "?").slice(0, 2).toUpperCase() }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col leading-tight", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: [
+                              "truncate text-sm font-semibold",
+                              a.active ? "text-[color:var(--color-race-red)]" : "text-[color:var(--foreground)]"
+                            ].join(" "),
+                            children: a.name ?? a.email ?? a.id.slice(0, 8)
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-[color:var(--muted)]", children: a.active ? "Active" : a.email ?? "" })
+                      ] })
+                    ]
+                  }
+                ),
+                !a.active && userMenu.onRemoveAccount ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${a.name ?? a.email ?? "account"}`,
+                    onClick: () => userMenu.onRemoveAccount?.(a.id),
+                    className: "shrink-0 rounded p-1 text-[color:var(--color-race-red)] hover:bg-[color:var(--panel)]",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {})
+                  }
+                ) : null
+              ] }, a.id)) }),
+              userMenu.addAccountHref || userMenu.onAddAccount ? userMenu.addAccountHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "a",
                 {
-                  type: "button",
-                  onClick: () => {
-                    if (!a.active) userMenu.onSwitchAccount?.(a.id);
-                  },
-                  className: "flex min-w-0 flex-1 items-center gap-2.5 rounded-lg px-1 py-1 text-left hover:bg-[color:var(--panel)]",
+                  href: safeHref(userMenu.addAccountHref),
+                  className: "mt-1.5 flex items-center gap-2.5 rounded-lg px-1 py-1.5 text-sm font-semibold text-[color:var(--color-race-red)] hover:bg-[color:var(--panel)]",
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-race-red)] text-[11px] font-bold text-white", children: a.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: a.avatarUrl, alt: "", className: "h-full w-full object-cover" }) : (a.name ?? a.email ?? "?").slice(0, 2).toUpperCase() }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col leading-tight", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: [
-                            "truncate text-sm font-semibold",
-                            a.active ? "text-[color:var(--color-race-red)]" : "text-[color:var(--foreground)]"
-                          ].join(" "),
-                          children: a.name ?? a.email ?? a.id.slice(0, 8)
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-[color:var(--muted)]", children: a.active ? "Active" : a.email ?? "" })
-                    ] })
+                    /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
+                    "Add Account"
                   ]
                 }
-              ),
-              !a.active && userMenu.onRemoveAccount ? /* @__PURE__ */ jsxRuntime.jsx(
+              ) : /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   type: "button",
-                  "aria-label": `Remove ${a.name ?? a.email ?? "account"}`,
-                  onClick: () => userMenu.onRemoveAccount?.(a.id),
-                  className: "shrink-0 rounded p-1 text-[color:var(--color-race-red)] hover:bg-[color:var(--panel)]",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {})
+                  onClick: userMenu.onAddAccount,
+                  className: "mt-1.5 flex w-full items-center gap-2.5 rounded-lg px-1 py-1.5 text-left text-sm font-semibold text-[color:var(--color-race-red)] hover:bg-[color:var(--panel)]",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
+                    "Add Account"
+                  ]
                 }
               ) : null
-            ] }, a.id)) }),
-            userMenu.addAccountHref || userMenu.onAddAccount ? userMenu.addAccountHref ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "a",
+            ] }) : null,
+            userMenu?.theme ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-[color:var(--line)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+              NavThemeControl,
               {
-                href: safeHref(userMenu.addAccountHref),
-                className: "mt-1.5 flex items-center gap-2.5 rounded-lg px-1 py-1.5 text-sm font-semibold text-[color:var(--color-race-red)] hover:bg-[color:var(--panel)]",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
-                  "Add Account"
-                ]
+                value: userMenu.theme.value,
+                onChange: userMenu.theme.onChange
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: userMenu.onAddAccount,
-                className: "mt-1.5 flex w-full items-center gap-2.5 rounded-lg px-1 py-1.5 text-left text-sm font-semibold text-[color:var(--color-race-red)] hover:bg-[color:var(--panel)]",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(AddUserIcon, {}),
-                  "Add Account"
-                ]
-              }
-            ) : null
-          ] }) : null,
-          userMenu?.theme ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-[color:var(--line)]", children: /* @__PURE__ */ jsxRuntime.jsx(
-            NavThemeControl,
-            {
-              value: userMenu.theme.value,
-              onChange: userMenu.theme.onChange
-            }
-          ) }) : null,
+            ) }) : null
+          ] }),
           onSignOut ? /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               type: "button",
               onClick: onSignOut,
-              className: "flex w-full items-center gap-2.5 border-t border-[color:var(--line)] px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)] hover:text-[color:var(--color-race-red)]",
+              className: "flex w-full shrink-0 items-center gap-2.5 border-t border-[color:var(--line)] px-4 py-2.5 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)] hover:text-[color:var(--color-race-red)]",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(SignOutIcon, {}),
                 "Sign out"
@@ -2602,6 +2604,89 @@ function resolveIdentity(input) {
     loaded: input.loaded ?? false
   };
 }
+
+// src/logout-signal.ts
+var LOGOUT_COOKIE = "politogy_logout_at";
+var LOGOUT_CHANNEL = "politogy-logout";
+var POLL_MS = 1e3;
+function parseTimestamp(value) {
+  if (!value) return null;
+  const n = Number(value);
+  return Number.isFinite(n) && n > 0 ? n : null;
+}
+function isSessionRevoked(logoutCookieValue, authTime) {
+  const loggedOutAt = parseTimestamp(logoutCookieValue);
+  if (loggedOutAt === null) return false;
+  if (authTime == null || !Number.isFinite(authTime) || authTime <= 0) return true;
+  const authMs = authTime < 1e12 ? authTime * 1e3 : authTime;
+  return authMs < loggedOutAt;
+}
+function readLogoutCookie() {
+  if (typeof document === "undefined") return null;
+  try {
+    const m = document.cookie.match(new RegExp(`(?:^|;\\s*)${LOGOUT_COOKIE}=([^;]+)`));
+    return parseTimestamp(m ? decodeURIComponent(m[1]) : null);
+  } catch {
+    return null;
+  }
+}
+function broadcastLogout(at = Date.now()) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  const host = window.location.hostname;
+  const domainAttr = /(^|\.)politogyvrm\.com$/i.test(host) ? "; Domain=.politogyvrm.com" : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${LOGOUT_COOKIE}=${at}; Path=/; Max-Age=2592000; SameSite=Lax${domainAttr}${secure}`;
+  try {
+    new BroadcastChannel(LOGOUT_CHANNEL).postMessage(at);
+  } catch {
+  }
+}
+function watchLogout(onLogout, options = {}) {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const { authTime = null, intervalMs = POLL_MS } = options;
+  const baseline = readLogoutCookie() ?? 0;
+  let done = false;
+  const fire = (at) => {
+    if (done) return;
+    if (at <= baseline) return;
+    if (authTime != null && !isSessionRevoked(String(at), authTime)) return;
+    done = true;
+    cleanup();
+    onLogout();
+  };
+  const check = () => {
+    const at = readLogoutCookie();
+    if (at !== null) fire(at);
+  };
+  let channel = null;
+  try {
+    channel = new BroadcastChannel(LOGOUT_CHANNEL);
+    channel.onmessage = (event) => {
+      const at = typeof event.data === "number" ? event.data : readLogoutCookie();
+      if (at !== null) fire(at);
+    };
+  } catch {
+    channel = null;
+  }
+  const timer = window.setInterval(check, intervalMs);
+  window.addEventListener("visibilitychange", check);
+  window.addEventListener("focus", check);
+  window.addEventListener("pageshow", check);
+  function cleanup() {
+    window.clearInterval(timer);
+    window.removeEventListener("visibilitychange", check);
+    window.removeEventListener("focus", check);
+    window.removeEventListener("pageshow", check);
+    try {
+      channel?.close();
+    } catch {
+    }
+  }
+  return cleanup;
+}
 var CORE_APP = "vrm";
 var POLITOGY_APPS = {
   vrm: { title: "Politogy VRM", origin: "https://app.politogyvrm.com", storagePrefix: "vrm" },
@@ -2678,6 +2763,28 @@ function FrameBody({
 }) {
   const meta = POLITOGY_APPS[app];
   const chrome = useChromeState();
+  const signOutRef = react.useRef(onSignOut);
+  signOutRef.current = onSignOut;
+  const signingOutRef = react.useRef(false);
+  const handleSignOut = react.useCallback(() => {
+    signingOutRef.current = true;
+    broadcastLogout();
+    signOutRef.current();
+  }, []);
+  react.useEffect(
+    () => (
+      // A tab that learns of a sign-out elsewhere ends its OWN session properly
+      // (clear cookie, RP-initiated logout at the IdP) rather than merely
+      // navigating away — otherwise its session cookie would outlive the
+      // sign-out and a later visit would silently resume it. No re-broadcast:
+      // the signal that woke us is already on record for everyone.
+      watchLogout(() => {
+        if (signingOutRef.current) return;
+        signOutRef.current();
+      })
+    ),
+    []
+  );
   const core = app === CORE_APP ? data?.core : void 0;
   const identity = useChromeIdentity({ userName: session.userName, email: session.email });
   const derivedUserMenu = useChromeUserMenu({
@@ -2760,7 +2867,7 @@ function FrameBody({
           role: session.role
         },
         userMenu,
-        onSignOut,
+        onSignOut: handleSignOut,
         // The action cluster is IDENTICAL everywhere — core included. Page
         // actions sit BEFORE it, never inside it, so the Alerts bell keeps its
         // required position: farthest right, immediately before My Account.