@the-portland-company/shell 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.9.0 — 2026-07-12
+
+### Fixed (Chakra chrome — reconciled with main app)
+
+- **`NavItem` re-synced to main-app `AuthenticatedLayout`**: removed the orange→red gradient hover sweep that had diverged from production chrome; restored gray hover, parent active when any child route matches (including Tabs Only), and the effectiveHref vs href-less accordion header split. `brandIcon` + `safeHref` shell additions retained.
+
+### Note for hosts
+
+- Main VRM app now renders chrome exclusively via `ShellChrome` + `AppLayout` (no dual `AuthenticatedLayoutFrame` chrome path). Contacts already used this path — both apps should pin `^0.9.0`.
+
+## 0.8.0 — 2026-07-02
+
+### Added (backward-compatible)
+
+- **Host-driven auth for non-Supabase apps**: `ShellProviderProps.supabaseClient` is now optional, and a new optional `auth: ShellInjectedAuth` prop (`{ status, user, signOut }`, exported type) takes precedence over Supabase session tracking. This lets OIDC apps (e.g. the standalone Contacts app) mount the full Chakra chrome — `ShellProvider` → `ShellChrome` → `AppLayout` — with their own identity feeding `useShellAuth`/`UserMenu`. The host builds a Supabase-shaped `user.raw` (`id`/`email`/`user_metadata.full_name`) so chrome components render identically. With neither prop, auth resolves to `unauthenticated`. Existing `supabaseClient` consumers are unaffected.
+
+### Tests
+
+- Injected auth: precedence over Supabase (no `getSession`/`onAuthStateChange`/`auth.signOut` calls), client-less mounting, neither-prop fallback (3 tests).
+
 ## 0.7.0 — 2026-07-01
 
 ### Added (native chrome — all backward-compatible)

package/dist/index.cjs

@@ -1126,6 +1126,7 @@ function toShellUser(session) {
 function ShellProvider({
   children,
   supabaseClient,
+  auth,
   currentApp,
   appRegistry,
   basename,
@@ -1139,6 +1140,11 @@ function ShellProvider({
   const [status, setStatus] = react$1.useState("loading");
   const [session, setSession] = react$1.useState(null);
   react$1.useEffect(() => {
+    if (auth || !supabaseClient) {
+      setSession(null);
+      if (!auth) setStatus("unauthenticated");
+      return;
+    }
     let cancelled = false;
     supabaseClient.auth.getSession().then(({ data }) => {
       if (cancelled) return;
@@ -1153,18 +1159,27 @@ function ShellProvider({
       cancelled = true;
       sub.data.subscription.unsubscribe();
     };
-  }, [supabaseClient]);
-  const value = react$1.useMemo(
-    () => ({
+  }, [supabaseClient, auth]);
+  const value = react$1.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 = react$1.useMemo(
     () => ({
       currentApp,
@@ -1558,8 +1573,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,
@@ -1580,23 +1594,9 @@ function NavItem({
   const location = reactRouterDom.useLocation();
   const navigate = reactRouterDom.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];
@@ -1606,6 +1606,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] : "";
@@ -1649,83 +1650,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__ */ jsxRuntime.jsx(
+        react.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__ */ jsxRuntime.jsx(BrandIcon_default, { name: brandIcon, size: 18 })
+        }
+      );
+    }
+    if (icon) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        react.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__ */ 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"
-          }
-        )
-      ] }),
+      effectiveHref ? /* @__PURE__ */ jsxRuntime.jsxs(
+        react.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__ */ jsxRuntime.jsx(react.Box, { flex: "1", children }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.Box,
+              {
+                as: fi.FiChevronDown,
+                transform: isSubMenuOpen ? "rotate(180deg)" : void 0,
+                transition: "transform 0.2s"
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
+        react.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__ */ jsxRuntime.jsx(react.Box, { flex: "1", children }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.Box,
+              {
+                as: fi.FiChevronDown,
+                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,
         {
@@ -1769,74 +1817,68 @@ function NavItem({
       navigate(effectiveHref);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "a", href: effectiveHref || "#", onClick: handleClick, style: { textDecoration: "none" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    react.Flex,
+  const rowActive = isSubItem ? isActive : isParentActive;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.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__ */ 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 })
-        ] })
-      ]
+      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(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__ */ jsxRuntime.jsx(
+              react.Box,
+              {
+                mr: "4",
+                display: "inline-flex",
+                alignItems: "center",
+                filter: rowActive && !isSubItem ? "brightness(0) invert(1)" : void 0,
+                children: /* @__PURE__ */ jsxRuntime.jsx(BrandIcon_default, { name: brandIcon, size: 18 })
+              }
+            ) : icon ? /* @__PURE__ */ jsxRuntime.jsx(
+              react.Box,
+              {
+                mr: "4",
+                fontSize: "16",
+                _groupHover: {
+                  color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.900"
+                },
+                as: icon
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { flex: "1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children }),
+              subLabel ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { mt: 0.5, fontSize: "10px", lineHeight: "1.3", color: "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;