@tumbaland/frontend-core 1.14.1 → 1.15.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/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,24 @@
+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;
+    /** Custom styling */
+    sx?: SxProps<Theme>;
+}
+declare const TenantSelector: React.FC<TenantSelectorProps>;
+export default TenantSelector;

package/dist/components/tenant/TenantSelector.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Button, Menu, MenuItem, ListItemIcon, ListItemText, Divider, Typography, Chip } from '@mui/material';
+import { PersonOutlined, Groups, ExpandMore, Check } from '@mui/icons-material';
+const TenantSelector = ({ selectedTenant, tenants = [], onTenantChange, loading = false, error = null, sx = {} }) => {
+    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 'Select 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, endIcon: _jsx(ExpandMore, {}), startIcon: selectedTenant ? getIcon(selectedTenant.type) : _jsx(PersonOutlined, { fontSize: "small" }), sx: {
+                    textTransform: 'none',
+                    fontWeight: 500,
+                    borderRadius: 2,
+                    px: 2,
+                    py: 0.5,
+                    minWidth: 140,
+                    justifyContent: 'flex-start',
+                    color: 'text.primary',
+                    border: '1px solid',
+                    borderColor: 'divider',
+                    '&:hover': {
+                        borderColor: 'primary.main',
+                        backgroundColor: 'action.hover'
+                    }
+                }, children: _jsxs(Box, { sx: { flexGrow: 1, textAlign: 'left', overflow: 'hidden' }, children: [_jsx(Typography, { variant: "caption", sx: {
+                                color: 'text.secondary',
+                                display: 'block',
+                                fontSize: 10
+                            }, children: "Context" }), _jsx(Typography, { variant: "body2", sx: {
+                                display: 'block',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                maxWidth: 100
+                            }, children: loading ? 'Loading...' : getDisplayName(selectedTenant) })] }) }), _jsxs(Menu, { anchorEl: anchorEl, open: isOpen, onClose: handleClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left'
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left'
+                }, children: [_jsx(MenuItem, { disabled: true, children: _jsx(Typography, { variant: "caption", sx: {
+                                color: 'text.secondary',
+                                fontWeight: 600
+                            }, children: "SELECT CONTEXT" }) }), _jsx(Divider, {}), tenants.map((tenant) => {
+                        const isSelected = selectedTenant?.id === tenant.id;
+                        return (_jsxs(MenuItem, { onClick: () => handleTenantSelect(tenant), selected: isSelected, sx: {
+                                py: 1.5,
+                                '&.Mui-selected': {
+                                    backgroundColor: 'primary.50'
+                                }
+                            }, children: [_jsx(ListItemIcon, { children: getIcon(tenant.type) }), _jsx(ListItemText, { primary: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Typography, { variant: "body2", sx: { fontWeight: 500 }, children: tenant.type === 'personal' ? 'Personal' : tenant.name }), isSelected && _jsx(Check, { fontSize: "small", color: "primary" })] }), secondary: _jsx(Typography, { variant: "caption", sx: {
+                                            color: 'text.secondary'
+                                        }, children: tenant.type === 'personal' ? 'Your personal data' : 'Group workspace' }) })] }, tenant.id));
+                    }), tenants.length === 0 && !loading && (_jsx(MenuItem, { disabled: true, children: _jsx(ListItemText, { primary: _jsx(Typography, { variant: "body2", sx: {
+                                    color: 'text.secondary'
+                                }, children: "No contexts available" }) }) }))] })] }));
+};
+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, userEmail?: string) => UseTenantResult;