@incodetech/prizma-core-screens 0.2.4 → 0.2.7

package/dist/ScreenNav.css

@@ -28,6 +28,14 @@
   width: 100%;
 }
 
+/* With the opt-in back chevron the nav sits on the content column's 24px
+ * gutter, so the chevron lines up with the title and content below it. Core's
+ * nav already pads its row by Spacing/2, hence the subtraction. A logo-only nav
+ * is centred and needs no gutter, so nothing else moves. */
+.prizma-screen-nav--back {
+  padding-inline: calc(var(--prizma-spacing-24) - var(--prizma-spacing-2));
+}
+
 .prizma-screen-nav__custom-logo {
   display: flex;
   align-items: center;

package/dist/ScreenNav.d.ts

@@ -1,4 +1,4 @@
-import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import React, { type ComponentPropsWithoutRef, type MouseEventHandler, type ReactNode } from 'react';
 import './ScreenNav.css';
 export interface PrizmaScreenNavProps extends ComponentPropsWithoutRef<'header'> {
     /** Custom brand logo (e.g. an <img> of the client logo). Rendered centered,
@@ -16,11 +16,24 @@ export interface PrizmaScreenNavProps extends ComponentPropsWithoutRef<'header'>
      * only the logo disappears, and the row leaves the a11y tree.
      */
     reserved?: boolean;
+    /**
+     * Opt-in back chevron at the nav's LEFT — Core's own
+     * (`PrizmaNavigation.showLeftIcon`, IconChevronLeft). Passing the label turns
+     * it on; it is the button's accessible name (i18n). Off by default, so every
+     * existing screen keeps the logo-only nav. For a screen the user OPENED from
+     * another one (Qualified Signature's document viewers, reached from "View"
+     * and from the application-form link) — a way back to where they came from,
+     * not a dismiss of the flow, which stays out (#PI-9). Owner call 2026-09-29.
+     */
+    backLabel?: string;
+    /** Click handler for the back chevron. */
+    onBack?: MouseEventHandler<HTMLButtonElement>;
 }
 /**
  * ScreenNav — the logo header of every SDK screen.
  * Sits 12px below the top of the shell (the host frame owns the OS status
- * bar), logo centered, no back/close buttons (GUIDELINES.md §3).
+ * bar), logo centered, no close button (GUIDELINES.md §3). A back chevron is
+ * opt-in through `backLabel`, for opened sub-screens only.
  */
 export declare const PrizmaScreenNav: React.ForwardRefExoticComponent<PrizmaScreenNavProps & React.RefAttributes<HTMLElement>>;
 export default PrizmaScreenNav;

package/dist/ScreenNav.js

@@ -1,13 +1,20 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, } from 'react';
 import { PrizmaNavigation } from '@incodetech/prizma-core-web/navigation';
 import './ScreenNav.css';
 /**
  * ScreenNav — the logo header of every SDK screen.
  * Sits 12px below the top of the shell (the host frame owns the OS status
- * bar), logo centered, no back/close buttons (GUIDELINES.md §3).
+ * bar), logo centered, no close button (GUIDELINES.md §3). A back chevron is
+ * opt-in through `backLabel`, for opened sub-screens only.
  */
-export const PrizmaScreenNav = forwardRef(({ logo, navLabel, reserved = false, className, ...rest }, ref) => (_jsx("header", { ref: ref, "aria-hidden": reserved || undefined, className: ['prizma-screen-nav', className ?? ''].filter(Boolean).join(' '), ...rest, children: reserved ? null : logo ? (_jsx("span", { className: "prizma-screen-nav__custom-logo", children: logo })) : (_jsx(PrizmaNavigation, { showIncodeLogo: true, "aria-label": navLabel })) })));
+export const PrizmaScreenNav = forwardRef(({ logo, navLabel, reserved = false, backLabel, onBack, className, ...rest }, ref) => (_jsx("header", { ref: ref, "aria-hidden": reserved || undefined, className: [
+        'prizma-screen-nav',
+        backLabel && !reserved ? 'prizma-screen-nav--back' : '',
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' '), ...rest, children: reserved ? null : logo ? (_jsx("span", { className: "prizma-screen-nav__custom-logo", children: logo })) : (_jsx(PrizmaNavigation, { showIncodeLogo: true, "aria-label": navLabel, showLeftIcon: Boolean(backLabel), backLabel: backLabel, onLeftIconClick: onBack })) })));
 PrizmaScreenNav.displayName = 'PrizmaScreenNav';
 export default PrizmaScreenNav;

package/dist/VideoSelfieIdCaptureScreen.d.ts

@@ -1,12 +1,13 @@
 import React, { type ReactNode } from 'react';
 import { type PrizmaScreenShellProps } from './ScreenShell';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
-import type { VideoSelfieDocumentType, VideoSelfieIdErrorSeverity, VideoSelfieIdSide, VideoSelfieStrings } from './VideoSelfieStrings';
+import type { VideoSelfieDocumentType, VideoSelfieIdCondition, VideoSelfieIdErrorReason, VideoSelfieIdErrorSeverity, VideoSelfieIdSide, VideoSelfieStrings } from './VideoSelfieStrings';
 import './ScreenLayout.css';
 import './ViewfinderScreen.css';
 import './VideoSelfieLayout.css';
-/** Which purple stage section to render (groups 3, 5 and 6). */
-export type VideoSelfieIdCaptureState = 'default' | 'shown' | 'processing' | 'allGood' | 'error';
+/** Which purple stage section to render (groups 3, 5 and 6), plus the live
+ *  coaching beat the full-flow frames draw between them. */
+export type VideoSelfieIdCaptureState = 'default' | 'shown' | 'processing' | 'allGood' | 'error' | 'condition';
 export interface VideoSelfieIdCaptureScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
     /** Module copy — this screen reads the `idCapture` slice (+ shared labels). */
     strings: VideoSelfieStrings;
@@ -21,6 +22,12 @@ export interface VideoSelfieIdCaptureScreenProps extends Omit<PrizmaScreenShellP
     /** Whether the rejection invites a retry (`6.1`/`6.3`) or is terminal
      *  (`6.2`/`6.4`). Read only when `state="error"`. */
     errorSeverity?: VideoSelfieIdErrorSeverity;
+    /** WHY the read was rejected — the `.1`–`.4` suffix of the group 6 section.
+     *  Read only when `state="error"`. Default `scan`. */
+    errorReason?: VideoSelfieIdErrorReason;
+    /** Which live condition to coach the user out of. Read only when
+     *  `state="condition"`. Default `notAligned`. */
+    condition?: VideoSelfieIdCondition;
     /** Live camera feed (<video>) or sample still (<img>) behind the frame. */
     camera?: ReactNode;
     /** The captured document still, for the states Core draws one in. */

package/dist/VideoSelfieIdCaptureScreen.js

@@ -2,14 +2,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { PrizmaIdCapture, } from '@incodetech/prizma-core-web/id-capture';
+import { PrizmaCaptureFeedback } from '@incodetech/prizma-core-web/capture-feedback';
 import { PrizmaLoadingSpinner } from '@incodetech/prizma-core-web/loading-spinner';
-import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
 import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
 import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
 import { PrizmaScreenShell } from './ScreenShell';
 import './ScreenLayout.css';
 import './ViewfinderScreen.css';
 import './VideoSelfieLayout.css';
+/**
+ * Condition → the Core treatment that already exists for it.
+ *
+ * Four are `PrizmaIdCapture`'s own error states. `blurry` is the plain error
+ * border: blur is a DETECTION result, not a framing mistake, and the owner's
+ * 2026-07-28 call is that those pair the plain border with the feedback
+ * bubble rather than inventing a semantic overlay (`IdCapture.tsx`, the note
+ * above `error`). Either way the message is the bubble's, never the frame's.
+ */
+const CONDITION_STATE = {
+    wrongSide: 'error-wrong-side',
+    notAligned: 'error-not-aligned',
+    glare: 'error-glare',
+    tooDark: 'error-too-dark',
+    blurry: 'error',
+};
+/** Condition → the bubble's own variant. All six of Core's are used: the
+ *  wrong-side bubble names the face the user SHOULD be showing, so it flips
+ *  with the leg — `show-front` on the front, `show-back` on the back. */
+const CONDITION_FEEDBACK = {
+    wrongSide: 'not-aligned', // unused — the wrong-side variant is side-keyed below
+    notAligned: 'not-aligned',
+    blurry: 'blurry',
+    glare: 'glare',
+    tooDark: 'too-dark',
+};
+/** The wrong-side bubble, per leg. */
+const WRONG_SIDE_FEEDBACK = {
+    front: 'show-front',
+    back: 'show-back',
+};
 /** Purple stage state → Core `PrizmaIdCapture` state. The frame border, the
  *  analyzing sweep, the scrim and the encrypted row are ALL Core's. */
 const CAPTURE_STATE = {
@@ -18,6 +50,8 @@ const CAPTURE_STATE = {
     processing: 'analyzing',
     allGood: 'success',
     error: 'error',
+    // Replaced per-condition below — the map needs an entry for every key.
+    condition: 'error',
 };
 /** Which beat of the seven-step journey each side occupies — front is step 2
  *  (the microphone grant is step 1), back is step 3. */
@@ -64,23 +98,20 @@ const STEP = { front: 2, back: 3 };
  * dropped from `VideoSelfieStrings` with it — no other screen in the module
  * reads one.
  */
-export const VideoSelfieIdCaptureScreen = forwardRef(({ strings, side = 'front', documentType = 'id', state = 'default', errorSeverity = 'tryAgain', camera, still, screenId = `video-selfie-id-capture-${side}-${state}`, overrides, onAction, className, ...shell }, ref) => {
-    const errorLabel = strings.idCapture.errors[errorSeverity];
+export const VideoSelfieIdCaptureScreen = forwardRef(({ strings, side = 'front', documentType = 'id', state = 'default', errorSeverity = 'tryAgain', errorReason = 'scan', condition = 'notAligned', camera, still, screenId = `video-selfie-id-capture-${side}-${state}`, overrides, onAction, className, ...shell }, ref) => {
+    const errorLabel = strings.idCapture.errors[errorReason][errorSeverity];
+    /* Only the wrong-side bubble is keyed by side — it is the one that names
+       the face to show. The other four describe the shot. */
+    const conditionCopy = condition === 'wrongSide'
+        ? strings.idCapture.conditions.wrongSide[side]
+        : strings.idCapture.conditions[condition];
+    const conditionFeedback = condition === 'wrongSide' ? WRONG_SIDE_FEEDBACK[side] : CONDITION_FEEDBACK[condition];
     return (_jsxs(PrizmaScreenShell, { ref: ref, dark: true, className: className, ...shell, children: [_jsx("div", { className: "prizma-viewfinder__surface", children: camera }), _jsx("div", { className: "video-selfie-stepper", children: _jsx(PrizmaStepper, { steps: 7, currentState: STEP[side], documentType: documentType, completedValueText: strings.stepperCompletedLabel }) }), _jsxs("div", { className: [
                     'prizma-viewfinder__content',
                     overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
                 ]
                     .filter(Boolean)
-                    .join(' '), children: [_jsx("div", { className: "video-selfie-band" }), _jsx(PrizmaIdCapture, { type: documentType, state: CAPTURE_STATE[state], isVertical: true, mode: "overlay", scrim: true, showEncryptedLabel: false, still: still }), state === 'processing' ? (_jsx("div", { className: "video-selfie-stage-status", children: _jsx(PrizmaLoadingSpinner, { showTitle: true, titleText: strings.idCapture.processingLabel, loadingLabel: strings.idCapture.processingLabel }) })) : null, state === 'allGood' || state === 'error' ? (_jsx("div", { className: "video-selfie-stage-status", children: state === 'allGood' ? (_jsx(PrizmaSnackbar, { state: "success", role: "status", children: strings.idCapture.successLabel })) : (
-                        /* NOT `isMultiline`: that modifier switches the row to
-                         `align-items: flex-start` so an icon anchors to the top of
-                         WRAPPED text. The rejection copy renders on ONE line, so it
-                         only pushed the icon 6.9px below the text centre
-                         (owner-reported 2026-08-19: "the text is not even aligned to
-                         the icon"). CORE REQUEST: have the Snackbar follow actual
-                         wrapping rather than a prop the caller has to predict.
-                         DEVIATIONS #VS-9. */
-                        _jsx(PrizmaSnackbar, { state: "error", role: "alert", children: errorLabel })) })) : null] }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
+                    .join(' '), children: [_jsx("div", { className: "video-selfie-band", children: state === 'condition' ? (_jsx("div", { className: "video-selfie-feedback", children: _jsx(PrizmaCaptureFeedback, { feedback: conditionFeedback, title: conditionCopy.title, subtitle: conditionCopy.subtitle }) })) : null }), _jsx(PrizmaIdCapture, { className: "video-selfie-stage", type: documentType, state: state === 'condition' ? CONDITION_STATE[condition] : CAPTURE_STATE[state], isVertical: true, mode: "overlay", scrim: true, showEncryptedLabel: false, still: still }), _jsx("div", { className: "video-selfie-band" }), state === 'processing' ? (_jsx("div", { className: "video-selfie-stage-status", children: _jsx("div", { className: "video-selfie-stage-status__card", children: _jsx(PrizmaLoadingSpinner, { showTitle: true, titleText: strings.idCapture.processingLabel, loadingLabel: strings.idCapture.processingLabel }) }) })) : null, state === 'allGood' || state === 'error' ? (_jsx("div", { className: "video-selfie-stage-status", children: _jsx("div", { className: "video-selfie-stage-status__card", role: state === 'error' ? 'alert' : 'status', children: _jsx(PrizmaTitle, { title: state === 'allGood' ? strings.idCapture.successLabel : errorLabel, icon: { type: 'status', status: state === 'allGood' ? 'success' : 'error' } }) }) })) : null] }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
 });
 VideoSelfieIdCaptureScreen.displayName = 'VideoSelfieIdCaptureScreen';
 export default VideoSelfieIdCaptureScreen;

package/dist/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/dist/VideoSelfieSelfieCaptureScreen.d.ts

@@ -1,52 +1,69 @@
 import React, { type ReactNode } from 'react';
-import { type PrizmaCaptureScreenProps } from './CaptureScreen';
+import { 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';
-export interface VideoSelfieSelfieCaptureScreenProps extends Omit<PrizmaCaptureScreenProps, 'state' | 'feedbackText' | 'statusLabels' | 'verifiedLabel' | 'navLabel'> {
+export interface VideoSelfieSelfieCaptureScreenProps 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;
     onAction?: PrizmaScreenActionHandler;
 }
 /**
- * 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.
  *
- * **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.
+ * **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.
  *
- * 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.
+ * The composition, measured off `8.0` (390×844):
+ *
+ * - 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).
+ *
+ * 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 declare const VideoSelfieSelfieCaptureScreen: React.ForwardRefExoticComponent<VideoSelfieSelfieCaptureScreenProps & React.RefAttributes<HTMLDivElement>>;
 export default VideoSelfieSelfieCaptureScreen;