feat(ui): shared confirmation, toasts, error, skeleton, and Back primitives
CI / verify (pull_request) Successful in 1m8s
CI / infrastructure-smoke (pull_request) Successful in 34s
CI / package-release (pull_request) Successful in 51s
CI / migration-smoke (pull_request) Successful in 2m27s
CI / image-build (pull_request) Successful in 1m6s
CI / deploy-smoke (same-origin) (pull_request) Successful in 50s
CI / package-publication (pull_request) Successful in 56s
CI / deploy-smoke (split) (pull_request) Successful in 2m44s

Stage 1's later screens and modules need the interactions DESIGN.md
fixes once for the product (ADR 0059). @ekklesia/ui gains them,
additively:

- ConfirmationDialog: simple, destructive, or typed-phrase
  confirmation, with severity chosen by the caller. Destructive is
  marked by symbol and frame, not colour alone, and starts on Cancel.
  A required phrase must match exactly (forgiving only surrounding
  whitespace and NFC). While busy, Cancel and Escape are disabled.
- ToastProvider / useToasts: a top-center toast system per React tree,
  never a package singleton (ADR 0040). Live regions are mounted
  before any toast arrives; errors are assertive and persist until
  dismissed; routine toasts last at least three seconds and longer for
  longer text. Timers pause on hover and focus; duplicates refresh;
  errors are never displaced; every timer is cleared on unmount.
- ErrorState: recovery actions, plus collapsed technical details and a
  reference, rendered as bounded inert text.
- Skeleton / SkeletonGroup: an aria-busy region labelled once, with
  every animation stopped under prefers-reduced-motion.
- PageHeader `back` (link or button) above the page's one h1.
- Dialog: the focus trap ADR 0039 deferred, plus focus restoration and
  an accessible description. Escape is now handled on the dialog
  itself, so a drawer it was opened from stays open.

The shell validates Back targets (parseReturnTarget, dashboardBack):
only a canonical Dashboard page on this origin is accepted, otherwise
Back goes to the page's parent. It never uses history.back().

Biome's scope-aware suspicious/noAlert is now an error in the root
biome.json. tests/native-dialogs.test.ts proves it catches real
dialogs and not lookalikes, and scans for the forms the rule misses.
It supersedes the shell-only regex test.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
ekklesia
2026-10-14 18:24:07 -05:00
co-authored by Claude Opus 5.5
parent 651efa8829
commit 5a7d44781b
23 changed files with 2538 additions and 59 deletions
@@ -0,0 +1,32 @@
import type { PageHeaderBack } from "@ekklesia/ui";
import { type DashboardDestination, dashboardPath } from "../dashboard-routes.js";
import { parseReturnTarget } from "../return-target.js";
import type { HostHistory } from "./host-history.js";
export interface DashboardBackOptions {
/** Where the person came from, if a link said so. Validated; anything unsafe is ignored. */
readonly returnTarget?: unknown;
/** The page's own parent: where Back goes when there is no valid return target. */
readonly fallback: DashboardDestination;
/** Names the destination: "Back to Signage". Default "Back". */
readonly label?: (destination: DashboardDestination) => string;
}
/**
* A nested Dashboard page's Back action, for `PageHeader` (DESIGN.md §2.7, §4.8; ADR 0059).
*
* Back returns to the workflow that sent the person here when a validated return target says where
* that was; otherwise it goes to the page's declared parent. It never calls the browser's own
* `history.back()`: after a bookmark or a link from outside, the previous entry is not the
* Dashboard's, and Back must not take the person off the Dashboard. The action is a real link to the
* canonical address, so it can also be opened in a new tab.
*/
export function dashboardBack(history: HostHistory, options: DashboardBackOptions): PageHeaderBack {
const destination = parseReturnTarget(options.returnTarget) ?? options.fallback;
const href = dashboardPath(destination);
return {
href,
label: options.label?.(destination) ?? "Back",
onBack: () => history.push(href),
};
}