@incodetech/prizma-core-screens 0.1.0

package/src/VideoSelfieSpeakScreen.tsx

@@ -0,0 +1,237 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { IconSoundWave, IconStatusPositive } from '@incodetech/prizma-core-icons';
+import { PrizmaLoadingSpinner } from '@incodetech/prizma-core-web/loading-spinner';
+import { PrizmaModalContent } from '@incodetech/prizma-core-web/modal';
+import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  VideoSelfieDocumentType,
+  VideoSelfieSpeakFamily,
+  VideoSelfieStrings,
+} from './VideoSelfieStrings';
+import './ScreenLayout.css';
+import './ViewfinderScreen.css';
+import './VideoSelfieLayout.css';
+
+/** Which purple section of groups 10 / 11 to render. */
+export type VideoSelfieSpeakStage =
+  | 'idle'
+  | 'recording'
+  | 'processing'
+  | 'success'
+  | 'confirm';
+
+/** Which beat of the seven-step journey each spoken family occupies — the
+ *  questions are step 6, the consent sentence is the last one. */
+const STEP: Record<VideoSelfieSpeakFamily, 6 | 7> = { question: 6, voiceConsent: 7 };
+
+export interface VideoSelfieSpeakScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Module copy — this screen reads the `speak` slice. */
+  strings: VideoSelfieStrings;
+  /** Which prompt family: the consent sentence (group 10) or the identity
+   *  questions (group 11). Default `voiceConsent`. */
+  family?: VideoSelfieSpeakFamily;
+  /** Which prompt of the family to show. Default `0`. */
+  promptIndex?: number;
+  /** Which purple section to render. Default `idle`. */
+  stage?: VideoSelfieSpeakStage;
+  /** Which document the journey collects — the Stepper's own `documentType`. */
+  documentType?: VideoSelfieDocumentType;
+  /** Live camera feed (<video>) or sample still (<img>). */
+  camera?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Video Selfie — the spoken steps. ONE screen for ELEVEN purple sections:
+ * `voice consent 10.0–10.4` and `questions 11.0–11.5`. The two Figma groups
+ * draw the identical skeleton — the live camera under Core's Modal card, the
+ * journey stepper on top — and differ only in which prompt the card asks and
+ * which beat of the stepper is lit. Two files would have been two chances to
+ * drift, the same reasoning `GeolocationBrowserStepsScreen` settled for its
+ * nine browser sections.
+ *
+ * No archetype models "a card over a live camera": archetype A's `overlay` slot
+ * is the closest, but its base is a tutorial, not a viewfinder. So this screen
+ * owns its composition the way archetype D is owned (a recipe, not a
+ * component), reusing the foundation's camera-surface and HUD-typography
+ * classes verbatim (`.prizma-viewfinder__surface` / `__content` / `__title`).
+ * The card itself is Core's `PrizmaModalContent` — the exact instance Figma
+ * names (`modal-light`) — and the scrim/panel positioning is the recipe
+ * Document Capture's method sheet already established (DEVIATIONS #DC-30): the
+ * safe presenter portals to `document.body`, which would escape the 390×844
+ * frame and the host's `transform: scale()`.
+ *
+ * Two divergences from the frames, both Core-wins and both reported:
+ *
+ * - **Eyebrow position.** Figma stacks "Please say out loud" ABOVE the prompt.
+ *   Core's Modal renders `subtitle` BELOW `title` and has no eyebrow slot, so
+ *   the eyebrow ships as the subtitle.
+ * - **Leading media.** Figma puts the spinner / verdict mark ABOVE the label on
+ *   the `processing` and `success` cards. Core's Modal renders `body` and
+ *   `image` after the heading; a Core `leading` slot is requested.
+ *
+ * Every stage renders differently: `idle` draws the outlined "Tap to answer",
+ * `recording` swaps it for the filled "Tap when done" AND lights the sound-wave
+ * HUD over the camera, `processing` replaces the card body with Core's spinner,
+ * `success` with the verdict mark, and `confirm` dims the whole screen behind a
+ * centred two-button dialog.
+ */
+export const VideoSelfieSpeakScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieSpeakScreenProps
+>(
+  (
+    {
+      strings,
+      family = 'voiceConsent',
+      promptIndex = 0,
+      stage = 'idle',
+      documentType = 'id',
+      camera,
+      screenId = `video-selfie-${family}-${stage}`,
+      overrides,
+      onAction,
+      className,
+      ...shell
+    },
+    ref,
+  ) => {
+    const slice = strings.speak[family];
+    const prompt = slice.prompts[promptIndex] ?? slice.prompts[0] ?? '';
+    const isConfirm = stage === 'confirm';
+
+    const card = isConfirm ? (
+      <PrizmaModalContent
+        title={slice.confirm.title}
+        subtitle={slice.confirm.subtitle}
+        showCloseIcon={false}
+        buttonGroupProps={{
+          orientation: 'vertical-v1',
+          showPrimary: true,
+          showSecondary: true,
+          primaryLabel: slice.confirm.ctaLabel,
+          onPrimaryClick: () => onAction?.({ type: 'cta', screenId }),
+          secondaryLabel: slice.confirm.retryLabel,
+          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' ? (
+      <PrizmaModalContent
+        title={slice.successLabel}
+        showButtonGroup={false}
+        closeLabel={slice.closeLabel}
+        onClose={() => onAction?.({ type: 'tertiary', screenId })}
+        body={
+          <span className="video-selfie-sheet-status">
+            <IconStatusPositive size="xl" />
+          </span>
+        }
+      />
+    ) : (
+      <PrizmaModalContent
+        title={prompt}
+        subtitle={slice.eyebrow}
+        /* No dismiss ✕ on the record step: the sheet IS the step, and closing it
+           would strand the user mid-recording with no way back into the flow
+           (owner-reported 2026-08-19). The confirm sheet already suppressed it;
+           this is the same call, applied consistently. DEVIATIONS #VS-5. */
+        showCloseIcon={false}
+        buttonGroupProps={
+          stage === 'recording'
+            ? {
+                orientation: 'vertical-v1',
+                showPrimary: true,
+                showSecondary: false,
+                primaryLabel: slice.recordingCtaLabel,
+                onPrimaryClick: () => onAction?.({ type: 'cta', screenId }),
+              }
+            : {
+                orientation: 'vertical-v1',
+                showPrimary: false,
+                showSecondary: true,
+                secondaryLabel: slice.idleCtaLabel,
+                onSecondaryClick: () => onAction?.({ type: 'cta', screenId }),
+              }
+        }
+      />
+    );
+
+    return (
+      <PrizmaScreenShell ref={ref} dark className={className} {...shell}>
+        <div className="prizma-viewfinder__surface">{camera}</div>
+        <div className="video-selfie-stepper">
+          <PrizmaStepper
+            steps={7}
+            currentState={STEP[family]}
+            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">
+            {stage === 'recording' ? (
+              <span className="video-selfie-recording">
+                <IconSoundWave size="xl" />
+                <span className="prizma-viewfinder__title">{slice.recordingLabel}</span>
+              </span>
+            ) : null}
+          </div>
+        </div>
+        {isConfirm ? (
+          <div className="video-selfie-sheet-scrim" aria-hidden="true" />
+        ) : null}
+        {/* The sheet is LIGHT even though the screen is dark. `PrizmaScreenShell
+            dark` pins the whole subtree to the dark theme so the camera inks
+            read, and `PrizmaModalContent` was drinking it — the card came out
+            solid black where every `10.x`/`11.x` section draws Figma's
+            `modal-light`: dark title on white (owner QA 2026-08-19).
+            `data-prizma-theme` is the same per-subtree switch `ScreenShell`
+            itself uses, so the pin is scoped back to light for the card only —
+            the feed, the stepper and the "Recording…" HUD stay dark.
+            DEVIATIONS #VS-10. */}
+        <div
+          data-prizma-theme="light"
+          className={[
+            'video-selfie-sheet-panel',
+            isConfirm ? 'video-selfie-sheet-panel--centered' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          {card}
+        </div>
+        {/* NO footer tag on the spoken steps — and this is deliberate, not an
+            omission. The sheet is bottom-anchored and covers exactly the strip
+            the tag occupies, so a tag here is painted over on all 11 states
+            (owner QA 2026-08-19 measured it under the panel). Figma agrees:
+            `10.x` / `11.x` draw no tag. Rendering one invisibly is the worst of
+            both — the attribution is absent either way, but the DOM claims
+            otherwise. The capture screens that DO have room keep theirs
+            (`VideoSelfieIdCaptureScreen`, #VS-3). DEVIATIONS #VS-11. */}
+      </PrizmaScreenShell>
+    );
+  },
+);
+VideoSelfieSpeakScreen.displayName = 'VideoSelfieSpeakScreen';
+
+export default VideoSelfieSpeakScreen;

package/src/VideoSelfieStrings.ts

@@ -0,0 +1,222 @@
+// Video Selfie — module copy contract.
+//
+// Every string the module's screens render arrives through this shape: the
+// screens themselves ship NO English (GUIDELINES.md §9, same rule as
+// prizma-core-web). Figma: `🎥 Video selfie - Screens specs & behavior`
+// (X1clC8Sf8V0vJ1CbD61VJu, page 2013:23309) — 14 numbered groups holding 54
+// purple spec sections.
+//
+// The slice names track the Figma group numbers so a designer can go from a
+// frame to a key without a translation table:
+//   tutorial (1) · permission (2) · idCapture (3 · 5 · 6) · flipId (4) ·
+//   flipCamera (7) · selfieCapture (8 · 9) · speak (10 · 11) ·
+//   processing (12) · success (13) · errors (14).
+
+/** Which document the journey is collecting — drives the tutorial row list
+ *  and Core's `PrizmaStepper` icon sequence. */
+export type VideoSelfieDocumentType = 'id' | 'passport';
+
+/** One icon + label row of the tutorial's "you'll be requested to" list. */
+export interface VideoSelfieTutorialRow {
+  /** Which canonical bank glyph leads the row. */
+  kind: VideoSelfieTutorialRowKind;
+  label: string;
+}
+
+/**
+ * The seven beats of the journey, in Figma order. They double as the icon keys
+ * for the tutorial rows — the same seven glyphs Core's `PrizmaStepper` uses
+ * (its icon set is documented as "the Video Selfie sequence").
+ */
+export type VideoSelfieTutorialRowKind =
+  | 'recording'
+  | 'idFront'
+  | 'idBack'
+  | 'passport'
+  | 'frontCamera'
+  | 'waveHand'
+  | 'questions'
+  | 'speak';
+
+/** The eleven live-feedback messages of group 9, in Figma order. */
+export type VideoSelfieFeedbackKind =
+  | 'dark'
+  | 'blurry'
+  | 'maskDetected'
+  | 'glassesDetected'
+  | 'headTilted'
+  | 'lookAtCamera'
+  | 'turnRight'
+  | 'turnLeft'
+  | 'alignFace'
+  | 'moveCloser'
+  | 'moveAway';
+
+/** 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.
+ */
+
+/** Whether the rejection invites a retry (`6.1` / `6.3`) or is terminal
+ *  (`6.2` / `6.4`). */
+export type VideoSelfieIdErrorSeverity = 'tryAgain' | 'failed';
+
+/** Which prompt family the speak step is running: the consent sentence
+ *  (group 10) or one of the identity questions (group 11). */
+export type VideoSelfieSpeakFamily = 'voiceConsent' | 'question';
+
+/**
+ * Which device family the settings walk-through documents. The purple section
+ * `permissions 2.5 - camera access instructions` holds TWO Incode-drawn
+ * symbols, not one: `2.5 - ios` and `2.6 - android`. They are NOT the same
+ * screen with translated copy — Android draws a SECOND five-step numbered list
+ * under "Screen recording permission" where iOS draws a one-line remark, and
+ * adds a closing note under both lists.
+ */
+export type VideoSelfieStepsOs = 'ios' | 'android';
+
+/** One device variant of the OS settings walk-through (`2.5` / `2.6`). */
+export interface VideoSelfieStepsStrings {
+  title: string;
+  subtitle: string;
+  /** Label over the first numbered list. */
+  microphoneTitle: string;
+  /** The five numbered microphone rows — different wording per OS. */
+  microphoneSteps: string[];
+  /** Label over the screen-recording section. */
+  recordingTitle: string;
+  /** iOS (`2.5`) closes the recording section with a plain remark and NO steps.
+   *  Read only when `recordingSteps` is absent. */
+  recordingNote?: string;
+  /** Android (`2.6`) draws a SECOND numbered list here instead of the remark. */
+  recordingSteps?: string[];
+  /** Android (`2.6`) only — the closing remark under both lists. */
+  closingNote?: string;
+  ctaLabel: string;
+}
+
+export interface VideoSelfieSpeakStrings {
+  /** Small line above the prompt ("Please say out loud"). */
+  eyebrow: string;
+  /** The sentences/questions the user must speak, in Figma order. */
+  prompts: string[];
+  /** CTA before recording starts. */
+  idleCtaLabel: string;
+  /** CTA while recording. */
+  recordingCtaLabel: string;
+  /** HUD line over the camera while recording ("Recording…"). */
+  recordingLabel: string;
+  /** In-flight card copy. */
+  processingLabel: string;
+  /** Accepted card copy. */
+  successLabel: string;
+  /** Accessible name for the card's dismiss control. */
+  closeLabel: string;
+  /** The "Finished speaking?" confirmation dialog (10.4). */
+  confirm: {
+    title: string;
+    subtitle: string;
+    ctaLabel: string;
+    retryLabel: string;
+  };
+}
+
+export interface VideoSelfieStrings {
+  /** Accessible name for the nav region. */
+  navLabel: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+  /** Accessible name Core's Stepper announces when the journey is done. */
+  stepperCompletedLabel: string;
+
+  /** Group 1 — tutorial (`1.0` id · `1.2` passport). */
+  tutorial: {
+    title: string;
+    subtitle: string;
+    ctaLabel: string;
+    /** Row list per document type — the two purple variants. */
+    rows: Record<VideoSelfieDocumentType, VideoSelfieTutorialRow[]>;
+  };
+
+  /** Group 2 — permissions. */
+  permission: {
+    /** `2.0` — the in-page request. */
+    request: {
+      title: string;
+      subtitle: string;
+      ctaLabel: string;
+      learnMoreLabel: string;
+    };
+    /** `2.2` — permission refused / required. */
+    required: {
+      title: string;
+      rows: string[];
+      ctaLabel: string;
+      quitLabel: string;
+    };
+    /** `2.5` / `2.6` — the OS settings walk-through, one entry per device
+     *  family. Both symbols live inside the SAME purple section. */
+    steps: Record<VideoSelfieStepsOs, VideoSelfieStepsStrings>;
+  };
+
+  /** Groups 3 · 5 · 6 — the document stage. */
+  idCapture: {
+    /** In-flight label under the frame (`3.2` / `5.2`). */
+    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>;
+  };
+
+  /** Group 4 — the flip interstitial. */
+  flipId: { title: string };
+
+  /** Group 7 — the camera swap interstitial. */
+  flipCamera: { title: string };
+
+  /** Groups 8 · 9 — the liveness ring. */
+  selfieCapture: {
+    /** `8.0` instruction. */
+    startLabel: string;
+    /** `8.1` in-flight. */
+    processingLabel: string;
+    /** `8.2` accepted. */
+    successLabel: string;
+    /** `8.3` rejected. */
+    failedLabel: string;
+    /** Group 9 — the eleven live-feedback lines. */
+    feedback: Record<VideoSelfieFeedbackKind, string>;
+  };
+
+  /** Groups 10 · 11 — the spoken steps. */
+  speak: Record<VideoSelfieSpeakFamily, VideoSelfieSpeakStrings>;
+
+  /** Group 12. */
+  processing: { title: string; subtitle: string };
+
+  /** Group 13. */
+  success: { title: string };
+
+  /** Group 14 — the generic errors. */
+  errors: {
+    /** `14.0` — the module could not process the recording. */
+    processingFailed: { title: string; subtitle: string; ctaLabel: string };
+    /** `14.1` — recoverable, with the "how to do better" list. */
+    retry: { title: string; tips: string[]; ctaLabel: string };
+    /** `14.2` — a single step blew up (drawn on the dark camera surface). */
+    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 };
+  };
+}

package/src/VideoSelfieSuccessScreen.tsx

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaProcessingScreen,
+  type PrizmaProcessingScreenProps,
+} from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+
+export interface VideoSelfieSuccessScreenProps
+  extends Omit<
+    PrizmaProcessingScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `success` slice. */
+  strings: VideoSelfieStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Video Selfie — the module's verdict, built on the Processing archetype
+ * (GUIDELINES.md §6-C). Figma: purple section `video selfie - success
+ * 13.0 - default`.
+ *
+ * The same skeleton as the processing screen with the spinner swapped for
+ * Core's positive status mark and no supporting line — which is precisely the
+ * `status` axis archetype C already models, so the two screens cannot drift
+ * apart. Still archetype C rather than F: the section carries no button at all
+ * (the host advances the flow).
+ */
+export const VideoSelfieSuccessScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieSuccessScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'video-selfie-success',
+      showHeader = true,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaProcessingScreen
+      ref={ref}
+      showHeader={showHeader}
+      status="success"
+      title={strings.success.title}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+VideoSelfieSuccessScreen.displayName = 'VideoSelfieSuccessScreen';
+
+export default VideoSelfieSuccessScreen;

package/src/VideoSelfieTutorialScreen.tsx

@@ -0,0 +1,129 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import {
+  IconBankCard,
+  IconIdFront,
+  IconMessages,
+  IconMicrophone,
+  IconNumberedList,
+  IconPassport,
+  IconUser,
+  IconWavingHand,
+} from '@incodetech/prizma-core-icons';
+import { PrizmaListItem } from '@incodetech/prizma-core-web/list';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  VideoSelfieDocumentType,
+  VideoSelfieStrings,
+  VideoSelfieTutorialRowKind,
+} from './VideoSelfieStrings';
+import './ScreenLayout.css';
+
+/**
+ * Journey beat → canonical bank glyph. ONE map, in one place — the same seven
+ * glyphs Core's `PrizmaStepper` carries (its icon set is documented as "the
+ * Video Selfie sequence"), so the tutorial promises exactly the steps the
+ * stepper later counts off. Nothing is drawn here (§10).
+ */
+const ROW_ICONS: Record<VideoSelfieTutorialRowKind, ReactNode> = {
+  recording: <IconMicrophone size="m" />,
+  idFront: <IconIdFront size="m" />,
+  idBack: <IconBankCard size="m" />,
+  passport: <IconPassport size="m" />,
+  frontCamera: <IconUser size="m" />,
+  waveHand: <IconWavingHand size="m" />,
+  questions: <IconNumberedList size="m" />,
+  speak: <IconMessages size="m" />,
+};
+
+export interface VideoSelfieTutorialScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `tutorial` slice. */
+  strings: VideoSelfieStrings;
+  /** Which purple tutorial section: `1.0` (id) or `1.2` (passport). Default
+   *  `id`. The two differ ONLY in the row list — the passport journey collects
+   *  one photo page instead of a front and a back. */
+  documentType?: VideoSelfieDocumentType;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Video Selfie — tutorial, built on the List archetype (GUIDELINES.md §6-G,
+ * `PrizmaListScreen`). Figma: purple sections `video selfie - tutorial 1.0`
+ * and `1.2 - with passport`.
+ *
+ * The screen is a title block over a promise list and one CTA, which is exactly
+ * archetype G: the rows are Core's `PrizmaListItem` (`icon-m`) verbatim (only
+ * the leading glyph is chosen here, from `ROW_ICONS`), the Spacing/24 above the
+ * list is the archetype's `__list`, and the band is the archetype's. This file
+ * declares no layout of its own.
+ *
+ * NOT archetype A: A centres one illustration in the flexible middle; here the
+ * middle is a seven-row list that must span the column and start at the top —
+ * the distinction `ScreenLayout.css` draws between `__flex` and `__list`.
+ */
+export const VideoSelfieTutorialScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieTutorialScreenProps
+>(
+  (
+    {
+      strings,
+      documentType = 'id',
+      screenId = `video-selfie-tutorial-${documentType}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaListScreen
+      ref={ref}
+      title={strings.tutorial.title}
+      subtitle={strings.tutorial.subtitle}
+      ctaLabel={strings.tutorial.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      {/* Core's LIST-WITH-ICON rows. `1.0`/`1.2` draw the steps as plain
+          icon + label rows with NO card surface behind them, so
+          `PrizmaCardListCommonIssues` was wrong — it gave every row a tinted
+          card the design does not have (owner-reported 2026-08-19).
+
+          The rows are Core's `PrizmaListItem` (`icon-m`), composed directly
+          rather than through `PrizmaList`: the wrapper's icon variants cap at
+          SIX slots and silently drop the rest, and this tutorial draws SEVEN
+          steps. The <ul> carries only the variant's own Spacing/12 rhythm —
+          no new value. CORE REQUEST: let `PrizmaList`'s icon variants take a
+          seventh row. DEVIATIONS #VS-8.
+       */}
+      <ul className="video-selfie-tutorial-list">
+        {strings.tutorial.rows[documentType].map((row) => (
+          <li key={row.kind}>
+            <PrizmaListItem variant="icon-m" label={row.label} icon={ROW_ICONS[row.kind]} />
+          </li>
+        ))}
+      </ul>
+    </PrizmaListScreen>
+  ),
+);
+VideoSelfieTutorialScreen.displayName = 'VideoSelfieTutorialScreen';
+
+export default VideoSelfieTutorialScreen;