@incodetech/prizma-core-screens 0.1.0

package/dist/ScreenShell.d.ts

@@ -0,0 +1,45 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+import './ScreenShell.css';
+export interface PrizmaScreenShellProps extends ComponentPropsWithoutRef<'div'> {
+    /** Camera-viewfinder screens render a full-bleed dark stage instead of the
+     *  neutral surface. Default `false`. Implies `theme="dark"`. */
+    dark?: boolean;
+    /**
+     * PIN the token theme for this screen's subtree, regardless of the app's
+     * theme. Stamps `data-prizma-theme`, which the generated theme sheets select
+     * on ANY element (`[data-prizma-theme='dark']`, not `:root[...]`), so the pin
+     * scopes cleanly to one screen.
+     *
+     * Why screens need this: Core's capture components paint every ink with
+     * **Static** tokens because "the capture screen stays WHITE in both modes —
+     * light is needed for the shot" (owner decision 2026-07-14, documented in
+     * `SelfieCapture.css`). If the surrounding shell were allowed to flip, the
+     * app's dark mode would put a light-oriented stage — dark shutter, secondary
+     * feedback text — on a black background. Camera viewfinders are the mirror
+     * case: their inks are white-on-dark Static, so they pin dark.
+     *
+     * Leave undefined on ordinary screens: they should follow the app.
+     *
+     * ⚠️ A pin is a MODE pin, not a BRAND reset — and it used to be both, because
+     * `themes/light.css` is the full token set. A host that scopes a brand to a
+     * subtree (Core Lab's per-card `themeSeed`; equally `applyPrizmaTheme`'s
+     * output scoped to something narrower than `:root`) saw its brand die on
+     * every pinned screen: the "verified by incode" tag stayed Incode blue on the
+     * face-capture capturing screen while the unpinned tutorial beside it went
+     * fully purple. `ScreenShell.css` hands the brand back — read the block at
+     * the bottom of that file before changing this prop, including the known gap
+     * and the Android / iOS parity flag.
+     */
+    theme?: 'light' | 'dark';
+}
+/**
+ * ScreenShell — the root wrapper of every SDK screen.
+ *
+ * Responsive contract: the 390×844 Figma frame is the DESIGN REFERENCE, not a
+ * hardcoded size. The shell fills its container (host owns the outer size /
+ * aspect) and declares itself a CSS container (`pcs-screen`), so descendant
+ * geometry scales in `cqw` units capped at the reference pixel value —
+ * see GUIDELINES.md §1 and the archetype CSS.
+ */
+export declare const PrizmaScreenShell: React.ForwardRefExoticComponent<PrizmaScreenShellProps & React.RefAttributes<HTMLDivElement>>;
+export default PrizmaScreenShell;

package/dist/ScreenShell.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import './ScreenShell.css';
+/**
+ * ScreenShell — the root wrapper of every SDK screen.
+ *
+ * Responsive contract: the 390×844 Figma frame is the DESIGN REFERENCE, not a
+ * hardcoded size. The shell fills its container (host owns the outer size /
+ * aspect) and declares itself a CSS container (`pcs-screen`), so descendant
+ * geometry scales in `cqw` units capped at the reference pixel value —
+ * see GUIDELINES.md §1 and the archetype CSS.
+ */
+export const PrizmaScreenShell = forwardRef(({ dark = false, theme, className, children, ...rest }, ref) => (_jsx("div", { ref: ref, "data-prizma-theme": theme ?? (dark ? 'dark' : undefined), className: [
+        'prizma-screen-shell',
+        dark ? 'prizma-screen-shell--dark' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' '), ...rest, children: children })));
+PrizmaScreenShell.displayName = 'PrizmaScreenShell';
+export default PrizmaScreenShell;

package/dist/TutorialScreen.d.ts

@@ -0,0 +1,70 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenChromeProps, PrizmaScreenOverrides } from './types';
+import './ScreenLayout.css';
+export interface PrizmaTutorialScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title'>, PrizmaScreenChromeProps {
+    /**
+     * 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;
+    /** Screen title (H2). */
+    title: string;
+    /** Description below the title (H5). */
+    subtitle?: string;
+    /** Hint copy 28px above the CTA ("Stay still…"). */
+    disclaimer?: string;
+    /** Primary CTA label. Optional: some tutorial-shaped screens (Face Match's
+     *  comparison views) carry no CTA at all. */
+    ctaLabel?: string;
+    /** The primary CTA shows Core's designed loading treatment — the `*.loading`
+     *  half of Face Capture's and ID Capture's tutorial sections. */
+    ctaLoading?: boolean;
+    /** Accessible/visible loading copy for the primary CTA (`PrizmaButton`'s own
+     *  `loadingLabel`; no hardcoded English anywhere). */
+    ctaLoadingLabel?: string;
+    /** Secondary CTA rendered ABOVE the primary — a second filled action. */
+    secondaryCtaLabel?: string;
+    /**
+     * Tertiary underlined LINK below the primary — Document Capture's "Skip this
+     * step" (tutorial / method selection) and "All pages captured" (next page).
+     * A link, not a button: Figma draws Core's `tertiary-link` composite there.
+     */
+    linkLabel?: string;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    /** Centerpiece illustration (inline SVG component / Core Illustration*). */
+    illustration?: ReactNode;
+    /**
+     * A shell-level layer painted OVER the whole screen — Document Capture's
+     * method-selection sheet (scrim + `PrizmaBottomSheetContent`), which Figma
+     * presents on top of the dimmed tutorial. It cannot ride in the content
+     * column: it is absolutely positioned against the shell (DEVIATIONS #DC-30).
+     */
+    overlay?: ReactNode;
+    /** Accessible name for the nav region. */
+    navLabel?: string;
+    /** Stable id reported in actions, e.g. `face-capture-tutorial`. */
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Archetype A — Tutorial / Instruction (GUIDELINES.md §6-A).
+ * Nav → title block → illustration (flex-1) → disclaimer → CTA → verified tag.
+ *
+ * CTA band order is the family's designed one: disclaimer → secondary → primary
+ * → tertiary link (the link sits BELOW the primary on every tutorial-shaped
+ * section — Document Capture's "Skip this step" / "All pages captured"). The
+ * stack is the foundation's flat Spacing/16 (DEVIATIONS #8); Core's own
+ * `PrizmaButtonGroup` would put 12 between the slots but cannot forward
+ * `loadingLabel`, which the loading tutorials need — DEVIATIONS #F-32.
+ */
+export declare const PrizmaTutorialScreen: React.ForwardRefExoticComponent<PrizmaTutorialScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PrizmaTutorialScreen;

package/dist/TutorialScreen.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaDisclaimer } from '@incodetech/prizma-core-web/disclaimer';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import './ScreenLayout.css';
+/**
+ * Archetype A — Tutorial / Instruction (GUIDELINES.md §6-A).
+ * Nav → title block → illustration (flex-1) → disclaimer → CTA → verified tag.
+ *
+ * CTA band order is the family's designed one: disclaimer → secondary → primary
+ * → tertiary link (the link sits BELOW the primary on every tutorial-shaped
+ * section — Document Capture's "Skip this step" / "All pages captured"). The
+ * stack is the foundation's flat Spacing/16 (DEVIATIONS #8); Core's own
+ * `PrizmaButtonGroup` would put 12 between the slots but cannot forward
+ * `loadingLabel`, which the loading tutorials need — DEVIATIONS #F-32.
+ */
+export const PrizmaTutorialScreen = forwardRef(({ progress, title, subtitle, disclaimer, ctaLabel, ctaLoading = false, ctaLoadingLabel, secondaryCtaLabel, linkLabel, verifiedLabel, illustration, overlay, navLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel }), progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsxs("div", { className: "prizma-screen-layout__content", children: [_jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle }), _jsx("div", { className: "prizma-screen-layout__flex", children: illustration }), _jsxs("div", { className: "prizma-screen-layout__band", children: [disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, secondaryCtaLabel ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: secondaryCtaLabel })) : null, ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", loading: ctaLoading, loadingLabel: ctaLoadingLabel, onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] }), overlay] })));
+PrizmaTutorialScreen.displayName = 'PrizmaTutorialScreen';
+export default PrizmaTutorialScreen;

package/dist/VideoSelfieCameraStepsScreen.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStepsOs, VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+import './VideoSelfieLayout.css';
+export interface VideoSelfieCameraStepsScreenProps extends Omit<PrizmaListScreenProps, 'status' | 'title' | 'subtitle' | 'children' | 'ctaLabel' | 'secondaryCtaLabel' | 'linkLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `permission.steps` slice. */
+    strings: VideoSelfieStrings;
+    /** Which device variant of the section to render: `2.5 - ios` (default) or
+     *  `2.6 - android`. They are different screens, not translations. */
+    os?: VideoSelfieStepsOs;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Video Selfie — the OS settings walk-through, built on the List archetype
+ * (GUIDELINES.md §6-G). Figma: purple section `video selfie - permissions
+ * 2.5 - camera access instructions`, which holds TWO Incode-drawn symbols:
+ * `2.5 - ios camera access instructions` and
+ * `2.6 - android camera access instructions`. Both are built here, selected by
+ * `os` — unlike `2.1` and `2.4` of the same group, which are OS chrome and are
+ * deliberately not built.
+ *
+ * Same family as `GeolocationBrowserStepsScreen`: a title block over a step
+ * list and a "Retry" CTA, LEFT-aligned throughout — a centred headline above a
+ * left-led numbered list reads as a mistake. The screen only picks which of the
+ * archetype's OWN alignment variants this family uses; a host that passes
+ * `overrides.align` still wins.
+ *
+ * What Figma draws that no single Core list models: TWO labelled sections in
+ * the middle. On iOS the second is a plain remark with no steps at all; on
+ * Android it is a SECOND five-step numbered list followed by a closing note
+ * ("Remember, the specific steps might vary…"). Both numbered lists are Core's
+ * Core `PrizmaListItem` (`number`) rows verbatim; the section labels and the two
+ * kinds of note are plain content typography in `VideoSelfieLayout.css`. The
+ * offset above the whole block is the archetype's `__list` Spacing/24 —
+ * nothing about it is re-declared.
+ *
+ * Neither device frame draws the verified tag (both end at the CTA), so
+ * `showFooter` defaults to `true` (owner rule #PI-8/#F-34 — the chrome is
+ * constant), as on the other two permission
+ * sections.
+ */
+export declare const VideoSelfieCameraStepsScreen: React.ForwardRefExoticComponent<VideoSelfieCameraStepsScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default VideoSelfieCameraStepsScreen;

package/dist/VideoSelfieCameraStepsScreen.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaListItem } from '@incodetech/prizma-core-web/list';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+import './VideoSelfieLayout.css';
+/**
+ * Video Selfie — the OS settings walk-through, built on the List archetype
+ * (GUIDELINES.md §6-G). Figma: purple section `video selfie - permissions
+ * 2.5 - camera access instructions`, which holds TWO Incode-drawn symbols:
+ * `2.5 - ios camera access instructions` and
+ * `2.6 - android camera access instructions`. Both are built here, selected by
+ * `os` — unlike `2.1` and `2.4` of the same group, which are OS chrome and are
+ * deliberately not built.
+ *
+ * Same family as `GeolocationBrowserStepsScreen`: a title block over a step
+ * list and a "Retry" CTA, LEFT-aligned throughout — a centred headline above a
+ * left-led numbered list reads as a mistake. The screen only picks which of the
+ * archetype's OWN alignment variants this family uses; a host that passes
+ * `overrides.align` still wins.
+ *
+ * What Figma draws that no single Core list models: TWO labelled sections in
+ * the middle. On iOS the second is a plain remark with no steps at all; on
+ * Android it is a SECOND five-step numbered list followed by a closing note
+ * ("Remember, the specific steps might vary…"). Both numbered lists are Core's
+ * Core `PrizmaListItem` (`number`) rows verbatim; the section labels and the two
+ * kinds of note are plain content typography in `VideoSelfieLayout.css`. The
+ * offset above the whole block is the archetype's `__list` Spacing/24 —
+ * nothing about it is re-declared.
+ *
+ * Neither device frame draws the verified tag (both end at the CTA), so
+ * `showFooter` defaults to `true` (owner rule #PI-8/#F-34 — the chrome is
+ * constant), as on the other two permission
+ * sections.
+ */
+export const VideoSelfieCameraStepsScreen = forwardRef(({ strings, os = 'ios', screenId = `video-selfie-permission-steps-${os}`, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => {
+    const slice = strings.permission.steps[os];
+    /* Family default, not a local re-declaration: the archetype already owns a
+       left variant, so the screen only picks which of ITS variants applies. */
+    const alignedOverrides = {
+        ...overrides,
+        align: overrides?.align ?? 'left',
+    };
+    return (_jsx(PrizmaListScreen
+    /* Two five-step lists + a closing note exceed the 844 frame — Figma's
+       own frame is 1041 tall. Pan the middle instead of overlapping the
+       CTA and the tag (#VS-12). */
+    , { 
+        /* Two five-step lists + a closing note exceed the 844 frame — Figma's
+           own frame is 1041 tall. Pan the middle instead of overlapping the
+           CTA and the tag (#VS-12). */
+        scrollList: true, ref: ref, showHeader: showHeader, showFooter: showFooter, title: slice.title, subtitle: slice.subtitle, ctaLabel: slice.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: alignedOverrides, onAction: onAction, ...shell, children: _jsxs("div", { className: "video-selfie-steps", children: [_jsx("h3", { className: "video-selfie-steps__heading", children: slice.microphoneTitle }), _jsx("ol", { className: "video-selfie-steps__rows", children: slice.microphoneSteps.map((step, i) => (_jsx("li", { children: _jsx(PrizmaListItem, { variant: "number", number: i + 1, label: step }) }, i))) }), _jsx("h3", { className: "video-selfie-steps__heading", children: slice.recordingTitle }), slice.recordingSteps ? (_jsx("ol", { className: "video-selfie-steps__rows", children: slice.recordingSteps.map((step, i) => (_jsx("li", { children: _jsx(PrizmaListItem, { variant: "number", number: i + 1, label: step }) }, i))) })) : slice.recordingNote ? (_jsx("p", { className: "video-selfie-steps__note", children: slice.recordingNote })) : null, slice.closingNote ? (_jsx("p", { className: "video-selfie-steps__note", children: slice.closingNote })) : null] }) }));
+});
+VideoSelfieCameraStepsScreen.displayName = 'VideoSelfieCameraStepsScreen';
+export default VideoSelfieCameraStepsScreen;

package/dist/VideoSelfieErrorScreen.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+/** Which purple section of group 14 to render (the retry list is its own
+ *  screen — it is a List, not a Result). */
+export type VideoSelfieErrorVariant = 'processingFailed' | 'stepError' | 'moduleError' | 'noConnection';
+export interface VideoSelfieErrorScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'children' | 'bandContent' | 'ctaLabel' | 'secondaryCtaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `errors` slice. */
+    strings: VideoSelfieStrings;
+    /** Which purple section to render. Default `processingFailed`. */
+    variant?: VideoSelfieErrorVariant;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Video Selfie — the generic errors, built on the Result archetype
+ * (GUIDELINES.md §6-F). Figma: purple sections `general errors 14.0 -
+ * processing failed`, `14.2 - step error`, `14.3 - module error` and
+ * `14.4 - no connection`.
+ *
+ * Four verdicts, one skeleton: a centred mark over the title, a Retry CTA, and
+ * — on the two that offer a way out — a "Quit process" link. Every state
+ * renders differently: `processingFailed` alone carries the supporting line,
+ * `stepError` is the only one drawn on the dark camera surface, `moduleError`
+ * adds the quit link, and `noConnection` swaps the status mark for the Wi-Fi
+ * glyph.
+ *
+ * **Chrome (owner rule, restated 2026-08-19).** All four keep the logo header
+ * and the verified tag even though Figma draws them bare — the same call
+ * `#PI-8` / `#F-34` made, so the module's connectivity and error screens read
+ * identically to every other module's and nothing shifts between states.
+ *
+ * **Theme.** `stepError` is the one section the camera is still open behind, and
+ * Figma draws it white-on-black; it pins `theme="dark"` through Core's own
+ * theme switch, so every token-bound child flips THROUGH the design system
+ * (DEVIATIONS #DC-32) rather than around it. `noConnection` deliberately does
+ * NOT pin: `#F-34`'s whole point is that a module's connectivity screen looks
+ * like every other module's.
+ *
+ * **Reported gap — CONFIRMED DEFECT, blocked on the archetype.** Archetype F
+ * has no tertiary-link slot: G has `linkLabel` and pins it above the pair, A and
+ * E pin theirs below, F has none. The quit link therefore rides in F's
+ * `bandContent` slot (Core's `tertiary-link` button, never a hand-rolled
+ * anchor), which `PrizmaResultScreen` renders ABOVE the CTA row — and `14.3` and
+ * `14.4` both draw "Retry" first with "Quit process" underlined BELOW it. QA
+ * re-confirmed the inversion against both frames on 2026-08-19.
+ *
+ * It is NOT worked around here. The fix is one slot in the archetype — F needs
+ * A's `linkLabel`, rendered AFTER the button stack (mirroring
+ * `TutorialScreen.tsx:129`), with `bandContent` left to its intended Snackbar
+ * use. `ResultScreen.*` is owned by the foundation, so this module reports it
+ * (`archetypeGaps`) instead of editing it (GUIDELINES rule 2). The moment the
+ * slot lands, both variants move to `linkLabel={copy.quitLabel}` and the
+ * `bandContent` block below is deleted.
+ *
+ * Figma also draws the journey stepper on `14.1`, `14.2` and `14.4`. Archetype
+ * F has no slot for it and this module does not hand-roll one — reported.
+ */
+export declare const VideoSelfieErrorScreen: React.ForwardRefExoticComponent<VideoSelfieErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default VideoSelfieErrorScreen;

package/dist/VideoSelfieErrorScreen.js

@@ -0,0 +1,94 @@
+'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';
+/**
+ * Video Selfie — the generic errors, built on the Result archetype
+ * (GUIDELINES.md §6-F). Figma: purple sections `general errors 14.0 -
+ * processing failed`, `14.2 - step error`, `14.3 - module error` and
+ * `14.4 - no connection`.
+ *
+ * Four verdicts, one skeleton: a centred mark over the title, a Retry CTA, and
+ * — on the two that offer a way out — a "Quit process" link. Every state
+ * renders differently: `processingFailed` alone carries the supporting line,
+ * `stepError` is the only one drawn on the dark camera surface, `moduleError`
+ * adds the quit link, and `noConnection` swaps the status mark for the Wi-Fi
+ * glyph.
+ *
+ * **Chrome (owner rule, restated 2026-08-19).** All four keep the logo header
+ * and the verified tag even though Figma draws them bare — the same call
+ * `#PI-8` / `#F-34` made, so the module's connectivity and error screens read
+ * identically to every other module's and nothing shifts between states.
+ *
+ * **Theme.** `stepError` is the one section the camera is still open behind, and
+ * Figma draws it white-on-black; it pins `theme="dark"` through Core's own
+ * theme switch, so every token-bound child flips THROUGH the design system
+ * (DEVIATIONS #DC-32) rather than around it. `noConnection` deliberately does
+ * NOT pin: `#F-34`'s whole point is that a module's connectivity screen looks
+ * like every other module's.
+ *
+ * **Reported gap — CONFIRMED DEFECT, blocked on the archetype.** Archetype F
+ * has no tertiary-link slot: G has `linkLabel` and pins it above the pair, A and
+ * E pin theirs below, F has none. The quit link therefore rides in F's
+ * `bandContent` slot (Core's `tertiary-link` button, never a hand-rolled
+ * anchor), which `PrizmaResultScreen` renders ABOVE the CTA row — and `14.3` and
+ * `14.4` both draw "Retry" first with "Quit process" underlined BELOW it. QA
+ * re-confirmed the inversion against both frames on 2026-08-19.
+ *
+ * It is NOT worked around here. The fix is one slot in the archetype — F needs
+ * A's `linkLabel`, rendered AFTER the button stack (mirroring
+ * `TutorialScreen.tsx:129`), with `bandContent` left to its intended Snackbar
+ * use. `ResultScreen.*` is owned by the foundation, so this module reports it
+ * (`archetypeGaps`) instead of editing it (GUIDELINES rule 2). The moment the
+ * slot lands, both variants move to `linkLabel={copy.quitLabel}` and the
+ * `bandContent` block below is deleted.
+ *
+ * Figma also draws the journey stepper on `14.1`, `14.2` and `14.4`. Archetype
+ * F has no slot for it and this module does not hand-roll one — reported.
+ */
+export const VideoSelfieErrorScreen = forwardRef(({ strings, variant = 'processingFailed', screenId = `video-selfie-error-${variant}`, overrides, onAction, ...shell }, ref) => {
+    const slice = strings.errors;
+    const copy = variant === 'processingFailed'
+        ? {
+            title: slice.processingFailed.title,
+            subtitle: slice.processingFailed.subtitle,
+            ctaLabel: slice.processingFailed.ctaLabel,
+            quitLabel: undefined,
+        }
+        : variant === 'stepError'
+            ? {
+                title: slice.stepError.title,
+                subtitle: undefined,
+                ctaLabel: slice.stepError.ctaLabel,
+                quitLabel: undefined,
+            }
+            : variant === 'moduleError'
+                ? {
+                    title: slice.moduleError.title,
+                    subtitle: undefined,
+                    ctaLabel: slice.moduleError.ctaLabel,
+                    quitLabel: slice.moduleError.quitLabel,
+                }
+                : {
+                    title: slice.noConnection.title,
+                    subtitle: undefined,
+                    ctaLabel: slice.noConnection.ctaLabel,
+                    quitLabel: slice.noConnection.quitLabel,
+                };
+    return (_jsx(PrizmaResultScreen, { ref: ref, theme: variant === 'stepError' ? 'dark' : undefined, status: variant === 'noConnection' ? 'none' : 'error', glyph: variant === 'noConnection' ? (_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" }) })) : undefined, title: copy.title, subtitle: copy.subtitle, 
+        /* The archetype's own tertiary slot, which renders BELOW the button
+           stack — `14.3`/`14.4` draw "Retry" first with "Quit process"
+           underneath. This used to borrow `bandContent`, which paints ABOVE
+           the buttons and put the link on the wrong side (#VS-17). */
+        linkLabel: copy.quitLabel, ctaLabel: copy.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+});
+VideoSelfieErrorScreen.displayName = 'VideoSelfieErrorScreen';
+export default VideoSelfieErrorScreen;

package/dist/VideoSelfieFlipCameraScreen.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+export interface VideoSelfieFlipCameraScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'children' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `flipCamera` slice. */
+    strings: VideoSelfieStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Video Selfie — the camera-swap interstitial, built on the Result archetype
+ * (GUIDELINES.md §6-F). Figma: purple section `video selfie - flip camera
+ * 7.0 - switch to front`.
+ *
+ * The sibling of the flip-ID screen and deliberately its opposite: the camera
+ * is still open, so the section is drawn on the DARK surface with white copy.
+ * The archetype takes `theme="dark"` straight from `PrizmaScreenShell` — the
+ * same switch `DocumentCaptureCaptureScreen` uses — so the Title and every
+ * other token-bound child flips THROUGH the design system rather than around it
+ * (DEVIATIONS #DC-32). No hardcoded white anywhere.
+ *
+ * The mark is the canonical bank's `IconCameraFlip` in the archetype's own
+ * `glyph` slot (`PrizmaTitle.icon` only accepts status | spinner | none —
+ * DEVIATIONS #10), wrapped in the foundation's `__glyph` class so no module CSS
+ * is needed for it. No CTA and no verified tag: the section draws neither.
+ *
+ * Figma also draws the journey stepper at the top of this section. Archetype F
+ * has no slot for it and this module does not hand-roll one — reported.
+ */
+export declare const VideoSelfieFlipCameraScreen: React.ForwardRefExoticComponent<VideoSelfieFlipCameraScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default VideoSelfieFlipCameraScreen;

package/dist/VideoSelfieFlipCameraScreen.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconCameraFlip } from '@incodetech/prizma-core-icons';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * Video Selfie — the camera-swap interstitial, built on the Result archetype
+ * (GUIDELINES.md §6-F). Figma: purple section `video selfie - flip camera
+ * 7.0 - switch to front`.
+ *
+ * The sibling of the flip-ID screen and deliberately its opposite: the camera
+ * is still open, so the section is drawn on the DARK surface with white copy.
+ * The archetype takes `theme="dark"` straight from `PrizmaScreenShell` — the
+ * same switch `DocumentCaptureCaptureScreen` uses — so the Title and every
+ * other token-bound child flips THROUGH the design system rather than around it
+ * (DEVIATIONS #DC-32). No hardcoded white anywhere.
+ *
+ * The mark is the canonical bank's `IconCameraFlip` in the archetype's own
+ * `glyph` slot (`PrizmaTitle.icon` only accepts status | spinner | none —
+ * DEVIATIONS #10), wrapped in the foundation's `__glyph` class so no module CSS
+ * is needed for it. No CTA and no verified tag: the section draws neither.
+ *
+ * Figma also draws the journey stepper at the top of this section. Archetype F
+ * has no slot for it and this module does not hand-roll one — reported.
+ */
+export const VideoSelfieFlipCameraScreen = forwardRef(({ strings, screenId = 'video-selfie-flip-camera', 
+/* A camera screen (dark, feed open, stepper drawn) — the chrome
+   contract drops the LOGO and keeps the footer (#VS-15). */
+showHeader = false, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, theme: "dark", showHeader: showHeader, showFooter: showFooter, glyph: _jsx("span", { className: [
+            'prizma-screen-layout__glyph',
+            'prizma-screen-layout__glyph--neutral',
+            overrides?.align === 'left' ? 'prizma-screen-layout__glyph--left' : '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: _jsx(IconCameraFlip, { size: "l" }) }), title: strings.flipCamera.title, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+VideoSelfieFlipCameraScreen.displayName = 'VideoSelfieFlipCameraScreen';
+export default VideoSelfieFlipCameraScreen;

package/dist/VideoSelfieFlipIdScreen.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+export interface VideoSelfieFlipIdScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'children' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `flipId` slice. */
+    strings: VideoSelfieStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Video Selfie — the flip interstitial between the two document sides, built on
+ * the Result archetype (GUIDELINES.md §6-F). Figma: purple section
+ * `video selfie - flip id 4.0 - default`.
+ *
+ * The module's shortest screen and the one moment the camera closes: a bare H2
+ * over the spinning-card artwork, no logo, no CTA (the flow advances itself),
+ * no verified tag and — alone among the camera-adjacent sections — no stepper.
+ * The archetype covers it exactly: `status="none"` for the bare title, the
+ * artwork in `children`, no `ctaLabel` so no band renders, `showHeader={true}`
+ * to drop the logo while still reserving the nav row so the offsets match every
+ * other screen (owner rule 2026-08-18), and `showFooter={true}` — the chrome is constant (#PI-8/#F-34) — because the
+ * section draws no tag.
+ *
+ * The artwork is Core's `PrizmaIllustrationIdFlip` in its `interstitial`
+ * variant — the card spinning inside the static circular arrows, exactly what
+ * this moment was designed for. Never redrawn here (§7, §10). Identical
+ * treatment to `IdCaptureFlipScreen`, which is the point: the same beat looks
+ * the same in every module.
+ */
+export declare const VideoSelfieFlipIdScreen: React.ForwardRefExoticComponent<VideoSelfieFlipIdScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default VideoSelfieFlipIdScreen;

package/dist/VideoSelfieFlipIdScreen.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaIllustrationIdFlip } from '@incodetech/prizma-core-web/illustration-id-flip';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * Video Selfie — the flip interstitial between the two document sides, built on
+ * the Result archetype (GUIDELINES.md §6-F). Figma: purple section
+ * `video selfie - flip id 4.0 - default`.
+ *
+ * The module's shortest screen and the one moment the camera closes: a bare H2
+ * over the spinning-card artwork, no logo, no CTA (the flow advances itself),
+ * no verified tag and — alone among the camera-adjacent sections — no stepper.
+ * The archetype covers it exactly: `status="none"` for the bare title, the
+ * artwork in `children`, no `ctaLabel` so no band renders, `showHeader={true}`
+ * to drop the logo while still reserving the nav row so the offsets match every
+ * other screen (owner rule 2026-08-18), and `showFooter={true}` — the chrome is constant (#PI-8/#F-34) — because the
+ * section draws no tag.
+ *
+ * The artwork is Core's `PrizmaIllustrationIdFlip` in its `interstitial`
+ * variant — the card spinning inside the static circular arrows, exactly what
+ * this moment was designed for. Never redrawn here (§7, §10). Identical
+ * treatment to `IdCaptureFlipScreen`, which is the point: the same beat looks
+ * the same in every module.
+ */
+export const VideoSelfieFlipIdScreen = forwardRef(({ strings, screenId = 'video-selfie-flip-id', showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, showHeader: showHeader, showFooter: showFooter, title: strings.flipId.title, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaIllustrationIdFlip, { variant: "interstitial" }) })));
+VideoSelfieFlipIdScreen.displayName = 'VideoSelfieFlipIdScreen';
+export default VideoSelfieFlipIdScreen;