@the-portland-company/shell 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import { extendTheme, Tooltip, ChakraProvider, Flex, Heading, Spacer, Box, Menu, MenuButton, Avatar, MenuList, MenuItem, VStack, Link as Link$1, Text } from '@chakra-ui/react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { extendTheme, Tooltip, ChakraProvider, Menu, MenuButton, Box, HStack, Text, Portal, MenuList, MenuItem, Flex, MenuDivider, useDisclosure, useToast, IconButton, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, VStack, Textarea, ModalFooter, Button, useColorMode, Avatar, Heading, Spacer, Link as Link$1, Image } from '@chakra-ui/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx2 from 'clsx';
 import { Link, useLocation } from 'react-router-dom';
-import { createContext, useEffect, useState, useMemo, useContext } from 'react';
+import { createContext, useEffect, useState, useMemo, useContext, useCallback } from 'react';
 
 // src/theme/index.ts
 
@@ -1115,6 +1115,10 @@ function GlobalUiIdProvider() {
 }
 var ShellAuthContext = createContext(null);
 var ShellMetaContext = createContext(null);
+var ShellOrgContext = createContext(null);
+var ShellLinkedAccountsContext = createContext(null);
+var ShellSupportProviderContext = createContext(null);
+var ShellChromeContext = createContext(null);
 function toShellUser(session) {
   if (!session?.user) return null;
   const su = session.user;
@@ -1131,7 +1135,12 @@ function ShellProvider({
   supabaseClient,
   currentApp,
   appRegistry,
-  basename
+  basename,
+  organization,
+  linkedAccounts,
+  support,
+  devNotesMenu,
+  myProfileHref
 }) {
   const [status, setStatus] = useState("loading");
   const [session, setSession] = useState(null);
@@ -1170,7 +1179,14 @@ function ShellProvider({
     }),
     [currentApp, appRegistry, basename]
   );
-  return /* @__PURE__ */ jsx(ShellAuthContext.Provider, { value, children: /* @__PURE__ */ jsx(ShellMetaContext.Provider, { value: meta, children: /* @__PURE__ */ jsx(ChakraProvider, { theme: politogyTheme, children }) }) });
+  const chrome = useMemo(
+    () => ({
+      devNotesMenu: devNotesMenu ?? null,
+      myProfileHref: myProfileHref ?? "/my-profile"
+    }),
+    [devNotesMenu, myProfileHref]
+  );
+  return /* @__PURE__ */ jsx(ShellAuthContext.Provider, { value, children: /* @__PURE__ */ jsx(ShellMetaContext.Provider, { value: meta, children: /* @__PURE__ */ jsx(ShellOrgContext.Provider, { value: organization ?? null, children: /* @__PURE__ */ jsx(ShellLinkedAccountsContext.Provider, { value: linkedAccounts ?? null, children: /* @__PURE__ */ jsx(ShellSupportProviderContext.Provider, { value: support ?? null, children: /* @__PURE__ */ jsx(ShellChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ jsx(ChakraProvider, { theme: politogyTheme, children }) }) }) }) }) }) });
 }
 function useShellAuth() {
   const ctx = useContext(ShellAuthContext);
@@ -1193,8 +1209,472 @@ function useCurrentApp() {
   }
   return meta.currentApp;
 }
+function useShellOrganization() {
+  return useContext(ShellOrgContext);
+}
+function useShellLinkedAccounts() {
+  return useContext(ShellLinkedAccountsContext);
+}
+function useShellSupport() {
+  return useContext(ShellSupportProviderContext);
+}
+function useShellChrome() {
+  const ctx = 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__ */ jsx(
+    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__ */ jsx(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__ */ jsxs(Menu, { placement: "bottom-start", children: [
+    /* @__PURE__ */ jsx(
+      MenuButton,
+      {
+        as: Box,
+        cursor: "pointer",
+        px: 2,
+        py: 1,
+        borderRadius: "md",
+        _hover: { bg: "gray.100" },
+        _active: { bg: "gray.200" },
+        "aria-label": "Switch organization",
+        children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, align: "center", children: [
+          currentOrg ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              OrgBadge,
+              {
+                name: currentOrg.name,
+                logoUrl: currentOrg.logoUrl,
+                brandColor: currentOrg.brandColor,
+                size: "24px"
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { fontSize: "sm", fontWeight: "600", color: "gray.800", noOfLines: 1, children: currentOrg.name })
+          ] }) : /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "gray.500", children: "Select organization" }),
+          /* @__PURE__ */ jsx(Text, { as: "span", fontSize: "xs", color: "gray.500", "aria-hidden": "true", children: "\u25BE" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(MenuList, { zIndex: 1500, children: [
+      others.length === 0 && /* @__PURE__ */ jsx(MenuItem, { isDisabled: true, children: /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "gray.500", children: "No other organizations" }) }),
+      others.map((o) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          onClick: () => {
+            void switchOrganization(o.id);
+          },
+          children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, align: "center", children: [
+            /* @__PURE__ */ jsx(OrgBadge, { name: o.name, logoUrl: o.logoUrl, brandColor: o.brandColor, size: "20px" }),
+            /* @__PURE__ */ jsx(Flex, { direction: "column", children: /* @__PURE__ */ jsx(Text, { fontSize: "sm", fontWeight: "600", children: o.name }) })
+          ] })
+        },
+        o.id
+      )),
+      createOrgHref && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MenuDivider, {}),
+        /* @__PURE__ */ jsx(MenuItem, { as: "a", href: createOrgHref, children: /* @__PURE__ */ jsx(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 } = useDisclosure();
+  const toast = useToast();
+  const profile = useMemo(() => resolveSupportProfile(user), [user]);
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [message, setMessage] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  useEffect(() => {
+    if (!isOpen) return;
+    setEmail(profile.email);
+    setPhone(profile.phone);
+    setMessage("");
+    setIsSubmitting(false);
+  }, [isOpen, profile.email, profile.phone]);
+  const handleClose = useCallback(() => {
+    if (isSubmitting) return;
+    onClose();
+  }, [isSubmitting, onClose]);
+  const handleSubmit = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        "aria-label": "Request support",
+        icon: /* @__PURE__ */ jsx(LifebuoyIcon, {}),
+        variant: "ghost",
+        size: "sm",
+        onClick: onOpen
+      }
+    ),
+    /* @__PURE__ */ jsxs(Modal, { isOpen, onClose: handleClose, isCentered: true, children: [
+      /* @__PURE__ */ jsx(ModalOverlay, {}),
+      /* @__PURE__ */ jsxs(ModalContent, { children: [
+        /* @__PURE__ */ jsx(ModalHeader, { children: "Support" }),
+        /* @__PURE__ */ jsx(ModalCloseButton, { isDisabled: isSubmitting }),
+        /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(VStack, { align: "stretch", spacing: 4, children: [
+          /* @__PURE__ */ jsx(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__ */ jsx(Box, { rounded: "md", borderWidth: "1px", borderColor: "gray.200", bg: "gray.50", p: 3, children: /* @__PURE__ */ jsxs(VStack, { align: "stretch", spacing: 1, children: [
+            /* @__PURE__ */ jsxs(Text, { fontSize: "sm", children: [
+              /* @__PURE__ */ jsx("strong", { children: "Name:" }),
+              " ",
+              [profile.firstName, profile.lastName].filter(Boolean).join(" ") || "Unknown"
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { fontSize: "sm", children: [
+              /* @__PURE__ */ jsx("strong", { children: "Organization:" }),
+              " ",
+              org?.currentOrg?.name ?? "Unknown"
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { fontSize: "sm", children: [
+              /* @__PURE__ */ jsx("strong", { children: "Email:" }),
+              " ",
+              (profile.missingEmail ? email : profile.email) || "Missing"
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { fontSize: "sm", children: [
+              /* @__PURE__ */ jsx("strong", { children: "Phone:" }),
+              " ",
+              (profile.missingPhone ? phone : profile.phone) || "Missing"
+            ] })
+          ] }) }),
+          profile.missingEmail && /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "xs", fontWeight: "600", color: "gray.700", mb: 1, children: "Email" }),
+            /* @__PURE__ */ 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__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "xs", fontWeight: "600", color: "gray.700", mb: 1, children: "Phone" }),
+            /* @__PURE__ */ 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__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "xs", fontWeight: "600", color: "gray.700", mb: 1, children: "Optional message" }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                value: message,
+                onChange: (e) => setMessage(e.target.value),
+                placeholder: "What can we help you with?",
+                rows: 3
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs(ModalFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", mr: 3, onClick: handleClose, isDisabled: isSubmitting, children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              colorScheme: "orange",
+              onClick: () => void handleSubmit(),
+              isLoading: isSubmitting,
+              loadingText: "Sending",
+              children: "Request Support"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function LifebuoyIcon() {
+  return /* @__PURE__ */ 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__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+        /* @__PURE__ */ jsx("line", { x1: "4.93", y1: "4.93", x2: "9.17", y2: "9.17" }),
+        /* @__PURE__ */ jsx("line", { x1: "14.83", y1: "14.83", x2: "19.07", y2: "19.07" }),
+        /* @__PURE__ */ jsx("line", { x1: "14.83", y1: "9.17", x2: "19.07", y2: "4.93" }),
+        /* @__PURE__ */ jsx("line", { x1: "14.83", y1: "9.17", x2: "18.36", y2: "5.64" }),
+        /* @__PURE__ */ 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 } = useColorMode();
+  if (status !== "authenticated" || !user) return null;
+  const displayName = user.displayName ?? user.email ?? "User";
+  const avatarUrl = avatarUrlFromUser(user);
+  return /* @__PURE__ */ jsxs(Menu, { placement: "bottom-end", children: [
+    /* @__PURE__ */ jsx(
+      MenuButton,
+      {
+        "aria-label": "Open account menu",
+        as: Box,
+        cursor: "pointer",
+        borderRadius: "full",
+        _hover: { opacity: 0.85 },
+        children: /* @__PURE__ */ jsx(Avatar, { size: "sm", name: displayName, src: avatarUrl })
+      }
+    ),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(MenuList, { zIndex: 1500, children: [
+      /* @__PURE__ */ jsxs(Box, { px: 3, py: 2, children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: "sm", fontWeight: "600", noOfLines: 1, children: displayName }),
+        user.email && /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "gray.500", noOfLines: 1, children: user.email })
+      ] }),
+      /* @__PURE__ */ jsx(MenuDivider, {}),
+      /* @__PURE__ */ jsx(MenuItem, { as: "a", href: myProfileHref, children: "My Profile" }),
+      /* @__PURE__ */ jsx(MenuItem, { onClick: toggleColorMode, children: colorMode === "light" ? "Switch to dark mode" : "Switch to light mode" }),
+      /* @__PURE__ */ jsx(MenuItem, { onClick: () => void signOut(), children: "Sign out" }),
+      linked && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MenuDivider, {}),
+        /* @__PURE__ */ jsx(Box, { px: 3, pt: 1, pb: 1, children: /* @__PURE__ */ jsx(Text, { fontSize: "xs", textTransform: "uppercase", letterSpacing: "0.08em", color: "gray.500", children: "Switch account" }) }),
+        linked.linkedAccounts.length === 0 && /* @__PURE__ */ jsx(MenuItem, { isDisabled: true, children: /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "gray.500", children: "No linked accounts" }) }),
+        linked.linkedAccounts.map((acct) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            onClick: () => {
+              void linked.switchToAccount(acct.id);
+            },
+            children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, align: "center", children: [
+              /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  size: "xs",
+                  name: acct.displayName ?? acct.email,
+                  src: acct.avatarUrl ?? void 0
+                }
+              ),
+              /* @__PURE__ */ jsxs(Flex, { direction: "column", minW: 0, children: [
+                /* @__PURE__ */ jsx(Text, { fontSize: "sm", fontWeight: "600", noOfLines: 1, children: acct.displayName ?? acct.email }),
+                acct.displayName && /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "gray.500", noOfLines: 1, children: acct.email })
+              ] })
+            ] })
+          },
+          acct.id
+        )),
+        /* @__PURE__ */ jsx(MenuItem, { onClick: linked.onAddAccount, children: "Add account" })
+      ] })
+    ] }) })
+  ] });
+}
 function Header({ extrasSlot }) {
-  const { user, signOut, status } = useShellAuth();
+  const { devNotesMenu } = useShellChrome();
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -1205,14 +1685,15 @@ function Header({ extrasSlot }) {
       bg: "white",
       borderBottom: "1px solid",
       borderColor: "gray.200",
+      gap: 3,
       children: [
         /* @__PURE__ */ jsx(Heading, { size: "md", color: "brand.500", children: "politogy" }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(OrgSelector, {}) }),
         /* @__PURE__ */ jsx(Spacer, {}),
-        extrasSlot && /* @__PURE__ */ jsx(Box, { mr: 3, children: extrasSlot }),
-        status === "authenticated" && user && /* @__PURE__ */ jsxs(Menu, { children: [
-          /* @__PURE__ */ jsx(MenuButton, { children: /* @__PURE__ */ jsx(Avatar, { size: "sm", name: user.displayName ?? user.email ?? "" }) }),
-          /* @__PURE__ */ jsx(MenuList, { children: /* @__PURE__ */ jsx(MenuItem, { onClick: () => signOut(), children: "Sign out" }) })
-        ] })
+        extrasSlot && /* @__PURE__ */ jsx(Box, { children: extrasSlot }),
+        /* @__PURE__ */ jsx(SupportRequestButton, {}),
+        devNotesMenu,
+        /* @__PURE__ */ jsx(UserMenu, {})
       ]
     }
   );
@@ -1326,6 +1807,6 @@ function buildSpeculationRules(currentApp, registry) {
   return JSON.stringify(payload);
 }
 
-export { AppLayout, BreadcrumbBar, Card, Footer, GlobalUiIdProvider, Header, HeaderTabBar, PageContainer, PageHeader, ShellProvider, Sidebar, buildSpeculationRules, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth };
+export { AppLayout, BreadcrumbBar, Card, Footer, GlobalUiIdProvider, Header, HeaderTabBar, OrgSelector, PageContainer, PageHeader, ShellProvider, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellLinkedAccounts, useShellOrganization, useShellSupport };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map