@incodetech/prizma-core-screens 0.1.0

package/src/ErrorScreensScreen.tsx

@@ -0,0 +1,149 @@
+import React, { forwardRef } from 'react';
+import { IconWifiOff } from '@incodetech/prizma-core-icons';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { ErrorScreensStrings, ErrorScreensVariant } from './ErrorScreensStrings';
+import './ScreenLayout.css';
+
+export interface ErrorScreensScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'glyph'
+    | 'ctaLabel'
+    | 'linkLabel'
+    | 'disclaimer'
+    | 'progress'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Family copy — this screen reads the slice its `variant` names. */
+  strings: ErrorScreensStrings;
+  /** Which section to render. Default `sessionExpired`. */
+  variant?: ErrorScreensVariant;
+  /** `unsupportedBrowser` only — the real session URL to show above the CTA. */
+  sessionUrl?: string;
+  /** `unsupportedBrowser` only — draw the "link copied" Snackbar (the frame's
+   *  second state). Default `false`. */
+  copied?: boolean;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Error screens — the session-level failures, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * ONE screen for all three generic sections. They draw the identical skeleton —
+ * a centred mark + title + supporting line over a CTA band — and differ only in
+ * copy, in which mark leads, and in what the band carries:
+ *
+ * - `sessionExpired`     — canonical negative mark, NO CTA (a dead end)
+ * - `noConnection`       — Wi-Fi glyph, "Refresh"
+ * - `unsupportedBrowser` — canonical negative mark, the session URL above
+ *                          "Copy link", with "Continue anyways" under it
+ *
+ * Chrome is CONSTANT. All three frames are drawn without the logo header and
+ * without the verified tag; both are kept here, because the owner rule of
+ * 2026-08-18 (#F-30, #F-34) makes the chrome the same on every screen so
+ * nothing shifts between states, and every module's connectivity screen must
+ * read identically (#PI-8). Same call `GeolocationErrorScreen` already makes
+ * for its own `noNetwork`.
+ *
+ * Three things Figma draws that this screen does not, all reported rather than
+ * worked around:
+ * - **The browser-window mark.** `unsupportedBrowser` leads with a red browser
+ *   window carrying an ✕. The canonical bank has no such glyph, so the screen
+ *   uses Core's negative status mark — the nearest thing that means the same
+ *   (rule 1, GUIDELINES §10; the same substitution logic as #10 / #DC-23).
+ *   Mint the glyph or bless the substitution.
+ * - **Links inside the supporting line.** Figma renders "Safari" and "Chrome"
+ *   as blue in-sentence links; Core's `PrizmaTitle` subtitle is a plain
+ *   `string`, so the sentence renders in one colour. Same open Core request as
+ *   the step rows: a `ReactNode` subtitle.
+ * - **"Continue anyways" above the CTA.** Archetype F renders its tertiary link
+ *   BELOW the button stack, so this screen ships inverted against its frame.
+ *   The archetype owns the order (see `PermissionsAllowScreen` for the same
+ *   escalation).
+ *
+ * The "link copied" Snackbar rides the archetype's `progress` slot — the only
+ * block that renders BETWEEN the nav and the content, which is exactly where
+ * the frame draws it. `bandContent` would have put it above the buttons instead
+ * (the workaround #VS-17 rejected).
+ */
+export const ErrorScreensScreen = forwardRef<HTMLDivElement, ErrorScreensScreenProps>(
+  (
+    {
+      strings,
+      variant = 'sessionExpired',
+      sessionUrl,
+      copied = false,
+      screenId = `error-screens-${variant}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const unsupported = variant === 'unsupportedBrowser';
+    const noConnection = variant === 'noConnection';
+    const copy = unsupported
+      ? strings.unsupportedBrowser
+      : noConnection
+        ? strings.noConnection
+        : strings.sessionExpired;
+
+    return (
+      <PrizmaResultScreen
+        ref={ref}
+        /* The connectivity screen leads with the Wi-Fi glyph instead of a
+           status mark; the other two carry the canonical negative mark. */
+        status={noConnection ? 'none' : 'error'}
+        glyph={
+          noConnection ? (
+            <span
+              className={[
+                'prizma-screen-layout__glyph',
+                'prizma-screen-layout__glyph--negative',
+                overrides?.align === 'left' ? 'prizma-screen-layout__glyph--left' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              <IconWifiOff size="l" />
+            </span>
+          ) : undefined
+        }
+        progress={
+          unsupported && copied ? (
+            <PrizmaSnackbar state="success" contentResizing="fill">
+              {strings.unsupportedBrowser.copiedLabel}
+            </PrizmaSnackbar>
+          ) : undefined
+        }
+        title={copy.title}
+        subtitle={copy.subtitle}
+        disclaimer={
+          unsupported
+            ? sessionUrl ?? strings.unsupportedBrowser.urlPlaceholder
+            : undefined
+        }
+        ctaLabel={copy.ctaLabel}
+        linkLabel={unsupported ? strings.unsupportedBrowser.continueLabel : undefined}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      />
+    );
+  },
+);
+ErrorScreensScreen.displayName = 'ErrorScreensScreen';
+
+export default ErrorScreensScreen;

package/src/ErrorScreensStrings.ts

@@ -0,0 +1,66 @@
+// Error screens — copy contract for the GENERIC family.
+//
+// Figma: `Module Generic Screens` (qGJjfL4O0JSjz1x4tOjJn8):
+//
+//   79:360   ErrorSessionReopen               → `sessionExpired`
+//   214:3357 Geolocation.error.noNetwork      → `noConnection`
+//   240:154  Error screen - Unsupported browser → `unsupportedBrowser`
+//
+// The three failures that belong to the SESSION rather than to any module: the
+// link has expired, the network went away, the browser cannot run the SDK.
+// Every module can hit all three, which is why they are drawn once in the
+// generic file — a user who sees three different "no internet" screens in one
+// journey reads them as three different products.
+//
+// `noConnection` is deliberately the same screen every module already ships
+// (`FaceCaptureNoConnectionScreen`, `IdCaptureNoConnectionScreen`,
+// `DocumentCaptureNoConnectionScreen`, `GeolocationErrorScreen`'s `noNetwork`).
+// The generic entry is where the shape is DOCUMENTED; the module copies stay
+// put until someone retires them deliberately, because deleting four exported
+// components to save one screen is a breaking change for every host that
+// imports them. Flagged for the owner.
+//
+// The family has no flow of its own: each of these is entered from wherever the
+// session broke and exits to a retry or to nothing. Core Lab lists it as a
+// library of states.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here.
+
+/**
+ * The three sections.
+ * - `sessionExpired`     — the link is dead; the user must go back to the provider
+ * - `noConnection`       — the network went away; retry when it returns
+ * - `unsupportedBrowser` — the SDK cannot run here; copy the link and move
+ */
+export type ErrorScreensVariant =
+  | 'sessionExpired'
+  | 'noConnection'
+  | 'unsupportedBrowser';
+
+export interface ErrorScreensCopy {
+  title: string;
+  subtitle?: string;
+  /** Primary CTA. Omit — as `sessionExpired` does — for a dead end. */
+  ctaLabel?: string;
+}
+
+export interface ErrorScreensStrings {
+  /** Accessible name for the logo nav region (i18n — no baked-in English). */
+  navLabel?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+
+  sessionExpired: ErrorScreensCopy;
+  noConnection: ErrorScreensCopy;
+
+  unsupportedBrowser: ErrorScreensCopy & {
+    /** The session URL shown above the CTA, for pasting into a supported
+     *  browser. A host passes the real one through `sessionUrl`; this is the
+     *  fallback the gallery draws. */
+    urlPlaceholder?: string;
+    /** Tertiary link — "Continue anyways". */
+    continueLabel: string;
+    /** Snackbar copy after the link is copied — the frame's second state. */
+    copiedLabel: string;
+  };
+}

package/src/FaceCaptureCapturingScreen.tsx

@@ -0,0 +1,99 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import type { PrizmaSelfieCaptureState } from '@incodetech/prizma-core-web/selfie-capture';
+import { PrizmaCaptureScreen, type PrizmaCaptureScreenProps } from './CaptureScreen';
+import type {
+  FaceCaptureCapturingState,
+  FaceCaptureStrings,
+} from './FaceCaptureStrings';
+import './FaceCaptureLayout.css';
+
+/**
+ * Purple `faceCapture.capturing.*` state → Core PrizmaSelfieCapture ring state.
+ * - `initiating` — grey ring, blank disc, camera not yet revealed (`enabled`).
+ * - `getReady`   — face detected, blue glow arc while the capture happens
+ *   (`ready`). NOTE: the module Figma cell still shows the silhouette during
+ *   this state; Core hides it per the owner's choreography (2026-07-14) —
+ *   DEVIATIONS.md #13. The design system wins.
+ * - every feedback state — camera + silhouette guide (`empty`) with the
+ *   instruction line below the ring.
+ */
+const SELFIE_STATE: Record<FaceCaptureCapturingState, PrizmaSelfieCaptureState> = {
+  initiating: 'enabled',
+  getReady: 'ready',
+  alignFace: 'empty',
+  lookAtCamera: 'empty',
+  tooDark: 'empty',
+  tooBright: 'empty',
+  eyesClosed: 'empty',
+  maskDetected: 'empty',
+  glassesDetected: 'empty',
+  hatDetected: 'empty',
+  moveRight: 'empty',
+  moveLeft: 'empty',
+  moveCloser: 'empty',
+  moveAway: 'empty',
+  faceOcclusion: 'empty',
+};
+
+export interface FaceCaptureCapturingScreenProps
+  extends Omit<
+    PrizmaCaptureScreenProps,
+    'state' | 'title' | 'feedbackText' | 'statusLabels' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `capturing` slice (+ shared labels). */
+  strings: FaceCaptureStrings;
+  /** Which purple `faceCapture.capturing.*` spec section to render. */
+  state?: FaceCaptureCapturingState;
+  /** Live camera feed (<video>) or sample still (<img>) for the ring window. */
+  camera?: ReactNode;
+}
+
+/**
+ * Face Capture — auto-capture stage (Archetype B, GUIDELINES.md §6-B).
+ * Figma: the 15 purple `faceCapture.capturing.*` sections — ring-state and
+ * instruction-copy variants of this ONE screen. Ring, silhouette, glow, and the
+ * instruction line all come from Core's PrizmaSelfieCapture via the
+ * CaptureScreen archetype — never re-implemented (§7).
+ *
+ * The instruction goes to the component's own `feedbackText` slot, NOT to the
+ * archetype's H2-below-the-ring slot: in Figma the line lives INSIDE the
+ * `Capture / Selfie` instance at Spacing/32 under the ring (measured y=407 vs
+ * ring bottom 375), which is exactly where the component puts it. Routing it
+ * through the archetype's `__below-capture` H2 instead would add the
+ * component's own 40px bottom padding on top of that 32px and change the type
+ * role — DEVIATIONS.md #12.
+ *
+ * The archetype adds no offsets of its own — the component owns that spacing
+ * (same deviation row).
+ */
+export const FaceCaptureCapturingScreen = forwardRef<
+  HTMLDivElement,
+  FaceCaptureCapturingScreenProps
+>(
+  (
+    {
+      strings,
+      state = 'initiating',
+      camera,
+      screenId = 'face-capture-capturing',
+      className,
+      ...rest
+    },
+    ref,
+  ) => (
+    <PrizmaCaptureScreen
+      ref={ref}
+      className={className}
+      state={SELFIE_STATE[state]}
+      camera={camera}
+      feedbackText={strings.capturing[state]}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      {...rest}
+    />
+  ),
+);
+FaceCaptureCapturingScreen.displayName = 'FaceCaptureCapturingScreen';
+
+export default FaceCaptureCapturingScreen;

package/src/FaceCaptureLayout.css

@@ -0,0 +1,18 @@
+/* Face Capture — module layout additions.
+ *
+ * ONLY what the foundation archetypes do not already own. Every value is a
+ * token; each departure from GUIDELINES.md carries a numbered row in
+ * DEVIATIONS.md.
+ *
+ * The pilot's other three additions were promoted INTO the foundation
+ * (`ScreenLayout.css`) once they proved to be recurring patterns rather than
+ * module quirks: the CTA band recipe (`__band`, DEVIATIONS #8), the no-nav
+ * content offset for generic errors (`__content--no-nav`, #9), and the capture
+ * stage offset fix (`__content--capture` now adds nothing, #12). Wave agents
+ * inherit all three as correct defaults.
+ */
+
+/* Nothing module-specific is left: the non-status glyph slot this file used to
+ * own (`.face-capture-glyph`) was the third byte-identical copy of one pattern,
+ * so it moved to `ScreenLayout.css` as `__glyph` — DEVIATIONS #DC-29, closed.
+ * The file is kept as the module's landing place for future additions. */

package/src/FaceCaptureLoadingScreen.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCaptureScreen, type PrizmaCaptureScreenProps } from './CaptureScreen';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './FaceCaptureLayout.css';
+
+/** The two purple `faceCapture.loading.*` spec sections. Identical layout and
+ *  identical spinner — only the status copy differs, so they are copy variants
+ *  of ONE screen (same pattern as the 15 capturing states). */
+export type FaceCaptureLoadingStage = 'uploading' | 'processing';
+
+export interface FaceCaptureLoadingScreenProps
+  extends Omit<
+    PrizmaCaptureScreenProps,
+    'state' | 'camera' | 'title' | 'feedbackText' | 'statusLabels' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `uploading` / `processing` slices. */
+  strings: FaceCaptureStrings;
+  /** Which purple `faceCapture.loading.*` spec section to render. */
+  stage?: FaceCaptureLoadingStage;
+}
+
+/**
+ * Face Capture — upload / processing (Archetype B, GUIDELINES.md §6-B).
+ * Figma: purple sections faceCapture.loading.uploading / .processing.
+ *
+ * NOT the Processing archetype (§6-C). Both purple sections put the spinner +
+ * status line inside the SAME 342-tall "Middle Content" box the capture ring
+ * occupies — 40px below the nav, measured at y=84 of the 390 CONTENT frame —
+ * whereas §6-C centers in all remaining space (51px lower). Core models this
+ * as the `uploading` state of `PrizmaSelfieCapture`, where the stage dissolves
+ * into the canonical `PrizmaLoadingSpinner` in the ring's own slot (owner
+ * choreography 2026-07-15). Design system wins — DEVIATIONS.md #11.
+ *
+ * So the ring stage stays, un-re-implemented, and only its state changes.
+ * The Core component owns the ring spacing; the archetype adds none
+ * (DEVIATIONS.md #12).
+ */
+export const FaceCaptureLoadingScreen = forwardRef<
+  HTMLDivElement,
+  FaceCaptureLoadingScreenProps
+>(
+  (
+    { strings, stage = 'uploading', screenId = `face-capture-${stage}`, className, ...rest },
+    ref,
+  ) => (
+  <PrizmaCaptureScreen
+    // uploading / processing: the feed is closed — not a capture screen (owner rule 2026-08-18).
+    cameraOpen={false}
+    ref={ref}
+    className={className}
+    state="uploading"
+    statusLabels={{
+      uploading:
+        stage === 'processing' ? strings.processing.title : strings.uploading.title,
+    }}
+    verifiedLabel={strings.verifiedLabel}
+    navLabel={strings.navLabel}
+    screenId={screenId}
+    {...rest}
+  />
+  ),
+);
+FaceCaptureLoadingScreen.displayName = 'FaceCaptureLoadingScreen';
+
+export default FaceCaptureLoadingScreen;

package/src/FaceCaptureManualCaptureScreen.tsx

@@ -0,0 +1,94 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaSelfieCapture } from '@incodetech/prizma-core-web/selfie-capture';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import type {
+  PrizmaScreenActionHandler,
+  PrizmaScreenChromeProps,
+  PrizmaScreenOverrides,
+} from './types';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './ScreenLayout.css';
+import './FaceCaptureLayout.css';
+
+export interface FaceCaptureManualCaptureScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> ,
+    PrizmaScreenChromeProps {
+  /** Module copy — this screen reads the `manualCapture` slice (+ shared labels). */
+  strings: FaceCaptureStrings;
+  /** Live camera feed (<video>) or sample still (<img>) for the ring window. */
+  camera?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Face Capture — manual capture (Archetype B layout, GUIDELINES.md §6-B).
+ * Figma: purple section faceCapture.manualCapture.default.
+ *
+ * Goes through Core's PrizmaSelfieCapture in manual mode (§7): the component
+ * owns ring, silhouette guide, instruction line, and shutter. Composed on the
+ * foundation shell directly because the CaptureScreen archetype does not
+ * forward `isManual` / `onCapture` — foundation gap reported to the owner, no
+ * foundation file edited. Layout classes are the archetype's own.
+ *
+ * Verified pixel-exact against Figma 3.1.0: the `Capture / Selfie` instance sits
+ * at nav-bottom + 0 with the ring at +40, the manual instruction at +32 below
+ * the ring and the 64px shutter at +32 below that — all of it the component's
+ * own padding/gap; the archetype adds none of its own (DEVIATIONS.md #12).
+ */
+export const FaceCaptureManualCaptureScreen = forwardRef<
+  HTMLDivElement,
+  FaceCaptureManualCaptureScreenProps
+>(
+  (
+    {
+      strings,
+      camera,
+      screenId = 'face-capture-manual-capture',
+      showHeader,
+      showFooter = true,
+      overrides,
+      onAction,
+      className,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaScreenShell
+      ref={ref}
+      theme="light"
+      className={className}
+      {...shell}
+    >
+      {/* Capture screen: footer-only by default, the logo is the client's
+          opt-in. The row stays RESERVED so nothing shifts up when the logo is
+          absent (owner rule 2026-08-18). */}
+      <PrizmaScreenNav
+        reserved={!(showHeader ?? Boolean(overrides?.logo))}
+        logo={overrides?.logo}
+        navLabel={strings.navLabel}
+      />
+      <div className="prizma-screen-layout__content prizma-screen-layout__content--capture">
+        <PrizmaSelfieCapture
+          state="empty"
+          camera={camera}
+          isManual
+          manualFeedbackText={strings.manualCapture.instruction}
+          captureLabel={strings.manualCapture.captureLabel}
+          onCapture={() => onAction?.({ type: 'cta', screenId })}
+        />
+        {showFooter ? (
+        <div className="prizma-screen-layout__footer prizma-screen-layout__footer--pinned">
+          <PrizmaTag label={strings.verifiedLabel} />
+        </div>
+      ) : null}
+      </div>
+    </PrizmaScreenShell>
+  ),
+);
+FaceCaptureManualCaptureScreen.displayName = 'FaceCaptureManualCaptureScreen';
+
+export default FaceCaptureManualCaptureScreen;

package/src/FaceCaptureNoConnectionScreen.tsx

@@ -0,0 +1,73 @@
+import React, { forwardRef } from 'react';
+import { IconWifiOff } from '@incodetech/prizma-core-icons';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './ScreenLayout.css';
+
+export interface FaceCaptureNoConnectionScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `noConnection` slice. */
+  strings: FaceCaptureStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Face Capture — no internet connection (purple section
+ * `7.faceCapture.genericErrors.noConnection`), built on the
+ * `PrizmaResultScreen` archetype (GUIDELINES.md §6-F).
+ *
+ * Figma's CONTENT frame holds only a Title and a single CTA (measured 390
+ * section: Title 24→574, CTAs 574→630). The header and the verified tag are back
+ * on by the owner's rule that non-capture screens show both (DEVIATIONS #F-30);
+ * the layout is otherwise the archetype's own.
+ *
+ * The glyph is Figma's `Icon / Wi-Fi` swapped into the Title's icon slot. Core's
+ * `PrizmaTitle` allowlist is status | spinner | none, so it rides in the
+ * archetype's `glyph` slot with the foundation's `__glyph` class — icon from the
+ * canonical bank, no primitive invented, and no module CSS: the class was
+ * promoted out of three byte-identical module copies (DEVIATIONS #10, #DC-29).
+ */
+export const FaceCaptureNoConnectionScreen = forwardRef<
+  HTMLDivElement,
+  FaceCaptureNoConnectionScreenProps
+>(
+  (
+    { strings, screenId = 'face-capture-no-connection', overrides, onAction, ...shell },
+    ref,
+  ) => (
+    <PrizmaResultScreen
+      ref={ref}
+      glyph={
+        <span
+          className={[
+            'prizma-screen-layout__glyph',
+            'prizma-screen-layout__glyph--negative',
+            overrides?.align === 'left' ? 'prizma-screen-layout__glyph--left' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <IconWifiOff size="l" />
+        </span>
+      }
+      title={strings.noConnection.title}
+      subtitle={strings.noConnection.description}
+      ctaLabel={strings.noConnection.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+FaceCaptureNoConnectionScreen.displayName = 'FaceCaptureNoConnectionScreen';
+
+export default FaceCaptureNoConnectionScreen;

package/src/FaceCaptureResultErrorScreen.tsx

@@ -0,0 +1,86 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './ScreenLayout.css';
+import './FaceCaptureLayout.css';
+
+export interface FaceCaptureResultErrorScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'disclaimer' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `error` slice (+ shared labels). The
+   *  host passes the copy of the CURRENT error (faceNotAligned, tooDark, …);
+   *  all 10 purple base sections share this one layout. */
+  strings: FaceCaptureStrings;
+  /**
+   * The `*Exhausted` half of the purple `faceCapture.resultError.*` pairs
+   * (9 of them — `eyesClosed` has no exhausted variant in Figma). Retries are
+   * used up: the status icon goes from warning to negative, the attempts line
+   * is dropped, and the CTA becomes the forward action instead of "Try again".
+   */
+  exhausted?: boolean;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Face Capture — error result (Archetype C-with-CTA, GUIDELINES.md §6-C + §6-A
+ * CTA band). Figma: the 19 purple `faceCapture.resultError.*` sections — copy,
+ * status-icon, and CTA variants of this ONE screen.
+ *
+ * Layout measured off the purple 390 sections (CONTENT frame, 654 tall):
+ * nav 8→52 · Title stretched 52→479 with its icon/heading/subtitle block
+ * vertically centered · CTA band 479→646. The centered block is exactly Core's
+ * `PrizmaTitle` (icon slot → Spacing/16 → H2 → Spacing/12 → H5), so nothing is
+ * re-implemented here; the screen only chooses the status and supplies copy.
+ *
+ * Now built on the `PrizmaResultScreen` archetype (consolidation 2026-08-18).
+ * It previously composed the shell by hand because no template offered a
+ * centered status block WITH a CTA band — the gap that made three modules
+ * rebuild the same skeleton.
+ */
+export const FaceCaptureResultErrorScreen = forwardRef<
+  HTMLDivElement,
+  FaceCaptureResultErrorScreenProps
+>(
+  (
+    {
+      strings,
+      exhausted = false,
+      screenId = exhausted ? 'face-capture-error-exhausted' : 'face-capture-error',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    // Figma: the base sections carry "N attempts remaining"; every `*Exhausted`
+    // section drops it (the subtitle says the limit is reached instead). Gated
+    // here too so a host that keeps the label in its locale pack still renders
+    // the designed exhausted screen.
+    const attemptsLabel = exhausted ? undefined : strings.error.attemptsLabel;
+
+    return (
+      <PrizmaResultScreen
+        ref={ref}
+        status={exhausted ? 'error' : 'warning'}
+        title={strings.error.title}
+        subtitle={strings.error.description}
+        disclaimer={attemptsLabel}
+        ctaLabel={strings.error.ctaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      />
+    );
+  },
+);
+FaceCaptureResultErrorScreen.displayName = 'FaceCaptureResultErrorScreen';
+
+export default FaceCaptureResultErrorScreen;