@the-portland-company/shell 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.3.2 — 2026-05-13
+
+### Added
+
+- `<ShellChrome userAvatarUrl />` (and matching `<ShellProvider userAvatarUrl />` prop) — app-supplied avatar URL override for the header `<UserMenu />` avatar. When provided, takes precedence over the avatar URL on the Supabase session's `user_metadata.avatar_url`.
+
+### Fixed
+
+- `<UserMenu />` was rendering only `user.raw.user_metadata.avatar_url`, which missed app-specific avatar sources like `profile.avatar_url`, memoji selections persisted to localStorage, and branded default URLs. Apps with these fallback chains were seeing the initials placeholder instead of the user's portrait. Pass the resolved URL via `userAvatarUrl` to restore parity with the legacy chrome.
+
 ## 0.3.1 — 2026-05-13
 
 Closes the last two visual gaps in the shell-v3 chrome vs production.

package/dist/index.cjs

@@ -1153,7 +1153,8 @@ function ShellProvider({
   linkedAccounts,
   support,
   devNotesMenu,
-  myProfileHref
+  myProfileHref,
+  userAvatarUrl
 }) {
   const [status, setStatus] = react$1.useState("loading");
   const [session, setSession] = react$1.useState(null);
@@ -1195,9 +1196,10 @@ function ShellProvider({
   const chrome = react$1.useMemo(
     () => ({
       devNotesMenu: devNotesMenu ?? null,
-      myProfileHref: myProfileHref ?? "/my-profile"
+      myProfileHref: myProfileHref ?? "/my-profile",
+      userAvatarUrl
     }),
-    [devNotesMenu, myProfileHref]
+    [devNotesMenu, myProfileHref, userAvatarUrl]
   );
   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 }) }) }) }) }) }) }) }) }) }) }) });
 }
@@ -1284,7 +1286,8 @@ function UserMenu() {
     myProfileHref,
     organizationSettingsHref,
     showContinueOnboarding,
-    onContinueOnboarding
+    onContinueOnboarding,
+    userAvatarUrl
   } = useShellChrome();
   const linked = useShellLinkedAccounts();
   const mode = useShellMode();
@@ -1295,7 +1298,7 @@ function UserMenu() {
   const menuListBorderColor = react.useColorModeValue("gray.200", "gray.700");
   if (status !== "authenticated" || !user) return null;
   const displayName = getUserDisplayName(user.raw);
-  const avatarUrl = avatarUrlFromUser(user);
+  const avatarUrl = userAvatarUrl ?? avatarUrlFromUser(user);
   const modeConfig = mode?.getModeConfig() ?? null;
   const currentOrg = org?.currentOrg ?? null;
   const linkedAccounts = linked?.linkedAccounts ?? [];
@@ -2911,7 +2914,8 @@ function ShellChrome({
   onContinueOnboarding,
   pageTitle,
   breadcrumbs,
-  headerActions
+  headerActions,
+  userAvatarUrl
 }) {
   const chrome = react$1.useMemo(
     () => ({
@@ -2924,7 +2928,8 @@ function ShellChrome({
       onContinueOnboarding,
       pageTitle,
       breadcrumbs,
-      headerActions
+      headerActions,
+      userAvatarUrl
     }),
     [
       devNotesMenu,
@@ -2936,7 +2941,8 @@ function ShellChrome({
       onContinueOnboarding,
       pageTitle,
       breadcrumbs,
-      headerActions
+      headerActions,
+      userAvatarUrl
     ]
   );
   const navItemsValue = react$1.useMemo(