@aurostack/stacks 0.1.0

package/templates/react-monorepo/files/apps/auth/src/routes/verify-email.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate, useSearchParams } from 'react-router';
+import { Mail } from 'lucide-react';
+import { getAuthClient } from '@acme/auth';
+import { AuthLayout } from '@acme/layouts';
+import { Alert, Button, Card } from '@acme/ui';
+import { SubmitButton } from '../components/submit-button';
+import { resendVerification, verifyEmailToken } from '../lib/auth-actions';
+import { AUTH_URL } from '../lib/env';
+
+export function VerifyEmailRoute() {
+	const [params] = useSearchParams();
+	const navigate = useNavigate();
+	const email = params.get('email') ?? '';
+	const token = params.get('token');
+	const [error, setError] = useState<string | null>(null);
+	const [checking, setChecking] = useState(Boolean(token));
+	const [resent, setResent] = useState(false);
+
+	useEffect(() => {
+		if (!token) return;
+		let active = true;
+		void (async () => {
+			const { error: err } = await verifyEmailToken(token);
+			if (!active) return;
+			if (err) {
+				setError(err);
+				setChecking(false);
+				return;
+			}
+			navigate('/verified', { replace: true });
+		})();
+		return () => {
+			active = false;
+		};
+	}, [token, navigate]);
+
+	const handleClickedLink = async () => {
+		setError(null);
+		setChecking(true);
+		const { data } = await getAuthClient().getSession();
+		setChecking(false);
+		if (data?.user?.emailVerified) {
+			navigate('/verified');
+		} else {
+			setError("We can't confirm it yet — click the link in your email, then try again.");
+		}
+	};
+
+	const handleResend = async () => {
+		setError(null);
+		const { error: err } = await resendVerification({ email, callbackURL: `${AUTH_URL}/verified` });
+		if (err) {
+			setError(err);
+			return;
+		}
+		setResent(true);
+	};
+
+	return (
+		<AuthLayout>
+			<Card className="items-center text-center">
+				<span className="flex size-16 items-center justify-center rounded-full bg-accent text-ink-deep">
+					<Mail className="size-7" />
+				</span>
+				<div className="flex flex-col gap-2">
+					<h2 className="font-display text-2xl font-black text-foreground">Check your inbox</h2>
+					<p className="text-sm text-body">
+						We sent a verification link to{' '}
+						<strong className="font-semibold text-foreground">{email || 'your email'}</strong>.
+					</p>
+					<p className="text-sm text-mute">The link expires in 24 hours. Check spam if you don't see it.</p>
+				</div>
+				{error ? (
+					<Alert variant="destructive" className="w-full text-left">
+						{error}
+					</Alert>
+				) : null}
+				<div className="flex w-full flex-col gap-2">
+					<SubmitButton type="button" loading={checking} onClick={handleClickedLink}>
+						I've clicked the link
+					</SubmitButton>
+					<Button type="button" variant="outline" className="w-full" onClick={handleResend} disabled={resent}>
+						{resent ? 'Verification email sent' : 'Resend email'}
+					</Button>
+				</div>
+				<p className="text-sm text-body">
+					Wrong address?{' '}
+					<Link to="/signup" className="font-semibold text-ink-deep">
+						Edit your email
+					</Link>
+				</p>
+			</Card>
+		</AuthLayout>
+	);
+}

package/templates/react-monorepo/files/apps/auth/src/vite-env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+
+interface ImportMetaEnv {
+	VITE_APP_API_URL: string;
+	VITE_APP_ALLOWED_HOSTS: string;
+	VITE_APP_LANDING: string;
+	VITE_APP_CLIENT_HOST: string;
+	VITE_APP_ADMIN_HOST: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

package/templates/react-monorepo/files/apps/auth/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "@acme/config/tsconfig/react.json",
+	"compilerOptions": {
+		"types": ["vite/client"],
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": ["src"]
+}

package/templates/react-monorepo/files/apps/auth/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineAppConfig } from '@acme/config/vite';
+import { BRAND } from '@acme/ui/brand';
+import { THEME_COLORS } from '@acme/ui/theme-colors';
+
+// `themeColors` substitutes %THEME_LIGHT%/%THEME_DARK% into index.html — the
+// pre-paint theme script and the `html` background both need them, and HTML
+// can't import. `appTitle` substitutes %APP_TITLE% for the same reason: the
+// static <title> must match the suffix MetaProvider appends at runtime.
+export default defineAppConfig({
+	rootDir: import.meta.dirname,
+	themeColors: THEME_COLORS,
+	appTitle: BRAND.name
+});

package/templates/react-monorepo/files/apps/client/.bin/secrets.js

@@ -0,0 +1,57 @@
+import { execSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Pulls this workspace's env from Infisical into the matching .env file.
+// The Infisical path is derived from the package name, e.g.
+//   @scope/types -> /frontend/types, landing -> /frontend/landing
+//
+// The project ID comes from the environment rather than being hardcoded: it
+// identifies one organisation's vault, so a value baked in here would follow
+// every copy of this scaffold to projects it has nothing to do with. Put it in
+// your shell profile, or in a committed `.infisical.json`.
+const PROJECT_ID = process.env.INFISICAL_PROJECT_ID;
+const SECRET_ROOT = process.env.INFISICAL_PATH_PREFIX ?? '/frontend';
+
+const ENV_FILES = {
+	dev: '.env',
+	test: '.env.test',
+	staging: '.env.staging',
+	prod: '.env.production'
+};
+
+const normalizeEnv = (raw) => {
+	if (['dev', 'development'].includes(raw)) return 'dev';
+	if (['test', 'testing'].includes(raw)) return 'test';
+	if (['prod', 'production'].includes(raw)) return 'prod';
+	if (raw === 'staging') return 'staging';
+	throw new Error(`Unknown env '${raw}' (use one of: dev, test, staging, prod)`);
+};
+
+const parseEnvArg = () => {
+	const args = process.argv.slice(2);
+	const flagIndex = args.findIndex((a) => a === '-e' || a === '--env');
+	if (flagIndex !== -1 && args[flagIndex + 1]) return args[flagIndex + 1];
+	const inline = args.find((a) => a.startsWith('--env='));
+	if (inline) return inline.slice('--env='.length);
+	return 'development';
+};
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkg = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf-8'));
+const slug = pkg.name.replace(/^@[^/]+\//, '');
+const secretPath = `${SECRET_ROOT}/${slug}`;
+
+if (!PROJECT_ID) {
+	console.error('INFISICAL_PROJECT_ID is not set — nothing to fetch from.');
+	process.exit(1);
+}
+
+const env = normalizeEnv(parseEnvArg());
+const envFile = ENV_FILES[env];
+
+console.log(`Fetching secrets for '${slug}' (${env}) -> ${envFile}...`);
+execSync(`infisical export --projectId="${PROJECT_ID}" --path="${secretPath}" --env=${env} > ${envFile}`, {
+	stdio: 'inherit'
+});

package/templates/react-monorepo/files/apps/client/.env.example

@@ -0,0 +1,16 @@
+# Copy to .env. Vite only exposes variables prefixed VITE_, and inlines them at
+# build time — never put a secret here, it ships to the browser.
+
+# Backend base URL. Better Auth lives at ${VITE_APP_API_URL}/auth.
+VITE_APP_API_URL='http://localhost:5000'
+
+# Sibling app origins. All four share one session cookie across subdomains, so
+# these must agree with the backend's BETTER_AUTH_COOKIE_DOMAIN and its
+# trustedOrigins list, or login will appear to succeed and then bounce.
+VITE_APP_LANDING='http://localhost:3000'
+VITE_APP_AUTH_HOST='http://localhost:3001'
+VITE_APP_CLIENT_HOST='http://localhost:3002'
+VITE_APP_ADMIN_HOST='http://localhost:3003'
+
+# This app's own dev port.
+PORT='3002'

package/templates/react-monorepo/files/apps/client/eslint.config.mjs

@@ -0,0 +1,3 @@
+import config from '@acme/config/eslint';
+
+export default config;

package/templates/react-monorepo/files/apps/client/index.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+		<link rel="icon" href="/favicon.ico" sizes="any" />
+		<link rel="manifest" href="/site.webmanifest" />
+		<meta name="theme-color" content="%THEME_LIGHT%" />
+		<!--
+			Applies the saved (or system) theme before first paint, so the app never
+			flashes light then flips to dark. Mirrors `themeInitScript` in @acme/ui —
+			inlined because it must run before any module loads. Keep the two in sync.
+			%THEME_LIGHT/DARK% come from THEME_COLORS via the shared vite config.
+		-->
+		<script>
+			(function () {
+				try {
+					var m = localStorage.getItem('acme-theme');
+					var d =
+						m === 'dark' || ((m === null || m === 'system') && matchMedia('(prefers-color-scheme: dark)').matches);
+					var r = document.documentElement;
+					r.classList.toggle('dark', d);
+					r.style.colorScheme = d ? 'dark' : 'light';
+					var t = document.querySelector('meta[name="theme-color"]');
+					if (t) t.setAttribute('content', d ? '%THEME_DARK%' : '%THEME_LIGHT%');
+				} catch (e) {}
+			})();
+		</script>
+		<!--
+			globals.css only styles `body`, so without this the UA canvas paints white
+			for the moment before the stylesheet lands — a white flash on a dark load.
+		-->
+		<style>
+			html {
+				background: %THEME_LIGHT%;
+			}
+			html.dark {
+				background: %THEME_DARK%;
+			}
+		</style>
+		<meta name="description" content="Acme Corp." />
+		<!--
+			Private surface: never indexed. `robots.txt` only discourages crawling,
+			while `noindex` prevents listing, so both are present. This app's routes
+			include password-reset and email-verify URLs.
+		-->
+		<meta name="robots" content="noindex, nofollow" />
+		<title>%APP_TITLE%</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

package/templates/react-monorepo/files/apps/client/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "client",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc --noEmit && vite build",
+		"preview": "vite preview",
+		"lint": "eslint .",
+		"typecheck": "tsc --noEmit",
+		"secrets": "node .bin/secrets.js"
+	},
+	"dependencies": {
+		"@acme/api": "workspace:*",
+		"@acme/auth": "workspace:*",
+		"@acme/layouts": "workspace:*",
+		"@acme/ui": "workspace:*",
+		"@reduxjs/toolkit": "^2.12.0",
+		"apexcharts": "^6.5.0",
+		"lucide-react": "^1.17.0",
+		"react": "^19.2.6",
+		"react-apexcharts": "^2.1.1",
+		"react-dom": "^19.2.6",
+		"react-redux": "^9.3.0",
+		"react-router": "^8.2.0"
+	},
+	"devDependencies": {
+		"@acme/config": "workspace:*",
+		"@types/react": "^19.2.14",
+		"@types/react-dom": "^19.2.3",
+		"vite": "^8.0.12",
+		"vite-plugin-pwa": "^1.3.0"
+	}
+}

package/templates/react-monorepo/files/apps/client/src/App.tsx

@@ -0,0 +1,3 @@
+// The Client app is driven by the router (see app/router.tsx); this module is
+// intentionally empty and no longer rendered.
+export {};

package/templates/react-monorepo/files/apps/client/src/app/nav.tsx

@@ -0,0 +1,14 @@
+import { Home, Settings } from 'lucide-react';
+import type { NavItem } from '@acme/layouts';
+
+/**
+ * Drives the app shell's navigation. Keep it in step with `router.tsx` — the
+ * shell derives the sidebar from this list, not from the router, so a route
+ * added in one place and not the other is simply unreachable or dead.
+ *
+ * `icon` is a rendered element, not a component reference.
+ */
+export const NAV_ITEMS: NavItem[] = [
+	{ to: '/', label: 'Home', icon: <Home className="size-4" />, end: true },
+	{ to: '/settings', label: 'Settings', icon: <Settings className="size-4" /> }
+];

package/templates/react-monorepo/files/apps/client/src/app/providers.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { configureApi } from '@acme/api';
+import { AuthProvider, configureAuth, redirectToLogin } from '@acme/auth';
+import { MetaProvider, ThemeProvider, Toaster, installZodErrorMap } from '@acme/ui';
+import { store } from './store';
+
+const env = import.meta.env;
+const apiBaseUrl = env.VITE_APP_API_URL;
+const authAppUrl = env.VITE_APP_AUTH_HOST as string;
+
+const trustedOrigins = [env.VITE_APP_LANDING, env.VITE_APP_CLIENT_HOST, env.VITE_APP_ADMIN_HOST, authAppUrl].filter(
+	(value): value is string => Boolean(value)
+);
+
+// Wire the shared API + auth clients once, before rendering. Unauthenticated users are sent to the Auth app and returned here.
+configureApi({ baseUrl: apiBaseUrl, onUnauthorized: () => redirectToLogin() });
+configureAuth({
+	authApiBaseUrl: `${apiBaseUrl}/auth`,
+	authAppUrl,
+	trustedOrigins,
+	defaultRedirect: (env.VITE_APP_CLIENT_HOST as string | undefined) ?? window.location.origin
+});
+installZodErrorMap();
+
+export function Providers({ children }: { children: ReactNode }) {
+	return (
+		// ThemeProvider above the Redux Provider: it only touches the document
+		// (`dark` class, color-scheme, theme-color meta) and must not re-render
+		// through the store.
+		<ThemeProvider>
+			<MetaProvider>
+				<Provider store={store}>
+					<AuthProvider>
+						{children}
+						<Toaster />
+					</AuthProvider>
+				</Provider>
+			</MetaProvider>
+		</ThemeProvider>
+	);
+}

package/templates/react-monorepo/files/apps/client/src/app/router.tsx

@@ -0,0 +1,50 @@
+import { Suspense, lazy, type ReactNode } from 'react';
+import { createBrowserRouter } from 'react-router';
+import { ProtectedRoute, signOut, useAuth } from '@acme/auth';
+import { AppShell, AppShellSkeleton, ErrorBoundary, NotFound, RouteFallback } from '@acme/layouts';
+import { NAV_ITEMS } from './nav';
+import { HomeRoute } from '../routes/home';
+
+/**
+ * Feature routes are lazy so the initial bundle stays the shell plus one page.
+ * Add a route here and a matching entry in `nav.tsx`.
+ */
+const SettingsRoute = lazy(() => import('../routes/settings').then((m) => ({ default: m.SettingsRoute })));
+
+const lazyRoute = (element: ReactNode) => <Suspense fallback={<RouteFallback />}>{element}</Suspense>;
+
+/**
+ * The shell reads the session itself rather than taking it as a prop —
+ * `ProtectedRoute` has already established the user is authenticated by the
+ * time this renders.
+ *
+ * `ErrorBoundary` wraps the shell rather than being passed as the route's
+ * `errorElement`: it is a plain React error boundary taking `children`, so it
+ * catches render errors anywhere below, including inside a lazy chunk.
+ */
+function Shell() {
+	const { user } = useAuth();
+	return (
+		<ErrorBoundary>
+			<AppShell nav={NAV_ITEMS} user={user ?? {}} onSignOut={() => void signOut()} />
+		</ErrorBoundary>
+	);
+}
+
+export const router = createBrowserRouter([
+	{
+		// `fallback` is required and must not be blank: the session round trip is
+		// cross-origin and takes most of a second, and rendering nothing for that
+		// long reads as a broken app.
+		element: (
+			<ProtectedRoute fallback={<AppShellSkeleton />}>
+				<Shell />
+			</ProtectedRoute>
+		),
+		children: [
+			{ index: true, element: <HomeRoute /> },
+			{ path: 'settings', element: lazyRoute(<SettingsRoute />) }
+		]
+	},
+	{ path: '*', element: <NotFound /> }
+]);

package/templates/react-monorepo/files/apps/client/src/app/store.ts

@@ -0,0 +1,15 @@
+import { makeStore } from '@acme/api';
+import { authReducer } from '@acme/auth';
+import { useDispatch, useSelector } from 'react-redux';
+
+export const store = makeStore({
+	reducer: {
+		auth: authReducer
+	}
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();

package/templates/react-monorepo/files/apps/client/src/lib/env.ts

@@ -0,0 +1,12 @@
+const env = import.meta.env;
+
+/** Backend base URL (Better Auth lives at `${API_URL}/auth`). */
+export const API_URL = env.VITE_APP_API_URL as string;
+/** The Auth app users are redirected to for login. */
+export const AUTH_HOST = env.VITE_APP_AUTH_HOST as string;
+/** This client app's own origin. */
+export const CLIENT_URL = env.VITE_APP_CLIENT_HOST as string;
+/** The admin console origin. */
+export const ADMIN_URL = env.VITE_APP_ADMIN_HOST as string;
+/** The public marketing site (logout destination). */
+export const LANDING_URL = env.VITE_APP_LANDING as string;

package/templates/react-monorepo/files/apps/client/src/main.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider } from 'react-router';
+import '@acme/ui/globals.css';
+import { Providers } from './app/providers';
+import { router } from './app/router';
+
+// If a landing view needs data immediately, kick its query off here rather than
+// in a component effect: at this point every module above has finished
+// evaluating and `providers` has already called `configureApi` at module scope,
+// so the fetch races the session check instead of queueing behind it.
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<Providers>
+			<RouterProvider router={router} />
+		</Providers>
+	</StrictMode>
+);

package/templates/react-monorepo/files/apps/client/src/routes/home.tsx

@@ -0,0 +1,17 @@
+import { PageMeta } from '@acme/ui';
+
+export function HomeRoute() {
+	return (
+		<>
+			<PageMeta title="Home" />
+			<div className="space-y-2">
+				<h1 className="text-2xl font-semibold">Home</h1>
+				<p className="text-muted-foreground">
+					Replace this with your first feature. Data calls belong in a
+					<code className="mx-1">features/&lt;name&gt;/api.ts</code>
+					slice that extends the shared <code>baseApi</code>.
+				</p>
+			</div>
+		</>
+	);
+}

package/templates/react-monorepo/files/apps/client/src/routes/settings.tsx

@@ -0,0 +1,10 @@
+import { PageMeta } from '@acme/ui';
+
+export function SettingsRoute() {
+	return (
+		<>
+			<PageMeta title="Settings" />
+			<h1 className="text-2xl font-semibold">Settings</h1>
+		</>
+	);
+}

package/templates/react-monorepo/files/apps/client/src/vite-env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="vite-plugin-pwa/react" />
+
+interface ImportMetaEnv {
+	VITE_APP_API_URL: string;
+	VITE_APP_ALLOWED_HOSTS: string;
+	VITE_APP_AUTH_HOST: string;
+	VITE_APP_LANDING: string;
+	VITE_APP_ADMIN_HOST: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

package/templates/react-monorepo/files/apps/client/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "@acme/config/tsconfig/react.json",
+	"compilerOptions": {
+		"types": ["vite/client"],
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": ["src"]
+}

package/templates/react-monorepo/files/apps/client/vite.config.ts

@@ -0,0 +1,120 @@
+import { defineAppConfig } from '@acme/config/vite';
+import { BRAND } from '@acme/ui/brand';
+import { THEME_COLORS } from '@acme/ui/theme-colors';
+import { VitePWA } from 'vite-plugin-pwa'; // @feature pwa
+
+// `themeColors` substitutes %THEME_LIGHT%/%THEME_DARK% into index.html — here the
+// pre-paint theme script and the boot splash both need them. The manifest below
+// reads the same object, so there is one source of truth; a hardcoded copy is how
+// the manifest once ended up #ffffff in both themes.
+export default defineAppConfig({
+	rootDir: import.meta.dirname,
+	themeColors: THEME_COLORS,
+	appTitle: BRAND.name,
+	plugins: [
+		// @feature:start pwa
+		VitePWA({
+			// 'prompt', not 'autoUpdate': a new build waits until the user accepts it
+			// (see components/pwa-update-prompt.tsx for why taking over mid-session
+			// breaks code-split routes).
+			registerType: 'prompt',
+			injectRegister: 'auto',
+			// No `includeAssets`. It adds files to the precache manifest that the icon
+			// globs already matched, which is how every icon ended up listed twice.
+			//
+			// `includeManifestIcons: false` for the same reason the icon globs went:
+			// the install icons (32 KB of android-chrome + maskable) are fetched by the
+			// OS at install time and play no part in rendering the shell offline, so
+			// precaching them just re-downloads them on every deploy.
+			includeManifestIcons: false,
+			devOptions: {
+				enabled: true,
+				type: 'module',
+				suppressWarnings: true
+			},
+			manifest: {
+				id: '/',
+				name: BRAND.name,
+				// short_name is what shows under the home-screen icon.
+				short_name: BRAND.name,
+				description: 'Acme Corp.',
+				start_url: '/',
+				scope: '/',
+				display: 'standalone',
+				theme_color: THEME_COLORS.light,
+				background_color: THEME_COLORS.light,
+				icons: [
+					{ src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
+					{ src: '/android-chrome-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
+					{ src: '/maskable-icon-192x192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
+					{ src: '/maskable-icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
+				]
+			},
+			workbox: {
+				/*
+				 * Precache = what's needed to boot the shell offline, and nothing else.
+				 * Every entry here is re-downloaded whenever its hash changes, so this
+				 * list is a recurring cost on every deploy, not a one-off install cost.
+				 *
+				 * Deliberately excluded:
+				 * - `png`/`ico`. The only images in the build are launch/app icons, which
+				 *   the OS and browser fetch themselves at install time and keep in the
+				 *   HTTP cache. None are needed to render the shell offline.
+				 * - The ApexCharts vendor chunk. At 763 KB it was 38% of the whole
+				 *   precache, for a `lazy()` import that only two routes reach. It's
+				 *   covered by the runtime cache below, so it still works offline —
+				 *   just from second use rather than before first use.
+				 * `svg` stays: nothing matches it today, but an SVG that reaches
+				 * `assets/` came from `src` and is therefore shell code.
+				 */
+				globPatterns: ['**/*.{js,css,html,svg,woff,woff2}'],
+				globIgnores: ['**/splash/**', 'assets/react-apexcharts.esm-*.js'],
+				navigateFallback: '/index.html',
+				cleanupOutdatedCaches: true,
+				runtimeCaching: [
+					{
+						/*
+						 * Anything hashed that isn't precached — the chart vendor chunk today,
+						 * plus whatever else gets excluded later. Safe as CacheFirst precisely
+						 * because the filenames are content-hashed: a changed file is a new
+						 * URL, so a stale entry is unreachable rather than wrong.
+						 */
+						urlPattern: ({ sameOrigin, url }) => sameOrigin && url.pathname.startsWith('/assets/'),
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'acme-assets',
+							expiration: { maxEntries: 60, maxAgeSeconds: 60 * 60 * 24 * 30 },
+							cacheableResponse: { statuses: [0, 200] }
+						}
+					},
+					{
+						/*
+						 * Remote images — user-uploaded avatars and the like, off the media host.
+						 * Matched
+						 * by request destination rather than hostname so it doesn't hardcode
+						 * the media origin, and bounded so an opaque cross-origin response
+						 * (which counts fully against quota) can't grow without limit.
+						 */
+						urlPattern: ({ request, sameOrigin }) => !sameOrigin && request.destination === 'image',
+						handler: 'StaleWhileRevalidate',
+						options: {
+							cacheName: 'acme-remote-images',
+							expiration: { maxEntries: 80, maxAgeSeconds: 60 * 60 * 24 * 7 },
+							cacheableResponse: { statuses: [0, 200] }
+						}
+					}
+					/*
+					 * No rule for `/v1`, on purpose. Decide deliberately before adding
+					 * one: a stale API response is worse than no response for anything
+					 * the user acts on, and offline degrading to "no data" is usually the
+					 * correct behaviour.
+					 *
+					 * Fonts need no rule either: they're self-hosted and same-origin, so
+					 * they're precached above, which is strictly better.
+					 */
+				]
+			}
+		})
+		// @feature:end
+	]
+});