@the-portland-company/shell 0.2.1 → 0.3.1

package/dist/index.js

@@ -1,8 +1,10 @@
-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 { extendTheme, Tooltip, ChakraProvider, useColorModeValue, Flex, Menu, MenuButton, HStack, Avatar, VStack, Text, Box, Portal, MenuList, MenuItem, MenuDivider, Badge, IconButton, Link as Link$1, Collapse, Skeleton, Button, useClipboard, Icon, Image, useDisclosure, useToast, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Textarea, ModalFooter } from '@chakra-ui/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx2 from 'clsx';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate, NavLink } from 'react-router-dom';
 import { createContext, useEffect, useState, useMemo, useContext, useCallback } from 'react';
+import { FiChevronDown, FiUser, FiRotateCcw, FiBriefcase, FiTrash2, FiUserPlus, FiLogOut, FiMenu, FiX } from 'react-icons/fi';
+import { keyframes } from '@emotion/react';
 
 // src/theme/index.ts
 
@@ -1118,6 +1120,11 @@ var ShellMetaContext = createContext(null);
 var ShellOrgContext = createContext(null);
 var ShellLinkedAccountsContext = createContext(null);
 var ShellSupportProviderContext = createContext(null);
+var ShellModeContext = createContext(null);
+var ShellNavItemsContext = createContext(null);
+var ShellNavigationPreferenceContext = createContext(null);
+var ShellRoleContext = createContext(null);
+var ShellFooterContext = createContext(null);
 var ShellChromeContext = createContext(null);
 function toShellUser(session) {
   if (!session?.user) return null;
@@ -1186,7 +1193,7 @@ function ShellProvider({
     }),
     [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 }) }) }) }) }) }) });
+  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(ShellModeContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellNavItemsContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellNavigationPreferenceContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellRoleContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellFooterContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ jsx(ChakraProvider, { theme: politogyTheme, children }) }) }) }) }) }) }) }) }) }) }) });
 }
 function useShellAuth() {
   const ctx = useContext(ShellAuthContext);
@@ -1225,6 +1232,612 @@ function useShellChrome() {
   }
   return ctx;
 }
+function useShellMode() {
+  return useContext(ShellModeContext);
+}
+function useShellNavItems() {
+  return useContext(ShellNavItemsContext);
+}
+function useShellNavigationPreference() {
+  return useContext(ShellNavigationPreferenceContext);
+}
+function useShellRole() {
+  return useContext(ShellRoleContext);
+}
+function useShellFooter() {
+  return useContext(ShellFooterContext);
+}
+function BrandLogo({ src, alt = "Brand", className, style }) {
+  if (!src) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className,
+      style,
+      draggable: false
+    }
+  );
+}
+var BrandLogo_default = BrandLogo;
+
+// src/lib/userDisplay.ts
+function getUserDisplayName(user) {
+  if (!user) return "User";
+  return user.profile?.full_name || user.profile?.name || user.user_metadata?.full_name || user.user_metadata?.name || (typeof user.email === "string" ? user.email.split("@")[0] : "") || user.email || "User";
+}
+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,
+    organizationSettingsHref,
+    showContinueOnboarding,
+    onContinueOnboarding
+  } = useShellChrome();
+  const linked = useShellLinkedAccounts();
+  const mode = useShellMode();
+  const org = useShellOrganization();
+  const role = useShellRole();
+  const navigate = useNavigate();
+  const menuListBg = useColorModeValue("white", "gray.900");
+  const menuListBorderColor = useColorModeValue("gray.200", "gray.700");
+  if (status !== "authenticated" || !user) return null;
+  const displayName = getUserDisplayName(user.raw);
+  const avatarUrl = avatarUrlFromUser(user);
+  const modeConfig = mode?.getModeConfig() ?? null;
+  const currentOrg = org?.currentOrg ?? null;
+  const linkedAccounts = linked?.linkedAccounts ?? [];
+  const activeRoleConfig = role?.activeRoleConfig ?? null;
+  return /* @__PURE__ */ jsx(Flex, { alignItems: "center", children: /* @__PURE__ */ jsxs(Menu, { children: [
+    /* @__PURE__ */ jsx(MenuButton, { py: 2, transition: "all 0.3s", _focus: { boxShadow: "none" }, children: /* @__PURE__ */ jsxs(HStack, { children: [
+      /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          size: "sm",
+          src: avatarUrl,
+          name: displayName,
+          bg: modeConfig?.primaryColor || "brand.500"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        VStack,
+        {
+          display: { base: "none", md: "flex" },
+          alignItems: "flex-start",
+          spacing: "1px",
+          ml: "2",
+          children: [
+            /* @__PURE__ */ jsx(HStack, { spacing: 2, children: /* @__PURE__ */ jsx(Text, { fontSize: "sm", children: displayName }) }),
+            /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "gray.500", children: user.email })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { display: { base: "none", md: "flex" }, children: /* @__PURE__ */ jsx(FiChevronDown, {}) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(MenuList, { bg: menuListBg, borderColor: menuListBorderColor, zIndex: 1500, children: [
+      /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(FiUser, {}), onClick: () => navigate(myProfileHref), children: "My Profile" }),
+      showContinueOnboarding && /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          icon: /* @__PURE__ */ jsx(FiRotateCcw, {}),
+          onClick: () => {
+            if (onContinueOnboarding) onContinueOnboarding();
+            else window.dispatchEvent(new CustomEvent("app:continue-onboarding"));
+          },
+          children: "Continue Onboarding"
+        }
+      ),
+      organizationSettingsHref && /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          icon: /* @__PURE__ */ jsx(FiBriefcase, {}),
+          onClick: () => navigate(organizationSettingsHref),
+          children: "Organization Settings"
+        }
+      ),
+      /* @__PURE__ */ jsx(MenuDivider, {}),
+      /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "gray.500", px: 3, py: 1, fontWeight: "semibold", children: "ROLES & ORGANIZATIONS" }),
+      /* @__PURE__ */ jsx(Box, { px: 3, py: 2, children: /* @__PURE__ */ jsxs(VStack, { align: "stretch", spacing: 1, children: [
+        currentOrg && currentOrg.role && /* @__PURE__ */ jsxs(HStack, { children: [
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              size: "sm",
+              colorScheme: currentOrg.role === "owner" ? "purple" : currentOrg.role === "admin" ? "blue" : "gray",
+              children: currentOrg.role.charAt(0).toUpperCase() + currentOrg.role.slice(1)
+            }
+          ),
+          /* @__PURE__ */ jsxs(Text, { fontSize: "xs", color: "gray.500", children: [
+            "in ",
+            currentOrg.name
+          ] })
+        ] }),
+        activeRoleConfig && !currentOrg?.role && /* @__PURE__ */ jsx(Badge, { colorScheme: activeRoleConfig.color, size: "sm", children: activeRoleConfig.name })
+      ] }) }),
+      linked && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MenuDivider, {}),
+        /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "gray.500", px: 3, py: 1, fontWeight: "semibold", children: "ACCOUNTS" }),
+        /* @__PURE__ */ jsx(Box, { px: 3, py: 2, children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
+          /* @__PURE__ */ jsx(Avatar, { size: "xs", src: avatarUrl, name: displayName }),
+          /* @__PURE__ */ jsxs(VStack, { align: "start", spacing: 0, flex: 1, children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "xs", fontWeight: "medium", color: "brand.600", children: displayName }),
+            /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "gray.400", children: "Active" })
+          ] })
+        ] }) }),
+        linkedAccounts.map((account) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            onClick: () => {
+              void linked.switchToAccount(account.id);
+            },
+            _hover: { bg: "gray.50" },
+            children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, flex: 1, justify: "space-between", children: [
+              /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    size: "xs",
+                    src: account.avatarUrl ?? void 0,
+                    name: account.displayName ?? account.email
+                  }
+                ),
+                /* @__PURE__ */ jsxs(VStack, { align: "start", spacing: 0, children: [
+                  /* @__PURE__ */ jsx(Text, { fontSize: "xs", fontWeight: "medium", noOfLines: 1, children: account.displayName ?? account.email.split("@")[0] }),
+                  /* @__PURE__ */ jsx(Tooltip, { label: account.email, placement: "top", hasArrow: true, children: /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      fontSize: "xs",
+                      color: "gray.500",
+                      maxW: "120px",
+                      noOfLines: 1,
+                      textOverflow: "ellipsis",
+                      children: account.email
+                    }
+                  ) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  as: "span",
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Remove account",
+                  icon: /* @__PURE__ */ jsx(FiTrash2, {}),
+                  size: "xs",
+                  variant: "ghost",
+                  colorScheme: "red",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    linked.onRemoveAccount(account.id);
+                  }
+                }
+              )
+            ] })
+          },
+          account.id
+        )),
+        /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            icon: /* @__PURE__ */ jsx(FiUserPlus, {}),
+            onClick: linked.onAddAccount,
+            color: "brand.500",
+            children: "Add Account"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(MenuDivider, {}),
+      /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(FiLogOut, {}), onClick: () => void signOut(), children: "Sign out" })
+    ] }) })
+  ] }) });
+}
+function Header({ onOpen, id }) {
+  const {
+    pageTitle,
+    breadcrumbs,
+    headerActions,
+    headerIconsSlot,
+    brandLogoSrc
+  } = useShellChrome();
+  const mobileNavBg = useColorModeValue("white", "gray.900");
+  const mobileNavBorderColor = useColorModeValue("gray.200", "gray.700");
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      id: id || "mobile-nav-container",
+      ml: { base: 0, md: 60 },
+      px: { base: 4, md: 4 },
+      height: "20",
+      alignItems: "center",
+      bg: mobileNavBg,
+      borderBottomWidth: "1px",
+      borderBottomColor: mobileNavBorderColor,
+      justifyContent: { base: "space-between", md: "space-between" },
+      children: /* @__PURE__ */ jsxs(Flex, { w: "full", mx: "auto", align: "center", justify: "space-between", children: [
+        /* @__PURE__ */ jsxs(HStack, { spacing: 4, minW: "0", children: [
+          onOpen ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              display: { base: "flex", md: "none" },
+              onClick: onOpen,
+              variant: "outline",
+              "aria-label": "open menu",
+              icon: /* @__PURE__ */ jsx(FiMenu, {})
+            }
+          ) : null,
+          brandLogoSrc ? /* @__PURE__ */ jsx(Box, { display: { base: "flex", md: "none" }, h: "32px", children: /* @__PURE__ */ jsx(BrandLogo_default, { src: brandLogoSrc, className: "h-full w-auto object-contain" }) }) : null,
+          /* @__PURE__ */ jsxs(
+            VStack,
+            {
+              align: "flex-start",
+              spacing: 0,
+              minW: "0",
+              display: { base: "none", md: "flex" },
+              children: [
+                pageTitle ? /* @__PURE__ */ jsx(Text, { fontSize: "lg", fontWeight: "bold", noOfLines: 1, children: pageTitle }) : null,
+                breadcrumbs && breadcrumbs.length > 0 ? /* @__PURE__ */ jsx(HStack, { spacing: 2, color: "gray.500", fontSize: "sm", mt: "1px", minW: "0", children: breadcrumbs.map((b, idx) => /* @__PURE__ */ jsxs(Box, { display: "inline-flex", alignItems: "center", minW: "0", children: [
+                  idx > 0 ? /* @__PURE__ */ jsx(Text, { color: "gray.400", mr: 2, children: " > " }) : null,
+                  b.href ? /* @__PURE__ */ jsx(
+                    Link$1,
+                    {
+                      as: NavLink,
+                      to: b.href,
+                      _hover: { textDecoration: "underline" },
+                      noOfLines: 1,
+                      children: b.label
+                    }
+                  ) : /* @__PURE__ */ jsx(Text, { noOfLines: 1, children: b.label })
+                ] }, `${b.label}-${idx}`)) }) : null
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(HStack, { spacing: 0, align: "center", children: [
+          /* @__PURE__ */ jsxs(
+            HStack,
+            {
+              spacing: 2,
+              mr: "15px",
+              color: "gray.600",
+              sx: {
+                '& button:not([role="menuitem"]):not([data-menu-item])': {
+                  width: "32px",
+                  height: "32px",
+                  minWidth: "32px",
+                  padding: 0
+                },
+                '& button:not([role="menuitem"]):not([data-menu-item]) svg': {
+                  width: "20px",
+                  height: "20px"
+                }
+              },
+              children: [
+                headerActions,
+                headerIconsSlot
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(UserMenu, {})
+        ] })
+      ] })
+    }
+  );
+}
+function BrandIcon({
+  name,
+  size,
+  className,
+  style,
+  alt,
+  basePath = "/brand/icons/"
+}) {
+  const a11yLabel = alt ?? "";
+  const isDecorative = a11yLabel === "";
+  const inlineSize = size ? { width: size, height: size, ...style } : style;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: `${basePath}${name}.svg`,
+      alt: a11yLabel,
+      role: isDecorative ? "presentation" : void 0,
+      "aria-hidden": isDecorative ? true : void 0,
+      className,
+      style: inlineSize,
+      draggable: false
+    }
+  );
+}
+var BrandIcon_default = BrandIcon;
+var MODE_CAMPAIGN = "campaign";
+var MODE_PETITION = "petition";
+function NavItem({
+  icon,
+  brandIcon,
+  children,
+  href,
+  action,
+  subItems,
+  badge,
+  subLabel,
+  isSubItem = false,
+  isExpanded,
+  onToggle,
+  menuKey,
+  isDisabled: navIsDisabled,
+  disabled,
+  ...rest
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const mode = useShellMode();
+  const currentMode = mode?.currentMode ?? null;
+  const modeConfig = mode?.getModeConfig() ?? null;
+  const navPref = useShellNavigationPreference();
+  const showSubMenu = navPref?.showSubMenu ?? true;
+  const navHoverGradient = currentMode === MODE_CAMPAIGN ? "linear-gradient(90deg, #F2C94C 0%, #E63946 100%)" : currentMode === MODE_PETITION ? "linear-gradient(90deg, #F2C94C 0%, #007BFF 100%)" : "linear-gradient(90deg, #007BFF 0%, #E63946 100%)";
+  const gradientSweepBefore = {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: "0%",
+    background: navHoverGradient,
+    transition: "width 300ms ease",
+    pointerEvents: "none",
+    zIndex: 0
+  };
+  const isDisabled = Boolean(navIsDisabled || disabled);
+  const effectiveHref = href || (Array.isArray(subItems) && subItems.length > 0 ? subItems[0].href : void 0);
+  const effectivePathname = effectiveHref?.split("?")[0];
+  const currentFullPath = location.pathname + location.search;
+  const currentSearchParams = useMemo(
+    () => new URLSearchParams(location.search),
+    [location.search]
+  );
+  const matchesSubItem = (itemHref) => {
+    if (itemHref === currentFullPath) return true;
+    const itemPath = itemHref.split("?")[0];
+    const itemSearch = itemHref.includes("?") ? itemHref.split("?")[1] : "";
+    if (itemPath === location.pathname && !itemSearch) {
+      return true;
+    }
+    if (location.pathname.startsWith(`${itemPath}/`)) {
+      const itemSegments = itemPath.split("/").filter(Boolean);
+      const locationSegments = location.pathname.split("/").filter(Boolean);
+      const itemLastSegment = itemSegments[itemSegments.length - 1];
+      const locationLastSegment = locationSegments[locationSegments.length - 1];
+      if (itemLastSegment && itemLastSegment === locationLastSegment) {
+        return true;
+      }
+    }
+    if (itemPath === location.pathname && itemSearch) {
+      const itemSearchParams = new URLSearchParams(itemSearch);
+      const itemTab = itemSearchParams.get("tab") || itemSearchParams.get("view");
+      if (!itemTab) return true;
+      return itemTab === currentSearchParams.get("tab");
+    }
+    if (itemPath && !itemHref.includes("?") && itemPath !== effectivePathname) {
+      const segment = itemPath.split("/").pop();
+      if (segment && location.pathname.endsWith("/" + segment) && location.pathname.startsWith(itemPath.split("/").slice(0, -1).join("/"))) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const isActive = isSubItem ? matchesSubItem(effectiveHref || "") : (() => {
+    if (!effectivePathname) return false;
+    if (location.pathname === effectivePathname) return true;
+    if (location.pathname.startsWith(`${effectivePathname}/`)) return true;
+    const dashboardOverviewMatch = effectivePathname.match(
+      /^\/[^/]+\/[^/]*\/dashboard\/overview$/
+    );
+    if (dashboardOverviewMatch) {
+      const dashboardRoot = effectivePathname.replace(/\/overview$/, "");
+      return location.pathname === dashboardRoot || location.pathname.startsWith(`${dashboardRoot}/`) || location.pathname.startsWith(`${dashboardRoot}&`);
+    }
+    return effectivePathname !== `/${location.pathname.split("/")[1]}/dashboard` && location.pathname.startsWith(effectivePathname + "/");
+  })();
+  const hasSubItems = showSubMenu && Array.isArray(subItems) && subItems.length > 0;
+  const hasActiveChild = hasSubItems && subItems.some((item) => matchesSubItem(item.href || ""));
+  const isParentActive = isActive || hasActiveChild;
+  const isSubMenuOpen = isExpanded !== void 0 ? isExpanded : hasSubItems && subItems.some((item) => matchesSubItem(item.href || ""));
+  const expandedRowBg = isParentActive ? modeConfig?.primaryColor || "brand.500" : isSubMenuOpen ? "gray.100" : "transparent";
+  const expandedRowTextColor = isParentActive ? "white" : isSubMenuOpen ? "gray.900" : "gray.600";
+  const disabledRowBg = isSubItem ? "gray.50" : "transparent";
+  const disabledRowTextColor = "gray.400";
+  if (hasSubItems) {
+    const headerProps = {
+      align: "center",
+      px: "4",
+      py: "2.5",
+      mx: "4",
+      w: "auto",
+      borderTopRadius: "lg",
+      borderBottomRadius: isSubMenuOpen ? 0 : "lg",
+      role: "group",
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      opacity: 1,
+      pointerEvents: isDisabled ? "none" : "auto",
+      "data-nav-item-active": String(isParentActive),
+      position: "relative",
+      overflow: "hidden",
+      bg: isDisabled ? disabledRowBg : expandedRowBg,
+      color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
+      _before: isDisabled ? void 0 : gradientSweepBefore,
+      _hover: {
+        color: isDisabled ? disabledRowTextColor : "white",
+        _before: isDisabled ? void 0 : { width: "100%" }
+      },
+      "aria-disabled": isDisabled ? "true" : "false",
+      onClick: (e) => {
+        if (isDisabled) return;
+        if (effectiveHref) e.preventDefault();
+        e.stopPropagation();
+        onToggle?.(menuKey || null);
+      }
+    };
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Flex, { ...headerProps, ...rest, children: [
+        brandIcon ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            mr: "4",
+            display: "inline-flex",
+            alignItems: "center",
+            position: "relative",
+            zIndex: 1,
+            filter: isParentActive ? "brightness(0) invert(1)" : void 0,
+            _groupHover: isDisabled ? void 0 : { filter: "brightness(0) invert(1)" },
+            children: /* @__PURE__ */ jsx(BrandIcon_default, { name: brandIcon, size: 18 })
+          }
+        ) : icon ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            mr: "4",
+            fontSize: "16",
+            position: "relative",
+            zIndex: 1,
+            _groupHover: {
+              color: isDisabled ? disabledRowTextColor : "white"
+            },
+            as: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Box, { flex: "1", position: "relative", zIndex: 1, children }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: FiChevronDown,
+            position: "relative",
+            zIndex: 1,
+            transform: isSubMenuOpen ? "rotate(180deg)" : void 0,
+            transition: "transform 0.2s"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Collapse, { in: isSubMenuOpen, animateOpacity: true, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          px: "0",
+          mx: "4",
+          w: "auto",
+          mb: "2",
+          py: "1",
+          borderTopRadius: 0,
+          borderBottomRadius: "md",
+          bg: isDisabled ? "gray.100" : "gray.200",
+          children: subItems.map((item) => /* @__PURE__ */ jsx(
+            NavItem,
+            {
+              icon: item.icon,
+              brandIcon: item.brandIcon,
+              href: item.href,
+              isSubItem: true,
+              isDisabled: item.disabled,
+              subLabel: item.subLabel,
+              children: item.name
+            },
+            item.name
+          ))
+        }
+      ) })
+    ] });
+  }
+  const handleClick = (e) => {
+    if (isDisabled) {
+      e.preventDefault();
+      return;
+    }
+    if (action) {
+      e.preventDefault();
+      action();
+      return;
+    }
+    if (effectiveHref) {
+      e.preventDefault();
+      navigate(effectiveHref);
+    }
+  };
+  return /* @__PURE__ */ jsx(Box, { as: "a", href: effectiveHref || "#", onClick: handleClick, style: { textDecoration: "none" }, children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      px: "4",
+      py: "2.5",
+      mx: isSubItem ? "0" : "4",
+      w: isSubItem ? "full" : "auto",
+      borderRadius: isSubItem ? "0" : "lg",
+      role: "group",
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      opacity: 1,
+      pointerEvents: isDisabled ? "none" : "auto",
+      "data-nav-item-active": String(isActive),
+      position: "relative",
+      overflow: "hidden",
+      bg: isDisabled ? disabledRowBg : isActive ? isSubItem ? "gray.100" : modeConfig?.primaryColor || "brand.500" : "transparent",
+      color: isDisabled ? disabledRowTextColor : isActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.600",
+      _before: isDisabled ? void 0 : gradientSweepBefore,
+      _hover: {
+        color: isDisabled ? disabledRowTextColor : "white",
+        _before: isDisabled ? void 0 : { width: "100%" }
+      },
+      "aria-disabled": isDisabled ? "true" : "false",
+      onClick: handleClick,
+      children: [
+        brandIcon ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            mr: "4",
+            display: "inline-flex",
+            alignItems: "center",
+            position: "relative",
+            zIndex: 1,
+            filter: isActive && !isSubItem ? "brightness(0) invert(1)" : void 0,
+            _groupHover: isDisabled ? void 0 : { filter: "brightness(0) invert(1)" },
+            children: /* @__PURE__ */ jsx(BrandIcon_default, { name: brandIcon, size: 18 })
+          }
+        ) : icon ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            mr: "4",
+            fontSize: "16",
+            position: "relative",
+            zIndex: 1,
+            _groupHover: {
+              color: isDisabled ? disabledRowTextColor : "white"
+            },
+            as: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(Box, { flex: "1", position: "relative", zIndex: 1, children: [
+          /* @__PURE__ */ jsx(Box, { children }),
+          subLabel ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              mt: 0.5,
+              fontSize: "10px",
+              lineHeight: "1.3",
+              color: isDisabled ? "gray.400" : "gray.400",
+              children: subLabel
+            }
+          ) : null,
+          badge && /* @__PURE__ */ jsx(Badge, { colorScheme: "orange", size: "xs", mt: 1, fontSize: "xs", display: "block", children: badge })
+        ] })
+      ]
+    }
+  ) });
+}
+var NavItem_default = NavItem;
+
+// src/lib/orgColors.ts
 var HEX_COLOR_PATTERN = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 function normalizeHexColor(value) {
   const trimmed = value?.trim();
@@ -1233,6 +1846,34 @@ function normalizeHexColor(value) {
   const [r, g, b] = trimmed.slice(1).split("");
   return `#${r}${r}${g}${g}${b}${b}`;
 }
+function hexToRgba(hex, alpha) {
+  const normalized = normalizeHexColor(hex);
+  if (!normalized) return null;
+  const red = parseInt(normalized.slice(1, 3), 16);
+  const green = parseInt(normalized.slice(3, 5), 16);
+  const blue = parseInt(normalized.slice(5, 7), 16);
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+}
+function lightenHexColor(hex, amount) {
+  const normalized = normalizeHexColor(hex);
+  if (!normalized) return null;
+  const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
+  const blend = (channel) => clamp(channel + (255 - channel) * amount);
+  const red = parseInt(normalized.slice(1, 3), 16);
+  const green = parseInt(normalized.slice(3, 5), 16);
+  const blue = parseInt(normalized.slice(5, 7), 16);
+  return `#${blend(red).toString(16).padStart(2, "0")}${blend(green).toString(16).padStart(2, "0")}${blend(blue).toString(16).padStart(2, "0")}`;
+}
+function getOrganizationBrandColor(organization) {
+  if (!organization) return null;
+  const direct = normalizeHexColor(organization.brandColor);
+  if (direct) return direct;
+  const brandColors = Array.isArray(organization.settings?.brand_colors) ? organization.settings?.brand_colors : [];
+  const firstBrandColor = brandColors?.find(
+    (entry) => typeof entry?.value === "string" && normalizeHexColor(entry.value)
+  );
+  return normalizeHexColor(firstBrandColor?.value ?? null);
+}
 function getOrganizationBadgeLetters(name) {
   const normalizedName = String(name || "").trim().replace(/[^a-zA-Z0-9\s]+/g, " ");
   const parts = normalizedName.split(/\s+/).filter(Boolean);
@@ -1267,60 +1908,698 @@ function OrgBadge({ name, logoUrl, brandColor, size }) {
     }
   );
 }
-function OrgSelector() {
+function OrganizationIdCopy({ orgId }) {
+  const { hasCopied, onCopy } = useClipboard(orgId);
+  const copiedAnimation = keyframes`
+    0% { opacity: 0; transform: translateY(6px); }
+    20% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(-8px); }
+  `;
+  return /* @__PURE__ */ jsx(Tooltip, { label: orgId, placement: "top", hasArrow: true, children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      cursor: "pointer",
+      onClick: onCopy,
+      _hover: { bg: "gray.100" },
+      borderRadius: "md",
+      px: 2,
+      py: 1,
+      position: "relative",
+      transition: "all 0.2s",
+      children: [
+        /* @__PURE__ */ jsxs(Text, { fontSize: "xs", color: hasCopied ? "green.500" : "gray.600", fontWeight: "normal", children: [
+          "...",
+          orgId.slice(-8)
+        ] }),
+        hasCopied && /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            bottom: "100%",
+            mb: "6px",
+            px: "2",
+            py: "1",
+            fontSize: "xs",
+            bg: "gray.700",
+            color: "white",
+            borderRadius: "md",
+            animation: `${copiedAnimation} 0.9s ease-out`,
+            pointerEvents: "none",
+            children: "Copied!"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function OrgPill() {
   const org = useShellOrganization();
+  const { user } = useShellAuth();
+  const currentOrg = org?.currentOrg ?? null;
+  const organizations = org?.organizations ?? [];
+  const switchOrganization = org?.switchOrganization;
+  const loadingOrgs = org?.loadingOrgs ?? false;
+  const unselectedOrganizations = useMemo(
+    () => organizations.filter((o) => o.id !== currentOrg?.id),
+    [organizations, currentOrg?.id]
+  );
+  const selectedOrgBrandColor = useMemo(
+    () => currentOrg ? getOrganizationBrandColor(currentOrg) : null,
+    [currentOrg]
+  );
+  const selectedOrgColor = selectedOrgBrandColor || "var(--mode-primary-color, #ea6a3a)";
+  const selectedOrgMenuBg = selectedOrgBrandColor && lightenHexColor(selectedOrgBrandColor, 0.12) || "#4a4a4a";
   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: [
+  return /* @__PURE__ */ jsxs(Box, { mx: "4", mb: "3", children: [
+    /* @__PURE__ */ jsxs(HStack, { justify: "space-between", align: "center", mb: "2", children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "gray.500", fontWeight: "semibold", children: "ORGANIZATION" }),
+      currentOrg?.id && currentOrg.id !== user?.id && /* @__PURE__ */ jsx(OrganizationIdCopy, { orgId: currentOrg.id })
+    ] }),
+    loadingOrgs && !currentOrg ? /* @__PURE__ */ jsx(Skeleton, { height: "32px", width: "full", borderRadius: "md" }) : /* @__PURE__ */ jsxs(Menu, { gutter: 0, children: [
+      /* @__PURE__ */ jsx(
+        MenuButton,
+        {
+          as: Button,
+          rightIcon: /* @__PURE__ */ jsx(FiChevronDown, {}),
+          size: "sm",
+          width: "full",
+          bg: currentOrg?.id ? selectedOrgColor : "gray.100",
+          borderColor: currentOrg?.id ? selectedOrgColor : "gray.300",
+          color: currentOrg?.id ? "white" : "gray.700",
+          _hover: {
+            bg: currentOrg?.id ? selectedOrgColor : "gray.200",
+            color: currentOrg?.id ? "white" : "gray.900"
+          },
+          _active: {
+            bg: currentOrg?.id ? selectedOrgColor : "gray.200",
+            color: currentOrg?.id ? "white" : "gray.900"
+          },
+          _expanded: {
+            bg: currentOrg?.id ? selectedOrgColor : "gray.200",
+            color: currentOrg?.id ? "white" : "gray.900"
+          },
+          textAlign: "left",
+          justifyContent: "flex-start",
+          isDisabled: loadingOrgs && organizations.length === 0,
+          sx: currentOrg?.id ? {
+            color: "white",
+            ".chakra-button__icon": { color: "white" }
+          } : void 0,
+          children: /* @__PURE__ */ jsxs(HStack, { spacing: "2.5", minW: 0, align: "center", children: [
             /* @__PURE__ */ jsx(
               OrgBadge,
               {
-                name: currentOrg.name,
-                logoUrl: currentOrg.logoUrl,
-                brandColor: currentOrg.brandColor,
-                size: "24px"
+                name: currentOrg?.name,
+                logoUrl: currentOrg?.logoUrl,
+                brandColor: selectedOrgBrandColor,
+                size: "28px"
               }
             ),
-            /* @__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 }) })
+            /* @__PURE__ */ jsx(Text, { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: currentOrg?.name || "No organizations" })
           ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+        MenuList,
+        {
+          bg: currentOrg?.id ? selectedOrgMenuBg : "gray.100",
+          borderColor: currentOrg?.id ? selectedOrgColor : "gray.300",
+          color: currentOrg?.id ? "white" : "gray.800",
+          mt: "1",
+          minW: "13rem",
+          maxH: "60vh",
+          overflowY: "auto",
+          zIndex: "modal",
+          boxShadow: "2xl",
+          children: [
+            unselectedOrganizations.map((o) => {
+              const orgBrandColor = getOrganizationBrandColor(o);
+              return /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  onClick: () => switchOrganization?.(o.id),
+                  bg: "transparent",
+                  color: currentOrg?.id ? "white" : "inherit",
+                  _hover: {
+                    bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
+                    color: currentOrg?.id ? "white" : "gray.900"
+                  },
+                  _focus: {
+                    bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
+                    color: currentOrg?.id ? "white" : "gray.900"
+                  },
+                  _active: {
+                    bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.24) || "#5d5d5d" : "gray.200",
+                    color: currentOrg?.id ? "white" : "gray.900"
+                  },
+                  children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", width: "100%", overflow: "hidden", children: [
+                    /* @__PURE__ */ jsxs(HStack, { minW: 0, flex: "1", spacing: "2.5", children: [
+                      /* @__PURE__ */ jsx(
+                        OrgBadge,
+                        {
+                          name: o.name,
+                          logoUrl: o.logoUrl,
+                          brandColor: orgBrandColor,
+                          size: "24px"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          flex: "1",
+                          children: o.name
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        fontSize: "xs",
+                        color: currentOrg?.id ? "whiteAlpha.700" : "gray.500",
+                        ml: 2,
+                        flexShrink: 0,
+                        children: o.id.slice(-8)
+                      }
+                    )
+                  ] })
+                },
+                o.id
+              );
+            }),
+            /* @__PURE__ */ jsx(MenuDivider, { my: 0, borderColor: currentOrg?.id ? "whiteAlpha.300" : void 0 }),
+            /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                onClick: () => window.dispatchEvent(new CustomEvent("open-create-org")),
+                fontWeight: "bold",
+                bg: "transparent",
+                color: currentOrg?.id ? "white" : "inherit",
+                my: 0,
+                _hover: {
+                  bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
+                  color: currentOrg?.id ? "white" : "gray.900"
+                },
+                _focus: {
+                  bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.2) || "#555555" : "gray.100",
+                  color: currentOrg?.id ? "white" : "gray.900"
+                },
+                _active: {
+                  bg: currentOrg?.id ? lightenHexColor(selectedOrgBrandColor || "#ea6a3a", 0.24) || "#5d5d5d" : "gray.200",
+                  color: currentOrg?.id ? "white" : "gray.900"
+                },
+                fontSize: "sm",
+                children: "+ New Organization"
+              }
+            )
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+var OrgPill_default = OrgPill;
+function ModePill() {
+  const mode = useShellMode();
+  if (!mode) return null;
+  const { currentMode, modes, switchMode, getModeConfig } = mode;
+  const modeConfig = getModeConfig();
+  if (!modeConfig) return null;
+  const hasMultipleModes = modes.length > 1;
+  const isDisabled = !hasMultipleModes;
+  return /* @__PURE__ */ jsx(Box, { mx: "4", mb: "4", children: /* @__PURE__ */ jsxs(Menu, { gutter: 0, children: [
+    /* @__PURE__ */ jsx(
+      MenuButton,
+      {
+        as: Button,
+        leftIcon: modeConfig.icon,
+        rightIcon: /* @__PURE__ */ jsx(FiChevronDown, {}),
+        size: "sm",
+        width: "full",
+        bg: modeConfig.primaryColor,
+        borderColor: modeConfig.primaryColor,
+        color: modeConfig.white,
+        _disabled: {
+          bg: modeConfig.primaryColor,
+          borderColor: modeConfig.primaryColor,
+          color: modeConfig.white,
+          cursor: "not-allowed",
+          opacity: 1
         },
-        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" }) })
+        isDisabled,
+        _hover: {
+          bg: modeConfig.primaryColor,
+          color: modeConfig.white
+        },
+        _active: {
+          bg: modeConfig.primaryColor,
+          color: modeConfig.white
+        },
+        children: modeConfig.name
+      }
+    ),
+    hasMultipleModes && /* @__PURE__ */ jsx(MenuList, { children: modes.map((m) => /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        onClick: () => switchMode(m.id),
+        bg: "transparent",
+        color: currentMode === m.id ? m.primaryColor : "inherit",
+        _hover: { bg: m.bgColor, color: m.primaryColor },
+        icon: m.icon,
+        children: m.name
+      },
+      m.id
+    )) })
+  ] }) });
+}
+var ModePill_default = ModePill;
+function ActivityIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
+    }
+  );
+}
+function defaultEnvChip(label) {
+  if (!label) return null;
+  const lower = label.toLowerCase();
+  if (lower.includes("prod")) {
+    return { color: "#ef4444", bg: "#fee2e2", border: "#fecaca", name: label };
+  }
+  if (lower.includes("stag")) {
+    return { color: "#f97316", bg: "#ffedd5", border: "#fed7aa", name: label };
+  }
+  if (lower.includes("local") || lower.includes("dev")) {
+    return { color: "#22c55e", bg: "#dcfce7", border: "#bbf7d0", name: label };
+  }
+  return { color: "#6b7280", bg: "#f3f4f6", border: "#e5e7eb", name: label };
+}
+var PLACEHOLDER_SHA_VALUES = /* @__PURE__ */ new Set(["unknown", "n/a", "null", "undefined", ""]);
+function isMeaningfulCommit(value) {
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+  return !PLACEHOLDER_SHA_VALUES.has(trimmed.toLowerCase());
+}
+function isMeaningfulAuthor(value) {
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+  return !PLACEHOLDER_SHA_VALUES.has(trimmed.toLowerCase());
+}
+function getFirstName(value) {
+  if (!value) return "";
+  const stripped = value.replace(/<[^>]+>/g, "").trim();
+  if (!stripped) return "";
+  const [firstToken] = stripped.split(/\s+/);
+  return firstToken || stripped;
+}
+function CommitCopyButton({
+  envNode,
+  environmentLabel,
+  commit,
+  version = "",
+  commitDate = "",
+  commitAuthor = "",
+  commitLog = "",
+  onDiagnosticsClick
+}) {
+  const safeCommit = isMeaningfulCommit(commit) ? commit.trim() : "";
+  const { hasCopied, onCopy } = useClipboard(safeCommit);
+  const shortCommit = safeCommit ? safeCommit.slice(-4) : "";
+  const copiedAnimation = keyframes`
+    0% { opacity: 0; transform: translateY(6px); }
+    20% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(-8px); }
+  `;
+  const formattedDate = useMemo(() => {
+    if (!commitDate) return "";
+    const parsed = new Date(commitDate);
+    if (Number.isNaN(parsed.getTime())) return commitDate;
+    return parsed.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  }, [commitDate]);
+  const metaLine = useMemo(() => {
+    const firstName = isMeaningfulAuthor(commitAuthor) ? getFirstName(commitAuthor) : "";
+    return [formattedDate, firstName].filter(Boolean).join(" | ");
+  }, [formattedDate, commitAuthor]);
+  const normalizedCommitLog = useMemo(() => {
+    if (commitLog?.trim()) {
+      return commitLog.replace(/\r\n/g, "\n").replace(/\\n/g, "\n");
+    }
+    return "";
+  }, [commitLog]);
+  const tooltipContent = normalizedCommitLog.length > 0 ? /* @__PURE__ */ jsx(
+    Box,
+    {
+      maxW: "600px",
+      width: "min(600px, 90vw)",
+      maxH: "80vh",
+      whiteSpace: "pre-wrap",
+      overflowY: "auto",
+      overflowX: "auto",
+      fontSize: "xs",
+      fontFamily: "mono",
+      wordBreak: "break-word",
+      children: normalizedCommitLog
+    }
+  ) : void 0;
+  const envChip = useMemo(() => {
+    if (envNode) return envNode;
+    const chip = defaultEnvChip(environmentLabel);
+    if (!chip) return null;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "span",
+        display: "inline-flex",
+        alignItems: "center",
+        px: "1.5",
+        py: "0.5",
+        borderWidth: "1px",
+        borderColor: chip.border,
+        bg: chip.bg,
+        color: chip.color,
+        borderRadius: "md",
+        fontSize: "2xs",
+        fontWeight: "600",
+        lineHeight: "1",
+        textTransform: "capitalize",
+        "aria-label": `Environment: ${chip.name}`,
+        children: chip.name
+      }
+    );
+  }, [envNode, environmentLabel]);
+  const showEnv = Boolean(envChip);
+  return /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      justify: "center",
+      align: "center",
+      borderRadius: "md",
+      py: 0.5,
+      px: 1,
+      position: "relative",
+      spacing: 0,
+      textAlign: "center",
+      w: "full",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justify: "center", align: "center", gap: 2, whiteSpace: "nowrap", children: [
+          showEnv ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                label: tooltipContent,
+                isDisabled: !tooltipContent,
+                hasArrow: true,
+                placement: "top-start",
+                openDelay: 150,
+                closeOnClick: false,
+                shouldWrapChildren: true,
+                modifiers: [
+                  { name: "preventOverflow", options: { padding: 16 } },
+                  { name: "offset", options: { offset: [0, 12] } }
+                ],
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "unstyled",
+                    minW: "auto",
+                    h: "auto",
+                    p: 0,
+                    lineHeight: "1",
+                    color: "inherit",
+                    onClick: onCopy,
+                    "aria-label": "Copy commit ID",
+                    isDisabled: !safeCommit,
+                    children: envChip
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" })
+          ] }) : null,
+          shortCommit ? /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: hasCopied ? "green.500" : "gray.400", flexShrink: 0, children: shortCommit }) : null,
+          version ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            shortCommit ? /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" }) : null,
+            /* @__PURE__ */ jsxs(Text, { fontSize: "2xs", color: "gray.400", flexShrink: 0, children: [
+              "v",
+              version
+            ] })
+          ] }) : null,
+          onDiagnosticsClick ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" }),
+            /* @__PURE__ */ jsx(Tooltip, { label: "Diagnostics", hasArrow: true, placement: "top", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "unstyled",
+                minW: "auto",
+                h: "auto",
+                p: 0,
+                lineHeight: "1",
+                color: "gray.400",
+                _hover: { color: "gray.600" },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDiagnosticsClick();
+                },
+                "aria-label": "Diagnostics",
+                children: /* @__PURE__ */ jsx(Icon, { as: ActivityIcon, boxSize: 3 })
+              }
+            ) })
+          ] }) : null
+        ] }),
+        metaLine ? /* @__PURE__ */ jsxs(Text, { fontSize: "2xs", color: "gray.500", textAlign: "center", whiteSpace: "nowrap", children: [
+          "| ",
+          metaLine,
+          " |"
+        ] }) : null,
+        hasCopied && /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "absolute",
+            bottom: "100%",
+            mb: "6px",
+            px: "2",
+            py: "1",
+            fontSize: "xs",
+            bg: "gray.700",
+            color: "white",
+            borderRadius: "md",
+            animation: `${copiedAnimation} 0.9s ease-out`,
+            pointerEvents: "none",
+            children: "Copied"
+          }
+        )
+      ]
+    }
+  );
+}
+function Sidebar({ onClose, id }) {
+  const { brandLogoSrc } = useShellChrome();
+  const navItems = useShellNavItems()?.items ?? [];
+  const footer = useShellFooter();
+  const org = useShellOrganization();
+  const currentOrg = org?.currentOrg ?? null;
+  const location = useLocation();
+  const sidebarBg = useColorModeValue("white", "gray.900");
+  const sidebarBorderColor = useColorModeValue("gray.200", "gray.700");
+  const [expandedMenu, setExpandedMenu] = useState(null);
+  useEffect(() => {
+    const activeMenu = navItems.find(
+      (item) => item.children && item.children.some((child) => {
+        if (!child.href) return false;
+        const childPath = child.href.split("?")[0];
+        if (!childPath) return false;
+        return location.pathname === childPath || location.pathname.startsWith(`${childPath}/`);
+      })
+    )?.name || null;
+    setExpandedMenu(activeMenu);
+  }, [location.pathname, navItems]);
+  const handleMenuToggle = (menuKey) => {
+    if (!menuKey) {
+      setExpandedMenu(null);
+      return;
+    }
+    setExpandedMenu((prev) => prev === menuKey ? null : menuKey);
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      id: id || "sidebar-container",
+      transition: "3s ease",
+      bg: sidebarBg,
+      borderRight: "1px",
+      borderRightColor: sidebarBorderColor,
+      w: { base: "full", md: 60 },
+      pos: "fixed",
+      h: "100vh",
+      direction: "column",
+      overflow: "hidden",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { alignItems: "center", mx: "8", mt: "3", mb: "2", justifyContent: "space-between", flexShrink: 0, children: [
+          /* @__PURE__ */ jsx(Box, { h: "40px", children: brandLogoSrc ? /* @__PURE__ */ jsx(BrandLogo_default, { src: brandLogoSrc, className: "h-full w-auto object-contain" }) : null }),
+          onClose ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              display: { base: "flex", md: "none" },
+              onClick: onClose,
+              variant: "outline",
+              "aria-label": "close menu",
+              icon: /* @__PURE__ */ jsx(FiX, {})
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            flex: "1",
+            overflowY: "auto",
+            css: {
+              "&::-webkit-scrollbar": { width: "8px" },
+              "&::-webkit-scrollbar-track": { background: "transparent" },
+              "&::-webkit-scrollbar-thumb": { background: "#CBD5E0", borderRadius: "4px" },
+              "&::-webkit-scrollbar-thumb:hover": { background: "#A0AEC0" }
+            },
+            children: [
+              currentOrg?.logoUrl && /* @__PURE__ */ jsx(Box, { mx: "4", mb: "3", children: /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: currentOrg.logoUrl,
+                  alt: `${currentOrg.name} logo`,
+                  maxH: "70px",
+                  w: "full",
+                  objectFit: "contain",
+                  borderRadius: "md"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(OrgPill_default, {}),
+              /* @__PURE__ */ jsx(ModePill_default, {}),
+              navItems.map((link) => /* @__PURE__ */ jsx(
+                NavItem_default,
+                {
+                  icon: link.icon,
+                  brandIcon: link.brandIcon,
+                  href: link.href,
+                  subItems: link.children,
+                  badge: link.badge,
+                  subLabel: link.subLabel,
+                  action: link.action,
+                  menuKey: String(link.name),
+                  isExpanded: expandedMenu === link.name,
+                  onToggle: handleMenuToggle,
+                  isDisabled: Boolean(link.disabled),
+                  children: link.name
+                },
+                link.name
+              ))
+            ]
+          }
+        ),
+        footer && /* @__PURE__ */ jsx(
+          Box,
+          {
+            px: "1",
+            py: "1",
+            borderTop: "1px",
+            borderColor: "gray.200",
+            flexShrink: 0,
+            bg: sidebarBg,
+            zIndex: 1,
+            children: /* @__PURE__ */ jsxs(VStack, { align: "stretch", spacing: 2, px: "3", py: "2", children: [
+              /* @__PURE__ */ jsx(HStack, { spacing: 1, fontSize: "xs", color: "gray.600", wrap: "wrap", children: footer.links.map((l, idx) => /* @__PURE__ */ jsxs(Box, { display: "inline-flex", alignItems: "center", children: [
+                idx > 0 ? /* @__PURE__ */ jsx(Text, { color: "gray.400", mx: 1, children: "|" }) : null,
+                l.external ? /* @__PURE__ */ jsx(
+                  Link$1,
+                  {
+                    href: l.href,
+                    isExternal: true,
+                    _hover: { textDecoration: "underline", opacity: 1 },
+                    children: l.label
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Link$1,
+                  {
+                    as: NavLink,
+                    to: l.href,
+                    _hover: { textDecoration: "underline", opacity: 1 },
+                    children: l.label
+                  }
+                )
+              ] }, `${l.label}-${idx}`)) }),
+              (footer.version || footer.commit || footer.commitFull || footer.environmentLabel || footer.envNode) && /* @__PURE__ */ jsx(
+                CommitCopyButton,
+                {
+                  envNode: footer.envNode,
+                  environmentLabel: footer.environmentLabel,
+                  commit: footer.commitFull ?? footer.commit,
+                  version: footer.version,
+                  commitDate: footer.commitDate,
+                  commitAuthor: footer.commitAuthor,
+                  commitLog: footer.commitLog,
+                  onDiagnosticsClick: footer.onDiagnosticsClick
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function Footer({ buildInfo }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "footer",
+      px: 4,
+      py: 2,
+      borderTop: "1px solid",
+      borderColor: "gray.200",
+      fontSize: "xs",
+      color: "gray.500",
+      children: /* @__PURE__ */ jsxs(Text, { children: [
+        "politogy ",
+        buildInfo ? `\xB7 ${buildInfo}` : ""
       ] })
-    ] }) })
+    }
+  );
+}
+function AppLayout({
+  children,
+  buildInfo,
+  modalsSlot,
+  notificationsSlot,
+  overlaySlot
+}) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", minH: "100vh", children: [
+    /* @__PURE__ */ jsx(
+      Sidebar,
+      {
+        onClose: mobileOpen ? () => setMobileOpen(false) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(Header, { onOpen: () => setMobileOpen(true) }),
+    /* @__PURE__ */ jsxs(Box, { as: "main", flex: "1", ml: { base: 0, md: 60 }, position: "relative", overflow: "auto", children: [
+      children,
+      notificationsSlot
+    ] }),
+    buildInfo ? /* @__PURE__ */ jsx(Footer, { buildInfo }) : null,
+    modalsSlot,
+    overlaySlot
   ] });
 }
 var SUPPORT_REQUEST_SUCCESS_MESSAGE = "Your support request was sent to Politogy leadership.";
@@ -1607,191 +2886,58 @@ function LifebuoyIcon() {
     }
   );
 }
-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 { devNotesMenu } = useShellChrome();
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      as: "header",
-      align: "center",
-      px: 4,
-      h: "56px",
-      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, { children: extrasSlot }),
-        /* @__PURE__ */ jsx(SupportRequestButton, {}),
-        devNotesMenu,
-        /* @__PURE__ */ jsx(UserMenu, {})
-      ]
-    }
-  );
-}
-function Sidebar({ entries, currentApp, footerSlot }) {
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      as: "nav",
-      w: "200px",
-      minH: "100%",
-      bg: "gray.50",
-      borderRight: "1px solid",
-      borderColor: "gray.200",
-      p: 3,
-      display: "flex",
-      flexDirection: "column",
-      children: [
-        /* @__PURE__ */ jsx(VStack, { align: "stretch", spacing: 1, children: entries.filter((e) => e.visible !== false).map((entry) => /* @__PURE__ */ jsx(
-          Link$1,
-          {
-            href: entry.path,
-            "data-current": entry.id === currentApp,
-            px: 3,
-            py: 2,
-            borderRadius: "md",
-            fontWeight: entry.id === currentApp ? "bold" : "normal",
-            bg: entry.id === currentApp ? "brand.50" : "transparent",
-            _hover: { bg: "gray.100" },
-            children: /* @__PURE__ */ jsx(Text, { children: entry.label })
-          },
-          entry.id
-        )) }),
-        /* @__PURE__ */ jsx(Box, { flex: "1" }),
-        footerSlot && /* @__PURE__ */ jsx(Box, { pt: 3, children: footerSlot })
-      ]
-    }
-  );
-}
-function Footer({ buildInfo }) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      as: "footer",
-      px: 4,
-      py: 2,
-      borderTop: "1px solid",
-      borderColor: "gray.200",
-      fontSize: "xs",
-      color: "gray.500",
-      children: /* @__PURE__ */ jsxs(Text, { children: [
-        "politogy ",
-        buildInfo ? `\xB7 ${buildInfo}` : ""
-      ] })
-    }
-  );
-}
-function AppLayout({
-  children,
-  buildInfo,
-  headerExtrasSlot,
-  modalsSlot,
-  notificationsSlot,
-  sidebarFooterSlot,
-  overlaySlot
-}) {
-  const currentApp = useCurrentApp();
-  const entries = useAppRegistry();
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", minH: "100vh", children: [
-    /* @__PURE__ */ jsx(Header, { extrasSlot: headerExtrasSlot }),
-    /* @__PURE__ */ jsxs(Flex, { flex: "1", minH: 0, children: [
-      /* @__PURE__ */ jsx(Sidebar, { entries, currentApp, footerSlot: sidebarFooterSlot }),
-      /* @__PURE__ */ jsxs(Box, { as: "main", flex: "1", overflow: "auto", position: "relative", children: [
-        children,
-        notificationsSlot
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Footer, { buildInfo }),
-    modalsSlot,
-    overlaySlot
-  ] });
-}
 function ShellChrome({
   children,
   organization,
   linkedAccounts,
   support,
   devNotesMenu,
-  myProfileHref
+  myProfileHref,
+  mode,
+  navItems,
+  navigationPreference,
+  role,
+  footer,
+  brandLogoSrc,
+  headerIconsSlot,
+  organizationSettingsHref,
+  showContinueOnboarding,
+  onContinueOnboarding,
+  pageTitle,
+  breadcrumbs,
+  headerActions
 }) {
   const chrome = useMemo(
     () => ({
       devNotesMenu: devNotesMenu ?? null,
-      myProfileHref: myProfileHref ?? "/my-profile"
+      myProfileHref: myProfileHref ?? "/my-profile",
+      brandLogoSrc,
+      headerIconsSlot,
+      organizationSettingsHref,
+      showContinueOnboarding,
+      onContinueOnboarding,
+      pageTitle,
+      breadcrumbs,
+      headerActions
     }),
-    [devNotesMenu, myProfileHref]
+    [
+      devNotesMenu,
+      myProfileHref,
+      brandLogoSrc,
+      headerIconsSlot,
+      organizationSettingsHref,
+      showContinueOnboarding,
+      onContinueOnboarding,
+      pageTitle,
+      breadcrumbs,
+      headerActions
+    ]
+  );
+  const navItemsValue = useMemo(
+    () => navItems ? { items: navItems } : null,
+    [navItems]
   );
-  return /* @__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 }) }) }) });
+  return /* @__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(ShellModeContext.Provider, { value: mode ?? null, children: /* @__PURE__ */ jsx(ShellNavItemsContext.Provider, { value: navItemsValue, children: /* @__PURE__ */ jsx(ShellNavigationPreferenceContext.Provider, { value: navigationPreference ?? null, children: /* @__PURE__ */ jsx(ShellRoleContext.Provider, { value: role ?? null, children: /* @__PURE__ */ jsx(ShellFooterContext.Provider, { value: footer ?? null, children: /* @__PURE__ */ jsx(ShellChromeContext.Provider, { value: chrome, children }) }) }) }) }) }) }) }) });
 }
 
 // src/sw/registerShellPrecache.ts
@@ -1824,6 +2970,6 @@ function buildSpeculationRules(currentApp, registry) {
   return JSON.stringify(payload);
 }
 
-export { AppLayout, BreadcrumbBar, Card, Footer, GlobalUiIdProvider, Header, HeaderTabBar, OrgSelector, PageContainer, PageHeader, ShellChrome, ShellChromeContext, ShellLinkedAccountsContext, ShellOrgContext, ShellProvider, ShellSupportProviderContext, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellLinkedAccounts, useShellOrganization, useShellSupport };
+export { AppLayout, BrandIcon, BrandLogo, BreadcrumbBar, Card, CommitCopyButton, Footer, GlobalUiIdProvider, Header, HeaderTabBar, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, ShellChrome, ShellChromeContext, ShellFooterContext, ShellLinkedAccountsContext, ShellModeContext, ShellNavItemsContext, ShellNavigationPreferenceContext, ShellOrgContext, ShellProvider, ShellRoleContext, ShellSupportProviderContext, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map