phase-7: motion, an installable app, and a capture that survives no signal

GSAP carries the counter roll-ups, the bandeja card physics, the dialog
transitions and the three success moments FLOWS.md allows. Every one of
them checks prefers-reduced-motion first and does nothing when it is set.

boneyard and canvas-ui are not what SPEC.md's stack table says they are:
on npm the names belong to two abandoned projects that do neither job.
The skeletons were already ours; the two canvas spots are now sixty lines
each with no dependency. DECISIONS.md records the substitution.

The app installs, keeps a scan taken with no network in IndexedDB and
sends it when there is one, falls back to a page that explains itself,
and can push a deadline notice. Reading the log of what is queued is the
source of truth, so the notice clears when the capture actually lands.

The CSP now allows scripts by per-request nonce rather than by
'unsafe-inline'. That forced /offline to render per request: a
prerendered page carries a build-time nonce no live policy matches, so
its scripts were blocked and it never hydrated.

Two crashes fixed on the way. web-push throws on a VAPID subject that is
not https: or mailto:, and the code handed it APP_PUBLIC_URL, so any
machine with push keys died at boot; a misconfigured optional channel now
switches itself off and says why. And a subscription the push service
answers 410 for is deleted rather than retried forever.

Lighthouse on the production build: accessibility 100, best practices 96,
SEO 100, performance 73. The performance number is not trustworthy on
this machine and DECISIONS.md says why; total blocking time did fall from
17.6s to 1.7s once the hero canvas stopped drawing at full resolution
every frame and the landing page stopped importing GSAP.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

packages/contracts/src/client.ts

@@ -29,6 +29,8 @@ import {
   OkDto,
   ProfileDto,
   type ProfileInput,
+  PushConfigDto,
+  type PushSubscriptionInput,
   type RejectInput,
   type RoleChangeInput,
   SessionDto,
@@ -228,6 +230,14 @@ export function createApiClient(options: ApiClientOptions = {}) {
     /** The PDF is a stream, so it is linked to rather than fetched. */
     declarationPdfUrl: (id: string) => `/api/declarations/${encodeURIComponent(id)}/pdf`,
 
+    // Push
+    getPushConfig: (signal?: AbortSignal) =>
+      request('GET', '/push/config', { schema: PushConfigDto, ...(signal ? { signal } : {}) }),
+    subscribeToPush: (body: PushSubscriptionInput) =>
+      request('POST', '/push/subscribe', { schema: OkDto, body }),
+    unsubscribeFromPush: (endpoint: string) =>
+      request('DELETE', '/push/subscribe', { schema: OkDto, body: { endpoint } }),
+
     // Notifications
     getNotificationPrefs: (signal?: AbortSignal) =>
       request('GET', '/me/notification-prefs', {

packages/contracts/src/dto.ts

@@ -390,6 +390,23 @@ export const SessionDto = z.object({
 });
 export type SessionDto = z.infer<typeof SessionDto>;
 
+/**
+ * `POST /push/subscribe`. The shape a browser's PushSubscription serialises to.
+ */
+export const PushSubscriptionInput = z.object({
+  endpoint: z.string().url(),
+  keys: z.object({ p256dh: z.string().min(1), auth: z.string().min(1) }),
+});
+export type PushSubscriptionInput = z.infer<typeof PushSubscriptionInput>;
+
+/**
+ * SPEC-GAP: the browser needs the VAPID public key to subscribe, and CONTRACTS.md has no
+ * endpoint that carries it. It is public by definition, so this is unauthenticated; a null
+ * key means the deployment has push switched off and the UI hides the offer.
+ */
+export const PushConfigDto = z.object({ publicKey: z.string().nullable() });
+export type PushConfigDto = z.infer<typeof PushConfigDto>;
+
 /* Admin (CONTRACTS.md section 3, FLOWS.md Flow H). Staff and superadmin only. */
 
 export const AdminUserDto = z.object({

packages/contracts/src/index.ts

@@ -58,6 +58,8 @@ export {
   HealthDto,
   ReadyDto,
   SessionDto,
+  PushSubscriptionInput,
+  PushConfigDto,
   AdminUserDto,
   AdminUserSearchDto,
   AdminUserOverviewDto,

packages/i18n/src/catalogs/en.ts

@@ -490,4 +490,24 @@ export const en: Record<MessageKey, string> = {
   "admin.audit.apply":          "Filter",
   "admin.audit.clear":          "Clear",
   "admin.audit.total":          "{count} entries",
+  // Offline and install (phase 7)
+  "offline.title":              "No connection",
+  "offline.body":               "We could not load this screen. Anything you saved syncs on its own once you are back online.",
+  "offline.queued":             "Syncs when you reconnect",
+  "offline.queuedCount":        "{count} waiting to sync",
+  "offline.syncFailed":         "We could not sync {count}. Try again.",
+  "install.title":              "Install the app",
+  "install.body":               "Add it to your home screen and scan faster.",
+  "install.action":             "Install",
+  "install.ios":                "On iPhone: tap Share, then Add to Home Screen.",
+  "push.title":                 "Alerts on your phone",
+  "push.body":                  "Only what matters: a deadline coming up and a declaration ready to review.",
+  "push.enable":                "Turn on alerts",
+  "push.enabled":               "Alerts are on",
+  "push.denied":                "Alerts are blocked in the browser. Turn them on from the site settings.",
+  "push.unsupported":           "This browser does not support alerts.",
+  "theme.title":                "Theme",
+  "theme.system":               "Match the system",
+  "theme.light":                "Light",
+  "theme.dark":                 "Dark",
 };

packages/i18n/src/catalogs/es.extra.ts

@@ -280,6 +280,28 @@ export const esExtra = {
   "admin.audit.clear":          "Limpiar",
   "admin.audit.total":          "{count} movimientos",
 
+  // Offline and install (phase 7)
+  "offline.title":              "Sin conexion",
+  "offline.body":               "No pudimos cargar esta pantalla. Tus comprobantes guardados se sincronizan solos cuando vuelva la señal.",
+  "offline.queued":             "Se sincroniza al conectarte",
+  "offline.queuedCount":        "{count} para sincronizar",
+  "offline.syncFailed":         "No pudimos sincronizar {count}. Probá de nuevo.",
+  "install.title":              "Instalá la app",
+  "install.body":               "Agregala a tu pantalla de inicio y escanea mas rapido.",
+  "install.action":             "Instalar",
+  "install.ios":                "En iPhone: tocá Compartir y despues Agregar a inicio.",
+  "push.title":                 "Avisos en el celular",
+  "push.body":                  "Te avisamos solo lo importante: un vencimiento cerca y una declaracion lista.",
+  "push.enable":                "Activar avisos",
+  "push.enabled":               "Avisos activados",
+  "push.denied":                "Los avisos estan bloqueados en el navegador. Activalos desde la configuracion del sitio.",
+  "push.unsupported":           "Este navegador no soporta avisos.",
+
+  "theme.title":                "Tema",
+  "theme.system":               "Como el sistema",
+  "theme.light":                "Claro",
+  "theme.dark":                 "Oscuro",
+
   // Chrome
   "common.language":        "Idioma",
   "common.languageEs":      "Español",