@the-portland-company/shell 0.7.0 → 0.9.0

package/dist/index.d.cts

@@ -78,6 +78,18 @@ interface ShellUser {
 }
 /** Status of the auth session lifecycle. */
 type ShellAuthStatus = 'loading' | 'authenticated' | 'unauthenticated';
+/**
+ * Host-app-driven auth for apps that do not authenticate through Supabase
+ * (e.g., OIDC apps like Contacts). When passed to ShellProvider it takes
+ * precedence over `supabaseClient` session tracking. The host app is
+ * responsible for building a Supabase-shaped `user.raw` (id/email/
+ * user_metadata.full_name) so chrome components render identically.
+ */
+interface ShellInjectedAuth {
+    status: ShellAuthStatus;
+    user: ShellUser | null;
+    signOut: () => void | Promise<void>;
+}
 /**
  * One entry in the shell's app-switcher sidebar. The shell uses this list to
  * render navigation links between sub-apps and to drive Speculation Rules
@@ -261,8 +273,11 @@ interface ShellProviderProps {
     children: ReactNode;
     /** Stable ID of the current app, e.g., 'crm'. */
     currentApp: string;
-    /** Authenticated Supabase client owned by the host app. */
-    supabaseClient: SupabaseClient;
+    /** Authenticated Supabase client owned by the host app. Optional since
+     *  0.8.0 — apps that authenticate elsewhere pass `auth` instead. */
+    supabaseClient?: SupabaseClient;
+    /** Host-driven auth (takes precedence over supabaseClient). Since 0.8.0. */
+    auth?: ShellInjectedAuth;
     /** App registry for the sidebar. If omitted, uses the default registry shipped with the shell. */
     appRegistry?: AppRegistryEntry[];
     /** Optional override for the base path if the app is mounted under a sub-path (e.g., '/contacts'). */
@@ -378,7 +393,7 @@ interface ShellChromeValue {
     userAvatarUrl?: string;
 }
 declare const ShellChromeContext: react.Context<ShellChromeValue | null>;
-declare function ShellProvider({ children, supabaseClient, currentApp, appRegistry, basename, organization, linkedAccounts, support, devNotesMenu, myProfileHref, userAvatarUrl, }: ShellProviderProps): react_jsx_runtime.JSX.Element;
+declare function ShellProvider({ children, supabaseClient, auth, currentApp, appRegistry, basename, organization, linkedAccounts, support, devNotesMenu, myProfileHref, userAvatarUrl, }: ShellProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function useShellAuth(): ShellAuthValue;
 
@@ -574,15 +589,13 @@ interface NavItemProps {
     [key: string]: unknown;
 }
 /**
- * Single sidebar nav row. Ported verbatim from
- * react/app/src/layouts/AuthenticatedLayout.tsx lines 1292–1730 (2026-05-13)
- * with mode + navigation-preference context reads swapped for shell hooks.
+ * Single sidebar nav row. Reconciled with main-app source of truth:
+ * `react/app/src/layouts/AuthenticatedLayout.tsx` NavItem (2026-07).
  *
- * Renders:
- * - Top-level rows with optional children (accordion).
- * - Sub-items inside an expanded parent (children list).
- * - Active state via `data-nav-item-active` and primary-color fill.
- * - Mode-aware hover gradient that sweeps left-to-right.
+ * Shell additions retained: `brandIcon`, `safeHref`, shell context hooks.
+ * Main-app behavior restored: gray hover (no gradient sweep), parent active
+ * when any child matches even in tabs-only mode, split effectiveHref vs
+ * href-less accordion headers.
  */
 declare function NavItem({ icon, brandIcon, children, href, action, subItems, badge, subLabel, isSubItem, isExpanded, onToggle, menuKey, isDisabled: navIsDisabled, disabled, ...rest }: NavItemProps): react_jsx_runtime.JSX.Element;
 
@@ -805,4 +818,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 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, 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

@@ -78,6 +78,18 @@ interface ShellUser {
 }
 /** Status of the auth session lifecycle. */
 type ShellAuthStatus = 'loading' | 'authenticated' | 'unauthenticated';
+/**
+ * Host-app-driven auth for apps that do not authenticate through Supabase
+ * (e.g., OIDC apps like Contacts). When passed to ShellProvider it takes
+ * precedence over `supabaseClient` session tracking. The host app is
+ * responsible for building a Supabase-shaped `user.raw` (id/email/
+ * user_metadata.full_name) so chrome components render identically.
+ */
+interface ShellInjectedAuth {
+    status: ShellAuthStatus;
+    user: ShellUser | null;
+    signOut: () => void | Promise<void>;
+}
 /**
  * One entry in the shell's app-switcher sidebar. The shell uses this list to
  * render navigation links between sub-apps and to drive Speculation Rules
@@ -261,8 +273,11 @@ interface ShellProviderProps {
     children: ReactNode;
     /** Stable ID of the current app, e.g., 'crm'. */
     currentApp: string;
-    /** Authenticated Supabase client owned by the host app. */
-    supabaseClient: SupabaseClient;
+    /** Authenticated Supabase client owned by the host app. Optional since
+     *  0.8.0 — apps that authenticate elsewhere pass `auth` instead. */
+    supabaseClient?: SupabaseClient;
+    /** Host-driven auth (takes precedence over supabaseClient). Since 0.8.0. */
+    auth?: ShellInjectedAuth;
     /** App registry for the sidebar. If omitted, uses the default registry shipped with the shell. */
     appRegistry?: AppRegistryEntry[];
     /** Optional override for the base path if the app is mounted under a sub-path (e.g., '/contacts'). */
@@ -378,7 +393,7 @@ interface ShellChromeValue {
     userAvatarUrl?: string;
 }
 declare const ShellChromeContext: react.Context<ShellChromeValue | null>;
-declare function ShellProvider({ children, supabaseClient, currentApp, appRegistry, basename, organization, linkedAccounts, support, devNotesMenu, myProfileHref, userAvatarUrl, }: ShellProviderProps): react_jsx_runtime.JSX.Element;
+declare function ShellProvider({ children, supabaseClient, auth, currentApp, appRegistry, basename, organization, linkedAccounts, support, devNotesMenu, myProfileHref, userAvatarUrl, }: ShellProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function useShellAuth(): ShellAuthValue;
 
@@ -574,15 +589,13 @@ interface NavItemProps {
     [key: string]: unknown;
 }
 /**
- * Single sidebar nav row. Ported verbatim from
- * react/app/src/layouts/AuthenticatedLayout.tsx lines 1292–1730 (2026-05-13)
- * with mode + navigation-preference context reads swapped for shell hooks.
+ * Single sidebar nav row. Reconciled with main-app source of truth:
+ * `react/app/src/layouts/AuthenticatedLayout.tsx` NavItem (2026-07).
  *
- * Renders:
- * - Top-level rows with optional children (accordion).
- * - Sub-items inside an expanded parent (children list).
- * - Active state via `data-nav-item-active` and primary-color fill.
- * - Mode-aware hover gradient that sweeps left-to-right.
+ * Shell additions retained: `brandIcon`, `safeHref`, shell context hooks.
+ * Main-app behavior restored: gray hover (no gradient sweep), parent active
+ * when any child matches even in tabs-only mode, split effectiveHref vs
+ * href-less accordion headers.
  */
 declare function NavItem({ icon, brandIcon, children, href, action, subItems, badge, subLabel, isSubItem, isExpanded, onToggle, menuKey, isDisabled: navIsDisabled, disabled, ...rest }: NavItemProps): react_jsx_runtime.JSX.Element;
 
@@ -805,4 +818,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 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, 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

@@ -1120,6 +1120,7 @@ function toShellUser(session) {
 function ShellProvider({
   children,
   supabaseClient,
+  auth,
   currentApp,
   appRegistry,
   basename,
@@ -1133,6 +1134,11 @@ function ShellProvider({
   const [status, setStatus] = useState("loading");
   const [session, setSession] = useState(null);
   useEffect(() => {
+    if (auth || !supabaseClient) {
+      setSession(null);
+      if (!auth) setStatus("unauthenticated");
+      return;
+    }
     let cancelled = false;
     supabaseClient.auth.getSession().then(({ data }) => {
       if (cancelled) return;
@@ -1147,18 +1153,27 @@ function ShellProvider({
       cancelled = true;
       sub.data.subscription.unsubscribe();
     };
-  }, [supabaseClient]);
-  const value = useMemo(
-    () => ({
+  }, [supabaseClient, auth]);
+  const value = useMemo(() => {
+    if (auth) {
+      return {
+        status: auth.status,
+        session: null,
+        user: auth.user,
+        signOut: async () => {
+          await auth.signOut();
+        }
+      };
+    }
+    return {
       status,
       session,
       user: toShellUser(session),
       signOut: async () => {
-        await supabaseClient.auth.signOut();
+        await supabaseClient?.auth.signOut();
       }
-    }),
-    [status, session, supabaseClient]
-  );
+    };
+  }, [auth, status, session, supabaseClient]);
   const meta = useMemo(
     () => ({
       currentApp,
@@ -1552,8 +1567,7 @@ function BrandIcon({
   );
 }
 var BrandIcon_default = BrandIcon;
-var MODE_CAMPAIGN = "campaign";
-var MODE_PETITION = "petition";
+var safeHref = (h) => h && /^(https?:|mailto:|tel:|\/|#|\.)/i.test(h.trim()) ? h : "#";
 function NavItem({
   icon,
   brandIcon,
@@ -1574,23 +1588,9 @@ function NavItem({
   const location = useLocation();
   const navigate = useNavigate();
   const mode = useShellMode();
-  const currentMode = mode?.currentMode ?? null;
   const modeConfig = resolveModeConfig(mode);
   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, #ea6a3a 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];
@@ -1600,6 +1600,7 @@ function NavItem({
     [location.search]
   );
   const matchesSubItem = (itemHref) => {
+    if (!itemHref) return false;
     if (itemHref === currentFullPath) return true;
     const itemPath = itemHref.split("?")[0];
     const itemSearch = itemHref.includes("?") ? itemHref.split("?")[1] : "";
@@ -1643,83 +1644,130 @@ function NavItem({
     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 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 disabledRowTextColor = "gray.400";
+  const renderIcon = (activeForHover) => {
+    if (brandIcon) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          mr: "4",
+          display: "inline-flex",
+          alignItems: "center",
+          filter: isParentActive || isActive ? "brightness(0) invert(1)" : void 0,
+          _groupHover: isDisabled ? void 0 : {
+            filter: activeForHover ? "brightness(0) invert(1)" : void 0
+          },
+          children: /* @__PURE__ */ jsx(BrandIcon_default, { name: brandIcon, size: 18 })
+        }
+      );
+    }
+    if (icon) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          mr: "4",
+          fontSize: "16",
+          _groupHover: {
+            color: isDisabled ? disabledRowTextColor : activeForHover ? "white" : "gray.900"
+          },
+          as: icon
+        }
+      );
+    }
+    return null;
+  };
   if (hasSubItems) {
-    const headerProps = {
-      align: "center",
-      px: "4",
-      py: "2.5",
-      mx: "4",
-      w: "auto",
-      borderTopRadius: "lg",
-      borderBottomRadius: isSubMenuOpen ? 0 : "lg",
-      role: "group",
-      cursor: isDisabled ? "not-allowed" : "pointer",
-      opacity: 1,
-      pointerEvents: isDisabled ? "none" : "auto",
-      "data-nav-item-active": String(isParentActive),
-      position: "relative",
-      overflow: "hidden",
-      bg: isDisabled ? disabledRowBg : expandedRowBg,
-      color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
-      _before: isDisabled ? void 0 : gradientSweepBefore,
-      _hover: {
-        color: isDisabled ? disabledRowTextColor : "white",
-        _before: isDisabled ? void 0 : { width: "100%" }
-      },
-      "aria-disabled": isDisabled ? "true" : "false",
-      onClick: (e) => {
-        if (isDisabled) return;
-        if (effectiveHref) e.preventDefault();
-        e.stopPropagation();
-        onToggle?.(menuKey || null);
-      }
-    };
     return /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsxs(Flex, { ...headerProps, ...rest, children: [
-        brandIcon ? /* @__PURE__ */ jsx(
-          Box,
-          {
-            mr: "4",
-            display: "inline-flex",
-            alignItems: "center",
-            position: "relative",
-            zIndex: 1,
-            filter: isParentActive ? "brightness(0) invert(1)" : void 0,
-            _groupHover: isDisabled ? void 0 : { filter: "brightness(0) invert(1)" },
-            children: /* @__PURE__ */ jsx(BrandIcon_default, { name: brandIcon, size: 18 })
-          }
-        ) : icon ? /* @__PURE__ */ jsx(
-          Box,
-          {
-            mr: "4",
-            fontSize: "16",
-            position: "relative",
-            zIndex: 1,
-            _groupHover: {
-              color: isDisabled ? disabledRowTextColor : "white"
-            },
-            as: icon
-          }
-        ) : null,
-        /* @__PURE__ */ jsx(Box, { flex: "1", position: "relative", zIndex: 1, children }),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            as: FiChevronDown,
-            position: "relative",
-            zIndex: 1,
-            transform: isSubMenuOpen ? "rotate(180deg)" : void 0,
-            transition: "transform 0.2s"
-          }
-        )
-      ] }),
+      effectiveHref ? /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          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),
+          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"
+          },
+          "aria-disabled": isDisabled ? "true" : "false",
+          onClick: (e) => {
+            if (isDisabled) return;
+            e.preventDefault();
+            e.stopPropagation();
+            onToggle?.(menuKey || null);
+          },
+          ...rest,
+          children: [
+            renderIcon(isParentActive),
+            /* @__PURE__ */ jsx(Box, { flex: "1", children }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                as: FiChevronDown,
+                transform: isSubMenuOpen ? "rotate(180deg)" : void 0,
+                transition: "transform 0.2s"
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          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),
+          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"
+          },
+          "aria-disabled": isDisabled ? "true" : "false",
+          onClick: (e) => {
+            if (isDisabled) return;
+            e.stopPropagation();
+            onToggle?.(menuKey || null);
+          },
+          ...rest,
+          children: [
+            renderIcon(hasActiveChild),
+            /* @__PURE__ */ jsx(Box, { flex: "1", children }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                as: FiChevronDown,
+                transform: isSubMenuOpen ? "rotate(180deg)" : void 0,
+                transition: "transform 0.2s"
+              }
+            )
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx(Collapse, { in: isSubMenuOpen, animateOpacity: true, children: /* @__PURE__ */ jsx(
         Box,
         {
@@ -1763,74 +1811,68 @@ function NavItem({
       navigate(effectiveHref);
     }
   };
-  return /* @__PURE__ */ jsx(Box, { as: "a", href: effectiveHref || "#", onClick: handleClick, style: { textDecoration: "none" }, children: /* @__PURE__ */ jsxs(
-    Flex,
+  const rowActive = isSubItem ? isActive : isParentActive;
+  return /* @__PURE__ */ jsx(
+    Box,
     {
-      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",
+      as: "a",
+      href: safeHref(effectiveHref),
       onClick: handleClick,
-      children: [
-        brandIcon ? /* @__PURE__ */ jsx(
-          Box,
-          {
-            mr: "4",
-            display: "inline-flex",
-            alignItems: "center",
-            position: "relative",
-            zIndex: 1,
-            filter: isActive && !isSubItem ? "brightness(0) invert(1)" : void 0,
-            _groupHover: isDisabled ? void 0 : { filter: "brightness(0) invert(1)" },
-            children: /* @__PURE__ */ jsx(BrandIcon_default, { name: brandIcon, size: 18 })
-          }
-        ) : icon ? /* @__PURE__ */ jsx(
-          Box,
-          {
-            mr: "4",
-            fontSize: "16",
-            position: "relative",
-            zIndex: 1,
-            _groupHover: {
-              color: isDisabled ? disabledRowTextColor : "white"
-            },
-            as: icon
-          }
-        ) : null,
-        /* @__PURE__ */ jsxs(Box, { flex: "1", position: "relative", zIndex: 1, children: [
-          /* @__PURE__ */ jsx(Box, { children }),
-          subLabel ? /* @__PURE__ */ jsx(
-            Text,
-            {
-              mt: 0.5,
-              fontSize: "10px",
-              lineHeight: "1.3",
-              color: isDisabled ? "gray.400" : "gray.400",
-              children: subLabel
-            }
-          ) : null,
-          badge && /* @__PURE__ */ jsx(Badge, { colorScheme: "orange", size: "xs", mt: 1, fontSize: "xs", display: "block", children: badge })
-        ] })
-      ]
+      style: { textDecoration: "none" },
+      children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          px: "4",
+          py: "2.5",
+          mx: isSubItem ? "0" : "4",
+          w: isSubItem ? "full" : "auto",
+          borderRadius: isSubItem ? "0" : "lg",
+          role: "group",
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          opacity: 1,
+          pointerEvents: isDisabled ? "none" : "auto",
+          "data-nav-item-active": String(rowActive),
+          bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "gray.100" : 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",
+            color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.900"
+          },
+          "aria-disabled": isDisabled ? "true" : "false",
+          onClick: handleClick,
+          ...rest,
+          children: [
+            brandIcon ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                mr: "4",
+                display: "inline-flex",
+                alignItems: "center",
+                filter: rowActive && !isSubItem ? "brightness(0) invert(1)" : void 0,
+                children: /* @__PURE__ */ jsx(BrandIcon_default, { name: brandIcon, size: 18 })
+              }
+            ) : icon ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                mr: "4",
+                fontSize: "16",
+                _groupHover: {
+                  color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.900"
+                },
+                as: icon
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs(Box, { flex: "1", children: [
+              /* @__PURE__ */ jsx(Box, { children }),
+              subLabel ? /* @__PURE__ */ jsx(Text, { mt: 0.5, fontSize: "10px", lineHeight: "1.3", color: "gray.400", children: subLabel }) : null,
+              badge && /* @__PURE__ */ jsx(Badge, { colorScheme: "orange", size: "xs", mt: 1, fontSize: "xs", display: "block", children: badge })
+            ] })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 var NavItem_default = NavItem;