@incodetech/prizma-core-screens 0.1.0

package/src/DataSharingConsentLayout.css

@@ -0,0 +1,78 @@
+/* Data Sharing Consent — module layout additions.
+ *
+ * ONE rule, and it declares NO spacing: a text style for the legal disclosure
+ * paragraph, which Core ships no component for. The content column, the 24px
+ * gutters, the title → stack offset, the gap between the body paragraph and the
+ * consent cards, the panning stack and its Spacing/16 clearance above the CTA,
+ * the CTA column and the anchored footer are all the foundation's
+ * (`ScreenLayout.css`, `FormScreen.css`); the consent card's own padding,
+ * radius, surface and typography are Core's (`Checkbox.css`, size L).
+ *
+ * The scroll rule this file used to carry has been promoted to the archetype
+ * (`.prizma-form-screen__fields--scroll`, `scrollFields`), and the section's
+ * Spacing/24 column rhythm is SELECTED through the archetype's `fieldsOffset` /
+ * `fieldsGap` slots rather than overridden here. DEVIATIONS #DSC-1, #DSC-2.
+ */
+
+/* ── The legal disclosure paragraph ──────────────────────────────────────────
+ * `User Consent` draws ~250px of left-aligned body copy between the centered
+ * Title and the first consent card, with "Incode's Privacy Notice" as an inline
+ * link. Measured off the master frame (27151:280): 342 wide, 252 tall over 15
+ * lines = 16.8px line height at 14px — i.e. Core's `Body/M/Regular` exactly,
+ * inked `Text/Body/800 (primary)`.
+ *
+ * Core ships NO body-paragraph primitive: `PrizmaDisclaimer` is the CENTERED
+ * H4 legal row that belongs to the CTA band (its own docstring says so, and it
+ * carries Spacing/12 of band breathing room), `PrizmaTitle.subtitle` takes a
+ * plain string with no link support and follows the Title's centering, and the
+ * foundation's `__inline-prompt` recipe is a CENTERED single line. So the style
+ * is composed here from Core's OWN tokens — no palette, no size and no spacing
+ * is invented, and the block declares no margin beyond the browser reset.
+ *
+ * FOUNDATION REQUEST: promote a `__body` recipe (left-aligned Body/M/Regular
+ * with inline links) into `ScreenLayout.css`, or give Core a `PrizmaParagraph`.
+ * Every consent-bearing module still to come — eKYC disclosure, biometric
+ * consent, terms acceptance — draws this exact block (#DC-29 / #PI-10 precedent,
+ * where a cross-module recipe was placed in the foundation rather than a module).
+ */
+.data-sharing-consent__body {
+  margin: 0;
+  text-align: left;
+  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);
+}
+
+/* The inline document link inside that paragraph. `Link/Default` is the same
+ * token Core inks `.prizma-checkbox__link` with, so the Privacy Notice link in
+ * the paragraph and a link inside a consent card read as one family. Figma
+ * draws this one WITHOUT the underline Core's checkbox link carries — recorded
+ * as a deviation rather than resolved silently, since no Core component governs
+ * a standalone paragraph link. */
+.data-sharing-consent__body-link {
+  color: var(--prizma-link-default);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.data-sharing-consent__body-link:hover {
+  color: var(--prizma-link-hover);
+}
+
+/* ── The consent stack outgrows the frame — NO LONGER A MODULE RULE ──────────
+ * `29645:5306` is a 390×844 frame whose `middle content` is 584 tall for a
+ * column that has ~470: the body paragraph alone is 383 and each consent card
+ * is 74. Figma lets the column pan and clips it at y=698, then starts the CTA
+ * band there with 16px of internal padding — so the second consent card is
+ * sliced mid-sentence and followed by clear surface before "Continue".
+ *
+ * This module used to hand-roll `overflow-y: auto` here, which reproduced the
+ * slice but glued the button to the cut edge (zero gap). The behaviour AND its
+ * Spacing/16 breathing room now live in the archetype as
+ * `.prizma-form-screen__fields--scroll`, driven by `scrollFields` on
+ * `PrizmaFormScreen` — the foundation request this file used to carry, granted.
+ * DEVIATIONS #DSC-2.
+ */

package/src/DataSharingConsentStrings.ts

@@ -0,0 +1,144 @@
+// The consent screen — copy contract.
+//
+// ONE screen, TWO SDK modules. `Data Sharing Consent` and `User Consent` are
+// separate modules in the product and separate entries in the gallery, and they
+// draw the same screen — the Face Capture / Face Authentication situation
+// (`FIGMA-SOURCES.md`: "same file as Face Capture"). Their two Figma files carry
+// the same node ids to the byte — section `27151:441`, master `27151:321` — so
+// the screen, the strings and the states below are authored once and both
+// modules render them. The type names keep the `DataSharingConsent` prefix
+// because that is what shipped; renaming them would break every host import for
+// no gain.
+//
+//   · Data Sharing Consent  CO2SfrFrWis9fIUKHvLYyY  (page 16285:41282)
+//   · User Consent          Oh4GGFoTXCnMKMq3gnzINg  (page 16285:41282, "In
+//                           Production" — carries the happy-path flow frames
+//                           and the token-customization doc)
+//
+// ONE purple parent section, `User Consent` (27151:441), which draws the module
+// across three 390-wide frames plus presentation-only children:
+//   · 27151:321  the master component — ONE mandatory consent, unticked, the
+//                CTA greyed
+//   · 29645:5306 the same screen carrying EVERY consent — the stack outgrows
+//                the frame and pans under the CTA
+//   · 27198:2661 the `🔧 Behavior` frame — the consents ticked and the CTA
+//                released to brand blue
+//   · `🖤 Dark mode`, `🇪🇸 ES`, `🇵🇹 PT` and the five device sections are the
+//     same screen re-presented: dark is token-driven
+//     (`[data-prizma-theme='dark']`), the locales are this file's job, and the
+//     widths are excluded by the no-per-width-variants rule (DEVIATIONS #17).
+//
+// The module is the biometric-data disclosure the user must accept before any
+// capture runs: a legal body paragraph carrying the Privacy Notice link, then
+// one or more consent cards, then a CTA that stays inert until they are ticked.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here,
+// so the host's locale pack drives the module (the Figma file ships ES + PT
+// columns beside the EN one).
+
+import type { PrizmaConsentSegment } from '@incodetech/prizma-core-web/checkbox';
+
+/**
+ * The states the purple section draws, plus the two the Core checkbox earned in
+ * #1925. All share ONE layout — nav → Title → body paragraph → consent cards →
+ * CTA → tag — which is exactly what GUIDELINES §6-E means by "states are
+ * separate screens sharing the identical layout":
+ *
+ * - `default`          — the master frame: the mandatory consent alone,
+ *                        unticked, so the CTA is disabled (Figma greys it).
+ * - `accepted`         — the same single consent ticked; the CTA turns brand
+ *                        blue. This is the `🔧 Behavior` frame's treatment
+ *                        applied to the single-consent screen.
+ * - `multiple`         — every consent in `items` listed and unticked; the
+ *                        stack is taller than the frame, so it pans while the
+ *                        Title, the CTA and the tag hold still. CTA disabled.
+ * - `multipleAccepted` — the `🔧 Behavior` frame: every consent ticked, CTA
+ *                        released.
+ * - `rejected`         — NOT IN EITHER FIGMA FILE. The single mandatory consent
+ *                        left unticked with `errorText` showing underneath it:
+ *                        the moment a user presses Continue and is refused.
+ * - `multipleRejected` — the same refusal on the every-consent screen. Only the
+ *                        `required` cards carry the message; an optional consent
+ *                        left unticked is not an error.
+ *
+ * WHY THEY EXIST WITH NO FRAME BEHIND THEM. Core shipped the L consent
+ * container's error state on 2026-09-02 (#1925) — `error` + `errorText` render a
+ * `role="alert"` row below the card, and the card itself is deliberately
+ * unchanged. Until now no screen selected it, so the flow canvas had nothing to
+ * point at for "Continue, with nothing ticked". Owner call, 2026-09-03: add the
+ * state to the screen and wire it into the User Consent flow. If the design file
+ * later draws this moment differently, this is the state to re-read.
+ */
+export type DataSharingConsentState =
+  | 'default'
+  | 'accepted'
+  | 'rejected'
+  | 'multiple'
+  | 'multipleAccepted'
+  | 'multipleRejected';
+
+/** One consent card — a Core `PrizmaCheckbox size="L"` (the component IS the
+ *  tinted consent container Figma draws, padding, radius and all). */
+export interface DataSharingConsentItemStrings {
+  /**
+   * The card copy, as ordered segments: a plain string renders as body copy, an
+   * object renders as an inline `<a>` that opens the document WITHOUT toggling
+   * the box. This is Core's own `PrizmaConsentSegment` contract — the multi-link
+   * path on `PrizmaCheckbox` — so nothing is re-modelled here and a consent that
+   * cites two documents stays expressible (#PI-10: each link is separately
+   * actionable, never one button).
+   */
+  segments: PrizmaConsentSegment[];
+  /**
+   * Mandatory consent. The screen appends `DataSharingConsentStrings.requiredHint`
+   * (the `*` Figma draws at the end of the first card) rather than baking the
+   * marker into `segments`, so it stays localizable — the #CURP-4 precedent.
+   */
+  required?: boolean;
+  /** Accessible name for the box when the card copy is too long to serve as
+   *  one (screen readers otherwise announce the whole paragraph). */
+  ariaLabel?: string;
+}
+
+export interface DataSharingConsentStrings {
+  /** "verified by" attribution in the footer tag. */
+  verifiedLabel: string;
+  /** Accessible name for the logo nav row. */
+  navLabel?: string;
+  /** Suffix appended to a `required` consent card ("*"). Localizable. */
+  requiredHint?: string;
+
+  /** The `User Consent` section. */
+  consent: {
+    /** H2 ("User consent"). Centered, per the section. */
+    title: string;
+    /** H5 — the section draws none; kept for hosts that want one. */
+    subtitle?: string;
+    /**
+     * The legal disclosure above the cards, as ordered segments so the Privacy
+     * Notice link stays inline and translatable. Left-aligned body copy — the
+     * section left-aligns it under the centered Title.
+     */
+    body: PrizmaConsentSegment[];
+    /**
+     * Every consent the flow asks for, in the order the section lists them.
+     * `default` / `accepted` draw the FIRST entry alone (that is the master
+     * frame); `multiple` / `multipleAccepted` draw them all.
+     */
+    items: DataSharingConsentItemStrings[];
+    /** Primary CTA ("Continue"). Disabled until the consents are ticked. */
+    ctaLabel: string;
+    /**
+     * The sentence a refused Continue owes the user, shown under every
+     * `required` card in the `rejected` / `multipleRejected` states.
+     *
+     * REQUIRED BY THOSE STATES, in practice. On Core's L container the errored
+     * card is visually identical to the enabled one — no fill change, no border,
+     * the box unchanged (owner decision 2026-09-02, after three card treatments
+     * read as "selected" rather than "failed" next to an already-ticked card).
+     * This message row is the entire visible error, so omitting it leaves a
+     * sighted user with no feedback at all; `PrizmaCheckbox` dev-warns.
+     */
+    errorText?: string;
+  };
+}

package/src/DemoScreensEndScreen.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import './ScreenLayout.css';
+
+export interface DemoScreensEndScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'glyph' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Family copy — this screen reads the `end` slice. */
+  strings: DemoScreensStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Demo screens — "Verification complete!", built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Figma: `Module Generic Screens` frame `63:399`. The last thing a prospect
+ * sees in a sample flow: logo header → a centred title and supporting line →
+ * the verified tag. No CTA, because the demo has nowhere left to go.
+ *
+ * Result rather than Processing, even though the skeleton is Processing's:
+ * archetype C's status vocabulary is `loading | success | error | warning`, so
+ * a MARK-FREE centred title is not expressible there. `status="none"` is
+ * archetype F's, and with no CTA the band never renders — F degenerates to
+ * exactly C's shape and keeps the mark off.
+ *
+ * Figma draws no status mark above the title, deliberately: the demo did not
+ * verify anything, it finished. A success tick here would claim a verdict the
+ * session never reached — the copy already says the result is still under
+ * review.
+ */
+export const DemoScreensEndScreen = forwardRef<HTMLDivElement, DemoScreensEndScreenProps>(
+  ({ strings, screenId = 'demo-screens-end', overrides, onAction, ...shell }, ref) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="none"
+      title={strings.end.title}
+      subtitle={strings.end.subtitle}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+DemoScreensEndScreen.displayName = 'DemoScreensEndScreen';
+
+export default DemoScreensEndScreen;

package/src/DemoScreensStrings.ts

@@ -0,0 +1,31 @@
+// Demo screens — copy contract for the GENERIC family.
+//
+// Figma: `Module Generic Screens` (qGJjfL4O0JSjz1x4tOjJn8), frame `63:399`.
+//
+// The screens that bracket a DEMO session rather than a real one — what a
+// prospect sees at the two ends of a sample flow. They are generic by
+// definition: the demo does not belong to any module, it strings several of
+// them together.
+//
+// ONLY the end screen exists so far. The owner is supplying the start screen
+// separately (Camila 2026-09-03: "that's the end screen but we need the start
+// too, I will add it some other time"), so `start` is deliberately absent from
+// this contract rather than guessed — an invented start screen would be a
+// second source of truth for a frame that already exists in someone's file.
+//
+// The family has no flow of its own. Core Lab lists it as a library of states.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here.
+
+export interface DemoScreensStrings {
+  /** Accessible name for the logo nav region (i18n — no baked-in English). */
+  navLabel?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+
+  /** `63:399` — the demo is over and the result is with a human. */
+  end: {
+    title: string;
+    subtitle?: string;
+  };
+}

package/src/DocumentCaptureCaptureScreen.tsx

@@ -0,0 +1,135 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaIdCapture } from '@incodetech/prizma-core-web/id-capture';
+import { PrizmaCaptureManual } from '@incodetech/prizma-core-web/capture-manual';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DocumentCaptureStrings } from './DocumentCaptureStrings';
+import './ScreenLayout.css';
+import './DocumentCaptureLayout.css';
+
+export interface DocumentCaptureCaptureScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Module copy — this screen reads the `capture` slice. */
+  strings: DocumentCaptureStrings;
+  /**
+   * `empty` = `documentCapture.capture.default` (the live camera, no document
+   * detected yet) · `filled` = `documentCapture.capture.filled` (a document
+   * fills the frame). Both are `enabled`-border states of Core's stage.
+   */
+  state?: 'empty' | 'filled';
+  /** Live camera feed (<video>) or sample still (<img>). Rendered full-bleed on
+   *  the viewfinder surface behind the transparent overlay window (overlay mode
+   *  ignores PrizmaIdCapture's own `camera` slot). */
+  camera?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Document Capture — camera stage (Archetype D, GUIDELINES.md §6-D).
+ * Figma: purple sections `documentCapture.capture.default` / `.filled`.
+ *
+ * The stage is Core's `PrizmaIdCapture` with `type="poa"` — the Document
+ * Capture variant it was built for ("PoA (Document Capture flow)").
+ * Composed exactly like `IdCaptureStageScreen`: the camera feed rides full-bleed
+ * on `.prizma-viewfinder__surface`, a white viewfinder title sits above the
+ * frame, and `PrizmaIdCapture mode="overlay" scrim` cuts a transparent window
+ * through the veil. Without overlay+scrim the poa frame draws no border and the
+ * screen reads as raw camera; without the white viewfinder title the dark
+ * PrizmaTitle ink vanished on the light feed (DEVIATIONS.md #DC-36). The strip
+ * is `PrizmaCaptureManual` (shutter + help); nothing Core-owned is
+ * re-implemented.
+ *
+ * Measured off the 390 sections (CONTENT 654 tall, no nav, no tag):
+ * Title 16→75 · stage 75→538 (`Capture / ID` 430 + its own 33 encrypted row) ·
+ * Spacing/12 · manual strip 566→630 · Spacing/24 to the bottom. The stage
+ * carries its own frame↔row spacing, so the module adds only the Spacing/16
+ * title gap and the Spacing/12 strip gap — never an offset Core already has
+ * (DEVIATIONS.md #12).
+ *
+ * Always dark (§6-D). Rather than hardcode white literals the way the
+ * foundation's ViewfinderScreen does, the shell declares Core's own theme
+ * switch (`data-prizma-theme="dark"`), so the Title and every other token-bound
+ * child flips through the design system instead of around it —
+ * DEVIATIONS.md #DC-32.
+ */
+export const DocumentCaptureCaptureScreen = forwardRef<
+  HTMLDivElement,
+  DocumentCaptureCaptureScreenProps
+>(
+  (
+    {
+      strings,
+      state = 'empty',
+      camera,
+      screenId = `document-capture-capture-${state}`,
+      overrides,
+      onAction,
+      className,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaScreenShell
+      ref={ref}
+      dark
+      data-prizma-theme="dark"
+      // `document-capture-capture-screen` is what carries the status-bar
+      // reserve — this screen draws no nav, and on the viewfinder composition
+      // the nav is what would otherwise supply it (DocumentCaptureLayout.css,
+      // "THIS RESERVE WENT MISSING AND CAME BACK"). Without the hook the title
+      // renders at y+0, under the notch.
+      className={['document-capture-capture-screen', className].filter(Boolean).join(' ')}
+      {...shell}
+    >
+      {/* Full-bleed camera feed UNDER the UI; the overlay window is transparent
+          and reveals it undimmed while the scrim veils the surround — Core's
+          own recipe (IdCapture.tsx overlay mode), the same one IdCaptureStage
+          uses. In this mode the `camera` slot on PrizmaIdCapture is ignored, so
+          the feed rides on the viewfinder surface instead. */}
+      <div className="prizma-viewfinder__surface">{camera}</div>
+      <div
+        className={[
+          'prizma-viewfinder__content',
+          overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <div className="prizma-viewfinder__intro">
+          <h2 className="prizma-viewfinder__title">{strings.capture.title}</h2>
+          {strings.capture.subtitle ? (
+            <p className="prizma-viewfinder__instruction">{strings.capture.subtitle}</p>
+          ) : null}
+        </div>
+        <PrizmaIdCapture
+          type="poa"
+          state={state}
+          isVertical
+          mode="overlay"
+          scrim
+          showEncryptedLabel={Boolean(strings.encryptedLabel)}
+          encryptedLabel={strings.encryptedLabel}
+        />
+      </div>
+      <div className="prizma-screen-layout__capture-strip">
+      <PrizmaCaptureManual
+      variant="id-capture"
+      showTooltip={false}
+      ariaLabel={strings.capture.captureLabel}
+      helpLabel={strings.capture.helpLabel}
+      onCapture={() => onAction?.({ type: 'cta', screenId })}
+      onHelp={() => onAction?.({ type: 'help', screenId })}
+      />
+      </div>
+      <div className="prizma-screen-layout__footer">
+        <PrizmaTag label={strings.verifiedLabel} />
+      </div>
+    </PrizmaScreenShell>
+  ),
+);
+DocumentCaptureCaptureScreen.displayName = 'DocumentCaptureCaptureScreen';
+
+export default DocumentCaptureCaptureScreen;

package/src/DocumentCaptureCommonIssuesScreen.tsx

@@ -0,0 +1,97 @@
+import React, { forwardRef } from 'react';
+import {
+  IconCamera,
+  IconFile,
+  IconHide,
+  IconIdTooFar,
+} from '@incodetech/prizma-core-icons';
+import { PrizmaCardListCommonIssues } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DocumentCaptureStrings } from './DocumentCaptureStrings';
+import './ScreenLayout.css';
+
+/**
+ * The four `commonIssues` rows, in Figma order. Figma leads each row with an
+ * ICONLY PRO glyph (`Focus frame` · `Straighten` · `Moon` · `Camera close`);
+ * only the first has a counterpart in the Prizma bank, so the other three are
+ * the nearest canonical glyphs — GUIDELINES §10 ("icons: prizma-core-icons
+ * only") wins over the module Figma. DEVIATIONS.md #DC-23.
+ */
+const ISSUE_ICONS = [
+  <IconIdTooFar key="frame" size="m" />, // out of frame  ← Figma "Focus frame"
+  <IconFile key="folded" size="m" />, //    folded page   ← Figma "Straighten"
+  <IconHide key="shadow" size="m" />, //    shadows       ← Figma "Moon"
+  <IconCamera key="lens" size="m" />, //    dirty lens    ← Figma "Camera close"
+] as const;
+
+export interface DocumentCaptureCommonIssuesScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    'title' | 'children' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `commonIssues` slice. */
+  strings: DocumentCaptureStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Document Capture — common issues help sheet (purple section
+ * `documentCapture.commonIssues.default`), built on the `PrizmaListScreen`
+ * archetype (GUIDELINES.md §6-G).
+ *
+ * Like the module's `errors.noConnection`, this section carries no logo
+ * (DEVIATIONS.md #DC-22), so `showHeader={false}` drops the wordmark while the
+ * nav row stays reserved and the tag keeps its one fixed position.
+ *
+ * The list itself is Core's `PrizmaCardListCommonIssues`, whose Figma master IS
+ * this `list-unordered`: rows at Spacing/32, a 24px leading icon at Spacing/16,
+ * H5 title + Spacing/4 + Body/M description. Verified identical against the
+ * section's measured rows (icon 24 @ x0, text @ x40, title 19 / body @ +23,
+ * row pitch 32) — nothing re-implemented.
+ *
+ * Figma draws Spacing/32 between the Title and the list here while the three ID
+ * Capture list screens draw 24; the archetype ships ONE value, 24 (#F-31).
+ */
+export const DocumentCaptureCommonIssuesScreen = forwardRef<
+  HTMLDivElement,
+  DocumentCaptureCommonIssuesScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'document-capture-common-issues',
+      showHeader = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <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}
+    >
+      <PrizmaCardListCommonIssues
+        items={strings.commonIssues.issues.map((issue, i) => ({
+          icon: ISSUE_ICONS[i % ISSUE_ICONS.length],
+          title: issue.title,
+          subtitle: issue.description,
+        }))}
+      />
+    </PrizmaListScreen>
+  ),
+);
+DocumentCaptureCommonIssuesScreen.displayName = 'DocumentCaptureCommonIssuesScreen';
+
+export default DocumentCaptureCommonIssuesScreen;

package/src/DocumentCaptureConfirmImageScreen.tsx

@@ -0,0 +1,112 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaIdCapture } from '@incodetech/prizma-core-web/id-capture';
+import { PrizmaReviewScreen, type PrizmaReviewScreenProps } from './ReviewScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  DocumentCaptureConfirmStage,
+  DocumentCaptureStrings,
+} from './DocumentCaptureStrings';
+import './ScreenLayout.css';
+import './DocumentCaptureLayout.css';
+
+/** Stage → Core `PrizmaIdCapture` state: the review keeps the enabled frame,
+ *  analyzing runs the component's own sweep, success turns the border positive. */
+const CAPTURE_STATE = {
+  review: 'filled',
+  analyzing: 'analyzing',
+  success: 'success',
+} as const;
+
+export interface DocumentCaptureConfirmImageScreenProps
+  extends Omit<
+    PrizmaReviewScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'successTitle'
+    | 'analyzingLabel'
+    | 'analyzingState'
+    | 'primaryLabel'
+    | 'secondaryLabel'
+    | 'verifiedLabel'
+    | 'children'
+    | 'stageClassName'
+    | 'stage'
+  > {
+  /** Module copy — this screen reads the `confirmImage` slice. */
+  strings: DocumentCaptureStrings;
+  /** Which purple `documentCapture.confirmImage.*` section to render. */
+  stage?: DocumentCaptureConfirmStage;
+  /** The captured document still (an <img>). */
+  still?: ReactNode;
+  /** Loading-bar progress on `analyzing`, 0–100. Figma draws it part-filled. */
+  progress?: number;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Document Capture — captured-photo confirmation, built on the Review archetype
+ * (GUIDELINES.md §6-H, `PrizmaReviewScreen`).
+ *
+ * Figma: purple sections `documentCapture.confirmImage.reviewPhoto` /
+ * `.analyzing` / `.success` — header, stage-verdict and CTA variants of this
+ * ONE screen. The stage is the SAME `PrizmaIdCapture type="poa"` instance the
+ * camera screen uses, now holding the captured `still` — success reuses the
+ * frame geometry with the positive color, never a new layout (GUIDELINES §7),
+ * satisfied by Core's own state axis.
+ *
+ * The archetype owns every offset (no nav, header → Spacing/32 → flexing media
+ * stage → Spacing/24 → CTA row → tag; `analyzing` swaps the Title for the
+ * loading bar and drops the CTA). This file used to hand-build that skeleton in
+ * `DocumentCaptureLayout.css` (DEVIATIONS #DC-22/24, now #REV-1) — all that
+ * stays module-side is the light-surface encrypted re-tint (#DC-25).
+ */
+export const DocumentCaptureConfirmImageScreen = forwardRef<
+  HTMLDivElement,
+  DocumentCaptureConfirmImageScreenProps
+>(
+  (
+    {
+      strings,
+      stage = 'review',
+      still,
+      progress = 62,
+      screenId = `document-capture-confirm-image-${stage}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaReviewScreen
+      ref={ref}
+      stage={stage}
+      title={strings.confirmImage.title}
+      subtitle={strings.confirmImage.subtitle}
+      successTitle={strings.confirmImage.successTitle}
+      analyzingLabel={strings.confirmImage.analyzingLabel}
+      analyzingState="analyzing"
+      progress={progress}
+      stageClassName="document-capture-review-image"
+      primaryLabel={strings.confirmImage.ctaLabel}
+      secondaryLabel={strings.confirmImage.replaceLabel}
+      verifiedLabel={strings.verifiedLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaIdCapture
+        type="poa"
+        state={CAPTURE_STATE[stage]}
+        still={still}
+        showEncryptedLabel={Boolean(strings.encryptedLabel)}
+        encryptedLabel={strings.encryptedLabel}
+      />
+    </PrizmaReviewScreen>
+  ),
+);
+DocumentCaptureConfirmImageScreen.displayName = 'DocumentCaptureConfirmImageScreen';
+
+export default DocumentCaptureConfirmImageScreen;