veritas-kanban/web/index.html
Brad Groux 2a04b07198
feat: add v5 Mantine foundation
## Summary

- adds Mantine core/hooks/form/modals/notifications plus the required PostCSS setup
- wraps the web app and shared test renderer in a Veritas Mantine provider with modals, notifications, and color-scheme bridging
- defines the v5 Mantine theme, status colors, density defaults, breakpoints, and layout shell primitives
- keeps the existing `.dark` class contract active while migrated and unmigrated surfaces coexist
- documents the foundation conventions and bundle impact for the v5 UI migration

Closes #415.

## Verification

- CI: Build
- CI: Lint & Type Check
- CI: Security Audit
- CI: Workspace Unit Tests
- `pnpm --filter @veritas-kanban/web test -- mantine-theme`
- `pnpm --filter @veritas-kanban/web typecheck`
- `pnpm --filter @veritas-kanban/web test`
- `pnpm lint:budget`
- `pnpm audit --prod --audit-level=high`
- `pnpm build`
- `./node_modules/.bin/prettier --check docs/UI-MANTINE-MIGRATION.md web/index.html web/postcss.config.cjs web/src/__tests__/mantine-theme.test.tsx web/src/__tests__/test-utils.tsx web/src/components/layout/mantine-shell.tsx web/src/hooks/useTheme.ts web/src/main.tsx web/src/theme/color-scheme.ts web/src/theme/mantine-theme.ts web/src/theme/MantineRoot.tsx web/vite.config.ts web/package.json`
- `git diff --check`
- Browser smoke: `http://127.0.0.1:3000/` rendered the setup page with Mantine CSS variables, dark color scheme, no new console errors, and no horizontal overflow at 1280x720 or 390x844

## Notes

- Production audit still reports the existing 3 moderate advisories; the high-severity gate passes.
- Build now emits explicit Mantine vendor assets: `vendor-mantine-CvPmQ6ZW.css` at 214.56 kB / 31.59 kB gzip and `vendor-mantine-JZsLAwaX.js` at 148.11 kB / 45.81 kB gzip.
2026-05-31 03:05:48 -05:00

29 lines
882 B
HTML

<!doctype html>
<html lang="en">
<head>
<script>
// Apply theme immediately to prevent flash. Default dark.
(function () {
var value = null;
try {
value = localStorage.getItem('veritas-kanban-theme');
} catch (error) {
value = null;
}
var theme = value === 'light' ? 'light' : 'dark';
document.documentElement.dataset.mantineColorScheme = theme;
if (theme === 'dark') {
document.documentElement.classList.add('dark');
}
})();
</script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Veritas Kanban</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>