@the-portland-company/shell 0.2.1 → 0.3.0

package/dist/index.cjs

@@ -5,6 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx2 = require('clsx');
 var reactRouterDom = require('react-router-dom');
 var react$1 = require('react');
+var fi = require('react-icons/fi');
+var react$2 = require('@emotion/react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1124,6 +1126,11 @@ var ShellMetaContext = react$1.createContext(null);
 var ShellOrgContext = react$1.createContext(null);
 var ShellLinkedAccountsContext = react$1.createContext(null);
 var ShellSupportProviderContext = react$1.createContext(null);
+var ShellModeContext = react$1.createContext(null);
+var ShellNavItemsContext = react$1.createContext(null);
+var ShellNavigationPreferenceContext = react$1.createContext(null);
+var ShellRoleContext = react$1.createContext(null);
+var ShellFooterContext = react$1.createContext(null);
 var ShellChromeContext = react$1.createContext(null);
 function toShellUser(session) {
   if (!session?.user) return null;
@@ -1192,7 +1199,7 @@ function ShellProvider({
     }),
     [devNotesMenu, myProfileHref]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ShellAuthContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(ShellMetaContext.Provider, { value: meta, children: /* @__PURE__ */ jsxRuntime.jsx(ShellOrgContext.Provider, { value: organization ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellLinkedAccountsContext.Provider, { value: linkedAccounts ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellSupportProviderContext.Provider, { value: support ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { theme: politogyTheme, children }) }) }) }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ShellAuthContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(ShellMetaContext.Provider, { value: meta, children: /* @__PURE__ */ jsxRuntime.jsx(ShellOrgContext.Provider, { value: organization ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellLinkedAccountsContext.Provider, { value: linkedAccounts ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellSupportProviderContext.Provider, { value: support ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellModeContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellNavItemsContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellNavigationPreferenceContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellRoleContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellFooterContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { theme: politogyTheme, children }) }) }) }) }) }) }) }) }) }) }) });
 }
 function useShellAuth() {
   const ctx = react$1.useContext(ShellAuthContext);
@@ -1231,6 +1238,614 @@ function useShellChrome() {
   }
   return ctx;
 }
+function useShellMode() {
+  return react$1.useContext(ShellModeContext);
+}
+function useShellNavItems() {
+  return react$1.useContext(ShellNavItemsContext);
+}
+function useShellNavigationPreference() {
+  return react$1.useContext(ShellNavigationPreferenceContext);
+}
+function useShellRole() {
+  return react$1.useContext(ShellRoleContext);
+}
+function useShellFooter() {
+  return react$1.useContext(ShellFooterContext);
+}
+function BrandLogo({ src, alt = "Brand", className, style }) {
+  if (!src) return null;
+  return /* @__PURE__ */ jsxRuntime.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 = reactRouterDom.useNavigate();
+  const menuListBg = react.useColorModeValue("white", "gray.900");
+  const menuListBorderColor = react.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__ */ jsxRuntime.jsx(react.Flex, { alignItems: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.MenuButton, { py: 2, transition: "all 0.3s", _focus: { boxShadow: "none" }, children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.Avatar,
+        {
+          size: "sm",
+          src: avatarUrl,
+          name: displayName,
+          bg: modeConfig?.primaryColor || "brand.500"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        react.VStack,
+        {
+          display: { base: "none", md: "flex" },
+          alignItems: "flex-start",
+          spacing: "1px",
+          ml: "2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { spacing: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", children: displayName }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", children: user.email })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Box, { display: { base: "none", md: "flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(fi.FiChevronDown, {}) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.MenuList, { bg: menuListBg, borderColor: menuListBorderColor, zIndex: 1500, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(fi.FiUser, {}), onClick: () => navigate(myProfileHref), children: "My Profile" }),
+      showContinueOnboarding && /* @__PURE__ */ jsxRuntime.jsx(
+        react.MenuItem,
+        {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(fi.FiRotateCcw, {}),
+          onClick: () => {
+            if (onContinueOnboarding) onContinueOnboarding();
+            else window.dispatchEvent(new CustomEvent("app:continue-onboarding"));
+          },
+          children: "Continue Onboarding"
+        }
+      ),
+      organizationSettingsHref && /* @__PURE__ */ jsxRuntime.jsx(
+        react.MenuItem,
+        {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(fi.FiBriefcase, {}),
+          onClick: () => navigate(organizationSettingsHref),
+          children: "Organization Settings"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", px: 3, py: 1, fontWeight: "semibold", children: "ROLES & ORGANIZATIONS" }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Box, { px: 3, py: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { align: "stretch", spacing: 1, children: [
+        currentOrg && currentOrg.role && /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Badge,
+            {
+              size: "sm",
+              colorScheme: currentOrg.role === "owner" ? "purple" : currentOrg.role === "admin" ? "blue" : "gray",
+              children: currentOrg.role.charAt(0).toUpperCase() + currentOrg.role.slice(1)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "xs", color: "gray.500", children: [
+            "in ",
+            currentOrg.name
+          ] })
+        ] }),
+        activeRoleConfig && !currentOrg?.role && /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { colorScheme: activeRoleConfig.color, size: "sm", children: activeRoleConfig.name })
+      ] }) }),
+      linked && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", px: 3, py: 1, fontWeight: "semibold", children: "ACCOUNTS" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { px: 3, py: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Avatar, { size: "xs", src: avatarUrl, name: displayName }),
+          /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { align: "start", spacing: 0, flex: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", fontWeight: "medium", color: "brand.600", children: displayName }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.400", children: "Active" })
+          ] })
+        ] }) }),
+        linkedAccounts.map((account) => /* @__PURE__ */ jsxRuntime.jsx(
+          react.MenuItem,
+          {
+            onClick: () => {
+              void linked.switchToAccount(account.id);
+            },
+            _hover: { bg: "gray.50" },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, flex: 1, justify: "space-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Avatar,
+                  {
+                    size: "xs",
+                    src: account.avatarUrl ?? void 0,
+                    name: account.displayName ?? account.email
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { align: "start", spacing: 0, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", fontWeight: "medium", noOfLines: 1, children: account.displayName ?? account.email.split("@")[0] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip, { label: account.email, placement: "top", hasArrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    react.Text,
+                    {
+                      fontSize: "xs",
+                      color: "gray.500",
+                      maxW: "120px",
+                      noOfLines: 1,
+                      textOverflow: "ellipsis",
+                      children: account.email
+                    }
+                  ) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.IconButton,
+                {
+                  as: "span",
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Remove account",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(fi.FiTrash2, {}),
+                  size: "xs",
+                  variant: "ghost",
+                  colorScheme: "red",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    linked.onRemoveAccount(account.id);
+                  }
+                }
+              )
+            ] })
+          },
+          account.id
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.MenuItem,
+          {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(fi.FiUserPlus, {}),
+            onClick: linked.onAddAccount,
+            color: "brand.500",
+            children: "Add Account"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(fi.FiLogOut, {}), onClick: () => void signOut(), children: "Sign out" })
+    ] }) })
+  ] }) });
+}
+function Header({ onOpen, id }) {
+  const {
+    pageTitle,
+    breadcrumbs,
+    headerActions,
+    headerIconsSlot,
+    brandLogoSrc,
+    devNotesMenu
+  } = useShellChrome();
+  const mobileNavBg = react.useColorModeValue("white", "gray.900");
+  const mobileNavBorderColor = react.useColorModeValue("gray.200", "gray.700");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.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__ */ jsxRuntime.jsxs(react.Flex, { w: "full", mx: "auto", align: "center", justify: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 4, minW: "0", children: [
+          onOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+            react.IconButton,
+            {
+              display: { base: "flex", md: "none" },
+              onClick: onOpen,
+              variant: "outline",
+              "aria-label": "open menu",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(fi.FiMenu, {})
+            }
+          ) : null,
+          brandLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx(react.Box, { display: { base: "flex", md: "none" }, h: "32px", children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo_default, { src: brandLogoSrc, className: "h-full w-auto object-contain" }) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            react.VStack,
+            {
+              align: "flex-start",
+              spacing: 0,
+              minW: "0",
+              display: { base: "none", md: "flex" },
+              children: [
+                pageTitle ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "lg", fontWeight: "bold", noOfLines: 1, children: pageTitle }) : null,
+                breadcrumbs && breadcrumbs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { spacing: 2, color: "gray.500", fontSize: "sm", mt: "1px", minW: "0", children: breadcrumbs.map((b, idx) => /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { display: "inline-flex", alignItems: "center", minW: "0", children: [
+                  idx > 0 ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { color: "gray.400", mr: 2, children: " > " }) : null,
+                  b.href ? /* @__PURE__ */ jsxRuntime.jsx(
+                    react.Link,
+                    {
+                      as: reactRouterDom.NavLink,
+                      to: b.href,
+                      _hover: { textDecoration: "underline" },
+                      noOfLines: 1,
+                      children: b.label
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(react.Text, { noOfLines: 1, children: b.label })
+                ] }, `${b.label}-${idx}`)) }) : null
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 0, align: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            react.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,
+                devNotesMenu
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = reactRouterDom.useLocation();
+  const navigate = reactRouterDom.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 = react$1.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__ */ jsxRuntime.jsxs(react.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { ...headerProps, ...rest, children: [
+        brandIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+          react.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__ */ jsxRuntime.jsx(BrandIcon_default, { name: brandIcon, size: 18 })
+          }
+        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            mr: "4",
+            fontSize: "16",
+            position: "relative",
+            zIndex: 1,
+            _groupHover: {
+              color: isDisabled ? disabledRowTextColor : "white"
+            },
+            as: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: "1", position: "relative", zIndex: 1, children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            as: fi.FiChevronDown,
+            position: "relative",
+            zIndex: 1,
+            transform: isSubMenuOpen ? "rotate(180deg)" : void 0,
+            transition: "transform 0.2s"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Collapse, { in: isSubMenuOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.Box, { as: "a", href: effectiveHref || "#", onClick: handleClick, style: { textDecoration: "none" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    react.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__ */ jsxRuntime.jsx(
+          react.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__ */ jsxRuntime.jsx(BrandIcon_default, { name: brandIcon, size: 18 })
+          }
+        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            mr: "4",
+            fontSize: "16",
+            position: "relative",
+            zIndex: 1,
+            _groupHover: {
+              color: isDisabled ? disabledRowTextColor : "white"
+            },
+            as: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { flex: "1", position: "relative", zIndex: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children }),
+          subLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+            react.Text,
+            {
+              mt: 0.5,
+              fontSize: "10px",
+              lineHeight: "1.3",
+              color: isDisabled ? "gray.400" : "gray.400",
+              children: subLabel
+            }
+          ) : null,
+          badge && /* @__PURE__ */ jsxRuntime.jsx(react.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();
@@ -1239,6 +1854,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);
@@ -1273,60 +1916,465 @@ function OrgBadge({ name, logoUrl, brandColor, size }) {
     }
   );
 }
-function OrgSelector() {
+function OrganizationIdCopy({ orgId }) {
+  const { hasCopied, onCopy } = react.useClipboard(orgId);
+  const copiedAnimation = react$2.keyframes`
+    0% { opacity: 0; transform: translateY(6px); }
+    20% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(-8px); }
+  `;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip, { label: orgId, placement: "top", hasArrow: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    react.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__ */ jsxRuntime.jsxs(react.Text, { fontSize: "xs", color: hasCopied ? "green.500" : "gray.600", fontWeight: "normal", children: [
+          "...",
+          orgId.slice(-8)
+        ] }),
+        hasCopied && /* @__PURE__ */ jsxRuntime.jsx(
+          react.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 = react$1.useMemo(
+    () => organizations.filter((o) => o.id !== currentOrg?.id),
+    [organizations, currentOrg?.id]
+  );
+  const selectedOrgBrandColor = react$1.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__ */ jsxRuntime.jsxs(react.Menu, { placement: "bottom-start", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      react.MenuButton,
-      {
-        as: react.Box,
-        cursor: "pointer",
-        px: 2,
-        py: 1,
-        borderRadius: "md",
-        _hover: { bg: "gray.100" },
-        _active: { bg: "gray.200" },
-        "aria-label": "Switch organization",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, align: "center", children: [
-          currentOrg ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { mx: "4", mb: "3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", align: "center", mb: "2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", fontWeight: "semibold", children: "ORGANIZATION" }),
+      currentOrg?.id && currentOrg.id !== user?.id && /* @__PURE__ */ jsxRuntime.jsx(OrganizationIdCopy, { orgId: currentOrg.id })
+    ] }),
+    loadingOrgs && !currentOrg ? /* @__PURE__ */ jsxRuntime.jsx(react.Skeleton, { height: "32px", width: "full", borderRadius: "md" }) : /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { gutter: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.MenuButton,
+        {
+          as: react.Button,
+          rightIcon: /* @__PURE__ */ jsxRuntime.jsx(fi.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__ */ jsxRuntime.jsxs(react.HStack, { spacing: "2.5", minW: 0, align: "center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               OrgBadge,
               {
-                name: currentOrg.name,
-                logoUrl: currentOrg.logoUrl,
-                brandColor: currentOrg.brandColor,
-                size: "24px"
+                name: currentOrg?.name,
+                logoUrl: currentOrg?.logoUrl,
+                brandColor: selectedOrgBrandColor,
+                size: "28px"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "600", color: "gray.800", noOfLines: 1, children: currentOrg.name })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "gray.500", children: "Select organization" }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", fontSize: "xs", color: "gray.500", "aria-hidden": "true", children: "\u25BE" })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.MenuList, { zIndex: 1500, children: [
-      others.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { isDisabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "gray.500", children: "No other organizations" }) }),
-      others.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
-        react.MenuItem,
-        {
-          onClick: () => {
-            void switchOrganization(o.id);
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, align: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(OrgBadge, { name: o.name, logoUrl: o.logoUrl, brandColor: o.brandColor, size: "20px" }),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { direction: "column", children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "600", children: o.name }) })
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: currentOrg?.name || "No organizations" })
           ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        react.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__ */ jsxRuntime.jsx(
+                react.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__ */ jsxRuntime.jsxs(react.Flex, { justify: "space-between", align: "center", width: "100%", overflow: "hidden", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { minW: 0, flex: "1", spacing: "2.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        OrgBadge,
+                        {
+                          name: o.name,
+                          logoUrl: o.logoUrl,
+                          brandColor: orgBrandColor,
+                          size: "24px"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        react.Text,
+                        {
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          flex: "1",
+                          children: o.name
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      react.Text,
+                      {
+                        fontSize: "xs",
+                        color: currentOrg?.id ? "whiteAlpha.700" : "gray.500",
+                        ml: 2,
+                        flexShrink: 0,
+                        children: o.id.slice(-8)
+                      }
+                    )
+                  ] })
+                },
+                o.id
+              );
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, { my: 0, borderColor: currentOrg?.id ? "whiteAlpha.300" : void 0 }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.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__ */ jsxRuntime.jsx(react.Box, { mx: "4", mb: "4", children: /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { gutter: 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.MenuButton,
+      {
+        as: react.Button,
+        leftIcon: modeConfig.icon,
+        rightIcon: /* @__PURE__ */ jsxRuntime.jsx(fi.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { as: "a", href: createOrgHref, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "brand.500", fontWeight: "600", children: "Create organization" }) })
+        isDisabled,
+        _hover: {
+          bg: modeConfig.primaryColor,
+          color: modeConfig.white
+        },
+        _active: {
+          bg: modeConfig.primaryColor,
+          color: modeConfig.white
+        },
+        children: modeConfig.name
+      }
+    ),
+    hasMultipleModes && /* @__PURE__ */ jsxRuntime.jsx(react.MenuList, { children: modes.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+      react.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 Sidebar({ onClose, id }) {
+  const { brandLogoSrc } = useShellChrome();
+  const navItems = useShellNavItems()?.items ?? [];
+  const footer = useShellFooter();
+  const org = useShellOrganization();
+  const currentOrg = org?.currentOrg ?? null;
+  const location = reactRouterDom.useLocation();
+  const sidebarBg = react.useColorModeValue("white", "gray.900");
+  const sidebarBorderColor = react.useColorModeValue("gray.200", "gray.700");
+  const [expandedMenu, setExpandedMenu] = react$1.useState(null);
+  react$1.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__ */ jsxRuntime.jsxs(
+    react.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__ */ jsxRuntime.jsxs(react.Flex, { alignItems: "center", mx: "8", mt: "3", mb: "2", justifyContent: "space-between", flexShrink: 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Box, { h: "40px", children: brandLogoSrc ? /* @__PURE__ */ jsxRuntime.jsx(BrandLogo_default, { src: brandLogoSrc, className: "h-full w-auto object-contain" }) : null }),
+          onClose ? /* @__PURE__ */ jsxRuntime.jsx(
+            react.IconButton,
+            {
+              display: { base: "flex", md: "none" },
+              onClick: onClose,
+              variant: "outline",
+              "aria-label": "close menu",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(fi.FiX, {})
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          react.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__ */ jsxRuntime.jsx(react.Box, { mx: "4", mb: "3", children: /* @__PURE__ */ jsxRuntime.jsx(
+                react.Image,
+                {
+                  src: currentOrg.logoUrl,
+                  alt: `${currentOrg.name} logo`,
+                  maxH: "70px",
+                  w: "full",
+                  objectFit: "contain",
+                  borderRadius: "md"
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(OrgPill_default, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(ModePill_default, {}),
+              navItems.map((link) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            px: "1",
+            py: "1",
+            borderTop: "1px",
+            borderColor: "gray.200",
+            flexShrink: 0,
+            bg: sidebarBg,
+            zIndex: 1,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { align: "stretch", spacing: 2, px: "3", py: "2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { spacing: 1, fontSize: "xs", color: "gray.600", wrap: "wrap", children: footer.links.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { display: "inline-flex", alignItems: "center", children: [
+                idx > 0 ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { color: "gray.400", mx: 1, children: "|" }) : null,
+                l.external ? /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Link,
+                  {
+                    href: l.href,
+                    isExternal: true,
+                    _hover: { textDecoration: "underline", opacity: 1 },
+                    children: l.label
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Link,
+                  {
+                    as: reactRouterDom.NavLink,
+                    to: l.href,
+                    _hover: { textDecoration: "underline", opacity: 1 },
+                    children: l.label
+                  }
+                )
+              ] }, `${l.label}-${idx}`)) }),
+              (footer.version || footer.commit || footer.environmentLabel) && /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, fontSize: "xs", color: "gray.500", wrap: "wrap", children: [
+                footer.environmentLabel ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontWeight: "semibold", children: footer.environmentLabel }) : null,
+                footer.version ? /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { children: [
+                  "v",
+                  footer.version
+                ] }) : null,
+                footer.commit ? /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontFamily: "mono", children: [
+                  "#",
+                  footer.commit.slice(-7)
+                ] }) : null
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function Footer({ buildInfo }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Box,
+    {
+      as: "footer",
+      px: 4,
+      py: 2,
+      borderTop: "1px solid",
+      borderColor: "gray.200",
+      fontSize: "xs",
+      color: "gray.500",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { children: [
+        "politogy ",
+        buildInfo ? `\xB7 ${buildInfo}` : ""
       ] })
-    ] }) })
+    }
+  );
+}
+function AppLayout({
+  children,
+  buildInfo,
+  modalsSlot,
+  notificationsSlot,
+  overlaySlot
+}) {
+  const [mobileOpen, setMobileOpen] = react$1.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { direction: "column", minH: "100vh", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Sidebar,
+      {
+        onClose: mobileOpen ? () => setMobileOpen(false) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Header, { onOpen: () => setMobileOpen(true) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { as: "main", flex: "1", ml: { base: 0, md: 60 }, position: "relative", overflow: "auto", children: [
+      children,
+      notificationsSlot
+    ] }),
+    buildInfo ? /* @__PURE__ */ jsxRuntime.jsx(Footer, { buildInfo }) : null,
+    modalsSlot,
+    overlaySlot
   ] });
 }
 var SUPPORT_REQUEST_SUCCESS_MESSAGE = "Your support request was sent to Politogy leadership.";
@@ -1613,191 +2661,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 } = react.useColorMode();
-  if (status !== "authenticated" || !user) return null;
-  const displayName = user.displayName ?? user.email ?? "User";
-  const avatarUrl = avatarUrlFromUser(user);
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { placement: "bottom-end", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      react.MenuButton,
-      {
-        "aria-label": "Open account menu",
-        as: react.Box,
-        cursor: "pointer",
-        borderRadius: "full",
-        _hover: { opacity: 0.85 },
-        children: /* @__PURE__ */ jsxRuntime.jsx(react.Avatar, { size: "sm", name: displayName, src: avatarUrl })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.MenuList, { zIndex: 1500, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { px: 3, py: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "600", noOfLines: 1, children: displayName }),
-        user.email && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", noOfLines: 1, children: user.email })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { as: "a", href: myProfileHref, children: "My Profile" }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { onClick: toggleColorMode, children: colorMode === "light" ? "Switch to dark mode" : "Switch to light mode" }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { onClick: () => void signOut(), children: "Sign out" }),
-      linked && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.MenuDivider, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { px: 3, pt: 1, pb: 1, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", textTransform: "uppercase", letterSpacing: "0.08em", color: "gray.500", children: "Switch account" }) }),
-        linked.linkedAccounts.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { isDisabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", color: "gray.500", children: "No linked accounts" }) }),
-        linked.linkedAccounts.map((acct) => /* @__PURE__ */ jsxRuntime.jsx(
-          react.MenuItem,
-          {
-            onClick: () => {
-              void linked.switchToAccount(acct.id);
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, align: "center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                react.Avatar,
-                {
-                  size: "xs",
-                  name: acct.displayName ?? acct.email,
-                  src: acct.avatarUrl ?? void 0
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { direction: "column", minW: 0, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "600", noOfLines: 1, children: acct.displayName ?? acct.email }),
-                acct.displayName && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", noOfLines: 1, children: acct.email })
-              ] })
-            ] })
-          },
-          acct.id
-        )),
-        /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { onClick: linked.onAddAccount, children: "Add account" })
-      ] })
-    ] }) })
-  ] });
-}
-function Header({ extrasSlot }) {
-  const { devNotesMenu } = useShellChrome();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react.Flex,
-    {
-      as: "header",
-      align: "center",
-      px: 4,
-      h: "56px",
-      bg: "white",
-      borderBottom: "1px solid",
-      borderColor: "gray.200",
-      gap: 3,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Heading, { size: "md", color: "brand.500", children: "politogy" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(OrgSelector, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Spacer, {}),
-        extrasSlot && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: extrasSlot }),
-        /* @__PURE__ */ jsxRuntime.jsx(SupportRequestButton, {}),
-        devNotesMenu,
-        /* @__PURE__ */ jsxRuntime.jsx(UserMenu, {})
-      ]
-    }
-  );
-}
-function Sidebar({ entries, currentApp, footerSlot }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react.Box,
-    {
-      as: "nav",
-      w: "200px",
-      minH: "100%",
-      bg: "gray.50",
-      borderRight: "1px solid",
-      borderColor: "gray.200",
-      p: 3,
-      display: "flex",
-      flexDirection: "column",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { align: "stretch", spacing: 1, children: entries.filter((e) => e.visible !== false).map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
-          react.Link,
-          {
-            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__ */ jsxRuntime.jsx(react.Text, { children: entry.label })
-          },
-          entry.id
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: "1" }),
-        footerSlot && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pt: 3, children: footerSlot })
-      ]
-    }
-  );
-}
-function Footer({ buildInfo }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.Box,
-    {
-      as: "footer",
-      px: 4,
-      py: 2,
-      borderTop: "1px solid",
-      borderColor: "gray.200",
-      fontSize: "xs",
-      color: "gray.500",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { children: [
-        "politogy ",
-        buildInfo ? `\xB7 ${buildInfo}` : ""
-      ] })
-    }
-  );
-}
-function AppLayout({
-  children,
-  buildInfo,
-  headerExtrasSlot,
-  modalsSlot,
-  notificationsSlot,
-  sidebarFooterSlot,
-  overlaySlot
-}) {
-  const currentApp = useCurrentApp();
-  const entries = useAppRegistry();
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { direction: "column", minH: "100vh", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Header, { extrasSlot: headerExtrasSlot }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { flex: "1", minH: 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { entries, currentApp, footerSlot: sidebarFooterSlot }),
-      /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { as: "main", flex: "1", overflow: "auto", position: "relative", children: [
-        children,
-        notificationsSlot
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.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 = react$1.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 = react$1.useMemo(
+    () => navItems ? { items: navItems } : null,
+    [navItems]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ShellOrgContext.Provider, { value: organization ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellLinkedAccountsContext.Provider, { value: linkedAccounts ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellSupportProviderContext.Provider, { value: support ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellChromeContext.Provider, { value: chrome, children }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ShellOrgContext.Provider, { value: organization ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellLinkedAccountsContext.Provider, { value: linkedAccounts ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellSupportProviderContext.Provider, { value: support ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellModeContext.Provider, { value: mode ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellNavItemsContext.Provider, { value: navItemsValue, children: /* @__PURE__ */ jsxRuntime.jsx(ShellNavigationPreferenceContext.Provider, { value: navigationPreference ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellRoleContext.Provider, { value: role ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellFooterContext.Provider, { value: footer ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellChromeContext.Provider, { value: chrome, children }) }) }) }) }) }) }) }) });
 }
 
 // src/sw/registerShellPrecache.ts
@@ -1831,33 +2746,54 @@ function buildSpeculationRules(currentApp, registry) {
 }
 
 exports.AppLayout = AppLayout;
+exports.BrandIcon = BrandIcon;
+exports.BrandLogo = BrandLogo;
 exports.BreadcrumbBar = BreadcrumbBar;
 exports.Card = Card;
 exports.Footer = Footer;
 exports.GlobalUiIdProvider = GlobalUiIdProvider;
 exports.Header = Header;
 exports.HeaderTabBar = HeaderTabBar;
-exports.OrgSelector = OrgSelector;
+exports.ModePill = ModePill;
+exports.NavItem = NavItem;
+exports.OrgPill = OrgPill;
+exports.OrgSelector = OrgPill;
 exports.PageContainer = PageContainer;
 exports.PageHeader = PageHeader;
 exports.ShellChrome = ShellChrome;
 exports.ShellChromeContext = ShellChromeContext;
+exports.ShellFooterContext = ShellFooterContext;
 exports.ShellLinkedAccountsContext = ShellLinkedAccountsContext;
+exports.ShellModeContext = ShellModeContext;
+exports.ShellNavItemsContext = ShellNavItemsContext;
+exports.ShellNavigationPreferenceContext = ShellNavigationPreferenceContext;
 exports.ShellOrgContext = ShellOrgContext;
 exports.ShellProvider = ShellProvider;
+exports.ShellRoleContext = ShellRoleContext;
 exports.ShellSupportProviderContext = ShellSupportProviderContext;
 exports.Sidebar = Sidebar;
 exports.SupportRequestButton = SupportRequestButton;
 exports.UserMenu = UserMenu;
 exports.buildSpeculationRules = buildSpeculationRules;
+exports.getOrganizationBadgeLetters = getOrganizationBadgeLetters;
+exports.getOrganizationBrandColor = getOrganizationBrandColor;
+exports.getUserDisplayName = getUserDisplayName;
+exports.hexToRgba = hexToRgba;
+exports.lightenHexColor = lightenHexColor;
+exports.normalizeHexColor = normalizeHexColor;
 exports.politogyTheme = politogyTheme;
 exports.registerShellPrecache = registerShellPrecache;
 exports.useAppRegistry = useAppRegistry;
 exports.useCurrentApp = useCurrentApp;
 exports.useShellAuth = useShellAuth;
 exports.useShellChrome = useShellChrome;
+exports.useShellFooter = useShellFooter;
 exports.useShellLinkedAccounts = useShellLinkedAccounts;
+exports.useShellMode = useShellMode;
+exports.useShellNavItems = useShellNavItems;
+exports.useShellNavigationPreference = useShellNavigationPreference;
 exports.useShellOrganization = useShellOrganization;
+exports.useShellRole = useShellRole;
 exports.useShellSupport = useShellSupport;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map