@incodetech/prizma-core-screens 0.1.0

package/dist/IdCaptureResultScreen.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaIdCapture, } from '@incodetech/prizma-core-web/id-capture';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+import './IdCaptureLayout.css';
+/** Verdict → the archetype's status slot (Core `PrizmaTitle` icon). */
+const TITLE_STATUS = {
+    review: 'none',
+    success: 'success',
+    error: 'error',
+    exhausted: 'error',
+    classification: 'warning',
+};
+/**
+ * Verdict → Core `PrizmaIdCapture` frame border.
+ *
+ * `classification` is the one place Figma asks for something Core does not
+ * draw: an AMBER frame around the still. Core's `BORDER_GROUP` has exactly
+ * four treatments (enabled / focused / success / error) and no warning band, so
+ * the design system wins and the still keeps the neutral `filled` frame rather
+ * than borrowing the red one — a red border would tell the user the capture
+ * failed, which is the opposite of "we got it, we just need the other side".
+ * DEVIATIONS.md #IDC-22.
+ */
+const FRAME_STATE = {
+    review: 'filled',
+    success: 'success',
+    error: 'error',
+    exhausted: 'error',
+    classification: 'filled',
+};
+/**
+ * ID Capture — the captured-document verdict screens, built on the
+ * `PrizmaResultScreen` archetype (GUIDELINES.md §6-F).
+ *
+ * ONE screen for every `*-review`, `*-success`, `*-attempt`,
+ * `*-failed-attempt` and `*-no-attempts` section across all five capture groups,
+ * plus the Classification Errors section — ~35 purple sections that are copy,
+ * status-icon, frame-state and CTA variants of a single layout.
+ *
+ * The captured still rides in the archetype's `children` slot, the attempts line
+ * in `disclaimer`, and the review/classification action pair in
+ * `secondaryCtaLabel`. This file used to hand-build the whole shell (198 lines)
+ * with its own three-band arithmetic in `IdCaptureLayout.css`; the archetype now
+ * owns every offset, with two measured consequences logged as #F-33: the title
+ * block sits Spacing/16 above the frame rather than the module's Spacing/40, and
+ * review's Retake+Continue pair stacks vertically instead of sitting side by side
+ * (the archetype has one CTA orientation).
+ *
+ * `showHeader={false}` keeps the family's chrome as Figma draws it — no logo —
+ * while still reserving the nav row, so the offsets are identical to every other
+ * screen (owner rule 2026-08-18).
+ *
+ * Everything visual belongs to Core: the status marks are `PrizmaTitle`'s icon
+ * slot (outline bank icons — the module Figma still draws the two-tone filled
+ * discs, DEVIATIONS.md #15 again), and the frame and its border are
+ * `PrizmaIdCapture`.
+ */
+export const IdCaptureResultScreen = forwardRef(({ strings, verdict = 'success', documentType = 'id', vertical = false, still, screenId = `id-capture-${verdict}`, showHeader = false, className, overrides, onAction, ...shell }, ref) => {
+    const copy = verdict === 'review'
+        ? strings.review
+        : verdict === 'success'
+            ? strings.success
+            : verdict === 'classification'
+                ? strings.classification
+                : strings.error;
+    // Figma: the `*-attempt` / `*-failed-attempt` sections carry "N attempts
+    // remaining"; `*-no-attempts` swaps it for "No attempts remaining" and the
+    // CTA becomes the forward action. Both come from the same `error` slice, so
+    // the host's locale pack decides the wording; the screen only decides
+    // whether the line is rendered at all (review / success / classification
+    // have no attempts line in any purple section).
+    const attemptsLabel = verdict === 'error' || verdict === 'exhausted' ? strings.error.attemptsLabel : undefined;
+    const secondaryLabel = verdict === 'review'
+        ? strings.review.retakeLabel
+        : verdict === 'classification'
+            ? strings.classification.secondaryLabel
+            : undefined;
+    return (_jsx(PrizmaResultScreen, { ref: ref, 
+        /* `id-capture-on-surface` re-inks Core's encrypted row for the LIGHT
+           result surface (DEVIATIONS #IDC-28); it carries no layout. */
+        className: ['id-capture-on-surface', className ?? ''].filter(Boolean).join(' '), showHeader: showHeader, status: TITLE_STATUS[verdict], title: copy.title, subtitle: copy.description, disclaimer: attemptsLabel, ctaLabel: copy.ctaLabel, secondaryCtaLabel: secondaryLabel, 
+        // Figma pairs Retake | Continue side by side in the 342 column (IDC-35).
+        ctaOrientation: secondaryLabel ? 'row' : 'stacked', verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaIdCapture, { type: documentType, state: FRAME_STATE[verdict], isVertical: vertical, mode: "overlay", encryptedLabel: strings.encryptedLabel, still: still }) }));
+});
+IdCaptureResultScreen.displayName = 'IdCaptureResultScreen';
+export default IdCaptureResultScreen;

package/dist/IdCaptureStageScreen.d.ts

@@ -0,0 +1,69 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { IdCaptureDocumentType, IdCaptureFeedbackKind, IdCaptureSide, IdCaptureStageState, IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+import './ViewfinderScreen.css';
+import './IdCaptureLayout.css';
+export interface IdCaptureStageScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+    /** Module copy — this screen reads the `stage` / `feedback` slices. */
+    strings: IdCaptureStrings;
+    /** Which document is being captured — Core `PrizmaIdCapture.type`. */
+    documentType?: IdCaptureDocumentType;
+    /** Which face of a two-sided document (drives the title copy only; the frame
+     *  geometry is identical). Passports are single-sided. */
+    side?: IdCaptureSide;
+    /** Portrait document orientation — Core `PrizmaIdCapture.isVertical`. The
+     *  `ID capture ↕️ vertical` / `Passport capture ↕️ vertical` groups. */
+    vertical?: boolean;
+    /** Which purple stage section to render. */
+    state?: IdCaptureStageState;
+    /** Manual mode (`*-manual`): the shutter + the numbered tooltip appear. */
+    manual?: boolean;
+    /** Show the close control in the stage nav (Figma: present on every stage
+     *  except `*-empty`). */
+    showClose?: boolean;
+    /** Override the feedback pill the state carries by default; `null` suppresses
+     *  it (a host whose pipeline reports an error with no designed pill). */
+    feedback?: IdCaptureFeedbackKind | null;
+    /** Live camera feed (<video>) or sample still (<img>) behind the frame. */
+    camera?: ReactNode;
+    /** The captured document still (<img>) — `filled` / `flash` / error stages. */
+    still?: ReactNode;
+    /** Digit shown by the countdown Timer (`*-countdown` sections 1..3). */
+    countdownValue?: 1 | 2 | 3;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * ID Capture — the camera stage (Archetype D, GUIDELINES.md §6-D; always dark).
+ *
+ * ONE screen for ~45 purple sections: every `*-empty`, `*-hint`, `*-manual`,
+ * `*-filled`, `*-countdown`, `*-flash` and `*-errors` section of all five
+ * capture groups (`ID capture - front side`, `ID capture - back side`,
+ * `Passport capture`, `ID capture ↕️ vertical`, `Passport capture ↕️ vertical`).
+ * They are `type` × `isVertical` × `state` variants of Core's
+ * `PrizmaIdCapture`, which is exactly how the component is axed — so the frame
+ * geometry, the four border treatments, the hand-hint artwork, the Timer, the
+ * flash bloom, the glare/darkener/not-aligned overlays and the "All data is
+ * encrypted" row are ALL Core's, never re-implemented (§7).
+ *
+ * NOT built on the `PrizmaViewfinderScreen` archetype: that archetype hardcodes
+ * `CaptureOverlay` (the face/document vignette) plus its own lock-and-encrypted
+ * row, and ID Capture's stage is `PrizmaIdCapture` — which carries the document
+ * geometry AND the encrypted row itself. Wrapping the archetype would have
+ * double-drawn the reassurance line. Foundation gap reported to the owner (a
+ * `stage` slot on ViewfinderScreen); no foundation file edited. The archetype's
+ * camera-surface and HUD-typography classes ARE reused as-is
+ * (`.prizma-viewfinder__surface` / `__content` / `__title` / `__instruction`),
+ * so nothing about the dark stage is re-declared here.
+ *
+ * Spacing comes from the measured three-band recipe in `IdCaptureLayout.css`
+ * (title block bottom-anchored Spacing/40 above the frame, manual strip flush
+ * to the column's bottom padding) — no offsets are invented here, and
+ * PrizmaIdCapture's own frame→encrypted-row adjacency is left untouched
+ * (DEVIATIONS.md #12's lesson: never stack an offset a Core component carries).
+ */
+export declare const IdCaptureStageScreen: React.ForwardRefExoticComponent<IdCaptureStageScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default IdCaptureStageScreen;

package/dist/IdCaptureStageScreen.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaNavigation } from '@incodetech/prizma-core-web/navigation';
+import { PrizmaIdCapture, } from '@incodetech/prizma-core-web/id-capture';
+import { PrizmaCaptureManual } from '@incodetech/prizma-core-web/capture-manual';
+import { PrizmaCaptureFeedback } from '@incodetech/prizma-core-web/capture-feedback';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell } from './ScreenShell';
+import './ScreenLayout.css';
+import './ViewfinderScreen.css';
+import './IdCaptureLayout.css';
+/**
+ * Purple stage state → Core `PrizmaIdCapture` state. The mapping is 1:1 except
+ * `flash`, which Figma spells "flash" and Core spells `photo-flash`.
+ */
+const CAPTURE_STATE = {
+    empty: 'empty',
+    hint: 'hint',
+    filled: 'filled',
+    focused: 'focused',
+    countdown: 'countdown',
+    flash: 'photo-flash',
+    'error-wrong-side': 'error-wrong-side',
+    'error-not-aligned': 'error-not-aligned',
+    'error-blurry': 'error',
+    'error-glare': 'error-glare',
+    'error-too-dark': 'error-too-dark',
+};
+/**
+ * Which feedback pill each error stage carries by default (Figma
+ * `1-5-5 … 1-5-9-id-errors`, left to right). `blurry` has no frame overlay in
+ * Core — the message IS the pill (PrizmaIdCapture's `error` state is the plain
+ * red border precisely for this case, see its `error` doc comment).
+ */
+const STAGE_FEEDBACK = {
+    'error-wrong-side': 'show-front',
+    'error-not-aligned': 'not-aligned',
+    'error-blurry': 'blurry',
+    'error-glare': 'glare',
+    'error-too-dark': 'too-dark',
+};
+/**
+ * ID Capture — the camera stage (Archetype D, GUIDELINES.md §6-D; always dark).
+ *
+ * ONE screen for ~45 purple sections: every `*-empty`, `*-hint`, `*-manual`,
+ * `*-filled`, `*-countdown`, `*-flash` and `*-errors` section of all five
+ * capture groups (`ID capture - front side`, `ID capture - back side`,
+ * `Passport capture`, `ID capture ↕️ vertical`, `Passport capture ↕️ vertical`).
+ * They are `type` × `isVertical` × `state` variants of Core's
+ * `PrizmaIdCapture`, which is exactly how the component is axed — so the frame
+ * geometry, the four border treatments, the hand-hint artwork, the Timer, the
+ * flash bloom, the glare/darkener/not-aligned overlays and the "All data is
+ * encrypted" row are ALL Core's, never re-implemented (§7).
+ *
+ * NOT built on the `PrizmaViewfinderScreen` archetype: that archetype hardcodes
+ * `CaptureOverlay` (the face/document vignette) plus its own lock-and-encrypted
+ * row, and ID Capture's stage is `PrizmaIdCapture` — which carries the document
+ * geometry AND the encrypted row itself. Wrapping the archetype would have
+ * double-drawn the reassurance line. Foundation gap reported to the owner (a
+ * `stage` slot on ViewfinderScreen); no foundation file edited. The archetype's
+ * camera-surface and HUD-typography classes ARE reused as-is
+ * (`.prizma-viewfinder__surface` / `__content` / `__title` / `__instruction`),
+ * so nothing about the dark stage is re-declared here.
+ *
+ * Spacing comes from the measured three-band recipe in `IdCaptureLayout.css`
+ * (title block bottom-anchored Spacing/40 above the frame, manual strip flush
+ * to the column's bottom padding) — no offsets are invented here, and
+ * PrizmaIdCapture's own frame→encrypted-row adjacency is left untouched
+ * (DEVIATIONS.md #12's lesson: never stack an offset a Core component carries).
+ */
+export const IdCaptureStageScreen = forwardRef(({ strings, documentType = 'id', side = 'front', vertical = false, state = 'empty', manual = false, showClose = state !== 'empty', feedback, camera, still, countdownValue = 3, screenId = `id-capture-${documentType}-${side}-${state}`, overrides, onAction, className, ...shell }, ref) => {
+    const slice = documentType === 'passport'
+        ? strings.stage.passport
+        : side === 'back'
+            ? strings.stage.back
+            : strings.stage.front;
+    const pillKind = feedback === undefined ? STAGE_FEEDBACK[state] : feedback;
+    const pillCopy = pillKind ? strings.feedback[pillKind] : undefined;
+    return (_jsxs(PrizmaScreenShell, { ref: ref, dark: true, className: className, ...shell, children: [_jsx("div", { className: "prizma-viewfinder__surface", children: camera }), _jsx("header", { className: "prizma-screen-nav id-capture-stage__nav", children: _jsx(PrizmaNavigation, { showIncodeLogo: false, showRightIcon: showClose, closeLabel: strings.closeLabel, "aria-label": strings.navLabel, onRightIconClick: () => onAction?.({ type: 'secondary', screenId }) }) }), _jsxs("div", { className: [
+                    'prizma-viewfinder__content',
+                    overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: [_jsx("div", { className: "id-capture-band id-capture-band--top", children: pillKind && pillCopy ? (_jsx("div", { className: "id-capture-stage__feedback", children: _jsx(PrizmaCaptureFeedback, { feedback: pillKind, title: pillCopy.title, subtitle: pillCopy.subtitle }) })) : (_jsxs(_Fragment, { children: [_jsx("h2", { className: "prizma-viewfinder__title", children: slice.title }), slice.instruction && !manual ? (_jsx("p", { className: "prizma-viewfinder__instruction", children: slice.instruction })) : null] })) }), _jsx(PrizmaIdCapture, { type: documentType, state: CAPTURE_STATE[state], isVertical: vertical, mode: "overlay", scrim: true, countdownValue: countdownValue, encryptedLabel: strings.encryptedLabel, announcement: strings.stage.stateLabels?.[state], still: still }), _jsx("div", { className: "id-capture-band" })] }), _jsx("div", { className: "prizma-screen-layout__capture-strip", children: _jsx(PrizmaCaptureManual, { className: "id-capture-stage__manual", variant: "id-capture", showButton: manual, showTooltip: manual, showHelpIcon: true, tooltipText: manual ? strings.stage.manualTooltip : undefined, ariaLabel: strings.stage.captureLabel, helpLabel: strings.stage.helpLabel, onCapture: () => onAction?.({ type: 'cta', screenId }), onHelp: () => onAction?.({ type: 'help', screenId }) }) }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
+});
+IdCaptureStageScreen.displayName = 'IdCaptureStageScreen';
+export default IdCaptureStageScreen;

package/dist/IdCaptureStrings.d.ts

@@ -0,0 +1,199 @@
+/** Which document the flow is capturing — Core `PrizmaIdCapture.type` minus
+ *  `poa` (that belongs to the Document Capture module, not this one). */
+export type IdCaptureDocumentType = 'id' | 'passport';
+/** Which face of a two-sided document. Passports are single-sided, so `back`
+ *  is only reachable for `id` (Figma: the `Passport capture` groups have no
+ *  back-side sections). */
+export type IdCaptureSide = 'front' | 'back';
+/**
+ * The camera-stage sub-states — one per purple `*-empty` / `*-hint` /
+ * `*-manual` / `*-filled` / `*-countdown` / `*-flash` / `*-errors` spec
+ * section. They are state/copy variants of ONE screen
+ * (IdCaptureStageScreen), not separate screens; each maps to a
+ * `PrizmaIdCaptureState`.
+ */
+export type IdCaptureStageState = 'empty' | 'hint' | 'filled' | 'focused' | 'countdown' | 'flash' | 'error-wrong-side' | 'error-not-aligned' | 'error-blurry' | 'error-glare' | 'error-too-dark';
+/** The on-camera feedback pill variants the error stages carry — Core
+ *  `PrizmaCaptureFeedbackType` (Figma: `Capture feedback / ID`, and the
+ *  `Dynamic feedback messages` copy table in the front-side group). */
+export type IdCaptureFeedbackKind = 'show-front' | 'show-back' | 'not-aligned' | 'blurry' | 'glare' | 'too-dark';
+/** One feedback pill's copy. */
+export interface IdCaptureFeedbackCopy {
+    title: string;
+    subtitle?: string;
+}
+/** A single row of an informational list (permission reasons, common issues,
+ *  age-verification steps) — Core `PrizmaCardListCommonIssues` rows. */
+export interface IdCaptureListRow {
+    title: string;
+    description?: string;
+}
+export interface IdCaptureStrings {
+    /** Accessible name for the logo nav region (i18n — no baked-in English). */
+    navLabel?: string;
+    /** Accessible name for the close control on the camera stages. */
+    closeLabel?: string;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    /** "All data is encrypted" reassurance row — rendered by PrizmaIdCapture
+     *  itself on every stage and every screen that shows the captured still. */
+    encryptedLabel?: string;
+    /** Document selection — `1-1-1-id` / `1-1-1-Document Chooser V2`. */
+    documentSelection: {
+        title: string;
+        subtitle?: string;
+        /** Row label for the identity-card option. */
+        idLabel: string;
+        /** Row label for the passport option. */
+        passportLabel: string;
+    };
+    /** Age verification — `1-1-2-id`. */
+    ageVerification: {
+        title: string;
+        subtitle?: string;
+        /** The three reassurance rows, in order. */
+        rows: IdCaptureListRow[];
+        ctaLabel: string;
+    };
+    /** Tutorial — `1-2-1-id` (front) · `4-2-1-back-id` (back) · `3-2-1-id`
+     *  (passport). Copy variants of one screen; the host picks the slice. */
+    tutorial: {
+        front: {
+            title: string;
+            subtitle?: string;
+        };
+        back: {
+            title: string;
+            subtitle?: string;
+        };
+        passport: {
+            title: string;
+            subtitle?: string;
+        };
+        /** "The photo will be taken automatically" */
+        disclaimer?: string;
+        ctaLabel: string;
+        /** Visible/accessible copy while the CTA is loading. */
+        ctaLoadingLabel?: string;
+    };
+    /** Camera stage — `*-empty` / `*-hint` / `*-filled` / `*-countdown` /
+     *  `*-flash` / `*-manual` / `*-errors`. The white H2 above the frame plus
+     *  its muted instruction line, per side/document. */
+    stage: {
+        front: {
+            title: string;
+            instruction?: string;
+        };
+        back: {
+            title: string;
+            instruction?: string;
+        };
+        passport: {
+            title: string;
+            instruction?: string;
+        };
+        /** Manual mode — the tooltip bubble above the shutter
+         *  ("1. Fill the frame with your ID / 2. Press the button"). */
+        manualTooltip?: string;
+        /** Accessible name of the shutter button (manual mode). */
+        captureLabel?: string;
+        /** Accessible name of the "?" help control. */
+        helpLabel?: string;
+        /** Visually-hidden state announcements, per stage state — forwarded to
+         *  `PrizmaIdCapture.stateLabels`. */
+        stateLabels?: Partial<Record<IdCaptureStageState, string>>;
+    };
+    /** The on-camera feedback pills the error stages carry. */
+    feedback: Partial<Record<IdCaptureFeedbackKind, IdCaptureFeedbackCopy>>;
+    /** Analyzing / processing the captured still — `*-analyzing`. */
+    analyzing: {
+        title: string;
+    };
+    /** Review the captured still — `*-review`. Two actions, no status icon. */
+    review: {
+        title: string;
+        description?: string;
+        /** Secondary action — "Retake". */
+        retakeLabel: string;
+        /** Primary action — "Continue". */
+        ctaLabel: string;
+    };
+    /** Capture succeeded — `*-success` / `1-10-2-id-success-capture-only`. */
+    success: {
+        title: string;
+        description?: string;
+        ctaLabel: string;
+    };
+    /** Capture failed with retries left / exhausted — `*-attempt`,
+     *  `*-failed-attempt`, `*-no-attempts`. The host passes the copy of the
+     *  CURRENT verdict (wrong side, glare, blur, …). */
+    error: {
+        title: string;
+        description?: string;
+        /** "1 attempt remaining" — omit on the exhausted variant. */
+        attemptsLabel?: string;
+        ctaLabel: string;
+    };
+    /** Classification could not decide the document — Classification Errors /
+     *  "Scan the back of your ID". Warning verdict with two actions. */
+    classification: {
+        title: string;
+        description?: string;
+        /** Primary — "Scan back of ID". */
+        ctaLabel: string;
+        /** Secondary — "ID has no back side". */
+        secondaryLabel: string;
+    };
+    /** Document not accepted — `1-9-12` / `1-9-13-id-documenterror` and the
+     *  `-empty` variant. */
+    documentError: {
+        title: string;
+        description?: string;
+        /** ISO country code for the bundled flag raster (e.g. "US"). */
+        countryCode?: string;
+        /** Emoji fallback for countries outside the bundled flag bank. */
+        flag?: string;
+        /** Country name shown in the accepted-documents card. */
+        country?: string;
+        /** Accepted document names, in order. */
+        documents?: string[];
+        /** Placeholder copy for the `-empty` variant (no list available). */
+        emptyMessage?: string;
+        attemptsLabel?: string;
+        ctaLabel: string;
+    };
+    /** Flip interstitial — `1-11-1-id-flip`. Title only, no CTA. */
+    flip: {
+        title: string;
+    };
+    /** Common issues help sheet — `1-5-2-id-common-issues`. */
+    commonIssues: {
+        title: string;
+        rows: IdCaptureListRow[];
+        /** Tertiary link — "Take the photo manually". */
+        manualLabel: string;
+        ctaLabel: string;
+    };
+    /** Camera permission — `1-3-2-id` and its `allow-camera` /
+     *  `quit-process` copy variants. */
+    permission: {
+        title: string;
+        description?: string;
+        rows: IdCaptureListRow[];
+        /** Tertiary link — "Quit process". */
+        quitLabel: string;
+        ctaLabel: string;
+    };
+    /** Server-side verification wait — `1-18-1-id-hold-on`,
+     *  `1-4.1-1-id-hold-on`. */
+    holdOn: {
+        title: string;
+        description?: string;
+    };
+    /** No internet — `1-9-10-id-no-internet`. */
+    noConnection: {
+        title: string;
+        description?: string;
+        ctaLabel: string;
+    };
+}

package/dist/IdCaptureStrings.js

@@ -0,0 +1,15 @@
+// ID Capture module — copy contract.
+//
+// Every ID Capture screen receives the SAME `strings: IdCaptureStrings` object
+// (rule: all copy via props, no hardcoded English — GUIDELINES.md §9). The
+// object is the module's locale pack: one instance drives the whole flow, which
+// is what the FlowPlayer steps through. Sample copy lives only in previews /
+// host apps.
+//
+// Authoritative screen list: the PURPLE "screen specs" sections of the ID
+// Capture Figma file (U1EOfl9RQ1rOlOIuQw3rhL, page 16285:41282) — 13 parent
+// groups, 100 purple sections. They collapse onto 12 screens because the four
+// capture families (ID horizontal / ID vertical / passport horizontal /
+// passport vertical, front and back) are the SAME screens parameterized by
+// `PrizmaIdCapture`'s own `type` × `isVertical` × `state` axes.
+export {};

package/dist/IdCaptureTutorialScreen.d.ts

@@ -0,0 +1,36 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaTutorialScreenProps } from './TutorialScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+/** Which purple tutorial section to render. Each is a copy + illustration
+ *  variant of this ONE screen: `1-2-1-id` (front) · `4-2-1-back-id` (back) ·
+ *  `3-2-1-id` (passport). */
+export type IdCaptureTutorialVariant = 'front' | 'back' | 'passport';
+export interface IdCaptureTutorialScreenProps extends Omit<PrizmaTutorialScreenProps, 'title' | 'subtitle' | 'disclaimer' | 'ctaLabel' | 'ctaLoadingLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `tutorial` slice (+ shared labels). */
+    strings: IdCaptureStrings;
+    /** Which purple tutorial section to render. Default `front`. */
+    variant?: IdCaptureTutorialVariant;
+    /** CTA shows the designed loading treatment (the tutorial's loading state). */
+    ctaLoading?: boolean;
+    /** Replace the default Core ID-tutorial illustration. */
+    illustration?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * ID Capture — tutorial, built on the `PrizmaTutorialScreen` archetype
+ * (GUIDELINES.md §6-A). Figma: purple sections `1-2-1-id` / `4-2-1-back-id` /
+ * `3-2-1-id` of the `Tutorial` group.
+ *
+ * Composed from the foundation pieces until the archetype grew a CTA-loading
+ * slot (#F-32) — the one thing that had forced this module, like the Face Capture
+ * pilot, to rebuild the tutorial skeleton by hand.
+ *
+ * The three illustrations are Core's `PrizmaIllustrationIdTutorial` variants,
+ * including the composed `id-back` face — never redrawn here (§7, §10).
+ */
+export declare const IdCaptureTutorialScreen: React.ForwardRefExoticComponent<IdCaptureTutorialScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default IdCaptureTutorialScreen;

package/dist/IdCaptureTutorialScreen.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaIllustrationIdTutorial } from '@incodetech/prizma-core-web/illustration-id-tutorial';
+import { PrizmaTutorialScreen } from './TutorialScreen';
+import './ScreenLayout.css';
+/** Tutorial variant → Core `PrizmaIllustrationIdTutorial` type. */
+const ILLUSTRATION_TYPE = {
+    front: 'id-front',
+    back: 'id-back',
+    passport: 'passport',
+};
+/**
+ * ID Capture — tutorial, built on the `PrizmaTutorialScreen` archetype
+ * (GUIDELINES.md §6-A). Figma: purple sections `1-2-1-id` / `4-2-1-back-id` /
+ * `3-2-1-id` of the `Tutorial` group.
+ *
+ * Composed from the foundation pieces until the archetype grew a CTA-loading
+ * slot (#F-32) — the one thing that had forced this module, like the Face Capture
+ * pilot, to rebuild the tutorial skeleton by hand.
+ *
+ * The three illustrations are Core's `PrizmaIllustrationIdTutorial` variants,
+ * including the composed `id-back` face — never redrawn here (§7, §10).
+ */
+export const IdCaptureTutorialScreen = forwardRef(({ strings, variant = 'front', ctaLoading = false, illustration, screenId = `id-capture-tutorial-${variant}`, overrides, onAction, ...shell }, ref) => {
+    const slice = strings.tutorial[variant];
+    return (_jsx(PrizmaTutorialScreen, { ref: ref, title: slice.title, subtitle: slice.subtitle, disclaimer: strings.tutorial.disclaimer, ctaLabel: strings.tutorial.ctaLabel, ctaLoading: ctaLoading, ctaLoadingLabel: strings.tutorial.ctaLoadingLabel, illustration: illustration ?? _jsx(PrizmaIllustrationIdTutorial, { type: ILLUSTRATION_TYPE[variant] }), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+});
+IdCaptureTutorialScreen.displayName = 'IdCaptureTutorialScreen';
+export default IdCaptureTutorialScreen;

package/dist/ListScreen.d.ts

@@ -0,0 +1,95 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenChromeProps, PrizmaScreenOverrides } from './types';
+import './ScreenLayout.css';
+/** Same vocabulary as `PrizmaResultScreen`: `loading` renders Core's spinner
+ *  slot, the verdicts render its status mark, `none` shows the title alone. */
+export type PrizmaListStatus = 'loading' | 'success' | 'error' | 'warning' | 'none';
+export interface PrizmaListScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'>, PrizmaScreenChromeProps {
+    /** The status mark above the title. `none` (default) renders the title alone. */
+    status?: PrizmaListStatus;
+    /**
+     * 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 screen title ("Common issues", "Camera permission is required"). */
+    title: string;
+    /** Supporting copy below the title (H5). */
+    subtitle?: string;
+    /**
+     * A non-status glyph ABOVE the title — Core's `PrizmaTitle.icon` allowlist is
+     * `status | spinner | none`, so anything else (the question mark on ID
+     * Capture's common issues) is composed here. Wrap it in
+     * `prizma-screen-layout__glyph` (+ `--neutral` / `--negative`); the slot's
+     * geometry and its Spacing/16 live in `ScreenLayout.css`. DEVIATIONS #10.
+     */
+    glyph?: ReactNode;
+    /**
+     * THE list — a Core `PrizmaCardListCommonIssues`,
+     * `PrizmaCardListVerificationOptions`, `PrizmaCardDocumentList`… It fills the
+     * middle between the title block and the CTA band; the archetype supplies the
+     * Spacing/24 below the title and nothing else, so the list keeps its own row
+     * rhythm.
+     */
+    children?: ReactNode;
+    /** Hang the list off the BOTTOM of the middle instead of the top — the
+     *  document chooser's option rows. Default `'start'`. */
+    listAlign?: 'start' | 'end';
+    /**
+     * Let the list PAN inside the column when the section draws a middle taller
+     * than the 844 frame — the archetype-G twin of `scrollFields` on E. The
+     * title, the CTA band and the anchored tag hold still while the rows scroll,
+     * instead of the surplus painting over them. DEVIATIONS #VS-12.
+     */
+    scrollList?: boolean;
+    /** 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 list screens whose rows ARE the actions (the
+     *  document chooser: Core makes each row a real `<button>`). */
+    ctaLabel?: string;
+    /** Secondary CTA (a second filled action) rendered ABOVE the primary. */
+    secondaryCtaLabel?: string;
+    /** Tertiary underlined LINK above the primary — "Take the photo manually"
+     *  (common issues) and "Quit process" (permission). Figma draws Core's
+     *  `tertiary-link` composite in the band's top slot. */
+    linkLabel?: string;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    navLabel?: string;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Archetype G — List.
+ *
+ * Nav (or reserved row) → optional glyph → title block → a Core card / option
+ * list filling the middle → CTA band → anchored footer tag.
+ *
+ * It exists because EIGHT screens hand-built it independently: ID Capture's
+ * common issues, permission, age verification and document chooser, Document
+ * Capture's common issues, and the document-error card lists. Each re-declared
+ * the title→list offset (24 on the ID screens, 32 on Document Capture's) and
+ * each inserted the verified tag by hand — which is how the tag ended up at 0 on
+ * some screens and 16 on others (DEVIATIONS #F-29, #F-31).
+ *
+ * CTA band order is the family's designed one: disclaimer → tertiary link →
+ * secondary → primary. The link sits ABOVE the primary here (Figma
+ * `tertiaryPosition="top"` on `1-5-2-id-common-issues` and `1-3-2-id`), which is
+ * the mirror of Archetype A, where it sits below. Stacked at the foundation's
+ * flat Spacing/16 (DEVIATIONS #8) — every offset comes from ScreenLayout.css and
+ * this file declares none of its own.
+ *
+ * Reach for `PrizmaResultScreen` instead when the middle is a centred verdict
+ * rather than a list.
+ */
+export declare const PrizmaListScreen: React.ForwardRefExoticComponent<PrizmaListScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PrizmaListScreen;