@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/src/IdCaptureLayout.css

@@ -59,12 +59,129 @@
   gap: var(--prizma-spacing-8); /* Title → instruction, GUIDELINES §5 */
 }
 
+/* ── Short screens: the vertical frame gives up height, never the title ──────
+ * The vertical ID (288:456) and passport (306:420) frames are tall. On a
+ * 320 × 693 phone the column is 272 wide, so the frame alone is ~431 tall and
+ * the stage ran 168px past the bottom, under the shutter strip (Camila,
+ * 2026-09-28). Here the frame is the ONE part of the column that shrinks: it
+ * starts at its full-width height (the column less its two Spacing/24
+ * gutters, over the aspect), and when the screen is too short the flex column
+ * takes the shortfall out of its height; the aspect ratio then narrows its
+ * width to match, so it stays an ID-shaped frame, centred. The title band
+ * keeps its content height. With room to spare (390 × 844) the frame never
+ * needs to shrink, so it sits exactly where it did.
+ *
+ * Scoped to ID + passport with `:not(--poa)`: Document Capture renders the
+ * same stage as `type="poa" isVertical`, so it carries `--vertical` too, but
+ * the PoA frame has NO aspect ratio (it fills the host's height). `width:
+ * auto` there collapsed it to a 0-wide sliver, a grey vertical bar down the
+ * camera screen (Elena, 2026-09-30). Only showed where this file and Document
+ * Capture's CSS ship in the same bundle, i.e. the production build. */
+.prizma-viewfinder__content:has(> .prizma-id-capture--vertical:not(.prizma-id-capture--poa)) {
+  min-height: 0;
+}
+.prizma-viewfinder__content:has(> .prizma-id-capture--vertical:not(.prizma-id-capture--poa)) > .id-capture-band--top {
+  flex-shrink: 0;
+  min-height: min-content;
+}
+.prizma-viewfinder__content > .prizma-id-capture--vertical:not(.prizma-id-capture--poa) {
+  flex: 0 1 auto;
+  min-height: 0;
+}
+.prizma-viewfinder__content > .prizma-id-capture--vertical:not(.prizma-id-capture--poa) .prizma-id-capture__frame {
+  flex: 0 1 auto;
+  min-height: 0;
+  width: auto;
+  max-width: 100%;
+  flex-basis: calc((100cqw - 2 * var(--prizma-spacing-24)) * 456 / 288);
+}
+.prizma-viewfinder__content > .prizma-id-capture--passport.prizma-id-capture--vertical .prizma-id-capture__frame {
+  flex-basis: calc((100cqw - 2 * var(--prizma-spacing-24)) * 420 / 306);
+}
+
+/* ── A notice on the stage: the horizontal frame may give up height too ──────
+ * The "Need more time?" offer (`.id-capture-stage__notice`, IDC-32) adds ~90px
+ * of content to the bottom band. On the 390 × 844 reference the band has the
+ * room and nothing moves. On a short panel it does not: measured 2026-10-15,
+ * the horizontal ID frame is aspect-locked and does not shrink, so the column
+ * overflowed and the notice ran 10px into the help strip at 320 × 693 and 36px
+ * at the closed iPhone Duo (466 × 678). The same recipe as the vertical rule
+ * above, applied to the horizontal frames ONLY while a notice is on the stage:
+ * the frame starts at its full-width height and gives up height when the
+ * column is short, the aspect ratio narrows it to match, the title band keeps
+ * its content height. Face Capture makes the identical trade at 320 (its
+ * selfie frame gives up Spacing/40 for the notice, ScreenLayout.css) and the
+ * owner's rule is explicit that the frame may get smaller (2026-08-18). A
+ * stage without a notice is untouched. */
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) {
+  min-height: 0;
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .id-capture-band--top {
+  flex-shrink: 0;
+  min-height: min-content;
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .prizma-id-capture--horizontal:not(.prizma-id-capture--poa) {
+  flex: 0 1 auto;
+  min-height: 0;
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .prizma-id-capture--horizontal:not(.prizma-id-capture--poa) .prizma-id-capture__frame {
+  flex: 0 1 auto;
+  min-height: 0;
+  width: auto;
+  max-width: 100%;
+  flex-basis: calc((100cqw - 2 * var(--prizma-spacing-24)) * 220 / 350);
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .prizma-id-capture--passport.prizma-id-capture--horizontal .prizma-id-capture__frame {
+  flex-basis: calc((100cqw - 2 * var(--prizma-spacing-24)) * 254 / 350);
+}
+
+/* ── Short panels: the tutorial art is sized by its halo, not its canvas ─────
+ * `PrizmaIllustrationIdTutorial` is a 342 × 392 canvas with the halo centred
+ * at r130 (y 66–326) and the hand-and-document artwork inside it (y 100–313;
+ * the passport's hand fades out above). The 66 above and below the halo are
+ * air at rest; the bottom band is where the hand travels in from during the
+ * loop. The selfie illustration is a 296 canvas with the same r130 halo and 18
+ * of air: on the 844 reference both halos are 260 and the two tutorials match.
+ *
+ * On a short panel the tutorial middle is height-limited (ScreenLayout.css,
+ * #F-35) and the two canvases scale by height, so the ID halo comes out 18 %
+ * smaller than the selfie's (170 vs 209 on the closed iPhone Duo, measured
+ * 2026-10-14; Camila: "ID tutorials have illustration a bit too small, no?
+ * Compared to the size on the selfie tutorial one"). Fixed by cropping the
+ * canvas to the halo band plus Spacing/16 on each side — y 50 to 342, 292
+ * units, the same 89 % the selfie's halo takes of its own box — so the halo
+ * fills the slot the way the selfie's does. The wrapper takes the slot and
+ * clips; the svg is scaled so 292 of its 392 units fill the wrapper and
+ * centres, so the crop is symmetric around the halo and the halo's centre
+ * does not move. During the loop the entering hand is clipped 50 units
+ * earlier than the canvas clips it, which is invisible against the fade.
+ * Outside the query nothing exists: the reference renders the full canvas.
+ * DEVIATIONS #IDC-31. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-screen-layout__flex > .prizma-illustration-tutorial {
+    flex: 1 1 0;
+    min-height: 0;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .prizma-screen-layout__flex > .prizma-illustration-tutorial > svg {
+    flex: none;
+    height: calc(100% * 392 / 292);
+    width: auto;
+    max-width: none;
+  }
+}
+
 /* ── Camera stage (dark) ───────────────────────────────────────────────────── */
 
 /* The stage's nav row carries only the close X (no logo — the camera owns the
  * screen). The foundation `.prizma-screen-nav` supplies the status-bar reserve,
  * the 44px flow slot and the un-fixing of Core's PrizmaNavigation; the ink is
- * the only thing the camera stage changes: Core's nav icon is the THEMED
+ * the only thing the camera stage changes: Core's nav icon is the themed
  * `Icon/Neutral/500`, which disappears on the always-dark camera surface, so it
  * takes the camera's own Static ink — the same token PrizmaCaptureManual uses
  * for the shutter and the "?" help control. DEVIATIONS.md #IDC-21. */
@@ -78,6 +195,44 @@
   width: 100%;
 }
 
+/* ── The "Need more time?" notice ─────────────────────────────────────────────
+ * The Snackbar the stage raises 20 s before auto-capture falls back to the
+ * shutter (IdCaptureStageScreen `extendTime`, 2026-10-15). It takes the BOTTOM
+ * band — the air between the encrypted row and the strip's reserved space —
+ * because, unlike Face Capture, this stage's strip is never empty: the "?" help
+ * control rides it on every stage (IDC-29), so the shared rail the selfie notice
+ * uses (`.prizma-screen-layout__capture-notice`) would land on top of it.
+ *
+ * The band is `justify-content: flex-end`, so the notice sits just above the
+ * strip's Spacing/12 of breathing and the frame above does not move when the
+ * offer arrives. The band is also `flex: 1; min-height: 0`, which on a short
+ * panel would let it shrink to nothing and spill the notice upward over the
+ * encrypted row; with a notice in it the band keeps its content height and the
+ * shortfall goes where this stylesheet already sends it — the vertical frame
+ * (the short-panel rule above), which the owner has said may get smaller
+ * (2026-08-18). DEVIATIONS #IDC-32. */
+.id-capture-band:has(> .id-capture-stage__notice) {
+  flex-shrink: 0;
+  min-height: min-content;
+  padding-top: var(--prizma-spacing-16);
+}
+
+.id-capture-stage__notice {
+  display: flex;
+  /* The HUD column centres its copy; the Snackbar's own text is left-set. */
+  text-align: left;
+}
+
+/* On a 320 phone the notice drops its status glyph — the same call Face
+ * Capture made (Camila, 2026-10-05, ScreenLayout.css): 44 of the 272px column
+ * on a decorative mark pushed the body to four lines. The icon is
+ * `aria-hidden`; the copy carries the meaning without it. */
+@container pcs-screen (max-width: 340px) {
+  .id-capture-stage__notice .prizma-snackbar__icon {
+    display: none;
+  }
+}
+
 /* The feedback pill replaces the title block on the error stages (Figma
  * `1-5-5 … 1-5-9-id-errors`): same band, same Spacing/40 above the frame. */
 .id-capture-stage__feedback {
@@ -85,6 +240,54 @@
   justify-content: center;
 }
 
+/* ── Short or narrow panels: the live cue takes Template B ───────────────────
+ * `PrizmaCaptureFeedback` ships two templates on its `showAnimation` axis:
+ * A, the 120-ish pill with the illustration and a Headline/H3 title, and B, a
+ * 72 pill with no illustration and Headline/H5. The error stages draw A on the
+ * 390 × 844 reference. On a closed iPhone Duo (678) A still fits — measured
+ * 2026-10-14, the frame lands at 198–473 with the pill above it — but it is
+ * the tallest element on a stage that has just lost 166px, and on a 640 phone
+ * or a 320 column it does not fit at all. Video Selfie already made this call
+ * for its own cues (DEVIATIONS #VS-30, Camila 2026-10-07): under 340 wide or
+ * 720 tall the pill is B. The same line here, so the two camera modules agree
+ * on when a cue goes compact. Nothing is re-skinned: fill, radius, stroke and
+ * shadow are Core's and identical between A and B (capture-feedback.md §4.4);
+ * what changes is exactly Template B's four switches, taken from
+ * `CaptureFeedback.css`'s own `--compact` modifier.
+ *
+ * A container query, not the prop: the screen cannot know the panel's height,
+ * the shell's `pcs-screen` container can. ONE `or` condition, not two
+ * comma-separated queries (lightningcss rejects the latter; see
+ * VideoSelfieLayout.css). The 390 reference is unchanged. DEVIATIONS #IDC-30. */
+@container pcs-screen ((max-width: 340px) or (max-height: 720px)) {
+  .id-capture-stage__feedback .prizma-capture-feedback__illustration {
+    display: none;
+  }
+
+  /* Template B: body padding-bottom 12 → 16, itemSpacing 8 → 4. */
+  .id-capture-stage__feedback .prizma-capture-feedback__body {
+    padding: var(--prizma-spacing-16) 0;
+    gap: var(--prizma-spacing-4);
+  }
+
+  /* Title Headline/H3 → Headline/H5. */
+  .id-capture-stage__feedback .prizma-capture-feedback__title {
+    font-weight: var(--prizma-headline-h5-font-weight);
+    font-size: var(--prizma-headline-h5-font-size);
+    line-height: var(--prizma-headline-h5-line-height);
+    letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  }
+
+  /* Subtitle Headline/H5 → Body/M Regular. */
+  .id-capture-stage__feedback .prizma-capture-feedback__subtitle {
+    font-family: var(--prizma-body-family);
+    font-weight: var(--prizma-body-m-regular-font-weight);
+    font-size: var(--prizma-body-m-regular-font-size);
+    line-height: var(--prizma-body-m-regular-line-height);
+    letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+  }
+}
+
 /* ── Removed: promoted into the foundation ───────────────────────────────────
  * `.id-capture-glyph*` (the non-status glyph slot) is now
  * `ScreenLayout.css`'s `__glyph` — DEVIATIONS #DC-29, closed.
@@ -102,7 +305,7 @@
  *
  * The plate needs no override — Core's own `mode="overlay"` already makes the
  * window transparent, which is what the light screens want. The ink does: the
- * row is re-inked with the THEMED body token so it also survives dark mode,
+ * row is re-inked with the themed body token so it also survives dark mode,
  * scoped to the light screens only (the camera stage keeps Core's Static white).
  * Core gap — PrizmaIdCapture has no surface-aware encrypted row. DEVIATIONS.md #IDC-28.
  */

package/src/IdCaptureStageScreen.tsx

@@ -6,6 +6,7 @@ import {
 } from '@incodetech/prizma-core-web/id-capture';
 import { PrizmaCaptureManual } from '@incodetech/prizma-core-web/capture-manual';
 import { PrizmaCaptureFeedback } from '@incodetech/prizma-core-web/capture-feedback';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
 import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
 import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
@@ -80,6 +81,28 @@ export interface IdCaptureStageScreenProps
   still?: ReactNode;
   /** Digit shown by the countdown Timer (`*-countdown` sections 1..3). */
   countdownValue?: 1 | 2 | 3;
+  /**
+   * Raise the "Need more time?" offer over the feed — the accessibility
+   * notification shown 20 s before auto-capture falls back to the shutter.
+   *
+   * A MODIFIER of whatever stage state is already showing, not a twelfth
+   * state: the 30 s fallback timer runs underneath the hint overlay, so the
+   * person can be shown the hand-and-document ghost and offered more time in
+   * the same frame. Needs `strings.stage.extendTime`; without it the flag is a
+   * no-op, which is what a host that has not localized the copy should get
+   * rather than English. Same contract as `FaceCaptureCapturingScreen`.
+   */
+  extendTime?: boolean;
+  /** Tapping "Extend auto-capture". The host resets its own fallback timer. */
+  onExtendTime?: () => void;
+  /**
+   * A notice band of the host's own, in the slot `extendTime` uses. Wins over
+   * `extendTime` when both are given. Exists for a host that needs the
+   * Snackbar to do something the static one cannot — Core Lab's prototype
+   * swaps in a copy whose count actually runs down — without reaching into
+   * the screen. The static `extendTime` notice stays the default.
+   */
+  notice?: ReactNode;
   screenId?: string;
   overrides?: PrizmaScreenOverrides;
   onAction?: PrizmaScreenActionHandler;
@@ -113,6 +136,31 @@ export interface IdCaptureStageScreenProps
  * to the column's bottom padding) — no offsets are invented here, and
  * PrizmaIdCapture's own frame→encrypted-row adjacency is left untouched
  * (DEVIATIONS.md #12's lesson: never stack an offset a Core component carries).
+ *
+ * ── The "Need more time?" offer (`extendTime`) ──────────────────────────────
+ *
+ * Auto-capture gives up after a configured timeout (30 s in the module's own
+ * flow frames) and drops the person onto the shutter. Someone who is
+ * struggling — a tremor, low vision, a dark room, a card that will not sit
+ * flat — gets moved off the EASIER path precisely because they were slow,
+ * which is backwards. So 20 s before the switch, the stage offers to stay on
+ * auto. A client turns it on per flow from the dashboard; with it off, nothing
+ * about today's capture changes. It is the conformance route for WCAG 2.2.1
+ * Timing Adjustable via the *Extend* clause (warn before the limit, ≥20 s to
+ * act, ≥10 extensions) — the reasoning, the `role="alert"` decision and the
+ * `neutral` state are all Face Capture's (2026-10-05) and are not re-argued
+ * here: `FaceCaptureCapturingScreen`'s header is the record. One feature, two
+ * modules, one Snackbar.
+ *
+ * WHERE IT SITS is the one thing this module decides differently. Face
+ * Capture anchors the notice on the shutter-strip rail because, there, notice
+ * and shutter are alternatives — a capturing screen either raises the offer or
+ * shows the button. ID Capture's strip is never free: the "?" help control
+ * rides it on every stage, auto or manual (IDC-29). So the notice takes the
+ * BOTTOM BAND instead — the flexible air between the encrypted row and the
+ * strip's reserved space — which is the one slot on this stage nothing else
+ * owns. It bottom-anchors there like the band's other content would, so the
+ * frame above does not move when the offer arrives. DEVIATIONS.md #IDC-32.
  */
 export const IdCaptureStageScreen = forwardRef<HTMLDivElement, IdCaptureStageScreenProps>(
   (
@@ -128,6 +176,9 @@ export const IdCaptureStageScreen = forwardRef<HTMLDivElement, IdCaptureStageScr
       camera,
       still,
       countdownValue = 3,
+      extendTime,
+      onExtendTime,
+      notice,
       screenId = `id-capture-${documentType}-${side}-${state}`,
       overrides,
       onAction,
@@ -146,6 +197,29 @@ export const IdCaptureStageScreen = forwardRef<HTMLDivElement, IdCaptureStageScr
     const pillKind = feedback === undefined ? STAGE_FEEDBACK[state] : feedback;
     const pillCopy = pillKind ? strings.feedback[pillKind] : undefined;
 
+    const offer = strings.stage.extendTime;
+    // No copy, no notice: a host that has not localized this must not get
+    // English, and the flag alone is not permission to invent it.
+    const band =
+      notice ??
+      (extendTime && offer ? (
+        <PrizmaSnackbar
+          state="neutral"
+          isMultiline
+          // Assertive on purpose — a polite region can queue behind the
+          // stage's own state announcements and be read out after the 20 s
+          // has already run out. FaceCaptureCapturingScreen's header has the
+          // full reasoning; this instance follows it.
+          role="alert"
+          linkLabel={offer.linkLabel}
+          onLinkClick={onExtendTime}
+        >
+          <strong>{offer.title}</strong>
+          <br />
+          {offer.description}
+        </PrizmaSnackbar>
+      ) : undefined);
+
     return (
       <PrizmaScreenShell
         ref={ref}
@@ -213,6 +287,7 @@ export const IdCaptureStageScreen = forwardRef<HTMLDivElement, IdCaptureStageScr
             still={still}
           />
           <div className="id-capture-band">
+            {band ? <div className="id-capture-stage__notice">{band}</div> : null}
           </div>
         </div>
         <div className="prizma-screen-layout__capture-strip">

package/src/IdCaptureStrings.ts

@@ -126,6 +126,25 @@ export interface IdCaptureStrings {
     /** Visually-hidden state announcements, per stage state — forwarded to
      *  `PrizmaIdCapture.stateLabels`. */
     stateLabels?: Partial<Record<IdCaptureStageState, string>>;
+    /**
+     * stage.extendTime — the accessibility offer that rides the camera stage
+     * 20 s before auto-capture gives up and hands over to the shutter
+     * ("Need more time? / Manual capture starts in 20 s / Extend auto-capture").
+     * The same contract as Face Capture's `extendTime`: one feature, two
+     * modules, identical copy, so the locale overlay translates both at once.
+     *
+     * `description` is one localized sentence that CONTAINS the count, not a
+     * template — ten locales put the number in ten places. Optional: a host
+     * that has not localized it gets no notice rather than English.
+     */
+    extendTime?: {
+      /** Bold first line — "Need more time?" */
+      title: string;
+      /** "Manual capture starts in 20 s" — the count lives inside the copy. */
+      description: string;
+      /** The action that keeps the user on auto — "Extend auto-capture". */
+      linkLabel: string;
+    };
   };
 
   /** The on-camera feedback pills the error stages carry. */

package/src/ListScreen.tsx

@@ -74,9 +74,30 @@ export interface PrizmaListScreenProps
    *  (common issues) and "Quit process" (permission). Figma draws Core's
    *  `tertiary-link` composite in the band's top slot. */
   linkLabel?: string;
+  /**
+   * A SECOND tertiary link, under the first. Reusability's selection draws
+   * "What data will be shared?" over "Incode’s Privacy Policy" with no primary
+   * between them — two non-primary actions a host has to tell apart, so this
+   * one emits `tertiary` where `linkLabel` emits `secondary` (the #PI-10
+   * reasoning). Stacked at the band's flat Spacing/16 like everything else in
+   * it. Omit it and nothing renders, so every existing consumer is untouched.
+   * DEVIATIONS #RU-4.
+   */
+  secondaryLinkLabel?: string;
+  /**
+   * A shell-level layer painted OVER the whole screen — the same slot
+   * archetypes A and E carry (#F-32, #BC-8): a scrim plus Core's
+   * `PrizmaBottomSheetContent` or `PrizmaModalContent`, presented on top of the
+   * dimmed list. It cannot ride in the content column: it is absolutely
+   * positioned against the shell. Reusability's shared-details sheet is the
+   * first List consumer (DEVIATIONS #RU-5).
+   */
+  overlay?: ReactNode;
   /** "verified by" attribution copy for the footer tag. */
   verifiedLabel: string;
   navLabel?: string;
+  /** Opt-in back chevron in the nav (its accessible name). Emits `back`. */
+  backLabel?: string;
   screenId?: string;
   overrides?: PrizmaScreenOverrides;
   onAction?: PrizmaScreenActionHandler;
@@ -120,8 +141,11 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
       ctaLabel,
       secondaryCtaLabel,
       linkLabel,
+      secondaryLinkLabel,
+      overlay,
       verifiedLabel,
       navLabel,
+      backLabel,
       screenId,
       showHeader = true,
       showFooter = true,
@@ -132,7 +156,13 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
     ref,
   ) => (
     <PrizmaScreenShell ref={ref} {...shell}>
-      <PrizmaScreenNav reserved={!showHeader} logo={overrides?.logo} navLabel={navLabel} />
+      <PrizmaScreenNav
+        reserved={!showHeader}
+        logo={overrides?.logo}
+        navLabel={navLabel}
+        backLabel={backLabel}
+        onBack={() => onAction?.({ type: 'back', screenId })}
+      />
       {progress ? (
         <div className="prizma-screen-layout__progress">{progress}</div>
       ) : null}
@@ -162,17 +192,34 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
         >
           {children}
         </div>
-        {ctaLabel || secondaryCtaLabel || linkLabel || disclaimer ? (
+        {ctaLabel || secondaryCtaLabel || linkLabel || secondaryLinkLabel || disclaimer ? (
           <div className="prizma-screen-layout__band">
             {disclaimer ? <PrizmaDisclaimer text={disclaimer} /> : null}
-            {linkLabel ? (
-              <PrizmaButton
-                variant="tertiary-link"
-                size="L"
-                onClick={() => onAction?.({ type: 'secondary', screenId })}
-              >
-                {linkLabel}
-              </PrizmaButton>
+            {linkLabel || secondaryLinkLabel ? (
+              /* The links share ONE band slot, stacked flush: two 56px link
+                 rows with the band's 16 between them read as two distant
+                 lines (Camila, 2026-10-13); the row height is already the
+                 touch target. ScreenLayout.css `__band__links`. */
+              <div className="prizma-screen-layout__band__links">
+                {linkLabel ? (
+                  <PrizmaButton
+                    variant="tertiary-link"
+                    size="L"
+                    onClick={() => onAction?.({ type: 'secondary', screenId })}
+                  >
+                    {linkLabel}
+                  </PrizmaButton>
+                ) : null}
+                {secondaryLinkLabel ? (
+                  <PrizmaButton
+                    variant="tertiary-link"
+                    size="L"
+                    onClick={() => onAction?.({ type: 'tertiary', screenId })}
+                  >
+                    {secondaryLinkLabel}
+                  </PrizmaButton>
+                ) : null}
+              </div>
             ) : null}
             {/* THE PRIMARY ALWAYS SITS ABOVE THE SECONDARY (owner rule
                 2026-08-19, DEVIATIONS #GEO-1). The rule governs the
@@ -205,6 +252,7 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
           <PrizmaTag label={verifiedLabel} />
         </div>
       ) : null}
+      {overlay}
     </PrizmaScreenShell>
   ),
 );

package/src/LoaderScreen.tsx

@@ -23,11 +23,13 @@ export interface LoaderScreenProps
  * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
  *
  * Figma: `Module Generic Screens` frames `67:2388` ("Processing…") and
- * `67:3593` ("Just a moment…"). ONE screen for both, and for every module
- * loader after them: logo header → Core's spinner → status line → reassurance
- * line → the verified tag, with no CTA. The archetype already IS this recipe;
- * this component exists so the family has a name a designer can point at and a
- * copy contract a host can fill, not to add layout.
+ * `67:3593` ("Just a moment…"), plus the SDK's own "Hold on a sec…" wait that
+ * ID Capture, NFC and the Demo App show (`verifyingIdentity`). ONE screen for
+ * all of them, and for every module loader after them: logo header → Core's
+ * spinner → status line → reassurance line → the verified tag, with no CTA.
+ * The archetype already IS this recipe; this component exists so the family
+ * has a name a designer can point at and a copy contract a host can fill, not
+ * to add layout.
  *
  * Reach for `PrizmaResultScreen` the moment a wait screen needs a button — a
  * loader with a "Cancel" is a result screen, and the missing CTA band here is

package/src/LoadersStrings.ts

@@ -15,12 +15,25 @@
 // No hardcoded English anywhere in a screen: every visible string arrives here.
 
 /**
- * The two frames in the generic file. They are the same screen with different
- * copy — which is the point of the family: the loader is a shape, and the two
- * entries here are examples of filling it, not a closed set. A module that
- * waits for something else supplies its own pair of strings under a new key.
+ * The copy pairs the family records. The loader is a shape, and each entry
+ * here is a way of filling it that more than one module already uses — not a
+ * closed set. A module that waits for something else supplies its own pair of
+ * strings under a new key.
+ *
+ * - `processing`        — frame `67:2388`. "Processing…" over the generic
+ *                         reassurance line. Watchlist for Business, eKYC, eKYB,
+ *                         Email Input and the signatures all draw this title.
+ * - `validating`        — frame `67:3593`. "Just a moment…", the documents
+ *                         are being validated.
+ * - `verifyingIdentity` — the SDK's own `loadingCircle.holdOn` wait: "Hold on
+ *                         a sec…" over "We're verifying your identity". ID
+ *                         Capture, NFC and the Demo App show it between the
+ *                         last capture and the verdict (Camila, 2026-10-09).
+ *
+ * Copy rule for every wait title: the ellipsis is the single `…` character,
+ * never two or three periods, so the same word reads the same in every module.
  */
-export type LoadersVariant = 'processing' | 'validating';
+export type LoadersVariant = 'processing' | 'validating' | 'verifyingIdentity';
 
 export interface LoadersCopy {
   /** H2 status line ("Processing…"). */

package/src/OcrReviewErrorScreen.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { OcrReviewStrings } from './OcrReviewStrings';
+import './ScreenLayout.css';
+
+export interface OcrReviewErrorScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `error` slice. */
+  strings: OcrReviewStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * OCR Review — "Something went wrong", built on Archetype F (GUIDELINES.md
+ * §6-F, `PrizmaResultScreen`). Figma: `OCR Error` (31084:18797), drawn OUTSIDE
+ * the Happy Path section and reached off the "Processed successfully?"
+ * decision's "No" branch — a plain status + title + "Try again" CTA.
+ *
+ * Nav and footer tag are left at the archetype's DEFAULT (shown). The frame
+ * itself draws neither, matching `DigitalIdUploadFileTooLargeScreen.tsx` —
+ * but that screen is the ONE exception in the whole package, not the pattern:
+ * every other error screen (`EkycErrorScreen`, `EkybErrorScreen`,
+ * `EmailInputErrorScreen`, `FormsErrorScreen`, `IdCaptureDocumentErrorScreen`)
+ * keeps both. Hiding them here, with only one CTA to balance the bottom,
+ * pushed the status + title below where every sibling error screen centres it
+ * (Mili, 2026-10-12 — checked against the system's own screens, not re-derived
+ * from the frame).
+ */
+export const OcrReviewErrorScreen = forwardRef<HTMLDivElement, OcrReviewErrorScreenProps>(
+  ({ strings, screenId = 'ocr-review-error', overrides, onAction, ...shell }, ref) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="error"
+      title={strings.error.title}
+      ctaLabel={strings.error.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+OcrReviewErrorScreen.displayName = 'OcrReviewErrorScreen';
+
+export default OcrReviewErrorScreen;

package/src/OcrReviewLayout.css

@@ -0,0 +1,24 @@
+/* OCR Review — the one piece of chrome the archetype doesn't own.
+ *
+ * `PrizmaFormScreen.media` places whatever the module hands it; the circular
+ * crop and fixed size are the module's own, same split `progress` already
+ * draws (the archetype positions a `PrizmaStepper`, never sizes it). 90×90,
+ * centred — Figma's `Image / Selfie` instance, read straight off the frame. A
+ * `fields` row defaults to `align-items: stretch` (FormScreen.css), so the
+ * thumbnail is the one row that opts itself out with `align-self`.
+ */
+.ocr-review__photo {
+  width: 90px;
+  height: 90px;
+  flex-shrink: 0;
+  align-self: center;
+  border-radius: var(--prizma-border-radius-full);
+  overflow: hidden;
+}
+
+.ocr-review__photo img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}