@tumbaland/frontend-core 1.14.1 → 1.16.0

package/dist/components/ProtectedRoute/ProtectedRoute.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { logger } from '../../monitoring';
+import { Loader } from '../Loader';
+import { UnauthorizedPage } from '../UnauthorizedPage';
+/**
+ * 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 function ProtectedRoute({ children, authService, loadingMessage = 'Checking authentication...' }) {
+    const [isAuthenticated, setIsAuthenticated] = useState(() => authService.getCachedAuth?.()?.authenticated ?? null);
+    useEffect(() => {
+        let active = true;
+        authService
+            .isAuthenticated()
+            .then((authenticated) => {
+            if (active)
+                setIsAuthenticated(authenticated);
+        })
+            .catch((error) => {
+            logger.error('Auth check failed', error);
+            if (active)
+                setIsAuthenticated(false);
+        });
+        return () => {
+            active = false;
+        };
+    }, [authService]);
+    if (isAuthenticated === null) {
+        return _jsx(Loader, { message: loadingMessage });
+    }
+    if (!isAuthenticated) {
+        return _jsx(UnauthorizedPage, { onLogin: () => authService.redirectToLogin() });
+    }
+    return _jsx(_Fragment, { children: children });
+}

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

@@ -0,0 +1,2 @@
+export { ProtectedRoute } from './ProtectedRoute';
+export type { ProtectedRouteProps, ProtectedRouteAuthService } from './ProtectedRoute';

package/dist/components/ProtectedRoute/index.js

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

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/UnauthorizedPage/UnauthorizedPage.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface UnauthorizedPageProps {
+    onLogin: () => void;
+}
+export declare const UnauthorizedPage: React.FC<UnauthorizedPageProps>;

package/dist/components/UnauthorizedPage/UnauthorizedPage.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography, Button, Container, Paper } from '@mui/material';
+import { Lock, Login } from '@mui/icons-material';
+export const UnauthorizedPage = ({ onLogin }) => {
+    return (_jsx(Container, { maxWidth: "sm", sx: { mt: 8 }, children: _jsxs(Paper, { elevation: 3, sx: { p: 4, textAlign: 'center' }, children: [_jsx(Lock, { sx: { fontSize: 64, color: 'primary.main', mb: 2 } }), _jsx(Typography, { variant: "h4", component: "h1", gutterBottom: true, color: "primary", children: "Access Restricted" }), _jsx(Typography, { variant: "body1", sx: {
+                        color: 'text.secondary',
+                        mb: 2
+                    }, children: "You need to be logged in to access the Tumbaland." }), _jsx(Box, { sx: { mt: 4 }, children: _jsx(Button, { variant: "contained", size: "large", startIcon: _jsx(Login, {}), onClick: onLogin, sx: { px: 4, py: 1.5 }, children: "Sign In to Continue" }) })] }) }));
+};

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

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

package/dist/components/UnauthorizedPage/index.js

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

package/dist/components/UsageMeter/UsageMeter.d.ts

@@ -0,0 +1,35 @@
+export interface UsageMeterProps {
+    /** What is being metered, e.g. "Storage" or "Tracked tickers". */
+    label: string;
+    used: number;
+    /** `-1` (or any negative) means no ceiling. */
+    limit: number;
+    /** Bytes are humanized; counts are printed as-is. */
+    unit?: 'bytes' | 'count';
+    /** Shown once the meter is at or past the warning threshold. */
+    onUpgrade?: () => void;
+    upgradeLabel?: string;
+    /** Tighter spacing, for a meter sitting inside a list row rather than a card. */
+    dense?: boolean;
+}
+/**
+ * Humanizes to the largest unit that keeps the number readable.
+ *
+ * Deliberately binary (1 KB = 1024 B) to match the limits, which are set in
+ * powers of two — `1 * GB` in `DEFAULT_PLAN_LIMITS` is 1073741824, and
+ * rendering that as "1.07 GB" against a "1 GB" plan would look like an error.
+ */
+export declare function formatBytes(bytes: number): string;
+/**
+ * A labelled usage bar: what you have used, out of what your plan allows.
+ *
+ * The single highest-leverage piece of the paywall — people upgrade when they
+ * can see the ceiling coming, not when they hit it. It is also what keeps
+ * enforcement from reading as breakage: a 402 with no meter beside it is
+ * indistinguishable from a bug.
+ *
+ * Purely presentational. It takes numbers, never fetches them, so the same
+ * component serves the album dashboard, the ticker list, the group member list
+ * and the pricing table without any of them agreeing on a data layer.
+ */
+export declare function UsageMeter({ label, used, limit, unit, onUpgrade, upgradeLabel, dense }: UsageMeterProps): import("react").JSX.Element;

package/dist/components/UsageMeter/UsageMeter.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, LinearProgress, Tooltip, Typography } from '@mui/material';
+import { isUnlimited, usageRatio } from '../../entitlementsService';
+/** Fraction of a meter above which the bar turns amber. */
+const WARN_AT = 0.8;
+/**
+ * Humanizes to the largest unit that keeps the number readable.
+ *
+ * Deliberately binary (1 KB = 1024 B) to match the limits, which are set in
+ * powers of two — `1 * GB` in `DEFAULT_PLAN_LIMITS` is 1073741824, and
+ * rendering that as "1.07 GB" against a "1 GB" plan would look like an error.
+ */
+export function formatBytes(bytes) {
+    if (!Number.isFinite(bytes) || bytes <= 0)
+        return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+    const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const value = bytes / Math.pow(1024, exponent);
+    // Whole units read better without a trailing ".00"; fractions need a digit.
+    const decimals = exponent === 0 || Number.isInteger(value) ? 0 : value < 10 ? 2 : 1;
+    return `${value.toFixed(decimals)} ${units[exponent]}`;
+}
+function formatValue(value, unit) {
+    return unit === 'bytes' ? formatBytes(value) : value.toLocaleString();
+}
+/**
+ * A labelled usage bar: what you have used, out of what your plan allows.
+ *
+ * The single highest-leverage piece of the paywall — people upgrade when they
+ * can see the ceiling coming, not when they hit it. It is also what keeps
+ * enforcement from reading as breakage: a 402 with no meter beside it is
+ * indistinguishable from a bug.
+ *
+ * Purely presentational. It takes numbers, never fetches them, so the same
+ * component serves the album dashboard, the ticker list, the group member list
+ * and the pricing table without any of them agreeing on a data layer.
+ */
+export function UsageMeter({ label, used, limit, unit = 'count', onUpgrade, upgradeLabel = 'Upgrade', dense = false }) {
+    const unlimited = isUnlimited(limit);
+    const ratio = usageRatio(used, limit);
+    const atLimit = !unlimited && used >= limit;
+    const warning = !unlimited && ratio >= WARN_AT;
+    const color = atLimit ? 'error' : warning ? 'warning' : 'primary';
+    const summary = unlimited
+        ? `${formatValue(used, unit)} used`
+        : `${formatValue(used, unit)} of ${formatValue(limit, unit)}`;
+    return (_jsxs(Box, { sx: { width: '100%', mb: dense ? 1 : 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 1, mb: 0.5 }, children: [_jsx(Typography, { variant: dense ? 'caption' : 'body2', sx: { color: 'text.secondary', fontWeight: 500 }, children: label }), _jsx(Typography, { variant: dense ? 'caption' : 'body2', sx: { fontWeight: 600, color: atLimit ? 'error.main' : 'text.primary' }, children: summary })] }), unlimited ? (_jsx(Typography, { variant: "caption", sx: { color: 'text.secondary' }, children: "Unlimited on your plan" })) : (_jsx(Tooltip, { title: `${Math.round(ratio * 100)}% of ${label.toLowerCase()} used`, children: _jsx(LinearProgress, { variant: "determinate", value: ratio * 100, color: color, "aria-label": label, "aria-valuenow": used, "aria-valuemin": 0, "aria-valuemax": limit, sx: { height: dense ? 4 : 8, borderRadius: 4 } }) })), onUpgrade && warning && (_jsxs(Box, { sx: { mt: 1, display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { color: atLimit ? 'error.main' : 'warning.main' }, children: atLimit
+                            ? `You have reached your ${label.toLowerCase()} limit.`
+                            : `You are close to your ${label.toLowerCase()} limit.` }), _jsx(Button, { size: "small", variant: "text", onClick: onUpgrade, children: upgradeLabel })] }))] }));
+}

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

@@ -0,0 +1,4 @@
+export { UsageMeter, formatBytes } from './UsageMeter';
+export type { UsageMeterProps } from './UsageMeter';
+export { useEntitlements } from './useEntitlements';
+export type { UseEntitlementsResult } from './useEntitlements';

package/dist/components/UsageMeter/index.js

@@ -0,0 +1,2 @@
+export { UsageMeter, formatBytes } from './UsageMeter';
+export { useEntitlements } from './useEntitlements';

package/dist/components/UsageMeter/useEntitlements.d.ts

@@ -0,0 +1,27 @@
+import type { Entitlements } from '../../entitlementsService';
+export interface UseEntitlementsResult {
+    entitlements: Entitlements | null;
+    loading: boolean;
+    /** Set when the lookup failed. The UI should hide the meter, not show an error. */
+    error: Error | null;
+    reload: () => void;
+}
+/**
+ * Loads the caller's plan, limits and live usage once per mount.
+ *
+ * Takes the fetcher rather than building it, because each front resolves
+ * `PAYMENT_API_URL` through its own `ConfigProvider` and this library has no
+ * access to any of them.
+ *
+ * **For the five fronts without `@tanstack/react-query`** — account, group,
+ * payment, relationship and shell. album-front and finance-front already have
+ * react-query and should use `useQuery` instead, which gives them caching and
+ * revalidation this deliberately does not try to reimplement.
+ *
+ * **Failure is not surfaced as an error state by design.** A meter is
+ * decoration on top of a page that works without it — if payment-service is
+ * unreachable, the album dashboard should still render albums. Callers check
+ * `entitlements` for null and omit the meter; nobody gets a red box because a
+ * usage bar could not load.
+ */
+export declare function useEntitlements(fetcher: () => Promise<Entitlements>): UseEntitlementsResult;

package/dist/components/UsageMeter/useEntitlements.js

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from 'react';
+/**
+ * Loads the caller's plan, limits and live usage once per mount.
+ *
+ * Takes the fetcher rather than building it, because each front resolves
+ * `PAYMENT_API_URL` through its own `ConfigProvider` and this library has no
+ * access to any of them.
+ *
+ * **For the five fronts without `@tanstack/react-query`** — account, group,
+ * payment, relationship and shell. album-front and finance-front already have
+ * react-query and should use `useQuery` instead, which gives them caching and
+ * revalidation this deliberately does not try to reimplement.
+ *
+ * **Failure is not surfaced as an error state by design.** A meter is
+ * decoration on top of a page that works without it — if payment-service is
+ * unreachable, the album dashboard should still render albums. Callers check
+ * `entitlements` for null and omit the meter; nobody gets a red box because a
+ * usage bar could not load.
+ */
+export function useEntitlements(fetcher) {
+    const [entitlements, setEntitlements] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [reloadToken, setReloadToken] = useState(0);
+    const reload = useCallback(() => setReloadToken((token) => token + 1), []);
+    useEffect(() => {
+        // Guards against a state update after unmount, and against a slow first
+        // response overwriting a fresher one after `reload`.
+        let active = true;
+        setLoading(true);
+        fetcher()
+            .then((result) => {
+            if (!active)
+                return;
+            setEntitlements(result);
+            setError(null);
+        })
+            .catch((err) => {
+            if (!active)
+                return;
+            setEntitlements(null);
+            setError(err);
+        })
+            .finally(() => {
+            if (active)
+                setLoading(false);
+        });
+        return () => {
+            active = false;
+        };
+        // `fetcher` is intentionally not a dependency: callers commonly pass an
+        // inline arrow, and depending on it would refetch on every render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [reloadToken]);
+    return { entitlements, loading, error, reload };
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface TenantOption {
+    id: string;
+    name: string;
+    type: 'personal' | 'group';
+}
+export declare const TenantProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useTenantListener: (callback: (tenant: TenantOption) => void) => void;
+export declare const useTenantContext: () => TenantOption | null;

package/dist/components/tenant/TenantProvider.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, createContext, useContext, useEffect } from 'react';
+import { logger } from '../../monitoring';
+const TenantContext = createContext(null);
+// Global listeners for tenant changes
+const tenantChangeListeners = [];
+export const TenantProvider = ({ children }) => {
+    const [globalTenant, setGlobalTenant] = useState(null);
+    const handleTenantChange = useCallback((tenant) => {
+        setGlobalTenant(tenant);
+        // Notify all registered listeners
+        tenantChangeListeners.forEach((listener) => {
+            try {
+                listener(tenant);
+            }
+            catch (error) {
+                logger.error('Error in tenant change listener', error);
+            }
+        });
+    }, []);
+    const registerTenantChangeListener = useCallback((callback) => {
+        tenantChangeListeners.push(callback);
+        // Return cleanup function
+        return () => {
+            const index = tenantChangeListeners.indexOf(callback);
+            if (index > -1) {
+                tenantChangeListeners.splice(index, 1);
+            }
+        };
+    }, []);
+    const contextValue = {
+        selectedTenant: globalTenant,
+        onTenantChange: handleTenantChange,
+        registerTenantChangeListener
+    };
+    return _jsx(TenantContext.Provider, { value: contextValue, children: children });
+};
+// Hook to listen for tenant changes in components
+export const useTenantListener = (callback) => {
+    const context = useContext(TenantContext);
+    useEffect(() => {
+        if (!context) {
+            logger.warn('useTenantListener used outside TenantProvider');
+            return;
+        }
+        return context.registerTenantChangeListener(callback);
+    }, [context, callback]);
+};
+// Hook to get current tenant context
+export const useTenantContext = () => {
+    const context = useContext(TenantContext);
+    return context?.selectedTenant || null;
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { SxProps, Theme } from '@mui/material';
+export interface TenantOption {
+    id: string;
+    name: string;
+    type: 'personal' | 'group';
+    isSelected?: boolean;
+}
+export interface TenantSelectorProps {
+    /** Current selected tenant */
+    selectedTenant: TenantOption | null;
+    /** Available tenant options */
+    tenants: TenantOption[];
+    /** Callback when tenant is selected */
+    onTenantChange: (tenant: TenantOption) => void;
+    /** Loading state for fetching tenants */
+    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;