@tumbaland/frontend-core 1.14.0 → 1.15.0

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, 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, brandButton, section, gutter, TOUCH_TARGET, PHONE } from './tokens';
+export { createTumbalandTheme, tumbalandTheme, TUMBALAND_COLORS, gutterSx } from './createTumbalandTheme';

package/dist/theme/tokens.d.ts

@@ -0,0 +1,169 @@
+/**
+ * One place the look is decided, for all eight fronts.
+ *
+ * This file used to live in shell-front, which meant the signed-in home page
+ * was the only screen that knew what colour Tumbaland is. The other seven
+ * frontends fell back to MUI's factory defaults — Roboto and `#1976d2` — and
+ * then painted over them with literals, which is how three palettes ended up
+ * in the product at once: the pink below, an indigo one in a dozen gradient
+ * literals, and a sky-blue one in five copies of `AppLayout`.
+ *
+ * Naming the palette once, in the package every front already depends on,
+ * makes it a knob rather than a search-and-replace.
+ *
+ * Two pinks, on purpose. `pink` is the identity — bright, and only ever used
+ * for gradients and large decorative fills, where its 3.5:1 against white does
+ * not matter. `pinkInk` is the one anything readable or clickable uses: the
+ * same hue walked down to 4.7:1, which clears WCAG AA as text on white and as
+ * a button behind white text. Reaching for `pink` on a label is the mistake
+ * this pair exists to prevent.
+ */
+/** The accent family. Pink leads; violet is what it resolves into. */
+export declare const brand: {
+    /** Decorative only — gradient start, large fills. Fails AA as text. */
+    readonly pink: "#ff1fae";
+    /** Decorative — the hover end of the gradient. */
+    readonly pinkDeep: "#f01aa2";
+    /** The readable pink: text, icons, buttons, anything interactive. AA on white. */
+    readonly pinkInk: "#d61f92";
+    /** Pressed and hover states for `pinkInk`. */
+    readonly pinkInkDeep: "#b3177a";
+    readonly magenta: "#c026d3";
+    /** Decorative — gradient end. */
+    readonly violet: "#8b5cf6";
+    readonly violetDeep: "#7c4de8";
+    /** The readable violet, for the same reason as `pinkInk`. AA on white. */
+    readonly violetInk: "#7c3aed";
+    readonly purple: "#9333ea";
+};
+/** Text, darkest to lightest. Slate rather than grey, to sit under the pink. */
+export declare const ink: {
+    readonly strong: "#0f172a";
+    readonly body: "#475569";
+    readonly muted: "#5f6d80";
+    /** Decorative only — 2.6:1 on white. Never put words a reader needs in this. */
+    readonly faint: "#94a3b8";
+};
+/**
+ * Page and card backgrounds.
+ *
+ * `page` replaces the three different radial gradients the AppLayouts each had
+ * (two sky-blue, one indigo). It is the pink-to-violet wash, so a module opened
+ * inside the shell's iframe sits on the same backdrop as the shell around it —
+ * which is what made the seam between them visible before.
+ */
+export declare const surface: {
+    readonly page: "radial-gradient(circle at 50% 0%, #fdf2fa 0%, #f3edff 55%, #fbfcff 100%)";
+    readonly default: "#fbf9fd";
+    readonly paper: "#ffffff";
+    /** Table heads, inset panels, anything one step back from `paper`. */
+    readonly sunken: "#faf7fc";
+    readonly divider: "#ece7f2";
+};
+export declare const gradient: {
+    readonly brand: "linear-gradient(135deg, #ff1fae 0%, #8b5cf6 100%)";
+    readonly brandHover: "linear-gradient(135deg, #f01aa2 0%, #7c4de8 100%)";
+    /** For a large tint behind a section, where the full-strength gradient shouts. */
+    readonly wash: "linear-gradient(135deg, #ff1fae14 0%, #8b5cf614 100%)";
+};
+/**
+ * Per-module accent, keyed by the shell's route.
+ *
+ * These were literals in shell-front's `apps.ts`, and four of the six failed
+ * AA against white — Money's `#22c55e` sat at 2.3:1 as the active tab's label,
+ * which on a phone in daylight is the one colour that has to read. Same hues,
+ * walked down until they clear 4.5:1.
+ */
+export declare const moduleAccent: {
+    readonly home: "#9333ea";
+    readonly journal: "#e11d48";
+    readonly album: "#2563eb";
+    readonly money: "#15803d";
+    readonly profile: "#0f172a";
+    readonly groups: "#7c3aed";
+    readonly billing: "#4f46e5";
+};
+/**
+ * The script wordmark, gradient-filled.
+ *
+ * Used by the landing hero and by the signed-in greeting. It was written out
+ * twice with the same eight properties; a single definition is the only reason
+ * the two can be trusted to match.
+ */
+export declare const wordmark: {
+    readonly fontFamily: "\"Pacifico\", cursive";
+    readonly lineHeight: 1.25;
+    readonly letterSpacing: 1;
+    readonly background: "linear-gradient(135deg, #ff1fae 0%, #8b5cf6 100%)";
+    readonly backgroundClip: "text";
+    readonly WebkitBackgroundClip: "text";
+    readonly WebkitTextFillColor: "transparent";
+    readonly filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.08))";
+    readonly pb: 1;
+};
+/**
+ * The frosted card both pages are built from.
+ *
+ * Translucent on purpose: the cloud backdrop shows through, which is what ties
+ * a card to the page rather than laying it on top.
+ */
+export declare const glass: {
+    readonly borderRadius: 3.5;
+    readonly background: "rgba(255,255,255,0.62)";
+    readonly backdropFilter: "blur(10px)";
+    readonly border: "1px solid rgba(255,255,255,0.7)";
+    readonly boxShadow: "0 10px 30px -22px rgba(31,38,135,0.5)";
+};
+/** A card that responds to being pointed at. `accent` tints the lifted shadow. */
+export declare const glassInteractive: (accent?: string) => {
+    readonly transition: "transform .2s ease, box-shadow .2s ease";
+    readonly '&:hover': {
+        readonly transform: "translateY(-3px)";
+        readonly boxShadow: `0 20px 38px -24px ${string}cc`;
+    };
+    readonly borderRadius: 3.5;
+    readonly background: "rgba(255,255,255,0.62)";
+    readonly backdropFilter: "blur(10px)";
+    readonly border: "1px solid rgba(255,255,255,0.7)";
+    readonly boxShadow: "0 10px 30px -22px rgba(31,38,135,0.5)";
+};
+/** The primary call to action, wherever one appears. */
+export declare const brandButton: {
+    readonly textTransform: "none";
+    readonly fontWeight: 600;
+    readonly borderRadius: 3;
+    readonly background: "linear-gradient(135deg, #ff1fae 0%, #8b5cf6 100%)";
+    readonly boxShadow: "0 10px 28px -10px rgba(168,45,190,0.75)";
+    readonly '&:hover': {
+        readonly background: "linear-gradient(135deg, #f01aa2 0%, #7c4de8 100%)";
+        readonly boxShadow: "0 12px 32px -10px rgba(168,45,190,0.9)";
+    };
+};
+/** Vertical rhythm, so sections on both pages breathe identically. */
+export declare const section: {
+    readonly px: 2;
+    readonly py: {
+        readonly xs: 5;
+        readonly md: 7;
+    };
+};
+/**
+ * The page gutter, as every layout and page should spell it.
+ *
+ * 16px on a phone is the narrowest that still keeps text off the screen's
+ * curved edge; widening it past `sm` is what stops a card looking stranded on
+ * a desktop. Pages that hardcoded `p: 3` lost 48px of a 360px screen to
+ * nothing.
+ */
+export declare const gutter: {
+    readonly xs: 2;
+    readonly sm: 3;
+};
+/**
+ * Minimum hit area for anything tapped, per the WCAG 2.2 target-size rule and
+ * both platform guidelines. MUI's medium button is 36px tall, which is a miss
+ * often enough to feel broken on a phone.
+ */
+export declare const TOUCH_TARGET = 44;
+/** Below `sm` — the phone layout. Matches `theme.breakpoints.down('sm')`. */
+export declare const PHONE = "@media (max-width:599.95px)";