@incodetech/prizma-core-screens 0.1.0

package/src/ScreenShell.css

@@ -0,0 +1,130 @@
+/* ScreenShell — root of every SDK screen.
+ *
+ * Tokens only (no :root block here — the consumer imports
+ * @incodetech/prizma-core-tokens/css once). Design reference 390×844; the
+ * shell fills whatever box the host gives it and exposes a size container so
+ * descendants scale with `cqw` capped at reference pixels.
+ */
+
+.prizma-screen-shell {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--prizma-surface-neutral-0);
+  font-family: var(--prizma-body-family);
+  color: var(--prizma-text-body-800-primary);
+  container-type: size;
+  container-name: pcs-screen;
+  /* The shell must be the containing block for `position: fixed` descendants —
+   * Core's PrizmaNavigation pins itself to the viewport (correct on a real
+   * device, wrong inside an embedded screen frame) — and must clip descendant
+   * painting (the CaptureOverlay scrim is a 2000px box-shadow). `contain:
+   * layout paint` does both without forcing a composited layer the way
+   * `transform` would. */
+  contain: layout paint;
+}
+
+/* Camera viewfinder screens — always a dark stage regardless of theme.
+ * The camera surface itself is supplied by the screen (image or live feed). */
+.prizma-screen-shell--dark {
+  background: var(--prizma-surface-neutral-900-static);
+  color: var(--prizma-text-body-0-static);
+}
+
+/* -------------------------------------------------------------------------
+   A theme PIN is a MODE pin, not a BRAND reset.
+
+   The finding (Core Lab explorations canvas, 2026-08-31). Two cards, same
+   `themeSeed` #7C3AED: `face-capture-tutorial` went fully purple, but on
+   `face-capture-capturing-alignFace` the footer tag — the brand badge and the
+   Incode wordmark — stayed #0054FF. Nothing in Tag or Logo is hardcoded: Tag
+   binds Icon/Brand/500 Static, Logo binds Surface/Brand/500, and both DID
+   re-skin on the tutorial. What differs is the pin.
+
+   A scoped brand (Core Lab's per-card seed, and equally a host that scopes
+   `applyPrizmaTheme`'s output to a subtree instead of `:root`) is delivered as
+   inherited CSS custom properties on an ANCESTOR. `theme` above stamps
+   `data-prizma-theme` on THIS element — and `@incodetech/prizma-core-tokens/
+   themes/light.css` is the FULL token set, not a delta the way themes/dark.css
+   is, because it has to be able to out-cascade an ancestor's dark. So the pin
+   re-declared all 48 brand-derived vars on the exact element the seed was
+   inheriting through, and everything below it fell back to canonical blue.
+   Only the tag showed it on that screen because PrizmaSelfieCapture paints no
+   brand ink at all — on a pinned screen carrying a Button the CTA was blue too.
+
+   The fix: hand the brand back to the scope above, for the light pin only
+   (dark.css is a delta and never touches these). Custom properties accept the
+   CSS-wide keywords, so `inherit` reaches past the pin's own declaration, and
+   `.prizma-screen-shell[data-prizma-theme='light']` (0,2,0) outranks the
+   sheet's `[data-prizma-theme='light']` (0,1,0) regardless of import order.
+
+   ONLY the tokens whose derived value is IDENTICAL in the light and dark maps
+   are listed (core/theming/derive.mjs — the `*Static` family plus
+   textAccentBrand / borderBrand500 / iconBrand500Static, and the component
+   tokens that are pure aliases of those). That is what makes `inherit` safe:
+   the ancestor carries whichever map its own mode resolved in, and for these
+   the two maps agree, so a purple card inside a DARK board still lands the
+   right purple on a light-pinned stage. Without a seed above, they inherit the
+   canonical value and this block is a no-op.
+
+   ⚠️ Known gap, deliberately left: the mode-DEPENDENT brand tokens
+   (surfaceBrand50, textAccentOnBrand, textLink*, borderBrandOnNeutral,
+   iconBrandOnNeutral, and their aliases — halos, snackbar neutral, links) keep
+   the pin's canonical value. They are AA-gated against the mode's background
+   or flip ramp stop, so inheriting a dark-derived value onto a light-pinned
+   stage would either invert them or silently drop Core's contrast guarantee.
+   Fixing those properly needs the scope above to publish BOTH maps; that is a
+   theming-contract change, not a stylesheet one.
+
+   ⚠️ PARITY: this is the WEB half only. Android and iOS ship the same pinned-
+   light capture screens and the same scoped-theme story, so the same bug is
+   very likely there under whatever their pin mechanism is. Flagged for those
+   owners — not touched here (core/ is source of truth for three platforms and
+   the ports are Cami's lane).
+   ------------------------------------------------------------------------- */
+.prizma-screen-shell[data-prizma-theme='light'] {
+  /* Semantics whose light and dark stops are the same colour. */
+  --prizma-surface-brand-400-static: inherit;
+  --prizma-surface-brand-500-static: inherit;
+  --prizma-surface-brand-600-static: inherit;
+  --prizma-surface-brand-700-static: inherit;
+  --prizma-text-accent-brand: inherit;
+  --prizma-border-brand-500: inherit;
+  --prizma-icon-brand-500-static: inherit;
+
+  /* Component tokens that are pure aliases of the seven above
+     (COMPONENT_ALIASES in core/theming/derive.mjs). */
+  --prizma-button-primary-border-default: inherit;
+  --prizma-button-primary-border-hover: inherit;
+  --prizma-button-primary-border-pressed: inherit;
+  --prizma-button-primary-surface-default: inherit;
+  --prizma-button-primary-surface-hover: inherit;
+  --prizma-button-primary-surface-pressed: inherit;
+  --prizma-button-secondary-border-default: inherit;
+  --prizma-button-secondary-border-hover: inherit;
+  --prizma-button-secondary-border-pressed: inherit;
+  --prizma-button-secondary-text-default: inherit;
+  --prizma-button-secondary-text-hover: inherit;
+  --prizma-button-secondary-text-pressed: inherit;
+  --prizma-button-tertiary-text-default: inherit;
+  --prizma-button-spinner-secondary-arc: inherit;
+  --prizma-checkbox-surface-selected: inherit;
+  --prizma-radio-button-surface-selected: inherit;
+  --prizma-toggle-switch-surface-primary-on: inherit;
+  --prizma-illustration-surface-accent: inherit;
+  --prizma-illustration-ring-start: inherit;
+
+  /* Mode-flipping in the canonical map, but a LIGHT pin means the LIGHT stop —
+     which for each of these IS ramp 500, i.e. the Static sibling re-inherited
+     just above. Reading it back through var() is what keeps the Logo wordmark
+     the seed's brand instead of the dark map's #ffffff-on-white.
+       surfaceBrand500      light 500 / dark #ffffff  (Logo, Stepper past-active)
+       surfaceBrandIndicator light 500 / dark 400     (+ its two aliases) */
+  --prizma-surface-brand-500: var(--prizma-surface-brand-500-static);
+  --prizma-surface-brand-indicator: var(--prizma-surface-brand-500-static);
+  --prizma-spinner-surface-primary: var(--prizma-surface-brand-500-static);
+  --prizma-loading-bar-fill-in-flight: var(--prizma-surface-brand-500-static);
+}

package/src/ScreenShell.tsx

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

package/src/TutorialScreen.tsx

@@ -0,0 +1,166 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaDisclaimer } from '@incodetech/prizma-core-web/disclaimer';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import type {
+  PrizmaScreenActionHandler,
+  PrizmaScreenChromeProps,
+  PrizmaScreenOverrides,
+} from './types';
+import './ScreenLayout.css';
+
+export interface PrizmaTutorialScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title'> ,
+    PrizmaScreenChromeProps {
+  /**
+   * An optional block between the logo nav and the content — a journey stepper.
+   * Video Selfie draws Core's `PrizmaStepper` on EVERY screen of the flow, not
+   * just its camera stages, and it is the only chrome that tells the steps
+   * apart; the archetypes had a slot on E alone, so the rest of the module shed
+   * it (owner-reported 2026-08-19). Takes a `ReactNode` so the module supplies
+   * Core's own component — no primitive invented, and both offsets live once in
+   * `ScreenLayout.css` (`.prizma-screen-layout__progress`). Omit it and nothing
+   * renders, so every existing consumer is byte-identical. DEVIATIONS #VS-4.
+   */
+  progress?: ReactNode;
+  /** Screen title (H2). */
+  title: string;
+  /** Description below the title (H5). */
+  subtitle?: string;
+  /** Hint copy 28px above the CTA ("Stay still…"). */
+  disclaimer?: string;
+  /** Primary CTA label. Optional: some tutorial-shaped screens (Face Match's
+   *  comparison views) carry no CTA at all. */
+  ctaLabel?: string;
+  /** The primary CTA shows Core's designed loading treatment — the `*.loading`
+   *  half of Face Capture's and ID Capture's tutorial sections. */
+  ctaLoading?: boolean;
+  /** Accessible/visible loading copy for the primary CTA (`PrizmaButton`'s own
+   *  `loadingLabel`; no hardcoded English anywhere). */
+  ctaLoadingLabel?: string;
+  /** Secondary CTA rendered ABOVE the primary — a second filled action. */
+  secondaryCtaLabel?: string;
+  /**
+   * Tertiary underlined LINK below the primary — Document Capture's "Skip this
+   * step" (tutorial / method selection) and "All pages captured" (next page).
+   * A link, not a button: Figma draws Core's `tertiary-link` composite there.
+   */
+  linkLabel?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+  /** Centerpiece illustration (inline SVG component / Core Illustration*). */
+  illustration?: ReactNode;
+  /**
+   * A shell-level layer painted OVER the whole screen — Document Capture's
+   * method-selection sheet (scrim + `PrizmaBottomSheetContent`), which Figma
+   * presents on top of the dimmed tutorial. It cannot ride in the content
+   * column: it is absolutely positioned against the shell (DEVIATIONS #DC-30).
+   */
+  overlay?: ReactNode;
+  /** Accessible name for the nav region. */
+  navLabel?: string;
+  /** Stable id reported in actions, e.g. `face-capture-tutorial`. */
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Archetype A — Tutorial / Instruction (GUIDELINES.md §6-A).
+ * Nav → title block → illustration (flex-1) → disclaimer → CTA → verified tag.
+ *
+ * CTA band order is the family's designed one: disclaimer → secondary → primary
+ * → tertiary link (the link sits BELOW the primary on every tutorial-shaped
+ * section — Document Capture's "Skip this step" / "All pages captured"). The
+ * stack is the foundation's flat Spacing/16 (DEVIATIONS #8); Core's own
+ * `PrizmaButtonGroup` would put 12 between the slots but cannot forward
+ * `loadingLabel`, which the loading tutorials need — DEVIATIONS #F-32.
+ */
+export const PrizmaTutorialScreen = forwardRef<HTMLDivElement, PrizmaTutorialScreenProps>(
+  (
+    {
+      progress,
+      title,
+      subtitle,
+      disclaimer,
+      ctaLabel,
+      ctaLoading = false,
+      ctaLoadingLabel,
+      secondaryCtaLabel,
+      linkLabel,
+      verifiedLabel,
+      illustration,
+      overlay,
+      navLabel,
+      screenId,
+      showHeader = true,
+      showFooter = true,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaScreenShell ref={ref} {...shell}>
+      <PrizmaScreenNav reserved={!showHeader} logo={overrides?.logo} navLabel={navLabel} />
+      {progress ? (
+        <div className="prizma-screen-layout__progress">{progress}</div>
+      ) : null}
+      <div className="prizma-screen-layout__content">
+        <PrizmaTitle
+          variant={overrides?.align === 'left' ? 'left' : 'centered'}
+          title={title}
+          showSubtitle={Boolean(subtitle)}
+          subtitle={subtitle}
+        />
+        <div className="prizma-screen-layout__flex">{illustration}</div>
+        {/* CTA band — Core's flat Spacing/16 recipe; the disclaimer's own
+            padding supplies the designed 28px text→CTA gap (DEVIATIONS #8). */}
+        <div className="prizma-screen-layout__band">
+          {disclaimer ? <PrizmaDisclaimer text={disclaimer} /> : null}
+          {secondaryCtaLabel ? (
+            <PrizmaButton
+              variant="secondary"
+              size="L"
+              onClick={() => onAction?.({ type: 'secondary', screenId })}
+            >
+              {secondaryCtaLabel}
+            </PrizmaButton>
+          ) : null}
+          {ctaLabel ? (
+            <PrizmaButton
+              variant="primary"
+              size="L"
+              loading={ctaLoading}
+              loadingLabel={ctaLoadingLabel}
+              onClick={() => onAction?.({ type: 'cta', screenId })}
+            >
+              {ctaLabel}
+            </PrizmaButton>
+          ) : null}
+          {linkLabel ? (
+            <PrizmaButton
+              variant="tertiary-link"
+              size="L"
+              onClick={() => onAction?.({ type: 'secondary', screenId })}
+            >
+              {linkLabel}
+            </PrizmaButton>
+          ) : null}
+          {showFooter ? (
+            <div className="prizma-screen-layout__band__tag">
+              <PrizmaTag label={verifiedLabel} />
+            </div>
+          ) : null}
+        </div>
+      </div>
+      {overlay}
+    </PrizmaScreenShell>
+  ),
+);
+PrizmaTutorialScreen.displayName = 'PrizmaTutorialScreen';
+
+export default PrizmaTutorialScreen;

package/src/VideoSelfieCameraStepsScreen.tsx

@@ -0,0 +1,145 @@
+import React, { forwardRef } from 'react';
+import { PrizmaListItem } from '@incodetech/prizma-core-web/list';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStepsOs, VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+import './VideoSelfieLayout.css';
+
+export interface VideoSelfieCameraStepsScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `permission.steps` slice. */
+  strings: VideoSelfieStrings;
+  /** Which device variant of the section to render: `2.5 - ios` (default) or
+   *  `2.6 - android`. They are different screens, not translations. */
+  os?: VideoSelfieStepsOs;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Video Selfie — the OS settings walk-through, built on the List archetype
+ * (GUIDELINES.md §6-G). Figma: purple section `video selfie - permissions
+ * 2.5 - camera access instructions`, which holds TWO Incode-drawn symbols:
+ * `2.5 - ios camera access instructions` and
+ * `2.6 - android camera access instructions`. Both are built here, selected by
+ * `os` — unlike `2.1` and `2.4` of the same group, which are OS chrome and are
+ * deliberately not built.
+ *
+ * Same family as `GeolocationBrowserStepsScreen`: a title block over a step
+ * list and a "Retry" CTA, LEFT-aligned throughout — a centred headline above a
+ * left-led numbered list reads as a mistake. The screen only picks which of the
+ * archetype's OWN alignment variants this family uses; a host that passes
+ * `overrides.align` still wins.
+ *
+ * What Figma draws that no single Core list models: TWO labelled sections in
+ * the middle. On iOS the second is a plain remark with no steps at all; on
+ * Android it is a SECOND five-step numbered list followed by a closing note
+ * ("Remember, the specific steps might vary…"). Both numbered lists are Core's
+ * Core `PrizmaListItem` (`number`) rows verbatim; the section labels and the two
+ * kinds of note are plain content typography in `VideoSelfieLayout.css`. The
+ * offset above the whole block is the archetype's `__list` Spacing/24 —
+ * nothing about it is re-declared.
+ *
+ * Neither device frame draws the verified tag (both end at the CTA), so
+ * `showFooter` defaults to `true` (owner rule #PI-8/#F-34 — the chrome is
+ * constant), as on the other two permission
+ * sections.
+ */
+export const VideoSelfieCameraStepsScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieCameraStepsScreenProps
+>(
+  (
+    {
+      strings,
+      os = 'ios',
+      screenId = `video-selfie-permission-steps-${os}`,
+      showHeader = true,
+      showFooter = true,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const slice = strings.permission.steps[os];
+    /* Family default, not a local re-declaration: the archetype already owns a
+       left variant, so the screen only picks which of ITS variants applies. */
+    const alignedOverrides: PrizmaScreenOverrides = {
+      ...overrides,
+      align: overrides?.align ?? 'left',
+    };
+
+    return (
+      <PrizmaListScreen
+        /* Two five-step lists + a closing note exceed the 844 frame — Figma's
+           own frame is 1041 tall. Pan the middle instead of overlapping the
+           CTA and the tag (#VS-12). */
+        scrollList
+        ref={ref}
+        showHeader={showHeader}
+        showFooter={showFooter}
+        title={slice.title}
+        subtitle={slice.subtitle}
+        ctaLabel={slice.ctaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={alignedOverrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <div className="video-selfie-steps">
+          {/* Core's `number` item is the 40×40 SQUIRCLE Figma draws (List.css:
+              "40×40 squircle with stroke 2 INSIDE"). `PrizmaList variant="circles"`
+              maps to `number-circled`, a full round, and the wrapper offers no
+              variant reaching the squircle — so the rows are composed directly,
+              the way the tutorial composes `icon-m` (#VS-8). CORE REQUEST: a
+              `numbers` wrapper variant mapping to the plain `number` item.
+              DEVIATIONS #VS-16. */}
+          <h3 className="video-selfie-steps__heading">{slice.microphoneTitle}</h3>
+          <ol className="video-selfie-steps__rows">
+            {slice.microphoneSteps.map((step, i) => (
+              <li key={i}>
+                <PrizmaListItem variant="number" number={i + 1} label={step} />
+              </li>
+            ))}
+          </ol>
+          <h3 className="video-selfie-steps__heading">{slice.recordingTitle}</h3>
+          {/* Android (`2.6`) draws a second numbered list where iOS (`2.5`)
+              draws a one-line remark — the states must not render alike. */}
+          {slice.recordingSteps ? (
+            <ol className="video-selfie-steps__rows">
+              {slice.recordingSteps.map((step, i) => (
+                <li key={i}>
+                  <PrizmaListItem variant="number" number={i + 1} label={step} />
+                </li>
+              ))}
+            </ol>
+          ) : slice.recordingNote ? (
+            <p className="video-selfie-steps__note">{slice.recordingNote}</p>
+          ) : null}
+          {slice.closingNote ? (
+            <p className="video-selfie-steps__note">{slice.closingNote}</p>
+          ) : null}
+        </div>
+      </PrizmaListScreen>
+    );
+  },
+);
+VideoSelfieCameraStepsScreen.displayName = 'VideoSelfieCameraStepsScreen';
+
+export default VideoSelfieCameraStepsScreen;

package/src/VideoSelfieErrorScreen.tsx

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