@tumbaland/frontend-core 1.14.1 → 1.16.0

package/dist/index.d.ts

@@ -12,3 +12,31 @@ export type { User, AuthResponse, Group, ApiResponse } from './types';
 export { TENANT_STORAGE_KEY, clearSessionScopedStorage } from './sessionStorage';
 export { initMonitoring, captureException, captureMessage, setUser, setTag, startTransaction, recordMetric, initWebVitals, flushLogs, initConsoleInterception, generateCorrelationId, getCorrelationId, getSessionId, logger } from './monitoring';
 export type { MonitoringConfig } from './monitoring';
+export { Loader } from './components/Loader';
+export { ErrorPage } from './components/ErrorPage';
+export { AppErrorBoundary } from './components/AppErrorBoundary';
+export { UnauthorizedPage } from './components/UnauthorizedPage';
+export { ProtectedRoute } from './components/ProtectedRoute';
+export { LoginButton } from './components/LoginButton';
+export { NotificationsMenu } from './components/NotificationsMenu/NotificationsMenu';
+export { AuthHeader } from './components/AuthHeader';
+export { AppLayout } from './components/AppLayout';
+export { SectionBar } from './components/SectionBar';
+export { UsageMeter, formatBytes, useEntitlements } from './components/UsageMeter';
+export { TenantSelector, TenantProvider, useTenant, useTenantListener, useTenantContext, useTenantFilter } from './components/tenant';
+export type { LoaderProps } from './components/Loader';
+export type { ErrorPageProps } from './components/ErrorPage';
+export type { AppErrorBoundaryProps } from './components/AppErrorBoundary';
+export type { AppLayoutProps } from './components/AppLayout';
+export type { SectionBarProps, SectionBarItem } from './components/SectionBar';
+export type { UnauthorizedPageProps } from './components/UnauthorizedPage';
+export type { ProtectedRouteProps, ProtectedRouteAuthService } from './components/ProtectedRoute';
+export type { LoginButtonProps } from './components/LoginButton';
+export type { NotificationsMenuProps } from './components/NotificationsMenu/NotificationsMenu';
+export type { AuthHeaderProps, AuthHeaderUser, AuthHeaderNavigationItem, AuthHeaderTenantOption, AuthHeaderTenantSelectorProps } from './components/AuthHeader';
+export type { TenantOption, TenantSelectorProps, UseTenantResult } from './components/tenant';
+export type { UsageMeterProps, UseEntitlementsResult } from './components/UsageMeter';
+export { createConfigProvider } from './config/createConfigProvider';
+export type { CreateConfigProviderOptions } from './config/createConfigProvider';
+export { toOrigin } from './routing';
+export { brand, ink, surface, gradient, moduleAccent, wordmark, glass, glassInteractive, chrome, brandButton, section, gutter, gutterSx, TOUCH_TARGET, PHONE, createTumbalandTheme, tumbalandTheme, TUMBALAND_COLORS } from './theme';

package/dist/index.js

@@ -1,4 +1,16 @@
-// @tumbaland/frontend-core - Shared frontend auth/group/API-client logic
+// @tumbaland/frontend-core — everything the Tumbaland frontends share:
+// the headless auth/group/API-client logic, and the React components and theme
+// built on top of it.
+//
+// These were two packages, @tumbaland/frontend-core and @tumbaland/frontend-core,
+// and every one of the eight frontends depended on both. Splitting them bought
+// nothing a consumer could use and cost a release ordering problem: components
+// pinned frontend-core exactly, so the two had to publish in dependency order
+// or the published tarball pinned a version that was about to be replaced.
+//
+// The one thing the split did guarantee is kept by `./federation`: that entry
+// point imports nothing, so the seven vite configs that read it in Node at
+// build time never pull React in.
 export { createApiClient, ApiError } from './apiClient';
 export { createAuthService, createAppAuthService } from './authService';
 export { createGroupService } from './groupService';
@@ -7,3 +19,25 @@ export { createPlansService } from './plansService';
 export { TENANT_STORAGE_KEY, clearSessionScopedStorage } from './sessionStorage';
 // Monitoring: headless logging, error capture, correlation IDs, and web-vitals
 export { initMonitoring, captureException, captureMessage, setUser, setTag, startTransaction, recordMetric, initWebVitals, flushLogs, initConsoleInterception, generateCorrelationId, getCorrelationId, getSessionId, logger } from './monitoring';
+// --- Components, theme and providers (formerly @tumbaland/frontend-core) ---
+export { Loader } from './components/Loader';
+export { ErrorPage } from './components/ErrorPage';
+export { AppErrorBoundary } from './components/AppErrorBoundary';
+export { UnauthorizedPage } from './components/UnauthorizedPage';
+export { ProtectedRoute } from './components/ProtectedRoute';
+export { LoginButton } from './components/LoginButton';
+export { NotificationsMenu } from './components/NotificationsMenu/NotificationsMenu';
+export { AuthHeader } from './components/AuthHeader';
+export { AppLayout } from './components/AppLayout';
+export { SectionBar } from './components/SectionBar';
+// Entitlements: the usage bar and the hook that feeds it
+export { UsageMeter, formatBytes, useEntitlements } from './components/UsageMeter';
+// Tenant selection: provider, selector, and hooks shared across domain frontends
+export { TenantSelector, TenantProvider, useTenant, useTenantListener, useTenantContext, useTenantFilter } from './components/tenant';
+// Config provider factory
+export { createConfigProvider } from './config/createConfigProvider';
+// A plain URL helper; the iframe bridge it belonged to is gone (see routing/index).
+export { toOrigin } from './routing';
+// Theme: the palette, the MUI theme built from it, and the raw tokens for the
+// places that have to name a colour outside a `sx` prop.
+export { brand, ink, surface, gradient, moduleAccent, wordmark, glass, glassInteractive, chrome, brandButton, section, gutter, gutterSx, TOUCH_TARGET, PHONE, createTumbalandTheme, tumbalandTheme, TUMBALAND_COLORS } from './theme';

package/dist/monitoring/batch.js

@@ -18,9 +18,9 @@ const sendBatch = async () => {
         const response = await fetch(config.elkUrl, {
             method: 'POST',
             headers: {
-                'Content-Type': 'application/json',
+                'Content-Type': 'application/json'
             },
-            body: JSON.stringify(batchToSend),
+            body: JSON.stringify(batchToSend)
         });
         if (!response.ok) {
             throw new Error(`HTTP ${response.status}: ${response.statusText}`);
@@ -39,7 +39,7 @@ const sendBatch = async () => {
         try {
             console.warn('Failed to send log batch, dropping logs:', error);
             if (config.isDevelopment) {
-                batchToSend.forEach(log => {
+                batchToSend.forEach((log) => {
                     console.warn('📝 [DROPPED LOG]:', JSON.stringify(log));
                 });
             }

package/dist/monitoring/config.js

@@ -30,10 +30,7 @@ export const initMonitoring = (environment = 'development', options = {}) => {
         console.log(`📝 Console interception enabled for levels: ${captureConsoleLevels.join(', ')}`);
     }
     // Initialize console interception and error handlers after modules are loaded
-    Promise.all([
-        import('./console'),
-        import('./errors')
-    ]).then(([{ initConsoleInterception }, { captureException, captureMessage }]) => {
+    Promise.all([import('./console'), import('./errors')]).then(([{ initConsoleInterception }, { captureException, captureMessage }]) => {
         // Initialize console interception with capture function
         initConsoleInterception(captureConsoleLevels, captureMessage);
         // Set up global error handlers

package/dist/monitoring/console.js

@@ -18,7 +18,7 @@ export const initConsoleInterception = (captureConsoleLevels = ['error', 'warn']
                 return;
             // Send to logging API with recursion protection
             try {
-                const message = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ');
+                const message = args.map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : String(arg))).join(' ');
                 // Set interception flag to prevent recursion during capture
                 window._monitoringInterceptingConsole = true;
                 captureMessageFn(message, level, {

package/dist/plansService.js

@@ -19,7 +19,7 @@ export function createPlansService(config) {
             const plans = body?.plans ?? [];
             // A plan without resolved limits cannot be rendered honestly — every line
             // on its card is a limit — so drop it rather than draw a card with holes.
-            return plans.filter(plan => Boolean(plan?.effectiveLimits?.meters));
+            return plans.filter((plan) => Boolean(plan?.effectiveLimits?.meters));
         }
     };
 }

package/dist/routing/embedContext.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Helpers shared by both sides of the shell/child iframe bridge.
+ *
+ * The child's initial path travels in the iframe `src` rather than over
+ * postMessage so the app boots straight into the deep-linked page instead of
+ * flashing its default route first. Every later navigation goes over
+ * postMessage — the `src` must stay stable or the child remounts.
+ */
+export declare const EMBED_FLAG = "embedded";
+export declare const EMBED_PATH = "embedPath";
+export interface EmbedContext {
+    embedded: boolean;
+    initialPath: string;
+}
+/** Path the child router starts on: always absolute, defaults to the root. */
+export declare const normalizeEmbedPath: (path?: string | null) => string;
+/** `/album` + `/albums/1?x=2` -> `/album/albums/1?x=2` (root path -> `/album`). */
+export declare const joinShellPath: (appRoute: string, childPath: string) => string;
+/** Everything after the app prefix, e.g. `/album/albums/1` -> `/albums/1`. */
+export declare const extractChildPath: (appRoute: string, shellPath: string, search?: string) => string;
+/** Config values are full URLs; postMessage needs a bare origin. */
+export declare const toOrigin: (url?: string) => string | undefined;
+export declare const safeUrl: (url: string, base?: string) => URL | undefined;
+/** Iframe `src` for an app, carrying the embed flag and the deep-linked path. */
+export declare const buildEmbeddedUrl: (appUrl: string, childPath: string) => string;
+/**
+ * Read on the child side. Embedded only when actually framed *and* flagged, so
+ * a direct visit to album.tumbaland.eu always gets a real BrowserRouter even if
+ * someone pastes the query params.
+ */
+export declare const readEmbedContext: (search?: string, isFramed?: boolean) => EmbedContext;

package/dist/routing/embedContext.js

@@ -0,0 +1,63 @@
+/**
+ * Helpers shared by both sides of the shell/child iframe bridge.
+ *
+ * The child's initial path travels in the iframe `src` rather than over
+ * postMessage so the app boots straight into the deep-linked page instead of
+ * flashing its default route first. Every later navigation goes over
+ * postMessage — the `src` must stay stable or the child remounts.
+ */
+export const EMBED_FLAG = 'embedded';
+export const EMBED_PATH = 'embedPath';
+/** Path the child router starts on: always absolute, defaults to the root. */
+export const normalizeEmbedPath = (path) => {
+    if (!path)
+        return '/';
+    return path.startsWith('/') ? path : `/${path}`;
+};
+/** `/album` + `/albums/1?x=2` -> `/album/albums/1?x=2` (root path -> `/album`). */
+export const joinShellPath = (appRoute, childPath) => {
+    const path = normalizeEmbedPath(childPath);
+    return path === '/' ? appRoute : `${appRoute}${path}`;
+};
+/** Everything after the app prefix, e.g. `/album/albums/1` -> `/albums/1`. */
+export const extractChildPath = (appRoute, shellPath, search = '') => normalizeEmbedPath(shellPath.slice(appRoute.length) + search);
+/** Config values are full URLs; postMessage needs a bare origin. */
+export const toOrigin = (url) => {
+    if (!url)
+        return undefined;
+    try {
+        return new URL(url).origin;
+    }
+    catch {
+        return undefined;
+    }
+};
+export const safeUrl = (url, base) => {
+    try {
+        return new URL(url, base);
+    }
+    catch {
+        return undefined;
+    }
+};
+/** Iframe `src` for an app, carrying the embed flag and the deep-linked path. */
+export const buildEmbeddedUrl = (appUrl, childPath) => {
+    const url = safeUrl(appUrl);
+    if (!url)
+        return appUrl;
+    url.searchParams.set(EMBED_FLAG, '1');
+    url.searchParams.set(EMBED_PATH, normalizeEmbedPath(childPath));
+    return url.toString();
+};
+/**
+ * Read on the child side. Embedded only when actually framed *and* flagged, so
+ * a direct visit to album.tumbaland.eu always gets a real BrowserRouter even if
+ * someone pastes the query params.
+ */
+export const readEmbedContext = (search = typeof window === 'undefined' ? '' : window.location.search, isFramed = typeof window !== 'undefined' && window.self !== window.top) => {
+    const params = new URLSearchParams(search);
+    return {
+        embedded: isFramed && params.get(EMBED_FLAG) === '1',
+        initialPath: normalizeEmbedPath(params.get(EMBED_PATH))
+    };
+};

package/dist/routing/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * What survives of the shell/child bridge.
+ *
+ * The rest — `EmbeddedRouter`, `useShellBridge`, the postMessage contract and
+ * the URL helpers that built an iframe `src` — existed only because each module
+ * ran in its own cross-origin document. Modules are module-federation remotes
+ * now, rendered in the shell's own React tree by `shell-front/src/remotes.ts`,
+ * so there is no frame to sync a location into and no second window to ask.
+ *
+ * `toOrigin` stays because it is a plain URL helper with callers of its own.
+ */
+export { toOrigin } from './embedContext';

package/dist/routing/index.js

@@ -0,0 +1,12 @@
+/**
+ * What survives of the shell/child bridge.
+ *
+ * The rest — `EmbeddedRouter`, `useShellBridge`, the postMessage contract and
+ * the URL helpers that built an iframe `src` — existed only because each module
+ * ran in its own cross-origin document. Modules are module-federation remotes
+ * now, rendered in the shell's own React tree by `shell-front/src/remotes.ts`,
+ * so there is no frame to sync a location into and no second window to ask.
+ *
+ * `toOrigin` stays because it is a plain URL helper with callers of its own.
+ */
+export { toOrigin } from './embedContext';

package/dist/sessionStorage.d.ts

@@ -12,6 +12,6 @@
  * clearing it at the call site, so a new front or a second logout button
  * cannot miss it.
  */
-/** Tenant (personal vs group) context — owned by `useTenant` in @tumbaland/components. */
+/** Tenant (personal vs group) context — owned by `useTenant` in @tumbaland/frontend-core. */
 export declare const TENANT_STORAGE_KEY = "selectedTenant";
 export declare function clearSessionScopedStorage(): void;

package/dist/sessionStorage.js

@@ -13,7 +13,7 @@ import { logger } from './monitoring';
  * clearing it at the call site, so a new front or a second logout button
  * cannot miss it.
  */
-/** Tenant (personal vs group) context — owned by `useTenant` in @tumbaland/components. */
+/** Tenant (personal vs group) context — owned by `useTenant` in @tumbaland/frontend-core. */
 export const TENANT_STORAGE_KEY = 'selectedTenant';
 const SESSION_SCOPED_KEYS = [TENANT_STORAGE_KEY];
 export function clearSessionScopedStorage() {

package/dist/theme/createTumbalandTheme.d.ts

@@ -0,0 +1,38 @@
+import { type Theme, type ThemeOptions } from '@mui/material/styles';
+/**
+ * The one theme every Tumbaland front renders with.
+ *
+ * Before this, `createConfigProvider` offered an opt-in theme that set exactly
+ * one value — the page background — so seven of the eight fronts were drawing
+ * MUI's factory blue and Roboto underneath a pink product. Crossing from the
+ * shell into a framed module changed the typeface, the blue and the shape of
+ * every button, which is the seam the iframe layout was otherwise hiding well.
+ *
+ * `shape.borderRadius` stays MUI's 4px unit deliberately: pages across the
+ * apps write radii as theme multiples (`borderRadius: 2`), and a larger unit
+ * silently turns all of those into pills. Components get their rounder corners
+ * individually below.
+ *
+ * Most of what follows is there for phones. The fronts are used on one far
+ * more than on a desktop, and MUI's defaults are tuned the other way: 36px
+ * buttons, 14px inputs that make iOS zoom the page on focus, dialogs that keep
+ * desktop margins, tab strips that overflow rather than scroll.
+ */
+export declare function createTumbalandTheme(overrides?: ThemeOptions): Theme;
+/**
+ * The colours named outside a React tree: `theme-color` in each index.html,
+ * the manifest, the offline page.
+ */
+export declare const TUMBALAND_COLORS: {
+    readonly brand: "#d61f92";
+    readonly themeColor: "#fdf2fa";
+    readonly background: "#fbf9fd";
+};
+/** Built once at module scope — a theme rebuilt per render remounts styles. */
+export declare const tumbalandTheme: Theme;
+export declare const gutterSx: {
+    readonly px: {
+        readonly xs: 2;
+        readonly sm: 3;
+    };
+};

package/dist/theme/createTumbalandTheme.js

@@ -0,0 +1,245 @@
+import { createTheme } from '@mui/material/styles';
+import { brand, gutter, ink, PHONE, surface, TOUCH_TARGET } from './tokens';
+const FONT_STACK = '"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+/**
+ * The one theme every Tumbaland front renders with.
+ *
+ * Before this, `createConfigProvider` offered an opt-in theme that set exactly
+ * one value — the page background — so seven of the eight fronts were drawing
+ * MUI's factory blue and Roboto underneath a pink product. Crossing from the
+ * shell into a framed module changed the typeface, the blue and the shape of
+ * every button, which is the seam the iframe layout was otherwise hiding well.
+ *
+ * `shape.borderRadius` stays MUI's 4px unit deliberately: pages across the
+ * apps write radii as theme multiples (`borderRadius: 2`), and a larger unit
+ * silently turns all of those into pills. Components get their rounder corners
+ * individually below.
+ *
+ * Most of what follows is there for phones. The fronts are used on one far
+ * more than on a desktop, and MUI's defaults are tuned the other way: 36px
+ * buttons, 14px inputs that make iOS zoom the page on focus, dialogs that keep
+ * desktop margins, tab strips that overflow rather than scroll.
+ */
+export function createTumbalandTheme(overrides = {}) {
+    return createTheme({
+        palette: {
+            primary: {
+                main: brand.pinkInk,
+                light: brand.pink,
+                dark: brand.pinkInkDeep,
+                contrastText: '#ffffff'
+            },
+            secondary: {
+                main: brand.violetInk,
+                light: brand.violet,
+                dark: '#6d28d9',
+                contrastText: '#ffffff'
+            },
+            success: { main: '#15803d' },
+            warning: { main: '#b45309' },
+            error: { main: '#dc2626' },
+            info: { main: '#0369a1' },
+            background: { default: surface.default, paper: surface.paper },
+            text: { primary: ink.strong, secondary: ink.body, disabled: ink.faint },
+            divider: surface.divider
+        },
+        typography: {
+            fontFamily: FONT_STACK,
+            h1: { fontWeight: 800, letterSpacing: '-0.02em' },
+            h2: { fontWeight: 700, letterSpacing: '-0.02em' },
+            h3: { fontWeight: 700, letterSpacing: '-0.02em' },
+            // Page titles. MUI's 2.125rem h4 filled a phone's width with two words.
+            h4: { fontWeight: 700, letterSpacing: '-0.02em', fontSize: '1.75rem', [PHONE]: { fontSize: '1.375rem' } },
+            h5: { fontWeight: 700, letterSpacing: '-0.01em', [PHONE]: { fontSize: '1.15rem' } },
+            h6: { fontWeight: 600, [PHONE]: { fontSize: '1rem' } },
+            subtitle1: { fontWeight: 600 },
+            subtitle2: { fontWeight: 600 },
+            button: { textTransform: 'none', fontWeight: 600 }
+        },
+        shape: { borderRadius: 4 },
+        components: {
+            MuiCssBaseline: {
+                styleOverrides: {
+                    html: {
+                        // Landscape on iOS otherwise inflates body text on its own.
+                        WebkitTextSizeAdjust: '100%'
+                    },
+                    body: {
+                        WebkitFontSmoothing: 'antialiased',
+                        MozOsxFontSmoothing: 'grayscale',
+                        // One wide row — a table, a chart, a strip of thumbnails — used
+                        // to make the whole page slide sideways under a thumb. Pages
+                        // that genuinely scroll horizontally do it in their own box.
+                        overflowX: 'hidden'
+                    },
+                    // Was an inline <style> block in shell-front's Layout, so only the
+                    // shell had it and the framed modules showed platform scrollbars.
+                    '*::-webkit-scrollbar': { width: 8, height: 8 },
+                    '*::-webkit-scrollbar-track': { background: 'transparent' },
+                    '*::-webkit-scrollbar-thumb': { background: 'rgba(139,92,246,0.22)', borderRadius: 4 },
+                    '*::-webkit-scrollbar-thumb:hover': { background: 'rgba(139,92,246,0.42)' }
+                }
+            },
+            MuiContainer: {
+                styleOverrides: {
+                    root: {
+                        paddingLeft: 16,
+                        paddingRight: 16,
+                        '@media (min-width:600px)': { paddingLeft: 24, paddingRight: 24 }
+                    }
+                }
+            },
+            MuiButton: {
+                defaultProps: { disableElevation: true },
+                styleOverrides: {
+                    root: { borderRadius: 12, [PHONE]: { minHeight: TOUCH_TARGET } },
+                    sizeSmall: { borderRadius: 10, [PHONE]: { minHeight: 36 } },
+                    sizeLarge: { paddingInline: 24, minHeight: 48 }
+                }
+            },
+            MuiIconButton: {
+                styleOverrides: {
+                    root: { [PHONE]: { minWidth: TOUCH_TARGET, minHeight: TOUCH_TARGET } },
+                    sizeSmall: { [PHONE]: { minWidth: 36, minHeight: 36 } }
+                }
+            },
+            MuiFab: {
+                styleOverrides: { root: { textTransform: 'none', fontWeight: 600 } }
+            },
+            MuiPaper: {
+                styleOverrides: {
+                    root: { backgroundImage: 'none' },
+                    rounded: { borderRadius: 14 },
+                    outlined: { borderColor: surface.divider }
+                }
+            },
+            MuiCard: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: 18,
+                        border: `1px solid ${surface.divider}`,
+                        boxShadow: '0 10px 30px -24px rgba(88,28,135,0.45)'
+                    }
+                }
+            },
+            MuiCardContent: {
+                // 24px of padding on each side of a 360px screen is a quarter of it.
+                styleOverrides: { root: { [PHONE]: { padding: 16, '&:last-child': { paddingBottom: 16 } } } }
+            },
+            // Near-fullscreen on a phone: MUI keeps a desktop's margins, which
+            // leaves a form squeezed into the middle with nothing gained.
+            MuiDialog: {
+                styleOverrides: {
+                    paper: {
+                        borderRadius: 20,
+                        [PHONE]: {
+                            margin: 12,
+                            width: 'calc(100% - 24px)',
+                            maxWidth: 'calc(100% - 24px)',
+                            maxHeight: 'calc(100% - 24px)',
+                            borderRadius: 18
+                        }
+                    }
+                }
+            },
+            MuiDialogTitle: {
+                styleOverrides: { root: { fontWeight: 700, [PHONE]: { padding: '16px 16px 8px' } } }
+            },
+            MuiDialogContent: {
+                styleOverrides: { root: { [PHONE]: { padding: '8px 16px' } } }
+            },
+            MuiDialogActions: {
+                styleOverrides: { root: { padding: 16, gap: 8 } }
+            },
+            MuiMenu: {
+                styleOverrides: { paper: { borderRadius: 14 } }
+            },
+            MuiMenuItem: {
+                styleOverrides: { root: { [PHONE]: { minHeight: TOUCH_TARGET } } }
+            },
+            MuiListItemButton: {
+                styleOverrides: { root: { borderRadius: 10, [PHONE]: { minHeight: TOUCH_TARGET } } }
+            },
+            MuiOutlinedInput: {
+                styleOverrides: {
+                    root: { borderRadius: 12, backgroundColor: surface.paper },
+                    // 16px is the threshold below which iOS Safari zooms the page in
+                    // when a field takes focus, and then leaves it zoomed.
+                    input: { [PHONE]: { fontSize: 16 } }
+                }
+            },
+            MuiInputBase: {
+                styleOverrides: { input: { [PHONE]: { fontSize: 16 } } }
+            },
+            MuiSelect: {
+                styleOverrides: { select: { [PHONE]: { fontSize: 16 } } }
+            },
+            MuiAlert: {
+                styleOverrides: { root: { borderRadius: 12 } }
+            },
+            MuiChip: {
+                styleOverrides: { root: { fontWeight: 500, borderRadius: 8 } }
+            },
+            // Tab strips are the most common cause of a page wider than the phone
+            // it is on. Scrolling is the right default; a page that wants fixed
+            // tabs still passes `variant` itself.
+            MuiTabs: {
+                defaultProps: { variant: 'scrollable', scrollButtons: 'auto', allowScrollButtonsMobile: true },
+                styleOverrides: { root: { minHeight: 44 } }
+            },
+            MuiTab: {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                        fontWeight: 600,
+                        minHeight: 44,
+                        [PHONE]: { minWidth: 'auto', paddingInline: 12, fontSize: '0.875rem' }
+                    }
+                }
+            },
+            MuiTableCell: {
+                styleOverrides: {
+                    root: {
+                        borderColor: surface.divider,
+                        [PHONE]: { padding: '8px 10px', fontSize: '0.8125rem' }
+                    },
+                    head: {
+                        backgroundColor: surface.sunken,
+                        color: ink.body,
+                        fontSize: '0.75rem',
+                        fontWeight: 700,
+                        letterSpacing: '0.04em',
+                        textTransform: 'uppercase',
+                        whiteSpace: 'nowrap'
+                    }
+                }
+            },
+            MuiLinearProgress: {
+                styleOverrides: { root: { borderRadius: 999 }, bar: { borderRadius: 999 } }
+            },
+            MuiTooltip: {
+                // A tooltip is invisible on a touch screen, so anything that needs
+                // one also needs a visible label. Kept legible where it does show.
+                styleOverrides: { tooltip: { fontSize: '0.75rem', borderRadius: 8, padding: '6px 10px' } }
+            },
+            MuiSwitch: {
+                styleOverrides: { root: { [PHONE]: { marginInline: 4 } } }
+            },
+            MuiBottomNavigationAction: {
+                styleOverrides: { root: { minWidth: 0, [PHONE]: { minHeight: TOUCH_TARGET } } }
+            }
+        }
+    }, overrides);
+}
+/**
+ * The colours named outside a React tree: `theme-color` in each index.html,
+ * the manifest, the offline page.
+ */
+export const TUMBALAND_COLORS = {
+    brand: brand.pinkInk,
+    themeColor: '#fdf2fa',
+    background: surface.default
+};
+/** Built once at module scope — a theme rebuilt per render remounts styles. */
+export const tumbalandTheme = createTumbalandTheme();
+export const gutterSx = { px: gutter };

package/dist/theme/index.d.ts

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

package/dist/theme/index.js

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