@incodetech/prizma-core-screens 0.2.3 → 0.2.7

package/src/VideoSelfieLayout.css

@@ -63,6 +63,27 @@
   z-index: 1;
 }
 
+/* ── The face ring sits in the SAME place on every screen ────────────────────
+ * Figma puts `ring-uploading` at (27, 188) on every frame that draws it —
+ * `8.x`, `9.x`, the four head turns and the wave — and never moves it. Left
+ * to the flex band the ring drifted instead, because what sits UNDER it
+ * changes from screen to screen: an instruction on `8.0`, a spinner and a
+ * label on `8.1`, an arrow chip plus a line on the turns, nothing at all
+ * behind the wave's card. Centring a taller stack pushes the ring up
+ * (measured 150 / 165 / 185 across three screens where the frames say 188),
+ * and a capture window that moves between steps reads as a glitch.
+ *
+ * So the ring band is TOP-aligned and the offset is named once. 188 is
+ * Figma's; 84 is where the content column starts here (the status-bar reserve
+ * plus the 37 stepper band); 40 is Core's own padding above the stage inside
+ * `PrizmaSelfieCapture`. What is left is the air this rule owns. Everything
+ * under the ring then flows below it, which is what the frames draw.
+ * DEVIATIONS #VS-24. */
+.video-selfie-band--ring {
+  justify-content: flex-start;
+  padding-top: calc(188px - var(--pcs-status-bar, 47px) - 37px - var(--prizma-spacing-40));
+}
+
 /* ── Recording indicator (10.1 / 11.1 / 11.3 / 11.5) ─────────────────────────
  * A sound-wave glyph over the "Recording…" HUD line. The glyph ink is Core's
  * own Static camera ink — the token `PrizmaCaptureManual` uses for the shutter
@@ -106,6 +127,33 @@
   align-items: center;
 }
 
+/* The two verdict cards (`10.2` processing, `10.3` success) carry no buttons,
+ * so their content stack is two rows where the prompt's is three — left alone
+ * they came out ~70px shorter and the sheet jumped as the step advanced. The
+ * owner's call (2026-09-30) is that every card in the step is the same size,
+ * so the card takes the prompt's measure and centres its content in it.
+ *
+ * 184 is Figma's own `modal-light` height on `10.0` / `10.1`, which is what
+ * the prompt renders at; it is the module's geometry, not a token, and it is
+ * a MINIMUM — the card still grows if a translation needs more room.
+ * DEVIATIONS #VS-25. */
+/* ⚠ The card, not the wrapper, has to do the centring. `height: 100%` on the
+ * wrapper resolved to `auto` — Core's `.prizma-modal` is not a flex container
+ * and its height is content-driven, so a percentage height had nothing to
+ * measure against and the block stayed pinned to the top (owner, 2026-09-30:
+ * "these are aligned to the top instead of centered"). Making the CARD the
+ * flex column is what actually distributes the extra height. */
+.video-selfie-sheet-panel--status .prizma-modal {
+  min-height: 184px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.video-selfie-sheet-panel--status .prizma-modal__title {
+  text-align: center;
+}
+
 /* The card's verdict mark (10.3 / 11.x success). The glyph itself is the
  * canonical bank icon Core's own `PrizmaTitle` uses for `status: success`
  * (`IconStatusPositive` at Title/Icon/Size); only the INK is set here, because
@@ -155,10 +203,49 @@
   color: var(--prizma-text-body-500-secondary);
 }
 
+/* ── The document frame's own measure ────────────────────────────────────────
+ * `3.x` / `5.x` / `6.x` all draw `ID Capture Frame` at **286 × 455**, centred
+ * in the 390 column (52 either side) — and they keep that measure on every
+ * device section in the file: 320, 368, 390, 430 and the 892-wide Pixel Fold
+ * all show the same 286-wide frame, only the air around it changes.
+ *
+ * Core's `PrizmaIdCapture` is `width: 100%` + `aspect-ratio: 288/456`, so left
+ * alone it takes the whole content column: 342 × 541 at 390, which ran the
+ * frame down into the verified tag (owner-reported in the 320 sweep,
+ * 2026-09-28, and the reason the stage read broken at every width, 2026-09-30).
+ *
+ * So the MODULE caps it, exactly as the frames do. `min()` keeps the cap from
+ * turning into a floor: on a column narrower than the frame it gives ground
+ * instead of spilling, which is what the 320 sections show. The aspect ratio
+ * stays Core's. DEVIATIONS #VS-18. */
+.video-selfie-stage {
+  /* Figma geometry, not a token: `ID Capture Frame` is 286 wide on every
+     device section of this module. */
+  width: min(286px, 100%);
+  /* The viewfinder column stretches its children, so a child that names its
+     own width lands flush LEFT — which put the frame 16px off the phone's
+     centre line while the status card floating on it stayed centred. */
+  margin-inline: auto;
+}
+
+/* `IdCaptureLayout.css` gives every vertical stage inside a viewfinder a
+ * `flex-basis` of "the full column over the aspect", so the frame can give up
+ * height on a short screen and the aspect then narrows it back (Camila,
+ * 2026-09-28). That machinery is right and stays — it just has to start from
+ * THIS module's capped width, not the whole column: fed 342 it computed a
+ * 541-tall frame and then clamped the width back to 286, which is how the
+ * stage ended up 286 × 541 instead of 286 × 455 and grew into the verified
+ * tag. Same formula, capped input. */
+.prizma-viewfinder__content
+  > .video-selfie-stage.prizma-id-capture--vertical:not(.prizma-id-capture--poa)
+  .prizma-id-capture__frame {
+  flex-basis: calc(min(286px, 100cqw - 2 * var(--prizma-spacing-24)) * 456 / 288);
+}
+
 /* ── The captured document inside the vertical frame ─────────────────────────
  * Groups 3 and 5 draw the ID UPRIGHT in a portrait frame: the card is rotated a
- * quarter turn so its long edge runs down the screen, exactly as `3.2` and
- * `5.2` show it (the licence's text reads bottom-to-top).
+ * quarter turn so its long edge runs down the screen, exactly as `3.1`/`3.2`
+ * and `5.1`/`5.2` show it (the licence's text reads bottom-to-top).
  *
  * The sample scans are landscape (328×202). Dropped into a portrait frame with
  * Core's `object-fit: cover` they scaled 4.2× to fill the height and lost their
@@ -166,40 +253,41 @@
  * zoomed in to fit height, when it should be 90 degrees to fit the frame").
  * Rotating instead of cropping keeps the whole document legible.
  *
- * `width`/`height` are swapped BEFORE the rotation because a rotated element
- * still lays out on its pre-transform box: the image is sized to the frame's
- * height × width, then turned, so it lands exactly frame-sized. No literal —
- * both are percentages of whatever box Core gives it. DEVIATIONS #VS-6.
- */
-/* The captured document is landscape (a card scan); the VERTICAL frame is
- * portrait. `object-fit: cover` cropped its sides away and blew it up 4.2× —
- * the band of static the owner reported. Figma turns the card a quarter turn
- * instead, so the whole document stays legible with its text running up the
- * side, exactly as `3.2` / `5.2` draw it.
- *
- * The image is sized to the frame's height × width BEFORE the turn, because a
+ * The image is sized to the frame's HEIGHT × WIDTH before the turn, because a
  * rotated element still lays out on its pre-transform box — so after the 90°
  * it lands exactly frame-sized. Both values are percentages of whatever box
- * Core gives it, so nothing is hardcoded. DEVIATIONS #VS-6. */
+ * Core gives it, so nothing is hardcoded.
+ *
+ * ⚠ The first pass centred that oversized box with `display: grid;
+ * place-items: center`, which does NOT centre it: a grid item WIDER than its
+ * area is clamped to the start edge (the browsers' overflow-safety rule). The
+ * card therefore laid out at the frame's top-left, and turning it around ITS
+ * centre threw it 75px right and 75px up — hanging off two sides of the frame
+ * and across the camera. That is the "ID shown in a very weird way" report
+ * (owner, 2026-09-30). Absolute centring has no such clamp, so the turn
+ * happens around the frame's real middle. DEVIATIONS #VS-6. */
 .prizma-id-capture--vertical .prizma-id-capture__still {
   /* A size container, so the image can be measured against the frame's OWN
      box — `cqh`/`cqw` below are the only way to swap width and height without
      writing either number down. The frame has definite dimensions, which is
      what `container-type: size` requires. */
   container-type: size;
-  display: grid;
-  place-items: center;
   overflow: hidden;
 }
 
 .prizma-id-capture--vertical .prizma-id-capture__still > img {
   /* Swapped on purpose: the image is laid out at the frame's HEIGHT × WIDTH,
-     then turned a quarter, so it lands exactly frame-sized. */
+     then turned, so it lands exactly frame-sized. */
+  position: absolute;
+  inset: auto;
+  top: 50%;
+  left: 50%;
   width: 100cqh;
   height: 100cqw;
   max-width: none;
   object-fit: cover;
-  transform: rotate(90deg);
+  /* Centre first, THEN turn — around the frame's own middle. */
+  transform: translate(-50%, -50%) rotate(90deg);
   transform-origin: center;
 }
 
@@ -222,26 +310,69 @@
   pointer-events: none;
 }
 
-.video-selfie-stage-status > * {
-  padding: var(--prizma-spacing-16) var(--prizma-spacing-24);
+/* The card itself: hugs its content, never wider than the document frame it
+ * floats on (Figma's widest, `6.1.3`'s three-line rejection, is 260 inside the
+ * 286 frame), and always dark — the camera stage never mode-flips. The mark
+ * stacks above the label because the content is Core's `PrizmaTitle`; the card
+ * only supplies the surface and the air around it. */
+.video-selfie-stage-status__card {
+  box-sizing: border-box;
+  max-width: min(260px, 100%);
+  padding: var(--prizma-spacing-24);
   border-radius: var(--prizma-border-radius-medium);
-  background: var(--prizma-surface-neutral-900-80-static);
+  background: var(--prizma-surface-neutral-900-static);
 }
 
-/* ── Tutorial step rows ──────────────────────────────────────────────────────
- * The <ul> Core's `PrizmaList` would normally supply. Composed here only
- * because the wrapper's icon variants cap at six rows and the tutorial draws
- * seven (#VS-8); the gap is the variant's OWN Spacing/12 — nothing new.
- */
-.video-selfie-tutorial-list {
+/* Both pieces inside the card sit ON that dark surface, so their ink is the
+ * camera HUD's own Static white rather than the theme's primary — the same
+ * re-seat `SelfieCapture.css` does for its overlay status band. */
+.video-selfie-stage-status__card .prizma-title__heading,
+.video-selfie-stage-status__card .prizma-loading-spinner__title {
+  color: var(--prizma-text-body-0-static);
+}
+
+/* ── The coaching bubble above the document frame ────────────────────────────
+ * The five condition frames put `Capture feedback` at the TOP of the content,
+ * over the camera and above the frame. The band it sits in is already the
+ * flexible one; this only pins it to the band's top edge and lifts it over
+ * the stage's scrim (the trap `ViewfinderScreen.css` documents on `__intro`:
+ * the scrim is an absolutely positioned sibling with an escaping box-shadow,
+ * so unlifted content renders under an 80% veil). The bubble's own width,
+ * radius, ink and illustration are Core's. DEVIATIONS #VS-28. */
+.video-selfie-feedback {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  /* Top of the band, which is directly under the stepper — where the five
+     condition frames seat it (bubble top y≈88 of 844). */
+  margin-block: 0 auto;
+}
+
+/* ── The head-turn mark and its instruction ──────────────────────────────────
+ * The `🙂‍↔️ Turn Head` band puts a 48 circled arrow between the ring and the
+ * line that says which way to turn (`element container` 342×48, the glyph
+ * centred, then 16 to the text). The gap is Core's own Spacing/16; the copy is
+ * the foundation's `.prizma-viewfinder__title`, unchanged. Lifted over the
+ * stage's scrim for the reason `ViewfinderScreen.css` documents on `__intro`.
+ * DEVIATIONS #VS-20. */
+.video-selfie-turn {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
+  gap: var(--prizma-spacing-16);
   width: 100%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  gap: var(--prizma-spacing-12);
+}
+
+/* The mark is ONE bank glyph at 2xl — a filled disc with the arrow knocked
+ * out — so this only inks it. The first pass wrapped a 24 bare arrow in a
+ * hand-made disc and read as a thin chevron on the camera. */
+.video-selfie-turn__mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--prizma-icon-neutral-50-static);
 }
 
 /* Step rows — the <ol> `PrizmaList` would supply, composed here only because

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,42 @@ 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
-        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}
-        {...shell}
-      />
+      <PrizmaScreenShell ref={ref} dark 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>
         }
       />
@@ -214,6 +222,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(' ')}