W0 web foundation: Vite + React SPA under /app/, sync-pull ledger, auth, tokens, shared components

web/ is the browser client's scaffold: Vite 8, React 19, TypeScript 5.9 strict, React Router 7 (basename /app, every
fixed route with a lazy placeholder page), TanStack Query 5 (refetch on focus and every 60 s), openapi-typescript
types generated from contracts/openapi.yaml with openapi-fetch. Reads go through GET /sync (no REST reads exist for
the ledger, SPEC §7): useLedger() pulls from cursor 0 and then incrementally, restarting on a new epoch or
cursor_ahead. Login pairs the browser as "Web · <browser>" with an invite code (E-3); every call sends the SPEC
§14.3.1 headers, a 401 signs out. kvitt-domain's split, balances, allocation and settlement rules are ported to
web/src/lib and pass every case of contracts/test-vectors. Design tokens from design-spec §2 in tokens.css
(light-dark()), Material Symbols Rounded (Apache-2.0) as generated inline SVG, sv/en catalogs generated from
docs/ux/strings.csv plus web-strings.csv. Gate: cd web && npm run check.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TQd3pEP9UeN2uifbHknQ7B

web/src/components/Toast.module.css

@@ -0,0 +1,51 @@
+.region {
+  position: fixed;
+  left: 50%;
+  bottom: var(--s6);
+  transform: translateX(-50%);
+  z-index: 200;
+  width: min(560px, calc(100% - 2 * var(--gutter)));
+  pointer-events: none;
+}
+@media (max-width: 719.98px) {
+  .region {
+    bottom: calc(var(--nav-height) + var(--s3));
+  }
+}
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+  min-height: 48px;
+  padding: var(--s1) var(--s1) var(--s1) var(--s4);
+  border-radius: var(--radius-small);
+  background: var(--inverse-surface);
+  color: var(--inverse-on-surface);
+  box-shadow: var(--elevation-3);
+}
+.message {
+  flex: 1;
+  font: var(--type-body-medium);
+  letter-spacing: var(--tracking-body-medium);
+  padding: var(--s2) 0;
+}
+.action,
+.close {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--radius-full);
+  min-height: 40px;
+}
+.action {
+  padding: 0 var(--s3);
+  color: var(--inverse-primary);
+  font: var(--type-label-large);
+}
+.close {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  color: var(--inverse-on-surface);
+}