@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/pwa/client.ts

@@ -0,0 +1,126 @@
+/**
+ * Browser side of the installable apps (Section 4.10, A65-023, ADR 0052): registering the service worker after the
+ * page hydrates, asking it to keep a page for offline reading, clearing it on sign-out, and the browser's push
+ * subscription. No React and no imports, so it adds a few hundred bytes to a route.
+ */
+
+const SW_PATH = "/sw.js";
+const REMEMBER_GAP_MS = 10_000;
+let lastRemembered = 0;
+
+/** True when the browser can run the service worker. */
+export function serviceWorkerSupported(): boolean {
+  return typeof navigator !== "undefined" && "serviceWorker" in navigator;
+}
+
+/** Runs `task` once the page has loaded and the browser is idle, so registration never competes with hydration. */
+export function afterHydration(task: () => void): void {
+  const idle = () => {
+    const w = window as Window & {
+      requestIdleCallback?: (cb: () => void, o?: { timeout: number }) => number;
+    };
+    if (typeof w.requestIdleCallback === "function") w.requestIdleCallback(task, { timeout: 5000 });
+    else window.setTimeout(task, 1500);
+  };
+  if (document.readyState === "complete") idle();
+  else window.addEventListener("load", idle, { once: true });
+}
+
+/** Registers /sw.js for the whole origin; null where it cannot run or registration fails. */
+export async function registerServiceWorker(): Promise<ServiceWorkerRegistration | null> {
+  if (!serviceWorkerSupported()) return null;
+  try {
+    return await navigator.serviceWorker.register(SW_PATH, { scope: "/" });
+  } catch {
+    return null;
+  }
+}
+
+function post(message: Record<string, unknown>): void {
+  if (!serviceWorkerSupported()) return;
+  const controller = navigator.serviceWorker.controller;
+  if (controller) controller.postMessage(message);
+  else void navigator.serviceWorker.ready.then((r) => r.active?.postMessage(message));
+}
+
+/**
+ * Asks the service worker to keep the page at `path` for offline reading: a page reached by client-side navigation
+ * never passes through it as a document. At most one request every 10 seconds; the worker skips a page it saved in
+ * the last 30 minutes.
+ */
+export function rememberPage(path: string, now = Date.now()): boolean {
+  if (now - lastRemembered < REMEMBER_GAP_MS) return false;
+  lastRemembered = now;
+  post({ type: "remember", url: path });
+  return true;
+}
+
+/** Tells the service worker the person signed out: it deletes every saved page and unsubscribes from push. */
+export function forgetOfflinePages(): void {
+  post({ type: "sign-out" });
+}
+
+// Push ------------------------------------------------------------------------------------------------------------
+
+/** True when this browser can subscribe to Web Push. */
+export function pushSupported(): boolean {
+  return (
+    serviceWorkerSupported() &&
+    typeof window !== "undefined" &&
+    "PushManager" in window &&
+    "Notification" in window
+  );
+}
+
+/** The VAPID public key, base64url, as the bytes PushManager.subscribe takes. */
+export function applicationServerKey(base64Url: string): Uint8Array<ArrayBuffer> {
+  const padded =
+    base64Url.replaceAll("-", "+").replaceAll("_", "/") + "===".slice((base64Url.length + 3) % 4);
+  const binary = atob(padded);
+  const out = new Uint8Array(new ArrayBuffer(binary.length));
+  for (let i = 0; i < binary.length; i += 1) out[i] = binary.charCodeAt(i);
+  return out;
+}
+
+/** The browser's current push subscription, or null. */
+export async function currentPushSubscription(): Promise<PushSubscription | null> {
+  if (!pushSupported()) return null;
+  const registration = await navigator.serviceWorker.getRegistration("/");
+  return registration ? registration.pushManager.getSubscription() : null;
+}
+
+/** Asks for permission and subscribes; returns the subscription as JSON, or the reason it did not. */
+export async function subscribeToPush(
+  vapidPublicKey: string,
+): Promise<
+  | { readonly ok: true; readonly subscription: PushSubscriptionJSON }
+  | { readonly ok: false; readonly reason: "unsupported" | "blocked" | "failed" }
+> {
+  if (!pushSupported()) return { ok: false, reason: "unsupported" };
+  const permission =
+    Notification.permission === "default"
+      ? await Notification.requestPermission()
+      : Notification.permission;
+  if (permission !== "granted") return { ok: false, reason: "blocked" };
+  try {
+    const registration = (await registerServiceWorker()) ?? (await navigator.serviceWorker.ready);
+    const subscription =
+      (await registration.pushManager.getSubscription()) ??
+      (await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: applicationServerKey(vapidPublicKey),
+      }));
+    return { ok: true, subscription: subscription.toJSON() };
+  } catch {
+    return { ok: false, reason: "failed" };
+  }
+}
+
+/** Unsubscribes this browser; returns the endpoint it had, or null. */
+export async function unsubscribeFromPush(): Promise<string | null> {
+  const subscription = await currentPushSubscription();
+  if (!subscription) return null;
+  const endpoint = subscription.endpoint;
+  await subscription.unsubscribe();
+  return endpoint;
+}

package/src/pwa/index.ts

@@ -0,0 +1,40 @@
+import tokens from "@xos/tokens/tokens.json";
+
+/**
+ * Installable web apps (Section 4.10, A65-023, ADR 0052): what Atlas and Gateway share on the server for their web
+ * manifest, service worker and offline page. Browser helpers live in ./client.ts.
+ */
+
+export { serviceWorkerScript, type ServiceWorkerConfig } from "./service-worker.ts";
+export { OFFLINE_KEY_HEADER, offlineKey } from "./offline-key.ts";
+
+/** Where each app serves its offline page; under /auth, which every route guard lets through. */
+export const OFFLINE_PATH = "/auth/offline";
+
+type Theme = "dark" | "light" | "sunlight";
+interface ColorToken {
+  readonly name: string;
+  readonly value: Readonly<Record<Theme, string>>;
+}
+
+/** A theme's color token, from the token source of truth (@xos/tokens). */
+export function tokenColor(name: string, theme: Theme): string {
+  const token = (tokens.color.tokens as readonly ColorToken[]).find((t) => t.name === name);
+  const value = token?.value[theme];
+  if (!value) throw new Error(`No ${theme} value for color token ${name}`);
+  return value;
+}
+
+/** The manifest's background and theme colors: the page canvas of the app's default theme. */
+export function manifestColors(theme: Theme): { background_color: string; theme_color: string } {
+  const canvas = tokenColor("bg-canvas", theme);
+  return { background_color: canvas, theme_color: canvas };
+}
+
+/** Browser toolbar colors for each color scheme, for a layout's viewport themeColor. */
+export function themeColors(): { media: string; color: string }[] {
+  return [
+    { media: "(prefers-color-scheme: dark)", color: tokenColor("bg-canvas", "dark") },
+    { media: "(prefers-color-scheme: light)", color: tokenColor("bg-canvas", "light") },
+  ];
+}

package/src/pwa/offline-key.ts

@@ -0,0 +1,18 @@
+/**
+ * The offline page cache key the proxies set (A96, ADR 0052). Its own module, so a proxy imports a few lines and
+ * none of the service worker source or the tokens.
+ */
+
+/** Response header naming the signed-in person's offline cache: a hash, never the id itself. */
+export const OFFLINE_KEY_HEADER = "x-xos-offline-key";
+
+/**
+ * The key of a person's offline page cache: the first 128 bits of SHA-256 over their sign-in id, hex. The proxy sets
+ * it on the pages it serves to that person, so the service worker files each page under its own person.
+ */
+export async function offlineKey(userId: string): Promise<string> {
+  const digest = new Uint8Array(
+    await crypto.subtle.digest("SHA-256", new TextEncoder().encode(`xos-offline:${userId}`)),
+  );
+  return Array.from(digest.slice(0, 16), (b) => b.toString(16).padStart(2, "0")).join("");
+}

package/src/pwa/service-worker.ts

@@ -0,0 +1,229 @@
+/**
+ * The service worker Atlas and Gateway serve at /sw.js (Section 4.10, A65-023, ADR 0052), as script source: each
+ * app's app/sw.js/route.ts answers with serviceWorkerScript(...). It is plain JavaScript with no imports, so the route
+ * budgets (ADR 0027) never count it, and it is registered only after hydration.
+ *
+ * What it caches, and what it never does:
+ *   - Pages: a page loaded as a document is kept for offline reading only when the response names its signed-in
+ *     person (the x-xos-offline-key header the proxy sets, a hash of the person's sign-in id). Pages live in a cache
+ *     per person (xos-pages-<key>); a page of another person never lands in it, and the caches of everyone but the
+ *     person last seen are deleted. At most 30 pages, the oldest dropped first.
+ *   - Never: anything but a GET, any other origin, /auth, /api, token links (/advance, /sign, /ical, ?token=), React
+ *     Server Component requests and every fetch the app makes itself. Server actions and API calls pass straight
+ *     through, so no mutation and no API response is ever cached.
+ *   - Build files under /_next/static are content-hashed and the same for everyone: cached on first use.
+ *   - Sign-out (a POST to /auth/sign-out, or a "sign-out" message from the sign-in page) deletes every page cache
+ *     and unsubscribes the browser from push, so the next person on the device sees nothing of the last.
+ *   - Offline, a page navigation answers from the person's cache, else with the offline page precached at install.
+ *   - Push: shows the notification the dispatcher sent (title, body, tag) and opens its path on this origin.
+ */
+
+export interface ServiceWorkerConfig {
+  /** App name shown when a push carries no title. */
+  // The apps with a service worker, which equal app.shortcut_shell by coincidence; not that enum.
+  // eslint-disable-next-line xos/no-restated-enums
+  readonly app: "Atlas" | "Gateway";
+  /** Build release: a new value retires the previous build files' cache. */
+  readonly version: string;
+  /** Same-origin path of the offline page. */
+  readonly offlinePath: string;
+  /** Same-origin path of the notification icon. */
+  readonly icon: string;
+}
+
+const SOURCE = String.raw`"use strict";
+const STATIC = "xos-static-" + CONFIG.version;
+const OFFLINE = "xos-offline";
+const META = "xos-meta";
+const PAGES = "xos-pages-";
+const USER = "/__xos/offline-user";
+const KEY_HEADER = "x-xos-offline-key";
+const SAVED_AT = "x-xos-saved-at";
+const MAX_PAGES = 30;
+const MAX_STATIC = 400;
+const FRESH_MS = 30 * 60 * 1000;
+const NEVER = /^\/(auth|api|advance|sign|shifts|onboard|forms|share|ical|\.well-known|__xos)(\/|$)|^\/(sw\.js|manifest\.webmanifest)$/;
+
+function sameOrigin(url) {
+  return url.origin === self.location.origin;
+}
+
+function keepable(url) {
+  return sameOrigin(url) && !NEVER.test(url.pathname) && !url.searchParams.has("token") && !url.searchParams.has("_rsc");
+}
+
+function pageUrl(url) {
+  const copy = new URL(url.href);
+  copy.hash = "";
+  return copy.href;
+}
+
+async function currentUser() {
+  const meta = await caches.open(META);
+  const hit = await meta.match(USER);
+  return hit ? hit.text() : null;
+}
+
+async function setUser(key) {
+  const meta = await caches.open(META);
+  await meta.put(USER, new Response(key));
+  const names = await caches.keys();
+  await Promise.all(names.filter((n) => n.startsWith(PAGES) && n !== PAGES + key).map((n) => caches.delete(n)));
+}
+
+async function forget() {
+  const names = await caches.keys();
+  await Promise.all(names.filter((n) => n.startsWith(PAGES) || n === META).map((n) => caches.delete(n)));
+  try {
+    const subscription = await self.registration.pushManager.getSubscription();
+    if (subscription) await subscription.unsubscribe();
+  } catch (error) {
+    // Push may be unavailable; the caches are gone either way.
+  }
+}
+
+async function save(url, response) {
+  const key = response.headers.get(KEY_HEADER);
+  const type = response.headers.get("content-type") || "";
+  if (!key || !/^[0-9a-f]{32}$/.test(key) || response.status !== 200 || response.redirected || !type.includes("text/html")) {
+    return false;
+  }
+  if ((await currentUser()) !== key) await setUser(key);
+  const headers = new Headers(response.headers);
+  headers.set(SAVED_AT, String(Date.now()));
+  const body = await response.blob();
+  const cache = await caches.open(PAGES + key);
+  await cache.put(pageUrl(url), new Response(body, { status: 200, statusText: response.statusText, headers }));
+  const keys = await cache.keys();
+  for (const old of keys.slice(0, Math.max(0, keys.length - MAX_PAGES))) await cache.delete(old);
+  return true;
+}
+
+async function offlinePage(url) {
+  const user = await currentUser();
+  if (user) {
+    const hit = await (await caches.open(PAGES + user)).match(pageUrl(url), { ignoreVary: true });
+    if (hit) return hit;
+  }
+  const page = await (await caches.open(OFFLINE)).match(CONFIG.offlinePath, { ignoreVary: true });
+  return page || Response.error();
+}
+
+async function refreshOffline() {
+  try {
+    const response = await fetch(CONFIG.offlinePath, { credentials: "same-origin", cache: "no-store" });
+    if (response.status === 200) await (await caches.open(OFFLINE)).put(CONFIG.offlinePath, response);
+  } catch (error) {
+    // Offline at install: the next install or refresh tries again.
+  }
+}
+
+async function buildFile(request) {
+  const cache = await caches.open(STATIC);
+  const hit = await cache.match(request);
+  if (hit) return hit;
+  const response = await fetch(request);
+  if (response.status === 200) {
+    await cache.put(request, response.clone());
+    const keys = await cache.keys();
+    for (const old of keys.slice(0, Math.max(0, keys.length - MAX_STATIC))) await cache.delete(old);
+  }
+  return response;
+}
+
+async function remember(href) {
+  const url = new URL(href, self.location.origin);
+  if (!keepable(url)) return false;
+  const user = await currentUser();
+  if (user) {
+    const hit = await (await caches.open(PAGES + user)).match(pageUrl(url));
+    if (hit && Date.now() - Number(hit.headers.get(SAVED_AT)) < FRESH_MS) return false;
+  }
+  try {
+    const response = await fetch(url.href, { credentials: "same-origin", headers: { Accept: "text/html" } });
+    return await save(url, response);
+  } catch (error) {
+    return false;
+  }
+}
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(refreshOffline().then(() => self.skipWaiting()));
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      const names = await caches.keys();
+      await Promise.all(names.filter((n) => n.startsWith("xos-static-") && n !== STATIC).map((n) => caches.delete(n)));
+      await self.clients.claim();
+    })(),
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const request = event.request;
+  const url = new URL(request.url);
+  if (!sameOrigin(url)) return;
+  if (request.method !== "GET") {
+    if (request.method === "POST" && url.pathname === "/auth/sign-out") event.waitUntil(forget());
+    return;
+  }
+  if (url.pathname.startsWith("/_next/static/")) {
+    event.respondWith(buildFile(request));
+    return;
+  }
+  if (request.mode !== "navigate" || !keepable(url)) return;
+  event.respondWith(
+    (async () => {
+      try {
+        const response = await fetch(request);
+        event.waitUntil(save(url, response.clone()).catch(() => false));
+        return response;
+      } catch (error) {
+        return offlinePage(url);
+      }
+    })(),
+  );
+});
+
+self.addEventListener("message", (event) => {
+  const data = event.data || {};
+  if (data.type === "remember" && typeof data.url === "string") event.waitUntil(remember(data.url));
+  else if (data.type === "sign-out") event.waitUntil(forget());
+  else if (data.type === "refresh-offline") event.waitUntil(refreshOffline());
+});
+
+self.addEventListener("push", (event) => {
+  let data = {};
+  try {
+    data = event.data ? event.data.json() : {};
+  } catch (error) {
+    data = {};
+  }
+  const path = typeof data.url === "string" && data.url.startsWith("/") && !data.url.startsWith("//") ? data.url : "/";
+  const options = { body: typeof data.body === "string" ? data.body : "", data: { url: path }, icon: CONFIG.icon };
+  if (typeof data.tag === "string") options.tag = data.tag;
+  event.waitUntil(self.registration.showNotification(typeof data.title === "string" ? data.title : CONFIG.app, options));
+});
+
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  const data = event.notification.data || {};
+  const target = new URL(typeof data.url === "string" ? data.url : "/", self.location.origin).href;
+  event.waitUntil(
+    (async () => {
+      const windows = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+      for (const client of windows) {
+        if (client.url === target && "focus" in client) return client.focus();
+      }
+      return self.clients.openWindow(target);
+    })(),
+  );
+});
+`;
+
+/** The service worker's source for one app. */
+export function serviceWorkerScript(config: ServiceWorkerConfig): string {
+  return `// XOS service worker for ${config.app} (A96, ADR 0052). Generated by @xos/ui/pwa; never cached by itself.\nconst CONFIG = ${JSON.stringify(config)};\n${SOURCE}`;
+}

package/src/static.ts

@@ -0,0 +1,10 @@
+/**
+ * Components that render without hooks, context or event handlers, for React Server Components. A
+ * boundary that renders only these (a not-found page, a loading skeleton, a link styled as a Button)
+ * sends no JavaScript, while one that imports from "@xos/ui" needs a client module, which loads with
+ * every route (ADR 0027).
+ */
+export { buttonClass } from "./Button/button-class.ts";
+export { Skeleton, type SkeletonProps } from "./Surface/Skeleton.tsx";
+export { TemplateSystemLink } from "./Templates/TemplateSystemLink.tsx";
+export type { TemplateSystemLinkProps } from "./Templates/Templates.types.ts";

package/src/styles/base.css

@@ -0,0 +1,208 @@
+/* Base layer, ported from the design reference (components/bundle.css): the browser reset that the
+   Tailwind preflight does not cover, color-scheme per theme, the focus ring, platform defaults
+   (decision D7) and the component dimensions. Every value reads a token. */
+
+/* Component dimensions. Sizes the token set does not name directly are derived from the 4 px space
+   scale here, once, so components never carry a raw length. */
+:root {
+  --ui-hairline-half: calc(var(--stroke-width-hairline) * 1.5);
+  --ui-kbd: calc(var(--space-16) + var(--space-2));
+  --ui-tag: var(--space-20);
+  --ui-chip: calc(var(--space-20) + var(--space-2));
+  --ui-check: var(--space-16);
+  --ui-switch-knob: calc(var(--space-8) + var(--space-2));
+  --ui-avatar: var(--density-control-sm);
+  --ui-avatar-lg: var(--density-control-lg);
+  --ui-avatar-overlap: calc(var(--space-6) * -1);
+  --ui-dot: var(--space-6);
+  --ui-pip-inline: var(--space-4);
+  --ui-pip-block: calc(var(--space-8) + var(--space-2));
+  --ui-field: calc(var(--space-40) * 7);
+  --ui-alert: calc(var(--space-40) * 13);
+  --ui-empty: calc(var(--space-20) * 21);
+  --ui-skeleton-inline: calc(var(--space-40) * 4);
+  --ui-skeleton-block: var(--space-12);
+  --ui-command: var(--layout-peek);
+  --ui-dialog: var(--layout-peek-min);
+  --ui-drawer: var(--layout-auth);
+  --ui-popover: calc(var(--space-20) * 15);
+  --ui-hovercard: var(--layout-property-column);
+  --ui-menu-min: calc(var(--space-20) * 11);
+  --ui-listbox-max: calc(var(--space-40) * 6);
+  --ui-props-label: calc(var(--space-40) * 3);
+  --ui-sheet: var(--layout-form);
+  --ui-day-inline: calc(var(--space-32) + var(--space-2));
+  --ui-day-block: var(--space-32);
+  --ui-cmd-input: var(--space-48);
+  --ui-handle: var(--space-6);
+  --ui-split-list: calc(var(--space-20) * 15);
+  --ui-shell-head: calc(var(--space-40) + var(--space-4));
+  --ui-shell-min: calc(var(--space-20) * 21);
+  --ui-board-col: calc(var(--space-20) * 13);
+  --ui-tree: calc(var(--space-20) * 17);
+  --ui-rail-gap: var(--space-24);
+  --ui-topnav: calc(var(--space-48) + var(--space-8));
+  --ui-tabbar: calc(var(--space-64) * 6 + var(--space-6));
+  --ui-orgsw: var(--ui-field);
+  --ui-stat-min: calc(var(--space-40) * 5);
+  --ui-resizable-min: calc(var(--space-40) * 4);
+  --ui-split-min: calc(var(--space-40) * 7);
+  --ui-accordion-row: var(--space-40);
+  --ui-accordion-indent: calc(var(--space-12) + var(--icon-size-14) + var(--space-6));
+  --ui-step-line: var(--space-24);
+  --ui-peek-min: calc(var(--space-40) * 8);
+  --ui-settings-nav: calc(var(--space-20) * 11);
+  --ui-outline: calc(var(--space-20) * 9);
+  --ui-gateway-aside: calc(var(--space-20) * 19);
+
+  /* Compass: a 390 pt phone column with 16 pt gutters, 96 pt thumb controls. */
+  --ui-compass-card: calc(var(--ui-tabbar) - var(--space-32));
+  --ui-compass-thumb: calc(var(--space-48) * 2);
+  --ui-compass-card-min: calc(var(--space-40) * 4);
+  --ui-scan-view: calc(var(--space-20) * 15);
+  --ui-photo-view: calc(var(--space-20) * 21);
+  --ui-reticle-inline: calc(var(--space-20) * 11);
+  --ui-reticle-block: calc(var(--space-20) * 7);
+  --ui-grabber-inline: calc(var(--space-32) + var(--space-4));
+  --ui-grabber-block: calc(var(--space-4) + var(--stroke-width-hairline));
+  --ui-thumb: calc(var(--space-48) + var(--space-8));
+  --ui-shutter: calc(var(--space-64) + var(--space-8));
+  --ui-widget: calc(var(--space-40) * 4);
+  --ui-sigpad: calc(var(--space-40) * 3);
+  --ui-daysheet-time: calc(var(--space-64) + var(--space-8));
+  --ui-timer: var(--space-32);
+}
+
+@layer base {
+  html,
+  body {
+    background: var(--color-bg-canvas);
+    color: var(--color-text-primary);
+  }
+
+  /* Native controls, scrollbars and the overscroll canvas follow the theme, not the OS. */
+  :root,
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  [data-theme="light"],
+  [data-theme="sunlight"] {
+    color-scheme: light;
+  }
+
+  body {
+    margin: 0;
+    font: var(--typography-text-13);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Reset the defaults that differ between engines, matching the reference reset. */
+  :where(button) {
+    padding: 0;
+    font: inherit;
+    color: inherit;
+  }
+
+  :where(th, td) {
+    padding: 0;
+  }
+
+  :where(input, select, textarea) {
+    font: inherit;
+    padding: 0;
+  }
+
+  /* Focus is a 2 px focus-ring outline with a 2 px offset on every interactive element. */
+  :where(button, input, select, textarea, a, summary, [tabindex]):focus-visible {
+    outline: var(--stroke-width-focus) solid var(--color-focus-ring);
+    outline-offset: var(--space-2);
+  }
+
+  :where(input, select, textarea):focus-visible {
+    outline-offset: 0;
+  }
+}
+
+/* Reduced motion: movement becomes a short opacity fade or nothing. */
+/* Phones show a sticky bottom tab bar (TabBar). Keyboard focus and scrollIntoView must stop above
+   it, or the bar hides the focused control (WCAG 2.4.11, A23-001). The bar is its top padding, one
+   touch target, its bottom padding and the device's safe area. */
+:root {
+  --ui-bottom-bar: calc(
+    var(--space-6) + var(--density-touch-min) + var(--space-20) + env(safe-area-inset-bottom)
+  );
+}
+
+@media (width < 48rem) {
+  html:has([data-xos-bottom-bar]),
+  [data-xos-bottom-bar-scroll] {
+    scroll-padding-bottom: calc(var(--ui-bottom-bar) + var(--space-16));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-motion="full"]) *,
+  :root:not([data-motion="full"]) *::before,
+  :root:not([data-motion="full"]) *::after {
+    transition-duration: var(--motion-duration-reduced) !important;
+    animation-duration: var(--motion-duration-reduced) !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+/* Display preferences (Section 4.5.6 Accessibility, A65-001), set on the document root from the person's
+   settings: me.reduced_motion reduce reduces motion whatever the device says (full keeps it even when the
+   device asks to reduce), me.high_contrast strengthens secondary text and borders, and me.text_size zooms the
+   page the way browser zoom does, since type sizes are fixed per token. */
+:root[data-motion="reduce"] *,
+:root[data-motion="reduce"] *::before,
+:root[data-motion="reduce"] *::after {
+  transition-duration: var(--motion-duration-reduced) !important;
+  animation-duration: var(--motion-duration-reduced) !important;
+  animation-iteration-count: 1 !important;
+}
+
+:root[data-contrast="more"] {
+  --color-text-secondary: var(--color-text-primary);
+  --color-text-tertiary: var(--color-text-secondary);
+  --color-border-subtle: var(--color-border-strong);
+  --color-border-control: var(--color-border-strong);
+}
+
+:root[data-text-size="large"] body {
+  zoom: 1.125;
+}
+
+:root[data-text-size="larger"] body {
+  zoom: 1.25;
+}
+
+/* Forced colors: controls switch to system colors and keep borders and focus. */
+@media (forced-colors: active) {
+  :where(button, input, [tabindex]):focus-visible {
+    outline-color: Highlight;
+  }
+
+  [aria-selected="true"],
+  [aria-current="page"] {
+    outline: var(--stroke-width-focus) solid Highlight;
+  }
+}
+
+/* Print: records, lists and reports on paper with no navigation chrome. */
+@media print {
+  html,
+  body {
+    background: var(--color-paper) !important;
+    color: var(--color-paper-ink) !important;
+  }
+
+  table thead {
+    display: table-header-group;
+  }
+
+  table tr {
+    break-inside: avoid;
+  }
+}