@incodetech/prizma-core-screens 0.1.0

package/dist/DocumentCaptureConfirmUploadScreen.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconLock } from '@incodetech/prizma-core-icons';
+import { PrizmaReviewScreen } from './ReviewScreen';
+import './ScreenLayout.css';
+import './DocumentCaptureLayout.css';
+/**
+ * Document Capture — uploaded-file confirmation, built on the Review archetype
+ * (GUIDELINES.md §6-H, `PrizmaReviewScreen`).
+ *
+ * Figma: purple sections `documentCapture.confirmUpload.reviewFile` /
+ * `.analyzing` / `.success` — the same review skeleton as
+ * `DocumentCaptureConfirmImageScreen`, with the camera stage swapped for the
+ * uploaded file's preview card. The archetype owns the header, the flexing
+ * media stage, the Spacing/24 CTA offset and the anchored tag (DEVIATIONS
+ * #DC-22/24, now #REV-1); what stays module-side is the media itself — the
+ * vertical preview card and the standalone encrypted row, which have no Core
+ * counterpart (`PrizmaCardDocumentContainer` is a HORIZONTAL filename + action
+ * row, and Core's encrypted block ships only inside `PrizmaIdCapture`) —
+ * DEVIATIONS #DC-26, #DC-27 — plus the file-column inset.
+ *
+ * `documentCapture.upload.selectFromLibrary` / `.selectFromFiles` sit between
+ * the tutorial and this screen in the Figma flow, but they are the iOS Photos
+ * and Files apps — OS chrome, not Prizma surfaces (DEVIATIONS.md #DC-20).
+ */
+export const DocumentCaptureConfirmUploadScreen = forwardRef(({ strings, stage = 'review', filename, thumbnail, progress = 45, screenId = `document-capture-confirm-upload-${stage}`, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaReviewScreen, { ref: ref, stage: stage, title: strings.confirmUpload.title, subtitle: strings.confirmUpload.subtitle, successTitle: strings.confirmUpload.successTitle, analyzingLabel: strings.confirmUpload.analyzingLabel, analyzingState: "uploading", progress: progress, stageClassName: "document-capture-review-file", primaryLabel: strings.confirmUpload.ctaLabel, secondaryLabel: strings.confirmUpload.replaceLabel, verifiedLabel: strings.verifiedLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: [_jsxs("div", { className: "document-capture-file-card", children: [_jsx("span", { className: "document-capture-file-card__thumb", children: thumbnail }), filename ? _jsx("p", { className: "document-capture-file-card__name", children: filename }) : null] }), strings.encryptedLabel ? (_jsxs("p", { className: "document-capture-encrypted", children: [_jsx(IconLock, { size: "s" }), _jsx("span", { children: strings.encryptedLabel })] })) : null] })));
+DocumentCaptureConfirmUploadScreen.displayName = 'DocumentCaptureConfirmUploadScreen';
+export default DocumentCaptureConfirmUploadScreen;

package/dist/DocumentCaptureGenericErrorScreen.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DocumentCaptureStrings } from './DocumentCaptureStrings';
+import './ScreenLayout.css';
+export interface DocumentCaptureGenericErrorScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'disclaimer' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `error` slice (+ shared labels). The
+     *  host passes the copy of the CURRENT verdict. */
+    strings: DocumentCaptureStrings;
+    /**
+     * `documentCapture.errors.genericErrorExhausted` — retries are used up: the
+     * status icon goes from warning to negative, the attempts line is dropped,
+     * and the CTA becomes the forward action instead of "Recapture document".
+     */
+    exhausted?: boolean;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Document Capture — generic error, built on the `PrizmaResultScreen` archetype
+ * (GUIDELINES.md §6-F). Figma: purple sections
+ * `documentCapture.errors.genericError` / `.genericErrorExhausted`.
+ *
+ * The two sections that DO keep the attribution chrome (nav + verified tag),
+ * alongside the tutorial and next-page families — DEVIATIONS.md #DC-22.
+ *
+ * Layout measured off the 390 sections and identical, to the pixel, to the Face
+ * Capture pilot's `resultError.*`: `top-nav/header` 8→52 · Title stretched
+ * 52→479 with its icon/heading/subtitle block vertically centered · CTA band
+ * 479→646. That centered block IS Core's `PrizmaTitle` (icon slot → Spacing/16
+ * → H2 → Spacing/12 → H5), and the band is the archetype's — this file used to
+ * repeat both by hand for want of a result template (the #FM-24 gap, now closed).
+ */
+export declare const DocumentCaptureGenericErrorScreen: React.ForwardRefExoticComponent<DocumentCaptureGenericErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DocumentCaptureGenericErrorScreen;

package/dist/DocumentCaptureGenericErrorScreen.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * Document Capture — generic error, built on the `PrizmaResultScreen` archetype
+ * (GUIDELINES.md §6-F). Figma: purple sections
+ * `documentCapture.errors.genericError` / `.genericErrorExhausted`.
+ *
+ * The two sections that DO keep the attribution chrome (nav + verified tag),
+ * alongside the tutorial and next-page families — DEVIATIONS.md #DC-22.
+ *
+ * Layout measured off the 390 sections and identical, to the pixel, to the Face
+ * Capture pilot's `resultError.*`: `top-nav/header` 8→52 · Title stretched
+ * 52→479 with its icon/heading/subtitle block vertically centered · CTA band
+ * 479→646. That centered block IS Core's `PrizmaTitle` (icon slot → Spacing/16
+ * → H2 → Spacing/12 → H5), and the band is the archetype's — this file used to
+ * repeat both by hand for want of a result template (the #FM-24 gap, now closed).
+ */
+export const DocumentCaptureGenericErrorScreen = forwardRef(({ strings, exhausted = false, screenId = exhausted
+    ? 'document-capture-generic-error-exhausted'
+    : 'document-capture-generic-error', overrides, onAction, ...shell }, ref) => {
+    // Figma: the base section carries "N attempts remaining"; the exhausted
+    // section drops it (the subtitle says the limit is reached instead).
+    const attemptsLabel = exhausted ? undefined : strings.error.attemptsLabel;
+    return (_jsx(PrizmaResultScreen, { ref: ref, status: exhausted ? 'error' : 'warning', title: strings.error.title, subtitle: strings.error.description, disclaimer: attemptsLabel, ctaLabel: strings.error.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+});
+DocumentCaptureGenericErrorScreen.displayName = 'DocumentCaptureGenericErrorScreen';
+export default DocumentCaptureGenericErrorScreen;

package/dist/DocumentCaptureIllustration.d.ts

@@ -0,0 +1,45 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+import './DocumentCaptureLayout.css';
+/**
+ * DocumentCaptureIllustration — the document centerpiece of the Document
+ * Capture tutorial / next-page screens.
+ *
+ * WHY IT LIVES IN THE MODULE LAYER: `prizma-core-web` ships
+ * `PrizmaIllustrationSelfie`, `…IdTutorial`, `…IdIntro`, `…IdFlip`,
+ * `…IdHint`, `…IdFeedback`, `…NfcScan`, `…NfcIssue`, `…Geolocation`,
+ * `…DigitalId` and `…Avatar` — there is NO document / proof-of-address
+ * illustration. GUIDELINES.md §10 is the standing asset rule for that gap
+ * ("Illustrations…: inline SVG React components (Figma-sourced), tintable via
+ * tokens/currentColor"), so the artwork is inlined here verbatim from the
+ * Figma export and every paint is bound to an existing illustration token —
+ * no primitive re-implemented, no hex hardcoded. Promotion to
+ * `PrizmaIllustrationDocument` is a Core request (DEVIATIONS.md #DC-21).
+ *
+ * Figma source: the `Illustrations` frame of the purple sections
+ * `documentCapture.tutorial.*` / `documentCapture.nextPage.*`
+ * (cbFXiChmJ8cWQDHwVghBqJ) — a 342 × 358 box (`aspect-[342/358]`, max 362 ×
+ * 378.94) holding four layers, whose positions are PERCENTAGES of that box and
+ * therefore identical across every purple variant (verified against
+ * `tutorial.default` 4095:26010 and `nextPage.optional` 4095:26026):
+ *
+ *   halo circle   d = 91.34% of the height, centered, top 4.19%
+ *   document page inset 9.05% / 20.37% / 16.97% / 20.12% (+ its Figma drop
+ *                 shadow, which bleeds −13.84% sideways and −9.31% / −11.97%)
+ *   text lines    inset 12.01% / 25.28% / 26.42% / 25.14%, opacity 0.5
+ *   capture frame aspect 177.81 / 230.04, top 8.38%, bottom 16.2%, centered —
+ *                 a 2px white outline just outside the page edge
+ *
+ * Those percentages are resolved to the 342 × 358 viewBox once, below, so the
+ * whole thing is ONE scalable SVG instead of four positioned layers.
+ *
+ * Paint mapping (exact values, pixel-diff 0):
+ *   #E5F0FF → Illustration/Surface/Halo      · #C6C8D2 → artwork/grey-96
+ *   white   → artwork/white
+ * The export also stacked a `fill="black" fill-opacity="0.01"` plate over the
+ * page — dropped on purpose: it is invisible (a 0.15%-of-a-channel shift) and
+ * black is absent from the illustration token set, so keeping it would have
+ * meant a hardcoded literal for no visual gain.
+ */
+export type PrizmaDocumentCaptureIllustrationProps = Omit<ComponentPropsWithoutRef<'svg'>, 'viewBox' | 'children'>;
+export declare const DocumentCaptureIllustration: React.ForwardRefExoticComponent<PrizmaDocumentCaptureIllustrationProps & React.RefAttributes<SVGSVGElement>>;
+export default DocumentCaptureIllustration;

package/dist/DocumentCaptureIllustration.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import './DocumentCaptureLayout.css';
+export const DocumentCaptureIllustration = forwardRef(({ className, ...rest }, ref) => (_jsxs("svg", { ref: ref, className: ['document-capture-illustration', className ?? ''].filter(Boolean).join(' '), viewBox: "0 0 342 358", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...rest, children: [_jsx("circle", { cx: "171", cy: "178.5", r: "163.5", fill: "var(--prizma-illustration-surface-halo)" }), _jsxs("svg", { x: "40.64", y: "7.75", width: "259.83", height: "321.15", viewBox: "0 0 221.387 273.626", overflow: "visible", children: [_jsx("g", { filter: "url(#prizma-dc-ill-shadow)", children: _jsx("path", { d: "M24 26C24 23.2386 26.2386 21 29 21H192.387C195.149 21 197.387 23.2386 197.387 26V241.626C197.387 244.387 195.149 246.626 192.387 246.626H29C26.2386 246.626 24 244.387 24 241.626V26Z", fill: "var(--prizma-illustration-artwork-white)" }) }), _jsx("defs", { children: _jsxs("filter", { id: "prizma-dc-ill-shadow", x: "0", y: "0", width: "221.387", height: "273.626", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dy: "3" }), _jsx("feGaussianBlur", { stdDeviation: "12" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" })] }) })] }), _jsx("svg", { x: "85.98", y: "42.996", width: "169.56", height: "220.42", viewBox: "0 0 144.456 187.768", preserveAspectRatio: "none", children: _jsxs("g", { opacity: "0.5", fill: "var(--prizma-illustration-artwork-grey-96)", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.152148 23.4538C0.152148 22.9833 0.533578 22.6018 1.0041 22.6018H143.603C144.074 22.6018 144.455 22.9833 144.455 23.4538V26.0963C144.455 26.5669 144.074 26.9483 143.603 26.9483H1.0041C0.533582 26.9483 0.152148 26.5669 0.152148 26.0963V23.4538Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.152148 184.274C0.152148 183.803 0.533578 183.422 1.0041 183.422H143.603C144.074 183.422 144.455 183.803 144.455 184.274V186.916C144.455 187.387 144.074 187.768 143.603 187.768H1.0041C0.533582 187.768 0.152148 187.387 0.152148 186.916V184.274Z" }), _jsx("path", { d: "M0.152148 46.9252C0.152148 46.4546 0.533582 46.0732 1.0041 46.0732H57.5431C58.0136 46.0732 58.395 46.4546 58.395 46.9252V54.7835C58.395 55.254 58.0136 55.6355 57.5431 55.6355H1.0041C0.533582 55.6355 0.152148 55.254 0.152148 54.7835L0.152148 46.9252Z" }), _jsx("path", { d: "M0.152108 65.1805C0.152108 64.71 0.533541 64.3286 1.00406 64.3286H57.543C58.0135 64.3286 58.395 64.71 58.395 65.1805V73.0389C58.395 73.5094 58.0136 73.8908 57.543 73.8908H1.00406C0.533541 73.8908 0.152108 73.5094 0.152108 73.0389L0.152108 65.1805Z" }), _jsx("path", { d: "M0.13728 83.4351C0.145491 82.9647 0.533524 82.59 1.00397 82.5982L81.0017 83.9945C81.4722 84.0028 81.8469 84.3908 81.8387 84.8612L81.7015 92.7184C81.6933 93.1888 81.3053 93.5636 80.8348 93.5553L0.837091 92.159C0.366641 92.1508 -0.00807931 91.7627 0.000132428 91.2923L0.13728 83.4351Z" }), _jsx("path", { d: "M0.13728 101.69C0.145491 101.22 0.533524 100.845 1.00397 100.854L24.5061 101.264C24.9765 101.272 25.3512 101.66 25.343 102.13L25.2362 108.249C25.228 108.72 24.84 109.094 24.3695 109.086L0.867432 108.676C0.396982 108.668 0.0222633 108.28 0.0304751 107.809L0.13728 101.69Z" }), _jsx("path", { d: "M0.152148 1.72151C0.152148 1.25099 0.533582 0.869559 1.0041 0.869559H107.093C107.563 0.869559 107.945 1.25099 107.945 1.72151V10.4492C107.945 10.9197 107.563 11.3011 107.093 11.3011H1.0041C0.533581 11.3011 0.152148 10.9197 0.152148 10.4492V1.72151Z" }), _jsx("path", { d: "M122.723 0.851954C122.723 0.381432 123.105 0 123.575 0H143.604C144.074 0 144.456 0.381433 144.456 0.851955V9.5796C144.456 10.0501 144.074 10.4316 143.604 10.4316H123.575C123.105 10.4316 122.723 10.0501 122.723 9.5796V0.851954Z" })] }) }), _jsx("rect", { x: "67.65", y: "31", width: "206.7", height: "268", rx: "7", stroke: "var(--prizma-illustration-artwork-white)", strokeWidth: "2" })] })));
+DocumentCaptureIllustration.displayName = 'DocumentCaptureIllustration';
+export default DocumentCaptureIllustration;

package/dist/DocumentCaptureLayout.css

@@ -0,0 +1,226 @@
+/* Document Capture — module layout additions.
+ *
+ * ONLY what the foundation archetypes and Prizma Core do not already own.
+ * Every value is a token; the two unavoidable literals below carry an inline
+ * justification AND a numbered row in DEVIATIONS.md (Wave 2).
+ *
+ * Nothing here re-declares an archetype spacing rule: the content column, the
+ * 24px gutters, the CTA-band recipe (`__band`, DEVIATIONS #8), the no-nav
+ * status-bar reserve (`__content--no-nav`, #9) and the "capture stage adds no
+ * offset" rule (`__content--capture`, #12) all stay the foundation's.
+ */
+
+/* ── Camera stage top offset ─────────────────────────────────────────────────
+ * `documentCapture.capture.*` has NO logo nav (DEVIATIONS #DC-22) and its CONTENT
+ * frame starts at Spacing/16, not the Spacing/24 every other no-nav screen uses
+ * (measured: 54px System UI Top Bar → `center grouping container` y=16). Same
+ * `--pcs-status-bar` custom property as the foundation, so a host that draws
+ * its own chrome still overrides the reserve exactly once.
+ *
+ * ⚠ THIS RESERVE WENT MISSING AND CAME BACK — read before touching it.
+ * It used to hang off `.document-capture-content--camera`, a class this screen
+ * carried when it composed its own column. The screen was later rebuilt on the
+ * foundation's viewfinder (`.prizma-viewfinder__content`) to match
+ * IdCaptureStageScreen, and the class went with the old markup — but the rule
+ * stayed here, matching nothing. The reserve went with it: the viewfinder
+ * column declares `padding: 0 24 24`, so the title rendered at the very top of
+ * the shell, y+0, clipped by the notch (owner report 2026-09-03; measured
+ * title-to-shell gap 0px on Document Capture against 143px on ID Capture,
+ * which is only right because ITS stage draws a nav row and the nav carries the
+ * reserve — see ScreenNav.css).
+ *
+ * So it is scoped to the composition that actually ships. The 16 rather than
+ * the foundation's 24 is the measured number and the reason this rule is not
+ * just `__content--no-nav`; the Spacing/16 between the title block and the
+ * frame is `.prizma-viewfinder__intro`'s own padding-bottom, which the
+ * foundation already sets, so nothing re-declares it here.
+ */
+.document-capture-capture-screen .prizma-viewfinder__content {
+  padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-16));
+}
+
+/* Core's PoA stage is `height: 100%` so it fills whatever box the host gives
+ * it (IdCapture.css). Inside a flex column that has to be spelled out as a
+ * flex item, otherwise the percentage resolves against the whole content
+ * column and the Title / strip get squeezed. No spacing is added — the stage
+ * keeps owning its own frame ↔ encrypted-row geometry (DEVIATIONS #12). The
+ * camera screen and the confirm-image review both put the poa stage in a flex
+ * column, so both need it. */
+.document-capture-capture-screen .prizma-viewfinder__content > .prizma-id-capture,
+.document-capture-review-image > .prizma-id-capture {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* Capture stage → manual-capture strip: Spacing/12 (Figma `center grouping
+ * container` 550 − content 538). */
+.document-capture-capture-bar {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  margin-top: var(--prizma-spacing-12);
+}
+
+/* Removed: `.document-capture-band--pinned` (`margin-top: auto`). Its one
+ * consumer, `commonIssues`, is now the List archetype, whose `__list` middle
+ * flexes and pushes the band down on its own — DEVIATIONS #F-31.
+ */
+
+/* ── Review-stage media adapters (archetype H) ───────────────────────────────
+ * The review skeleton — header block, flexing media stage, stage → CTA Spacing/24
+ * and the analyzing flush — now lives in the foundation (`ScreenLayout.css`
+ * `.prizma-screen-layout__review-*`, consumed via `PrizmaReviewScreen`).
+ * DEVIATIONS #REV-1. Only what shapes THIS module's media stays here.
+ */
+
+/* Confirm-image review: the captured still keeps the same PoA frame the camera
+ * screen uses (its flex-item rule is shared above), and its encrypted row is
+ * re-tinted for the LIGHT review surface — Core paints it Text/Body/0 Static
+ * (white) for the dark camera stage; Figma draws Text/Body/800 (Primary) here.
+ * No Core file touched, no !important — DEVIATIONS #DC-25. */
+.document-capture-review-image .prizma-id-capture__encrypted {
+  color: var(--prizma-text-body-800-primary);
+}
+
+/* Confirm-upload review: the file-preview card is inset by 48 inside the media
+ * stage (Figma `Container` px-48 → the 246-wide card in the 342 column). The
+ * spacing scale stops at 40, so the value is DERIVED from Spacing/24. */
+.document-capture-review-file {
+  padding-inline: calc(var(--prizma-spacing-24) * 2);
+}
+
+/* ── Standalone encrypted notice ─────────────────────────────────────────────
+ * Core owns the "capture encrypted message" building block only as a private
+ * part of PrizmaIdCapture; the uploaded-file screens need it beside a card
+ * instead. Rebuilt here from the same tokens as
+ * `.prizma-id-capture__encrypted` (Spacing/8 block padding, Spacing/4 gap,
+ * Body/M Regular, 16px lock). `IconLock` is designed at 24 only, so — exactly
+ * as Core does in `IdCapture.css` — the glyph is clamped to the designed 16 in
+ * CSS; 16 is absent from the icon-size token axis (m=24, l=32, …).
+ * DEVIATIONS #DC-26.
+ */
+.document-capture-encrypted {
+  margin: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--prizma-spacing-4);
+  padding-block: var(--prizma-spacing-8);
+  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);
+}
+
+.document-capture-encrypted > svg {
+  flex: none;
+  width: 16px; /* hardcoded — Icon/Lock is designed at 24 only and Figma draws 16; same clamp as Core's .prizma-id-capture__encrypted-icon (DEVIATIONS #DC-26) */
+  height: 16px;
+}
+
+/* ── Uploaded-file preview card ──────────────────────────────────────────────
+ * Figma `Document Container` of `confirmUpload.*`. Core's
+ * `PrizmaCardDocumentContainer` is the HORIZONTAL filename + action row — a
+ * different component with the same Figma name — so the vertical preview card
+ * is composed here from the same Card tokens (Surface/Neutral/50 on
+ * Border/Neutral/100 at Border/Radius/large, Spacing/32 block + Spacing/24
+ * inline padding, Spacing/24 thumbnail → info gap). DEVIATIONS #DC-27.
+ */
+.document-capture-file-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prizma-spacing-24);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--prizma-spacing-32) var(--prizma-spacing-24);
+  background: var(--prizma-surface-neutral-50);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-large);
+  overflow: hidden;
+}
+
+/* Thumbnail — Figma 120 × 160 (a 3:4 page crop). Sized by ratio off the card
+ * width so it scales with the host, capped at the design size. */
+.document-capture-file-card__thumb {
+  position: relative;
+  flex: none;
+  width: 120px; /* hardcoded — Figma page-thumbnail width; absent from the token SOT (DEVIATIONS #DC-27) */
+  aspect-ratio: 3 / 4;
+  max-width: 100%;
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-small);
+  overflow: hidden;
+  background: var(--prizma-surface-neutral-0);
+}
+
+.document-capture-file-card__thumb > img,
+.document-capture-file-card__thumb > svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.document-capture-file-card__name {
+  margin: 0;
+  width: 100%;
+  overflow-wrap: break-word;
+  text-align: center;
+  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);
+}
+
+/* The `analyzing` loading-bar block (164px centred cap) moved to the foundation
+ * with the rest of the review skeleton — `.prizma-screen-layout__review-loading`
+ * in ScreenLayout.css. DEVIATIONS #DC-28, #REV-1. */
+
+/* ── Illustration slot ───────────────────────────────────────────────────────
+ * The SVG carries the 342 × 358 viewBox, so `preserveAspectRatio` does the
+ * letterboxing: the slot only supplies the flexible box and the Figma
+ * max-width (362 → max-height 378.9 follows from the ratio, so it is never
+ * declared).
+ */
+.document-capture-illustration {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  max-width: 362px; /* hardcoded — Figma `Illustrations` max-width; absent from the token SOT (DEVIATIONS #DC-21) */
+}
+
+/* The non-status glyph slot that used to live here (`.document-capture-glyph`)
+ * is now the foundation's `__glyph` in `ScreenLayout.css` — DEVIATIONS #DC-29,
+ * closed: three modules had a byte-identical copy of it.
+ */
+
+/* ── Bottom-sheet overlay ────────────────────────────────────────────────────
+ * `tutorial.methodSelection*` layers Core's `PrizmaBottomSheetContent` over the
+ * tutorial. The safe presenter (`PrizmaBottomSheet`) portals to
+ * `document.body`, which would escape the 390 × 844 screen frame and the
+ * host's `transform: scale()` — so the screen owns the scrim, exactly as
+ * bottom-sheet.md §10.3 assigns it to "the consuming surface". The scrim drinks
+ * Core's own `Surface/Overlay` token; no animation, because a screen is one
+ * static spec state. DEVIATIONS #DC-30.
+ */
+.document-capture-sheet-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: var(--prizma-surface-overlay);
+}
+
+.document-capture-sheet-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}

package/dist/DocumentCaptureMethodSelectionScreen.d.ts

@@ -0,0 +1,45 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaTutorialScreenProps } from './TutorialScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DocumentCaptureMethodSelectionVariant, DocumentCaptureStrings } from './DocumentCaptureStrings';
+import './ScreenLayout.css';
+import './DocumentCaptureLayout.css';
+export interface DocumentCaptureMethodSelectionScreenProps extends Omit<PrizmaTutorialScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'linkLabel' | 'overlay' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads `methodSelection` + `tutorial` (the sheet
+     *  is presented OVER the tutorial, which stays visible behind the scrim). */
+    strings: DocumentCaptureStrings;
+    /** `web` = the 2-row menu · `native` = the 3-row menu · `nativeUpload` = the
+     *  native menu with the camera row dropped (2 rows). */
+    method?: DocumentCaptureMethodSelectionVariant;
+    /** Replace the module's document illustration. */
+    illustration?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Document Capture — capture-method selection: the `PrizmaTutorialScreen`
+ * archetype plus a presented sheet. Figma: purple sections
+ * `documentCapture.tutorial.methodSelectionWeb` (`Bottom sheet` 390 × 172, 2
+ * rows) and `.methodSelectionNative` (390 × 262, 3 rows).
+ *
+ * The screen behind the scrim is the `tutorial.default` composition verbatim —
+ * which is now literally true: it is the same archetype call the tutorial screen
+ * makes, and only the overlay differs. The sheet rides in the archetype's
+ * `overlay` slot, a shell-level layer, because the scrim and panel are positioned
+ * against the shell and cannot live in the content column (#F-32).
+ *
+ * Core's own `PrizmaBottomSheetContent` renders the panel (handle, radius,
+ * padding, Action Option rows); the row icons come from the canonical bank.
+ * The safe presenter (`PrizmaBottomSheet`) is deliberately NOT used: it portals
+ * to `document.body`, which escapes the screen frame and the host's
+ * `transform: scale()`, and a screen is one static spec state with no open/close
+ * clock. bottom-sheet.md §10.3 assigns the scrim to "the consuming surface",
+ * and here the screen IS that surface — DEVIATIONS.md #DC-30.
+ *
+ * `documentCapture.tutorial.nativeMethodSelectionOnWeb` layers the iOS action
+ * sheet ON TOP of this one; that upper layer is OS chrome, not a Prizma
+ * surface, so it is out of scope (DEVIATIONS.md #DC-20).
+ */
+export declare const DocumentCaptureMethodSelectionScreen: React.ForwardRefExoticComponent<DocumentCaptureMethodSelectionScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DocumentCaptureMethodSelectionScreen;

package/dist/DocumentCaptureMethodSelectionScreen.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconCamera, IconFolderFileOpen, IconImage, IconPaperUpload, } from '@incodetech/prizma-core-icons';
+import { PrizmaBottomSheetContent, } from '@incodetech/prizma-core-web/bottom-sheet';
+import { PrizmaTutorialScreen } from './TutorialScreen';
+import { DocumentCaptureIllustration } from './DocumentCaptureIllustration';
+import './ScreenLayout.css';
+import './DocumentCaptureLayout.css';
+/**
+ * Document Capture — capture-method selection: the `PrizmaTutorialScreen`
+ * archetype plus a presented sheet. Figma: purple sections
+ * `documentCapture.tutorial.methodSelectionWeb` (`Bottom sheet` 390 × 172, 2
+ * rows) and `.methodSelectionNative` (390 × 262, 3 rows).
+ *
+ * The screen behind the scrim is the `tutorial.default` composition verbatim —
+ * which is now literally true: it is the same archetype call the tutorial screen
+ * makes, and only the overlay differs. The sheet rides in the archetype's
+ * `overlay` slot, a shell-level layer, because the scrim and panel are positioned
+ * against the shell and cannot live in the content column (#F-32).
+ *
+ * Core's own `PrizmaBottomSheetContent` renders the panel (handle, radius,
+ * padding, Action Option rows); the row icons come from the canonical bank.
+ * The safe presenter (`PrizmaBottomSheet`) is deliberately NOT used: it portals
+ * to `document.body`, which escapes the screen frame and the host's
+ * `transform: scale()`, and a screen is one static spec state with no open/close
+ * clock. bottom-sheet.md §10.3 assigns the scrim to "the consuming surface",
+ * and here the screen IS that surface — DEVIATIONS.md #DC-30.
+ *
+ * `documentCapture.tutorial.nativeMethodSelectionOnWeb` layers the iOS action
+ * sheet ON TOP of this one; that upper layer is OS chrome, not a Prizma
+ * surface, so it is out of scope (DEVIATIONS.md #DC-20).
+ */
+export const DocumentCaptureMethodSelectionScreen = forwardRef(({ strings, method = 'web', illustration, screenId = `document-capture-method-selection-${method}`, overrides, onAction, ...shell }, ref) => {
+    const { methodSelection } = strings;
+    const takePhoto = {
+        label: methodSelection.takePhotoLabel,
+        icon: _jsx(IconCamera, { size: "m" }),
+        onClick: () => onAction?.({ type: 'cta', screenId }),
+    };
+    const cameraRoll = {
+        label: methodSelection.cameraRollLabel,
+        icon: _jsx(IconImage, { size: "m" }),
+        onClick: () => onAction?.({ type: 'secondary', screenId }),
+    };
+    const chooseFile = {
+        label: methodSelection.chooseFileLabel,
+        icon: _jsx(IconFolderFileOpen, { size: "m" }),
+        onClick: () => onAction?.({ type: 'secondary', screenId }),
+    };
+    // `nativeUpload` is `native` minus the camera row — the upload-only session
+    // cannot offer a photo, so the row is absent rather than disabled.
+    const items = method === 'native'
+        ? [takePhoto, cameraRoll, chooseFile]
+        : method === 'nativeUpload'
+            ? [cameraRoll, chooseFile]
+            : [
+                takePhoto,
+                {
+                    label: methodSelection.uploadLabel,
+                    icon: _jsx(IconPaperUpload, { size: "m" }),
+                    onClick: () => onAction?.({ type: 'secondary', screenId }),
+                },
+            ];
+    return (_jsx(PrizmaTutorialScreen, { ref: ref, title: strings.tutorial.title, subtitle: strings.tutorial.subtitle.default, ctaLabel: strings.tutorial.ctaLabel.default, linkLabel: strings.tutorial.skipLabel, illustration: illustration ?? _jsx(DocumentCaptureIllustration, {}), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, overlay: 
+        /* Scrim + panel own the presentation; Core owns the panel itself. */
+        _jsxs(_Fragment, { children: [_jsx("div", { className: "document-capture-sheet-scrim", "aria-hidden": "true" }), _jsx("div", { className: "document-capture-sheet-panel", children: _jsx(PrizmaBottomSheetContent, { variant: method === 'native' ? 'menu-list-3' : 'menu-list-2', ariaLabel: methodSelection.sheetLabel, items: items, showBottomBar: false }) })] }), ...shell }));
+});
+DocumentCaptureMethodSelectionScreen.displayName = 'DocumentCaptureMethodSelectionScreen';
+export default DocumentCaptureMethodSelectionScreen;

package/dist/DocumentCaptureNextPageScreen.d.ts

@@ -0,0 +1,33 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaTutorialScreenProps } from './TutorialScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DocumentCaptureStrings } from './DocumentCaptureStrings';
+import './ScreenLayout.css';
+export interface DocumentCaptureNextPageScreenProps extends Omit<PrizmaTutorialScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'linkLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `nextPage` slice (+ shared labels). */
+    strings: DocumentCaptureStrings;
+    /**
+     * `documentCapture.nextPage.mandatory` — the next page is required, so the
+     * "All pages captured" escape link is dropped and the subtitle changes.
+     * Default (`false`) is the `.optional` section.
+     */
+    mandatory?: boolean;
+    /** Replace the module's document illustration. */
+    illustration?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Document Capture — next document page, built on the `PrizmaTutorialScreen`
+ * archetype (GUIDELINES.md §6-A). Figma: purple sections
+ * `documentCapture.nextPage.optional` / `.mandatory` — a copy + link-slot pair of
+ * this ONE screen.
+ *
+ * Structurally the tutorial recipe (measured identical on the 390 sections:
+ * nav 8→52, Title 68→145, illustration container flexes, CTAs 472→646), which is
+ * exactly why it now renders the same archetype instead of a second copy of it.
+ * Only `.optional` shows the escape link.
+ */
+export declare const DocumentCaptureNextPageScreen: React.ForwardRefExoticComponent<DocumentCaptureNextPageScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DocumentCaptureNextPageScreen;

package/dist/DocumentCaptureNextPageScreen.js

@@ -0,0 +1,28 @@
+'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';
+/**
+ * Document Capture — next document page, built on the `PrizmaTutorialScreen`
+ * archetype (GUIDELINES.md §6-A). Figma: purple sections
+ * `documentCapture.nextPage.optional` / `.mandatory` — a copy + link-slot pair of
+ * this ONE screen.
+ *
+ * Structurally the tutorial recipe (measured identical on the 390 sections:
+ * nav 8→52, Title 68→145, illustration container flexes, CTAs 472→646), which is
+ * exactly why it now renders the same archetype instead of a second copy of it.
+ * Only `.optional` shows the escape link.
+ */
+export const DocumentCaptureNextPageScreen = forwardRef(({ strings, mandatory = false, illustration, screenId = mandatory
+    ? 'document-capture-next-page-mandatory'
+    : 'document-capture-next-page', overrides, onAction, ...shell }, ref) => {
+    // Figma: `.mandatory` has no escape link (every remaining page is required).
+    // Gated here too, so a host that keeps the label in its locale pack still
+    // renders the designed mandatory screen.
+    const doneLabel = mandatory ? undefined : strings.nextPage.doneLabel;
+    return (_jsx(PrizmaTutorialScreen, { ref: ref, title: strings.nextPage.title, subtitle: mandatory ? strings.nextPage.mandatorySubtitle : strings.nextPage.subtitle, ctaLabel: strings.nextPage.ctaLabel, linkLabel: doneLabel, illustration: illustration ?? _jsx(DocumentCaptureIllustration, {}), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+});
+DocumentCaptureNextPageScreen.displayName = 'DocumentCaptureNextPageScreen';
+export default DocumentCaptureNextPageScreen;

package/dist/DocumentCaptureNoConnectionScreen.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DocumentCaptureStrings } from './DocumentCaptureStrings';
+import './ScreenLayout.css';
+export interface DocumentCaptureNoConnectionScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `noConnection` slice. */
+    strings: DocumentCaptureStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Document Capture — no internet connection (purple section
+ * `documentCapture.errors.noConnection`), built on the `PrizmaResultScreen`
+ * archetype (GUIDELINES.md §6-F).
+ *
+ * Byte-for-byte the same spec the Face Capture pilot found in its own
+ * `genericErrors` family, which is exactly what DEVIATIONS.md #9 predicted — and
+ * exactly why all three module copies of it are now one archetype call. Header
+ * and verified tag are on per the owner's non-capture rule (#F-30).
+ *
+ * The glyph is Figma's `Icon / Wi-Fi` in the archetype's `glyph` slot with the
+ * foundation's `__glyph` class, which replaced this module's byte-identical
+ * `.document-capture-glyph` copy (DEVIATIONS #10, #DC-29 — closed).
+ */
+export declare const DocumentCaptureNoConnectionScreen: React.ForwardRefExoticComponent<DocumentCaptureNoConnectionScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DocumentCaptureNoConnectionScreen;

package/dist/DocumentCaptureNoConnectionScreen.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconWifiOff } from '@incodetech/prizma-core-icons';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * Document Capture — no internet connection (purple section
+ * `documentCapture.errors.noConnection`), built on the `PrizmaResultScreen`
+ * archetype (GUIDELINES.md §6-F).
+ *
+ * Byte-for-byte the same spec the Face Capture pilot found in its own
+ * `genericErrors` family, which is exactly what DEVIATIONS.md #9 predicted — and
+ * exactly why all three module copies of it are now one archetype call. Header
+ * and verified tag are on per the owner's non-capture rule (#F-30).
+ *
+ * The glyph is Figma's `Icon / Wi-Fi` in the archetype's `glyph` slot with the
+ * foundation's `__glyph` class, which replaced this module's byte-identical
+ * `.document-capture-glyph` copy (DEVIATIONS #10, #DC-29 — closed).
+ */
+export const DocumentCaptureNoConnectionScreen = forwardRef(({ strings, screenId = 'document-capture-no-connection', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, glyph: _jsx("span", { className: [
+            'prizma-screen-layout__glyph',
+            'prizma-screen-layout__glyph--negative',
+            overrides?.align === 'left' ? 'prizma-screen-layout__glyph--left' : '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: _jsx(IconWifiOff, { size: "l" }) }), title: strings.noConnection.title, subtitle: strings.noConnection.description, ctaLabel: strings.noConnection.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+DocumentCaptureNoConnectionScreen.displayName = 'DocumentCaptureNoConnectionScreen';
+export default DocumentCaptureNoConnectionScreen;