@incodetech/prizma-core-screens 0.1.0

package/dist/ListScreen.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaDisclaimer } from '@incodetech/prizma-core-web/disclaimer';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import './ScreenLayout.css';
+/**
+ * Archetype G — List.
+ *
+ * Nav (or reserved row) → optional glyph → title block → a Core card / option
+ * list filling the middle → CTA band → anchored footer tag.
+ *
+ * It exists because EIGHT screens hand-built it independently: ID Capture's
+ * common issues, permission, age verification and document chooser, Document
+ * Capture's common issues, and the document-error card lists. Each re-declared
+ * the title→list offset (24 on the ID screens, 32 on Document Capture's) and
+ * each inserted the verified tag by hand — which is how the tag ended up at 0 on
+ * some screens and 16 on others (DEVIATIONS #F-29, #F-31).
+ *
+ * CTA band order is the family's designed one: disclaimer → tertiary link →
+ * secondary → primary. The link sits ABOVE the primary here (Figma
+ * `tertiaryPosition="top"` on `1-5-2-id-common-issues` and `1-3-2-id`), which is
+ * the mirror of Archetype A, where it sits below. Stacked at the foundation's
+ * flat Spacing/16 (DEVIATIONS #8) — every offset comes from ScreenLayout.css and
+ * this file declares none of its own.
+ *
+ * Reach for `PrizmaResultScreen` instead when the middle is a centred verdict
+ * rather than a list.
+ */
+export const PrizmaListScreen = forwardRef(({ progress, status = 'none', title, subtitle, glyph, children, listAlign = 'start', scrollList = false, disclaimer, ctaLabel, secondaryCtaLabel, linkLabel, verifiedLabel, navLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel }), progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsxs("div", { className: "prizma-screen-layout__content", children: [glyph, _jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle, icon: status === 'loading'
+                        ? { type: 'spinner' }
+                        : status === 'none'
+                            ? { type: 'none' }
+                            : { type: 'status', status } }), _jsx("div", { className: [
+                        'prizma-screen-layout__list',
+                        listAlign === 'end' ? 'prizma-screen-layout__list--end' : '',
+                        scrollList ? 'prizma-screen-layout__list--scroll' : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' '), children: children }), ctaLabel || secondaryCtaLabel || linkLabel || disclaimer ? (_jsxs("div", { className: "prizma-screen-layout__band", children: [disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, secondaryCtaLabel ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: secondaryCtaLabel })) : null] })) : null] }), showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })));
+PrizmaListScreen.displayName = 'PrizmaListScreen';
+export default PrizmaListScreen;

package/dist/LoaderScreen.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { LoadersStrings, LoadersVariant } from './LoadersStrings';
+import './ScreenLayout.css';
+export interface LoaderScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
+    /** Family copy — this screen reads the `variants` slice its `variant` names. */
+    strings: LoadersStrings;
+    /** Which copy pair to render. Default `processing`. */
+    variant?: LoadersVariant;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Loaders — the generic wait screen, built on the Processing archetype
+ * (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.
+ *
+ * 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
+ * exactly what made three modules hand-build the skeleton (see
+ * `ResultScreen.tsx`).
+ */
+export declare const LoaderScreen: React.ForwardRefExoticComponent<LoaderScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default LoaderScreen;

package/dist/LoaderScreen.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * Loaders — the generic wait screen, built on the Processing archetype
+ * (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.
+ *
+ * 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
+ * exactly what made three modules hand-build the skeleton (see
+ * `ResultScreen.tsx`).
+ */
+export const LoaderScreen = forwardRef(({ strings, variant = 'processing', screenId = `loaders-${variant}`, overrides, onAction, ...shell }, ref) => {
+    const copy = strings.variants[variant];
+    return (_jsx(PrizmaProcessingScreen, { ref: ref, status: "loading", title: copy.title, subtitle: copy.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+});
+LoaderScreen.displayName = 'LoaderScreen';
+export default LoaderScreen;

package/dist/LoadersStrings.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+export type LoadersVariant = 'processing' | 'validating';
+export interface LoadersCopy {
+    /** H2 status line ("Processing…"). */
+    title: string;
+    /** Reassurance line under it ("This won't take long."). */
+    subtitle?: string;
+}
+export interface LoadersStrings {
+    /** Accessible name for the logo nav region (i18n — no baked-in English). */
+    navLabel?: string;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    variants: Record<LoadersVariant, LoadersCopy>;
+}

package/dist/LoadersStrings.js

@@ -0,0 +1,16 @@
+// Loaders — copy contract for the GENERIC family.
+//
+// Figma: `Module Generic Screens` (qGJjfL4O0JSjz1x4tOjJn8), frames `67:2388`
+// and `67:3593`.
+//
+// The wait screen every module shows while the server thinks. It is drawn once
+// in the generic file and reused verbatim — logo header, Core's spinner, a
+// status line, a reassurance line, the verified tag — because a user who sees a
+// different loader between two steps reads it as a different product.
+//
+// The family has no flow of its own: a loader is always ENTERED from the module
+// that is waiting and LEFT for that module's next screen, so there is nothing
+// to draw. Core Lab lists it as a library of states.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here.
+export {};

package/dist/NfcCommonIssuesScreen.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { NfcDocumentType, NfcStrings } from './NfcStrings';
+import './ScreenLayout.css';
+export interface NfcCommonIssuesScreenProps extends Omit<PrizmaListScreenProps, 'title' | 'children' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `commonIssues` slice. */
+    strings: NfcStrings;
+    /** Which purple section: `nfc.commonissues.id` (3 rows) or `.passport` (5). */
+    documentType?: NfcDocumentType;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * NFC — the "Common issues" help sheet reached from the retry screen's Help
+ * button. Purple sections `nfc.commonissues.id` (19976:109863, three rows) and
+ * `nfc.commonissues.passport` (19976:112072, five), on the List archetype
+ * (GUIDELINES.md §6-G).
+ *
+ * Like ID Capture's and Document Capture's help sheets, these sections draw no
+ * logo, so `showHeader={false}` drops the wordmark while the nav row stays
+ * reserved — the content starts where every other screen's does and the tag
+ * keeps its one fixed position (#F-34, #F-29).
+ *
+ * The rows are Core's `PrizmaList variant="icons-m"`, which IS the `List`
+ * instance the sections place: a 40px leading icon slot, a single-line label,
+ * rows stacked by the component's own rhythm. (Figma spaces its rows 16 apart
+ * and Core's icons-m gap is Spacing/12 — Core wins, a 4px family-level
+ * difference that no module re-declares.) `PrizmaCardListCommonIssues`, which
+ * two other modules use for their help sheets, is deliberately NOT used here:
+ * it is the two-line title+description row, and these rows have one line.
+ */
+export declare const NfcCommonIssuesScreen: React.ForwardRefExoticComponent<NfcCommonIssuesScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default NfcCommonIssuesScreen;

package/dist/NfcCommonIssuesScreen.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconChipNotFound, IconIdTooFar, IconPassportCover, IconPassportTooFar, IconPhoneCover, IconPhoneMoved, } from '@incodetech/prizma-core-icons';
+import { PrizmaList } from '@incodetech/prizma-core-web/list';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+/**
+ * Issue kind → canonical bank glyph. Unlike Document Capture's and
+ * Geolocation's maps (#DC-23), NOTHING here is a substitution: the bank ships
+ * this module's five glyphs by name — the NFC sweep minted `passport-cover`,
+ * `passport-too-far`, `id-too-far`, `chip-not-found`, `phone-moved` and
+ * `phone-cover` — so every row draws the icon its Figma section draws.
+ */
+const ISSUE_ICONS = {
+    passportInCover: _jsx(IconPassportCover, { size: "m" }),
+    passportTooFar: _jsx(IconPassportTooFar, { size: "m" }),
+    idTooFar: _jsx(IconIdTooFar, { size: "m" }),
+    chipOtherPage: _jsx(IconChipNotFound, { size: "m" }),
+    phoneMoved: _jsx(IconPhoneMoved, { size: "m" }),
+    phoneCover: _jsx(IconPhoneCover, { size: "m" }),
+};
+/**
+ * NFC — the "Common issues" help sheet reached from the retry screen's Help
+ * button. Purple sections `nfc.commonissues.id` (19976:109863, three rows) and
+ * `nfc.commonissues.passport` (19976:112072, five), on the List archetype
+ * (GUIDELINES.md §6-G).
+ *
+ * Like ID Capture's and Document Capture's help sheets, these sections draw no
+ * logo, so `showHeader={false}` drops the wordmark while the nav row stays
+ * reserved — the content starts where every other screen's does and the tag
+ * keeps its one fixed position (#F-34, #F-29).
+ *
+ * The rows are Core's `PrizmaList variant="icons-m"`, which IS the `List`
+ * instance the sections place: a 40px leading icon slot, a single-line label,
+ * rows stacked by the component's own rhythm. (Figma spaces its rows 16 apart
+ * and Core's icons-m gap is Spacing/12 — Core wins, a 4px family-level
+ * difference that no module re-declares.) `PrizmaCardListCommonIssues`, which
+ * two other modules use for their help sheets, is deliberately NOT used here:
+ * it is the two-line title+description row, and these rows have one line.
+ */
+export const NfcCommonIssuesScreen = forwardRef(({ strings, documentType = 'passport', screenId = `nfc-common-issues-${documentType}`, showHeader = false, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaListScreen, { ref: ref, showHeader: showHeader, title: strings.commonIssues.title, ctaLabel: strings.commonIssues.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaList, { variant: "icons-m", "aria-label": strings.commonIssues.listLabel, items: strings.commonIssues.issues[documentType].map((issue) => ({
+            variant: 'icon-m',
+            label: issue.label,
+            icon: ISSUE_ICONS[issue.kind],
+        })) }) })));
+NfcCommonIssuesScreen.displayName = 'NfcCommonIssuesScreen';
+export default NfcCommonIssuesScreen;

package/dist/NfcErrorScreen.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { NfcStrings } from './NfcStrings';
+import './ScreenLayout.css';
+/**
+ * Which error verdict. `unable` is the pre-flight refusal (the device or the
+ * document cannot do NFC at all); `general` is the read failing on a chip that
+ * should have worked.
+ */
+export type NfcErrorVariant = 'unable' | 'general';
+export interface NfcErrorScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'children' | 'ctaLabel' | 'secondaryCtaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `error` slice. */
+    strings: NfcStrings;
+    /** Which purple section to render. Default `unable`. */
+    variant?: NfcErrorVariant;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * NFC — the two error verdicts, on the Result archetype (GUIDELINES.md §6-F):
+ *
+ * - `unable` — `nfc.error.unable` (19975:107734): a WARNING mark over "We're
+ *   sorry, you're unable to continue the process" + "Only passports and phones
+ *   with NFC are allowed."
+ * - `general` — `nfc.error.generalerror` (19975:108644): a NEGATIVE mark over
+ *   "Unable to authenticate document chip", no supporting line.
+ *
+ * The two are one screen because they differ only in mark and copy; the amber
+ * vs red distinction is real and deliberate (a device that CANNOT do NFC is not
+ * a failed read), so it rides Core's own status axis rather than a colour
+ * literal.
+ *
+ * Chrome: both sections draw the verdict alone — no logo row, no tag. Both are
+ * kept, which is the standing ruling for the error family (#PI-8, restated by
+ * the owner 2026-08-19 and applied to four modules' connectivity screens), so
+ * nothing shifts between the module's states (#F-29).
+ */
+export declare const NfcErrorScreen: React.ForwardRefExoticComponent<NfcErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default NfcErrorScreen;

package/dist/NfcErrorScreen.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * NFC — the two error verdicts, on the Result archetype (GUIDELINES.md §6-F):
+ *
+ * - `unable` — `nfc.error.unable` (19975:107734): a WARNING mark over "We're
+ *   sorry, you're unable to continue the process" + "Only passports and phones
+ *   with NFC are allowed."
+ * - `general` — `nfc.error.generalerror` (19975:108644): a NEGATIVE mark over
+ *   "Unable to authenticate document chip", no supporting line.
+ *
+ * The two are one screen because they differ only in mark and copy; the amber
+ * vs red distinction is real and deliberate (a device that CANNOT do NFC is not
+ * a failed read), so it rides Core's own status axis rather than a colour
+ * literal.
+ *
+ * Chrome: both sections draw the verdict alone — no logo row, no tag. Both are
+ * kept, which is the standing ruling for the error family (#PI-8, restated by
+ * the owner 2026-08-19 and applied to four modules' connectivity screens), so
+ * nothing shifts between the module's states (#F-29).
+ */
+export const NfcErrorScreen = forwardRef(({ strings, variant = 'unable', screenId = `nfc-error-${variant}`, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, status: variant === 'unable' ? 'warning' : 'error', title: strings.error[variant].title, subtitle: variant === 'unable' ? strings.error.unable.subtitle : undefined, ctaLabel: strings.error[variant].ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+NfcErrorScreen.displayName = 'NfcErrorScreen';
+export default NfcErrorScreen;

package/dist/NfcLayout.css

@@ -0,0 +1,36 @@
+/* NFC — module-owned layer.
+ *
+ * Only ONE thing lives here, and it is presentation, not archetype spacing: the
+ * scrim + centring frame that presents Core's `PrizmaModalContent` on the
+ * `nfc.error.nfcsettings` section. No offset, size or type value in this file
+ * duplicates anything the archetypes own — every screen offset in this module
+ * comes from `ScreenLayout.css`.
+ *
+ * Why the screen owns the presentation: Core's safe presenter (`PrizmaModal`)
+ * `createPortal`s to `document.body`, which escapes the 390 × 844 screen frame
+ * and the host's `transform: scale()` (DEVIATIONS #17), and a screen is one
+ * static spec state with no open/close clock. This is the same division of
+ * labour Document Capture's bottom sheet already uses (#DC-30) — Core owns the
+ * card, the surface owns the scrim.
+ */
+
+.nfc-modal-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: var(--prizma-surface-overlay);
+}
+
+/* Centres the dialog in the frame. `PrizmaModalContent` is `width: 100%` up to
+ * its own `Modal/Size/Max-width`, so the only thing added here is the gutter
+ * Figma draws (12 each side of the 390 frame) — a Spacing token, not a literal. */
+.nfc-modal-panel {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--prizma-spacing-12);
+  box-sizing: border-box;
+}

package/dist/NfcProcessingScreen.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { NfcStrings } from './NfcStrings';
+import './ScreenLayout.css';
+export interface NfcProcessingScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `loading` slice. */
+    strings: NfcStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * NFC — "Hold on a sec.. / We're verifying your identity": the chip has been
+ * read and the data is being checked. Purple section `nfc.loading.default`
+ * (19974:82917), on the Processing archetype (GUIDELINES.md §6-C).
+ *
+ * A pure spinner + title screen with no button, which is the case §6-F reserves
+ * for C rather than the Result archetype — the same split Email Input's success
+ * screen sits on (#EI-4).
+ *
+ * Chrome: the section draws neither the logo nor the tag (its CONTENT frame
+ * holds only the `Loading spinner` instance). Both are kept, per the owner rule
+ * that non-capture screens show header AND footer and that fixed chrome never
+ * moves between states (#F-30, #F-29, and the #PI-8 restatement).
+ */
+export declare const NfcProcessingScreen: React.ForwardRefExoticComponent<NfcProcessingScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default NfcProcessingScreen;

package/dist/NfcProcessingScreen.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen, } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * NFC — "Hold on a sec.. / We're verifying your identity": the chip has been
+ * read and the data is being checked. Purple section `nfc.loading.default`
+ * (19974:82917), on the Processing archetype (GUIDELINES.md §6-C).
+ *
+ * A pure spinner + title screen with no button, which is the case §6-F reserves
+ * for C rather than the Result archetype — the same split Email Input's success
+ * screen sits on (#EI-4).
+ *
+ * Chrome: the section draws neither the logo nor the tag (its CONTENT frame
+ * holds only the `Loading spinner` instance). Both are kept, per the owner rule
+ * that non-capture screens show header AND footer and that fixed chrome never
+ * moves between states (#F-30, #F-29, and the #PI-8 restatement).
+ */
+export const NfcProcessingScreen = forwardRef(({ strings, screenId = 'nfc-loading', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, status: "loading", title: strings.loading.title, subtitle: strings.loading.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+NfcProcessingScreen.displayName = 'NfcProcessingScreen';
+export default NfcProcessingScreen;

package/dist/NfcScanningScreen.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { 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';
+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 declare const NfcScanningScreen: React.ForwardRefExoticComponent<NfcScanningScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default NfcScanningScreen;

package/dist/NfcScanningScreen.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaLoadingBar } from '@incodetech/prizma-core-web/loading-bar';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+/** State → Core `PrizmaLoadingBar` phase + the progress the section draws. */
+const BAR = {
+    scanning: { state: 'analyzing', progress: 15 },
+    done: { state: 'success', progress: 100 },
+};
+/**
+ * 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(({ strings, state = 'scanning', progress, screenId = `nfc-scanning-${state}`, overrides, onAction, ...shell }, ref) => {
+    const bar = BAR[state];
+    const slice = strings.scanning[state];
+    return (_jsx(PrizmaListScreen, { ref: ref, title: slice.title, subtitle: slice.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx("div", { className: "prizma-screen-layout__review-loading", children: _jsx(PrizmaLoadingBar, { progress: progress ?? bar.progress, state: bar.state, title: strings.scanning.progressLabel }) }) }));
+});
+NfcScanningScreen.displayName = 'NfcScanningScreen';
+export default NfcScanningScreen;

package/dist/NfcSettingsScreen.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { 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 declare const NfcSettingsScreen: React.ForwardRefExoticComponent<NfcSettingsScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default NfcSettingsScreen;

package/dist/NfcSettingsScreen.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconStatusWarning } from '@incodetech/prizma-core-icons';
+import { PrizmaModalContent } from '@incodetech/prizma-core-web/modal';
+import { PrizmaTutorialScreen } from './TutorialScreen';
+import './ScreenLayout.css';
+import './NfcLayout.css';
+/**
+ * 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(({ strings, screenId = 'nfc-settings', showHeader = false, showFooter = false, overrides, onAction, ...shell }, ref) => (_jsx(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: _jsxs(_Fragment, { children: [_jsx("div", { className: "nfc-modal-scrim", "aria-hidden": "true" }), _jsx("div", { className: "nfc-modal-panel", children: _jsx(PrizmaModalContent, { variant: "with-image", title: strings.settings.title, subtitle: strings.settings.subtitle, ariaLabel: strings.settings.dialogLabel, image: _jsx(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 }),
+                    } }) })] }), ...shell })));
+NfcSettingsScreen.displayName = 'NfcSettingsScreen';
+export default NfcSettingsScreen;