@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/src/VideoSelfieSelfieCaptureScreen.tsx

@@ -1,41 +1,61 @@
 import React, { forwardRef, type ReactNode } from 'react';
-import type { PrizmaSelfieCaptureState } from '@incodetech/prizma-core-web/selfie-capture';
-import { PrizmaCaptureScreen, type PrizmaCaptureScreenProps } from './CaptureScreen';
+import {
+  PrizmaSelfieCapture,
+  type PrizmaSelfieCaptureState,
+} from '@incodetech/prizma-core-web/selfie-capture';
+import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
-import type { VideoSelfieFeedbackKind, VideoSelfieStrings } from './VideoSelfieStrings';
+import type {
+  VideoSelfieDocumentType,
+  VideoSelfieFeedbackKind,
+  VideoSelfieStrings,
+} from './VideoSelfieStrings';
 import './ScreenLayout.css';
+import './ViewfinderScreen.css';
+import './VideoSelfieLayout.css';
 
 /** Which purple liveness section to render (group 8). */
 export type VideoSelfieSelfieState = 'start' | 'processing' | 'success' | 'failed';
 
-/** Purple state → Core `PrizmaSelfieCapture` state. Core models the in-flight
- *  and verdict beats as capture STATES — the ring dissolves into the spinner or
- *  the status mark in its own slot (DEVIATIONS #11) — so all four are one
- *  archetype call, not a separate processing screen. */
+/**
+ * Purple state → Core `PrizmaSelfieCapture` state, in the OVERLAY recipe.
+ *
+ * `start` is `filled`, not `empty`: `empty` is Core's *searching* beat and
+ * draws the dashed silhouette guide, which `8.0` and every `9.x` message
+ * deliberately hide (`silhouette hidden=true` on the frames — the guide
+ * belongs to the head-turn steps, which do draw it). `filled` is Core's
+ * "window open, neutral ring, no guide" beat, and in overlay mode there is no
+ * still to fill it with: the host's feed shows straight through the ring.
+ */
 const CAPTURE_STATE: Record<VideoSelfieSelfieState, PrizmaSelfieCaptureState> = {
-  start: 'ready',
+  start: 'filled',
   processing: 'uploading',
   success: 'success',
   failed: 'error',
 };
 
+/** Which beat of the seven-step journey the liveness ring occupies — the
+ *  microphone grant is 1, the two document sides 2 and 3. */
+const STEP = 4;
+
 export interface VideoSelfieSelfieCaptureScreenProps
-  extends Omit<
-    PrizmaCaptureScreenProps,
-    'state' | 'feedbackText' | 'statusLabels' | 'verifiedLabel' | 'navLabel'
-  > {
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
   /** Module copy — this screen reads the `selfieCapture` slice. */
   strings: VideoSelfieStrings;
   /** Which purple section of group 8 to render. Default `start`. */
   state?: VideoSelfieSelfieState;
   /**
-   * Which of group 9's ELEVEN live-feedback lines to show under the ring.
-   * Only meaningful while the ring is live (`state="start"`): the sections of
+   * Which of group 9's live-feedback lines to show under the ring. Only
+   * meaningful while the ring is live (`state="start"`): the sections of
    * group 9 are that same frame with a different instruction. Omit for `8.0`,
    * which shows the plain "Look at your front camera" line.
    */
   feedback?: VideoSelfieFeedbackKind;
-  /** Live camera feed (<video>) or sample still (<img>). */
+  /** Which document the journey collects — the Stepper's own `documentType`. */
+  documentType?: VideoSelfieDocumentType;
+  /** Live camera feed (<video>) or sample still (<img>), full-bleed behind the
+   *  ring — NOT inside it. The overlay recipe makes the ring a window. */
   camera?: ReactNode;
   screenId?: string;
   overrides?: PrizmaScreenOverrides;
@@ -43,29 +63,41 @@ export interface VideoSelfieSelfieCaptureScreenProps
 }
 
 /**
- * Video Selfie — the liveness ring (Archetype B, GUIDELINES.md §6-B).
- * ONE screen for FIFTEEN purple sections: `selfie capture 8.0–8.3` and every
- * `selfie capture feedback 9.1–9.11` message. They are `state` × `feedbackText`
- * variants of Core's `PrizmaSelfieCapture`, which owns the ring, the
- * silhouette, the ring offset (40), the instruction gap (32), the instruction
- * typography and every verdict treatment. None of it is re-implemented (§7),
- * and this file declares no layout at all.
+ * Video Selfie — the liveness ring (Archetype D, GUIDELINES.md §6-D; always
+ * dark). ONE screen for every purple section of groups 8 and 9: `selfie
+ * capture 8.0–8.3` and every `selfie capture feedback 9.x` message. They are
+ * `state` × `feedbackText` variants of Core's `PrizmaSelfieCapture`, which is
+ * exactly how the component is axed.
+ *
+ * **Rebuilt 2026-09-30 to follow the frames.** The first pass shipped Core's
+ * INLINE recipe — the feed inside a circular window on a WHITE surface, the
+ * verdicts dissolving the ring into a centred mark — and logged the gap. On
+ * the module page that read as a different product from the rest of the flow:
+ * a small ring on white between two full-bleed dark camera screens, with the
+ * ring vanishing on the very beats Figma keeps it (owner, 2026-09-30: "they
+ * are looking very broken… a broken experience"). Rather than hand-roll the
+ * full-bleed composition here, Core's `PrizmaSelfieCapture` grew the
+ * `mode="overlay"` + `scrim` axis `PrizmaIdCapture` already carries — it is
+ * the Figma library's own `Capture / Selfie overlay` component — and this
+ * screen composes it. Nothing about the ring, the scrim, the glow sweeps, the
+ * verdict marks or the instruction typography is re-implemented (§7).
+ * DEVIATIONS #VS-22.
+ *
+ * The composition, measured off `8.0` (390×844):
  *
- * **Figma vs Core — Core wins, reported.** These sections draw the camera
- * FULL-BLEED behind a scrimmed ring, on a black surface. Core's
- * `PrizmaSelfieCapture` puts the feed inside the ring's circular window on a
- * light surface, and pins light while the feed is open on purpose — "the
- * capture screen stays WHITE in both modes, light is needed for the shot"
- * (owner decision 2026-07-14, DEVIATIONS #F-27). Reshaping it here would mean
- * re-implementing a Core primitive with a second full-bleed recipe, so the
- * screen ships Core's treatment and the divergence is logged, exactly as the
- * Face Capture pilot settled it.
+ * - the camera runs FULL-BLEED on `.prizma-viewfinder__surface` (`selfie bg
+ *   image`, 390×844 — it passes under the browser chrome too);
+ * - the journey stepper sits in the band the logo nav normally occupies
+ *   (`top content` y=56, the Stepper 342 wide at x=24), the module-wide
+ *   treatment `VideoSelfieLayout.css` owns;
+ * - the ring is 335 centred in the remaining air (Figma 27,188 → 362,523
+ *   against a 708-high content area), with the instruction stacked under it.
+ *   Core's own Spacing/32 gap replaces Figma's 25.5 (the token wins, §4).
  *
- * Figma also draws the journey stepper at the top of all fifteen sections.
- * Archetype B has no slot for it and this module does not hand-roll one —
- * reported. Nothing collapses without it: the four states and the eleven
- * messages already render distinctly through Core's own ring treatments and
- * instruction copy.
+ * NO verified tag: `8.x` and `9.x` draw nothing between the instruction and
+ * the bottom of the screen (GUIDELINES §1 — follow the module's section, not
+ * the default). The document stage keeps its tag because its own sections
+ * draw one (#VS-3).
  */
 export const VideoSelfieSelfieCaptureScreen = forwardRef<
   HTMLDivElement,
@@ -76,10 +108,12 @@ export const VideoSelfieSelfieCaptureScreen = forwardRef<
       strings,
       state = 'start',
       feedback,
+      documentType = 'id',
       camera,
       screenId = `video-selfie-selfie-capture-${feedback ?? state}`,
       overrides,
       onAction,
+      className,
       ...shell
     },
     ref,
@@ -89,31 +123,50 @@ export const VideoSelfieSelfieCaptureScreen = forwardRef<
        carry Core's own status copy instead (its `statusLabels` slot), which is
        why the feedback line is scoped to the live state. */
     const feedbackText =
-      CAPTURE_STATE[state] === 'ready'
-        ? feedback
-          ? slice.feedback[feedback]
-          : slice.startLabel
-        : undefined;
+      state === 'start' ? (feedback ? slice.feedback[feedback] : slice.startLabel) : undefined;
 
     return (
-      <PrizmaCaptureScreen
+      <PrizmaScreenShell
         ref={ref}
-        state={CAPTURE_STATE[state]}
-        cameraOpen={state === 'start'}
-        camera={camera}
-        feedbackText={feedbackText}
-        statusLabels={{
-          uploading: slice.processingLabel,
-          success: slice.successLabel,
-          error: slice.failedLabel,
-        }}
-        verifiedLabel={strings.verifiedLabel}
-        navLabel={strings.navLabel}
-        screenId={screenId}
-        overrides={overrides}
-        onAction={onAction}
+        dark
+        /* The camera owns the whole window, never a column of it — see the
+           contract note in `VideoSelfieLayout.css`. */
+        data-pcs-overlay="window"
+        className={className}
         {...shell}
-      />
+      >
+        <div className="prizma-viewfinder__surface">{camera}</div>
+        <div className="video-selfie-stepper">
+          <PrizmaStepper
+            steps={7}
+            currentState={STEP}
+            documentType={documentType}
+            completedValueText={strings.stepperCompletedLabel}
+          />
+        </div>
+        <div
+          className={[
+            'prizma-viewfinder__content',
+            overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <div className="video-selfie-band video-selfie-band--ring">
+            <PrizmaSelfieCapture
+              mode="overlay"
+              scrim
+              state={CAPTURE_STATE[state]}
+              feedbackText={feedbackText}
+              statusLabels={{
+                uploading: slice.processingLabel,
+                success: slice.successLabel,
+                error: slice.failedLabel,
+              }}
+            />
+          </div>
+        </div>
+      </PrizmaScreenShell>
     );
   },
 );

package/src/VideoSelfieSpeakScreen.tsx

@@ -120,23 +120,31 @@ export const VideoSelfieSpeakScreen = forwardRef<
           onSecondaryClick: () => onAction?.({ type: 'secondary', screenId }),
         }}
       />
-    ) : stage === 'processing' ? (
-      <PrizmaModalContent
-        title={slice.processingLabel}
-        showButtonGroup={false}
-        closeLabel={slice.closeLabel}
-        onClose={() => onAction?.({ type: 'tertiary', screenId })}
-        body={<PrizmaLoadingSpinner loadingLabel={slice.processingLabel} />}
-      />
-    ) : stage === 'success' ? (
+    ) : stage === 'processing' || stage === 'success' ? (
+      /* The two verdict cards. They carry no buttons, so left alone they came
+         out shorter than the prompt they replace and the sheet jumped between
+         steps; and Core's Modal renders `body` AFTER the heading, which put
+         the spinner and the check UNDER their own label. Both are fixed in
+         the module: `--status` gives the card the prompt's measure and centres
+         its content, and the mark is passed as the LEADING slot so it stacks
+         above the copy the way `10.2` / `10.3` draw it.
+
+         No ✕ either. Figma draws one, but it is the same call #VS-5 already
+         made on the prompt: closing mid-step strands the user with no way
+         back, and a dismiss that appears on two of five cards and not the
+         other three is the inconsistency, not the fix (owner, 2026-09-30).
+         DEVIATIONS #VS-25. */
       <PrizmaModalContent
-        title={slice.successLabel}
+        title={stage === 'processing' ? slice.processingLabel : slice.successLabel}
+        showCloseIcon={false}
         showButtonGroup={false}
-        closeLabel={slice.closeLabel}
-        onClose={() => onAction?.({ type: 'tertiary', screenId })}
-        body={
+        leading={
           <span className="video-selfie-sheet-status">
-            <IconStatusPositive size="xl" />
+            {stage === 'processing' ? (
+              <PrizmaLoadingSpinner loadingLabel={slice.processingLabel} />
+            ) : (
+              <IconStatusPositive size="xl" />
+            )}
           </span>
         }
       />
@@ -170,7 +178,15 @@ export const VideoSelfieSpeakScreen = forwardRef<
     );
 
     return (
-      <PrizmaScreenShell ref={ref} dark className={className} {...shell}>
+      <PrizmaScreenShell
+        ref={ref}
+        dark
+        /* The camera owns the whole window, never a column of it — see the
+           contract note in `VideoSelfieLayout.css`. */
+        data-pcs-overlay="window"
+        className={className}
+        {...shell}
+      >
         <div className="prizma-viewfinder__surface">{camera}</div>
         <div className="video-selfie-stepper">
           <PrizmaStepper
@@ -214,6 +230,9 @@ export const VideoSelfieSpeakScreen = forwardRef<
           className={[
             'video-selfie-sheet-panel',
             isConfirm ? 'video-selfie-sheet-panel--centered' : '',
+            stage === 'processing' || stage === 'success'
+              ? 'video-selfie-sheet-panel--status'
+              : '',
           ]
             .filter(Boolean)
             .join(' ')}

package/src/VideoSelfieStrings.ts

@@ -38,7 +38,10 @@ export type VideoSelfieTutorialRowKind =
   | 'questions'
   | 'speak';
 
-/** The eleven live-feedback messages of group 9, in Figma order. */
+/** The live-feedback messages of group 9, in Figma order. Fourteen since
+ *  2026-09-30: `9.12`–`9.14` (head cover · closed eyes · face occlusion) were
+ *  added to the frames after the module's first build and are on the Web, iOS
+ *  and Android full-flow maps. */
 export type VideoSelfieFeedbackKind =
   | 'dark'
   | 'blurry'
@@ -50,19 +53,67 @@ export type VideoSelfieFeedbackKind =
   | 'turnLeft'
   | 'alignFace'
   | 'moveCloser'
-  | 'moveAway';
+  | 'moveAway'
+  | 'headCover'
+  | 'closedEyes'
+  | 'faceOcclusion';
+
+/** Which head-turn the liveness step is asking for (the `🙂‍↔️ Turn Head` band
+ *  of the full-flow frames: Left · Right · Upward · Downward, each drawn as a
+ *  guide beat and a captured beat). */
+export type VideoSelfieTurnDirection = 'left' | 'right' | 'up' | 'down';
 
 /** Which face of the document the ID stage is on (groups 3 and 5). */
 export type VideoSelfieIdSide = 'front' | 'back';
 
-/** Why an ID read was rejected (group 6, the `.1`–`.4` variants). */
 /**
- * REMOVED (2026-08-19). A rejection-REASON axis (`scanFailed | name | photo |
- * typeMismatch`) was invented: group 6 draws exactly FOUR sections —
- * `6.1.1`/`6.2.1` (front try-again / failed) and `6.3.1`/`6.4.1` (back) — with
- * no reason axis at all, so the four kinds multiplied the gallery to 16 error
- * cards where the spec has 4. Severity is the only real axis. DEVIATIONS #VS-1.
+ * Why an ID read was rejected — the `.1`–`.4` suffix of every group 6 section.
+ *
+ * RESTORED 2026-09-30. It was removed on 2026-08-19 on the reading that "group
+ * 6 draws exactly four sections", because the `📐 Screens specs & behavior`
+ * page documents ONE representative per group (`6.1.1`, `6.2.1`, `6.3.1`,
+ * `6.4.1`) and the rest are component variants inside it. The `🔸 Full flow
+ * map` draws them all, and they carry DIFFERENT copy, not a translation of
+ * one line: `6.2.2 - name failed` reads "Name verification failed",
+ * `6.2.3 - photo failed` reads "ID photo verification failed",
+ * `6.1.4 - type mismatch try again` reads "ID type mismatch, show the same ID".
+ * Collapsing them to one line lost three rejections a user can actually hit.
+ * DEVIATIONS #VS-1.
  */
+export type VideoSelfieIdErrorReason = 'scan' | 'name' | 'photo' | 'typeMismatch';
+
+/**
+ * A live CONDITION the document stage can coach the user out of, as opposed
+ * to a rejection it has to report.
+ *
+ * BOTH legs run five of these before the identity checks — the frames draw
+ * them on the back only, and the owner extended them to the front on
+ * 2026-09-30 ("I think it would be nice to add them for the front as well").
+ * Each one draws its OWN screen: the frame in its
+ * matching red treatment with a `Capture feedback` bubble above it saying
+ * what to do. They were all wired to the single "ID scan failed, try again"
+ * card until 2026-09-30 — the five screens are `frame` nodes rather than
+ * component instances in the flow map, so the first trace walked straight
+ * past them (owner: "we do have those states in figma").
+ *
+ * All five map 1:1 onto states Core already ships: four onto
+ * `PrizmaIdCapture`'s own `error-*` treatments, and `blurry` onto the plain
+ * error border plus the bubble, which is the recipe the owner set for
+ * detection results on 2026-07-28 (the border is the state, the message is
+ * the bubble).
+ */
+/** One coaching bubble's copy: what is wrong, and what to do about it. */
+export interface VideoSelfieConditionCopy {
+  title: string;
+  subtitle: string;
+}
+
+export type VideoSelfieIdCondition =
+  | 'wrongSide'
+  | 'notAligned'
+  | 'blurry'
+  | 'glare'
+  | 'tooDark';
 
 /** Whether the rejection invites a retry (`6.1` / `6.3`) or is terminal
  *  (`6.2` / `6.4`). */
@@ -172,9 +223,26 @@ export interface VideoSelfieStrings {
     processingLabel: string;
     /** Accepted label (`3.3` / `5.3`). */
     successLabel: string;
-    /** Rejection copy, keyed reason → severity (group 6). */
-    /** Rejection copy per severity (group 6: try-again vs failed). */
-    errors: Record<VideoSelfieIdErrorSeverity, string>;
+    /** Rejection copy, keyed reason → severity (group 6). The two axes are
+     *  independent: `6.1.x` / `6.3.x` are the try-again lines, `6.2.x` /
+     *  `6.4.x` the terminal ones, and the `.1`–`.4` suffix is the reason. The
+     *  two sides share the copy — only the stepper beat differs. */
+    errors: Record<VideoSelfieIdErrorReason, Record<VideoSelfieIdErrorSeverity, string>>;
+    /**
+     * The five coaching bubbles — title + what to do about it.
+     *
+     * Only `wrongSide` is keyed by side, because it is the only one that
+     * NAMES the face the user should be showing; the other four describe the
+     * shot, which is the same problem whichever face is up. Keying all five by
+     * side would duplicate four strings per language for nothing.
+     */
+    conditions: {
+      wrongSide: Record<VideoSelfieIdSide, VideoSelfieConditionCopy>;
+      notAligned: VideoSelfieConditionCopy;
+      blurry: VideoSelfieConditionCopy;
+      glare: VideoSelfieConditionCopy;
+      tooDark: VideoSelfieConditionCopy;
+    };
   };
 
   /** Group 4 — the flip interstitial. */
@@ -193,8 +261,13 @@ export interface VideoSelfieStrings {
     successLabel: string;
     /** `8.3` rejected. */
     failedLabel: string;
-    /** Group 9 — the eleven live-feedback lines. */
+    /** Group 9 — the fourteen live-feedback lines. */
     feedback: Record<VideoSelfieFeedbackKind, string>;
+    /** The head-turn step's own instruction, one per direction (the
+     *  `🙂‍↔️ Turn Head` band of the full-flow frames). */
+    turn: Record<VideoSelfieTurnDirection, string>;
+    /** The wave step's instruction and its three checkpoints (`👋 Wave`). */
+    wave: { instruction: string; steps: string[]; doneLabel: string };
   };
 
   /** Groups 10 · 11 — the spoken steps. */
@@ -216,7 +289,9 @@ export interface VideoSelfieStrings {
     stepError: { title: string; ctaLabel: string };
     /** `14.3` — the whole module blew up. */
     moduleError: { title: string; ctaLabel: string; quitLabel: string };
-    /** `14.4` — connectivity. */
-    noConnection: { title: string; ctaLabel: string; quitLabel: string };
+    /** `14.4` — connectivity. The supporting line is the generic family's
+     *  (`ErrorScreensStrings.noConnection.subtitle`), so this screen reads
+     *  like every other module's connectivity screen (#F-34, #PI-8). */
+    noConnection: { title: string; subtitle?: string; ctaLabel: string; quitLabel: string };
   };
 }

package/src/VideoSelfieTurnHeadScreen.tsx

@@ -0,0 +1,162 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import {
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronUp,
+} from '@incodetech/prizma-core-icons';
+import { PrizmaSelfieCapture } from '@incodetech/prizma-core-web/selfie-capture';
+import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  VideoSelfieDocumentType,
+  VideoSelfieStrings,
+  VideoSelfieTurnDirection,
+} from './VideoSelfieStrings';
+import './ScreenLayout.css';
+import './ViewfinderScreen.css';
+import './VideoSelfieLayout.css';
+
+/** The two beats each direction is drawn in: the stage ASKING (dashed guide
+ *  ring) and the stage having SEEN it (the positive ring). */
+export type VideoSelfieTurnStage = 'ask' | 'done';
+
+/**
+ * Direction → the mark under the ring, from the canonical bank at 2xl (48) —
+ * the size the frames draw it (`element container` 342×48, the glyph centred).
+ *
+ * Since the Core and Enterprise icon unification (Sofia, 2026-10-06) the
+ * mark is the library chevron at 2xl: the four solid circle arrows left the
+ * bank (their old names now alias the chevrons). Nothing is drawn here (§10).
+ *
+ * The mark never mirrors in RTL (Sofia, 2026-10-07): a head turn is a
+ * physical direction, so the chevrons keep their LTR orientation in Hebrew.
+ * The opt-out is one scoped rule in `VideoSelfieLayout.css`; the chevrons
+ * still mirror everywhere else.
+ */
+const TURN_ICON: Record<VideoSelfieTurnDirection, ReactNode> = {
+  left: <IconChevronLeft size="2xl" />,
+  right: <IconChevronRight size="2xl" />,
+  up: <IconChevronUp size="2xl" />,
+  down: <IconChevronDown size="2xl" />,
+};
+
+export interface VideoSelfieTurnHeadScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Module copy — this screen reads `selfieCapture.turn`. */
+  strings: VideoSelfieStrings;
+  /** Which way the user is asked to turn. Default `left`. */
+  direction?: VideoSelfieTurnDirection;
+  /** Asking, or seen. Default `ask`. */
+  stage?: VideoSelfieTurnStage;
+  /** Which document the journey collects — the Stepper's own `documentType`. */
+  documentType?: VideoSelfieDocumentType;
+  /** Live camera feed (<video>) or sample still (<img>), full-bleed behind
+   *  the ring. */
+  camera?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Video Selfie — the head-turn beats of the liveness sequence (Archetype D,
+ * GUIDELINES.md §6-D; always dark). NEW 2026-09-30: the `🙂‍↔️ Turn Head` band
+ * of the Web / iOS / Android full-flow frames draws four directions, each in
+ * two beats, and none of them existed in the screens package — the module
+ * jumped straight from the liveness ring to the spoken steps.
+ *
+ * The frames are the liveness stage with three changes, and nothing else:
+ *
+ * - the ring is Core's GUIDE stroke (`ring="dashed"`) while the stage waits
+ *   for the turn, and the positive ring once it has seen it;
+ * - the silhouette guide is ON (Core's `empty`), because the user is being
+ *   asked to move their face rather than hold it still;
+ * - a small arrow chip sits between the ring and the instruction, saying
+ *   which way.
+ *
+ * The mark under the ring is a canonical bank glyph at 2xl — the disc is part
+ * of the drawing, not something this screen paints. `PrizmaTitle.icon` takes
+ * `status | spinner | none` only (DEVIATIONS #10), so the block below the ring
+ * is composed here; it declares a gap and nothing else. CORE REQUEST stands: a
+ * `glyph` slot on the capture stage, so this and Face Capture's future hint
+ * marks share one component. DEVIATIONS #VS-20.
+ */
+export const VideoSelfieTurnHeadScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieTurnHeadScreenProps
+>(
+  (
+    {
+      strings,
+      direction = 'left',
+      stage = 'ask',
+      documentType = 'id',
+      camera,
+      screenId = `video-selfie-turn-${direction}-${stage}`,
+      overrides,
+      onAction,
+      className,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaScreenShell
+      ref={ref}
+      dark
+      /* The camera owns the whole window, never a column of it — see the
+         contract note in `VideoSelfieLayout.css`. */
+      data-pcs-overlay="window"
+      className={className}
+      {...shell}
+    >
+      <div className="prizma-viewfinder__surface">{camera}</div>
+      <div className="video-selfie-stepper">
+        <PrizmaStepper
+          steps={7}
+          currentState={4}
+          documentType={documentType}
+          completedValueText={strings.stepperCompletedLabel}
+        />
+      </div>
+      <div
+        className={[
+          'prizma-viewfinder__content',
+          overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <div className="video-selfie-band video-selfie-band--ring">
+          <PrizmaSelfieCapture
+            mode="overlay"
+            scrim
+            /* The ring says WHICH WAY: the half on the side being asked for
+               is dashed while the stage waits and positive once it has seen
+               the turn, and the other half stays the neutral track. The state
+               is `filled` on both beats — the verdict lives in the arc, not in
+               the whole ring, so nothing else about the stage changes. */
+            guide={{ side: direction, state: stage === 'ask' ? 'waiting' : 'seen' }}
+            state="filled"
+            showFeedback={false}
+          />
+          {/* Both beats carry the SAME chip and the same instruction — the
+              frames change only the ring. Nothing is announced on the turn
+              itself, which is why the stage is handed no `statusLabels`: in
+              overlay mode a verdict with no copy is a ring colour, not a
+              message. */}
+          <div className="video-selfie-turn">
+            <span className="video-selfie-turn__mark">{TURN_ICON[direction]}</span>
+            <p className="prizma-viewfinder__title">
+              {strings.selfieCapture.turn[direction]}
+            </p>
+          </div>
+        </div>
+      </div>
+    </PrizmaScreenShell>
+  ),
+);
+VideoSelfieTurnHeadScreen.displayName = 'VideoSelfieTurnHeadScreen';
+
+export default VideoSelfieTurnHeadScreen;