@the-portland-company/shell 0.10.2 → 0.11.0

package/dist/index.d.cts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, CSSProperties } from 'react';
+import { ReactNode, CSSProperties, ReactElement } from 'react';
 import { User, Session, SupabaseClient } from '@supabase/supabase-js';
+import { IconButtonProps } from '@chakra-ui/react';
 
 declare const politogyTheme: Record<string, any>;
 
@@ -633,6 +634,33 @@ interface BrandIconProps {
  */
 declare function BrandIcon({ name, size, className, style, alt, basePath, }: BrandIconProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * The six canonical top-bar action slots (Reference/Global-Rules → Tabs & UI
+ * Styling). Each slot's GLYPH is unique and comes from the Brand API
+ * `topbarIcons.items.*` tokens, exposed as `--topbar-icon-<slot>` CSS vars
+ * whose value is the brand-icon NAME. Every OTHER property — size, gap, color,
+ * hover, selected — is universal across all six slots.
+ */
+type TopBarIconSlot = 'comms-fuel' | 'apps' | 'notifications' | 'alerts' | 'support' | 'dark-mode';
+interface TopBarIconProps extends Omit<IconButtonProps, 'icon' | 'aria-label'> {
+    slot: TopBarIconSlot;
+    'aria-label': string;
+    /**
+     * Rendered when the Brand API has no glyph name for this slot (token unset,
+     * stylesheet not yet loaded, or SSR). Keeps the top bar populated instead of
+     * flashing an empty button.
+     */
+    fallbackIcon: ReactElement;
+    /** Marks the slot active — resolves the universal selected-state tokens. */
+    isSelected?: boolean;
+}
+/**
+ * A single top-bar action icon. Use this for EVERY top-bar slot so the six
+ * icons share one universal treatment — never give one slot a bespoke size,
+ * spacing, hover, or selected style.
+ */
+declare const TopBarIcon: react.ForwardRefExoticComponent<TopBarIconProps & react.RefAttributes<HTMLButtonElement>>;
+
 /**
  * Support icon + modal rendered in the header. Reads auth, org, and support
  * handler from ShellProvider. Renders nothing when the host app didn't supply
@@ -818,4 +846,4 @@ declare function registerShellPrecache(opts?: RegisterShellPrecacheOptions): Pro
  */
 declare function buildSpeculationRules(currentApp: string, registry: AppRegistryEntry[]): string | null;
 
-export { AppLayout, type AppRegistryEntry, BrandIcon, BrandLogo, BreadcrumbBar, Card, CommitCopyButton, type CommitCopyButtonProps, Footer, GlobalUiIdProvider, Header, HeaderTabBar, type HeaderTabBarItem, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, type ShellActiveRoleConfig, type ShellAuthStatus, type ShellAuthValue, ShellChrome, ShellChromeContext, type ShellChromeProps, type ShellChromeValue, ShellFooterContext, type ShellFooterLink, type ShellFooterValue, type ShellInjectedAuth, type ShellLinkedAccount, ShellLinkedAccountsContext, type ShellLinkedAccountsValue, type ShellModeConfig, ShellModeContext, type ShellModeValue, type ShellNavItem, ShellNavItemsContext, type ShellNavItemsValue, ShellNavigationPreferenceContext, type ShellNavigationPreferenceValue, ShellOrgContext, type ShellOrganization, type ShellOrganizationValue, ShellProvider, type ShellProviderProps, ShellRoleContext, type ShellRoleValue, type ShellSlots, type ShellSupportContext, ShellSupportProviderContext, type ShellSupportValue, type ShellUser, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };
+export { AppLayout, type AppRegistryEntry, BrandIcon, BrandLogo, BreadcrumbBar, Card, CommitCopyButton, type CommitCopyButtonProps, Footer, GlobalUiIdProvider, Header, HeaderTabBar, type HeaderTabBarItem, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, type ShellActiveRoleConfig, type ShellAuthStatus, type ShellAuthValue, ShellChrome, ShellChromeContext, type ShellChromeProps, type ShellChromeValue, ShellFooterContext, type ShellFooterLink, type ShellFooterValue, type ShellInjectedAuth, type ShellLinkedAccount, ShellLinkedAccountsContext, type ShellLinkedAccountsValue, type ShellModeConfig, ShellModeContext, type ShellModeValue, type ShellNavItem, ShellNavItemsContext, type ShellNavItemsValue, ShellNavigationPreferenceContext, type ShellNavigationPreferenceValue, ShellOrgContext, type ShellOrganization, type ShellOrganizationValue, ShellProvider, type ShellProviderProps, ShellRoleContext, type ShellRoleValue, type ShellSlots, type ShellSupportContext, ShellSupportProviderContext, type ShellSupportValue, type ShellUser, Sidebar, SupportRequestButton, TopBarIcon, type TopBarIconProps, type TopBarIconSlot, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, CSSProperties } from 'react';
+import { ReactNode, CSSProperties, ReactElement } from 'react';
 import { User, Session, SupabaseClient } from '@supabase/supabase-js';
+import { IconButtonProps } from '@chakra-ui/react';
 
 declare const politogyTheme: Record<string, any>;
 
@@ -633,6 +634,33 @@ interface BrandIconProps {
  */
 declare function BrandIcon({ name, size, className, style, alt, basePath, }: BrandIconProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * The six canonical top-bar action slots (Reference/Global-Rules → Tabs & UI
+ * Styling). Each slot's GLYPH is unique and comes from the Brand API
+ * `topbarIcons.items.*` tokens, exposed as `--topbar-icon-<slot>` CSS vars
+ * whose value is the brand-icon NAME. Every OTHER property — size, gap, color,
+ * hover, selected — is universal across all six slots.
+ */
+type TopBarIconSlot = 'comms-fuel' | 'apps' | 'notifications' | 'alerts' | 'support' | 'dark-mode';
+interface TopBarIconProps extends Omit<IconButtonProps, 'icon' | 'aria-label'> {
+    slot: TopBarIconSlot;
+    'aria-label': string;
+    /**
+     * Rendered when the Brand API has no glyph name for this slot (token unset,
+     * stylesheet not yet loaded, or SSR). Keeps the top bar populated instead of
+     * flashing an empty button.
+     */
+    fallbackIcon: ReactElement;
+    /** Marks the slot active — resolves the universal selected-state tokens. */
+    isSelected?: boolean;
+}
+/**
+ * A single top-bar action icon. Use this for EVERY top-bar slot so the six
+ * icons share one universal treatment — never give one slot a bespoke size,
+ * spacing, hover, or selected style.
+ */
+declare const TopBarIcon: react.ForwardRefExoticComponent<TopBarIconProps & react.RefAttributes<HTMLButtonElement>>;
+
 /**
  * Support icon + modal rendered in the header. Reads auth, org, and support
  * handler from ShellProvider. Renders nothing when the host app didn't supply
@@ -818,4 +846,4 @@ declare function registerShellPrecache(opts?: RegisterShellPrecacheOptions): Pro
  */
 declare function buildSpeculationRules(currentApp: string, registry: AppRegistryEntry[]): string | null;
 
-export { AppLayout, type AppRegistryEntry, BrandIcon, BrandLogo, BreadcrumbBar, Card, CommitCopyButton, type CommitCopyButtonProps, Footer, GlobalUiIdProvider, Header, HeaderTabBar, type HeaderTabBarItem, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, type ShellActiveRoleConfig, type ShellAuthStatus, type ShellAuthValue, ShellChrome, ShellChromeContext, type ShellChromeProps, type ShellChromeValue, ShellFooterContext, type ShellFooterLink, type ShellFooterValue, type ShellInjectedAuth, type ShellLinkedAccount, ShellLinkedAccountsContext, type ShellLinkedAccountsValue, type ShellModeConfig, ShellModeContext, type ShellModeValue, type ShellNavItem, ShellNavItemsContext, type ShellNavItemsValue, ShellNavigationPreferenceContext, type ShellNavigationPreferenceValue, ShellOrgContext, type ShellOrganization, type ShellOrganizationValue, ShellProvider, type ShellProviderProps, ShellRoleContext, type ShellRoleValue, type ShellSlots, type ShellSupportContext, ShellSupportProviderContext, type ShellSupportValue, type ShellUser, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };
+export { AppLayout, type AppRegistryEntry, BrandIcon, BrandLogo, BreadcrumbBar, Card, CommitCopyButton, type CommitCopyButtonProps, Footer, GlobalUiIdProvider, Header, HeaderTabBar, type HeaderTabBarItem, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, type ShellActiveRoleConfig, type ShellAuthStatus, type ShellAuthValue, ShellChrome, ShellChromeContext, type ShellChromeProps, type ShellChromeValue, ShellFooterContext, type ShellFooterLink, type ShellFooterValue, type ShellInjectedAuth, type ShellLinkedAccount, ShellLinkedAccountsContext, type ShellLinkedAccountsValue, type ShellModeConfig, ShellModeContext, type ShellModeValue, type ShellNavItem, ShellNavItemsContext, type ShellNavItemsValue, ShellNavigationPreferenceContext, type ShellNavigationPreferenceValue, ShellOrgContext, type ShellOrganization, type ShellOrganizationValue, ShellProvider, type ShellProviderProps, ShellRoleContext, type ShellRoleValue, type ShellSlots, type ShellSupportContext, ShellSupportProviderContext, type ShellSupportValue, type ShellUser, Sidebar, SupportRequestButton, TopBarIcon, type TopBarIconProps, type TopBarIconSlot, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };

package/dist/index.js

@@ -1,8 +1,8 @@
-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 { extendTheme, IconButton, Tooltip, ChakraProvider, useColorModeValue, Flex, Menu, MenuButton, HStack, Avatar, VStack, Text, Box, Portal, MenuList, MenuItem, MenuDivider, Badge, 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx2 from 'clsx';
 import { Link, useLocation, useNavigate, NavLink } from 'react-router-dom';
-import { createContext, useEffect, useState, useMemo, useContext, useCallback } from 'react';
+import { createContext, forwardRef, useState, useEffect, useMemo, useContext, useCallback } from 'react';
 import { FiChevronDown, FiUser, FiRotateCcw, FiBriefcase, FiTrash2, FiUserPlus, FiLogOut, FiMenu, FiX } from 'react-icons/fi';
 import { keyframes } from '@emotion/react';
 
@@ -1515,19 +1515,19 @@ function Header({ onOpen, id }) {
           /* @__PURE__ */ jsxs(
             HStack,
             {
-              spacing: 2,
+              spacing: "var(--topbar-icon-gap, 8px)",
               mr: "15px",
-              color: "gray.600",
+              color: "var(--topbar-icon-color, #4A5568)",
               sx: {
                 '& button:not([role="menuitem"]):not([data-menu-item])': {
-                  width: "32px",
-                  height: "32px",
-                  minWidth: "32px",
+                  width: "var(--topbar-icon-button-size, 32px)",
+                  height: "var(--topbar-icon-button-size, 32px)",
+                  minWidth: "var(--topbar-icon-button-size, 32px)",
                   padding: 0
                 },
-                '& button:not([role="menuitem"]):not([data-menu-item]) svg': {
-                  width: "20px",
-                  height: "20px"
+                '& 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)"
                 }
               },
               children: [
@@ -2482,7 +2482,7 @@ function Sidebar({ onClose, id }) {
       bg: sidebarBg,
       borderRight: "1px",
       borderRightColor: sidebarBorderColor,
-      w: { base: "full", md: 60 },
+      w: { base: "full", md: "var(--sidebar-width, 240px)" },
       pos: "fixed",
       h: "100vh",
       direction: "column",
@@ -2649,6 +2649,53 @@ function AppLayout({
     overlaySlot
   ] });
 }
+function useSlotGlyphName(slot) {
+  const [name, setName] = useState(null);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const read = () => {
+      const raw = window.getComputedStyle(document.documentElement).getPropertyValue(`--topbar-icon-${slot}`).trim().replace(/^['"]|['"]$/g, "");
+      setName(raw.length > 0 ? raw : null);
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(document.head, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [slot]);
+  return name;
+}
+var TopBarIcon = forwardRef(
+  function TopBarIcon2({ slot, fallbackIcon, isSelected, ...rest }, ref) {
+    const glyphName = useSlotGlyphName(slot);
+    const icon = glyphName ? /* @__PURE__ */ jsx(
+      BrandIcon,
+      {
+        name: glyphName,
+        style: {
+          width: "var(--topbar-icon-size, 20px)",
+          height: "var(--topbar-icon-size, 20px)"
+        }
+      }
+    ) : fallbackIcon;
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref,
+        icon,
+        variant: "ghost",
+        minW: "var(--topbar-icon-button-size, 32px)",
+        h: "var(--topbar-icon-button-size, 32px)",
+        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))"
+        },
+        ...rest
+      }
+    );
+  }
+);
 var SUPPORT_REQUEST_SUCCESS_MESSAGE = "Your support request was sent to Politogy leadership.";
 function splitName(value) {
   const trimmed = String(value ?? "").trim();
@@ -3020,6 +3067,6 @@ function buildSpeculationRules(currentApp, registry) {
   return JSON.stringify(payload);
 }
 
-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 };
+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, TopBarIcon, 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