mui-atelier 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+All notable changes to this package. The format follows
+[Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and versions follow
+[Semantic Versioning](https://semver.org/). While the version is 0.x, a minor
+release may change the API.
+
+## 0.1.0 — unreleased
+
+First release.
+
+- 19 themes with light and dark schemes, their accent, data and status
+  colours tested to WCAG AA, built by `createSiteTheme` from plain definitions.
+- `createThemeCatalog` for an app's own list of themes, `ThemeRegistry` for the
+  root theme and `OrgThemeRegistry` for a nested one with scoped CSS variables.
+- Layout, data, form and feedback components, including `DataTable`,
+  `DashboardLayout`, `StatusChip`, `LabeledField`, `ConfirmProvider` and
+  `ToastProvider`.
+- Strings in English, Spanish and Chinese under the `uikit` namespace.
+- `chipRules` for eslint, `jsdomShims` and `describeThemeContract` for tests.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vlad Slobodkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,32 @@
+mui-atelier includes material derived from the following MIT-licensed works.
+
+country-region-data
+  https://github.com/country-regions/country-region-data
+  Copyright (c) 2022 Benjamin Keen
+  Used for: src/lib/countryRegionData.json (trimmed to names and codes).
+
+Berry, the free React admin template by CodedThemes
+  https://github.com/codedthemes/berry-free-react-admin-template
+  Copyright (c) 2026 CodedThemes
+  Used for: the `berry` ui treatment in src/theme (bar, drawer, card and
+  chip styling, and its type ramp). No Berry palette ships as a theme.
+
+Both are distributed under the MIT License:
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/README.md

@@ -0,0 +1,282 @@
+# mui-atelier
+
+Nineteen complete MUI themes, the factory that builds them, per-organisation theme scoping, and
+the Next.js components built on top — for React 19, MUI 9 and the Next.js App Router.
+
+A theme here is more than a palette. Each one carries a `ui` personality (buttons, inputs,
+surfaces, chips, the dashboard's navigation, table headers), so every component in the kit, and
+any component you build on MUI, takes on that theme's look. Every theme ships light and dark
+schemes, and its accent, data and status colours are tested to WCAG AA (4.5:1) on its own
+paper.
+
+Plain JavaScript, published as compiled ES modules with each file's `'use client'` intact.
+
+## Install
+
+```bash
+npm install mui-atelier
+```
+
+**Required peers:** `react`, `react-dom` (19), `@mui/material`, `@mui/icons-material` (9),
+`@emotion/react`, `@emotion/styled` (11), `next` (15+), `next-intl` (4). You will also want
+`@mui/material-nextjs` for the App Router cache provider.
+
+**Optional peers**, needed only by the modules that use them:
+
+| Module | Needs |
+|---|---|
+| `components/DataTable`, `components/TableFilters` | `@tanstack/react-table` |
+| `components/Sortable` | `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities` |
+| `components/SafeHtml`, `lib/sanitizeHtml` | `dompurify` |
+| `test/themeContract` | `vitest` |
+
+## Import by path
+
+There is no root entry. Every module is imported by its own path, which keeps server components
+from pulling in client-only code:
+
+```js
+import StatusChip from 'mui-atelier/components/StatusChip';
+import { getOrgTheme } from 'mui-atelier/theme/themes';
+```
+
+## Set up the root layout
+
+```jsx
+// app/layout.js
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { NextIntlClientProvider } from 'next-intl';
+import { getLocale, getMessages } from 'next-intl/server';
+import { Inter } from 'next/font/google';
+import ThemeRegistry from 'mui-atelier/theme/ThemeRegistry';
+import BrandProvider from 'mui-atelier/components/BrandProvider';
+import { getOrgTheme } from 'mui-atelier/theme/themes';
+
+const inter = Inter({ subsets: ['latin'], display: 'swap', variable: '--font-inter' });
+
+export default async function RootLayout({ children }) {
+  const locale = await getLocale();
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale} className={inter.variable} suppressHydrationWarning>
+      <body>
+        <InitColorSchemeScript attribute="class" defaultMode="system" />
+        <AppRouterCacheProvider>
+          <NextIntlClientProvider locale={locale} messages={messages}>
+            <ThemeRegistry theme={getOrgTheme('default')}>
+              <BrandProvider siteName="Acme" copyright="Acme Inc.">
+                {children}
+              </BrandProvider>
+            </ThemeRegistry>
+          </NextIntlClientProvider>
+        </AppRouterCacheProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+`ThemeRegistry` takes a theme **definition** (plain data), not a built MUI theme, so it can be
+passed from a server component. Colour schemes use MUI's CSS variables with a `class` selector,
+which is why the layout renders `InitColorSchemeScript`: the right scheme is applied before
+first paint.
+
+`BrandProvider` names your product once for the wordmark (`BrandHeader`, `BrandLink`) and the
+dashboard footer. Without it, `BrandHeader` shows no name and the footer shows no copyright.
+
+## Themes
+
+| id | Name | Body font | Heading font |
+|---|---|---|---|
+| `default` | Warm & rounded | `--font-inter` | |
+| `luxe` | Dark luxe | `--font-inter` | |
+| `editorial` | Editorial | `--font-inter` | `--font-editorial` |
+| `pro` | Data-dense pro | `--font-inter` | |
+| `minimal` | Minimal | `--font-public-sans` | |
+| `cobalt` | Electric cobalt | `--font-inter` | `--font-sora` |
+| `noir` | Noir | `--font-inter` | `--font-grotesk` |
+| `azure` | Azure | `--font-manrope` | |
+| `purplehaze` | Purple haze | `--font-inter` | `--font-chakra` |
+| `verdigris` | Verdigris | `--font-public-sans` | |
+| `console` | Console | `--font-jetbrains` | |
+| `ledger` | Ledger | `--font-spectral` | `--font-spectral` |
+| `damson` | Damson | `--font-public-sans` | |
+| `damsonlight` | Damson Light | `--font-public-sans` | |
+| `seafoam` | Seafoam | `--font-manrope` | |
+| `periwinkle` | Periwinkle | `--font-inter` | `--font-sora` |
+| `verdinklesquare` | Verdinkle Square | `--font-manrope` | |
+| `azurinklerounded` | Azurinkle Rounded | `--font-manrope` | |
+| `butter` | Butter | `--font-manrope` | `--font-spectral` |
+
+`mui-atelier/theme/themes` exports `ORG_THEMES` (`[{ id, label, def }]`), `getOrgTheme(id)`,
+`resolveThemeId(id)`, `getChromeTheme(id)`, `appRootTheme(accent)`, `FONTS` and
+`createThemeCatalog`. An unknown or empty id resolves to `default`, never to `null`, so a stored
+choice that no longer exists still renders.
+
+### Fonts
+
+Themes never load fonts. They name CSS variables, each with a fallback stack inside the `var()`,
+so a face you have not loaded degrades to a system font rather than to Times. Load the ones your
+chosen themes use with `next/font` and put the variables on `<html>`:
+
+| Variable | Face |
+|---|---|
+| `--font-inter` | Inter |
+| `--font-editorial` | Source Serif 4 |
+| `--font-mono` | IBM Plex Mono (meta labels) |
+| `--font-public-sans` | Public Sans |
+| `--font-sora` | Sora |
+| `--font-grotesk` | Space Grotesk |
+| `--font-manrope` | Manrope |
+| `--font-chakra` | Chakra Petch |
+| `--font-jetbrains` | JetBrains Mono |
+| `--font-spectral` | Spectral |
+| `--font-roboto` | Roboto (the `berry` type ramp) |
+
+`preload: false` on everything except your default face keeps unused themes from costing a
+download.
+
+### A different theme for part of the page
+
+`OrgThemeRegistry` applies another theme to a subtree inside the root one: an organisation's own
+theme on its pages, say. MUI injects palette variables once at `:root`, so this component
+re-scopes the nested theme's CSS variables to a class on its wrapper, and puts that class on
+dialogs, menus, popovers, drawers and tooltips so portalled content keeps the palette too.
+
+```jsx
+import OrgThemeRegistry, { useOrgThemeScope } from 'mui-atelier/theme/OrgThemeRegistry';
+
+<OrgThemeRegistry themeId={org.theme}>{children}</OrgThemeRegistry>
+```
+
+Anything else you portal to `document.body` can take `useOrgThemeScope()` as its class.
+
+### Your own themes
+
+A theme is a plain object: `accent`, `palette.light` / `palette.dark`, `radii`, `shadow`,
+`bodyFont`, optional `headingFont`, and the `ui` personality. The full shape is documented at the
+top of `src/theme/themes.js`. The simplest way to write one is to start from an existing
+definition:
+
+```js
+import { createThemeCatalog, getOrgTheme, ORG_THEMES } from 'mui-atelier/theme/themes';
+
+const harbour = {
+  ...getOrgTheme('azure'),
+  accent: { light: '#0B5CAD', dark: '#7FB6F0', contrastLight: '#FFFFFF', contrastDark: '#0A1B2E',
+    gradient: { light: ['#1A6FC4', '#0B5CAD'], dark: ['#7FB6F0', '#5C9BDB'] } },
+};
+
+export const catalog = createThemeCatalog({
+  themes: [...ORG_THEMES, { id: 'harbour', label: 'Harbour', def: harbour }],
+  chrome: { signin: harbour },   // named looks that are not user-selectable
+  chromeDefaultId: 'signin',
+});
+```
+
+A catalogue is data and functions, not a registry. Import it wherever themes are resolved, on
+the server and in the browser, so both compute the same answer. A theme from your own catalogue
+goes to `OrgThemeRegistry` as its definition:
+
+```jsx
+<OrgThemeRegistry themeId={id} theme={catalog.getOrgTheme(id)}>{children}</OrgThemeRegistry>
+```
+
+Test your themes against the same contract the built-in ones pass: every part the factory reads,
+AA contrast for the accent, data and status colours, a visible focus ring, and more.
+
+```js
+// themes.test.js  (// @vitest-environment jsdom)
+import { describeThemeContract } from 'mui-atelier/test/themeContract';
+import { catalog } from './themes';
+
+describeThemeContract(catalog.themes);
+```
+
+## Components
+
+Layout: `DashboardLayout`, `PublicLayout`, `PageHeader`, `SectionPanel`, `SubCard`, `CardHead`,
+`TabbedCard`, `SectionTabs`, `SiteNav`, `PublicNav`, `Breadcrumbs`, `Eyebrow`, `HeadingLevel`,
+`HeadingHelp`, `BrandHeader`, `BrandLink`, `BrandMark`, `AuthCard`, `AuthSplash`.
+
+Data and status: `DataTable` (sorting, a filter bar generated from the columns, selection,
+pagination, a card layout on phones), `TableFilters`, `StatusChip`, `StatusDot`, `StatTile`,
+`ListRow`, `RowList`, `IconTile`, `DetailRows`, `EmptyNote`, `Skeletons`.
+
+Forms and feedback: `LabeledField` / `LabeledSelect` (label above the control), `PasswordField`,
+`AddressFields` (every country and its regions), `SaveState`, `ConfirmProvider` / `useConfirm`,
+`ToastProvider` / `useToast`, `RouteMessage`, `Sortable`, `ImagePreviewDialog`, `SafeHtml`,
+`ModeToggle`, `LanguageSwitcher`.
+
+Hooks: `useUnsavedChanges`, `useOverflowTabs`, `useDocumentTitle`.
+
+### Status colours
+
+A chip states a **role**, and the theme supplies the colour:
+
+```jsx
+<StatusChip role="progress" label="Published" />   // progress | done | caution | bad | idle | tag
+```
+
+`progress` takes the theme's data hue (MUI `info`), `done` success, `caution` warning, `bad`
+error, `idle` neutral, and `tag` marks a label rather than a state. The lint rule below stops a
+call site hardcoding a chip colour, which would look right in one theme and wrong in the rest.
+
+## Strings
+
+Components read their text through next-intl from the `uikit` namespace. English, Spanish and
+Chinese ship with the package:
+
+```js
+// i18n/request.js
+import { getRequestConfig } from 'next-intl/server';
+import { loadUikitMessages } from 'mui-atelier/i18n/loadMessages';
+
+export default getRequestConfig(async () => {
+  const locale = 'en';
+  const messages = (await import(`../messages/${locale}.json`)).default;
+
+  return { locale, messages: { ...messages, uikit: await loadUikitMessages(locale) } };
+});
+```
+
+A locale the package does not ship falls back to English. To add one, lay your catalogue over
+the English one with `mergeMessages` from `mui-atelier/i18n/mergeMessages`.
+
+## Lint
+
+```js
+// eslint.config.mjs
+import { chipRules } from 'mui-atelier/eslint';
+
+export default defineConfig([...nextVitals, chipRules]);
+```
+
+It rejects `<Chip color="…">` (use `StatusChip`) and a dotted palette path in a `color` prop
+(`color="text.secondary"`), which MUI silently ignores (use `sx={{ color: 'text.secondary' }}`).
+
+## Testing with Vitest
+
+The package is plain ES modules that import `next/link` and `next/navigation`, so let Vitest
+process it rather than load it from `node_modules` as-is:
+
+```js
+// vitest.config.js
+export default defineConfig({ test: { server: { deps: { inline: ['mui-atelier'] } } } });
+```
+
+`mui-atelier/test/jsdomShims` adds the browser APIs jsdom lacks and the components use
+(`ResizeObserver`, `localStorage`, `Range` layout). Import it from your setup file.
+
+## Namespaces
+
+The kit's own extensions carry an `rt` prefix: `theme.rt` (radii, surface and navigation settings
+the components read), the CSS variables `--rt-grad-from`, `--rt-grad-to`, `--rt-focus`,
+`--rt-mark-radius` and `--rt-mark-shadow`, the class names `rt-org-*`, `rt-tbl` and
+`rt-wordmark`, and the `localStorage` key `rt:nav:collapsed`.
+
+## Licence
+
+MIT. See [NOTICE](NOTICE) for the MIT-licensed works this package includes material from.

package/dist/components/AddressFields.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import Autocomplete from "@mui/material/Autocomplete";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import LabeledField from "./LabeledField.js";
+let dataPromise;
+const loadData = () => dataPromise ??= import("../lib/countryRegionData.js");
+function AddressFields({ value, onChange, disabled = false }) {
+  const t = useTranslations("uikit");
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    let active = true;
+    loadData().then((m) => {
+      if (active) setData(m);
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  const set = (patch) => onChange({ ...value, ...patch });
+  const text = (key, label, { sx, ...props } = {}) => /* @__PURE__ */ jsx(LabeledField, { label, sx, children: ({ id }) => /* @__PURE__ */ jsx(
+    TextField,
+    {
+      id,
+      fullWidth: true,
+      value: value[key] ?? "",
+      disabled,
+      onChange: (e) => set({ [key]: e.target.value }),
+      ...props
+    }
+  ) });
+  const countries = data?.COUNTRIES ?? [];
+  const country = data ? countries.find((c) => c.countryShortCode === value.country) ?? null : null;
+  const regions = data ? data.regionsForCountry(value.country) : [];
+  const region = regions.find((r) => data.regionCode(value.country, r) === value.region || r.name === value.region) ?? null;
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    text("address_line1", t("address.line1"), { fullWidth: true }),
+    text("address_line2", t("address.line2"), { fullWidth: true }),
+    /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, children: [
+      text("city", t("address.city"), { sx: { flex: 1 } }),
+      text("postal_code", t("address.postalCode"), { sx: { flex: 1 }, slotProps: { htmlInput: { maxLength: 32 } } })
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, children: [
+      /* @__PURE__ */ jsx(LabeledField, { label: t("address.country"), sx: { flex: 1 }, children: ({ id }) => /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          id,
+          fullWidth: true,
+          options: countries,
+          value: country,
+          loading: !data,
+          disabled: disabled || !data,
+          autoHighlight: true,
+          getOptionLabel: (c) => c.countryName,
+          isOptionEqualToValue: (a, b) => a.countryShortCode === b.countryShortCode,
+          onChange: (_, c) => set({ country: c?.countryShortCode ?? "", region: "" }),
+          renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(LabeledField, { label: t("address.region"), sx: { flex: 1 }, children: ({ id }) => /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          id,
+          fullWidth: true,
+          options: regions,
+          value: region,
+          disabled: disabled || !value.country,
+          autoHighlight: true,
+          getOptionLabel: (r) => r.name,
+          isOptionEqualToValue: (a, b) => a.name === b.name,
+          onChange: (_, r) => set({ region: r ? data.regionCode(value.country, r) : "" }),
+          renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params })
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  AddressFields as default
+};

package/dist/components/AuthCard.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import BrandMark from "./BrandMark.js";
+import BrandHeader from "./BrandHeader.js";
+import { AuthInsetContext } from "./LabeledField.js";
+import { AUTH_CARD_MAX_WIDTH } from "../lib/authCard.js";
+import useDocumentTitle from "../hooks/useDocumentTitle.js";
+function AuthCard({ title, subtitle, children, footer, header = /* @__PURE__ */ jsx(BrandHeader, {}), splash = null }) {
+  useDocumentTitle(typeof title === "string" ? title : void 0);
+  const asideOfSplash = splash ? { display: { xs: "block", md: "none" } } : void 0;
+  const column = /* @__PURE__ */ jsx(Card, { sx: { width: "100%", maxWidth: AUTH_CARD_MAX_WIDTH }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { p: { xs: 3, sm: 5 }, "&:last-child": { pb: { xs: 3, sm: 5 } } }, children: [
+    /* @__PURE__ */ jsxs(Stack, { spacing: 2, sx: { alignItems: "center", mb: 3 }, children: [
+      header || splash ? null : /* @__PURE__ */ jsx(BrandMark, { size: 44, sx: asideOfSplash }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "h3",
+          component: "h1",
+          align: "center",
+          sx: (theme) => ({
+            color: theme.rt?.ui?.authTitle === "ink" ? theme.vars.palette.text.primary : theme.vars.palette.primary.main,
+            fontWeight: 700
+          }),
+          children: title
+        }
+      ),
+      subtitle ? (
+        // 16px, not the ramp's body1: berry's body1 is 14px (Roboto density
+        // for dense app screens) and this is a sparse one. A no-op for every
+        // other theme, whose body1 is already 16.
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", align: "center", sx: { color: "text.secondary", fontSize: 16, ...asideOfSplash }, children: subtitle })
+      ) : null
+    ] }),
+    children,
+    footer ? /* @__PURE__ */ jsx(Box, { sx: { mt: 3, pt: 2, borderTop: "1px solid", borderColor: "divider", textAlign: "center" }, children: footer }) : null
+  ] }) });
+  const page = splash ? /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        minHeight: "100dvh",
+        // No accent wash here, unlike the single-column page below: this ground
+        // is a 40%-wide strip beside a full-bleed brand panel, and a glow
+        // centred on the whole grid would be behind the panel, not the form.
+        bgcolor: "background.default",
+        display: "grid",
+        // One column below md, and the splash simply isn't rendered there.
+        // Not 50/50: the form is a fixed-width column, so an even split
+        // leaves it adrift in the middle of its own half on a wide screen.
+        gridTemplateColumns: { xs: "1fr", md: "1.05fr 1fr", lg: "1.15fr 1fr" }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: { xs: "none", md: "flex" }, flexDirection: "column", "& > *": { flex: 1, minHeight: 0 } }, children: splash }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Box, { sx: { display: { md: "none" } }, children: header }),
+          /* @__PURE__ */ jsx(Box, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", py: 6, px: { xs: 2, md: 3 } }, children: column })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        minHeight: "100dvh",
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: "background.default",
+        /*
+         * The ground, on EVERY theme. A 60rem circle of the
+         * theme's own accent at 10%, centred a fifth of a page above the top
+         * edge, so only its lower arc is on screen: the page warms towards the
+         * bar and is flat by the middle. It reads as depth on a saturated
+         * accent and as almost nothing on a muted one, which is the theme
+         * speaking, not a branch — no theme opts out of it, so there is no
+         * per-palette fork on this screen.
+         */
+        backgroundImage: (theme) => `radial-gradient(60rem 60rem at 50% -20%, rgba(${theme.vars.palette.primary.mainChannel} / 0.10), transparent 60%)`
+      },
+      children: [
+        header,
+        /* @__PURE__ */ jsx(Box, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", py: 6, px: 2 }, children: column })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(AuthInsetContext.Provider, { value: true, children: page });
+}
+export {
+  AuthCard as default
+};

package/dist/components/AuthSplash.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import BrandMark from "./BrandMark.js";
+function AuthSplash({ title, tagline, logoUrl = null }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        overflow: "hidden",
+        display: "flex",
+        alignItems: "center",
+        px: { md: 6, lg: 9 },
+        py: 8,
+        color: "primary.contrastText",
+        // The ground. `primary.dark → primary.main → data` runs the theme's own
+        // accent into its data hue, which is the one other colour every theme
+        // guarantees and guarantees to be distinct from the accent.
+        backgroundImage: (t) => `linear-gradient(145deg,
+          rgb(${t.vars.palette.primary.darkChannel}) 0%,
+          rgb(${t.vars.palette.primary.mainChannel}) 52%,
+          rgb(${t.vars.palette.info.mainChannel}) 100%)`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            "aria-hidden": true,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              backgroundImage: (t) => `linear-gradient(100deg,
+            rgb(${t.vars.palette.primary.mainChannel}) 0%,
+            rgba(${t.vars.palette.primary.mainChannel} / 0.72) 48%,
+            rgba(${t.vars.palette.primary.mainChannel} / 0) 82%)`,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "svg",
+            "aria-hidden": true,
+            viewBox: "0 0 600 600",
+            sx: {
+              position: "absolute",
+              inset: "-10% -20%",
+              width: "140%",
+              height: "120%",
+              opacity: 0.5,
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.25", children: [90, 150, 210, 270, 330, 390].map((r) => /* @__PURE__ */ jsx("circle", { cx: "70", cy: "520", r, opacity: 0.5 - r / 1200 }, r)) }),
+              /* @__PURE__ */ jsx("g", { fill: "currentColor", opacity: "0.35", children: Array.from({ length: 7 }, (_, row) => Array.from({ length: 7 }, (_2, col) => /* @__PURE__ */ jsx("circle", { cx: 390 + col * 30, cy: 60 + row * 30, r: "2.5" }, `${row}-${col}`))) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Stack, { spacing: 3, sx: { position: "relative", maxWidth: 460 }, children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                alignSelf: "flex-start",
+                bgcolor: "common.white",
+                borderRadius: 2,
+                px: 1.5,
+                py: 1.25,
+                display: "inline-flex",
+                boxShadow: "0 2px 10px -4px rgba(16,24,40,0.35)"
+              },
+              children: /* @__PURE__ */ jsx(BrandMark, { size: 40, logoUrl, alt: "" })
+            }
+          ),
+          title ? /* @__PURE__ */ jsx(Typography, { variant: "h3", component: "p", sx: { fontWeight: 700, lineHeight: 1.15 }, children: title }) : null,
+          tagline ? /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.0625rem", lineHeight: 1.6, opacity: 0.88 }, children: tagline }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  AuthSplash as default
+};