@incodetech/prizma-core-screens 0.1.0

package/dist/FaceCaptureLoadingScreen.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { type PrizmaCaptureScreenProps } from './CaptureScreen';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './FaceCaptureLayout.css';
+/** The two purple `faceCapture.loading.*` spec sections. Identical layout and
+ *  identical spinner — only the status copy differs, so they are copy variants
+ *  of ONE screen (same pattern as the 15 capturing states). */
+export type FaceCaptureLoadingStage = 'uploading' | 'processing';
+export interface FaceCaptureLoadingScreenProps extends Omit<PrizmaCaptureScreenProps, 'state' | 'camera' | 'title' | 'feedbackText' | 'statusLabels' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `uploading` / `processing` slices. */
+    strings: FaceCaptureStrings;
+    /** Which purple `faceCapture.loading.*` spec section to render. */
+    stage?: FaceCaptureLoadingStage;
+}
+/**
+ * Face Capture — upload / processing (Archetype B, GUIDELINES.md §6-B).
+ * Figma: purple sections faceCapture.loading.uploading / .processing.
+ *
+ * NOT the Processing archetype (§6-C). Both purple sections put the spinner +
+ * status line inside the SAME 342-tall "Middle Content" box the capture ring
+ * occupies — 40px below the nav, measured at y=84 of the 390 CONTENT frame —
+ * whereas §6-C centers in all remaining space (51px lower). Core models this
+ * as the `uploading` state of `PrizmaSelfieCapture`, where the stage dissolves
+ * into the canonical `PrizmaLoadingSpinner` in the ring's own slot (owner
+ * choreography 2026-07-15). Design system wins — DEVIATIONS.md #11.
+ *
+ * So the ring stage stays, un-re-implemented, and only its state changes.
+ * The Core component owns the ring spacing; the archetype adds none
+ * (DEVIATIONS.md #12).
+ */
+export declare const FaceCaptureLoadingScreen: React.ForwardRefExoticComponent<FaceCaptureLoadingScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FaceCaptureLoadingScreen;

package/dist/FaceCaptureLoadingScreen.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaCaptureScreen } from './CaptureScreen';
+import './FaceCaptureLayout.css';
+/**
+ * Face Capture — upload / processing (Archetype B, GUIDELINES.md §6-B).
+ * Figma: purple sections faceCapture.loading.uploading / .processing.
+ *
+ * NOT the Processing archetype (§6-C). Both purple sections put the spinner +
+ * status line inside the SAME 342-tall "Middle Content" box the capture ring
+ * occupies — 40px below the nav, measured at y=84 of the 390 CONTENT frame —
+ * whereas §6-C centers in all remaining space (51px lower). Core models this
+ * as the `uploading` state of `PrizmaSelfieCapture`, where the stage dissolves
+ * into the canonical `PrizmaLoadingSpinner` in the ring's own slot (owner
+ * choreography 2026-07-15). Design system wins — DEVIATIONS.md #11.
+ *
+ * So the ring stage stays, un-re-implemented, and only its state changes.
+ * The Core component owns the ring spacing; the archetype adds none
+ * (DEVIATIONS.md #12).
+ */
+export const FaceCaptureLoadingScreen = forwardRef(({ strings, stage = 'uploading', screenId = `face-capture-${stage}`, className, ...rest }, ref) => (_jsx(PrizmaCaptureScreen
+// uploading / processing: the feed is closed — not a capture screen (owner rule 2026-08-18).
+, { 
+    // uploading / processing: the feed is closed — not a capture screen (owner rule 2026-08-18).
+    cameraOpen: false, ref: ref, className: className, state: "uploading", statusLabels: {
+        uploading: stage === 'processing' ? strings.processing.title : strings.uploading.title,
+    }, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, ...rest })));
+FaceCaptureLoadingScreen.displayName = 'FaceCaptureLoadingScreen';
+export default FaceCaptureLoadingScreen;

package/dist/FaceCaptureManualCaptureScreen.d.ts

@@ -0,0 +1,32 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenChromeProps, PrizmaScreenOverrides } from './types';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './ScreenLayout.css';
+import './FaceCaptureLayout.css';
+export interface FaceCaptureManualCaptureScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'>, PrizmaScreenChromeProps {
+    /** Module copy — this screen reads the `manualCapture` slice (+ shared labels). */
+    strings: FaceCaptureStrings;
+    /** Live camera feed (<video>) or sample still (<img>) for the ring window. */
+    camera?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Face Capture — manual capture (Archetype B layout, GUIDELINES.md §6-B).
+ * Figma: purple section faceCapture.manualCapture.default.
+ *
+ * Goes through Core's PrizmaSelfieCapture in manual mode (§7): the component
+ * owns ring, silhouette guide, instruction line, and shutter. Composed on the
+ * foundation shell directly because the CaptureScreen archetype does not
+ * forward `isManual` / `onCapture` — foundation gap reported to the owner, no
+ * foundation file edited. Layout classes are the archetype's own.
+ *
+ * Verified pixel-exact against Figma 3.1.0: the `Capture / Selfie` instance sits
+ * at nav-bottom + 0 with the ring at +40, the manual instruction at +32 below
+ * the ring and the 64px shutter at +32 below that — all of it the component's
+ * own padding/gap; the archetype adds none of its own (DEVIATIONS.md #12).
+ */
+export declare const FaceCaptureManualCaptureScreen: React.ForwardRefExoticComponent<FaceCaptureManualCaptureScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FaceCaptureManualCaptureScreen;

package/dist/FaceCaptureManualCaptureScreen.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaSelfieCapture } from '@incodetech/prizma-core-web/selfie-capture';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import './ScreenLayout.css';
+import './FaceCaptureLayout.css';
+/**
+ * Face Capture — manual capture (Archetype B layout, GUIDELINES.md §6-B).
+ * Figma: purple section faceCapture.manualCapture.default.
+ *
+ * Goes through Core's PrizmaSelfieCapture in manual mode (§7): the component
+ * owns ring, silhouette guide, instruction line, and shutter. Composed on the
+ * foundation shell directly because the CaptureScreen archetype does not
+ * forward `isManual` / `onCapture` — foundation gap reported to the owner, no
+ * foundation file edited. Layout classes are the archetype's own.
+ *
+ * Verified pixel-exact against Figma 3.1.0: the `Capture / Selfie` instance sits
+ * at nav-bottom + 0 with the ring at +40, the manual instruction at +32 below
+ * the ring and the 64px shutter at +32 below that — all of it the component's
+ * own padding/gap; the archetype adds none of its own (DEVIATIONS.md #12).
+ */
+export const FaceCaptureManualCaptureScreen = forwardRef(({ strings, camera, screenId = 'face-capture-manual-capture', showHeader, showFooter = true, overrides, onAction, className, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, theme: "light", className: className, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !(showHeader ?? Boolean(overrides?.logo)), logo: overrides?.logo, navLabel: strings.navLabel }), _jsxs("div", { className: "prizma-screen-layout__content prizma-screen-layout__content--capture", children: [_jsx(PrizmaSelfieCapture, { state: "empty", camera: camera, isManual: true, manualFeedbackText: strings.manualCapture.instruction, captureLabel: strings.manualCapture.captureLabel, onCapture: () => onAction?.({ type: 'cta', screenId }) }), showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer prizma-screen-layout__footer--pinned", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })) : null] })] })));
+FaceCaptureManualCaptureScreen.displayName = 'FaceCaptureManualCaptureScreen';
+export default FaceCaptureManualCaptureScreen;

package/dist/FaceCaptureNoConnectionScreen.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './ScreenLayout.css';
+export interface FaceCaptureNoConnectionScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `noConnection` slice. */
+    strings: FaceCaptureStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Face Capture — no internet connection (purple section
+ * `7.faceCapture.genericErrors.noConnection`), built on the
+ * `PrizmaResultScreen` archetype (GUIDELINES.md §6-F).
+ *
+ * Figma's CONTENT frame holds only a Title and a single CTA (measured 390
+ * section: Title 24→574, CTAs 574→630). The header and the verified tag are back
+ * on by the owner's rule that non-capture screens show both (DEVIATIONS #F-30);
+ * the layout is otherwise the archetype's own.
+ *
+ * The glyph is Figma's `Icon / Wi-Fi` swapped into the Title's icon slot. Core's
+ * `PrizmaTitle` allowlist is status | spinner | none, so it rides in the
+ * archetype's `glyph` slot with the foundation's `__glyph` class — icon from the
+ * canonical bank, no primitive invented, and no module CSS: the class was
+ * promoted out of three byte-identical module copies (DEVIATIONS #10, #DC-29).
+ */
+export declare const FaceCaptureNoConnectionScreen: React.ForwardRefExoticComponent<FaceCaptureNoConnectionScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FaceCaptureNoConnectionScreen;

package/dist/FaceCaptureNoConnectionScreen.js

@@ -0,0 +1,31 @@
+'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';
+/**
+ * Face Capture — no internet connection (purple section
+ * `7.faceCapture.genericErrors.noConnection`), built on the
+ * `PrizmaResultScreen` archetype (GUIDELINES.md §6-F).
+ *
+ * Figma's CONTENT frame holds only a Title and a single CTA (measured 390
+ * section: Title 24→574, CTAs 574→630). The header and the verified tag are back
+ * on by the owner's rule that non-capture screens show both (DEVIATIONS #F-30);
+ * the layout is otherwise the archetype's own.
+ *
+ * The glyph is Figma's `Icon / Wi-Fi` swapped into the Title's icon slot. Core's
+ * `PrizmaTitle` allowlist is status | spinner | none, so it rides in the
+ * archetype's `glyph` slot with the foundation's `__glyph` class — icon from the
+ * canonical bank, no primitive invented, and no module CSS: the class was
+ * promoted out of three byte-identical module copies (DEVIATIONS #10, #DC-29).
+ */
+export const FaceCaptureNoConnectionScreen = forwardRef(({ strings, screenId = 'face-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 })));
+FaceCaptureNoConnectionScreen.displayName = 'FaceCaptureNoConnectionScreen';
+export default FaceCaptureNoConnectionScreen;

package/dist/FaceCaptureResultErrorScreen.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './ScreenLayout.css';
+import './FaceCaptureLayout.css';
+export interface FaceCaptureResultErrorScreenProps 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 error (faceNotAligned, tooDark, …);
+     *  all 10 purple base sections share this one layout. */
+    strings: FaceCaptureStrings;
+    /**
+     * The `*Exhausted` half of the purple `faceCapture.resultError.*` pairs
+     * (9 of them — `eyesClosed` has no exhausted variant in Figma). 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 "Try again".
+     */
+    exhausted?: boolean;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Face Capture — error result (Archetype C-with-CTA, GUIDELINES.md §6-C + §6-A
+ * CTA band). Figma: the 19 purple `faceCapture.resultError.*` sections — copy,
+ * status-icon, and CTA variants of this ONE screen.
+ *
+ * Layout measured off the purple 390 sections (CONTENT frame, 654 tall):
+ * nav 8→52 · Title stretched 52→479 with its icon/heading/subtitle block
+ * vertically centered · CTA band 479→646. The centered block is exactly Core's
+ * `PrizmaTitle` (icon slot → Spacing/16 → H2 → Spacing/12 → H5), so nothing is
+ * re-implemented here; the screen only chooses the status and supplies copy.
+ *
+ * Now built on the `PrizmaResultScreen` archetype (consolidation 2026-08-18).
+ * It previously composed the shell by hand because no template offered a
+ * centered status block WITH a CTA band — the gap that made three modules
+ * rebuild the same skeleton.
+ */
+export declare const FaceCaptureResultErrorScreen: React.ForwardRefExoticComponent<FaceCaptureResultErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FaceCaptureResultErrorScreen;

package/dist/FaceCaptureResultErrorScreen.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+import './FaceCaptureLayout.css';
+/**
+ * Face Capture — error result (Archetype C-with-CTA, GUIDELINES.md §6-C + §6-A
+ * CTA band). Figma: the 19 purple `faceCapture.resultError.*` sections — copy,
+ * status-icon, and CTA variants of this ONE screen.
+ *
+ * Layout measured off the purple 390 sections (CONTENT frame, 654 tall):
+ * nav 8→52 · Title stretched 52→479 with its icon/heading/subtitle block
+ * vertically centered · CTA band 479→646. The centered block is exactly Core's
+ * `PrizmaTitle` (icon slot → Spacing/16 → H2 → Spacing/12 → H5), so nothing is
+ * re-implemented here; the screen only chooses the status and supplies copy.
+ *
+ * Now built on the `PrizmaResultScreen` archetype (consolidation 2026-08-18).
+ * It previously composed the shell by hand because no template offered a
+ * centered status block WITH a CTA band — the gap that made three modules
+ * rebuild the same skeleton.
+ */
+export const FaceCaptureResultErrorScreen = forwardRef(({ strings, exhausted = false, screenId = exhausted ? 'face-capture-error-exhausted' : 'face-capture-error', overrides, onAction, ...shell }, ref) => {
+    // Figma: the base sections carry "N attempts remaining"; every `*Exhausted`
+    // section drops it (the subtitle says the limit is reached instead). Gated
+    // here too so a host that keeps the label in its locale pack still renders
+    // the designed exhausted screen.
+    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 }));
+});
+FaceCaptureResultErrorScreen.displayName = 'FaceCaptureResultErrorScreen';
+export default FaceCaptureResultErrorScreen;

package/dist/FaceCaptureResultSuccessScreen.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type PrizmaCaptureScreenProps } from './CaptureScreen';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './FaceCaptureLayout.css';
+export interface FaceCaptureResultSuccessScreenProps extends Omit<PrizmaCaptureScreenProps, 'state' | 'camera' | 'title' | 'feedbackText' | 'statusLabels' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `success` slice (+ shared labels). */
+    strings: FaceCaptureStrings;
+}
+/**
+ * Face Capture — success result (Archetype B, GUIDELINES.md §6-B).
+ * Figma: purple section faceCapture.resultSuccess.default.
+ *
+ * Same reasoning as FaceCaptureLoadingScreen: the check + "Success!" sit in the
+ * ring's own 342-tall slot 40px below the nav (Figma "Middle Content" y=84),
+ * not in a §6-C full-height centered column. Core renders exactly that as the
+ * `success` state of `PrizmaSelfieCapture` — the stage dissolves into the
+ * canonical `PrizmaTitle` with the positive status icon (owner choreography
+ * 2026-07-15). DEVIATIONS.md #11.
+ *
+ * The verdict icon, its color token, and the dissolve all belong to Core; this
+ * screen only supplies copy (§7 — success reuses the capture geometry, never a
+ * new layout). The Core component owns the ring spacing (DEVIATIONS.md #12).
+ */
+export declare const FaceCaptureResultSuccessScreen: React.ForwardRefExoticComponent<FaceCaptureResultSuccessScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FaceCaptureResultSuccessScreen;

package/dist/FaceCaptureResultSuccessScreen.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaCaptureScreen } from './CaptureScreen';
+import './FaceCaptureLayout.css';
+/**
+ * Face Capture — success result (Archetype B, GUIDELINES.md §6-B).
+ * Figma: purple section faceCapture.resultSuccess.default.
+ *
+ * Same reasoning as FaceCaptureLoadingScreen: the check + "Success!" sit in the
+ * ring's own 342-tall slot 40px below the nav (Figma "Middle Content" y=84),
+ * not in a §6-C full-height centered column. Core renders exactly that as the
+ * `success` state of `PrizmaSelfieCapture` — the stage dissolves into the
+ * canonical `PrizmaTitle` with the positive status icon (owner choreography
+ * 2026-07-15). DEVIATIONS.md #11.
+ *
+ * The verdict icon, its color token, and the dissolve all belong to Core; this
+ * screen only supplies copy (§7 — success reuses the capture geometry, never a
+ * new layout). The Core component owns the ring spacing (DEVIATIONS.md #12).
+ */
+export const FaceCaptureResultSuccessScreen = forwardRef(({ strings, screenId = 'face-capture-success', className, ...rest }, ref) => (_jsx(PrizmaCaptureScreen
+// success: the feed is closed — not a capture screen (owner rule 2026-08-18).
+, { 
+    // success: the feed is closed — not a capture screen (owner rule 2026-08-18).
+    cameraOpen: false, ref: ref, className: className, state: "success", statusLabels: { success: strings.success.title }, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, ...rest })));
+FaceCaptureResultSuccessScreen.displayName = 'FaceCaptureResultSuccessScreen';
+export default FaceCaptureResultSuccessScreen;

package/dist/FaceCaptureStrings.d.ts

@@ -0,0 +1,62 @@
+/**
+ * The capturing sub-states — one per purple `faceCapture.capturing.*` spec
+ * section. They are copy/ring-state variants of ONE screen
+ * (FaceCaptureCapturingScreen), not separate screens.
+ */
+export type FaceCaptureCapturingState = 'initiating' | 'getReady' | 'alignFace' | 'lookAtCamera' | 'tooDark' | 'tooBright' | 'eyesClosed' | 'maskDetected' | 'glassesDetected' | 'hatDetected' | 'moveRight' | 'moveLeft' | 'moveCloser' | 'moveAway' | 'faceOcclusion';
+export interface FaceCaptureStrings {
+    /** Accessible name for the logo nav region (i18n — no baked-in English). */
+    navLabel?: string;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    /** faceCapture.tutorial.* — default / loading / ageAssurance are copy +
+     *  CTA-state variants of this one screen. */
+    tutorial: {
+        title: string;
+        subtitle?: string;
+        /** "Stay still, selfie will be taken automatically" */
+        disclaimer?: string;
+        ctaLabel: string;
+        /** Visible/accessible copy while the CTA is loading (tutorial.loading). */
+        ctaLoadingLabel?: string;
+    };
+    /** faceCapture.capturing.* — the H2 instruction under the ring, per state.
+     *  `initiating` has no instruction in the design; omit it. */
+    capturing: Partial<Record<FaceCaptureCapturingState, string>>;
+    /** faceCapture.manualCapture.default */
+    manualCapture: {
+        /** "Align your face within the silhouette and press the button to capture" */
+        instruction: string;
+        /** Accessible name of the shutter button. */
+        captureLabel: string;
+    };
+    /** faceCapture.loading.uploading */
+    uploading: {
+        title: string;
+    };
+    /** faceCapture.loading.processing */
+    processing: {
+        title: string;
+    };
+    /** faceCapture.resultSuccess.default */
+    success: {
+        title: string;
+    };
+    /** faceCapture.resultError.* — the host passes the copy of the CURRENT
+     *  error (faceNotAligned, tooDark, …); exhausted variants change icon +
+     *  copy + CTA via the same slice. */
+    error: {
+        title: string;
+        description?: string;
+        /** "2 attempts remaining" — omit on exhausted variants. */
+        attemptsLabel?: string;
+        /** "Try again" / "Continue" */
+        ctaLabel: string;
+    };
+    /** faceCapture.genericErrors.noConnection */
+    noConnection: {
+        title: string;
+        description?: string;
+        ctaLabel: string;
+    };
+}

package/dist/FaceCaptureStrings.js

@@ -0,0 +1,14 @@
+// Face Capture module — copy contract.
+//
+// Every Face Capture screen receives the SAME `strings: FaceCaptureStrings`
+// 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 future FlowPlayer steps through. Sample copy lives only
+// in previews / host apps.
+//
+// Authoritative screen list: the PURPLE "screen specs" sections of the
+// Face Capture Figma file (wssQwsBcqYrWqVsZTFVVVA, page 18:19332) —
+// tutorial · capturing (15 states) · manualCapture · loading (uploading /
+// processing) · resultSuccess · resultError (+ exhausted) · genericErrors
+// (noConnection).
+export {};

package/dist/FaceCaptureTutorialScreen.d.ts

@@ -0,0 +1,29 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaTutorialScreenProps } from './TutorialScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './ScreenLayout.css';
+export interface FaceCaptureTutorialScreenProps extends Omit<PrizmaTutorialScreenProps, 'title' | 'subtitle' | 'disclaimer' | 'ctaLabel' | 'ctaLoadingLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `tutorial` slice (+ shared labels). */
+    strings: FaceCaptureStrings;
+    /** faceCapture.tutorial.loading: CTA shows the designed loading treatment. */
+    ctaLoading?: boolean;
+    /** Replace the default selfie illustration (Core PrizmaIllustrationSelfie). */
+    illustration?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Face Capture — tutorial, built on the `PrizmaTutorialScreen` archetype
+ * (GUIDELINES.md §6-A). Figma: purple sections faceCapture.tutorial.default /
+ * .loading / .ageAssurance (copy + CTA-state variants of this one screen).
+ *
+ * It previously composed the foundation shell by hand because the archetype had
+ * no CTA-loading slot and `faceCapture.tutorial.loading` needs one. The slot now
+ * exists (`ctaLoading` / `ctaLoadingLabel`, forwarded to Core's own
+ * `PrizmaButton` loading treatment — #F-32), so the screen is a single archetype
+ * call and declares no layout.
+ */
+export declare const FaceCaptureTutorialScreen: React.ForwardRefExoticComponent<FaceCaptureTutorialScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FaceCaptureTutorialScreen;

package/dist/FaceCaptureTutorialScreen.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaIllustrationSelfie } from '@incodetech/prizma-core-web/illustration-selfie';
+import { PrizmaTutorialScreen } from './TutorialScreen';
+import './ScreenLayout.css';
+/**
+ * Face Capture — tutorial, built on the `PrizmaTutorialScreen` archetype
+ * (GUIDELINES.md §6-A). Figma: purple sections faceCapture.tutorial.default /
+ * .loading / .ageAssurance (copy + CTA-state variants of this one screen).
+ *
+ * It previously composed the foundation shell by hand because the archetype had
+ * no CTA-loading slot and `faceCapture.tutorial.loading` needs one. The slot now
+ * exists (`ctaLoading` / `ctaLoadingLabel`, forwarded to Core's own
+ * `PrizmaButton` loading treatment — #F-32), so the screen is a single archetype
+ * call and declares no layout.
+ */
+export const FaceCaptureTutorialScreen = forwardRef(({ strings, ctaLoading = false, illustration, screenId = 'face-capture-tutorial', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaTutorialScreen, { ref: ref, title: strings.tutorial.title, subtitle: strings.tutorial.subtitle, disclaimer: strings.tutorial.disclaimer, ctaLabel: strings.tutorial.ctaLabel, ctaLoading: ctaLoading, ctaLoadingLabel: strings.tutorial.ctaLoadingLabel, illustration: illustration ?? _jsx(PrizmaIllustrationSelfie, {}), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+FaceCaptureTutorialScreen.displayName = 'FaceCaptureTutorialScreen';
+export default FaceCaptureTutorialScreen;

package/dist/FaceMatchComparisonCompactScreen.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { FaceMatchStrings } from './FaceMatchStrings';
+export interface FaceMatchComparisonCompactScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `comparisonCompact` slice. */
+    strings: FaceMatchStrings;
+}
+/**
+ * Face Match — compact matching state (Archetype C, GUIDELINES.md §6-C).
+ * Figma: purple section `faceMatch.comparisonCompact.matching` — the photo-less
+ * variant of the matching state, used when the captured images are not shown.
+ *
+ * This one IS the centered Processing archetype, and it is the counter-example
+ * DEVIATIONS.md #11 predicted: Face Capture's loading screens use archetype B
+ * because their Figma pins the spinner inside the 342-tall ring box, whereas
+ * this section really centers — the spinner + title + subtitle block (342×129)
+ * sits at the exact midpoint of the flexible middle frame (middle content
+ * 44→456 tall 412, block at y=141.5 = (412 − 129) / 2). So the foundation
+ * archetype is reused verbatim and this screen only supplies copy; it is NOT a
+ * copy of FaceCaptureLoadingScreen, whose layout differs. DEVIATIONS.md #FM-24.
+ *
+ * The spinner, its 48px geometry and the title typography all belong to Core's
+ * `PrizmaTitle` spinner slot inside the archetype — nothing re-implemented (§7).
+ */
+export declare const FaceMatchComparisonCompactScreen: React.ForwardRefExoticComponent<FaceMatchComparisonCompactScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FaceMatchComparisonCompactScreen;

package/dist/FaceMatchComparisonCompactScreen.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen, } from './ProcessingScreen';
+/**
+ * Face Match — compact matching state (Archetype C, GUIDELINES.md §6-C).
+ * Figma: purple section `faceMatch.comparisonCompact.matching` — the photo-less
+ * variant of the matching state, used when the captured images are not shown.
+ *
+ * This one IS the centered Processing archetype, and it is the counter-example
+ * DEVIATIONS.md #11 predicted: Face Capture's loading screens use archetype B
+ * because their Figma pins the spinner inside the 342-tall ring box, whereas
+ * this section really centers — the spinner + title + subtitle block (342×129)
+ * sits at the exact midpoint of the flexible middle frame (middle content
+ * 44→456 tall 412, block at y=141.5 = (412 − 129) / 2). So the foundation
+ * archetype is reused verbatim and this screen only supplies copy; it is NOT a
+ * copy of FaceCaptureLoadingScreen, whose layout differs. DEVIATIONS.md #FM-24.
+ *
+ * The spinner, its 48px geometry and the title typography all belong to Core's
+ * `PrizmaTitle` spinner slot inside the archetype — nothing re-implemented (§7).
+ */
+export const FaceMatchComparisonCompactScreen = forwardRef(({ strings, screenId = 'face-match-comparison-compact', ...rest }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, status: "loading", title: strings.comparisonCompact.title, subtitle: strings.comparisonCompact.description, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, ...rest })));
+FaceMatchComparisonCompactScreen.displayName = 'FaceMatchComparisonCompactScreen';
+export default FaceMatchComparisonCompactScreen;

package/dist/FaceMatchComparisonScreen.d.ts

@@ -0,0 +1,80 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FaceMatchComparisonVariant, FaceMatchStrings } from './FaceMatchStrings';
+import './ScreenLayout.css';
+import './FaceMatchLayout.css';
+/** Which captured image fills a circle. The host owns the pixels (same
+ *  contract as `camera` on the capture screens) — Face Match never captures. */
+export type FaceMatchPhotoRole = 'selfie' | 'id' | 'nfc' | 'secondId';
+/** Host-supplied portraits, one per role the chosen variant asks for. Any role
+ *  left out renders an empty neutral disc. */
+export type FaceMatchComparisonPhotos = Partial<Record<FaceMatchPhotoRole, ReactNode>>;
+/**
+ * Where the comparison is in its own choreography — the module MOVING rather
+ * than one of the frames it passes through (FaceMatchLayout.css § "The
+ * comparison, moving", which carries the timeline and where its numbers come
+ * from).
+ *
+ *   arriving   The module has just opened. Title only; the discs are still
+ *              outside the screen.
+ *   comparing  The discs travel in and are then named by their callouts.
+ *   converged  The callouts leave, and the discs run together into one and go
+ *              with them — handing the screen to the verdict.
+ *
+ * Setting it puts the screen in its moving form, and `matching` is then ignored:
+ * the rosette that prop draws is a frame partway through `converged`, not a
+ * place the module rests.
+ */
+export type FaceMatchComparisonPhase = 'arriving' | 'comparing' | 'converged';
+export interface FaceMatchComparisonScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+    /** Module copy — this screen reads the `comparison` slice (+ shared labels). */
+    strings: FaceMatchStrings;
+    /** Which purple photo set to render. Default `'selfieId'`. */
+    variant?: FaceMatchComparisonVariant;
+    /** The converged state (`comparison.matching` / `comparison.threeFacesMatching`):
+     *  the label callouts are dropped and the circles overlap into a rosette.
+     *  A STILL — ignored once `phase` is set. */
+    matching?: boolean;
+    /** Play the comparison instead of drawing one frame of it. Absent = the still
+     *  the Figma sections are, which is what a screen grid wants. */
+    phase?: FaceMatchComparisonPhase;
+    /** The captured portraits. Roles the variant does not use are ignored. */
+    photos?: FaceMatchComparisonPhotos;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Face Match — identity comparison (Archetype A layout minus the CTA,
+ * GUIDELINES.md §6-A). Figma: the five purple `faceMatch.comparison.*` sections
+ * — `initialState` · `matching` · `nfc` · `firstAndSecondID` ·
+ * `threeFacesMatching` — which are photo-count / label / convergence variants of
+ * this ONE screen.
+ *
+ * This is the module's only genuinely new composition, and the reason Face Match
+ * is not a copy of Face Capture: there is no ring, no camera and no CTA. The
+ * purple sections' CONTENT frame holds exactly Navigation → Title → the photo
+ * cluster → the verified Tag (measured 390 section: nav 0→44, Title 68→96 i.e.
+ * the archetype's 24px nav→content gap, cluster in the flexible middle, Tag
+ * 616→650).
+ *
+ * Composed on the foundation shell rather than wrapping PrizmaTutorialScreen
+ * because that archetype always renders a CTA and these sections have none —
+ * foundation gap reported to the owner, no foundation file edited.
+ *
+ * TWO FORMS, one component. Without `phase` it draws a FRAME — the purple
+ * sections exactly as Figma has them, which is what a screen grid and an export
+ * still need. With `phase` it PLAYS, because Face Match has no camera and no
+ * control and the movement is therefore the whole screen rather than polish on
+ * top of it: the discs arrive from off-screen, are named, and then run together
+ * into one and go. That choreography, its three phases and the shipped-SDK
+ * numbers behind it live in FaceMatchLayout.css § "The comparison, moving".
+ *
+ * The label callouts are Core's `PrizmaTooltip` with a bottom-centred arrow. The
+ * module Figma draws a bespoke light pill instead (a hand-drawn boolean Union,
+ * not a Tooltip instance); the design system wins and these render as the
+ * canonical dark tooltip. DEVIATIONS.md #FM-21.
+ */
+export declare const FaceMatchComparisonScreen: React.ForwardRefExoticComponent<FaceMatchComparisonScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FaceMatchComparisonScreen;