@tumbaland/frontend-core 1.14.1 → 1.16.0

package/dist/components/tenant/TenantSelector.js

@@ -0,0 +1,88 @@
+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';
+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) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleTenantSelect = (tenant) => {
+        onTenantChange(tenant);
+        handleClose();
+    };
+    const getDisplayName = (tenant) => {
+        if (!tenant)
+            return 'Choose context';
+        return tenant.type === 'personal' ? 'Personal' : tenant.name;
+    };
+    const getIcon = (type) => {
+        return type === 'personal' ? _jsx(PersonOutlined, { fontSize: "small" }) : _jsx(Groups, { fontSize: "small" });
+    };
+    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, "aria-haspopup": "menu", "aria-expanded": isOpen, endIcon: _jsx(ExpandMore, {}), startIcon: selectedTenant ? getIcon(selectedTenant.type) : _jsx(PersonOutlined, { fontSize: "small" }), sx: {
+                    textTransform: 'none',
+                    fontWeight: 600,
+                    borderRadius: 999,
+                    px: compact ? 1.25 : 1.75,
+                    minHeight: compact ? 38 : TOUCH_TARGET,
+                    minWidth: 0,
+                    justifyContent: 'flex-start',
+                    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': {
+                        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'
+                            }, 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: {
+                                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/index.d.ts

@@ -0,0 +1,5 @@
+export { default as TenantSelector } from './TenantSelector';
+export type { TenantOption, TenantSelectorProps } from './TenantSelector';
+export { useTenant, TenantProvider, useTenantListener, useTenantContext } from './useTenant';
+export type { UseTenantResult } from './useTenant';
+export { useTenantFilter } from './useTenantDataRefresh';

package/dist/components/tenant/index.js

@@ -0,0 +1,3 @@
+export { default as TenantSelector } from './TenantSelector';
+export { useTenant, TenantProvider, useTenantListener, useTenantContext } from './useTenant';
+export { useTenantFilter } from './useTenantDataRefresh';

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

@@ -0,0 +1,15 @@
+import { TenantOption, TenantProvider, useTenantListener, useTenantContext } from './TenantProvider';
+export { TenantProvider, useTenantListener, useTenantContext, type TenantOption };
+export interface UseTenantResult {
+    selectedTenant: TenantOption | null;
+    availableTenants: TenantOption[];
+    loading: boolean;
+    error: string | null;
+    setSelectedTenant: (tenant: TenantOption) => void;
+    refreshTenants: () => Promise<void>;
+}
+/**
+ * Custom hook for managing tenant selection
+ * Handles both personal account and group contexts
+ */
+export declare const useTenant: (groupApiUrl: string, userId?: string) => UseTenantResult;

package/dist/components/tenant/useTenant.js

@@ -0,0 +1,278 @@
+import { useState, useEffect, useCallback } from 'react';
+import { TenantProvider, useTenantListener, useTenantContext } from './TenantProvider';
+import { getCorrelationId, getSessionId, logger } from '../../monitoring';
+import { TENANT_STORAGE_KEY } from '../../sessionStorage';
+// Re-export for convenience
+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
+let globalGroupsFetchCache = null;
+let globalGroupsCacheTimestamp = 0;
+let globalGroupsCacheKey = '';
+let requestCounter = 0; // Debug counter
+const CACHE_DURATION = 30000; // 30 seconds
+// Global function to fetch groups - shared across all hook instances. Keyed by
+// 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, 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 = `${userId ?? ''}|${groupApiUrl}`;
+    if (globalGroupsFetchCache &&
+        globalGroupsCacheKey === cacheKey &&
+        now - globalGroupsCacheTimestamp < CACHE_DURATION) {
+        logger.debug('Using cached groups request', { groupApiUrl });
+        return globalGroupsFetchCache;
+    }
+    logger.debug('Making new groups API request', { groupApiUrl });
+    // Create new request and cache it
+    const fetchRequest = async () => {
+        try {
+            // Check if groupApiUrl is provided
+            if (!groupApiUrl) {
+                logger.warn('No GROUP_API_URL provided to useTenant hook');
+                return [];
+            }
+            const headers = {
+                'Content-Type': 'application/json',
+                'x-correlation-id': getCorrelationId(),
+                'x-session-id': getSessionId()
+            };
+            // Use user authentication for fetching groups; the httpOnly access_token
+            // cookie is attached automatically by the browser.
+            const response = await fetch(`${groupApiUrl}/api/groups/mine`, {
+                method: 'GET',
+                credentials: 'include',
+                headers,
+                signal: AbortSignal.timeout(5000) // 5 second timeout
+            });
+            logger.debug('Groups API response', { status: response.status, statusText: response.statusText });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch groups: ${response.status} ${response.statusText}`);
+            }
+            const data = await response.json();
+            if (!data.success) {
+                throw new Error('API returned unsuccessful response');
+            }
+            // Transform groups to tenant options
+            return data.data.map((group) => ({
+                id: group._id,
+                name: group.name,
+                type: 'group'
+            }));
+        }
+        catch (err) {
+            logger.error('Error fetching user groups', err);
+            throw err;
+        }
+    };
+    // Cache the request
+    globalGroupsFetchCache = fetchRequest();
+    globalGroupsCacheTimestamp = now;
+    globalGroupsCacheKey = cacheKey;
+    // Clear cache after request completes (success or failure). `.finally()`
+    // returns a new derived promise that rejects if the request did — nothing
+    // else observes that derived promise (callers only await the original
+    // `globalGroupsFetchCache` reference returned below), so without a no-op
+    // `.catch()` here a failed request logs as an unhandled rejection.
+    globalGroupsFetchCache
+        .finally(() => {
+        setTimeout(() => {
+            if (globalGroupsFetchCache && Date.now() - globalGroupsCacheTimestamp >= CACHE_DURATION) {
+                globalGroupsFetchCache = null;
+                globalGroupsCacheKey = '';
+            }
+        }, CACHE_DURATION);
+    })
+        .catch(() => { });
+    return globalGroupsFetchCache;
+};
+/**
+ * Custom hook for managing tenant selection
+ * Handles both personal account and group contexts
+ */
+export const useTenant = (groupApiUrl, userId) => {
+    const [selectedTenant, setSelectedTenantState] = useState(null);
+    const [availableTenants, setAvailableTenants] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Load saved tenant selection from localStorage
+    const loadSavedTenant = useCallback(() => {
+        try {
+            const saved = localStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                const tenant = JSON.parse(saved);
+                return tenant;
+            }
+        }
+        catch (err) {
+            logger.warn('Failed to load saved tenant selection', { error: err });
+        }
+        return null;
+    }, []);
+    // Save tenant selection to localStorage, stamped with the current account
+    const saveTenant = useCallback((tenant) => {
+        try {
+            const stored = { ...tenant, userId };
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
+        }
+        catch (err) {
+            logger.warn('Failed to save tenant selection', { error: err });
+        }
+        // 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, userId);
+    }, [groupApiUrl, userId]);
+    // Refresh tenants list
+    const refreshTenants = useCallback(async () => {
+        if (!userId) {
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            // Always include personal account
+            const personalTenant = {
+                id: 'personal',
+                name: 'Personal',
+                type: 'personal'
+            };
+            // Fetch groups
+            const groupTenants = await fetchGroups();
+            const allTenants = [personalTenant, ...groupTenants];
+            setAvailableTenants(allTenants);
+            // Set default selection if none exists
+            const savedTenant = loadSavedTenant();
+            // 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?.userId || savedTenant.userId === userId;
+            const stillAMember = allTenants.some((t) => t.id === savedTenant?.id);
+            if (savedTenant && belongsToThisUser && stillAMember) {
+                setSelectedTenantState(toOption(savedTenant));
+            }
+            else {
+                // 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 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 (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();
+                }
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to load contexts';
+            logger.error('Error in refreshTenants', err);
+            setError(errorMessage);
+            // The groups call failed, so we cannot tell a stale selection from a
+            // valid one. Keep showing what storage says rather than claiming
+            // "Personal" while useTenantFilter keeps sending the saved groupId —
+            // that mismatch is what made the UI look like it had switched context
+            // when it had not. TenantSelector renders the error state instead.
+            const personalTenant = {
+                id: 'personal',
+                name: 'Personal',
+                type: 'personal'
+            };
+            setAvailableTenants([personalTenant]);
+            const savedTenant = loadSavedTenant();
+            setSelectedTenantState(savedTenant ? toOption(savedTenant) : personalTenant);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [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 });
+        // Save the new tenant selection
+        saveTenant(tenant);
+        // Reload the page to refresh all data with the new context
+        logger.debug('Reloading page to apply new tenant context');
+        window.location.reload();
+    }, [saveTenant]);
+    // Initialize on mount and when user changes
+    useEffect(() => {
+        refreshTenants();
+    }, [refreshTenants]);
+    return {
+        selectedTenant,
+        availableTenants,
+        loading,
+        error,
+        setSelectedTenant,
+        refreshTenants
+    };
+};

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

@@ -0,0 +1,6 @@
+/**
+ * Hook to get current tenant ID for data filtering
+ * Returns the groupId to be used in API calls, or undefined for personal context
+ * Since we reload the page when tenant changes, this can be a simple read from localStorage
+ */
+export declare const useTenantFilter: () => string | undefined;

package/dist/components/tenant/useTenantDataRefresh.js

@@ -0,0 +1,28 @@
+import { logger } from '../../monitoring';
+import { TENANT_STORAGE_KEY } from '../../sessionStorage';
+/**
+ * Hook to get current tenant ID for data filtering
+ * Returns the groupId to be used in API calls, or undefined for personal context
+ * Since we reload the page when tenant changes, this can be a simple read from localStorage
+ */
+export const useTenantFilter = () => {
+    const selectedTenant = getTenantFromStorage();
+    // Return groupId for group context, undefined for personal context
+    return selectedTenant?.type === 'group' ? selectedTenant.id : undefined;
+};
+/**
+ * Utility to get current tenant from localStorage
+ * Used for getting tenant context without triggering re-renders
+ */
+const getTenantFromStorage = () => {
+    try {
+        const saved = localStorage.getItem(TENANT_STORAGE_KEY);
+        if (saved) {
+            return JSON.parse(saved);
+        }
+    }
+    catch (err) {
+        logger.warn('Failed to load tenant from storage', { error: err });
+    }
+    return null;
+};

package/dist/config/createConfigProvider.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { ErrorPageProps } from '../components/ErrorPage';
+export interface CreateConfigProviderOptions<TConfig extends {
+    PUBLIC_API_URL?: string;
+}> {
+    /** Passed to initMonitoring as the `service` tag. */
+    serviceName: string;
+    /** Pass `import.meta.env.DEV` from the calling app — reading `import.meta` here would not be reliably
+     *  processed by Vite once compiled into this shared, pre-built package. */
+    isDev: boolean;
+    /** Pass `import.meta.env.MODE` from the calling app, for the same reason as `isDev`. */
+    mode: string;
+    /** Builds the config from `import.meta.env.VITE_*` — must be provided by the calling app so the
+     *  `VITE_` env var reads stay in app source where Vite can statically resolve them. */
+    getDevConfig: () => TConfig;
+    /** Override the default ErrorPage props (e.g. shell-front's custom icon/title). */
+    errorPageProps?: ErrorPageProps;
+    /** Console levels to intercept in dev. Omit to use initMonitoring's own default (error + warn only). */
+    devCaptureConsoleLevels?: ('debug' | 'info' | 'warn' | 'error')[];
+    /**
+     * Where the production config lives. Defaults to `/config.json`, which a
+     * browser resolves against the *page*. A module-federation remote runs inside
+     * shell-front's page, where that is the shell's file and carries none of this
+     * app's service URLs — so remotes pass a URL on their own origin, built as
+     * `new URL('/config.json', import.meta.url).href`.
+     */
+    configUrl?: string;
+}
+/**
+ * Builds a per-front ConfigProvider instance. Each of the 8 frontends previously hand-rolled their
+ * own (8 divergent copies) — this factory keeps the dev/prod config loading, monitoring init, and
+ * loading/error UI in one place. Each app still declares its own `AppConfig` shape and reads its own
+ * `VITE_*` env vars via `getDevConfig`.
+ */
+export declare function createConfigProvider<TConfig extends {
+    PUBLIC_API_URL?: string;
+}>(options: CreateConfigProviderOptions<TConfig>): {
+    ConfigContext: import("react").Context<TConfig | null>;
+    ConfigProvider: ({ children }: {
+        children: ReactNode;
+    }) => import("react").JSX.Element;
+    getGlobalConfig: () => TConfig;
+    useConfig: () => TConfig;
+};

package/dist/config/createConfigProvider.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from 'react';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { Loader } from '../components/Loader';
+import { ErrorPage } from '../components/ErrorPage';
+import { initMonitoring, initWebVitals } from '../monitoring';
+import { tumbalandTheme } from '../theme';
+/**
+ * Builds a per-front ConfigProvider instance. Each of the 8 frontends previously hand-rolled their
+ * own (8 divergent copies) — this factory keeps the dev/prod config loading, monitoring init, and
+ * loading/error UI in one place. Each app still declares its own `AppConfig` shape and reads its own
+ * `VITE_*` env vars via `getDevConfig`.
+ */
+export function createConfigProvider(options) {
+    let globalConfig = null;
+    const ConfigContext = createContext(null);
+    function getGlobalConfig() {
+        if (!globalConfig) {
+            if (options.isDev) {
+                const fallbackConfig = options.getDevConfig();
+                console.warn('Using fallback configuration during HMR:', fallbackConfig);
+                return fallbackConfig;
+            }
+            throw new Error('Configuration not initialized. Make sure ConfigProvider is mounted.');
+        }
+        return globalConfig;
+    }
+    function ConfigProvider({ children }) {
+        // Starts from an already-loaded config: the shell mounts a remote's
+        // provider every time the user navigates into that app, and re-fetching
+        // — with a loader in between — on each visit is the reload federation is
+        // here to avoid.
+        const [config, setConfig] = useState(() => globalConfig);
+        const [error, setError] = useState(null);
+        useEffect(() => {
+            if (globalConfig) {
+                return;
+            }
+            if (options.isDev) {
+                const devConfig = options.getDevConfig();
+                console.log('Using development configuration from environment variables:', devConfig);
+                setConfig(devConfig);
+                globalConfig = devConfig;
+                initMonitoring(options.mode, {
+                    service: options.serviceName,
+                    component: 'frontend',
+                    elkUrl: devConfig.PUBLIC_API_URL ? `${devConfig.PUBLIC_API_URL}/logs` : undefined,
+                    captureConsoleLevels: options.devCaptureConsoleLevels
+                });
+                initWebVitals({ isDevelopment: true }).catch(console.error);
+                return;
+            }
+            fetch(options.configUrl ?? '/config.json')
+                .then((res) => {
+                if (!res.ok)
+                    throw new Error('Config fetch failed');
+                return res.json();
+            })
+                .then((loadedConfig) => {
+                console.log('Using production configuration from config.json:', loadedConfig);
+                setConfig(loadedConfig);
+                globalConfig = loadedConfig;
+                initMonitoring('production', {
+                    service: options.serviceName,
+                    component: 'frontend',
+                    elkUrl: loadedConfig.PUBLIC_API_URL ? `${loadedConfig.PUBLIC_API_URL}/logs` : undefined
+                });
+                initWebVitals({ isDevelopment: false }).catch(console.error);
+            })
+                .catch((err) => {
+                console.error('Configuration load error:', err);
+                setError(err.message);
+            });
+        }, []);
+        if (error) {
+            return _jsx(ErrorPage, { ...options.errorPageProps });
+        }
+        if (!config) {
+            return _jsx(Loader, {});
+        }
+        const content = (_jsxs(_Fragment, { children: [_jsx(CssBaseline, {}), children] }));
+        return (_jsx(ConfigContext.Provider, { value: config, children: _jsx(ThemeProvider, { theme: tumbalandTheme, children: content }) }));
+    }
+    function useConfig() {
+        const config = useContext(ConfigContext);
+        if (!config) {
+            throw new Error('useConfig must be used within a ConfigProvider');
+        }
+        return config;
+    }
+    return { ConfigContext, ConfigProvider, getGlobalConfig, useConfig };
+}

package/dist/federation.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Module-federation settings every Tumbaland front has to agree on.
+ *
+ * shell-front is the host; journal, album, money, account, groups and billing
+ * are remotes it loads at runtime from their own origins. This replaces the
+ * iframe-per-module shell: an iframe meant each module switch threw away a
+ * whole JS context and booted a new one, which is why opening a module
+ * re-checked the session, re-fetched its data and lost whatever the previous
+ * one had on screen.
+ *
+ * The shared singletons are the libraries that hold React context or global
+ * state. A remote running its own copy of React breaks hooks outright, and its
+ * own copy of the router, Emotion or React Query reads an empty context instead
+ * of the one the host's providers filled — so every app must take the single
+ * copy the host loaded. The list lives here rather than in seven vite configs
+ * because drift between those copies is precisely that failure.
+ *
+ * Plain data with no React imports: each `vite.config.mts` loads it in Node.
+ */
+export declare const TUMBALAND_FEDERATION_SHARED: {
+    react: {
+        singleton: boolean;
+    };
+    'react-dom': {
+        singleton: boolean;
+    };
+    'react-router': {
+        singleton: boolean;
+    };
+    '@emotion/react': {
+        singleton: boolean;
+    };
+    '@emotion/styled': {
+        singleton: boolean;
+    };
+    '@mui/material': {
+        singleton: boolean;
+    };
+    '@tanstack/react-query': {
+        singleton: boolean;
+    };
+};
+/** File each remote serves its federation entry as, at the root of its origin. */
+export declare const TUMBALAND_REMOTE_ENTRY = "remoteEntry.js";
+/** The module every remote exposes: its routes wrapped in its own providers. */
+export declare const TUMBALAND_REMOTE_MODULE = "./App";

package/dist/federation.js

@@ -0,0 +1,37 @@
+/**
+ * Module-federation settings every Tumbaland front has to agree on.
+ *
+ * shell-front is the host; journal, album, money, account, groups and billing
+ * are remotes it loads at runtime from their own origins. This replaces the
+ * iframe-per-module shell: an iframe meant each module switch threw away a
+ * whole JS context and booted a new one, which is why opening a module
+ * re-checked the session, re-fetched its data and lost whatever the previous
+ * one had on screen.
+ *
+ * The shared singletons are the libraries that hold React context or global
+ * state. A remote running its own copy of React breaks hooks outright, and its
+ * own copy of the router, Emotion or React Query reads an empty context instead
+ * of the one the host's providers filled — so every app must take the single
+ * copy the host loaded. The list lives here rather than in seven vite configs
+ * because drift between those copies is precisely that failure.
+ *
+ * Plain data with no React imports: each `vite.config.mts` loads it in Node.
+ */
+export const TUMBALAND_FEDERATION_SHARED = {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+    // Tumbaland is on `react-router` v8, which is the package that holds the
+    // router context — there is no `react-router-dom` to share.
+    'react-router': { singleton: true },
+    '@emotion/react': { singleton: true },
+    '@emotion/styled': { singleton: true },
+    '@mui/material': { singleton: true },
+    // Only album and money use it today. Shared anyway: a second copy in one of
+    // them would read an empty cache rather than fail loudly, which is the
+    // harder bug to find.
+    '@tanstack/react-query': { singleton: true }
+};
+/** File each remote serves its federation entry as, at the root of its origin. */
+export const TUMBALAND_REMOTE_ENTRY = 'remoteEntry.js';
+/** The module every remote exposes: its routes wrapped in its own providers. */
+export const TUMBALAND_REMOTE_MODULE = './App';