@incodetech/prizma-core-screens 0.1.0

package/src/NfcScanningScreen.tsx

@@ -0,0 +1,127 @@
+import React, { forwardRef } from 'react';
+import { PrizmaLoadingBar } from '@incodetech/prizma-core-web/loading-bar';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { NfcStrings } from './NfcStrings';
+import './ScreenLayout.css';
+
+/** Which moment of the read this is. The two moments the Prizma layer actually
+ *  draws: the bar filling under "Scanning..", then full and green under "Done".
+ *  There is no `error` member — the failed read never reaches this layer; see
+ *  the note below. */
+export type NfcScanningState = 'scanning' | 'done';
+
+/** State → Core `PrizmaLoadingBar` phase + the progress the section draws. */
+const BAR: Record<NfcScanningState, { state: 'analyzing' | 'success'; progress: number }> = {
+  scanning: { state: 'analyzing', progress: 15 },
+  done: { state: 'success', progress: 100 },
+};
+
+export interface NfcScanningScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `scanning` slice. */
+  strings: NfcStrings;
+  /** Which moment of the read to render. Default `scanning`. */
+  state?: NfcScanningState;
+  /** Override the bar's fill (runtime data, never copy). */
+  progress?: number;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * NFC — the read in flight: "Scanning.." → "Done". The Prizma layer of the
+ * `nfc.scanning` group (22469:32916).
+ *
+ * **What this screen is, and what it deliberately is not.** All ten of that
+ * group's purple sections draw the PLATFORM's own NFC dialog — iOS's "Ready to
+ * scan" sheet with its status glyph and Cancel row, and Android's equivalent on
+ * a blacked-out backdrop. Those are OS chrome, not Prizma surfaces: a screen
+ * composed only of Core components cannot render them, and faking them would
+ * ship a counterfeit system UI. Same ruling as ID Capture's OS permission
+ * dialogs (#IDC-26) and Document Capture's iOS action sheet / Photos picker
+ * (#DC-20). What IS a Prizma surface is the screen UNDER the sheet — visible
+ * through it in the iOS sections, and the whole screen once the sheet is
+ * dismissed — and that is what this file builds: nav → title block → the
+ * progress bar and its "Hold still.." line.
+ *
+ * Only TWO of the ten sections carry a distinct Prizma layer, and they are the
+ * two states above: `nfc.scanning.scanning` (22469:34999) and
+ * `nfc.scanning.success` (22469:36706, "Done" + the full green bar). The other
+ * eight have no screen of their own:
+ * - the four `*ready` sections sit over `NfcTutorialScreen`, unchanged;
+ * - `androidscanning` / `androiddone` / `androidscanningError` black the app out
+ *   entirely behind Android's sheet — there is nothing of ours to draw;
+ * - `scanningerror` (23291:19865) and `androidscanningError` (22526:20450) put
+ *   the words "We couldn't scan the chip" INSIDE the OS sheet. Re-checked frame
+ *   by frame on 2026-08-19: behind the iOS sheet the Prizma layer is
+ *   byte-for-byte `nfc.scanning.scanning` — same "Scanning.." title, same
+ *   subtitle, same partly-filled bar, same "Hold still..". So this file has NO
+ *   `error` state: hoisting the sheet's copy into the title block would invent a
+ *   screen Figma never draws, and a `failed` bar appears nowhere in the group.
+ *   A failed read is communicated by the OS sheet, then by `NfcTryAgainScreen`.
+ *
+ * Archetype G (`PrizmaListScreen`) carries it — the frames put the bar at
+ * Spacing/24 under a top-aligned title block, which is exactly G's middle slot
+ * (F would centre the pair and drop the title). The bar is Core's
+ * `PrizmaLoadingBar`, capped at Figma's 164px by the foundation's own
+ * `__review-loading` rule (#DC-28 / #REV-1) rather than a second copy of that
+ * literal in a module file.
+ *
+ * One Core-wins colour call, already settled: Figma fills the in-flight bar
+ * GREEN, Core fills it brand blue because "green is reserved for success"
+ * (owner, 2026-07-11 — DEVIATIONS #DC-28). `done` is genuinely green.
+ */
+export const NfcScanningScreen = forwardRef<HTMLDivElement, NfcScanningScreenProps>(
+  (
+    {
+      strings,
+      state = 'scanning',
+      progress,
+      screenId = `nfc-scanning-${state}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const bar = BAR[state];
+    const slice = strings.scanning[state];
+
+    return (
+      <PrizmaListScreen
+        ref={ref}
+        title={slice.title}
+        subtitle={slice.subtitle}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <div className="prizma-screen-layout__review-loading">
+          <PrizmaLoadingBar
+            progress={progress ?? bar.progress}
+            state={bar.state}
+            title={strings.scanning.progressLabel}
+          />
+        </div>
+      </PrizmaListScreen>
+    );
+  },
+);
+NfcScanningScreen.displayName = 'NfcScanningScreen';
+
+export default NfcScanningScreen;

package/src/NfcSettingsScreen.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef } from 'react';
+import { IconStatusWarning } from '@incodetech/prizma-core-icons';
+import { PrizmaModalContent } from '@incodetech/prizma-core-web/modal';
+import { PrizmaTutorialScreen, type PrizmaTutorialScreenProps } from './TutorialScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { NfcStrings } from './NfcStrings';
+import './ScreenLayout.css';
+import './NfcLayout.css';
+
+export interface NfcSettingsScreenProps
+  extends Omit<
+    PrizmaTutorialScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'ctaLabel'
+    | 'linkLabel'
+    | 'illustration'
+    | 'overlay'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `settings` slice. */
+  strings: NfcStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * NFC — "Enable NFC scanning", the dialog shown when the device has NFC but it
+ * is switched off. Purple section `nfc.error.nfcsettings` (23003:23652).
+ *
+ * The section is a Core `Modal` on a scrim over a backgrounded app: there is no
+ * Prizma surface behind it at all (its CONTENT frame holds the Modal instance
+ * and nothing else). Core's `PrizmaModalContent` renders the card verbatim; the
+ * screen supplies only the scrim and the centring frame, exactly as Document
+ * Capture's method sheet does (#DC-30) — the safe presenter portals to
+ * `document.body` and would escape the screen frame.
+ *
+ * TWO shortcomings, both reported rather than worked around:
+ * - **No archetype models "an overlay over nothing".** `PrizmaTutorialScreen`
+ *   is used purely because A's `overlay` is the only shell-level slot in the
+ *   archetype layer; its own content is emptied out (no illustration, no CTA,
+ *   header and footer off) and its required `title` is passed the empty string
+ *   so nothing renders behind the scrim. That is a workaround at the archetype
+ *   BOUNDARY, not inside a module file, and it is the gap being reported.
+ * - **⚠️ KNOWN MISMATCH — the status mark lands below the copy.** Figma stacks
+ *   the amber mark ABOVE the title (mark → "Enable NFC scanning" → the two-line
+ *   body → the filled blue button). Core's only mark-shaped slot is
+ *   `with-image`, and `Modal.tsx` renders it AFTER the content block — title
+ *   (l. 218), subtitle (l. 220), body, THEN `prizma-modal__image` (l. 224) —
+ *   so the rendered card is title → body → mark → button. Re-confirmed against
+ *   Core source on 2026-08-19; `title` is typed `string`, so the mark cannot
+ *   ride along in the heading either. Every in-module alternative (hand-rolling
+ *   the card, or reordering Core's own BEM children from `NfcLayout.css`) is a
+ *   local workaround around a missing archetype/Core slot, which rule 2 forbids
+ *   — so this state SHIPS KNOWINGLY WRONG rather than being treated as matching
+ *   the frame, and the fix is Core-side. **Core request: a status-mark slot on
+ *   `PrizmaModalContent` rendered ABOVE the title, mirroring `PrizmaTitle`'s
+ *   status-icon position; this screen switches to it the day it lands.**
+ *   The mark itself is the bank's OUTLINE `IconStatusWarning`, not Figma's
+ *   filled disc (#15), wearing Core's OWN `prizma-title__status-icon--warning`
+ *   class so both the Title/Icon/Size (40) and the amber token come from the
+ *   design system — the #PI-7 idiom of borrowing a Core modifier through
+ *   `className` rather than redeclaring anything.
+ */
+export const NfcSettingsScreen = forwardRef<HTMLDivElement, NfcSettingsScreenProps>(
+  (
+    {
+      strings,
+      screenId = 'nfc-settings',
+      showHeader = false,
+      showFooter = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaTutorialScreen
+      ref={ref}
+      /* Nothing renders behind the scrim — see the note above. Not copy, so
+         nothing to translate. */
+      title=""
+      showHeader={showHeader}
+      showFooter={showFooter}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      overlay={
+        <>
+          <div className="nfc-modal-scrim" aria-hidden="true" />
+          <div className="nfc-modal-panel">
+            <PrizmaModalContent
+              variant="with-image"
+              title={strings.settings.title}
+              subtitle={strings.settings.subtitle}
+              ariaLabel={strings.settings.dialogLabel}
+              image={
+                <IconStatusWarning
+                  size="m"
+                  className="prizma-title__status-icon prizma-title__status-icon--warning"
+                />
+              }
+              showCloseIcon={false}
+              buttonGroupProps={{
+                showPrimary: true,
+                showSecondary: false,
+                primaryLabel: strings.settings.ctaLabel,
+                onPrimaryClick: () => onAction?.({ type: 'cta', screenId }),
+              }}
+            />
+          </div>
+        </>
+      }
+      {...shell}
+    />
+  ),
+);
+NfcSettingsScreen.displayName = 'NfcSettingsScreen';
+
+export default NfcSettingsScreen;

package/src/NfcStrings.ts

@@ -0,0 +1,127 @@
+// NFC — every string the module's screens render.
+//
+// Screens are pure presentational components (GUIDELINES.md §9): no English is
+// baked into a screen file, so the whole module is translated by swapping this
+// one object. Mirrors the module's Figma localization columns (🇺🇸 US · 🇪🇸 ES ·
+// 🇵🇹 PT) on `dlEkkopentyypbxlYjDWTZ`, page `19971:96836`.
+
+/** Which document's chip is being read. Drives artwork AND copy on every
+ *  family that has a passport/ID split (symbol · tutorial · tryAgain ·
+ *  commonIssues). */
+export type NfcDocumentType = 'passport' | 'id';
+
+/**
+ * Which common-issue row this is. The kind — not the copy — picks the row's
+ * canonical bank glyph (`NfcCommonIssuesScreen`), so a translated label never
+ * changes the icon. `passportTooFar` / `idTooFar` are two kinds rather than one
+ * because the bank draws the document itself in the glyph.
+ */
+export type NfcIssueKind =
+  | 'passportInCover'
+  | 'passportTooFar'
+  | 'idTooFar'
+  | 'chipOtherPage'
+  | 'phoneMoved'
+  | 'phoneCover';
+
+export interface NfcIssueStrings {
+  /** Which glyph leads the row. */
+  kind: NfcIssueKind;
+  /** The row's single line of copy. */
+  label: string;
+}
+
+/** One title + subtitle pair. Used by every family that varies only in copy. */
+export interface NfcHeadingStrings {
+  title: string;
+  subtitle: string;
+}
+
+export interface NfcStrings {
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+  /** Accessible name for the nav region. */
+  navLabel: string;
+
+  /** `nfc.symbol.{passport,id}` — "Is this symbol visible…?" */
+  symbol: {
+    passport: { title: string };
+    id: { title: string };
+    /** Filled primary. */
+    yesLabel: string;
+    /** Outlined secondary. */
+    noLabel: string;
+    /** Accessible name for the chip-location artwork. */
+    illustrationLabel: string;
+  };
+
+  /** `nfc.tutorial.{passport,id}` — the pre-scan instruction. */
+  tutorial: {
+    passport: NfcHeadingStrings;
+    id: NfcHeadingStrings;
+    ctaLabel: string;
+    illustrationLabel: string;
+  };
+
+  /**
+   * `nfc.scanning.*` — the Prizma layer that runs UNDER the platform's own NFC
+   * sheet: title block + progress bar. The sheet itself is OS chrome and is not
+   * a screen this package can build (see `NfcScanningScreen`).
+   *
+   * Two entries only. There is no `error` copy here: on the failure frames
+   * (`nfc.scanning.scanningerror` · `.androidscanningError`) the words "We
+   * couldn't scan the chip" belong to the OS sheet, and the Prizma layer behind
+   * it is still the `scanning` one.
+   */
+  scanning: {
+    scanning: NfcHeadingStrings;
+    done: NfcHeadingStrings;
+    /** The line under the bar ("Hold still.."). */
+    progressLabel: string;
+  };
+
+  /** `nfc.tryagain.*` — retry instructions, one per passport page + the ID. */
+  tryAgain: {
+    passport: NfcHeadingStrings;
+    firstPage: NfcHeadingStrings;
+    photoPage: NfcHeadingStrings;
+    backPage: NfcHeadingStrings;
+    id: NfcHeadingStrings;
+    /** Filled primary. */
+    ctaLabel: string;
+    /** Outlined secondary — opens the common-issues sheet. */
+    helpLabel: string;
+    illustrationLabel: string;
+  };
+
+  /** `nfc.commonissues.{id,passport}` — the help sheet. */
+  commonIssues: {
+    title: string;
+    ctaLabel: string;
+    /** Accessible name for the row list. */
+    listLabel: string;
+    /** Three rows on the ID sheet, five on the passport one. */
+    issues: Record<NfcDocumentType, NfcIssueStrings[]>;
+  };
+
+  /** `nfc.loading.default` — chip read, identity being verified. */
+  loading: NfcHeadingStrings;
+
+  /** `nfc.success.default` — the verdict. No button. */
+  success: { title: string };
+
+  /** `nfc.error.{unable,generalerror}` — the two verdict errors. */
+  error: {
+    unable: NfcHeadingStrings & { ctaLabel: string };
+    general: { title: string; ctaLabel: string };
+  };
+
+  /** `nfc.error.nfcsettings` — the "turn NFC on" dialog. */
+  settings: {
+    title: string;
+    subtitle: string;
+    ctaLabel: string;
+    /** Accessible name for the dialog. */
+    dialogLabel: string;
+  };
+}

package/src/NfcSuccessScreen.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaProcessingScreen,
+  type PrizmaProcessingScreenProps,
+} from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { NfcStrings } from './NfcStrings';
+import './ScreenLayout.css';
+
+export interface NfcSuccessScreenProps
+  extends Omit<
+    PrizmaProcessingScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `success` slice. */
+  strings: NfcStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * NFC — "Identity successfully verified", the module's positive verdict.
+ * Purple section `nfc.success.default` (19975:109249).
+ *
+ * Archetype C, not F: the section draws NO button (the flow advances on its
+ * own), and §6-F reserves C for exactly the pure no-CTA case — the same split
+ * Email Input's success takes while Phone Input's, which does draw a button,
+ * sits on F (#EI-4).
+ *
+ * Figma draws the check as a filled green disc; Core renders the single-colour
+ * OUTLINE mark from the icon bank (icon-outline sweep, owner 2026-07-28), so
+ * this screen shows the outline — the module Figma is one sweep behind, exactly
+ * as recorded for every other module's status marks (#15, #DC-34).
+ */
+export const NfcSuccessScreen = forwardRef<HTMLDivElement, NfcSuccessScreenProps>(
+  (
+    { strings, screenId = 'nfc-success', overrides, onAction, ...shell },
+    ref,
+  ) => (
+    <PrizmaProcessingScreen
+      ref={ref}
+      status="success"
+      title={strings.success.title}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+NfcSuccessScreen.displayName = 'NfcSuccessScreen';
+
+export default NfcSuccessScreen;

package/src/NfcSymbolScreen.tsx

@@ -0,0 +1,85 @@
+import React, { forwardRef } from 'react';
+import { PrizmaIllustrationNfcLocation } from '@incodetech/prizma-core-web/illustration-nfc-scan';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { NfcDocumentType, NfcStrings } from './NfcStrings';
+import './ScreenLayout.css';
+
+export interface NfcSymbolScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `symbol` slice. */
+  strings: NfcStrings;
+  /** Which purple section: `nfc.symbol.passport` or `nfc.symbol.id`. */
+  documentType?: NfcDocumentType;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * NFC — "Is this symbol visible on your passport cover / on the front or back
+ * of your ID?", the gate that decides whether the chip flow can run at all.
+ * Purple sections `nfc.symbol.passport` (19974:74431) and `nfc.symbol.id`
+ * (19978:116624).
+ *
+ * Built on the List archetype (GUIDELINES.md §6-G, `PrizmaListScreen`) rather
+ * than the Tutorial one, because the frames TOP-align the title at the nav's
+ * Spacing/24 and hang the artwork under it — which is exactly what G's middle
+ * slot does — while archetype A's `__flex` centres its illustration in the
+ * whole middle and would drop the title ~84px. G's slot is a generic middle,
+ * not a list-only slot; the class name is the only thing that says otherwise.
+ *
+ * The artwork is Core's own `PrizmaIllustrationNfcLocation` — the "where is the
+ * chip" companion from the same Figma section as the scan animation — so
+ * nothing is inlined here (GUIDELINES §10).
+ *
+ * ONE thing Figma draws that this screen does not: the two answers side by
+ * side, "No" left and "Yes" right. Archetype G has no `ctaOrientation` (only F
+ * does, #F-33), and a screen never declares its own button layout, so the pair
+ * stacks — primary "Yes" above secondary "No", which is the standing order rule
+ * (#GEO-1). Reported as an archetype gap rather than worked around.
+ */
+export const NfcSymbolScreen = forwardRef<HTMLDivElement, NfcSymbolScreenProps>(
+  (
+    {
+      strings,
+      documentType = 'passport',
+      screenId = `nfc-symbol-${documentType}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaListScreen
+      ref={ref}
+      title={strings.symbol[documentType].title}
+      ctaLabel={strings.symbol.yesLabel}
+      secondaryCtaLabel={strings.symbol.noLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaIllustrationNfcLocation
+        type={documentType}
+        ariaLabel={strings.symbol.illustrationLabel}
+      />
+    </PrizmaListScreen>
+  ),
+);
+NfcSymbolScreen.displayName = 'NfcSymbolScreen';
+
+export default NfcSymbolScreen;

package/src/NfcTryAgainScreen.tsx

@@ -0,0 +1,114 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaIllustrationNfcScan } from '@incodetech/prizma-core-web/illustration-nfc-scan';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { NfcDocumentType, NfcStrings } from './NfcStrings';
+import './ScreenLayout.css';
+
+/**
+ * Which retry instruction to show. The four passport values are the pages a
+ * passport read walks through — `nfc.tryagain.passport` (the cover),
+ * `.passportfirstpage`, `.passportphotopage`, `.passportbackpage` — and `id` is
+ * the single-surface ID section.
+ */
+export type NfcTryAgainStep = 'passport' | 'firstPage' | 'photoPage' | 'backPage' | 'id';
+
+/** Which document each step belongs to — picks the artwork. */
+const DOCUMENT_BY_STEP: Record<NfcTryAgainStep, NfcDocumentType> = {
+  passport: 'passport',
+  firstPage: 'passport',
+  photoPage: 'passport',
+  backPage: 'passport',
+  id: 'id',
+};
+
+export interface NfcTryAgainScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `tryAgain` slice. */
+  strings: NfcStrings;
+  /** Which purple section to render. Default `passport`. */
+  step?: NfcTryAgainStep;
+  /** Replace Core's NFC artwork. */
+  illustration?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * NFC — the retry instructions: "Let's try again" for the cover, then one
+ * screen per passport page ("Scan the first page" / "the photo page" / "the
+ * back page"), plus the ID's own. Purple sections `nfc.tryagain.*`
+ * (22469:40368), five in all.
+ *
+ * ONE screen for all five: they draw the identical skeleton — title block →
+ * document artwork filling the middle → Help + Try again — and differ only in
+ * the instruction, so five files would have been five chances to drift. The
+ * artwork is Core's `PrizmaIllustrationNfcScan`, frozen (`animated={false}`)
+ * because these sections draw the document at rest, not the scan loop.
+ *
+ * Archetype G (`PrizmaListScreen`) for the same reason as `NfcSymbolScreen`:
+ * the frames top-align the title at Spacing/24 under the nav and hang the
+ * artwork below it.
+ *
+ * TWO things Figma draws that this screen does not, both reported rather than
+ * worked around:
+ * - **The page-position dots.** Every passport section carries a 52 × 7 row of
+ *   four dots under the artwork, marking which page is being read. Core ships
+ *   no pagination/dots primitive — `PrizmaStepper` is a journey stepper with
+ *   labelled segments and icons, a different thing — and GUIDELINES §10 forbids
+ *   inventing one. The step is still legible: each section's title names the
+ *   page. **Core request: a dots/page-indicator primitive.**
+ * - **Help | Try again side by side.** Archetype G has no `ctaOrientation`
+ *   (only F does, #F-33), so the pair stacks: primary "Try again" above
+ *   secondary "Help", per the standing order rule (#GEO-1).
+ */
+export const NfcTryAgainScreen = forwardRef<HTMLDivElement, NfcTryAgainScreenProps>(
+  (
+    {
+      strings,
+      step = 'passport',
+      illustration,
+      screenId = `nfc-try-again-${step}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaListScreen
+      ref={ref}
+      title={strings.tryAgain[step].title}
+      subtitle={strings.tryAgain[step].subtitle}
+      ctaLabel={strings.tryAgain.ctaLabel}
+      secondaryCtaLabel={strings.tryAgain.helpLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      {illustration ?? (
+        <PrizmaIllustrationNfcScan
+          type={DOCUMENT_BY_STEP[step]}
+          animated={false}
+          ariaLabel={strings.tryAgain.illustrationLabel}
+        />
+      )}
+    </PrizmaListScreen>
+  ),
+);
+NfcTryAgainScreen.displayName = 'NfcTryAgainScreen';
+
+export default NfcTryAgainScreen;