@incodetech/prizma-core-screens 0.1.0

package/src/VideoSelfiePermissionRequiredScreen.tsx

@@ -0,0 +1,104 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { IconApproval, IconCamera, IconIdFrontScan } from '@incodetech/prizma-core-icons';
+import { PrizmaCardListCommonIssues } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+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: ReactNode[] = [
+  <IconCamera key="camera" size="m" />,
+  <IconIdFrontScan key="scan" size="m" />,
+  <IconApproval key="approval" size="m" />,
+];
+
+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 const VideoSelfiePermissionRequiredScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfiePermissionRequiredScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'video-selfie-permission-required',
+      showHeader = true,
+      showFooter = true,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <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}
+    >
+      <PrizmaCardListCommonIssues
+        items={strings.permission.required.rows.map((row, i) => ({
+          icon: ROW_ICONS[i % ROW_ICONS.length],
+          title: row,
+          showSubtitle: false,
+        }))}
+      />
+    </PrizmaListScreen>
+  ),
+);
+VideoSelfiePermissionRequiredScreen.displayName = 'VideoSelfiePermissionRequiredScreen';
+
+export default VideoSelfiePermissionRequiredScreen;

package/src/VideoSelfiePermissionScreen.tsx

@@ -0,0 +1,102 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaIllustrationSelfie } from '@incodetech/prizma-core-web/illustration-selfie';
+import { PrizmaTutorialScreen, 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 const VideoSelfiePermissionScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfiePermissionScreenProps
+>(
+  (
+    {
+      strings,
+      illustration,
+      screenId = 'video-selfie-permission-request',
+      showHeader = true,
+      showFooter = true,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <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 ?? <PrizmaIllustrationSelfie decorative />}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+VideoSelfiePermissionScreen.displayName = 'VideoSelfiePermissionScreen';
+
+export default VideoSelfiePermissionScreen;

package/src/VideoSelfieProcessingScreen.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaProcessingScreen,
+  type PrizmaProcessingScreenProps,
+} from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+
+export interface 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 const VideoSelfieProcessingScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieProcessingScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'video-selfie-processing',
+      showHeader = true,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <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;

package/src/VideoSelfieRetryScreen.tsx

@@ -0,0 +1,92 @@
+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 { VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+
+export interface VideoSelfieRetryScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `errors.retry` slice. */
+  strings: VideoSelfieStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Video Selfie — the recoverable "something went wrong" with the coaching list,
+ * built on the List archetype (GUIDELINES.md §6-G). Figma: purple section
+ * `video selfie - general errors 14.1 - retry`.
+ *
+ * The one section of group 14 that is NOT archetype F: the middle is a numbered
+ * list of three things to do differently, spanning the column from the top,
+ * which is exactly the distinction `ScreenLayout.css` draws between `__flex`
+ * (centred illustration) and `__list`. The rows are Core's `PrizmaList`
+ * (`variant="circles"`) verbatim, and the Spacing/24 above them is the
+ * archetype's.
+ *
+ * The title carries no status mark — Figma draws the bare H2 here, unlike its
+ * three sibling errors — so the archetype's default `status="none"` stands.
+ * Chrome follows the module's error family (owner rule `#PI-8` / `#F-34`):
+ * header and tag both stay.
+ */
+export const VideoSelfieRetryScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieRetryScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'video-selfie-error-retry',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const slice = strings.errors.retry;
+
+    return (
+      <PrizmaListScreen
+        ref={ref}
+        title={slice.title}
+        ctaLabel={slice.ctaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        /* Left-aligned, like `2.5`/`2.6`: a centred headline above a
+           left-led numbered list reads as a mistake (#VS-14). */
+        overrides={{ align: 'left', ...overrides }}
+        onAction={onAction}
+        {...shell}
+      >
+              {/* Core's `number` item is the 40×40 SQUIRCLE Figma draws;
+          `PrizmaList variant="circles"` maps to `number-circled`, a full round,
+          and the wrapper offers no variant reaching it — so the rows are
+          composed directly (#VS-8 precedent). DEVIATIONS #VS-16. */}
+      <ol className="video-selfie-steps__rows">
+        {slice.tips.map((tip, i) => (
+          <li key={i}>
+            <PrizmaListItem variant="number" number={i + 1} label={tip} />
+          </li>
+        ))}
+      </ol>
+      </PrizmaListScreen>
+    );
+  },
+);
+VideoSelfieRetryScreen.displayName = 'VideoSelfieRetryScreen';
+
+export default VideoSelfieRetryScreen;

package/src/VideoSelfieSelfieCaptureScreen.tsx

@@ -0,0 +1,122 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import type { PrizmaSelfieCaptureState } from '@incodetech/prizma-core-web/selfie-capture';
+import { PrizmaCaptureScreen, type PrizmaCaptureScreenProps } from './CaptureScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { VideoSelfieFeedbackKind, VideoSelfieStrings } from './VideoSelfieStrings';
+import './ScreenLayout.css';
+
+/** Which purple liveness section to render (group 8). */
+export type VideoSelfieSelfieState = 'start' | 'processing' | 'success' | 'failed';
+
+/** Purple state → Core `PrizmaSelfieCapture` state. Core models the in-flight
+ *  and verdict beats as capture STATES — the ring dissolves into the spinner or
+ *  the status mark in its own slot (DEVIATIONS #11) — so all four are one
+ *  archetype call, not a separate processing screen. */
+const CAPTURE_STATE: Record<VideoSelfieSelfieState, PrizmaSelfieCaptureState> = {
+  start: 'ready',
+  processing: 'uploading',
+  success: 'success',
+  failed: 'error',
+};
+
+export interface VideoSelfieSelfieCaptureScreenProps
+  extends Omit<
+    PrizmaCaptureScreenProps,
+    'state' | 'feedbackText' | 'statusLabels' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** 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
+   * 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>). */
+  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.
+ *
+ * **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.
+ *
+ * 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.
+ */
+export const VideoSelfieSelfieCaptureScreen = forwardRef<
+  HTMLDivElement,
+  VideoSelfieSelfieCaptureScreenProps
+>(
+  (
+    {
+      strings,
+      state = 'start',
+      feedback,
+      camera,
+      screenId = `video-selfie-selfie-capture-${feedback ?? state}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const slice = strings.selfieCapture;
+    /* The live ring carries an instruction; the in-flight and verdict beats
+       carry Core's own status copy instead (its `statusLabels` slot), which is
+       why the feedback line is scoped to the live state. */
+    const feedbackText =
+      CAPTURE_STATE[state] === 'ready'
+        ? feedback
+          ? slice.feedback[feedback]
+          : slice.startLabel
+        : undefined;
+
+    return (
+      <PrizmaCaptureScreen
+        ref={ref}
+        state={CAPTURE_STATE[state]}
+        cameraOpen={state === 'start'}
+        camera={camera}
+        feedbackText={feedbackText}
+        statusLabels={{
+          uploading: slice.processingLabel,
+          success: slice.successLabel,
+          error: slice.failedLabel,
+        }}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      />
+    );
+  },
+);
+VideoSelfieSelfieCaptureScreen.displayName = 'VideoSelfieSelfieCaptureScreen';
+
+export default VideoSelfieSelfieCaptureScreen;