@tumbaland/frontend-core 1.14.0 → 1.15.0

package/dist/authService.d.ts

@@ -33,6 +33,16 @@ export declare function createAuthService(config: AuthServiceConfig): {
     /** Full profile (e.g. firstName/lastName) — only auth-service's /auth/profile has this. */
     getProfile(): Promise<User | null>;
     isAuthenticated(): Promise<boolean>;
+    /**
+     * The cached answer, without a round trip, or null when there is none.
+     *
+     * For the one caller that has to decide what to paint *before* it can
+     * await anything: a gate that starts every mount in a "checking" state
+     * flashes a spinner even when the answer has been sitting in memory for
+     * seconds. Callers that can wait use `checkAuth`, which this never
+     * replaces — it only answers "do we already know?".
+     */
+    getCachedAuth(): AuthResponse | null;
 };
 export type AuthService = ReturnType<typeof createAuthService>;
 /** The auth-related keys every front's resolved config exposes. */

package/dist/authService.js

@@ -6,7 +6,7 @@ const SHELL_AUTH_TIMEOUT_MS = 3000;
 /**
  * The shell's origin, when this app runs inside it: framed, and loaded with the
  * `embedded=1` flag the shell puts in the iframe src (see buildEmbeddedUrl in
- * @tumbaland/components). A direct visit is never embedded.
+ * @tumbaland/frontend-core). A direct visit is never embedded.
  */
 function embeddingShellOrigin(shellUrl) {
     if (typeof window === 'undefined' || window.parent === window.self || !shellUrl)
@@ -31,7 +31,7 @@ function embeddingShellOrigin(shellUrl) {
  * The answer only decides what the app shows. Every API call still carries the
  * session cookie and is checked by the service it goes to.
  *
- * Contract lives in @tumbaland/components `routing/messages` (app:auth-request
+ * Contract lives in @tumbaland/frontend-core `routing/messages` (app:auth-request
  * and shell:auth); a lower layer cannot import it, so the literals are repeated.
  */
 function askShellForAuth(shellOrigin) {
@@ -74,7 +74,7 @@ function notifyShellOfLogout() {
     if (typeof window === 'undefined' || window.parent === window.self)
         return;
     try {
-        // Contract lives in @tumbaland/components `routing/messages` — a lower
+        // Contract lives in @tumbaland/frontend-core `routing/messages` — a lower
         // layer cannot import it, so the literal is repeated here.
         window.parent.postMessage({ source: 'tumbaland-app', type: 'app:logout' }, '*');
     }
@@ -224,6 +224,21 @@ export function createAuthService(config) {
         async isAuthenticated() {
             const result = await this.checkAuth();
             return result.authenticated;
+        },
+        /**
+         * The cached answer, without a round trip, or null when there is none.
+         *
+         * For the one caller that has to decide what to paint *before* it can
+         * await anything: a gate that starts every mount in a "checking" state
+         * flashes a spinner even when the answer has been sitting in memory for
+         * seconds. Callers that can wait use `checkAuth`, which this never
+         * replaces — it only answers "do we already know?".
+         */
+        getCachedAuth() {
+            if (authCache && Date.now() - authCacheTime < AUTH_CACHE_TTL) {
+                return authCache;
+            }
+            return null;
         }
     };
 }

package/dist/components/AppErrorBoundary/AppErrorBoundary.d.ts

@@ -0,0 +1,26 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+export interface AppErrorBoundaryProps {
+    children: ReactNode;
+    /** Reported to monitoring as the errored component/app (e.g. the app name) */
+    component?: string;
+    /** Fallback title shown to the user */
+    title?: string;
+    /** Fallback message shown to the user */
+    message?: string;
+}
+interface AppErrorBoundaryState {
+    hasError: boolean;
+}
+/**
+ * Catches render-time errors anywhere below it in the tree, reports them via
+ * captureException, and shows ErrorPage instead of an unhandled blank screen.
+ * Retrying reloads the page rather than resetting local state, since a
+ * subtree that just crashed is the least trustworthy place to re-render.
+ */
+export declare class AppErrorBoundary extends Component<AppErrorBoundaryProps, AppErrorBoundaryState> {
+    state: AppErrorBoundaryState;
+    static getDerivedStateFromError(): AppErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/components/AppErrorBoundary/AppErrorBoundary.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+import { captureException } from '../../monitoring';
+import { ErrorPage } from '../ErrorPage';
+/**
+ * Catches render-time errors anywhere below it in the tree, reports them via
+ * captureException, and shows ErrorPage instead of an unhandled blank screen.
+ * Retrying reloads the page rather than resetting local state, since a
+ * subtree that just crashed is the least trustworthy place to re-render.
+ */
+export class AppErrorBoundary extends Component {
+    state = { hasError: false };
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        void captureException(error, { componentStack: errorInfo.componentStack }, { component: this.props.component });
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsx(ErrorPage, { title: this.props.title ?? 'Something went wrong', message: this.props.message ?? 'An unexpected error occurred. Please try again.' }));
+        }
+        return this.props.children;
+    }
+}

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

@@ -0,0 +1,2 @@
+export { AppErrorBoundary } from './AppErrorBoundary';
+export type { AppErrorBoundaryProps } from './AppErrorBoundary';

package/dist/components/AppErrorBoundary/index.js

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

package/dist/components/AppLayout/AppLayout.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import type { Breakpoint } from '@mui/material/styles';
+export interface AppLayoutProps {
+    children: ReactNode;
+    /** The app's own header, drawn above the content and inside the same column. */
+    header?: ReactNode;
+    /** Content width cap. Default `xl`; a single-column app (sign-in) wants `sm`. */
+    maxWidth?: Breakpoint | false;
+    /** Let the page own its horizontal padding — for a full-bleed map or gallery. */
+    disableGutters?: boolean;
+}
+/**
+ * The frame every front's pages sit in.
+ *
+ * There were five near-identical copies of this, one per app, and they had
+ * drifted: three different background gradients (two sky-blue, one indigo)
+ * against a pink product, two of them missing the `minWidth: 0` that stops a
+ * wide row dragging the whole page sideways on a phone, and each with its own
+ * idea of vertical padding. Opening a module from the shell changed the
+ * backdrop under it, which is the one thing the iframe seam needed hidden.
+ *
+ * The safe-area insets are no-ops while a module runs inside the shell's frame
+ * — the shell's own container already holds them, and `env()` resolves to zero
+ * in an iframe — and are what keeps a module opened directly on a phone clear
+ * of the notch and the home indicator.
+ */
+export declare function AppLayout({ children, header, maxWidth, disableGutters }: AppLayoutProps): import("react").JSX.Element;

package/dist/components/AppLayout/AppLayout.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import { surface } from '../../theme/tokens';
+/**
+ * The frame every front's pages sit in.
+ *
+ * There were five near-identical copies of this, one per app, and they had
+ * drifted: three different background gradients (two sky-blue, one indigo)
+ * against a pink product, two of them missing the `minWidth: 0` that stops a
+ * wide row dragging the whole page sideways on a phone, and each with its own
+ * idea of vertical padding. Opening a module from the shell changed the
+ * backdrop under it, which is the one thing the iframe seam needed hidden.
+ *
+ * The safe-area insets are no-ops while a module runs inside the shell's frame
+ * — the shell's own container already holds them, and `env()` resolves to zero
+ * in an iframe — and are what keeps a module opened directly on a phone clear
+ * of the notch and the home indicator.
+ */
+export function AppLayout({ children, header, maxWidth = 'xl', disableGutters = false }) {
+    return (_jsx(Box, { sx: {
+            minHeight: '100dvh',
+            background: surface.page,
+            backgroundAttachment: 'fixed',
+            display: 'flex',
+            // A flex item otherwise grows to fit its widest content, so one wide
+            // row anywhere on a page widened the app past the edge of the screen.
+            '& > *': { minWidth: 0 }
+        }, children: _jsxs(Box, { sx: {
+                flex: 1,
+                minWidth: 0,
+                display: 'flex',
+                flexDirection: 'column',
+                pt: 'env(safe-area-inset-top)',
+                pb: 'env(safe-area-inset-bottom)',
+                pl: 'env(safe-area-inset-left)',
+                pr: 'env(safe-area-inset-right)'
+            }, children: [header, _jsx(Container, { maxWidth: maxWidth, disableGutters: disableGutters, sx: {
+                        flex: 1,
+                        minWidth: 0,
+                        // Pages set their own vertical rhythm. 32px here on top of theirs
+                        // was dead space above every page on a phone.
+                        py: { xs: 1.5, sm: 3 }
+                    }, children: children })] }) }));
+}

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

@@ -0,0 +1,2 @@
+export { AppLayout } from './AppLayout';
+export type { AppLayoutProps } from './AppLayout';

package/dist/components/AppLayout/index.js

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

package/dist/components/AuthHeader/AuthHeader.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface AuthHeaderUser {
+    name: string;
+    email: string;
+    picture?: string;
+}
+export interface AuthHeaderNavigationItem {
+    label: string;
+    path: string;
+    icon?: React.ElementType;
+}
+export interface AuthHeaderTenantOption {
+    id: string;
+    name: string;
+    type: 'personal' | 'group';
+    isSelected?: boolean;
+}
+export interface AuthHeaderTenantSelectorProps {
+    selectedTenant: AuthHeaderTenantOption | null;
+    tenants: AuthHeaderTenantOption[];
+    onTenantChange: (tenant: AuthHeaderTenantOption) => void;
+    loading?: boolean;
+    error?: string | null;
+    sx?: SxProps<Theme>;
+}
+export interface AuthHeaderProps {
+    isLoading: boolean;
+    isAuthenticated: boolean;
+    user: AuthHeaderUser | null;
+    onLogin: () => void;
+    onLogout: () => void | Promise<void>;
+    navigationItems: AuthHeaderNavigationItem[];
+    /** Base URL of the shell app; account menu links (Profile/Groups/Billing) are built from it. */
+    shellFrontUrl?: string;
+    /**
+     * Each consuming frontend already owns a byte-identical TenantSelector (backed by its own
+     * useTenant hook, localStorage, and group-API fetch). Moving that into this package is out of
+     * scope for this extraction, so it's injected here rather than imported directly.
+     */
+    TenantSelectorComponent: React.ComponentType<AuthHeaderTenantSelectorProps>;
+    selectedTenant: AuthHeaderTenantOption | null;
+    availableTenants: AuthHeaderTenantOption[];
+    tenantsLoading?: boolean;
+    tenantsError?: string | null;
+    onTenantChange: (tenant: AuthHeaderTenantOption) => void;
+    /** Placeholder until real notification counts are wired up per app. */
+    notificationCount?: number;
+    /**
+     * Running inside the shell's iframe. The shell's navigation already carries
+     * the account menu and sign-out there, so this header keeps to the app's own
+     * sections and group picker instead of drawing a second set. Read from the
+     * frame's URL when not given.
+     */
+    embedded?: boolean;
+}
+export declare function AuthHeader({ isLoading, isAuthenticated, user, onLogin, onLogout, navigationItems, shellFrontUrl, TenantSelectorComponent, selectedTenant, availableTenants, tenantsLoading, tenantsError, onTenantChange, notificationCount, embedded }: AuthHeaderProps): React.JSX.Element;

package/dist/components/AuthHeader/AuthHeader.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AppBar, Toolbar, Typography, Button, Avatar, Box, Menu, MenuItem, IconButton, CircularProgress, Divider, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { AccountCircle, Logout, Person, Groups, Payment } from '@mui/icons-material';
+import { useNavigate, useLocation } from 'react-router';
+import { NotificationsMenu } from '../NotificationsMenu/NotificationsMenu';
+import { LoginButton } from '../LoginButton';
+// A nav item's path of '/' would match every route via startsWith, so it needs an exact-match
+// special case; every other item is matched by prefix so nested routes (e.g. album-front's
+// /albums/:albumId) still highlight their parent nav entry.
+function isNavItemActive(pathname, itemPath) {
+    if (itemPath === '/') {
+        return pathname === '/';
+    }
+    return pathname.startsWith(itemPath);
+}
+export function AuthHeader({ isLoading, isAuthenticated, user, onLogin, onLogout, navigationItems, shellFrontUrl, TenantSelectorComponent, selectedTenant, availableTenants, tenantsLoading = false, tenantsError = null, onTenantChange, notificationCount = 0, embedded }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [notificationAnchorEl, setNotificationAnchorEl] = useState(null);
+    const [mobileMenuAnchor, setMobileMenuAnchor] = useState(null);
+    const navigate = useNavigate();
+    const location = useLocation();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    // Nothing infers this any more: the iframe flag it used to fall back on was
+    // set by the shell's frame `src`, and there is no frame. A caller that wants
+    // the header's own account menu hidden says so.
+    const isEmbedded = embedded ?? false;
+    const handleMenuOpen = (event) => setAnchorEl(event.currentTarget);
+    const handleMenuClose = () => setAnchorEl(null);
+    const handleNotificationClick = (event) => setNotificationAnchorEl(event.currentTarget);
+    const handleNotificationClose = () => setNotificationAnchorEl(null);
+    const handleMobileMenuOpen = (event) => setMobileMenuAnchor(event.currentTarget);
+    const handleMobileMenuClose = () => setMobileMenuAnchor(null);
+    const handleLogout = async () => {
+        await onLogout();
+        handleMenuClose();
+    };
+    const renderAuthSection = () => {
+        if (isLoading) {
+            return (_jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: _jsx(CircularProgress, { size: 20, color: "inherit" }) }));
+        }
+        if (isAuthenticated && user) {
+            return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: { xs: 0.5, sm: 1 } }, children: [_jsx(NotificationsMenu, { onClick: handleNotificationClick, anchorEl: notificationAnchorEl, onClose: handleNotificationClose, notificationCount: notificationCount }), _jsx(IconButton, { onClick: handleMenuOpen, size: "small", edge: "end", "aria-label": "account menu", "aria-controls": "account-menu", "aria-haspopup": "true", color: "inherit", sx: {
+                            padding: { xs: 0.5, sm: 1 }
+                        }, children: user.picture ? (_jsx(Avatar, { src: user.picture, alt: user.name, sx: { width: { xs: 24, sm: 32 }, height: { xs: 24, sm: 32 } } })) : (_jsx(AccountCircle, { sx: { fontSize: { xs: 20, sm: 24 } } })) }), _jsxs(Menu, { id: "account-menu", anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, slotProps: {
+                            list: {
+                                'aria-labelledby': 'account-button'
+                            }
+                        }, children: [_jsx(MenuItem, { disabled: true, children: _jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'flex-start'
+                                    }, children: [_jsx(Typography, { variant: "body2", sx: {
+                                                fontWeight: 'bold'
+                                            }, children: user.name }), _jsx(Typography, { variant: "caption", sx: {
+                                                color: 'text.secondary'
+                                            }, children: user.email })] }) }), _jsx(Divider, {}), _jsxs(MenuItem, { onClick: () => window.top?.location && (window.top.location.href = `${shellFrontUrl}/account`), children: [_jsx(Person, { fontSize: "small", sx: { mr: 1 } }), "Profile"] }), _jsxs(MenuItem, { onClick: () => window.top?.location && (window.top.location.href = `${shellFrontUrl}/groups`), children: [_jsx(Groups, { fontSize: "small", sx: { mr: 1 } }), "Groups"] }), _jsxs(MenuItem, { onClick: () => window.top?.location && (window.top.location.href = `${shellFrontUrl}/payments`), children: [_jsx(Payment, { fontSize: "small", sx: { mr: 1 } }), "Billing"] }), _jsx(Divider, {}), _jsxs(MenuItem, { onClick: handleLogout, children: [_jsx(Logout, { fontSize: "small", sx: { mr: 1 } }), "Logout"] })] })] }));
+        }
+        return _jsx(LoginButton, { onClick: onLogin });
+    };
+    return (_jsx(AppBar, { position: "static", elevation: 0, sx: {
+            background: 'transparent',
+            color: '#222',
+            boxShadow: 'none',
+            borderBottom: '1px solid rgba(0,0,0,0.1)'
+        }, children: _jsx(Toolbar, { children: isMobile ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: { flexGrow: 1, display: 'flex', alignItems: 'center', minHeight: 56, minWidth: 0 }, children: _jsx(Button, { color: "inherit", onClick: handleMobileMenuOpen, endIcon: _jsx(ExpandMoreIcon, { sx: { fontSize: { xs: 16, sm: 20 } } }), sx: {
+                                fontWeight: 500,
+                                textTransform: 'none',
+                                background: 'none',
+                                px: { xs: 0.5, sm: 1.5 },
+                                py: { xs: 0.5, sm: 1 },
+                                minWidth: 0,
+                                borderRadius: 2,
+                                '&:hover': { background: 'rgba(0,0,0,0.04)' },
+                                maxWidth: { xs: '50vw', sm: '70vw' },
+                                overflow: 'hidden',
+                                whiteSpace: 'nowrap',
+                                textOverflow: 'ellipsis',
+                                fontSize: { xs: '0.875rem', sm: '1rem' }
+                            }, children: (() => {
+                                let bestMatch = null;
+                                let bestLength = -1;
+                                for (const item of navigationItems) {
+                                    if (item.path === '/' && location.pathname === '/' && bestLength < 1) {
+                                        bestMatch = item;
+                                        bestLength = 1;
+                                    }
+                                    else if (item.path !== '/' &&
+                                        location.pathname.startsWith(item.path) &&
+                                        item.path.length > bestLength) {
+                                        bestMatch = item;
+                                        bestLength = item.path.length;
+                                    }
+                                }
+                                return bestMatch ? bestMatch.label : navigationItems[0]?.label;
+                            })() }) }), isAuthenticated && user && (_jsx(Box, { sx: { mx: { xs: 1, sm: 1.5 }, flexShrink: 0 }, children: _jsx(TenantSelectorComponent, { selectedTenant: selectedTenant, tenants: availableTenants, onTenantChange: onTenantChange, loading: tenantsLoading, error: tenantsError, sx: {
+                                minWidth: { xs: 80, sm: 120 },
+                                '& .MuiSelect-select': {
+                                    fontSize: { xs: '0.7rem', sm: '0.875rem' },
+                                    padding: { xs: '2px 6px', sm: '6px 12px' }
+                                }
+                            } }) })), !isEmbedded && _jsx(Box, { sx: { flexGrow: 0, ml: { xs: 1, sm: 2 } }, children: renderAuthSection() }), _jsx(Menu, { anchorEl: mobileMenuAnchor, open: Boolean(mobileMenuAnchor), onClose: handleMobileMenuClose, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, children: navigationItems.map((item) => {
+                            const Icon = item.icon;
+                            const isActive = isNavItemActive(location.pathname, item.path);
+                            return (_jsxs(MenuItem, { selected: isActive, onClick: () => {
+                                    navigate(item.path);
+                                    handleMobileMenuClose();
+                                }, children: [Icon && _jsx(Icon, { sx: { mr: 1 } }), item.label] }, item.path));
+                        }) })] })) : (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    width: '100%',
+                    justifyContent: 'space-between'
+                }, children: [_jsx(Box, { sx: { display: 'flex', gap: 1, alignItems: 'center' }, children: navigationItems.map((item) => {
+                            const isActive = isNavItemActive(location.pathname, item.path);
+                            const buttonSx = {
+                                fontWeight: isActive ? 700 : 500,
+                                textTransform: 'none',
+                                background: 'none',
+                                borderRadius: 2,
+                                px: 2,
+                                color: isActive ? 'primary.main' : 'inherit',
+                                '&:hover': { background: 'rgba(0,0,0,0.04)' }
+                            };
+                            const Icon = item.icon;
+                            return (_jsx(Button, { onClick: () => navigate(item.path), sx: buttonSx, startIcon: Icon ? _jsx(Icon, { sx: { mr: 1 } }) : undefined, children: item.label }, item.path));
+                        }) }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: { xs: 1, sm: 2 }
+                        }, children: [isAuthenticated && user && (_jsx(TenantSelectorComponent, { selectedTenant: selectedTenant, tenants: availableTenants, onTenantChange: onTenantChange, loading: tenantsLoading, error: tenantsError })), !isEmbedded && renderAuthSection()] })] })) }) }));
+}

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

@@ -0,0 +1,2 @@
+export { AuthHeader } from './AuthHeader';
+export type { AuthHeaderProps, AuthHeaderUser, AuthHeaderNavigationItem, AuthHeaderTenantOption, AuthHeaderTenantSelectorProps } from './AuthHeader';

package/dist/components/AuthHeader/index.js

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

package/dist/components/ErrorPage/ErrorPage.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the ErrorPage component
+ */
+export interface ErrorPageProps {
+    /** The main error title to display */
+    title?: string;
+    /** The error message content (can be text or React elements) */
+    message?: string | ReactNode;
+    /** Custom icon to display (defaults to error icon) */
+    icon?: ReactNode;
+    /** Whether to show the retry button */
+    showRetry?: boolean;
+    /** Callback function when retry button is clicked */
+    onRetry?: () => void;
+}
+export declare function ErrorPage({ title, message, icon, showRetry, onRetry }: ErrorPageProps): import("react").JSX.Element;

package/dist/components/ErrorPage/ErrorPage.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography, Button } from '@mui/material';
+import ErrorOutlinedIcon from '@mui/icons-material/ErrorOutlined';
+export function ErrorPage({ title = 'Configuration Error', message = (_jsxs(_Fragment, { children: ["Failed to load application configuration.", _jsx("br", {}), "Please check your network connection and try again."] })), icon = _jsx(ErrorOutlinedIcon, { sx: { fontSize: 80, color: 'error.main' } }), showRetry = true, onRetry = () => window.location.reload() }) {
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100vh',
+            gap: 2
+        }, children: [icon, _jsx(Typography, { variant: "h4", color: "error", gutterBottom: true, sx: {
+                    fontWeight: 600
+                }, children: title }), _jsx(Typography, { variant: "body1", sx: {
+                    color: 'text.secondary',
+                    textAlign: 'center',
+                    mb: showRetry ? 2 : 0
+                }, children: message }), showRetry && (_jsx(Button, { variant: "contained", color: "primary", onClick: onRetry, children: "Retry" }))] }));
+}

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

@@ -0,0 +1,2 @@
+export { ErrorPage } from './ErrorPage';
+export type { ErrorPageProps } from './ErrorPage';

package/dist/components/ErrorPage/index.js

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

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Props for the Loader component
+ */
+export interface LoaderProps {
+    /** The loading message to display below the spinner */
+    message?: string;
+    /** Size of the loading spinner in pixels */
+    size?: number;
+    /** Whether to take full viewport height or auto height */
+    fullHeight?: boolean;
+}
+export declare function Loader({ message, size, fullHeight }: LoaderProps): import("react").JSX.Element;

package/dist/components/Loader/Loader.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CircularProgress, Typography } from '@mui/material';
+export function Loader({ message = '', size = 48, fullHeight = true }) {
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: fullHeight ? '100vh' : 'auto',
+            gap: 2,
+            py: fullHeight ? 0 : 8
+        }, children: [_jsx(CircularProgress, { size: size }), _jsx(Typography, { variant: "body1", sx: {
+                    color: 'text.secondary'
+                }, children: message })] }));
+}

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

@@ -0,0 +1,2 @@
+export { Loader } from './Loader';
+export type { LoaderProps } from './Loader';

package/dist/components/Loader/index.js

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

package/dist/components/LoginButton/LoginButton.d.ts

@@ -0,0 +1,5 @@
+export interface LoginButtonProps {
+    onClick: () => void;
+    text?: string;
+}
+export declare function LoginButton({ onClick, text }: LoginButtonProps): import("react").JSX.Element;

package/dist/components/LoginButton/LoginButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+import { Login } from '@mui/icons-material';
+export function LoginButton({ onClick, text = '' }) {
+    return (_jsx(Button, { color: "inherit", onClick: onClick, startIcon: _jsx(Login, {}), size: 'large', sx: {
+            backgroundColor: 'transparent',
+            border: 'none',
+            minWidth: 'auto',
+            padding: '8px',
+            textTransform: 'none',
+            '&:hover': {
+                backgroundColor: 'rgba(255, 255, 255, 0.1)'
+            }
+        }, children: text }));
+}

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

@@ -0,0 +1,2 @@
+export { LoginButton } from './LoginButton';
+export type { LoginButtonProps } from './LoginButton';

package/dist/components/LoginButton/index.js

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

package/dist/components/NotificationsMenu/NotificationsMenu.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface NotificationsMenuProps {
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    notificationCount?: number;
+    marginRight?: number;
+}
+export declare function NotificationsMenu({ onClick, anchorEl, onClose, notificationCount, marginRight }: NotificationsMenuProps): React.JSX.Element;

package/dist/components/NotificationsMenu/NotificationsMenu.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton, Menu, MenuItem, Typography } from '@mui/material';
+import { Notifications } from '@mui/icons-material';
+export function NotificationsMenu({ onClick, anchorEl, onClose, notificationCount = 0, marginRight = 1 }) {
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: onClick, size: "small" // Changed from "large" to "small" for more compact mobile layout
+                , "aria-label": "notifications", color: "inherit", sx: {
+                    position: 'relative',
+                    mr: { xs: 0.5, sm: marginRight }, // Reduced margin on mobile
+                    padding: { xs: 0.5, sm: 1 }, // Explicit padding control for mobile
+                    '&::after': notificationCount > 0
+                        ? {
+                            content: '""',
+                            position: 'absolute',
+                            top: { xs: 6, sm: 8 }, // Adjusted notification dot position for smaller button
+                            right: { xs: 6, sm: 8 },
+                            width: { xs: 6, sm: 8 }, // Smaller notification dot on mobile
+                            height: { xs: 6, sm: 8 },
+                            borderRadius: '50%',
+                            backgroundColor: 'error.main',
+                            border: '2px solid',
+                            borderColor: 'background.paper'
+                        }
+                        : undefined
+                }, children: _jsx(Notifications, { sx: { fontSize: { xs: 20, sm: 24 } } }) }), _jsx(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: onClose, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, children: notificationCount > 0 ? (_jsx(MenuItem, { disabled: true, children: _jsxs(Typography, { variant: "body2", sx: {
+                            color: 'text.secondary'
+                        }, children: ["You have ", notificationCount, " new notification", notificationCount !== 1 ? 's' : ''] }) })) : (_jsx(MenuItem, { disabled: true, children: _jsx(Typography, { variant: "body2", sx: {
+                            color: 'text.secondary'
+                        }, children: "No new notifications" }) })) })] }));
+}

package/dist/components/ProtectedRoute/ProtectedRoute.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { type AuthService } from '../../authService';
+/** The subset of a per-app auth service that ProtectedRoute depends on. */
+export type ProtectedRouteAuthService = Pick<AuthService, 'isAuthenticated' | 'redirectToLogin'> & Partial<Pick<AuthService, 'getCachedAuth'>>;
+export interface ProtectedRouteProps {
+    children: ReactNode;
+    /**
+     * The app's auth service (from `createAuthService`). Injected per app since
+     * each front wires the shared factory to its own config.
+     */
+    authService: ProtectedRouteAuthService;
+    /** Message shown while the auth check is in flight. */
+    loadingMessage?: string;
+}
+/**
+ * Gates its children behind an authenticated session: renders a Loader while
+ * the check is in flight, UnauthorizedPage (whose login action calls the auth
+ * service's redirectToLogin) when unauthenticated or the check fails, and the
+ * children once authenticated.
+ *
+ * The first state comes from the auth service's cache when it has one, so a
+ * remount does not flash "Checking authentication..." over an answer already
+ * held in memory. The shell mounts and unmounts this every time the user
+ * crosses between its own pages and a framed module — which, on a phone, is
+ * every other tap on the tab bar — and each of those was a spinner for an
+ * answer that never changed. The check below still runs either way; the cache
+ * only decides what is painted while it does.
+ *
+ * Consolidated from seven per-front copies that had drifted into two
+ * behaviourally different variants (one polling `checkAuth`, one
+ * `isAuthenticated`, with different initial/loading semantics).
+ */
+export declare function ProtectedRoute({ children, authService, loadingMessage }: ProtectedRouteProps): import("react").JSX.Element;