@incodetech/prizma-core-screens 0.1.0

package/dist/VideoSelfieIdCaptureScreen.d.ts

@@ -0,0 +1,75 @@
+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 './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';
+export interface VideoSelfieIdCaptureScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+    /** Module copy — this screen reads the `idCapture` slice (+ shared labels). */
+    strings: VideoSelfieStrings;
+    /** Which face of the document. Drives the stepper beat only — the frame
+     *  geometry is identical (Figma draws no title on these sections). */
+    side?: VideoSelfieIdSide;
+    /** Which document the journey collects — Core `PrizmaIdCapture.type` and the
+     *  Stepper's own `documentType`. Default `id`. */
+    documentType?: VideoSelfieDocumentType;
+    /** Which purple stage section to render. Default `default`. */
+    state?: VideoSelfieIdCaptureState;
+    /** Whether the rejection invites a retry (`6.1`/`6.3`) or is terminal
+     *  (`6.2`/`6.4`). Read only when `state="error"`. */
+    errorSeverity?: VideoSelfieIdErrorSeverity;
+    /** Live camera feed (<video>) or sample still (<img>) behind the frame. */
+    camera?: ReactNode;
+    /** The captured document still, for the states Core draws one in. */
+    still?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Video Selfie — the document stage (Archetype D, GUIDELINES.md §6-D; always
+ * dark). ONE screen for TWELVE purple sections: `id capture front 3.0–3.3`,
+ * `id capture back 5.0–5.3` and every `id capture … errors 6.1–6.4` variant.
+ * They are `side` × `state` × `errorSeverity` variants of Core's
+ * `PrizmaIdCapture`, which is exactly how the component is axed.
+ *
+ * Composed like `IdCaptureStageScreen` / `DocumentCaptureCaptureScreen`: the
+ * feed runs full-bleed on `.prizma-viewfinder__surface` and
+ * `mode="overlay" scrim` cuts a transparent window through the veil, so Core
+ * owns the window, the tokenized scrim, the four border treatments, the
+ * analyzing sweep and the encrypted row. None of it is re-implemented (§7).
+ *
+ * Two things this module's Figma does that the foundation does not model, both
+ * reported rather than silently reshaped:
+ *
+ * - **The journey stepper.** Every camera section draws Core's `PrizmaStepper`
+ *   in the band the logo nav normally occupies, and it is the ONLY difference
+ *   between `3.0` and `5.0` — drop it and the front and back defaults render
+ *   identically. No archetype has a slot for it. This screen owns its whole
+ *   composition (archetype D is a recipe, not a component), so the band lives
+ *   in `VideoSelfieLayout.css` and carries the foundation's own
+ *   `--pcs-status-bar` reserve — no new number. The archetype-based screens of
+ *   this module ship WITHOUT the stepper rather than growing a second copy.
+ *
+ * - **The status card.** Figma floats a dark rounded card OVER the document
+ *   ("Processing…", "All good!", "Name verification failed, try again"). Core
+ *   ships no such container, and inventing one is forbidden (rule 1), so the
+ *   message rides in the band UNDER the frame using Core's own parts — the
+ *   `PrizmaLoadingSpinner` for the in-flight beat and `PrizmaSnackbar`
+ *   (`success` / `error`) for the verdicts. Core's frame border already carries
+ *   the verdict colour, so nothing is lost but the overlap.
+ *
+ * No logo and NO encrypted row (the verified tag IS kept — capture screens drop only the logo, #VS-3): all twenty-four sections draw
+ * nothing at all between the bottom of the document frame and the bottom of the
+ * screen (GUIDELINES §1 — follow the module's section, not the default). Core's
+ * `showEncryptedLabel` is therefore pinned `false`: it is a `PrizmaIdCapture`
+ * default that other modules' Figma does draw, and leaving it on painted a lock
+ * + "All data is encrypted" row on every state of this stage. The label was
+ * dropped from `VideoSelfieStrings` with it — no other screen in the module
+ * reads one.
+ */
+export declare const VideoSelfieIdCaptureScreen: React.ForwardRefExoticComponent<VideoSelfieIdCaptureScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default VideoSelfieIdCaptureScreen;

package/dist/VideoSelfieIdCaptureScreen.js

@@ -0,0 +1,86 @@
+'use client';
+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 { 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 { PrizmaScreenShell } from './ScreenShell';
+import './ScreenLayout.css';
+import './ViewfinderScreen.css';
+import './VideoSelfieLayout.css';
+/** 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 = {
+    default: 'empty',
+    shown: 'filled',
+    processing: 'analyzing',
+    allGood: 'success',
+    error: '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. */
+const STEP = { front: 2, back: 3 };
+/**
+ * Video Selfie — the document stage (Archetype D, GUIDELINES.md §6-D; always
+ * dark). ONE screen for TWELVE purple sections: `id capture front 3.0–3.3`,
+ * `id capture back 5.0–5.3` and every `id capture … errors 6.1–6.4` variant.
+ * They are `side` × `state` × `errorSeverity` variants of Core's
+ * `PrizmaIdCapture`, which is exactly how the component is axed.
+ *
+ * Composed like `IdCaptureStageScreen` / `DocumentCaptureCaptureScreen`: the
+ * feed runs full-bleed on `.prizma-viewfinder__surface` and
+ * `mode="overlay" scrim` cuts a transparent window through the veil, so Core
+ * owns the window, the tokenized scrim, the four border treatments, the
+ * analyzing sweep and the encrypted row. None of it is re-implemented (§7).
+ *
+ * Two things this module's Figma does that the foundation does not model, both
+ * reported rather than silently reshaped:
+ *
+ * - **The journey stepper.** Every camera section draws Core's `PrizmaStepper`
+ *   in the band the logo nav normally occupies, and it is the ONLY difference
+ *   between `3.0` and `5.0` — drop it and the front and back defaults render
+ *   identically. No archetype has a slot for it. This screen owns its whole
+ *   composition (archetype D is a recipe, not a component), so the band lives
+ *   in `VideoSelfieLayout.css` and carries the foundation's own
+ *   `--pcs-status-bar` reserve — no new number. The archetype-based screens of
+ *   this module ship WITHOUT the stepper rather than growing a second copy.
+ *
+ * - **The status card.** Figma floats a dark rounded card OVER the document
+ *   ("Processing…", "All good!", "Name verification failed, try again"). Core
+ *   ships no such container, and inventing one is forbidden (rule 1), so the
+ *   message rides in the band UNDER the frame using Core's own parts — the
+ *   `PrizmaLoadingSpinner` for the in-flight beat and `PrizmaSnackbar`
+ *   (`success` / `error`) for the verdicts. Core's frame border already carries
+ *   the verdict colour, so nothing is lost but the overlap.
+ *
+ * No logo and NO encrypted row (the verified tag IS kept — capture screens drop only the logo, #VS-3): all twenty-four sections draw
+ * nothing at all between the bottom of the document frame and the bottom of the
+ * screen (GUIDELINES §1 — follow the module's section, not the default). Core's
+ * `showEncryptedLabel` is therefore pinned `false`: it is a `PrizmaIdCapture`
+ * default that other modules' Figma does draw, and leaving it on painted a lock
+ * + "All data is encrypted" row on every state of this stage. The label was
+ * 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];
+    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 }) })] }));
+});
+VideoSelfieIdCaptureScreen.displayName = 'VideoSelfieIdCaptureScreen';
+export default VideoSelfieIdCaptureScreen;

package/dist/VideoSelfieLayout.css

@@ -0,0 +1,259 @@
+/* Video Selfie — module layout additions.
+ *
+ * ONLY what the foundation archetypes do not already own, and nothing that
+ * re-declares an archetype offset. Every value is a token; each departure from
+ * GUIDELINES.md is reported back to the owner (see the module's screen files
+ * and the agent's `archetypeGaps` report).
+ *
+ * The module's structural discovery is that EVERY camera screen in the flow —
+ * the two document stages, the liveness ring, the two spoken steps and two of
+ * the generic errors — draws Core's `PrizmaStepper` in the band the logo nav
+ * normally occupies. No archetype has a slot for it (reported), so the three
+ * screens whose whole composition this module owns (the document stage and the
+ * spoken step) carry the band here.
+ */
+
+/* ── Journey stepper band ────────────────────────────────────────────────────
+ * Figma draws the Stepper as the first thing under the OS status bar — no logo
+ * row above it (`top content` frame, y=54, the Stepper 342 wide at x=24 on
+ * every section). The status-bar reserve is NOT a new number: it is the
+ * foundation's own `--pcs-status-bar` custom property, the same one
+ * `ScreenNav.css` and `ScreenLayout.css`'s `--no-nav` variant read, so a host
+ * that draws its own chrome still overrides it in one place.
+ *
+ * The horizontal inset is the content column's own Spacing/24 gutter — these
+ * screens have no `.prizma-screen-layout__content` wrapper (they are camera
+ * surfaces), so the band carries the same gutter Core's stage sits in.
+ *
+ * REPORTED: archetypes B (Capture), C (Processing), F (Result) and G (List)
+ * need a `stepper` slot in their nav band so the rest of the module's screens
+ * can draw it too. Nothing is worked around here — those screens ship WITHOUT
+ * the stepper rather than hand-rolling a second copy of this band. */
+.video-selfie-stepper {
+  flex-shrink: 0;
+  /* Above PrizmaIdCapture's overlay scrim, which is an absolutely positioned
+   * box-shadow that would otherwise paint over this non-positioned sibling —
+   * the same reason `IdCaptureLayout.css` lifts its bands. */
+  position: relative;
+  /* z-index 2, not 1: PrizmaIdCapture's HUD bands ALSO lift themselves to 1, so
+   * at the same level DOM order decided and the scrim painted over the stepper
+   * (owner-reported 2026-08-19: "the stepper is not correctly visible and looks
+   * hidden, probably it's behind the overlay"). 2 is the anchored-chrome layer
+   * ScreenLayout.css already reserves for the tag and shutter, which must sit
+   * above the scrim for exactly the same reason. DEVIATIONS #VS-2. */
+  z-index: 2;
+  margin-top: var(--pcs-status-bar, 47px);
+  padding-inline: var(--prizma-spacing-24);
+}
+
+/* ── The flexible bands around a camera stage ────────────────────────────────
+ * Pure flex distribution — NO padding, NO margin, no spacing token at all. The
+ * band exists so the HUD copy (the recording indicator, the stage's status
+ * message) sits in the air the stage leaves, instead of the module inventing an
+ * offset the archetype layer would otherwise own. */
+.video-selfie-band {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+/* ── 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
+ * — so it survives on the always-dark camera surface. The copy itself is the
+ * foundation's `.prizma-viewfinder__title`; nothing about it is re-declared. */
+.video-selfie-recording {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prizma-spacing-16);
+  color: var(--prizma-icon-neutral-50-static);
+}
+
+/* ── The spoken-step card (groups 10 and 11) ─────────────────────────────────
+ * Figma layers Core's Modal over the live camera (`modal-light` instance). The
+ * safe presenter portals to `document.body`, which would escape the 390×844
+ * screen frame and the host's `transform: scale()`, so the screen owns the
+ * scrim and the panel and Core owns the card — the recipe Document Capture's
+ * method sheet already established (DEVIATIONS #DC-30). */
+.video-selfie-sheet-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background: var(--prizma-surface-overlay);
+}
+
+.video-selfie-sheet-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  padding: var(--prizma-spacing-16);
+}
+
+/* The confirmation dialog (10.4) is a true centred modal over a dimmed screen,
+ * not a bottom-anchored card. */
+.video-selfie-sheet-panel--centered {
+  top: 0;
+  display: flex;
+  align-items: 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
+ * Core's per-status tint lives on `.prizma-title__status-icon--success` and
+ * `PrizmaModalContent` has no status slot to inherit it from. Same treatment
+ * `IdCaptureLayout.css` gives the camera stage's nav icon. */
+.video-selfie-sheet-status {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  color: var(--prizma-icon-status-positive);
+}
+
+.video-selfie-sheet-status > svg {
+  display: block;
+  width: var(--prizma-title-icon-size);
+  height: var(--prizma-title-icon-size);
+}
+
+/* ── The OS settings walk-through (2.5) ──────────────────────────────────────
+ * Two labelled sections inside archetype G's list slot: a numbered step list
+ * and a plain note. CONTENT typography only — the offset above the block is
+ * the archetype's `__list` Spacing/24 and is not touched. */
+.video-selfie-steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  width: 100%;
+  text-align: start;
+}
+
+.video-selfie-steps__heading {
+  margin: 0;
+  font-family: var(--prizma-headline-family);
+  font-size: var(--prizma-headline-h5-font-size);
+  font-weight: var(--prizma-headline-h5-font-weight);
+  line-height: var(--prizma-headline-h5-line-height);
+  letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  color: var(--prizma-text-body-800-primary);
+}
+
+.video-selfie-steps__note {
+  margin: 0;
+  font-size: var(--prizma-body-m-regular-font-size);
+  font-weight: var(--prizma-body-m-regular-font-weight);
+  line-height: var(--prizma-body-m-regular-line-height);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+/* ── 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).
+ *
+ * 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
+ * sides — the band of static the owner reported (2026-08-19: "horizontal and
+ * 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
+ * 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. */
+.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. */
+  width: 100cqh;
+  height: 100cqw;
+  max-width: none;
+  object-fit: cover;
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+
+
+/* ── Stage status, centred ON the frame ──────────────────────────────────────
+ * `3.2` / `5.2` centre the spinner and its "Processing…" caption OVER the
+ * document, on the dark rounded container the design uses for stage status —
+ * not below the frame, where it sat (owner-reported 2026-08-19: "the processing
+ * loader looks broken in the bottom of the capture screen, it should be in the
+ * middle"). Absolutely positioned against the viewfinder content so the frame
+ * and the bands keep their own flex distribution untouched. DEVIATIONS #VS-7.
+ */
+.video-selfie-stage-status {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.video-selfie-stage-status > * {
+  padding: var(--prizma-spacing-16) var(--prizma-spacing-24);
+  border-radius: var(--prizma-border-radius-medium);
+  background: var(--prizma-surface-neutral-900-80-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 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--prizma-spacing-12);
+}
+
+/* Step rows — the <ol> `PrizmaList` would supply, composed here only because
+ * the wrapper has no variant reaching Core's plain `number` squircle (#VS-16).
+ * The gap is the icon family's own Spacing/12; nothing new is declared. */
+.video-selfie-steps__rows {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--prizma-spacing-12);
+}

package/dist/VideoSelfiePermissionRequiredScreen.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+export interface VideoSelfiePermissionRequiredScreenProps extends Omit<PrizmaListScreenProps, 'status' | 'title' | 'subtitle' | 'children' | 'ctaLabel' | 'secondaryCtaLabel' | 'linkLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `permission.required` slice. */
+    strings: VideoSelfieStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Video Selfie — "Camera permission is required", built on the List archetype
+ * (GUIDELINES.md §6-G). Figma: purple section `video selfie - permissions
+ * 2.2 - permission required`.
+ *
+ * The same shape ID Capture's permission screen already ships on this
+ * archetype: the warning status mark over the title, three reassurance rows in
+ * the middle, and a band whose tertiary link ("Quit process") sits ABOVE the
+ * primary — archetype G's own fixed position for the link, and where Figma
+ * draws it.
+ *
+ * The frame ends at the "Allow permission" button — no verified tag — so
+ * `showFooter` defaults to `true` (owner rule #PI-8/#F-34 — the chrome is
+ * constant across a module's states), as on all three permission sections. The
+ * tutorial sections DO draw the tag, which is what makes this a deliberate
+ * difference rather than an omission.
+ *
+ * Figma draws the orange mark as a standalone warning glyph above the title;
+ * Core's `PrizmaTitle` models exactly that as `icon={{ type: 'status' }}`, so
+ * the archetype's `status="warning"` carries it and no glyph slot is needed.
+ */
+export declare const VideoSelfiePermissionRequiredScreen: React.ForwardRefExoticComponent<VideoSelfiePermissionRequiredScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default VideoSelfiePermissionRequiredScreen;

package/dist/VideoSelfiePermissionRequiredScreen.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconApproval, IconCamera, IconIdFrontScan } from '@incodetech/prizma-core-icons';
+import { PrizmaCardListCommonIssues } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+/**
+ * The three reassurance rows, in Figma order: what the camera is used for, what
+ * it protects against, and why it cannot be skipped. Canonical bank glyphs, one
+ * per row — nothing drawn here (§10).
+ */
+const ROW_ICONS = [
+    _jsx(IconCamera, { size: "m" }, "camera"),
+    _jsx(IconIdFrontScan, { size: "m" }, "scan"),
+    _jsx(IconApproval, { size: "m" }, "approval"),
+];
+/**
+ * Video Selfie — "Camera permission is required", built on the List archetype
+ * (GUIDELINES.md §6-G). Figma: purple section `video selfie - permissions
+ * 2.2 - permission required`.
+ *
+ * The same shape ID Capture's permission screen already ships on this
+ * archetype: the warning status mark over the title, three reassurance rows in
+ * the middle, and a band whose tertiary link ("Quit process") sits ABOVE the
+ * primary — archetype G's own fixed position for the link, and where Figma
+ * draws it.
+ *
+ * The frame ends at the "Allow permission" button — no verified tag — so
+ * `showFooter` defaults to `true` (owner rule #PI-8/#F-34 — the chrome is
+ * constant across a module's states), as on all three permission sections. The
+ * tutorial sections DO draw the tag, which is what makes this a deliberate
+ * difference rather than an omission.
+ *
+ * Figma draws the orange mark as a standalone warning glyph above the title;
+ * Core's `PrizmaTitle` models exactly that as `icon={{ type: 'status' }}`, so
+ * the archetype's `status="warning"` carries it and no glyph slot is needed.
+ */
+export const VideoSelfiePermissionRequiredScreen = forwardRef(({ strings, screenId = 'video-selfie-permission-required', showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaListScreen, { ref: ref, showHeader: showHeader, showFooter: showFooter, status: "warning", title: strings.permission.required.title, ctaLabel: strings.permission.required.ctaLabel, linkLabel: strings.permission.required.quitLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaCardListCommonIssues, { items: strings.permission.required.rows.map((row, i) => ({
+            icon: ROW_ICONS[i % ROW_ICONS.length],
+            title: row,
+            showSubtitle: false,
+        })) }) })));
+VideoSelfiePermissionRequiredScreen.displayName = 'VideoSelfiePermissionRequiredScreen';
+export default VideoSelfiePermissionRequiredScreen;

package/dist/VideoSelfiePermissionScreen.d.ts

@@ -0,0 +1,51 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaTutorialScreenProps } from './TutorialScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+export interface VideoSelfiePermissionScreenProps extends Omit<PrizmaTutorialScreenProps, 'title' | 'subtitle' | 'disclaimer' | 'ctaLabel' | 'ctaLoadingLabel' | 'linkLabel' | 'verifiedLabel' | 'navLabel' | 'illustration'> {
+    /** Module copy — this screen reads the `permission.request` slice. */
+    strings: VideoSelfieStrings;
+    /** Replace the default Core artwork (a host with its own permission art). */
+    illustration?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Video Selfie — the in-page camera request, built on the Tutorial archetype
+ * (GUIDELINES.md §6-A). Figma: purple section `video selfie - permissions
+ * 2.0 - web`.
+ *
+ * Archetype A covers it exactly: title block → one centred illustration in the
+ * flexible middle → CTA → tertiary link. The link ("Learn more") sits BELOW the
+ * primary, which is archetype A's own fixed position for it (the mirror of G) —
+ * and is where Figma draws it too.
+ *
+ * Figma draws no logo on this section; the nav row is still RESERVED
+ * (`showHeader={false}`) so the offsets match every other screen — owner rule
+ * 2026-08-18.
+ *
+ * It draws no verified tag either — the frame ends at "Learn more" — so
+ * `showFooter` defaults to `true`: Figma draws these sections bare, but the
+ * owner rule keeps the chrome constant across a module's states so nothing
+ * shifts between them (#PI-8, #F-34).
+ * The tutorial sections `1.0` / `1.2` DO draw the tag, which is what makes the
+ * permission frames a deliberate difference rather than an omission. The
+ * `#PI-8` / `#F-34` carve-out that keeps the chrome on bare frames covers
+ * connectivity and generic-error screens only; none of these is one.
+ *
+ * The artwork is Core's `PrizmaIllustrationSelfie`. Figma draws a bespoke
+ * camera-bracket cluster (four capability icons inside a viewfinder crop, with
+ * a check badge) that the Core illustration bank does not ship; drawing it here
+ * would mean inventing an asset (rule 1, §10), so the nearest canonical
+ * illustration is used and the gap is reported.
+ *
+ * Sections `2.1 - iOS+Android` and `2.4 - system modal` of the same group are
+ * NOT built: they are the OS's own permission alert and screen-capture dialog
+ * drawn as documentation. A screen composed only of Core components cannot
+ * render OS chrome, and faking it would ship a fake system UI — the same call
+ * ID Capture (#IDC-26) and Document Capture (#DC-20) already made.
+ */
+export declare const VideoSelfiePermissionScreen: React.ForwardRefExoticComponent<VideoSelfiePermissionScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default VideoSelfiePermissionScreen;

package/dist/VideoSelfiePermissionScreen.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaIllustrationSelfie } from '@incodetech/prizma-core-web/illustration-selfie';
+import { PrizmaTutorialScreen } from './TutorialScreen';
+import './ScreenLayout.css';
+/**
+ * Video Selfie — the in-page camera request, built on the Tutorial archetype
+ * (GUIDELINES.md §6-A). Figma: purple section `video selfie - permissions
+ * 2.0 - web`.
+ *
+ * Archetype A covers it exactly: title block → one centred illustration in the
+ * flexible middle → CTA → tertiary link. The link ("Learn more") sits BELOW the
+ * primary, which is archetype A's own fixed position for it (the mirror of G) —
+ * and is where Figma draws it too.
+ *
+ * Figma draws no logo on this section; the nav row is still RESERVED
+ * (`showHeader={false}`) so the offsets match every other screen — owner rule
+ * 2026-08-18.
+ *
+ * It draws no verified tag either — the frame ends at "Learn more" — so
+ * `showFooter` defaults to `true`: Figma draws these sections bare, but the
+ * owner rule keeps the chrome constant across a module's states so nothing
+ * shifts between them (#PI-8, #F-34).
+ * The tutorial sections `1.0` / `1.2` DO draw the tag, which is what makes the
+ * permission frames a deliberate difference rather than an omission. The
+ * `#PI-8` / `#F-34` carve-out that keeps the chrome on bare frames covers
+ * connectivity and generic-error screens only; none of these is one.
+ *
+ * The artwork is Core's `PrizmaIllustrationSelfie`. Figma draws a bespoke
+ * camera-bracket cluster (four capability icons inside a viewfinder crop, with
+ * a check badge) that the Core illustration bank does not ship; drawing it here
+ * would mean inventing an asset (rule 1, §10), so the nearest canonical
+ * illustration is used and the gap is reported.
+ *
+ * Sections `2.1 - iOS+Android` and `2.4 - system modal` of the same group are
+ * NOT built: they are the OS's own permission alert and screen-capture dialog
+ * drawn as documentation. A screen composed only of Core components cannot
+ * render OS chrome, and faking it would ship a fake system UI — the same call
+ * ID Capture (#IDC-26) and Document Capture (#DC-20) already made.
+ */
+export const VideoSelfiePermissionScreen = forwardRef(({ strings, illustration, screenId = 'video-selfie-permission-request', showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaTutorialScreen, { ref: ref, showHeader: showHeader, showFooter: showFooter, title: strings.permission.request.title, subtitle: strings.permission.request.subtitle, ctaLabel: strings.permission.request.ctaLabel, linkLabel: strings.permission.request.learnMoreLabel, illustration: illustration ?? _jsx(PrizmaIllustrationSelfie, { decorative: true }), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+VideoSelfiePermissionScreen.displayName = 'VideoSelfiePermissionScreen';
+export default VideoSelfiePermissionScreen;

package/dist/VideoSelfieProcessingScreen.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+export interface VideoSelfieProcessingScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `processing` slice. */
+    strings: VideoSelfieStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Video Selfie — the upload/analysis wait, built on the Processing archetype
+ * (GUIDELINES.md §6-C). Figma: purple section `video selfie - processing
+ * 12.0 - default`.
+ *
+ * The pure spinner case: a centred spinner over the title and its "kindly hold
+ * on" line, the verified tag anchored at the bottom, no CTA — which is exactly
+ * why archetype C exists and why this is not archetype F. The camera has closed
+ * by this point, so the screen follows the app theme like any ordinary screen.
+ *
+ * Figma draws no logo on the section; the nav row is still RESERVED
+ * (`showHeader={false}`) so the offsets match every other screen (owner rule
+ * 2026-08-18).
+ */
+export declare const VideoSelfieProcessingScreen: React.ForwardRefExoticComponent<VideoSelfieProcessingScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default VideoSelfieProcessingScreen;

package/dist/VideoSelfieProcessingScreen.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen, } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * Video Selfie — the upload/analysis wait, built on the Processing archetype
+ * (GUIDELINES.md §6-C). Figma: purple section `video selfie - processing
+ * 12.0 - default`.
+ *
+ * The pure spinner case: a centred spinner over the title and its "kindly hold
+ * on" line, the verified tag anchored at the bottom, no CTA — which is exactly
+ * why archetype C exists and why this is not archetype F. The camera has closed
+ * by this point, so the screen follows the app theme like any ordinary screen.
+ *
+ * Figma draws no logo on the section; the nav row is still RESERVED
+ * (`showHeader={false}`) so the offsets match every other screen (owner rule
+ * 2026-08-18).
+ */
+export const VideoSelfieProcessingScreen = forwardRef(({ strings, screenId = 'video-selfie-processing', showHeader = true, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, showHeader: showHeader, status: "loading", title: strings.processing.title, subtitle: strings.processing.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+VideoSelfieProcessingScreen.displayName = 'VideoSelfieProcessingScreen';
+export default VideoSelfieProcessingScreen;