@the-portland-company/shell 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 0.2.1 — 2026-05-13
+
+### Added
+- `<ShellChrome>` component — drops chrome data (organization, linkedAccounts, support, devNotesMenu, myProfileHref) into the shell from a position deep in the tree. Use this when the data lives in app contexts nested BELOW `<ShellProvider>`. Apps that have the data at the top can keep using `<ShellProvider>` props directly.
+- Re-exported chrome context objects (`ShellOrgContext`, `ShellLinkedAccountsContext`, `ShellSupportProviderContext`, `ShellChromeContext`) so power users can write their own bindings.
+
+## 0.2.0 — 2026-05-13
+
+### Added
+- Shared header chrome rendered by `<Header />` automatically when supplied via `ShellProvider`:
+  - `<UserMenu />` — avatar dropdown with My Profile, color-mode toggle, Sign out, and optional Switch-account section.
+  - `<OrgSelector />` — current org badge + dropdown of other orgs.
+  - `<SupportRequestButton />` — life-buoy icon that opens a Support modal; submits via the host-supplied handler.
+- `ShellProvider` accepts four new optional prop-driven contexts:
+  - `organization?: ShellOrganizationValue` — drives `<OrgSelector />`.
+  - `linkedAccounts?: ShellLinkedAccountsValue` — drives the UserMenu "Switch account" section.
+  - `support?: ShellSupportValue` — drives `<SupportRequestButton />` and modal submission.
+  - `devNotesMenu?: ReactNode` — rendered in the header (typically `<DevNotesMenu />` from `@the-portland-company/devnotes`).
+  - `myProfileHref?: string` — UserMenu profile link target. Defaults to `/my-profile`.
+- New hooks: `useShellOrganization`, `useShellLinkedAccounts`, `useShellSupport`, `useShellChrome`. Each returns `null` when the corresponding prop wasn't supplied, so chrome components opt out cleanly.
+- New types: `ShellOrganization`, `ShellOrganizationValue`, `ShellLinkedAccount`, `ShellLinkedAccountsValue`, `ShellSupportContext`, `ShellSupportValue`.
+
+### Changed
+- `<Header />` now renders `<OrgSelector />`, `<SupportRequestButton />`, `devNotesMenu`, and `<UserMenu />` by default. The old hard-coded avatar menu inside Header was removed (its behavior is now inside `<UserMenu />`).
+
+### Notes
+- Backwards compatible: existing consumers passing only `currentApp` + `supabaseClient` continue to work; the new chrome simply renders nothing when its props aren't supplied.
+
 ## 0.1.0 — 2026-05-12
 
 Initial public release.

package/dist/index.cjs

@@ -1121,6 +1121,10 @@ function GlobalUiIdProvider() {
 }
 var ShellAuthContext = react$1.createContext(null);
 var ShellMetaContext = react$1.createContext(null);
+var ShellOrgContext = react$1.createContext(null);
+var ShellLinkedAccountsContext = react$1.createContext(null);
+var ShellSupportProviderContext = react$1.createContext(null);
+var ShellChromeContext = react$1.createContext(null);
 function toShellUser(session) {
   if (!session?.user) return null;
   const su = session.user;
@@ -1137,7 +1141,12 @@ function ShellProvider({
   supabaseClient,
   currentApp,
   appRegistry,
-  basename
+  basename,
+  organization,
+  linkedAccounts,
+  support,
+  devNotesMenu,
+  myProfileHref
 }) {
   const [status, setStatus] = react$1.useState("loading");
   const [session, setSession] = react$1.useState(null);
@@ -1176,7 +1185,14 @@ function ShellProvider({
     }),
     [currentApp, appRegistry, basename]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ShellAuthContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(ShellMetaContext.Provider, { value: meta, children: /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { theme: politogyTheme, children }) }) });
+  const chrome = react$1.useMemo(
+    () => ({
+      devNotesMenu: devNotesMenu ?? null,
+      myProfileHref: myProfileHref ?? "/my-profile"
+    }),
+    [devNotesMenu, myProfileHref]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ShellAuthContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(ShellMetaContext.Provider, { value: meta, children: /* @__PURE__ */ jsxRuntime.jsx(ShellOrgContext.Provider, { value: organization ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellLinkedAccountsContext.Provider, { value: linkedAccounts ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellSupportProviderContext.Provider, { value: support ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { theme: politogyTheme, children }) }) }) }) }) }) });
 }
 function useShellAuth() {
   const ctx = react$1.useContext(ShellAuthContext);
@@ -1199,8 +1215,472 @@ function useCurrentApp() {
   }
   return meta.currentApp;
 }
+function useShellOrganization() {
+  return react$1.useContext(ShellOrgContext);
+}
+function useShellLinkedAccounts() {
+  return react$1.useContext(ShellLinkedAccountsContext);
+}
+function useShellSupport() {
+  return react$1.useContext(ShellSupportProviderContext);
+}
+function useShellChrome() {
+  const ctx = react$1.useContext(ShellChromeContext);
+  if (!ctx) {
+    throw new Error("useShellChrome must be used inside <ShellProvider>");
+  }
+  return ctx;
+}
+var HEX_COLOR_PATTERN = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function normalizeHexColor(value) {
+  const trimmed = value?.trim();
+  if (!trimmed || !HEX_COLOR_PATTERN.test(trimmed)) return null;
+  if (trimmed.length === 7) return trimmed;
+  const [r, g, b] = trimmed.slice(1).split("");
+  return `#${r}${r}${g}${g}${b}${b}`;
+}
+function getOrganizationBadgeLetters(name) {
+  const normalizedName = String(name || "").trim().replace(/[^a-zA-Z0-9\s]+/g, " ");
+  const parts = normalizedName.split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return `${parts[0][0] || ""}${parts[1][0] || ""}`.toUpperCase();
+  }
+  const compact = parts[0] || normalizedName.replace(/\s+/g, "");
+  return compact.slice(0, 2).toUpperCase() || "OR";
+}
+function OrgBadge({ name, logoUrl, brandColor, size }) {
+  const normalizedColor = normalizeHexColor(brandColor);
+  const badgeColor = normalizedColor || "#5a5a5a";
+  const badgeLetters = getOrganizationBadgeLetters(name);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Box,
+    {
+      boxSize: size,
+      borderRadius: "full",
+      overflow: "hidden",
+      border: "1px solid white",
+      flexShrink: 0,
+      bg: logoUrl ? "whiteAlpha.300" : badgeColor,
+      color: "white",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "xs",
+      fontWeight: "bold",
+      letterSpacing: "0.08em",
+      textTransform: "uppercase",
+      children: logoUrl ? /* @__PURE__ */ jsxRuntime.jsx(react.Image, { src: logoUrl, alt: `${name ?? "Organization"} logo`, boxSize: "full", objectFit: "cover" }) : badgeLetters
+    }
+  );
+}
+function OrgSelector() {
+  const org = useShellOrganization();
+  if (!org) return null;
+  const { currentOrg, organizations, switchOrganization, createOrgHref } = org;
+  const others = organizations.filter((o) => o.id !== currentOrg?.id);
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { placement: "bottom-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.MenuButton,
+      {
+        as: react.Box,
+        cursor: "pointer",
+        px: 2,
+        py: 1,
+        borderRadius: "md",
+        _hover: { bg: "gray.100" },
+        _active: { bg: "gray.200" },
+        "aria-label": "Switch organization",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, align: "center", children: [
+          currentOrg ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              OrgBadge,
+              {
+                name: currentOrg.name,
+                logoUrl: currentOrg.logoUrl,
+                brandColor: currentOrg.brandColor,
+                size: "24px"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "600", color: "gray.800", noOfLines: 1, children: currentOrg.name })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "gray.500", children: "Select organization" }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", fontSize: "xs", color: "gray.500", "aria-hidden": "true", children: "\u25BE" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.MenuList, { zIndex: 1500, children: [
+      others.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { isDisabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "gray.500", children: "No other organizations" }) }),
+      others.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+        react.MenuItem,
+        {
+          onClick: () => {
+            void switchOrganization(o.id);
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, align: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(OrgBadge, { name: o.name, logoUrl: o.logoUrl, brandColor: o.brandColor, size: "20px" }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { direction: "column", children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "600", children: o.name }) })
+          ] })
+        },
+        o.id
+      )),
+      createOrgHref && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { as: "a", href: createOrgHref, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "brand.500", fontWeight: "600", children: "Create organization" }) })
+      ] })
+    ] }) })
+  ] });
+}
+var SUPPORT_REQUEST_SUCCESS_MESSAGE = "Your support request was sent to Politogy leadership.";
+function splitName(value) {
+  const trimmed = String(value ?? "").trim();
+  if (!trimmed) return { firstName: "", lastName: "" };
+  const [first, ...rest] = trimmed.split(/\s+/);
+  return { firstName: first ?? "", lastName: rest.join(" ") };
+}
+function resolveSupportProfile(user) {
+  if (!user) {
+    return { firstName: "", lastName: "", email: "", phone: "", missingEmail: true, missingPhone: true };
+  }
+  const meta = user.raw.user_metadata ?? {};
+  const resolvedName = String(meta.full_name ?? meta.name ?? "").trim() || String(user.email ?? "").split("@")[0] || "";
+  const { firstName, lastName } = splitName(resolvedName);
+  const email = String(user.email ?? "").trim();
+  const phone = String(meta.phone ?? "").trim();
+  return {
+    firstName,
+    lastName,
+    email,
+    phone,
+    missingEmail: email.length === 0,
+    missingPhone: phone.length === 0
+  };
+}
+function formatTimestamp(date) {
+  return date.toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true
+  });
+}
+function buildSupportRequestMessage(input) {
+  const submittedAt = input.submittedAt ?? /* @__PURE__ */ new Date();
+  const iso = submittedAt.toISOString();
+  const display = formatTimestamp(submittedAt);
+  const trimmedSearch = String(input.search ?? "").trim();
+  return [
+    "A user requested support.",
+    "",
+    `First Name: ${input.firstName.trim() || "Unknown"}`,
+    `Last Name: ${input.lastName.trim() || "Unknown"}`,
+    `Organization: ${(input.organizationName ?? "").trim() || "Unknown"}`,
+    `Email: ${input.email.trim()}`,
+    `Phone: ${input.phone.trim()}`,
+    `Submitted At (ISO): ${iso}`,
+    `Submitted At (Local): ${display}`,
+    `Page Path: ${input.pathname.trim() || "/"}`,
+    `Page Title: ${(input.pageTitle ?? "").trim() || "Unknown"}`,
+    `Query String: ${trimmedSearch || "None"}`
+  ].join("\n");
+}
+function SupportRequestButton() {
+  const support = useShellSupport();
+  const { user } = useShellAuth();
+  const org = useShellOrganization();
+  const { isOpen, onOpen, onClose } = react.useDisclosure();
+  const toast = react.useToast();
+  const profile = react$1.useMemo(() => resolveSupportProfile(user), [user]);
+  const [email, setEmail] = react$1.useState("");
+  const [phone, setPhone] = react$1.useState("");
+  const [message, setMessage] = react$1.useState("");
+  const [isSubmitting, setIsSubmitting] = react$1.useState(false);
+  react$1.useEffect(() => {
+    if (!isOpen) return;
+    setEmail(profile.email);
+    setPhone(profile.phone);
+    setMessage("");
+    setIsSubmitting(false);
+  }, [isOpen, profile.email, profile.phone]);
+  const handleClose = react$1.useCallback(() => {
+    if (isSubmitting) return;
+    onClose();
+  }, [isSubmitting, onClose]);
+  const handleSubmit = react$1.useCallback(async () => {
+    if (!support) return;
+    const resolvedEmail = (profile.missingEmail ? email : profile.email).trim();
+    const resolvedPhone = (profile.missingPhone ? phone : profile.phone).trim();
+    if (!resolvedEmail) {
+      toast({ title: "Email required", status: "error", duration: 4e3, isClosable: true });
+      return;
+    }
+    if (!resolvedPhone) {
+      toast({ title: "Phone required", status: "error", duration: 4e3, isClosable: true });
+      return;
+    }
+    if (!user?.id) {
+      toast({
+        title: "Unable to send support request",
+        description: "You must be signed in to request support.",
+        status: "error",
+        duration: 4e3,
+        isClosable: true
+      });
+      return;
+    }
+    const context = {
+      pathname: typeof window !== "undefined" ? window.location.pathname : "/",
+      search: typeof window !== "undefined" ? window.location.search : "",
+      pageTitle: typeof document !== "undefined" ? document.title : void 0,
+      organizationName: org?.currentOrg?.name ?? void 0
+    };
+    const formatted = buildSupportRequestMessage({
+      firstName: profile.firstName,
+      lastName: profile.lastName,
+      organizationName: context.organizationName,
+      email: resolvedEmail,
+      phone: resolvedPhone,
+      pathname: context.pathname,
+      search: context.search,
+      pageTitle: context.pageTitle
+    });
+    try {
+      setIsSubmitting(true);
+      await support.submitSupportRequest({
+        email: resolvedEmail,
+        phone: resolvedPhone,
+        message: message.trim() ? `${message.trim()}
+
+---
+
+${formatted}` : formatted,
+        context
+      });
+      toast({
+        title: "Support request sent",
+        description: SUPPORT_REQUEST_SUCCESS_MESSAGE,
+        status: "success",
+        duration: 5e3,
+        isClosable: true
+      });
+      onClose();
+    } catch (err) {
+      const description = err instanceof Error ? err.message : "Unable to send your support request.";
+      toast({
+        title: "Failed to request support",
+        description,
+        status: "error",
+        duration: 5e3,
+        isClosable: true
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [support, profile, email, phone, message, toast, user?.id, onClose, org?.currentOrg?.name]);
+  if (!support) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.IconButton,
+      {
+        "aria-label": "Request support",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(LifebuoyIcon, {}),
+        variant: "ghost",
+        size: "sm",
+        onClick: onOpen
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Modal, { isOpen, onClose: handleClose, isCentered: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.ModalOverlay, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(react.ModalContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.ModalHeader, { children: "Support" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.ModalCloseButton, { isDisabled: isSubmitting }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { align: "stretch", spacing: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "gray.600", children: "A message will be texted and emailed with your contact information and support will reply as soon as possible. If you are a beta customer that is typically within minutes." }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.Box, { rounded: "md", borderWidth: "1px", borderColor: "gray.200", bg: "gray.50", p: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { align: "stretch", spacing: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Name:" }),
+              " ",
+              [profile.firstName, profile.lastName].filter(Boolean).join(" ") || "Unknown"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Organization:" }),
+              " ",
+              org?.currentOrg?.name ?? "Unknown"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Email:" }),
+              " ",
+              (profile.missingEmail ? email : profile.email) || "Missing"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Phone:" }),
+              " ",
+              (profile.missingPhone ? phone : profile.phone) || "Missing"
+            ] })
+          ] }) }),
+          profile.missingEmail && /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", fontWeight: "600", color: "gray.700", mb: 1, children: "Email" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "email",
+                "aria-label": "Email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                placeholder: "name@example.com",
+                style: {
+                  width: "100%",
+                  padding: "8px 12px",
+                  border: "1px solid #e2e8f0",
+                  borderRadius: "6px",
+                  fontSize: "14px"
+                }
+              }
+            )
+          ] }),
+          profile.missingPhone && /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", fontWeight: "600", color: "gray.700", mb: 1, children: "Phone" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                "aria-label": "Phone",
+                value: phone,
+                onChange: (e) => setPhone(e.target.value),
+                placeholder: "(503) 555-1212",
+                style: {
+                  width: "100%",
+                  padding: "8px 12px",
+                  border: "1px solid #e2e8f0",
+                  borderRadius: "6px",
+                  fontSize: "14px"
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", fontWeight: "600", color: "gray.700", mb: 1, children: "Optional message" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.Textarea,
+              {
+                value: message,
+                onChange: (e) => setMessage(e.target.value),
+                placeholder: "What can we help you with?",
+                rows: 3
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react.ModalFooter, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Button, { variant: "ghost", mr: 3, onClick: handleClose, isDisabled: isSubmitting, children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Button,
+            {
+              colorScheme: "orange",
+              onClick: () => void handleSubmit(),
+              isLoading: isSubmitting,
+              loadingText: "Sending",
+              children: "Request Support"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function LifebuoyIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "4.93", x2: "9.17", y2: "9.17" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14.83", y1: "14.83", x2: "19.07", y2: "19.07" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14.83", y1: "9.17", x2: "19.07", y2: "4.93" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14.83", y1: "9.17", x2: "18.36", y2: "5.64" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "19.07", x2: "9.17", y2: "14.83" })
+      ]
+    }
+  );
+}
+function avatarUrlFromUser(user) {
+  if (!user) return void 0;
+  const meta = user.raw.user_metadata;
+  return meta?.avatar_url ?? void 0;
+}
+function UserMenu() {
+  const { user, status, signOut } = useShellAuth();
+  const { myProfileHref } = useShellChrome();
+  const linked = useShellLinkedAccounts();
+  const { colorMode, toggleColorMode } = react.useColorMode();
+  if (status !== "authenticated" || !user) return null;
+  const displayName = user.displayName ?? user.email ?? "User";
+  const avatarUrl = avatarUrlFromUser(user);
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { placement: "bottom-end", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.MenuButton,
+      {
+        "aria-label": "Open account menu",
+        as: react.Box,
+        cursor: "pointer",
+        borderRadius: "full",
+        _hover: { opacity: 0.85 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.Avatar, { size: "sm", name: displayName, src: avatarUrl })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.MenuList, { zIndex: 1500, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { px: 3, py: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "600", noOfLines: 1, children: displayName }),
+        user.email && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", noOfLines: 1, children: user.email })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { as: "a", href: myProfileHref, children: "My Profile" }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { onClick: toggleColorMode, children: colorMode === "light" ? "Switch to dark mode" : "Switch to light mode" }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { onClick: () => void signOut(), children: "Sign out" }),
+      linked && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { px: 3, pt: 1, pb: 1, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", textTransform: "uppercase", letterSpacing: "0.08em", color: "gray.500", children: "Switch account" }) }),
+        linked.linkedAccounts.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { isDisabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "gray.500", children: "No linked accounts" }) }),
+        linked.linkedAccounts.map((acct) => /* @__PURE__ */ jsxRuntime.jsx(
+          react.MenuItem,
+          {
+            onClick: () => {
+              void linked.switchToAccount(acct.id);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, align: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.Avatar,
+                {
+                  size: "xs",
+                  name: acct.displayName ?? acct.email,
+                  src: acct.avatarUrl ?? void 0
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { direction: "column", minW: 0, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "600", noOfLines: 1, children: acct.displayName ?? acct.email }),
+                acct.displayName && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", noOfLines: 1, children: acct.email })
+              ] })
+            ] })
+          },
+          acct.id
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { onClick: linked.onAddAccount, children: "Add account" })
+      ] })
+    ] }) })
+  ] });
+}
 function Header({ extrasSlot }) {
-  const { user, signOut, status } = useShellAuth();
+  const { devNotesMenu } = useShellChrome();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.Flex,
     {
@@ -1211,14 +1691,15 @@ function Header({ extrasSlot }) {
       bg: "white",
       borderBottom: "1px solid",
       borderColor: "gray.200",
+      gap: 3,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Heading, { size: "md", color: "brand.500", children: "politogy" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(OrgSelector, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(react.Spacer, {}),
-        extrasSlot && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { mr: 3, children: extrasSlot }),
-        status === "authenticated" && user && /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react.MenuButton, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Avatar, { size: "sm", name: user.displayName ?? user.email ?? "" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.MenuList, { children: /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { onClick: () => signOut(), children: "Sign out" }) })
-        ] })
+        extrasSlot && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: extrasSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx(SupportRequestButton, {}),
+        devNotesMenu,
+        /* @__PURE__ */ jsxRuntime.jsx(UserMenu, {})
       ]
     }
   );
@@ -1301,6 +1782,23 @@ function AppLayout({
     overlaySlot
   ] });
 }
+function ShellChrome({
+  children,
+  organization,
+  linkedAccounts,
+  support,
+  devNotesMenu,
+  myProfileHref
+}) {
+  const chrome = react$1.useMemo(
+    () => ({
+      devNotesMenu: devNotesMenu ?? null,
+      myProfileHref: myProfileHref ?? "/my-profile"
+    }),
+    [devNotesMenu, myProfileHref]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ShellOrgContext.Provider, { value: organization ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellLinkedAccountsContext.Provider, { value: linkedAccounts ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellSupportProviderContext.Provider, { value: support ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellChromeContext.Provider, { value: chrome, children }) }) }) });
+}
 
 // src/sw/registerShellPrecache.ts
 async function registerShellPrecache(opts = {}) {
@@ -1339,15 +1837,27 @@ exports.Footer = Footer;
 exports.GlobalUiIdProvider = GlobalUiIdProvider;
 exports.Header = Header;
 exports.HeaderTabBar = HeaderTabBar;
+exports.OrgSelector = OrgSelector;
 exports.PageContainer = PageContainer;
 exports.PageHeader = PageHeader;
+exports.ShellChrome = ShellChrome;
+exports.ShellChromeContext = ShellChromeContext;
+exports.ShellLinkedAccountsContext = ShellLinkedAccountsContext;
+exports.ShellOrgContext = ShellOrgContext;
 exports.ShellProvider = ShellProvider;
+exports.ShellSupportProviderContext = ShellSupportProviderContext;
 exports.Sidebar = Sidebar;
+exports.SupportRequestButton = SupportRequestButton;
+exports.UserMenu = UserMenu;
 exports.buildSpeculationRules = buildSpeculationRules;
 exports.politogyTheme = politogyTheme;
 exports.registerShellPrecache = registerShellPrecache;
 exports.useAppRegistry = useAppRegistry;
 exports.useCurrentApp = useCurrentApp;
 exports.useShellAuth = useShellAuth;
+exports.useShellChrome = useShellChrome;
+exports.useShellLinkedAccounts = useShellLinkedAccounts;
+exports.useShellOrganization = useShellOrganization;
+exports.useShellSupport = useShellSupport;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map