@tumbaland/frontend-core 1.14.1 → 1.16.0

package/dist/theme/tokens.d.ts

@@ -0,0 +1,186 @@
+/**
+ * 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: "#d61f92";
+    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)";
+};
+/**
+ * The frosted chrome around the content: the navigation rail, the tab bar under
+ * it on phones, and the header bar above it.
+ *
+ * Named once because the three meet at a corner. They each had their own
+ * rgba white and their own blur, so the seam between the rail and the bar it
+ * touches was visible as a faint step in the tint.
+ *
+ * Not `glass`: that is the card, which is rounded and has a light border of its
+ * own. A full-height rail with a 28px radius and a white outline is a card the
+ * page happens to be next to.
+ */
+export declare const chrome: {
+    readonly background: "rgba(255,255,255,0.78)";
+    readonly backdropFilter: "blur(14px) saturate(150%)";
+    readonly WebkitBackdropFilter: "blur(14px) saturate(150%)";
+};
+/** 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)";

package/dist/theme/tokens.js

@@ -0,0 +1,182 @@
+/**
+ * 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 const brand = {
+    /** Decorative only — gradient start, large fills. Fails AA as text. */
+    pink: '#ff1fae',
+    /** Decorative — the hover end of the gradient. */
+    pinkDeep: '#f01aa2',
+    /** The readable pink: text, icons, buttons, anything interactive. AA on white. */
+    pinkInk: '#d61f92',
+    /** Pressed and hover states for `pinkInk`. */
+    pinkInkDeep: '#b3177a',
+    magenta: '#c026d3',
+    /** Decorative — gradient end. */
+    violet: '#8b5cf6',
+    violetDeep: '#7c4de8',
+    /** The readable violet, for the same reason as `pinkInk`. AA on white. */
+    violetInk: '#7c3aed',
+    purple: '#9333ea'
+};
+/** Text, darkest to lightest. Slate rather than grey, to sit under the pink. */
+export const ink = {
+    strong: '#0f172a',
+    body: '#475569',
+    // #64748b, the slate this was, reads 4.48:1 on the sunken surface and 4.36:1
+    // on the pink top of the page wash — just under AA, on exactly the secondary
+    // text that ends up there. Two steps darker clears it on every surface.
+    muted: '#5f6d80',
+    /** Decorative only — 2.6:1 on white. Never put words a reader needs in this. */
+    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 const surface = {
+    page: 'radial-gradient(circle at 50% 0%, #fdf2fa 0%, #f3edff 55%, #fbfcff 100%)',
+    default: '#fbf9fd',
+    paper: '#ffffff',
+    /** Table heads, inset panels, anything one step back from `paper`. */
+    sunken: '#faf7fc',
+    divider: '#ece7f2'
+};
+export const gradient = {
+    brand: `linear-gradient(135deg, ${brand.pink} 0%, ${brand.violet} 100%)`,
+    brandHover: `linear-gradient(135deg, ${brand.pinkDeep} 0%, ${brand.violetDeep} 100%)`,
+    /** For a large tint behind a section, where the full-strength gradient shouts. */
+    wash: `linear-gradient(135deg, ${brand.pink}14 0%, ${brand.violet}14 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 const moduleAccent = {
+    home: brand.purple,
+    journal: '#e11d48',
+    album: '#2563eb',
+    money: '#15803d',
+    // The identity pink, in its readable form. This was `ink.strong`, which is
+    // a text colour: as the tint behind Profile's current section it drew a grey
+    // pill in the one place the product's own colour belongs.
+    profile: brand.pinkInk,
+    groups: brand.violetInk,
+    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 const wordmark = {
+    fontFamily: '"Pacifico", cursive',
+    lineHeight: 1.25,
+    letterSpacing: 1,
+    background: gradient.brand,
+    backgroundClip: 'text',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.08))',
+    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 const glass = {
+    borderRadius: 3.5,
+    background: 'rgba(255,255,255,0.62)',
+    backdropFilter: 'blur(10px)',
+    border: '1px solid rgba(255,255,255,0.7)',
+    boxShadow: '0 10px 30px -22px rgba(31,38,135,0.5)'
+};
+/**
+ * The frosted chrome around the content: the navigation rail, the tab bar under
+ * it on phones, and the header bar above it.
+ *
+ * Named once because the three meet at a corner. They each had their own
+ * rgba white and their own blur, so the seam between the rail and the bar it
+ * touches was visible as a faint step in the tint.
+ *
+ * Not `glass`: that is the card, which is rounded and has a light border of its
+ * own. A full-height rail with a 28px radius and a white outline is a card the
+ * page happens to be next to.
+ */
+export const chrome = {
+    background: 'rgba(255,255,255,0.78)',
+    backdropFilter: 'blur(14px) saturate(150%)',
+    WebkitBackdropFilter: 'blur(14px) saturate(150%)'
+};
+/** A card that responds to being pointed at. `accent` tints the lifted shadow. */
+export const glassInteractive = (accent = brand.purple) => ({
+    ...glass,
+    transition: 'transform .2s ease, box-shadow .2s ease',
+    '&:hover': {
+        transform: 'translateY(-3px)',
+        boxShadow: `0 20px 38px -24px ${accent}cc`
+    }
+});
+/** The primary call to action, wherever one appears. */
+export const brandButton = {
+    textTransform: 'none',
+    fontWeight: 600,
+    borderRadius: 3,
+    background: gradient.brand,
+    boxShadow: `0 10px 28px -10px rgba(168,45,190,0.75)`,
+    '&:hover': {
+        background: gradient.brandHover,
+        boxShadow: `0 12px 32px -10px rgba(168,45,190,0.9)`
+    }
+};
+/** Vertical rhythm, so sections on both pages breathe identically. */
+export const section = {
+    px: 2,
+    py: { xs: 5, 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 const gutter = { xs: 2, 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 const TOUCH_TARGET = 44;
+/** Below `sm` — the phone layout. Matches `theme.breakpoints.down('sm')`. */
+export const PHONE = '@media (max-width:599.95px)';

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@tumbaland/frontend-core",
-  "version": "1.14.1",
-  "description": "Shared frontend auth/group/API-client logic for Tumbaland frontends",
+  "version": "1.16.0",
+  "description": "Shared frontend logic, components and theme for Tumbaland frontends",
   "author": "Tumbaland",
   "license": "MIT",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -22,12 +23,37 @@
     "tagPrefix": "frontend-core-v"
   },
   "dependencies": {
+    "@mui/icons-material": "^9.4.0",
+    "@mui/material": "^9.4.0",
     "web-vitals": "^6.2.1"
   },
   "devDependencies": {
+    "@esbuild/linux-x64": "^0.28.2",
+    "@rollup/rollup-linux-x64-gnu": "^4.63.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/node": "^26.5.1",
+    "@vitejs/plugin-react": "^6.1.1",
     "@vitest/coverage-v8": "^4.1.11",
     "commit-and-tag-version": "^13.2.1",
     "typescript": "^6.0.3"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./federation": {
+      "types": "./dist/federation.d.ts",
+      "import": "./dist/federation.js",
+      "default": "./dist/federation.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router": "^8.3.0"
   }
 }

package/dist/test/setup.d.ts

@@ -1,9 +0,0 @@
-declare class MemoryStorage implements Storage {
-    private store;
-    get length(): number;
-    clear(): void;
-    getItem(key: string): string | null;
-    key(index: number): string;
-    removeItem(key: string): void;
-    setItem(key: string, value: string): void;
-}

package/dist/test/setup.js

@@ -1,26 +0,0 @@
-"use strict";
-// This jsdom environment doesn't provide a working localStorage (window.localStorage
-// is undefined here) — polyfill it with a simple in-memory Storage.
-class MemoryStorage {
-    store = new Map();
-    get length() {
-        return this.store.size;
-    }
-    clear() {
-        this.store.clear();
-    }
-    getItem(key) {
-        return this.store.has(key) ? this.store.get(key) : null;
-    }
-    key(index) {
-        return Array.from(this.store.keys())[index] ?? null;
-    }
-    removeItem(key) {
-        this.store.delete(key);
-    }
-    setItem(key, value) {
-        this.store.set(key, String(value));
-    }
-}
-Object.defineProperty(globalThis, 'localStorage', { value: new MemoryStorage(), configurable: true });
-Object.defineProperty(window, 'localStorage', { value: globalThis.localStorage, configurable: true });