@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/dist/ReusabilityLayout.css

@@ -0,0 +1,241 @@
+/* Reusability (Incode Bridge) — module layout additions.
+ *
+ * Three recipes, every value a Prizma token: the credential rows the selection
+ * screen lists, the bullet list inside the shared-details sheet, and the framed
+ * reader the privacy policy scrolls in. The content column, the 24px gutters,
+ * the title → list offset, the CTA band, the sheet scrim and panel and the
+ * anchored footer are all the foundation's (`ScreenLayout.css`); the sheet
+ * itself, the buttons, the title and the flag raster are Core's.
+ *
+ * WHY THE ROWS ARE COMPOSED HERE. The frame names the list "Verification
+ * options card list", but it is not Core's `Card / Verification options item`
+ * (60px card icon + title + chevron): each row is a document-type label with a
+ * status pill, the masked number behind a flag, and the date it was verified —
+ * and the last row is a single line with a pill. Core ships no card with that
+ * anatomy and no plain status pill (its `PrizmaCardTag` is the ⚡ Instant pill,
+ * with the glyph baked in). Both are built below from Core's own tokens — no
+ * palette, no radius, no spacing invented — and both are logged as component
+ * proposals (DEVIATIONS #RU-1, #RU-2). The moment Core ships them, these rules
+ * go and the screen imports the component.
+ */
+
+/* ── The credential list ─────────────────────────────────────────────────────
+ * Two bordered containers, Spacing/16 apart (`options`, 7877:68823): the
+ * reusable documents in the first, "Scan a new document" alone in the second.
+ * Rows inside a container touch, each drawing a top hairline the way Core's
+ * verification-options rows do (`Card.css`); the container clips the corners. */
+.reusability-credentials {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  width: 100%;
+}
+
+.reusability-credentials__group {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  background-color: var(--prizma-surface-neutral-0);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-medium);
+}
+
+/* The row IS the action — a real <button>, one tap advances (consent review
+ * 2026-09-16: "remove the confirm button"). Button reset, then the frame's
+ * Spacing/16 padding and Spacing/8 between its lines. */
+.reusability-credential {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--prizma-spacing-8);
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: var(--prizma-spacing-16);
+  background-color: var(--prizma-surface-neutral-0);
+  border: none;
+  border-top: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  color: var(--prizma-text-body-800-primary);
+  font-family: var(--prizma-body-family);
+  text-align: left;
+  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
+}
+
+.reusability-credentials__group > .reusability-credential:first-child {
+  border-top: none;
+}
+
+/* Keyboard focus: Core's Button ring, so a row and the links below it light
+ * up the same way. Inset, because the group clips its corners. */
+.reusability-credential:focus-visible {
+  outline: var(--prizma-button-focus-ring-width) solid var(--prizma-border-status-focus);
+  outline-offset: calc(-1 * var(--prizma-button-focus-ring-width));
+}
+
+/* Line 1: the document-type label, the pill at the far right. */
+.reusability-credential__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prizma-spacing-8);
+  width: 100%;
+}
+
+.reusability-credential__type {
+  margin: 0;
+  color: var(--prizma-text-body-800-primary);
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-body-m-regular-font-size);
+  font-weight: var(--prizma-body-m-regular-font-weight);
+  line-height: var(--prizma-body-m-regular-line-height);
+  letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+}
+
+/* Line 2: the flag and the masked number, Headline/H5. */
+.reusability-credential__number {
+  display: flex;
+  align-items: center;
+  gap: var(--prizma-spacing-4);
+  margin: 0;
+  color: var(--prizma-text-body-800-primary);
+  font-family: var(--prizma-headline-family);
+  font-size: var(--prizma-headline-h5-font-size);
+  font-weight: var(--prizma-headline-h5-font-weight);
+  line-height: var(--prizma-headline-h5-line-height);
+  letter-spacing: var(--prizma-headline-h5-letter-spacing);
+}
+
+/* Core's flag raster is 24×18; the frame draws an emoji glyph at the text
+ * size. The raster wins (owner decision 2026-07-12: flags are images, never
+ * emoji) and keeps its own geometry — DEVIATIONS #RU-3. */
+.reusability-credential__flag {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+/* Line 3: "Verified Apr 2023", Body/M in the secondary ink. */
+.reusability-credential__verified {
+  margin: 0;
+  color: var(--prizma-text-body-500-secondary);
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-body-m-regular-font-size);
+  font-weight: var(--prizma-body-m-regular-font-weight);
+  line-height: var(--prizma-body-m-regular-line-height);
+  letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+}
+
+/* ── The status pill ─────────────────────────────────────────────────────────
+ * "Recommended" on the best match, "Slowest" on the capture row. Surface/Brand/50
+ * for the first, inked with Card/Tag/Text — the mode-aware AA pair Core's own
+ * ⚡ pill uses (Brand.600 light · Focus.400 dark; owner call 2026-07-14), because
+ * the frame's Text/Accent/Brand on Brand/50 is blue on blue in dark mode;
+ * Surface/Neutral/50 with a Border/Neutral/200 hairline for the second — the
+ * frame's own fills. Radius x-small (4) and Spacing/2 × Spacing/4 padding, as
+ * drawn.
+ *
+ * TYPE: the frame sets the label in Body/S Regular (12px). Core's generated
+ * scale has no 12px text step — Body/M and Label/M are 14 — so the pill takes
+ * Label/M Regular, the smallest token the scale has. DEVIATIONS #RU-2. */
+.reusability-pill {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: var(--prizma-spacing-2) var(--prizma-spacing-4);
+  border-radius: var(--prizma-border-radius-x-small);
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  letter-spacing: var(--prizma-label-m-regular-letter-spacing);
+  white-space: nowrap;
+}
+
+.reusability-pill--recommended {
+  background-color: var(--prizma-surface-brand-50);
+  color: var(--prizma-card-tag-text);
+}
+
+.reusability-pill--neutral {
+  background-color: var(--prizma-surface-neutral-50);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-200);
+  color: var(--prizma-text-body-800-primary);
+}
+
+/* ── The shared-details list ─────────────────────────────────────────────────
+ * Inside Core's dialog sheet (`__body` slot): the recipient's data request as
+ * bullets, Headline/H5 in the primary ink, Spacing/8 apart, the browser's own
+ * disc marker on a Spacing/24 indent (`Documents list`, 7877:68985). Core's
+ * sheet supplies the Spacing/24 above it. */
+.reusability-shared-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-8);
+  margin: 0;
+  padding: 0 0 0 var(--prizma-spacing-24);
+  color: var(--prizma-text-body-800-primary);
+  font-family: var(--prizma-headline-family);
+  font-size: var(--prizma-headline-h5-font-size);
+  font-weight: var(--prizma-headline-h5-font-weight);
+  line-height: var(--prizma-headline-h5-line-height);
+  letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  text-align: left;
+}
+
+.reusability-shared-list > li {
+  margin: 0;
+  padding: 0;
+}
+
+/* ── The privacy-policy reader ───────────────────────────────────────────────
+ * The framed, scrolling document Qualified Signature's viewers draw
+ * (`.qualified-signature-document--framed`, DEVIATIONS #QS-n): a hairline
+ * frame on radius-small, Spacing/16 inside, Body/M prose with Spacing/12
+ * between paragraphs, the dateline first. The frame's `demo_5` draws the text
+ * unframed on a 32px gutter; the framed reader is what every document viewer
+ * in this package draws (owner call 2026-09-29, "take reference from other
+ * screens"), so it is followed here — DEVIATIONS #RU-7.
+ *
+ * FOUNDATION REQUEST: this is the SECOND module drawing the framed reader.
+ * Promote it to `ScreenLayout.css` as `__document` (the #DC-29 / #BC-8 idiom:
+ * the third consumer moves the recipe), and both module copies go. */
+.reusability-document {
+  flex: 1 1 auto;
+  min-height: 0;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--prizma-spacing-16);
+  margin-bottom: var(--prizma-spacing-16);
+  background-color: var(--prizma-surface-neutral-0);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-small);
+  text-align: start;
+}
+
+.reusability-document > * {
+  margin: 0;
+}
+
+.reusability-document > * + * {
+  margin-top: var(--prizma-spacing-12);
+}
+
+.reusability-document__meta,
+.reusability-document__prose {
+  color: var(--prizma-text-body-800-primary);
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-body-m-regular-font-size);
+  font-weight: var(--prizma-body-m-regular-font-weight);
+  line-height: var(--prizma-body-m-regular-line-height);
+  letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+  text-align: left;
+}
+
+.reusability-document__meta {
+  color: var(--prizma-text-body-500-secondary);
+}

package/dist/ReusabilityPrivacyPolicyScreen.d.ts

@@ -0,0 +1,55 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { ReusabilityStrings } from './ReusabilityStrings';
+import './ScreenLayout.css';
+import './ReusabilityLayout.css';
+export interface ReusabilityPrivacyPolicyScreenProps extends Omit<PrizmaListScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'children' | 'listAlign' | 'scrollList' | 'disclaimer' | 'ctaLabel' | 'secondaryCtaLabel' | 'linkLabel' | 'secondaryLinkLabel' | 'overlay' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `privacyPolicy` slice. */
+    strings: ReusabilityStrings;
+    /**
+     * The policy itself. HOST-supplied content, never module copy — the same
+     * slot contract Qualified Signature's document viewers use for the contract
+     * page (GUIDELINES §10): paragraphs in `.reusability-document__prose`, the
+     * dateline in `.reusability-document__meta`. The host supplies it in the
+     * session's language; it is legal text and is never machine translated.
+     */
+    body?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Reusability (Incode Bridge) — Incode's privacy policy, read inside the flow.
+ * Built on the List archetype (GUIDELINES.md §6-G), the way Qualified
+ * Signature's document viewers are: the `__list` middle is "content filling the
+ * space between the title block and the CTA band", which is what a document is,
+ * and the band carries one full-width button.
+ *
+ * Figma: `demo_5` (7877:68997), the frame the "Incode’s Privacy Policy" link
+ * opens — the Demo App's terms layout re-used: the Incode logo top-LEFT on a
+ * 32px gutter, "Last Modified: August 5, 2024", the policy as an unframed wall
+ * of Body/M text, and a raised white band with "Done".
+ *
+ * Three deltas from that frame, all the system's (DEVIATIONS #RU-7):
+ * 1. The nav is the archetype's — logo centred, no close — and the document
+ *    sits on the column's 24px gutter like every screen in this package
+ *    (GUIDELINES §3, §5). The frame's left logo and 32 gutter are the Demo
+ *    App's chrome, not a module's.
+ * 2. The frame draws no heading. GUIDELINES §4 gives every screen exactly one
+ *    H2 and G has no title-less path (the same delta QS's `viewdoc` records),
+ *    so the screen carries the link's own label as its title.
+ * 3. The policy scrolls inside the framed reader every document viewer here
+ *    draws (`.reusability-document`, the QS recipe), not unframed to the
+ *    frame's edge; the title, the button and the tag hold still while it pans.
+ *
+ * The policy is the host's (`body`), like QS's contract page: the SDK owns no
+ * legal text and translates none — the host supplies the document in the
+ * session's language. "Done" is the frame's primary and emits `cta`: it
+ * closes the policy and returns to the selection, where nothing has changed. On the Web SDK this
+ * link opens the policy in a NEW TAB instead (`identityReuse.opensInNewTab`);
+ * this screen is the in-flow reading the frame draws, which is what a native
+ * host presents.
+ */
+export declare const ReusabilityPrivacyPolicyScreen: React.ForwardRefExoticComponent<ReusabilityPrivacyPolicyScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default ReusabilityPrivacyPolicyScreen;

package/dist/ReusabilityPrivacyPolicyScreen.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+import './ReusabilityLayout.css';
+/**
+ * Reusability (Incode Bridge) — Incode's privacy policy, read inside the flow.
+ * Built on the List archetype (GUIDELINES.md §6-G), the way Qualified
+ * Signature's document viewers are: the `__list` middle is "content filling the
+ * space between the title block and the CTA band", which is what a document is,
+ * and the band carries one full-width button.
+ *
+ * Figma: `demo_5` (7877:68997), the frame the "Incode’s Privacy Policy" link
+ * opens — the Demo App's terms layout re-used: the Incode logo top-LEFT on a
+ * 32px gutter, "Last Modified: August 5, 2024", the policy as an unframed wall
+ * of Body/M text, and a raised white band with "Done".
+ *
+ * Three deltas from that frame, all the system's (DEVIATIONS #RU-7):
+ * 1. The nav is the archetype's — logo centred, no close — and the document
+ *    sits on the column's 24px gutter like every screen in this package
+ *    (GUIDELINES §3, §5). The frame's left logo and 32 gutter are the Demo
+ *    App's chrome, not a module's.
+ * 2. The frame draws no heading. GUIDELINES §4 gives every screen exactly one
+ *    H2 and G has no title-less path (the same delta QS's `viewdoc` records),
+ *    so the screen carries the link's own label as its title.
+ * 3. The policy scrolls inside the framed reader every document viewer here
+ *    draws (`.reusability-document`, the QS recipe), not unframed to the
+ *    frame's edge; the title, the button and the tag hold still while it pans.
+ *
+ * The policy is the host's (`body`), like QS's contract page: the SDK owns no
+ * legal text and translates none — the host supplies the document in the
+ * session's language. "Done" is the frame's primary and emits `cta`: it
+ * closes the policy and returns to the selection, where nothing has changed. On the Web SDK this
+ * link opens the policy in a NEW TAB instead (`identityReuse.opensInNewTab`);
+ * this screen is the in-flow reading the frame draws, which is what a native
+ * host presents.
+ */
+export const ReusabilityPrivacyPolicyScreen = forwardRef(({ strings, body, screenId = 'reusability-privacy-policy', overrides, onAction, ...shell }, ref) => {
+    const { privacyPolicy } = strings;
+    return (_jsx(PrizmaListScreen, { ref: ref, title: privacyPolicy.title, ctaLabel: privacyPolicy.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx("div", { className: "reusability-document", role: "region", "aria-label": privacyPolicy.title, tabIndex: 0, children: body }) }));
+});
+ReusabilityPrivacyPolicyScreen.displayName = 'ReusabilityPrivacyPolicyScreen';
+export default ReusabilityPrivacyPolicyScreen;

package/dist/ReusabilityStrings.d.ts

@@ -0,0 +1,85 @@
+/** The document types the identity-reuse backend returns. The SDK's own
+ *  vocabulary (`identityReuse.documentType.*`). */
+export type ReusabilityDocumentType = 'passport' | 'idCard' | 'driversLicense';
+/**
+ * One reusable credential, as the backend describes it — DATA, not copy. The
+ * host formats the date (the SDK composes "Verified" + an `Intl` short date
+ * client-side, `identity-reuse.tsx` `formatVerifiedAt`) and masks the number.
+ */
+export interface ReusableCredential {
+    /** Stable id the host submits back on selection. */
+    id: string;
+    documentType: ReusabilityDocumentType;
+    /** ISO 3166-1 alpha-2. Resolves to Core's flag raster bank
+     *  (`PrizmaCountryFlag`, 24×18); a country outside the bundled bank falls back
+     *  to `countryFlag`. */
+    countryCode: string;
+    /** Emoji fallback for a country the raster bank does not carry — Core's own
+     *  fallback rule for the Combined input and the Document List card. */
+    countryFlag?: string;
+    /** Already masked by the backend ("MP1******3815"). */
+    maskedNumber: string;
+    /** Already formatted by the host ("Apr 2023"). Rendered after
+     *  `selection.verifiedPrefix`. */
+    verifiedOn: string;
+}
+export interface ReusabilityStrings {
+    /** "verified by" attribution in the footer tag. */
+    verifiedLabel: string;
+    /** Accessible name for the logo nav row. */
+    navLabel?: string;
+    /** The `doc selection` frames — the one screen of the module. */
+    selection: {
+        /** H2 ("Share your details for a faster verification"). */
+        title: string;
+        /** H5 under the title. The frame's recipient placeholder is `{Company B}`;
+         *  the SDK interpolates `{{companyName}}` (`identityReuse.subtitleWithCompany`). */
+        subtitle: string;
+        /** Accessible name of the option list. */
+        listLabel: string;
+        /** The document-type label on each credential row ("Passport"). */
+        documentType: Record<ReusabilityDocumentType, string>;
+        /** The pill on the first row — the backend orders the list best match
+         *  first, and the first is tagged ("Recommended"). */
+        recommendedTag: string;
+        /** The word before the formatted date on each row ("Verified"). The SDK
+         *  translates only this word and appends the date locally. */
+        verifiedPrefix: string;
+        /** The last row — capture a document instead of reusing one. */
+        scanNewLabel: string;
+        /** The pill on that row ("Slowest"). */
+        slowestTag: string;
+        /** First tertiary link under the list ("What data will be shared?"):
+         *  opens the shared-details sheet. */
+        sharedDataLink: string;
+        /** Second tertiary link ("Incode’s Privacy Policy"): opens the policy. */
+        privacyPolicyLink: string;
+    };
+    /** The `shared info` frame — Core's bottom sheet over the selection. */
+    sharedDetails: {
+        /** Sheet heading, Core's H1 ("Shared details"). */
+        title: string;
+        /** Under the heading ("Only the following information will be shared with
+         *  {Company B}."). */
+        subtitle: string;
+        /** The bullet list — what the recipient asked for. In production these
+         *  come from the recipient's data-sharing request (ENG-57939 acceptance
+         *  criteria), so the list is host data rendered through this slot. */
+        items: string[];
+        /** The sheet's one button ("Understood"). */
+        ctaLabel: string;
+    };
+    /**
+     * The `demo_5` frame — Incode's privacy policy, read inside the flow. The
+     * document ITSELF is not here: it is host content (the policy at
+     * incode.com/privacy, in the host's language), supplied through the screen's
+     * `body` slot the way Qualified Signature's viewers take their contract.
+     */
+    privacyPolicy: {
+        /** H2 the archetype requires; the frame draws none (DEVIATIONS #RU-7).
+         *  The link's own label ("Incode’s Privacy Policy") is the natural title. */
+        title: string;
+        /** Primary under the document ("Done"): back to the selection. */
+        ctaLabel: string;
+    };
+}

package/dist/ReusabilityStrings.js

@@ -0,0 +1,37 @@
+// Reusability (Incode Bridge) — copy contract.
+//
+// The credential-reuse step of an Incode Bridge session: a returning person
+// who already verified with another member of the network is offered the
+// document they verified there, so they can skip ID capture at the company
+// they are onboarding with now. The SDK module is `identity-reuse`
+// (`incode-identity-reuse`, i18n namespace `identityReuse`); the product name
+// is Incode Bridge; the design file calls it Reusability. Bridge is NOT Trust
+// Graph: it moves the person's own credential, with their consent, to remove
+// friction — it makes no fraud claim (MVP spec, Notion, 2026-08-17).
+//
+// Figma: `Reusability - In Experimentation` (f4AsCbOBP29IbTQLxBNgNG), section
+// `Reusability Iterations` (7877:68814) — the iteration Camila shared with the
+// Identity team on 2026-09-19 and that the Web SDK built as ENG-57939 (Dusan,
+// PR #1021, "one-click credential selection with shared-data sheet"). Four
+// frames:
+//   · 7877:68816 `doc selection`  Multiple documents — two reusable passports
+//                                 and the "Scan a new document" row
+//   · 7877:68875 `doc selection`  Single document — one passport and the row
+//   · 7877:68927 `shared info`    Shared data — Core's bottom sheet over the
+//                                 selection listing what will be shared
+//   · 7877:68997 `demo_5`         Privacy Policy — Incode's policy, read in
+//                                 the flow, Done at the bottom
+//
+// Two product decisions shape the copy (consent review with legal, Granola
+// 2026-09-16; Vlado, #reusability 2026-09-15):
+//   1. The subtitle says WHO holds the data and that Incode only passes it:
+//      "A company you previously verified with holds a document you can reuse.
+//      Incode only passes it to {Company B}." The donor is never named (it may
+//      be a regulated entity); the recipient is.
+//   2. Selecting a document ADVANCES — no confirm button. A mis-tap is
+//      recovered with the nav's way back, not with a second step.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives
+// here, so the host's locale pack drives the module. The SDK's `identityReuse`
+// namespace already carries ES and PT for almost every sentence below.
+export {};

package/dist/ReviewScreen.d.ts

@@ -3,18 +3,24 @@ import { type PrizmaScreenShellProps } from './ScreenShell';
 import type { PrizmaScreenActionHandler, PrizmaScreenChromeProps, PrizmaScreenOverrides } from './types';
 import './ScreenLayout.css';
 /**
- * The three stages every captured-media review section shares. Identical
- * skeleton — only the header block (Title vs loading bar), the media's own
- * state and the presence of the CTA row change. Named to match the modules'
- * own stage axis (`DocumentCaptureConfirmStage`, Video Selfie's review step).
+ * The stages a captured-media review section shares. Identical skeleton —
+ * only the header block (Title vs loading bar), the media's own state and
+ * the presence of the CTA row change. `review`/`analyzing`/`success` name the
+ * modules' own confirm-flow axis (`DocumentCaptureConfirmStage`, Video
+ * Selfie's review step); `error` is Digital ID Upload-only so far — its
+ * verdict screen shows the SAME rejected-file media the confirm flow does
+ * (`PrizmaCaptureDigitalId state="error"`), drawn with the identical
+ * header/media/CTA skeleton as `analyzing`/`success` (`Upload Digital ID`
+ * file wxFsHRvllern4VnjRqM4JO, node 25874:11957) — not archetype F, whose
+ * verdict screens carry no media stage of their own.
  */
-export type PrizmaReviewStage = 'review' | 'analyzing' | 'success';
+export type PrizmaReviewStage = 'review' | 'analyzing' | 'success' | 'error';
 export interface PrizmaReviewScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'>, Pick<PrizmaScreenChromeProps, 'showHeader' | 'showFooter'> {
     /** Which review stage to render. Default `review`. */
     stage?: PrizmaReviewStage;
     /** H2 review/base title ("Review your document"). */
     title: string;
-    /** Supporting copy under the title — drawn on `review` only (Figma). */
+    /** Supporting copy under the title — drawn on `review`/`error` (Figma). */
     subtitle?: string;
     /** Title shown on `success`; falls back to `title` when omitted. */
     successTitle?: string;
@@ -28,6 +34,25 @@ export interface PrizmaReviewScreenProps extends Omit<PrizmaScreenShellProps, 'd
     analyzingState?: 'analyzing' | 'uploading';
     /** Loading-bar progress on `analyzing`, 0–100. */
     progress?: number;
+    /**
+     * Only takes effect while the nav is hidden (`showHeader=false` — every
+     * current no-nav stage is `analyzing`/`success`). Default `false` —
+     * Document Capture's verified layout (DEVIATIONS #DC-22/24): the header
+     * sits where a title normally would, Spacing/32 above the stage, and
+     * whatever follows (the stage, then an optional band) centres or flows
+     * independently.
+     *
+     * `true`: the header and the media centre as ONE group — leftover space
+     * splits evenly above the header and below the trailing content (the CTA
+     * band, or nothing) — because with no nav the header has nothing to anchor
+     * to. Digital ID Upload's Figma draws BOTH its no-nav stages this way: a
+     * top flex-1 region bottom-anchoring the header, the fixed media, then a
+     * bottom flex-1 region (empty on `analyzing`, bottom-anchoring the CTA on
+     * `success`) — `Upload Digital ID` file wxFsHRvllern4VnjRqM4JO, nodes
+     * 25351:14726 (analyzing) / 25351:14727 (success). `review` always shows
+     * its own nav, so this is a no-op there regardless of the value passed.
+     */
+    centeredWhenNoNav?: boolean;
     /**
      * The flexing captured-media slot: a `PrizmaIdCapture` still, an uploaded-file
      * preview card, a portrait review. Kept a slot so one template serves every
@@ -42,7 +67,7 @@ export interface PrizmaReviewScreenProps extends Omit<PrizmaScreenShellProps, 'd
      * offset and footer all come from ScreenLayout.css regardless.
      */
     stageClassName?: string;
-    /** Primary CTA — the forward action. Drawn on `review` and `success`. */
+    /** Primary CTA — the forward action. Drawn on `review`, `success`, `error`. */
     primaryLabel: string;
     /** Secondary CTA ("Replace" / "Retake") — drawn on `review` only. */
     secondaryLabel?: string;
@@ -57,11 +82,12 @@ export interface PrizmaReviewScreenProps extends Omit<PrizmaScreenShellProps, 'd
  * Archetype H — Review (captured-media confirmation).
  *
  * The "header → flexing captured-media stage → CTA band → tag" recipe, with a
- * `review → analyzing → success` stage axis. It exists because two Document
- * Capture screens hand-built it independently (`DocumentCaptureConfirmImage`,
- * `DocumentCaptureConfirmUpload`) with their own three-band arithmetic in
- * `DocumentCaptureLayout.css`, and Video Selfie's review step needs the same
- * skeleton — a captured still under a title, confirmed or replaced.
+ * `review → analyzing → success` stage axis (+ `error`, see `PrizmaReviewStage`).
+ * It exists because two Document Capture screens hand-built it independently
+ * (`DocumentCaptureConfirmImage`, `DocumentCaptureConfirmUpload`) with their
+ * own three-band arithmetic in `DocumentCaptureLayout.css`, and Video Selfie's
+ * review step needs the same skeleton — a captured still under a title,
+ * confirmed or replaced.
  *
  * It is NOT archetype F (Result): F centres a small status + CTA block, while a
  * review TOP-aligns the header over a large media stage that flexes to fill the

package/dist/ReviewScreen.js

@@ -12,11 +12,12 @@ import './ScreenLayout.css';
  * Archetype H — Review (captured-media confirmation).
  *
  * The "header → flexing captured-media stage → CTA band → tag" recipe, with a
- * `review → analyzing → success` stage axis. It exists because two Document
- * Capture screens hand-built it independently (`DocumentCaptureConfirmImage`,
- * `DocumentCaptureConfirmUpload`) with their own three-band arithmetic in
- * `DocumentCaptureLayout.css`, and Video Selfie's review step needs the same
- * skeleton — a captured still under a title, confirmed or replaced.
+ * `review → analyzing → success` stage axis (+ `error`, see `PrizmaReviewStage`).
+ * It exists because two Document Capture screens hand-built it independently
+ * (`DocumentCaptureConfirmImage`, `DocumentCaptureConfirmUpload`) with their
+ * own three-band arithmetic in `DocumentCaptureLayout.css`, and Video Selfie's
+ * review step needs the same skeleton — a captured still under a title,
+ * confirmed or replaced.
  *
  * It is NOT archetype F (Result): F centres a small status + CTA block, while a
  * review TOP-aligns the header over a large media stage that flexes to fill the
@@ -32,25 +33,57 @@ import './ScreenLayout.css';
  * to the bottom itself. Every offset lives in ScreenLayout.css; this file
  * declares none of its own.
  */
-export const PrizmaReviewScreen = forwardRef(({ stage = 'review', title, subtitle, successTitle, analyzingLabel, analyzingState = 'analyzing', progress = 0, children, stageClassName, primaryLabel, secondaryLabel, verifiedLabel, navLabel, showHeader, showFooter = true, screenId, overrides, onAction, ...shell }, ref) => {
+export const PrizmaReviewScreen = forwardRef(({ stage = 'review', title, subtitle, successTitle, analyzingLabel, analyzingState = 'analyzing', progress = 0, centeredWhenNoNav = false, children, stageClassName, primaryLabel, secondaryLabel, verifiedLabel, navLabel, showHeader, showFooter = true, screenId, overrides, onAction, ...shell }, ref) => {
     // Review screens are the capture family: no logo unless the client opts in
     // by supplying one (types.ts chrome contract). `showHeader` still wins when
     // set explicitly.
     const withNav = showHeader ?? Boolean(overrides?.logo);
     const showSecondary = stage === 'review' && Boolean(secondaryLabel);
     const showBand = stage !== 'analyzing' && Boolean(primaryLabel || secondaryLabel);
+    const centeredGroup = !withNav && centeredWhenNoNav;
     return (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [withNav ? (_jsx(PrizmaScreenNav, { logo: overrides?.logo, navLabel: navLabel })) : null, _jsxs("div", { className: [
                     'prizma-screen-layout__content',
                     withNav ? '' : 'prizma-screen-layout__content--no-nav',
                 ]
                     .filter(Boolean)
-                    .join(' '), children: [_jsx("div", { className: "prizma-screen-layout__review-header", children: stage === 'analyzing' ? (_jsx("div", { className: "prizma-screen-layout__review-loading", children: _jsx(PrizmaLoadingBar, { state: analyzingState, progress: progress, title: analyzingLabel }) })) : (_jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: stage === 'success' ? successTitle ?? title : title, showSubtitle: stage === 'review' && Boolean(subtitle), subtitle: subtitle, icon: stage === 'success' ? { type: 'status', status: 'success' } : undefined })) }), _jsx("div", { className: [
+                    .join(' '), children: [_jsx("div", { className: [
+                            'prizma-screen-layout__review-header',
+                            centeredGroup ? 'prizma-screen-layout__review-header--centered' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), children: stage === 'analyzing' ? (_jsx("div", { className: "prizma-screen-layout__review-loading", children: _jsx(PrizmaLoadingBar, { state: analyzingState, progress: progress, title: analyzingLabel }) })) : (_jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: stage === 'success' ? successTitle ?? title : title, showSubtitle: (stage === 'review' || stage === 'error') && Boolean(subtitle), subtitle: subtitle, icon: stage === 'success'
+                                ? { type: 'status', status: 'success' }
+                                : stage === 'error'
+                                    ? { type: 'status', status: 'error' }
+                                    : undefined })) }), _jsx("div", { className: [
                             'prizma-screen-layout__review-stage',
                             stage === 'analyzing' ? 'prizma-screen-layout__review-stage--flush' : '',
+                            centeredGroup ? 'prizma-screen-layout__review-stage--centered-group' : '',
                             stageClassName ?? '',
                         ]
                             .filter(Boolean)
-                            .join(' '), children: children }), showBand ? (_jsx("div", { className: "prizma-screen-layout__band prizma-screen-layout__band--review", children: _jsx(PrizmaButtonGroup, { orientation: "horizontal-v1", showSecondary: showSecondary, primaryLabel: primaryLabel, onPrimaryClick: () => onAction?.({ type: 'cta', screenId }), secondaryLabel: secondaryLabel, onSecondaryClick: () => onAction?.({ type: 'secondary', screenId }) }) })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] }));
+                            .join(' '), children: children }), (() => {
+                        const band = showBand ? (_jsx("div", { className: [
+                                'prizma-screen-layout__band',
+                                'prizma-screen-layout__band--review',
+                                // No footer tag to reserve the bottom space (§6, owner rule
+                                // 2026-08-18: header/footer are independently controlled) —
+                                // fall back to the band's own Spacing/24, same as any other
+                                // screen that "genuinely carries no tag" (ScreenLayout.css).
+                                // Otherwise the CTA sits flush against the shell edge.
+                                !showFooter ? 'prizma-screen-layout__band--bare' : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' '), children: _jsx(PrizmaButtonGroup, { orientation: "horizontal-v1", showSecondary: showSecondary, primaryLabel: primaryLabel, onPrimaryClick: () => onAction?.({ type: 'cta', screenId }), secondaryLabel: secondaryLabel, onSecondaryClick: () => onAction?.({ type: 'secondary', screenId }) }) })) : null;
+                        // Balances the header's own flex-1 (`--centered`) so the header +
+                        // media sit as one group centred between equal top/bottom space,
+                        // instead of the media alone centring below a pinned header. The
+                        // band (if any — `success`) bottom-anchors inside this same
+                        // trailing region instead of just following the stage, matching
+                        // Figma's own bottom flex-1 container; `analyzing` carries no
+                        // band, so the region is just an empty spacer.
+                        return centeredGroup ? (_jsx("div", { className: "prizma-screen-layout__review-trailing", children: band })) : (band);
+                    })(), showFooter ? (_jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] }));
 });
 PrizmaReviewScreen.displayName = 'PrizmaReviewScreen';
 export default PrizmaReviewScreen;