feat(ui): shared confirmation, toasts, error, skeleton, and Back primitives

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]>

packages/ui/src/styles.ts

@@ -595,14 +595,185 @@ export const EKKLESIA_UI_STYLESHEET = `
   width: ${designToken("spacing.xl")};
 }
 
+.ek-visually-hidden {
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.ek-dialog__description {
+  color: ${designToken("text.secondary")};
+  font-size: ${designToken("typography.size-sm")};
+  margin: 0;
+}
+
+.ek-confirmation {
+  display: grid;
+  gap: ${designToken("spacing.lg")};
+  margin: 0;
+}
+
+/* A destructive confirmation says so with a symbol and a heavier frame, never by colour alone. */
+.ek-confirmation--destructive {
+  border-color: ${designToken("status.danger-border")};
+  border-width: calc(${designToken("border.width")} * 2);
+}
+
+.ek-confirmation__symbol::before {
+  content: ${designToken("status.warning-symbol")};
+  font-weight: ${designToken("typography.weight-bold")};
+  margin-inline-end: ${designToken("spacing.xs")};
+}
+
+.ek-confirmation__phrase {
+  font-family: ${designToken("typography.family-mono")};
+  white-space: pre-wrap;
+}
+
+.ek-toast-region {
+  box-sizing: border-box;
+  display: grid;
+  gap: ${designToken("spacing.sm")};
+  left: 50%;
+  max-width: calc(100vw - (${designToken("spacing.md")} * 2));
+  pointer-events: none;
+  position: fixed;
+  top: ${designToken("spacing.lg")};
+  transform: translateX(-50%);
+  width: 28rem;
+  z-index: 50;
+}
+
+.ek-toast-region__list {
+  display: grid;
+  gap: ${designToken("spacing.sm")};
+}
+
+.ek-toast-region .ek-toast {
+  animation: ek-toast-enter 160ms ease-out;
+  pointer-events: auto;
+}
+
+.ek-toast {
+  align-items: start;
+  display: flex;
+  gap: ${designToken("spacing.sm")};
+}
+
+.ek-toast__content {
+  display: grid;
+  flex: 1 1 auto;
+  gap: ${designToken("spacing.2xs")};
+  min-width: 0;
+}
+
+.ek-toast__dismiss {
+  flex: 0 0 auto;
+  min-width: ${designToken("control.height-sm")};
+}
+
+.ek-message__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${designToken("spacing.sm")};
+  justify-content: center;
+}
+
+.ek-message__details {
+  color: ${designToken("text.secondary")};
+  font-size: ${designToken("typography.size-xs")};
+  max-width: 100%;
+  text-align: start;
+  width: 100%;
+}
+
+.ek-message__details summary {
+  cursor: pointer;
+  min-height: ${designToken("control.height-sm")};
+  padding-block: ${designToken("spacing.2xs")};
+}
+
+.ek-message__details-text {
+  background: ${designToken("background.inset")};
+  border-radius: ${designToken("radius.sm")};
+  font-family: ${designToken("typography.family-mono")};
+  margin: ${designToken("spacing.xs")} 0 0;
+  max-height: 16rem;
+  overflow: auto;
+  padding: ${designToken("spacing.sm")};
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.ek-message__reference {
+  margin: ${designToken("spacing.xs")} 0 0;
+}
+
+.ek-page-header__back {
+  justify-self: start;
+  margin-inline-start: calc(-1 * ${designToken("control.padding-inline")});
+  text-decoration: none;
+}
+
+.ek-skeleton-group {
+  display: grid;
+  gap: ${designToken("spacing.sm")};
+}
+
+.ek-skeleton {
+  animation: ek-skeleton-pulse 1.6s ease-in-out infinite;
+  background: ${designToken("background.inset")};
+  border-radius: ${designToken("radius.sm")};
+  display: block;
+}
+
+.ek-skeleton--text {
+  height: 1em;
+  width: 100%;
+}
+
+.ek-skeleton--block {
+  height: 6rem;
+  width: 100%;
+}
+
+.ek-skeleton--circle {
+  border-radius: ${designToken("radius.pill")};
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
 @keyframes ek-spin {
   to {
     transform: rotate(360deg);
   }
 }
 
+@keyframes ek-skeleton-pulse {
+  50% {
+    opacity: 0.55;
+  }
+}
+
+@keyframes ek-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+}
+
+/* Every animation in these elements stops for a person who asked for reduced motion; nothing in
+   them depends on movement to be understood. */
 @media (prefers-reduced-motion: reduce) {
-  .ek-spinner {
+  .ek-spinner,
+  .ek-skeleton,
+  .ek-toast-region .ek-toast {
     animation: none;
   }
 }