@incodetech/prizma-core-screens 0.1.0

package/src/FaceCaptureResultSuccessScreen.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCaptureScreen, type PrizmaCaptureScreenProps } from './CaptureScreen';
+import type { FaceCaptureStrings } from './FaceCaptureStrings';
+import './FaceCaptureLayout.css';
+
+export interface FaceCaptureResultSuccessScreenProps
+  extends Omit<
+    PrizmaCaptureScreenProps,
+    'state' | 'camera' | 'title' | 'feedbackText' | 'statusLabels' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `success` slice (+ shared labels). */
+  strings: FaceCaptureStrings;
+}
+
+/**
+ * Face Capture — success result (Archetype B, GUIDELINES.md §6-B).
+ * Figma: purple section faceCapture.resultSuccess.default.
+ *
+ * Same reasoning as FaceCaptureLoadingScreen: the check + "Success!" sit in the
+ * ring's own 342-tall slot 40px below the nav (Figma "Middle Content" y=84),
+ * not in a §6-C full-height centered column. Core renders exactly that as the
+ * `success` state of `PrizmaSelfieCapture` — the stage dissolves into the
+ * canonical `PrizmaTitle` with the positive status icon (owner choreography
+ * 2026-07-15). DEVIATIONS.md #11.
+ *
+ * The verdict icon, its color token, and the dissolve all belong to Core; this
+ * screen only supplies copy (§7 — success reuses the capture geometry, never a
+ * new layout). The Core component owns the ring spacing (DEVIATIONS.md #12).
+ */
+export const FaceCaptureResultSuccessScreen = forwardRef<
+  HTMLDivElement,
+  FaceCaptureResultSuccessScreenProps
+>(({ strings, screenId = 'face-capture-success', className, ...rest }, ref) => (
+  <PrizmaCaptureScreen
+    // success: the feed is closed — not a capture screen (owner rule 2026-08-18).
+    cameraOpen={false}
+    ref={ref}
+    className={className}
+    state="success"
+    statusLabels={{ success: strings.success.title }}
+    verifiedLabel={strings.verifiedLabel}
+    navLabel={strings.navLabel}
+    screenId={screenId}
+    {...rest}
+  />
+));
+FaceCaptureResultSuccessScreen.displayName = 'FaceCaptureResultSuccessScreen';
+
+export default FaceCaptureResultSuccessScreen;

package/src/FaceCaptureStrings.ts

@@ -0,0 +1,92 @@
+// Face Capture module — copy contract.
+//
+// Every Face Capture screen receives the SAME `strings: FaceCaptureStrings`
+// object (rule: all copy via props, no hardcoded English — GUIDELINES.md §9).
+// The object is the module's locale pack: one instance drives the whole flow,
+// which is what the future FlowPlayer steps through. Sample copy lives only
+// in previews / host apps.
+//
+// Authoritative screen list: the PURPLE "screen specs" sections of the
+// Face Capture Figma file (wssQwsBcqYrWqVsZTFVVVA, page 18:19332) —
+// tutorial · capturing (15 states) · manualCapture · loading (uploading /
+// processing) · resultSuccess · resultError (+ exhausted) · genericErrors
+// (noConnection).
+
+/**
+ * The capturing sub-states — one per purple `faceCapture.capturing.*` spec
+ * section. They are copy/ring-state variants of ONE screen
+ * (FaceCaptureCapturingScreen), not separate screens.
+ */
+export type FaceCaptureCapturingState =
+  | 'initiating'
+  | 'getReady'
+  | 'alignFace'
+  | 'lookAtCamera'
+  | 'tooDark'
+  | 'tooBright'
+  | 'eyesClosed'
+  | 'maskDetected'
+  | 'glassesDetected'
+  | 'hatDetected'
+  | 'moveRight'
+  | 'moveLeft'
+  | 'moveCloser'
+  | 'moveAway'
+  | 'faceOcclusion';
+
+export interface FaceCaptureStrings {
+  /** Accessible name for the logo nav region (i18n — no baked-in English). */
+  navLabel?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+
+  /** faceCapture.tutorial.* — default / loading / ageAssurance are copy +
+   *  CTA-state variants of this one screen. */
+  tutorial: {
+    title: string;
+    subtitle?: string;
+    /** "Stay still, selfie will be taken automatically" */
+    disclaimer?: string;
+    ctaLabel: string;
+    /** Visible/accessible copy while the CTA is loading (tutorial.loading). */
+    ctaLoadingLabel?: string;
+  };
+
+  /** faceCapture.capturing.* — the H2 instruction under the ring, per state.
+   *  `initiating` has no instruction in the design; omit it. */
+  capturing: Partial<Record<FaceCaptureCapturingState, string>>;
+
+  /** faceCapture.manualCapture.default */
+  manualCapture: {
+    /** "Align your face within the silhouette and press the button to capture" */
+    instruction: string;
+    /** Accessible name of the shutter button. */
+    captureLabel: string;
+  };
+
+  /** faceCapture.loading.uploading */
+  uploading: { title: string };
+  /** faceCapture.loading.processing */
+  processing: { title: string };
+  /** faceCapture.resultSuccess.default */
+  success: { title: string };
+
+  /** faceCapture.resultError.* — the host passes the copy of the CURRENT
+   *  error (faceNotAligned, tooDark, …); exhausted variants change icon +
+   *  copy + CTA via the same slice. */
+  error: {
+    title: string;
+    description?: string;
+    /** "2 attempts remaining" — omit on exhausted variants. */
+    attemptsLabel?: string;
+    /** "Try again" / "Continue" */
+    ctaLabel: string;
+  };
+
+  /** faceCapture.genericErrors.noConnection */
+  noConnection: {
+    title: string;
+    description?: string;
+    ctaLabel: string;
+  };
+}

package/src/FaceCaptureTutorialScreen.tsx

@@ -0,0 +1,77 @@
+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 { FaceCaptureStrings } from './FaceCaptureStrings';
+import './ScreenLayout.css';
+
+export interface FaceCaptureTutorialScreenProps
+  extends Omit<
+    PrizmaTutorialScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'disclaimer'
+    | 'ctaLabel'
+    | 'ctaLoadingLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `tutorial` slice (+ shared labels). */
+  strings: FaceCaptureStrings;
+  /** faceCapture.tutorial.loading: CTA shows the designed loading treatment. */
+  ctaLoading?: boolean;
+  /** Replace the default selfie illustration (Core PrizmaIllustrationSelfie). */
+  illustration?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Face Capture — tutorial, built on the `PrizmaTutorialScreen` archetype
+ * (GUIDELINES.md §6-A). Figma: purple sections faceCapture.tutorial.default /
+ * .loading / .ageAssurance (copy + CTA-state variants of this one screen).
+ *
+ * It previously composed the foundation shell by hand because the archetype had
+ * no CTA-loading slot and `faceCapture.tutorial.loading` needs one. The slot now
+ * exists (`ctaLoading` / `ctaLoadingLabel`, forwarded to Core's own
+ * `PrizmaButton` loading treatment — #F-32), so the screen is a single archetype
+ * call and declares no layout.
+ */
+export const FaceCaptureTutorialScreen = forwardRef<
+  HTMLDivElement,
+  FaceCaptureTutorialScreenProps
+>(
+  (
+    {
+      strings,
+      ctaLoading = false,
+      illustration,
+      screenId = 'face-capture-tutorial',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaTutorialScreen
+      ref={ref}
+      title={strings.tutorial.title}
+      subtitle={strings.tutorial.subtitle}
+      disclaimer={strings.tutorial.disclaimer}
+      ctaLabel={strings.tutorial.ctaLabel}
+      ctaLoading={ctaLoading}
+      ctaLoadingLabel={strings.tutorial.ctaLoadingLabel}
+      illustration={illustration ?? <PrizmaIllustrationSelfie />}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+FaceCaptureTutorialScreen.displayName = 'FaceCaptureTutorialScreen';
+
+export default FaceCaptureTutorialScreen;

package/src/FaceMatchComparisonCompactScreen.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaProcessingScreen,
+  type PrizmaProcessingScreenProps,
+} from './ProcessingScreen';
+import type { FaceMatchStrings } from './FaceMatchStrings';
+
+export interface FaceMatchComparisonCompactScreenProps
+  extends Omit<
+    PrizmaProcessingScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `comparisonCompact` slice. */
+  strings: FaceMatchStrings;
+}
+
+/**
+ * Face Match — compact matching state (Archetype C, GUIDELINES.md §6-C).
+ * Figma: purple section `faceMatch.comparisonCompact.matching` — the photo-less
+ * variant of the matching state, used when the captured images are not shown.
+ *
+ * This one IS the centered Processing archetype, and it is the counter-example
+ * DEVIATIONS.md #11 predicted: Face Capture's loading screens use archetype B
+ * because their Figma pins the spinner inside the 342-tall ring box, whereas
+ * this section really centers — the spinner + title + subtitle block (342×129)
+ * sits at the exact midpoint of the flexible middle frame (middle content
+ * 44→456 tall 412, block at y=141.5 = (412 − 129) / 2). So the foundation
+ * archetype is reused verbatim and this screen only supplies copy; it is NOT a
+ * copy of FaceCaptureLoadingScreen, whose layout differs. DEVIATIONS.md #FM-24.
+ *
+ * The spinner, its 48px geometry and the title typography all belong to Core's
+ * `PrizmaTitle` spinner slot inside the archetype — nothing re-implemented (§7).
+ */
+export const FaceMatchComparisonCompactScreen = forwardRef<
+  HTMLDivElement,
+  FaceMatchComparisonCompactScreenProps
+>(({ strings, screenId = 'face-match-comparison-compact', ...rest }, ref) => (
+  <PrizmaProcessingScreen
+    ref={ref}
+    status="loading"
+    title={strings.comparisonCompact.title}
+    subtitle={strings.comparisonCompact.description}
+    verifiedLabel={strings.verifiedLabel}
+    navLabel={strings.navLabel}
+    screenId={screenId}
+    {...rest}
+  />
+));
+FaceMatchComparisonCompactScreen.displayName = 'FaceMatchComparisonCompactScreen';
+
+export default FaceMatchComparisonCompactScreen;

package/src/FaceMatchComparisonScreen.tsx

@@ -0,0 +1,201 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaTooltip } from '@incodetech/prizma-core-web/tooltip';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  FaceMatchComparisonVariant,
+  FaceMatchStrings,
+} from './FaceMatchStrings';
+import './ScreenLayout.css';
+import './FaceMatchLayout.css';
+
+/** Which captured image fills a circle. The host owns the pixels (same
+ *  contract as `camera` on the capture screens) — Face Match never captures. */
+export type FaceMatchPhotoRole = 'selfie' | 'id' | 'nfc' | 'secondId';
+
+/** Host-supplied portraits, one per role the chosen variant asks for. Any role
+ *  left out renders an empty neutral disc. */
+export type FaceMatchComparisonPhotos = Partial<Record<FaceMatchPhotoRole, ReactNode>>;
+
+/**
+ * Photo layout per purple `faceMatch.comparison.*` section. `nfc` and
+ * `firstAndSecondID` are the SAME two-row layout — they differ only in which
+ * label each circle carries, so they are copy variants, not separate screens.
+ */
+const ROWS: Record<FaceMatchComparisonVariant, readonly (readonly FaceMatchPhotoRole[])[]> = {
+  selfieId: [['selfie', 'id']],
+  nfc: [['nfc', 'id'], ['selfie']],
+  firstAndSecondID: [['id', 'secondId'], ['selfie']],
+};
+
+/** Figma swaps the `id` circle's label between "ID" and "First ID"; every other
+ *  role has one label. */
+function labelFor(
+  role: FaceMatchPhotoRole,
+  variant: FaceMatchComparisonVariant,
+  comparison: FaceMatchStrings['comparison'],
+): string | undefined {
+  switch (role) {
+    case 'selfie':
+      return comparison.selfieLabel;
+    case 'nfc':
+      return comparison.nfcLabel;
+    case 'secondId':
+      return comparison.secondIdLabel;
+    case 'id':
+    default:
+      return variant === 'firstAndSecondID' ? comparison.firstIdLabel : comparison.idLabel;
+  }
+}
+
+/**
+ * Where the comparison is in its own choreography — the module MOVING rather
+ * than one of the frames it passes through (FaceMatchLayout.css § "The
+ * comparison, moving", which carries the timeline and where its numbers come
+ * from).
+ *
+ *   arriving   The module has just opened. Title only; the discs are still
+ *              outside the screen.
+ *   comparing  The discs travel in and are then named by their callouts.
+ *   converged  The callouts leave, and the discs run together into one and go
+ *              with them — handing the screen to the verdict.
+ *
+ * Setting it puts the screen in its moving form, and `matching` is then ignored:
+ * the rosette that prop draws is a frame partway through `converged`, not a
+ * place the module rests.
+ */
+export type FaceMatchComparisonPhase = 'arriving' | 'comparing' | 'converged';
+
+export interface FaceMatchComparisonScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Module copy — this screen reads the `comparison` slice (+ shared labels). */
+  strings: FaceMatchStrings;
+  /** Which purple photo set to render. Default `'selfieId'`. */
+  variant?: FaceMatchComparisonVariant;
+  /** The converged state (`comparison.matching` / `comparison.threeFacesMatching`):
+   *  the label callouts are dropped and the circles overlap into a rosette.
+   *  A STILL — ignored once `phase` is set. */
+  matching?: boolean;
+  /** Play the comparison instead of drawing one frame of it. Absent = the still
+   *  the Figma sections are, which is what a screen grid wants. */
+  phase?: FaceMatchComparisonPhase;
+  /** The captured portraits. Roles the variant does not use are ignored. */
+  photos?: FaceMatchComparisonPhotos;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Face Match — identity comparison (Archetype A layout minus the CTA,
+ * GUIDELINES.md §6-A). Figma: the five purple `faceMatch.comparison.*` sections
+ * — `initialState` · `matching` · `nfc` · `firstAndSecondID` ·
+ * `threeFacesMatching` — which are photo-count / label / convergence variants of
+ * this ONE screen.
+ *
+ * This is the module's only genuinely new composition, and the reason Face Match
+ * is not a copy of Face Capture: there is no ring, no camera and no CTA. The
+ * purple sections' CONTENT frame holds exactly Navigation → Title → the photo
+ * cluster → the verified Tag (measured 390 section: nav 0→44, Title 68→96 i.e.
+ * the archetype's 24px nav→content gap, cluster in the flexible middle, Tag
+ * 616→650).
+ *
+ * Composed on the foundation shell rather than wrapping PrizmaTutorialScreen
+ * because that archetype always renders a CTA and these sections have none —
+ * foundation gap reported to the owner, no foundation file edited.
+ *
+ * TWO FORMS, one component. Without `phase` it draws a FRAME — the purple
+ * sections exactly as Figma has them, which is what a screen grid and an export
+ * still need. With `phase` it PLAYS, because Face Match has no camera and no
+ * control and the movement is therefore the whole screen rather than polish on
+ * top of it: the discs arrive from off-screen, are named, and then run together
+ * into one and go. That choreography, its three phases and the shipped-SDK
+ * numbers behind it live in FaceMatchLayout.css § "The comparison, moving".
+ *
+ * The label callouts are Core's `PrizmaTooltip` with a bottom-centred arrow. The
+ * module Figma draws a bespoke light pill instead (a hand-drawn boolean Union,
+ * not a Tooltip instance); the design system wins and these render as the
+ * canonical dark tooltip. DEVIATIONS.md #FM-21.
+ */
+export const FaceMatchComparisonScreen = forwardRef<
+  HTMLDivElement,
+  FaceMatchComparisonScreenProps
+>(
+  (
+    {
+      strings,
+      variant = 'selfieId',
+      matching = false,
+      phase,
+      photos,
+      screenId = 'face-match-comparison',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaScreenShell ref={ref} {...shell}>
+      <PrizmaScreenNav logo={overrides?.logo} navLabel={strings.navLabel} />
+      <div className="prizma-screen-layout__content">
+        <PrizmaTitle
+          variant={overrides?.align === 'left' ? 'left' : 'centered'}
+          title={strings.comparison.title}
+        />
+        <div className="prizma-screen-layout__flex">
+          <div
+            className={[
+              'face-match-cluster',
+              // A phase means the screen is MOVING, and the two are exclusive:
+              // the rosette is a frame of the movement, not a state beside it.
+              phase ? 'face-match-cluster--animated' : '',
+              phase ? `face-match-cluster--${phase}` : '',
+              !phase && matching ? 'face-match-cluster--matching' : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+          >
+            {ROWS[variant].map((row, rowIndex) => (
+              <div className="face-match-cluster__row" key={rowIndex}>
+                {row.map((role) => {
+                  const label = labelFor(role, variant, strings.comparison);
+                  return (
+                    <div className="face-match-cluster__face" key={role}>
+                      {/* The converged STILL drops the callouts entirely — the
+                          rosette offsets are measured from circle to circle
+                          (DEVIATIONS.md #FM-20). The moving version keeps them
+                          in every phase and fades them, because a callout that
+                          leaves the DOM cannot leave the screen, and its box is
+                          what holds the cluster's height still while it goes. */}
+                      {(phase || !matching) && label ? (
+                        <PrizmaTooltip
+                          className="face-match-cluster__label"
+                          arrow="bottom"
+                          arrowAlignment="center"
+                        >
+                          {label}
+                        </PrizmaTooltip>
+                      ) : null}
+                      <div className="face-match-cluster__photo">
+                        {photos?.[role]}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="prizma-screen-layout__footer">
+          <PrizmaTag label={strings.verifiedLabel} />
+        </div>
+      </div>
+    </PrizmaScreenShell>
+  ),
+);
+FaceMatchComparisonScreen.displayName = 'FaceMatchComparisonScreen';
+
+export default FaceMatchComparisonScreen;