@incodetech/prizma-core-screens 0.1.0

package/dist/QualifiedSignatureStrings.d.ts

@@ -0,0 +1,222 @@
+import type { PrizmaConsentSegment } from '@incodetech/prizma-core-web/checkbox';
+/**
+ * The two readings of the accept-and-sign screen. They are the same skeleton —
+ * title block → document row → consent stack → CTA — with a different clause
+ * set, a different CTA verb and, on `certificate`, a link to the application
+ * form:
+ * - `accept`      — `QSign.AcceptSign.*` in the generic parent: "Accept and
+ *   sign", five QTSP/eIDAS clauses, "Finish signing", no link.
+ * - `certificate` — the same sections in the `x Namirial` parent: "Review and
+ *   sign", two clauses, "Sign", plus the "Certificate application form" link
+ *   that opens the `terms` document screen.
+ */
+export type QualifiedSignatureAcceptVariant = 'accept' | 'certificate';
+/**
+ * The three purple states each accept section is drawn in:
+ * - `default`  — every box unticked, the CTA in Core's disabled surface
+ *   (`QSign.AcceptSign.default`)
+ * - `selected` — every box ticked, the CTA live (`…selectedCheckox`)
+ * - `loading`  — the clauses and the document action greyed while the signature
+ *   is created, spinner in the CTA (`…loadingsign`). The spinner rides the
+ *   BUTTON, never a field — the standing module rule (DEVIATIONS #PI-5).
+ */
+export type QualifiedSignatureAcceptState = 'default' | 'selected' | 'loading';
+/**
+ * The two full-surface document screens:
+ * - `document` — `QSign.AcceptSign.viewdoc`, the contract itself behind the
+ *   document row's "View" action
+ * - `terms`    — `QSign.T&C`, the certificate application form behind the
+ *   partner variant's link
+ */
+export type QualifiedSignatureDocumentVariant = 'document' | 'terms';
+/**
+ * The FIVE verdict frames. Both purple parents draw success twice and error
+ * twice, and each pair differs in what the signer can do next:
+ * - `signed`        — `QSign.success` (10196:67485): the positive mark with
+ *   "Continue" and a "Download PDF" underlined link
+ * - `signedPlain`   — `QSign.success` (10196:67494): the same mark and line
+ *   with NO actions at all
+ * - `signedPartner` — the `x Namirial` parent's own success frame (6086:40135),
+ *   a THIRD reading rather than a copy of either: the mark and line, a signer
+ *   attribution row, then a STACKED pair — "Done" primary above a "Download
+ *   document" OUTLINED secondary. The outlined button is a different control
+ *   from `signed`'s underlined link, so it gets its own slice
+ * - `error`         — `QSign.AcceptSign.error` (10196:67436): the warning mark
+ *   over "Something went wrong", no actions
+ * - `errorRetry`    — the SECOND error frame both parents draw (10196:67445 /
+ *   the partner's 8363:21429): the same warning mark over "Signature failed"
+ *   plus a full-width "Try again" primary. This is the only recovery
+ *   affordance anywhere in the signing flow
+ */
+export type QualifiedSignatureResultVariant = 'signed' | 'signedPlain' | 'signedPartner' | 'error' | 'errorRetry';
+/**
+ * The two readings of the in-flight screen:
+ * - `processing` — `QSign.AcceptSign.processing` (10196:67395): spinner + H2,
+ *   nothing else on the frame
+ * - `signing`    — the partner's own 6086:39544: "Creating your signature…"
+ *   under the spinner PLUS a bottom-anchored attribution row ("Signing as …")
+ *   sitting immediately above the verified tag, not under the title
+ */
+export type QualifiedSignatureProcessingVariant = 'processing' | 'signing';
+/**
+ * One consent clause of the accept screen. Runtime DATA, not module copy — the
+ * clause set is written by the Qualified Trust Service Provider and changes with
+ * it (five Incode-QTSP clauses in one purple parent, two Namirial clauses in the
+ * other), exactly as Phone Input takes its dial codes and CURP its state
+ * catalogue as data rather than strings.
+ *
+ * `segments` is Core's OWN `PrizmaConsentSegment[]`: plain strings render as
+ * copy, objects render as inline links inside the clause — which is how the
+ * fourth Incode clause carries both "Terms of Use" and "Privacy Policy" without
+ * either being hand-rolled.
+ */
+export interface QualifiedSignatureTerm {
+    /** Stable key for the row (also the value reported back by a host). */
+    id: string;
+    /** The clause body, as Core's consent segments. */
+    segments: PrizmaConsentSegment[];
+}
+/** Copy for one reading of the accept-and-sign screen. */
+export interface QualifiedSignatureAcceptCopy {
+    /** H2 ("Accept and sign" / "Review and sign"). */
+    title: string;
+    /** H5 below the title. */
+    subtitle?: string;
+    /** Primary CTA ("Finish signing" / "Sign"). */
+    ctaLabel: string;
+    /** Accessible busy label while the signature is created (`loading`). */
+    ctaLoadingLabel?: string;
+    /**
+     * Underlined tertiary link below the primary — the partner variant's
+     * "Certificate application form", which opens the `terms` document screen.
+     * Emits `secondary` so a host can tell it from the primary (DEVIATIONS #PI-10).
+     */
+    linkLabel?: string;
+}
+export interface QualifiedSignatureStrings {
+    /** "verified by" attribution in the footer tag. */
+    verifiedLabel: string;
+    /** Accessible name for the logo nav row. */
+    navLabel?: string;
+    /** QSign.upload.default — the intro that asks for the file. */
+    upload: {
+        /** H2 ("Upload a document to sign"). */
+        title: string;
+        /** H5 ("Supports PDF files"). */
+        subtitle?: string;
+        /** Hint above the CTA. The purple section draws none. */
+        disclaimer?: string;
+        /** Primary CTA ("Upload document"). */
+        ctaLabel: string;
+    };
+    /** QSign.reviewDoc.default — the uploaded file confirmed before signing. */
+    review: {
+        /** H2 ("Review your document"). */
+        title: string;
+        /** H5 ("Make sure you've selected the correct file…"). */
+        subtitle?: string;
+        /** Primary CTA ("Continue"). */
+        ctaLabel: string;
+        /** Secondary CTA ("Replace"). */
+        replaceLabel: string;
+        /** The reassurance row under the card ("All data is encrypted"). */
+        encryptedLabel?: string;
+    };
+    /** QSign.AcceptSign.{default,selectedCheckox,loadingsign} — both readings. */
+    accept: {
+        /** Action on the document row — Core's tertiary link ("View"). */
+        viewLabel: string;
+        /** Accessible name for the consent stack. */
+        termsLabel?: string;
+        /** The generic five-clause reading. */
+        accept: QualifiedSignatureAcceptCopy;
+        /** The partner two-clause reading. */
+        certificate: QualifiedSignatureAcceptCopy;
+    };
+    /** The two full-surface document screens. */
+    document: {
+        /**
+         * QSign.AcceptSign.viewdoc. **The purple section draws no heading at all**
+         * — GUIDELINES §4 ("every screen has exactly one H2") is the side that wins,
+         * so the screen carries one and the Figma frame is the side to change
+         * (module deviation row). Keep it short: it sits above the page.
+         */
+        document: {
+            title: string;
+        };
+        /** QSign.T&C ("Certificate Application Form"), left-aligned in Figma. */
+        terms: {
+            title: string;
+        };
+    };
+    /** The two in-flight screens. */
+    processing: {
+        /** QSign.AcceptSign.processing — the pure spinner screen. */
+        processing: {
+            /** H2 ("Processing…"). */
+            title: string;
+            subtitle?: string;
+        };
+        /** The partner's own in-flight frame. */
+        signing: {
+            /** H2 under the spinner ("Creating your signature…"). */
+            title: string;
+            subtitle?: string;
+            /**
+             * The attribution row anchored at the BOTTOM of the frame, immediately
+             * above the verified tag ("Signing as Maria Andersson").
+             *
+             * ONE composed line, not a prefix the screen concatenates a name onto:
+             * the host's locale pack interpolates the signer, exactly as Phone
+             * Input's OTP subtitle carries the masked destination number.
+             */
+            signingAsLabel: string;
+        };
+    };
+    /** The five verdict screens. */
+    result: {
+        /** QSign.success with actions ("Signed successfully!" + "Download PDF"). */
+        signed: {
+            title: string;
+            subtitle?: string;
+            /** Primary CTA ("Continue"). */
+            ctaLabel: string;
+            /** Underlined tertiary link ("Download PDF"). Emits `secondary`. */
+            downloadLabel?: string;
+        };
+        /** QSign.success drawn with no actions. */
+        signedPlain: {
+            title: string;
+            subtitle?: string;
+        };
+        /** The partner's success frame — attribution row over a STACKED pair. */
+        signedPartner: {
+            title: string;
+            subtitle?: string;
+            /**
+             * The attribution row above the buttons ("Signed by Maria Andersson ·
+             * 17 Jun 2026"). ONE composed line for the same reason as
+             * `processing.signing.signingAsLabel` — the locale pack owns the order of
+             * signer and date.
+             */
+            signedByLabel: string;
+            /** Primary CTA ("Done"). Emits `cta`. */
+            ctaLabel: string;
+            /** OUTLINED secondary below the primary ("Download document"). Emits
+             *  `secondary`. A real Button, not `signed`'s underlined link. */
+            secondaryCtaLabel: string;
+        };
+        /** QSign.AcceptSign.error ("Something went wrong"). Figma draws no button. */
+        error: {
+            title: string;
+            subtitle?: string;
+        };
+        /** The retry frame ("Signature failed" + "Try again"). */
+        errorRetry: {
+            title: string;
+            subtitle?: string;
+            /** Full-width primary CTA ("Try again"). Emits `cta`. */
+            ctaLabel: string;
+        };
+    };
+}

package/dist/QualifiedSignatureStrings.js

@@ -0,0 +1,25 @@
+// Qualified Signature — copy contract.
+//
+// Figma: `✍️ Signature (Qualified)` (XO9YGKlEsGUyag8CGbSUsi, canvas 6086:28669).
+// TWO purple parent sections, which are the SAME flow drawn twice:
+//
+//   `✍️ Signature (Qualified) - Screens specs + Localization` (10196:67086)
+//       1.QSign.uploadDocument → QSign.upload.default · QSign.reviewDoc.default
+//                                (+ QSign.upload.select — the iOS Files app)
+//       QSign.AcceptSign       → default · selectedCheckox · loadingsign ·
+//                                processing · viewdoc
+//       Qsign.error            → QSign.AcceptSign.error
+//       Qsign.success          → QSign.success ×2 (with and without actions)
+//
+//   `✍️ Signature (Qualified) x Namirial …` (6074:64811) — the partner reading of
+//       the SAME AcceptSign / error / success frames, plus `QSign.T&C`, the
+//       certificate-application text the partner variant links to.
+//
+// This is the regulated sibling of Electronic Signature: the extra steps are the
+// eIDAS/QTSP consent clauses the signer must tick before a Qualified Electronic
+// Signature can be created, and the certificate-application form behind them.
+//
+// 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).
+export {};

package/dist/QualifiedSignatureUploadScreen.d.ts

@@ -0,0 +1,42 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaTutorialScreenProps } from './TutorialScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { QualifiedSignatureStrings } from './QualifiedSignatureStrings';
+import './ScreenLayout.css';
+export interface QualifiedSignatureUploadScreenProps extends Omit<PrizmaTutorialScreenProps, 'title' | 'subtitle' | 'disclaimer' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `upload` slice. */
+    strings: QualifiedSignatureStrings;
+    /** Replace the document illustration (a host may ship its own artwork). */
+    illustration?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Qualified Signature — the intro that asks for the file, built on the Tutorial
+ * archetype (GUIDELINES.md §6-A, `PrizmaTutorialScreen`).
+ *
+ * Figma: purple section `QSign.upload.default` (10196:67095). Measured off the
+ * 390 frame (CONTENT 654, `top container` 342×127): nav 8→52 · Title 68→127
+ * (nav + Spacing/24) · `illustration container` flexes · `Call to Actions`
+ * 536→638 = the primary + the Tag. Exactly the archetype's own rhythm, so this
+ * file declares no layout.
+ *
+ * The illustration is `DocumentCaptureIllustration` — NOT a fourth inline copy
+ * of the same artwork. The Figma `Illustrations` frame here is 310.47 × 325 and
+ * Document Capture's is 342 × 358: the SAME ratio to five decimals (0.90775),
+ * with the same three layers (halo ellipse `bg` · `documents` page · the
+ * `frame-border` outline), i.e. one asset drawn at two scales. Core still ships
+ * no document illustration, so the standing request stands — DEVIATIONS #DC-21
+ * asked to promote it to `PrizmaIllustrationDocument`; a second module now
+ * depends on a Document-Capture-named export, which is the strongest argument
+ * yet for the promotion.
+ *
+ * `QSign.upload.select` (10196:67173), the section between this screen and the
+ * review, is the **iOS Files app** — OS chrome, not a Prizma surface. Not built,
+ * for the reason DEVIATIONS #DC-20 settled: a screen composed only of Core
+ * components cannot render OS chrome, and faking it would ship a fake system UI.
+ * A host that needs the picker calls the platform API.
+ */
+export declare const QualifiedSignatureUploadScreen: React.ForwardRefExoticComponent<QualifiedSignatureUploadScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default QualifiedSignatureUploadScreen;

package/dist/QualifiedSignatureUploadScreen.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaTutorialScreen } from './TutorialScreen';
+import { DocumentCaptureIllustration } from './DocumentCaptureIllustration';
+import './ScreenLayout.css';
+/**
+ * Qualified Signature — the intro that asks for the file, built on the Tutorial
+ * archetype (GUIDELINES.md §6-A, `PrizmaTutorialScreen`).
+ *
+ * Figma: purple section `QSign.upload.default` (10196:67095). Measured off the
+ * 390 frame (CONTENT 654, `top container` 342×127): nav 8→52 · Title 68→127
+ * (nav + Spacing/24) · `illustration container` flexes · `Call to Actions`
+ * 536→638 = the primary + the Tag. Exactly the archetype's own rhythm, so this
+ * file declares no layout.
+ *
+ * The illustration is `DocumentCaptureIllustration` — NOT a fourth inline copy
+ * of the same artwork. The Figma `Illustrations` frame here is 310.47 × 325 and
+ * Document Capture's is 342 × 358: the SAME ratio to five decimals (0.90775),
+ * with the same three layers (halo ellipse `bg` · `documents` page · the
+ * `frame-border` outline), i.e. one asset drawn at two scales. Core still ships
+ * no document illustration, so the standing request stands — DEVIATIONS #DC-21
+ * asked to promote it to `PrizmaIllustrationDocument`; a second module now
+ * depends on a Document-Capture-named export, which is the strongest argument
+ * yet for the promotion.
+ *
+ * `QSign.upload.select` (10196:67173), the section between this screen and the
+ * review, is the **iOS Files app** — OS chrome, not a Prizma surface. Not built,
+ * for the reason DEVIATIONS #DC-20 settled: a screen composed only of Core
+ * components cannot render OS chrome, and faking it would ship a fake system UI.
+ * A host that needs the picker calls the platform API.
+ */
+export const QualifiedSignatureUploadScreen = forwardRef(({ strings, illustration, screenId = 'qualified-signature-upload', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaTutorialScreen, { ref: ref, title: strings.upload.title, subtitle: strings.upload.subtitle, disclaimer: strings.upload.disclaimer, ctaLabel: strings.upload.ctaLabel, illustration: illustration ?? _jsx(DocumentCaptureIllustration, {}), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+QualifiedSignatureUploadScreen.displayName = 'QualifiedSignatureUploadScreen';
+export default QualifiedSignatureUploadScreen;

package/dist/ResultScreen.d.ts

@@ -0,0 +1,93 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenChromeProps, PrizmaScreenOverrides } from './types';
+import './ScreenLayout.css';
+/** `loading` renders Core's spinner slot; the verdicts render its status mark. */
+export type PrizmaResultStatus = 'loading' | 'success' | 'error' | 'warning' | 'none';
+export interface PrizmaResultScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'>, PrizmaScreenChromeProps {
+    /** The status mark above the title. `none` renders the title alone. */
+    status?: PrizmaResultStatus;
+    /**
+     * An optional block between the logo nav and the content — a journey stepper.
+     * Video Selfie draws Core's `PrizmaStepper` on EVERY screen of the flow, not
+     * just its camera stages, and it is the only chrome that tells the steps
+     * apart; the archetypes had a slot on E alone, so the rest of the module shed
+     * it (owner-reported 2026-08-19). Takes a `ReactNode` so the module supplies
+     * Core's own component — no primitive invented, and both offsets live once in
+     * `ScreenLayout.css` (`.prizma-screen-layout__progress`). Omit it and nothing
+     * renders, so every existing consumer is byte-identical. DEVIATIONS #VS-4.
+     */
+    progress?: ReactNode;
+    /** H2 result line ("Verification complete", "Face not aligned"). */
+    title: string;
+    /** Supporting copy below the title. */
+    subtitle?: string;
+    /**
+     * A non-status glyph ABOVE the title — Core's `PrizmaTitle.icon` allowlist is
+     * `status | spinner | none`, so anything else (a Wi-Fi mark on a connectivity
+     * error) is composed here rather than forced into the slot. DEVIATIONS #10.
+     */
+    glyph?: ReactNode;
+    /**
+     * Anything between the title block and the CTA band: a verdict Snackbar
+     * (Face Match), the captured document still (ID Capture), a hint list. Kept as
+     * a slot so one template covers every module's result screen instead of each
+     * hand-building the same skeleton.
+     */
+    children?: ReactNode;
+    /**
+     * Content that belongs INSIDE the CTA band, above the buttons — Face Match's
+     * verdict Snackbar sits there in Figma (Spacing/32 above the CTA, reached as
+     * the band's own 16 plus the slot's 16). Distinct from `children`, which sits
+     * with the centered title block.
+     */
+    bandContent?: ReactNode;
+    /**
+     * How the two CTAs sit. `stacked` (default) puts the secondary above the
+     * primary; `row` pairs them side by side, which is what ID Capture's review
+     * screen draws (Retake | Continue, ~166/163 in a 342 column).
+     */
+    ctaOrientation?: 'stacked' | 'row';
+    /** Legal/hint copy directly above the CTA. Supplies the designed 28px
+     *  text→CTA gap through its own padding (DEVIATIONS #8). */
+    disclaimer?: string;
+    /** Primary CTA. Omit for result screens that only report. */
+    ctaLabel?: string;
+    /** Secondary CTA rendered BELOW the primary (#GEO-1). */
+    secondaryCtaLabel?: string;
+    /**
+     * A tertiary underlined LINK, rendered BELOW the button stack — the position
+     * archetype A uses. Video Selfie's `14.3`/`14.4` draw "Retry" first with
+     * "Quit process" underneath; with no slot here the module had to borrow
+     * `bandContent`, which renders ABOVE the buttons and put the link on the
+     * wrong side (owner QA 2026-08-19). `bandContent` returns to its intended
+     * job (Face Match's verdict Snackbar). DEVIATIONS #VS-17.
+     */
+    linkLabel?: string;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    navLabel?: string;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Archetype F — Result.
+ *
+ * The "centered status + CTA band + tag" recipe. It exists because three
+ * modules hand-built it independently — `FaceCaptureResultErrorScreen` (100
+ * lines), `FaceMatchResultScreen` (143) and `IdCaptureResultScreen` (198) —
+ * each differing only in what sat between the title and the CTA. Every
+ * hand-build was a fresh chance to get the spacing subtly wrong, which is
+ * exactly how the tag ended up at 0 on some screens and 16 on others.
+ *
+ * Layout: nav (or reserved row) → vertically centered title block → optional
+ * slot → CTA band (secondary, primary, disclaimer at a flat Spacing/16) →
+ * anchored footer tag. Every offset comes from ScreenLayout.css; this file
+ * declares none of its own.
+ *
+ * `ProcessingScreen` stays the pure spinner/no-CTA case; reach for this one as
+ * soon as a result screen needs a button.
+ */
+export declare const PrizmaResultScreen: React.ForwardRefExoticComponent<PrizmaResultScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PrizmaResultScreen;

package/dist/ResultScreen.js

@@ -0,0 +1,37 @@
+'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 F — Result.
+ *
+ * The "centered status + CTA band + tag" recipe. It exists because three
+ * modules hand-built it independently — `FaceCaptureResultErrorScreen` (100
+ * lines), `FaceMatchResultScreen` (143) and `IdCaptureResultScreen` (198) —
+ * each differing only in what sat between the title and the CTA. Every
+ * hand-build was a fresh chance to get the spacing subtly wrong, which is
+ * exactly how the tag ended up at 0 on some screens and 16 on others.
+ *
+ * Layout: nav (or reserved row) → vertically centered title block → optional
+ * slot → CTA band (secondary, primary, disclaimer at a flat Spacing/16) →
+ * anchored footer tag. Every offset comes from ScreenLayout.css; this file
+ * declares none of its own.
+ *
+ * `ProcessingScreen` stays the pure spinner/no-CTA case; reach for this one as
+ * soon as a result screen needs a button.
+ */
+export const PrizmaResultScreen = forwardRef(({ progress, status = 'none', title, subtitle, glyph, children, bandContent, disclaimer, ctaOrientation = 'stacked', 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 prizma-screen-layout__content--centered", 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 } }), children] }), ctaLabel || secondaryCtaLabel || linkLabel || disclaimer || bandContent ? (_jsxs("div", { className: "prizma-screen-layout__band prizma-screen-layout__band--result", children: [bandContent ? (_jsx("div", { className: "prizma-screen-layout__band__content", children: bandContent })) : null, disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, _jsxs("div", { className: ctaOrientation === 'row'
+                        ? 'prizma-screen-layout__band__ctas prizma-screen-layout__band__ctas--row'
+                        : 'prizma-screen-layout__band__ctas', children: [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, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: linkLabel })) : null] })] })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })));
+PrizmaResultScreen.displayName = 'PrizmaResultScreen';
+export default PrizmaResultScreen;

package/dist/ReviewScreen.d.ts

@@ -0,0 +1,81 @@
+import React, { type ReactNode } from 'react';
+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).
+ */
+export type PrizmaReviewStage = 'review' | 'analyzing' | 'success';
+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). */
+    subtitle?: string;
+    /** Title shown on `success`; falls back to `title` when omitted. */
+    successTitle?: string;
+    /** Caption inside the loading bar on `analyzing`. */
+    analyzingLabel?: string;
+    /**
+     * Which Core `PrizmaLoadingBar` treatment the `analyzing` stage runs — the
+     * captured-photo review shows the `analyzing` sweep, the uploaded-file review
+     * shows `uploading`. Default `analyzing`.
+     */
+    analyzingState?: 'analyzing' | 'uploading';
+    /** Loading-bar progress on `analyzing`, 0–100. */
+    progress?: number;
+    /**
+     * The flexing captured-media slot: a `PrizmaIdCapture` still, an uploaded-file
+     * preview card, a portrait review. Kept a slot so one template serves every
+     * module's review screen — the module supplies the media in the right state
+     * for the stage; the archetype owns every offset around it.
+     */
+    children: ReactNode;
+    /**
+     * Extra class on the media stage for per-media adapters that Core does not
+     * own (an uploaded-file column inset, the light-surface encrypted re-tint).
+     * These shape CONTENT, never archetype spacing — the header, stage flex, CTA
+     * offset and footer all come from ScreenLayout.css regardless.
+     */
+    stageClassName?: string;
+    /** Primary CTA — the forward action. Drawn on `review` and `success`. */
+    primaryLabel: string;
+    /** Secondary CTA ("Replace" / "Retake") — drawn on `review` only. */
+    secondaryLabel?: string;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    navLabel?: string;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * 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.
+ *
+ * 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
+ * middle, and adds an in-flight `analyzing` state (the Title swaps for Core's
+ * `PrizmaLoadingBar` and the CTA row drops). `IdCaptureResultScreen`'s review
+ * verdict stays on F — its small on-surface still fits F's centred column, and
+ * splitting one file across two archetypes buys nothing (owner call 2026-08-18).
+ *
+ * Layout (measured off the Document Capture 390 sections, DEVIATIONS #DC-22/24):
+ * no logo nav → header block (Title or loading bar) → Spacing/32 → media stage
+ * (flexes, centred) → Spacing/24 → CTA band (`review`/`success`) → anchored
+ * VerifiedTag. `analyzing` drops the band and the stage carries the Spacing/24
+ * to the bottom itself. Every offset lives in ScreenLayout.css; this file
+ * declares none of its own.
+ */
+export declare const PrizmaReviewScreen: React.ForwardRefExoticComponent<PrizmaReviewScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PrizmaReviewScreen;

package/dist/ReviewScreen.js

@@ -0,0 +1,56 @@
+'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 { PrizmaButtonGroup } from '@incodetech/prizma-core-web/button-group';
+import { PrizmaLoadingBar } from '@incodetech/prizma-core-web/loading-bar';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+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.
+ *
+ * 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
+ * middle, and adds an in-flight `analyzing` state (the Title swaps for Core's
+ * `PrizmaLoadingBar` and the CTA row drops). `IdCaptureResultScreen`'s review
+ * verdict stays on F — its small on-surface still fits F's centred column, and
+ * splitting one file across two archetypes buys nothing (owner call 2026-08-18).
+ *
+ * Layout (measured off the Document Capture 390 sections, DEVIATIONS #DC-22/24):
+ * no logo nav → header block (Title or loading bar) → Spacing/32 → media stage
+ * (flexes, centred) → Spacing/24 → CTA band (`review`/`success`) → anchored
+ * VerifiedTag. `analyzing` drops the band and the stage carries the Spacing/24
+ * 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) => {
+    // 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);
+    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: [
+                            'prizma-screen-layout__review-stage',
+                            stage === 'analyzing' ? 'prizma-screen-layout__review-stage--flush' : '',
+                            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] })] }));
+});
+PrizmaReviewScreen.displayName = 'PrizmaReviewScreen';
+export default PrizmaReviewScreen;