@the-portland-company/shell 0.11.4 → 0.13.0

package/dist/{chunk-2GFWARYP.js → chunk-NV6WHTEZ.js}

@@ -1,8 +1,13 @@
-import { FiUser, FiSettings, FiMessageSquare, FiMail, FiInfo, FiSun, FiMoon, FiHelpCircle, FiLifeBuoy, FiAlertCircle, FiAlertTriangle, FiBell, FiGrid, FiZap } from 'react-icons/fi';
+import { FiUser, FiSettings, FiMessageSquare, FiMail, FiInfo, FiSun, FiMoon, FiHelpCircle, FiLifeBuoy, FiAlertCircle, FiAlertTriangle, FiBell, FiGrid, FiZap, FiBatteryCharging, FiBattery } from 'react-icons/fi';
 import { useState, useEffect } from 'react';
 
 // src/lib/brandGlyphs.tsx
 var GLYPHS = {
+  // Communications Fuel reads as a LEVEL, so its glyph is a battery. `bolt`/
+  // `zap` stay mapped for older Brand values.
+  "battery-charging": FiBatteryCharging,
+  battery: FiBattery,
+  fuel: FiBatteryCharging,
   bolt: FiZap,
   zap: FiZap,
   grid: FiGrid,
@@ -45,5 +50,5 @@ function useTopBarIconSlotGlyph(slot) {
 }
 
 export { resolveBrandGlyph, useTopBarIconSlotGlyph };
-//# sourceMappingURL=chunk-2GFWARYP.js.map
-//# sourceMappingURL=chunk-2GFWARYP.js.map
+//# sourceMappingURL=chunk-NV6WHTEZ.js.map
+//# sourceMappingURL=chunk-NV6WHTEZ.js.map

package/dist/chunk-NV6WHTEZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/brandGlyphs.tsx","../src/lib/topbarIconSlot.ts"],"names":[],"mappings":";;;;AAkCA,IAAM,MAAA,GAAyC;AAAA;AAAA;AAAA,EAG7C,kBAAA,EAAoB,iBAAA;AAAA,EACpB,OAAA,EAAS,SAAA;AAAA,EACT,IAAA,EAAM,iBAAA;AAAA,EACN,IAAA,EAAM,KAAA;AAAA,EACN,GAAA,EAAK,KAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,YAAA,EAAc,MAAA;AAAA,EACd,gBAAA,EAAkB,eAAA;AAAA,EAClB,KAAA,EAAO,eAAA;AAAA,EACP,cAAA,EAAgB,aAAA;AAAA,EAChB,WAAA,EAAa,UAAA;AAAA,EACb,WAAA,EAAa,UAAA;AAAA,EACb,OAAA,EAAS,UAAA;AAAA,EACT,aAAA,EAAe,YAAA;AAAA,EACf,IAAA,EAAM,MAAA;AAAA,EACN,GAAA,EAAK,KAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,gBAAA,EAAkB,eAAA;AAAA,EAClB,QAAA,EAAU,UAAA;AAAA,EACV,IAAA,EAAM;AACR,CAAA;AAOO,SAAS,kBAAkB,IAAA,EAAwD;AACxF,EAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAClB,EAAA,OAAO,OAAO,IAAA,CAAK,IAAA,EAAK,CAAE,WAAA,EAAa,CAAA,IAAK,IAAA;AAC9C;ACzCO,SAAS,uBAAuB,IAAA,EAAqC;AAC1E,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAwB,IAAI,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AAEnC,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,MAAM,GAAA,GAAM,MAAA,CACT,gBAAA,CAAiB,QAAA,CAAS,eAAe,CAAA,CACzC,gBAAA,CAAiB,CAAA,cAAA,EAAiB,IAAI,EAAE,CAAA,CACxC,IAAA,EAAK,CAEL,OAAA,CAAQ,gBAAgB,EAAE,CAAA;AAC7B,MAAA,OAAA,CAAQ,GAAA,CAAI,MAAA,GAAS,CAAA,GAAI,GAAA,GAAM,IAAI,CAAA;AAAA,IACrC,CAAA;AAEA,IAAA,IAAA,EAAK;AAEL,IAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,IAAI,CAAA;AAC1C,IAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,IAAA,EAAM,EAAE,WAAW,IAAA,EAAM,OAAA,EAAS,MAAM,CAAA;AAClE,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,OAAO,IAAA;AACT","file":"chunk-NV6WHTEZ.js","sourcesContent":["import type { ComponentType } from 'react'\nimport {\n  FiAlertCircle,\n  FiBattery,\n  FiBatteryCharging,\n  FiAlertTriangle,\n  FiBell,\n  FiGrid,\n  FiHelpCircle,\n  FiInfo,\n  FiLifeBuoy,\n  FiMail,\n  FiMessageSquare,\n  FiMoon,\n  FiSettings,\n  FiSun,\n  FiUser,\n  FiZap,\n} from 'react-icons/fi'\n\nexport type GlyphComponent = ComponentType<{ size?: number | string; className?: string }>\n\n/**\n * Brand-glyph registry: maps the icon NAME the Brand API emits (e.g.\n * `--topbar-icon-comms-fuel: bolt`) to a component.\n *\n * These names are Feather/Lucide icon names, NOT asset filenames — there is no\n * `/brand/icons/<name>.svg` for them in any app, and treating them as URLs\n * renders a broken image. Resolving them against the icon library the shell\n * already depends on keeps every app consistent with zero vendored assets.\n *\n * Aliases are included where Brand and Feather disagree on a name (`bolt` vs\n * `zap`, `life-buoy` vs `life-ring`).\n */\nconst GLYPHS: Record<string, GlyphComponent> = {\n  // Communications Fuel reads as a LEVEL, so its glyph is a battery. `bolt`/\n  // `zap` stay mapped for older Brand values.\n  'battery-charging': FiBatteryCharging,\n  battery: FiBattery,\n  fuel: FiBatteryCharging,\n  bolt: FiZap,\n  zap: FiZap,\n  grid: FiGrid,\n  apps: FiGrid,\n  bell: FiBell,\n  notification: FiBell,\n  'alert-triangle': FiAlertTriangle,\n  alert: FiAlertTriangle,\n  'alert-circle': FiAlertCircle,\n  'life-buoy': FiLifeBuoy,\n  'life-ring': FiLifeBuoy,\n  support: FiLifeBuoy,\n  'help-circle': FiHelpCircle,\n  moon: FiMoon,\n  sun: FiSun,\n  info: FiInfo,\n  mail: FiMail,\n  'message-square': FiMessageSquare,\n  settings: FiSettings,\n  user: FiUser,\n}\n\n/**\n * Resolve a Brand glyph name to a component. Returns null for an unknown name\n * so the caller renders its own fallback — an unrecognized token must never\n * produce a broken or empty icon.\n */\nexport function resolveBrandGlyph(name: string | null | undefined): GlyphComponent | null {\n  if (!name) return null\n  return GLYPHS[name.trim().toLowerCase()] ?? null\n}\n\n/** Names the registry knows — exported for tests and tooling. */\nexport const KNOWN_BRAND_GLYPHS = Object.keys(GLYPHS)\n","import { useEffect, useState } from 'react'\n\n/**\n * The six canonical top-bar action slots (Reference/Global-Rules v9 → top-bar\n * icons). Each slot's GLYPH is unique and comes from the Brand API\n * `topbarIcons.items.*` tokens, exposed as `--topbar-icon-<slot>` CSS vars\n * whose value is the brand-icon NAME. Every OTHER property — size, gap, color,\n * hover, selected — is universal across all six slots.\n */\nexport type TopBarIconSlot =\n  | 'comms-fuel'\n  | 'apps'\n  | 'notifications'\n  | 'alerts'\n  | 'support'\n  | 'dark-mode'\n\n/**\n * Reads the glyph NAME for a slot from its `--topbar-icon-<slot>` CSS var.\n *\n * Runs in an effect because the Brand stylesheet is appended to <head> at\n * runtime (Global Rules forbids baking it into the build), so the var is not\n * resolvable during SSR or the first synchronous render. The MutationObserver\n * re-reads once the stylesheet lands so the glyph upgrades from the caller's\n * fallback without a reload.\n *\n * Returns null when the slot has no Brand glyph — callers render their own\n * fallback icon in that case.\n */\nexport function useTopBarIconSlotGlyph(slot: TopBarIconSlot): string | null {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n\n    const read = () => {\n      const raw = window\n        .getComputedStyle(document.documentElement)\n        .getPropertyValue(`--topbar-icon-${slot}`)\n        .trim()\n        // Brand may emit the name quoted (e.g. \"bell\"); strip the quotes.\n        .replace(/^['\"]|['\"]$/g, '')\n      setName(raw.length > 0 ? raw : null)\n    }\n\n    read()\n\n    const observer = new MutationObserver(read)\n    observer.observe(document.head, { childList: true, subtree: true })\n    return () => observer.disconnect()\n  }, [slot])\n\n  return name\n}\n\n/** Path to a brand-icon SVG in the consuming app's public dir. */\nexport function brandIconSrc(name: string, basePath = '/brand/icons/') {\n  return `${basePath}${name}.svg`\n}\n"]}

package/dist/index.cjs

@@ -1303,7 +1303,7 @@ function UserMenu() {
   const org = useShellOrganization();
   const role = useShellRole();
   const navigate = reactRouterDom.useNavigate();
-  const menuListBg = react.useColorModeValue("white", "gray.900");
+  const menuListBg = "var(--topbar-bg, #FFFFFF)";
   const menuListBorderColor = react.useColorModeValue("gray.200", "gray.700");
   if (status !== "authenticated" || !user) return null;
   const displayName = getUserDisplayName(user.raw);
@@ -1464,8 +1464,8 @@ function Header({ onOpen, id }) {
     headerIconsSlot,
     brandLogoSrc
   } = useShellChrome();
-  const mobileNavBg = react.useColorModeValue("white", "gray.900");
-  const mobileNavBorderColor = react.useColorModeValue("gray.200", "gray.700");
+  const mobileNavBg = "var(--sidebar-bg, #FFFFFF)";
+  const mobileNavBorderColor = "var(--sidebar-border, #E2E8F0)";
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Flex,
     {
@@ -1533,7 +1533,8 @@ function Header({ onOpen, id }) {
                 },
                 '& button:not([role="menuitem"]):not([data-menu-item]) svg, & button:not([role="menuitem"]):not([data-menu-item]) img': {
                   width: "var(--topbar-icon-size, 20px)",
-                  height: "var(--topbar-icon-size, 20px)"
+                  height: "var(--topbar-icon-size, 20px)",
+                  strokeWidth: "var(--topbar-icon-stroke-width, 2)"
                 }
               },
               children: [
@@ -1653,9 +1654,10 @@ function NavItem({
   const hasActiveChild = Array.isArray(subItems) && 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 submenuBg = "var(--sidebar-submenu-bg, #F1F5F9)";
+  const expandedRowBg = isParentActive ? modeConfig?.primaryColor || "brand.500" : isSubMenuOpen ? submenuBg : "transparent";
+  const expandedRowTextColor = isParentActive ? "white" : isSubMenuOpen ? "var(--sidebar-text, #1A202C)" : "var(--sidebar-text-muted, #4A5568)";
+  const disabledRowBg = isSubItem ? submenuBg : "transparent";
   const disabledRowTextColor = "gray.400";
   const renderIcon = (activeForHover) => {
     if (brandIcon) {
@@ -1708,8 +1710,8 @@ function NavItem({
           bg: isDisabled ? disabledRowBg : expandedRowBg,
           color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
           _hover: {
-            bg: isDisabled ? disabledRowBg : isParentActive ? modeConfig?.accentColor || "brand.600" : "gray.200",
-            color: isDisabled ? disabledRowTextColor : isParentActive ? "white" : "gray.900"
+            bg: isDisabled ? disabledRowBg : isParentActive ? modeConfig?.accentColor || "brand.600" : "var(--sidebar-hover-bg, #E2E8F0)",
+            color: isDisabled ? disabledRowTextColor : isParentActive ? "white" : "var(--sidebar-text, #1A202C)"
           },
           "aria-disabled": isDisabled ? "true" : "false",
           onClick: (e) => {
@@ -1750,8 +1752,8 @@ function NavItem({
           bg: isDisabled ? disabledRowBg : expandedRowBg,
           color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
           _hover: {
-            bg: isDisabled ? disabledRowBg : hasActiveChild ? modeConfig?.accentColor || "brand.600" : "gray.200",
-            color: isDisabled ? disabledRowTextColor : hasActiveChild ? "white" : "gray.900"
+            bg: isDisabled ? disabledRowBg : hasActiveChild ? modeConfig?.accentColor || "brand.600" : "var(--sidebar-hover-bg, #E2E8F0)",
+            color: isDisabled ? disabledRowTextColor : hasActiveChild ? "white" : "var(--sidebar-text, #1A202C)"
           },
           "aria-disabled": isDisabled ? "true" : "false",
           onClick: (e) => {
@@ -1784,7 +1786,7 @@ function NavItem({
           py: "1",
           borderTopRadius: 0,
           borderBottomRadius: "md",
-          bg: isDisabled ? "gray.100" : "gray.200",
+          bg: submenuBg,
           children: subItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
             NavItem,
             {
@@ -1839,10 +1841,10 @@ function NavItem({
           opacity: 1,
           pointerEvents: isDisabled ? "none" : "auto",
           "data-nav-item-active": String(rowActive),
-          bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "gray.100" : modeConfig?.primaryColor || "brand.500" : "transparent",
+          bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "var(--sidebar-hover-bg, #EDF2F7)" : modeConfig?.primaryColor || "brand.500" : "transparent",
           color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.600",
           _hover: {
-            bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "gray.200" : modeConfig?.accentColor || "brand.600" : "gray.100",
+            bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "var(--sidebar-hover-bg, #E2E8F0)" : modeConfig?.accentColor || "brand.600" : "var(--sidebar-hover-bg, #EDF2F7)",
             color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.900"
           },
           "aria-disabled": isDisabled ? "true" : "false",
@@ -2459,8 +2461,8 @@ function Sidebar({ onClose, id }) {
   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 sidebarBg = "var(--sidebar-bg, #FFFFFF)";
+  const sidebarBorderColor = "var(--sidebar-border, #E2E8F0)";
   const [expandedMenu, setExpandedMenu] = react$1.useState(null);
   react$1.useEffect(() => {
     const activeMenu = navItems.find(
@@ -2656,6 +2658,11 @@ function AppLayout({
   ] });
 }
 var GLYPHS = {
+  // Communications Fuel reads as a LEVEL, so its glyph is a battery. `bolt`/
+  // `zap` stay mapped for older Brand values.
+  "battery-charging": fi.FiBatteryCharging,
+  battery: fi.FiBattery,
+  fuel: fi.FiBatteryCharging,
   bolt: fi.FiZap,
   zap: fi.FiZap,
   grid: fi.FiGrid,
@@ -2696,28 +2703,72 @@ function useTopBarIconSlotGlyph(slot) {
   }, [slot]);
   return name;
 }
+function TopBarBadge({ count }) {
+  if (!count || count <= 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Badge,
+    {
+      position: "absolute",
+      top: "-2px",
+      right: "-2px",
+      bg: "var(--topbar-badge-bg, #E63946)",
+      color: "var(--topbar-badge-fg, #FFFFFF)",
+      rounded: "full",
+      fontSize: "0.625rem",
+      fontWeight: "bold",
+      lineHeight: "1",
+      minW: "1rem",
+      h: "1rem",
+      px: "1",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none",
+      "aria-hidden": true,
+      children: count > 9 ? "9+" : count
+    }
+  );
+}
 var TopBarIcon = react$1.forwardRef(
-  function TopBarIcon2({ slot, fallbackIcon, isSelected, ...rest }, ref) {
+  function TopBarIcon2({ slot, fallbackIcon, isSelected, badgeCount, children, ...rest }, ref) {
     const glyphName = useTopBarIconSlotGlyph(slot);
     const Glyph = resolveBrandGlyph(glyphName);
-    const icon = Glyph ? /* @__PURE__ */ jsxRuntime.jsx(Glyph, { size: "var(--topbar-icon-size, 20px)" }) : fallbackIcon;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const icon = Glyph ? /* @__PURE__ */ jsxRuntime.jsx(Glyph, {}) : fallbackIcon;
+    const button = /* @__PURE__ */ jsxRuntime.jsx(
       react.IconButton,
       {
         ref,
         icon,
         variant: "ghost",
         minW: "var(--topbar-icon-button-size, 32px)",
+        w: "var(--topbar-icon-button-size, 32px)",
         h: "var(--topbar-icon-button-size, 32px)",
+        p: "0",
         bg: isSelected ? "var(--topbar-icon-selected-bg, transparent)" : "transparent",
         color: isSelected ? "var(--topbar-icon-selected-color, var(--topbar-icon-color, #64748B))" : "var(--topbar-icon-color, #64748B)",
         _hover: {
           bg: "var(--topbar-icon-hover-bg, transparent)",
           color: "var(--topbar-icon-hover-color, var(--topbar-icon-color, #64748B))"
         },
+        sx: {
+          // Normalize the glyph itself, not just its box. Covers react-icons
+          // <svg> and brand <img> alike, and pins stroke weight so one glyph
+          // can't read heavier than its neighbours.
+          "& svg, & img": {
+            width: "var(--topbar-icon-size, 20px)",
+            height: "var(--topbar-icon-size, 20px)",
+            strokeWidth: "var(--topbar-icon-stroke-width, 2)"
+          }
+        },
         ...rest
       }
     );
+    if (!badgeCount && !children) return button;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { position: "relative", display: "inline-flex", children: [
+      button,
+      /* @__PURE__ */ jsxRuntime.jsx(TopBarBadge, { count: badgeCount ?? 0 }),
+      children
+    ] });
   }
 );
 var SUPPORT_REQUEST_SUCCESS_MESSAGE = "Your support request was sent to Politogy leadership.";
@@ -2872,12 +2923,11 @@ ${formatted}` : formatted,
   if (!support) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      react.IconButton,
+      TopBarIcon,
       {
+        slot: "support",
         "aria-label": "Request support",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(LifebuoyIcon, {}),
-        variant: "ghost",
-        size: "sm",
+        fallbackIcon: /* @__PURE__ */ jsxRuntime.jsx(LifebuoyIcon, {}),
         onClick: onOpen
       }
     ),
@@ -3120,6 +3170,7 @@ exports.ShellRoleContext = ShellRoleContext;
 exports.ShellSupportProviderContext = ShellSupportProviderContext;
 exports.Sidebar = Sidebar;
 exports.SupportRequestButton = SupportRequestButton;
+exports.TopBarBadge = TopBarBadge;
 exports.TopBarIcon = TopBarIcon;
 exports.UserMenu = UserMenu;
 exports.buildSpeculationRules = buildSpeculationRules;