@tumbaland/frontend-core 1.15.0 → 1.16.0

package/dist/components/SectionBar/SectionBar.d.ts

@@ -0,0 +1,49 @@
+import { ComponentType, ReactNode } from 'react';
+import type { SvgIconProps } from '@mui/material/SvgIcon';
+/** One section of a module: a page of it the navigation lists by name. */
+export interface SectionBarItem {
+    label: string;
+    /** Absolute address, the same one in the shell and standalone (see each app's appBase). */
+    route: string;
+    icon?: ComponentType<SvgIconProps>;
+}
+export interface SectionBarProps {
+    /** The module the sections belong to. Named at the left of the bar. */
+    title: string;
+    /** Drawn in a tinted tile before the title. */
+    icon?: ComponentType<SvgIconProps>;
+    /** The module's accent. Tints the tile and the section being shown. */
+    accent?: string;
+    /** In menu order. A module with one section passes none and gets just a title. */
+    items?: SectionBarItem[];
+    currentRoute: string;
+    /** Phones get one dropdown in place of the row, and no title. */
+    compact?: boolean;
+    /** Pinned to the right of the bar — where the shell puts the tenant selector. */
+    end?: ReactNode;
+    /**
+     * Drawn at the left in place of the title, for a page that has something
+     * better to put there than its own name — the shell's home page puts the
+     * wordmark here. Shown on the same terms as the title, so a module with
+     * sections still spends the room on them.
+     */
+    lead?: ReactNode;
+}
+/**
+ * The one bar above a module's content: what you are in, and where else you can
+ * go inside it.
+ *
+ * It lives here rather than in the shell because a module renders it in both
+ * the modes it runs in. Inside the shell one bar is drawn for whichever module
+ * is loaded; standalone, the module's own `AppLayout` draws the same bar from
+ * the same section list. The alternative — in-page MUI `Tabs` — is what had
+ * Profile and Billing looking nothing like Journal, Album and Money, and put a
+ * second row of navigation under the shell's own.
+ *
+ * Sections are laid out in full on a wide screen, since a row of five names is
+ * worth more than a button that hides four of them. Below `sm` there is no room
+ * for that, so the same list becomes a dropdown labelled with the section being
+ * shown.
+ */
+export declare function SectionBar({ title, icon: Icon, accent, items, currentRoute, compact, end, lead }: SectionBarProps): import("react").JSX.Element;
+export default SectionBar;

package/dist/components/SectionBar/SectionBar.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Link } from 'react-router';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { brand, chrome, ink, surface, TOUCH_TARGET } from '../../theme/tokens';
+/** A section owns its own path and everything nested under it. */
+const isSectionActive = (route, currentRoute) => currentRoute === route || currentRoute.startsWith(`${route}/`);
+/**
+ * The one bar above a module's content: what you are in, and where else you can
+ * go inside it.
+ *
+ * It lives here rather than in the shell because a module renders it in both
+ * the modes it runs in. Inside the shell one bar is drawn for whichever module
+ * is loaded; standalone, the module's own `AppLayout` draws the same bar from
+ * the same section list. The alternative — in-page MUI `Tabs` — is what had
+ * Profile and Billing looking nothing like Journal, Album and Money, and put a
+ * second row of navigation under the shell's own.
+ *
+ * Sections are laid out in full on a wide screen, since a row of five names is
+ * worth more than a button that hides four of them. Below `sm` there is no room
+ * for that, so the same list becomes a dropdown labelled with the section being
+ * shown.
+ */
+export function SectionBar({ title, icon: Icon, accent = brand.pinkInk, items = [], currentRoute, compact = false, end, lead }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const close = () => setAnchorEl(null);
+    const activeItem = items.find(({ route }) => isSectionActive(route, currentRoute));
+    const sections = items.length > 0 && (_jsx(Box, { component: "nav", "aria-label": `${title} sections`, sx: compact ? compactNav : sectionRow, children: compact ? (_jsx(Button
+        // No aria-label: the accessible name is the section the button
+        // names, which is the thing a reader needs read out. The nav around
+        // it already says which module's sections these are.
+        , { "aria-haspopup": "menu", "aria-expanded": open, onClick: (event) => setAnchorEl(event.currentTarget), startIcon: activeItem?.icon ? _jsx(activeItem.icon, {}) : undefined, endIcon: _jsx(ExpandMoreIcon, {}), sx: { ...pillBase, ...activePill(accent), maxWidth: '100%', fontSize: 15 }, children: _jsx(Box, { component: "span", sx: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: activeItem?.label ?? title }) })) : (items.map(({ label, route, icon: ItemIcon }) => {
+            const active = isSectionActive(route, currentRoute);
+            return (_jsx(Button, { component: Link, to: route, "aria-current": active ? 'page' : undefined, startIcon: ItemIcon ? _jsx(ItemIcon, {}) : undefined, sx: { ...pillBase, ...(active ? activePill(accent) : idlePill) }, children: label }, route));
+        })) }));
+    // The module is already named twice over on a page that has sections: the
+    // rail entry beside it is lit, and the section pill (or, on a phone, the
+    // dropdown) says which of its pages you are on. A third copy in the corner
+    // was just furniture. A module with no sections has neither, and a bar
+    // holding nothing but the tenant button reads as a mistake, so that one
+    // keeps its name.
+    const showTitle = items.length === 0;
+    return (_jsxs(Box, { component: "header", sx: { ...bar, minHeight: compact ? 56 : 68, px: compact ? 1.25 : 2 }, children: [showTitle &&
+                (lead ?? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }, children: [Icon && (_jsx(Box, { sx: { ...tile, color: accent, backgroundColor: `${accent}14` }, children: _jsx(Icon, { fontSize: "small" }) })), _jsx(Box, { component: "span", sx: {
+                                fontSize: 17,
+                                fontWeight: 700,
+                                color: ink.strong,
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis'
+                            }, children: title })] }))), sections, _jsx(Box, { sx: { flex: 1, minWidth: 0 } }), end, items.length > 0 && (_jsx(Menu, { anchorEl: anchorEl, open: open, onClose: close, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: {
+                    paper: {
+                        sx: {
+                            mt: 0.5,
+                            minWidth: 220,
+                            borderRadius: 3,
+                            border: `1px solid ${surface.divider}`,
+                            boxShadow: '0 18px 40px -24px rgba(88,28,135,0.5)'
+                        }
+                    },
+                    list: { 'aria-label': `${title} sections` }
+                }, children: items.map(({ label, route, icon: ItemIcon }) => {
+                    const active = isSectionActive(route, currentRoute);
+                    return (_jsxs(MenuItem, { component: Link, to: route, selected: active, "aria-current": active ? 'page' : undefined, onClick: close, sx: {
+                            mx: 0.5,
+                            borderRadius: 2,
+                            minHeight: TOUCH_TARGET,
+                            color: active ? accent : ink.body,
+                            '&.Mui-selected': { backgroundColor: `${accent}14`, color: accent },
+                            '&.Mui-selected:hover': { backgroundColor: `${accent}20` },
+                            '&:hover': { backgroundColor: surface.sunken }
+                        }, children: [ItemIcon && (_jsx(ListItemIcon, { sx: { color: 'inherit', minWidth: 36 }, children: _jsx(ItemIcon, { fontSize: "small" }) })), _jsx(ListItemText, { slotProps: { primary: { sx: { fontWeight: active ? 700 : 500 } } }, children: label })] }, route));
+                }) }))] }));
+}
+/**
+ * Frosted, like the navigation rail beside it, so the two read as one piece of
+ * chrome with the page washing through both.
+ */
+const bar = {
+    flexShrink: 0,
+    position: 'sticky',
+    top: 0,
+    zIndex: 2,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 1,
+    py: 1,
+    ...chrome,
+    borderBottom: `1px solid ${surface.divider}`
+};
+const tile = {
+    width: 34,
+    height: 34,
+    borderRadius: 2.5,
+    display: 'grid',
+    placeItems: 'center'
+};
+const sectionRow = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 0.5,
+    minWidth: 0,
+    overflowX: 'auto',
+    // The row scrolls when a module has more sections than fit; a scrollbar
+    // across the chrome would read as a seam.
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': { display: 'none' }
+};
+const compactNav = { minWidth: 0, display: 'flex' };
+const pillBase = {
+    flexShrink: 0,
+    minWidth: 0,
+    height: 36,
+    px: 1.75,
+    borderRadius: 999,
+    textTransform: 'none',
+    fontSize: 14.5,
+    whiteSpace: 'nowrap',
+    transition: 'background-color .2s ease, color .2s ease',
+    '& .MuiButton-startIcon svg': { fontSize: 19 },
+    '& .MuiButton-startIcon, & .MuiButton-endIcon': { flexShrink: 0 }
+};
+const idlePill = {
+    fontWeight: 500,
+    color: ink.body,
+    '&:hover': { backgroundColor: surface.sunken, color: ink.strong }
+};
+/** The section being shown, and the compact dropdown that stands in for it. */
+const activePill = (accent) => ({
+    fontWeight: 700,
+    color: accent,
+    backgroundColor: `${accent}14`,
+    boxShadow: `inset 0 0 0 1px ${accent}29`,
+    '&:hover': { backgroundColor: `${accent}20` }
+});
+export default SectionBar;

package/dist/components/SectionBar/index.d.ts

@@ -0,0 +1,2 @@
+export { SectionBar, default } from './SectionBar';
+export type { SectionBarProps, SectionBarItem } from './SectionBar';

package/dist/components/SectionBar/index.js

@@ -0,0 +1 @@
+export { SectionBar, default } from './SectionBar';

package/dist/components/tenant/TenantSelector.d.ts

@@ -17,8 +17,17 @@ export interface TenantSelectorProps {
     loading?: boolean;
     /** Error state */
     error?: string | null;
+    /** Drops the "Viewing" caption and tightens the button, for a phone's bar. */
+    compact?: boolean;
     /** Custom styling */
     sx?: SxProps<Theme>;
 }
+/**
+ * Whose data the page is showing: the person's own, or one of their groups.
+ *
+ * Drawn as the same rounded pill the section bar beside it uses, in the brand
+ * violet rather than MUI's default blue, so the one control that changes what
+ * every module shows reads as part of the chrome instead of a stray form field.
+ */
 declare const TenantSelector: React.FC<TenantSelectorProps>;
 export default TenantSelector;

package/dist/components/tenant/TenantSelector.js

@@ -2,7 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Button, Menu, MenuItem, ListItemIcon, ListItemText, Divider, Typography, Chip } from '@mui/material';
 import { PersonOutlined, Groups, ExpandMore, Check } from '@mui/icons-material';
-const TenantSelector = ({ selectedTenant, tenants = [], onTenantChange, loading = false, error = null, sx = {} }) => {
+import { brand, ink, surface, TOUCH_TARGET } from '../../theme/tokens';
+/**
+ * Whose data the page is showing: the person's own, or one of their groups.
+ *
+ * Drawn as the same rounded pill the section bar beside it uses, in the brand
+ * violet rather than MUI's default blue, so the one control that changes what
+ * every module shows reads as part of the chrome instead of a stray form field.
+ */
+const TenantSelector = ({ selectedTenant, tenants = [], onTenantChange, loading = false, error = null, compact = false, sx = {} }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const isOpen = Boolean(anchorEl);
     const handleClick = (event) => {
@@ -17,7 +25,7 @@ const TenantSelector = ({ selectedTenant, tenants = [], onTenantChange, loading
     };
     const getDisplayName = (tenant) => {
         if (!tenant)
-            return 'Select Context';
+            return 'Choose context';
         return tenant.type === 'personal' ? 'Personal' : tenant.name;
     };
     const getIcon = (type) => {
@@ -26,52 +34,55 @@ const TenantSelector = ({ selectedTenant, tenants = [], onTenantChange, loading
     if (error) {
         return _jsx(Chip, { label: "Error loading contexts", color: "error", size: "small", sx: { ...sx } });
     }
-    return (_jsxs(Box, { sx: { ...sx }, children: [_jsx(Button, { onClick: handleClick, disabled: loading || tenants.length === 0, endIcon: _jsx(ExpandMore, {}), startIcon: selectedTenant ? getIcon(selectedTenant.type) : _jsx(PersonOutlined, { fontSize: "small" }), sx: {
+    return (_jsxs(Box, { sx: { ...sx }, children: [_jsx(Button, { onClick: handleClick, disabled: loading || tenants.length === 0, "aria-haspopup": "menu", "aria-expanded": isOpen, endIcon: _jsx(ExpandMore, {}), startIcon: selectedTenant ? getIcon(selectedTenant.type) : _jsx(PersonOutlined, { fontSize: "small" }), sx: {
                     textTransform: 'none',
-                    fontWeight: 500,
-                    borderRadius: 2,
-                    px: 2,
-                    py: 0.5,
-                    minWidth: 140,
+                    fontWeight: 600,
+                    borderRadius: 999,
+                    px: compact ? 1.25 : 1.75,
+                    minHeight: compact ? 38 : TOUCH_TARGET,
+                    minWidth: 0,
                     justifyContent: 'flex-start',
-                    color: 'text.primary',
-                    border: '1px solid',
-                    borderColor: 'divider',
+                    color: ink.strong,
+                    backgroundColor: surface.paper,
+                    border: `1px solid ${surface.divider}`,
+                    transition: 'border-color .2s ease, box-shadow .2s ease',
+                    '& .MuiButton-startIcon': { color: brand.violetInk, flexShrink: 0 },
+                    '& .MuiButton-endIcon': { color: ink.muted, flexShrink: 0 },
                     '&:hover': {
-                        borderColor: 'primary.main',
-                        backgroundColor: 'action.hover'
-                    }
-                }, children: _jsxs(Box, { sx: { flexGrow: 1, textAlign: 'left', overflow: 'hidden' }, children: [_jsx(Typography, { variant: "caption", sx: {
-                                color: 'text.secondary',
-                                display: 'block',
-                                fontSize: 10
-                            }, children: "Context" }), _jsx(Typography, { variant: "body2", sx: {
+                        backgroundColor: surface.paper,
+                        borderColor: `${brand.violetInk}66`,
+                        boxShadow: `0 8px 20px -14px ${brand.violetInk}`
+                    },
+                    '&.Mui-disabled': { color: ink.muted, border: `1px solid ${surface.divider}` }
+                }, children: _jsxs(Box, { sx: { flexGrow: 1, textAlign: 'left', overflow: 'hidden' }, children: [!compact && (_jsx(Typography, { variant: "caption", sx: { color: ink.muted, display: 'block', fontSize: 10, letterSpacing: 0.4, lineHeight: 1.2 }, children: "Viewing" })), _jsx(Typography, { variant: "body2", sx: {
                                 display: 'block',
+                                fontWeight: 600,
+                                lineHeight: 1.3,
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                maxWidth: 100
-                            }, children: loading ? 'Loading...' : getDisplayName(selectedTenant) })] }) }), _jsxs(Menu, { anchorEl: anchorEl, open: isOpen, onClose: handleClose, anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'left'
-                }, transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'left'
-                }, children: [_jsx(MenuItem, { disabled: true, children: _jsx(Typography, { variant: "caption", sx: {
-                                color: 'text.secondary',
-                                fontWeight: 600
-                            }, children: "SELECT CONTEXT" }) }), _jsx(Divider, {}), tenants.map((tenant) => {
+                                textOverflow: 'ellipsis'
+                            }, children: loading ? 'Loading...' : getDisplayName(selectedTenant) })] }) }), _jsxs(Menu, { anchorEl: anchorEl, open: isOpen, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, slotProps: {
+                    paper: {
+                        sx: {
+                            mt: 0.5,
+                            minWidth: 248,
+                            borderRadius: 3,
+                            border: `1px solid ${surface.divider}`,
+                            boxShadow: '0 18px 40px -24px rgba(88,28,135,0.5)'
+                        }
+                    }
+                }, children: [_jsx(MenuItem, { disabled: true, sx: { '&.Mui-disabled': { opacity: 1 } }, children: _jsx(Typography, { variant: "caption", sx: { color: ink.muted, fontWeight: 700, letterSpacing: 0.4 }, children: "Switch to" }) }), _jsx(Divider, {}), tenants.map((tenant) => {
                         const isSelected = selectedTenant?.id === tenant.id;
                         return (_jsxs(MenuItem, { onClick: () => handleTenantSelect(tenant), selected: isSelected, sx: {
-                                py: 1.5,
-                                '&.Mui-selected': {
-                                    backgroundColor: 'primary.50'
-                                }
-                            }, children: [_jsx(ListItemIcon, { children: getIcon(tenant.type) }), _jsx(ListItemText, { primary: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Typography, { variant: "body2", sx: { fontWeight: 500 }, children: tenant.type === 'personal' ? 'Personal' : tenant.name }), isSelected && _jsx(Check, { fontSize: "small", color: "primary" })] }), secondary: _jsx(Typography, { variant: "caption", sx: {
-                                            color: 'text.secondary'
-                                        }, children: tenant.type === 'personal' ? 'Your personal data' : 'Group workspace' }) })] }, tenant.id));
-                    }), tenants.length === 0 && !loading && (_jsx(MenuItem, { disabled: true, children: _jsx(ListItemText, { primary: _jsx(Typography, { variant: "body2", sx: {
-                                    color: 'text.secondary'
-                                }, children: "No contexts available" }) }) }))] })] }));
+                                mx: 0.5,
+                                py: 1.25,
+                                borderRadius: 2,
+                                minHeight: TOUCH_TARGET,
+                                color: isSelected ? brand.violetInk : ink.body,
+                                '&.Mui-selected': { backgroundColor: `${brand.violetInk}14`, color: brand.violetInk },
+                                '&.Mui-selected:hover': { backgroundColor: `${brand.violetInk}20` },
+                                '&:hover': { backgroundColor: surface.sunken }
+                            }, children: [_jsx(ListItemIcon, { sx: { color: 'inherit', minWidth: 36 }, children: getIcon(tenant.type) }), _jsx(ListItemText, { primary: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }, children: [_jsx(Typography, { variant: "body2", noWrap: true, sx: { fontWeight: isSelected ? 700 : 500 }, children: tenant.type === 'personal' ? 'Personal' : tenant.name }), isSelected && _jsx(Check, { fontSize: "small", sx: { color: 'inherit' } })] }), secondary: _jsx(Typography, { variant: "caption", sx: { color: ink.muted }, children: tenant.type === 'personal' ? 'Your personal data' : 'Group workspace' }) })] }, tenant.id));
+                    }), tenants.length === 0 && !loading && (_jsx(MenuItem, { disabled: true, children: _jsx(ListItemText, { primary: _jsx(Typography, { variant: "body2", sx: { color: ink.muted }, children: "No contexts available" }) }) }))] })] }));
 };
 export default TenantSelector;

package/dist/components/tenant/useTenant.d.ts

@@ -12,4 +12,4 @@ export interface UseTenantResult {
  * Custom hook for managing tenant selection
  * Handles both personal account and group contexts
  */
-export declare const useTenant: (groupApiUrl: string, userEmail?: string) => UseTenantResult;
+export declare const useTenant: (groupApiUrl: string, userId?: string) => UseTenantResult;

package/dist/components/tenant/useTenant.js

@@ -7,6 +7,47 @@ export { TenantProvider, useTenantListener, useTenantContext };
 // Owned here, but declared in frontend-core so `logout()` can clear it — see
 // the note on session-scoped storage there.
 const STORAGE_KEY = TENANT_STORAGE_KEY;
+/**
+ * Which context each account last worked in, keyed by user id.
+ *
+ * Deliberately *not* in SESSION_SCOPED_KEYS: `logout()` clears the active
+ * selection above, which is right — `useTenantFilter` reads that key
+ * synchronously with no idea who is signed in, so leaving a group id there
+ * across a sign-out is what sent the next account's requests out with a
+ * groupId it is not a member of. This is the other half: a preference, per
+ * account, that survives a sign-out so signing back in returns you to the
+ * group you were working in rather than dropping you on Personal every time.
+ *
+ * Keyed by email rather than stamped with one, so a second account signing in
+ * on the same browser reads its own entry or none, never someone else's.
+ */
+const LAST_TENANT_KEY = 'lastTenantByUser';
+const readLastTenants = () => {
+    try {
+        const raw = localStorage.getItem(LAST_TENANT_KEY);
+        return raw ? JSON.parse(raw) : {};
+    }
+    catch (err) {
+        logger.warn('Failed to read the last tenant per account', { error: err });
+        return {};
+    }
+};
+/** The context this account was last in, or null for an account with no history. */
+const loadLastTenant = (userId) => {
+    if (!userId)
+        return null;
+    return readLastTenants()[userId] ?? null;
+};
+const rememberLastTenant = (tenant, userId) => {
+    if (!userId)
+        return;
+    try {
+        localStorage.setItem(LAST_TENANT_KEY, JSON.stringify({ ...readLastTenants(), [userId]: tenant }));
+    }
+    catch (err) {
+        logger.warn('Failed to remember the last tenant', { error: err });
+    }
+};
 /** The stamp is storage bookkeeping; consumers see a plain TenantOption. */
 const toOption = ({ id, name, type }) => ({ id, name, type });
 // Global cache to prevent multiple simultaneous requests across all hook instances
@@ -19,12 +60,12 @@ const CACHE_DURATION = 30000; // 30 seconds
 // user as well as URL: the cache outlives a sign-out, and handing the incoming
 // account the previous one's group list is how a stale selection gets
 // "validated" and survives.
-const fetchGroupsGlobally = async (groupApiUrl, userEmail) => {
+const fetchGroupsGlobally = async (groupApiUrl, userId) => {
     requestCounter++;
     logger.debug('fetchGroupsGlobally called', { requestNumber: requestCounter, groupApiUrl });
     // Check if we have a valid cached request for the same API URL and user
     const now = Date.now();
-    const cacheKey = `${userEmail ?? ''}|${groupApiUrl}`;
+    const cacheKey = `${userId ?? ''}|${groupApiUrl}`;
     if (globalGroupsFetchCache &&
         globalGroupsCacheKey === cacheKey &&
         now - globalGroupsCacheTimestamp < CACHE_DURATION) {
@@ -98,7 +139,7 @@ const fetchGroupsGlobally = async (groupApiUrl, userEmail) => {
  * Custom hook for managing tenant selection
  * Handles both personal account and group contexts
  */
-export const useTenant = (groupApiUrl, userEmail) => {
+export const useTenant = (groupApiUrl, userId) => {
     const [selectedTenant, setSelectedTenantState] = useState(null);
     const [availableTenants, setAvailableTenants] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -120,20 +161,22 @@ export const useTenant = (groupApiUrl, userEmail) => {
     // Save tenant selection to localStorage, stamped with the current account
     const saveTenant = useCallback((tenant) => {
         try {
-            const stored = { ...tenant, userEmail };
+            const stored = { ...tenant, userId };
             localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
         }
         catch (err) {
             logger.warn('Failed to save tenant selection', { error: err });
         }
-    }, [userEmail]);
+        // Outlives the sign-out that clears the line above.
+        rememberLastTenant(tenant, userId);
+    }, [userId]);
     // Fetch available groups from API using user authentication
     const fetchGroups = useCallback(async () => {
-        return fetchGroupsGlobally(groupApiUrl, userEmail);
-    }, [groupApiUrl, userEmail]);
+        return fetchGroupsGlobally(groupApiUrl, userId);
+    }, [groupApiUrl, userId]);
     // Refresh tenants list
     const refreshTenants = useCallback(async () => {
-        if (!userEmail) {
+        if (!userId) {
             setLoading(false);
             return;
         }
@@ -155,22 +198,35 @@ export const useTenant = (groupApiUrl, userEmail) => {
             // A selection made by a different account is not ours to keep, even if
             // this account happens to belong to that group too — an unstamped one
             // predates this check and is validated by membership alone.
-            const belongsToThisUser = !savedTenant?.userEmail || savedTenant.userEmail === userEmail;
+            const belongsToThisUser = !savedTenant?.userId || savedTenant.userId === userId;
             const stillAMember = allTenants.some((t) => t.id === savedTenant?.id);
             if (savedTenant && belongsToThisUser && stillAMember) {
                 setSelectedTenantState(toOption(savedTenant));
             }
             else {
-                // Fall back to personal: the saved tenant is gone, or was someone else's
-                setSelectedTenantState(personalTenant);
-                saveTenant(personalTenant);
+                // No active selection this account can use. Before falling back to
+                // Personal, see where this account was last working: a sign-out clears
+                // the active key, and without this every sign-in landed on Personal
+                // however long you had been in a group.
+                const lastUsed = loadLastTenant(userId);
+                const restorable = lastUsed && lastUsed.type === 'group' && allTenants.some((tenant) => tenant.id === lastUsed.id)
+                    ? lastUsed
+                    : null;
+                const next = restorable ?? personalTenant;
+                setSelectedTenantState(next);
+                saveTenant(next);
                 // Sibling components read the raw storage value synchronously on mount
                 // (useTenantFilter), so by now they have already fired their requests
-                // against the discarded groupId and are showing 403s. Reload for the
-                // same reason switching tenant by hand reloads — it is the only way
-                // this app re-reads the context. Storage now says personal, so the
+                // against whatever storage said a moment ago — the discarded groupId,
+                // or nothing at all where we have just restored one. Reload for the
+                // same reason switching tenant by hand reloads: it is the only way
+                // this app re-reads the context. Storage now agrees with state, so the
                 // next pass takes the branch above and this does not loop.
-                if (savedTenant?.type === 'group') {
+                if (restorable) {
+                    logger.debug('Restored the context this account last used', { name: restorable.name });
+                    window.location.reload();
+                }
+                else if (savedTenant?.type === 'group') {
                     logger.debug('Discarded a tenant selection this account cannot use; reloading');
                     window.location.reload();
                 }
@@ -197,7 +253,7 @@ export const useTenant = (groupApiUrl, userEmail) => {
         finally {
             setLoading(false);
         }
-    }, [userEmail, fetchGroups, loadSavedTenant, saveTenant]);
+    }, [userId, fetchGroups, loadSavedTenant, saveTenant]);
     // Set selected tenant with page reload
     const setSelectedTenant = useCallback((tenant) => {
         logger.debug('Tenant changing', { to: tenant.type === 'personal' ? 'Personal' : tenant.name });

package/dist/index.d.ts

@@ -21,12 +21,14 @@ export { LoginButton } from './components/LoginButton';
 export { NotificationsMenu } from './components/NotificationsMenu/NotificationsMenu';
 export { AuthHeader } from './components/AuthHeader';
 export { AppLayout } from './components/AppLayout';
+export { SectionBar } from './components/SectionBar';
 export { UsageMeter, formatBytes, useEntitlements } from './components/UsageMeter';
 export { TenantSelector, TenantProvider, useTenant, useTenantListener, useTenantContext, useTenantFilter } from './components/tenant';
 export type { LoaderProps } from './components/Loader';
 export type { ErrorPageProps } from './components/ErrorPage';
 export type { AppErrorBoundaryProps } from './components/AppErrorBoundary';
 export type { AppLayoutProps } from './components/AppLayout';
+export type { SectionBarProps, SectionBarItem } from './components/SectionBar';
 export type { UnauthorizedPageProps } from './components/UnauthorizedPage';
 export type { ProtectedRouteProps, ProtectedRouteAuthService } from './components/ProtectedRoute';
 export type { LoginButtonProps } from './components/LoginButton';
@@ -37,4 +39,4 @@ export type { UsageMeterProps, UseEntitlementsResult } from './components/UsageM
 export { createConfigProvider } from './config/createConfigProvider';
 export type { CreateConfigProviderOptions } from './config/createConfigProvider';
 export { toOrigin } from './routing';
-export { brand, ink, surface, gradient, moduleAccent, wordmark, glass, glassInteractive, brandButton, section, gutter, gutterSx, TOUCH_TARGET, PHONE, createTumbalandTheme, tumbalandTheme, TUMBALAND_COLORS } from './theme';
+export { brand, ink, surface, gradient, moduleAccent, wordmark, glass, glassInteractive, chrome, brandButton, section, gutter, gutterSx, TOUCH_TARGET, PHONE, createTumbalandTheme, tumbalandTheme, TUMBALAND_COLORS } from './theme';

package/dist/index.js

@@ -29,6 +29,7 @@ export { LoginButton } from './components/LoginButton';
 export { NotificationsMenu } from './components/NotificationsMenu/NotificationsMenu';
 export { AuthHeader } from './components/AuthHeader';
 export { AppLayout } from './components/AppLayout';
+export { SectionBar } from './components/SectionBar';
 // Entitlements: the usage bar and the hook that feeds it
 export { UsageMeter, formatBytes, useEntitlements } from './components/UsageMeter';
 // Tenant selection: provider, selector, and hooks shared across domain frontends
@@ -39,4 +40,4 @@ export { createConfigProvider } from './config/createConfigProvider';
 export { toOrigin } from './routing';
 // Theme: the palette, the MUI theme built from it, and the raw tokens for the
 // places that have to name a colour outside a `sx` prop.
-export { brand, ink, surface, gradient, moduleAccent, wordmark, glass, glassInteractive, brandButton, section, gutter, gutterSx, TOUCH_TARGET, PHONE, createTumbalandTheme, tumbalandTheme, TUMBALAND_COLORS } from './theme';
+export { brand, ink, surface, gradient, moduleAccent, wordmark, glass, glassInteractive, chrome, brandButton, section, gutter, gutterSx, TOUCH_TARGET, PHONE, createTumbalandTheme, tumbalandTheme, TUMBALAND_COLORS } from './theme';

package/dist/theme/index.d.ts

@@ -1,2 +1,2 @@
-export { brand, ink, surface, gradient, moduleAccent, wordmark, glass, glassInteractive, brandButton, section, gutter, TOUCH_TARGET, PHONE } from './tokens';
+export { brand, ink, surface, gradient, moduleAccent, wordmark, glass, glassInteractive, chrome, brandButton, section, gutter, TOUCH_TARGET, PHONE } from './tokens';
 export { createTumbalandTheme, tumbalandTheme, TUMBALAND_COLORS, gutterSx } from './createTumbalandTheme';

package/dist/theme/index.js

@@ -1,2 +1,2 @@
-export { brand, ink, surface, gradient, moduleAccent, wordmark, glass, glassInteractive, brandButton, section, gutter, TOUCH_TARGET, PHONE } from './tokens';
+export { brand, ink, surface, gradient, moduleAccent, wordmark, glass, glassInteractive, chrome, brandButton, section, gutter, TOUCH_TARGET, PHONE } from './tokens';
 export { createTumbalandTheme, tumbalandTheme, TUMBALAND_COLORS, gutterSx } from './createTumbalandTheme';

package/dist/theme/tokens.d.ts

@@ -79,7 +79,7 @@ export declare const moduleAccent: {
     readonly journal: "#e11d48";
     readonly album: "#2563eb";
     readonly money: "#15803d";
-    readonly profile: "#0f172a";
+    readonly profile: "#d61f92";
     readonly groups: "#7c3aed";
     readonly billing: "#4f46e5";
 };
@@ -114,6 +114,23 @@ export declare const glass: {
     readonly border: "1px solid rgba(255,255,255,0.7)";
     readonly boxShadow: "0 10px 30px -22px rgba(31,38,135,0.5)";
 };
+/**
+ * The frosted chrome around the content: the navigation rail, the tab bar under
+ * it on phones, and the header bar above it.
+ *
+ * Named once because the three meet at a corner. They each had their own
+ * rgba white and their own blur, so the seam between the rail and the bar it
+ * touches was visible as a faint step in the tint.
+ *
+ * Not `glass`: that is the card, which is rounded and has a light border of its
+ * own. A full-height rail with a 28px radius and a white outline is a card the
+ * page happens to be next to.
+ */
+export declare const chrome: {
+    readonly background: "rgba(255,255,255,0.78)";
+    readonly backdropFilter: "blur(14px) saturate(150%)";
+    readonly WebkitBackdropFilter: "blur(14px) saturate(150%)";
+};
 /** A card that responds to being pointed at. `accent` tints the lifted shadow. */
 export declare const glassInteractive: (accent?: string) => {
     readonly transition: "transform .2s ease, box-shadow .2s ease";

package/dist/theme/tokens.js

@@ -82,7 +82,10 @@ export const moduleAccent = {
     journal: '#e11d48',
     album: '#2563eb',
     money: '#15803d',
-    profile: ink.strong,
+    // The identity pink, in its readable form. This was `ink.strong`, which is
+    // a text colour: as the tint behind Profile's current section it drew a grey
+    // pill in the one place the product's own colour belongs.
+    profile: brand.pinkInk,
     groups: brand.violetInk,
     billing: '#4f46e5'
 };
@@ -117,6 +120,23 @@ export const glass = {
     border: '1px solid rgba(255,255,255,0.7)',
     boxShadow: '0 10px 30px -22px rgba(31,38,135,0.5)'
 };
+/**
+ * The frosted chrome around the content: the navigation rail, the tab bar under
+ * it on phones, and the header bar above it.
+ *
+ * Named once because the three meet at a corner. They each had their own
+ * rgba white and their own blur, so the seam between the rail and the bar it
+ * touches was visible as a faint step in the tint.
+ *
+ * Not `glass`: that is the card, which is rounded and has a light border of its
+ * own. A full-height rail with a 28px radius and a white outline is a card the
+ * page happens to be next to.
+ */
+export const chrome = {
+    background: 'rgba(255,255,255,0.78)',
+    backdropFilter: 'blur(14px) saturate(150%)',
+    WebkitBackdropFilter: 'blur(14px) saturate(150%)'
+};
 /** A card that responds to being pointed at. `accent` tints the lifted shadow. */
 export const glassInteractive = (accent = brand.purple) => ({
     ...glass,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tumbaland/frontend-core",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Shared frontend logic, components and theme for Tumbaland frontends",
   "author": "Tumbaland",
   "license": "MIT",