@incodetech/prizma-core-screens 0.1.0

package/src/IdCaptureLayout.css

@@ -0,0 +1,111 @@
+/* ID Capture — module layout additions.
+ *
+ * ONLY what the foundation archetypes do not already own. Every value is a
+ * token; each departure from GUIDELINES.md carries a numbered row in
+ * DEVIATIONS.md (Wave 2 section).
+ *
+ * The module's one structural discovery is the THREE-BAND recipe every
+ * document screen shares — measured off the purple sections, not eyeballed:
+ *
+ *   1-5-1-id-empty  (CONTENT 390×610, node 16285:42627)
+ *     top container   24 → 181.014   342 × 157.014   Title bottom-anchored,
+ *                                                    40px of air below it
+ *     Capture / ID   181.014 → 428.986  342 × 247.97 (214.97 frame + 33 row)
+ *     bottom container 428.986 → 586    342 × 157.014  Manual capture flush
+ *                                                      to its own bottom
+ *     → 24 + 157.014 + 247.97 + 157.014 + 24 = 610 ✓
+ *
+ *   1-9-3-id-attempt (CONTENT 390×654, node I19281:325100;16285:42538)
+ *     top container   24 → 203.014   342 × 179.014   title + 40px air below
+ *     Capture / ID   203.014 → 417.986  342 × 214.97
+ *     Encrypted      417.986 → 450.986  154 × 33     (zero gap — Core renders
+ *                                                     this row INSIDE
+ *                                                     PrizmaIdCapture, same
+ *                                                     result)
+ *     bottom container 450.986 → 630    342 × 179.014  CTAs flush to bottom
+ *     → 24 + 179.014 + 214.97 + 33 + 179.014 + 24 = 654 ✓
+ *
+ * Two equal flexible bands hugging a fixed capture stage, the top band holding
+ * its content at the bottom with Spacing/40 of air under it. Identical on the
+ * dark camera stages and the light result screens, which is why one pair of
+ * classes serves both.
+ */
+
+/* ── The two flexible bands around the capture stage ───────────────────────── */
+
+.id-capture-band {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  /* On the camera stages PrizmaIdCapture's overlay scrim is an absolutely
+   * positioned box-shadow that escapes the frame by design; without a stacking
+   * context of their own the bands' plain text nodes would paint UNDER it (a
+   * positioned sibling always wins over non-positioned content). Lifting the
+   * bands keeps the HUD copy and the manual strip above the veil — the same
+   * reason ScreenShell declares `contain: layout paint` for the scrim. */
+  position: relative;
+  z-index: 1;
+}
+
+/* Spacing/40 of air between the title block (or the feedback pill) and the
+ * capture stage. NOT the foundation's `.prizma-viewfinder__intro`, which pins
+ * its title Spacing/24 above the window — that is Face Capture's number; the
+ * ID Capture purple sections measure 40 on every single stage and result
+ * screen (see the arithmetic above). DEVIATIONS.md #IDC-20. */
+.id-capture-band--top {
+  padding-bottom: var(--prizma-spacing-40);
+  gap: var(--prizma-spacing-8); /* Title → instruction, GUIDELINES §5 */
+}
+
+/* ── Camera stage (dark) ───────────────────────────────────────────────────── */
+
+/* The stage's nav row carries only the close X (no logo — the camera owns the
+ * screen). The foundation `.prizma-screen-nav` supplies the status-bar reserve,
+ * the 44px flow slot and the un-fixing of Core's PrizmaNavigation; the ink is
+ * the only thing the camera stage changes: Core's nav icon is the THEMED
+ * `Icon/Neutral/500`, which disappears on the always-dark camera surface, so it
+ * takes the camera's own Static ink — the same token PrizmaCaptureManual uses
+ * for the shutter and the "?" help control. DEVIATIONS.md #IDC-21. */
+.id-capture-stage__nav .prizma-nav__icon {
+  color: var(--prizma-icon-neutral-50-static);
+}
+
+/* The manual-capture strip spans the content column so its "?" help control
+ * lands on the column's right edge (Figma: `Manual capture` 342 wide, x=24). */
+.id-capture-stage__manual {
+  width: 100%;
+}
+
+/* The feedback pill replaces the title block on the error stages (Figma
+ * `1-5-5 … 1-5-9-id-errors`): same band, same Spacing/40 above the frame. */
+.id-capture-stage__feedback {
+  display: flex;
+  justify-content: center;
+}
+
+/* ── Removed: promoted into the foundation ───────────────────────────────────
+ * `.id-capture-glyph*` (the non-status glyph slot) is now
+ * `ScreenLayout.css`'s `__glyph` — DEVIATIONS #DC-29, closed.
+ * `.id-capture-info-list` / `.id-capture-accepted-docs` (the Spacing/24 under a
+ * title block) are now the List archetype's `__list` — DEVIATIONS #F-31.
+ */
+
+/* ── PrizmaIdCapture on a LIGHT surface ────────────────────────────────────── */
+/* The capture component was authored for the camera stage, so two of its layers
+ * are deliberately Static: the stand-in camera plate is Surface/Neutral/900 and
+ * the encrypted row is white ink. ID Capture's Figma also mounts the SAME
+ * component on the light result screens (`*-review`, `*-success`, `*-attempt`,
+ * `*-analyzing`), where the plate must not show through the document's 7px air
+ * and the reassurance line is drawn in body ink.
+ *
+ * The plate needs no override — Core's own `mode="overlay"` already makes the
+ * window transparent, which is what the light screens want. The ink does: the
+ * row is re-inked with the THEMED body token so it also survives dark mode,
+ * scoped to the light screens only (the camera stage keeps Core's Static white).
+ * Core gap — PrizmaIdCapture has no surface-aware encrypted row. DEVIATIONS.md #IDC-28.
+ */
+.id-capture-on-surface .prizma-id-capture__encrypted {
+  color: var(--prizma-text-body-800-primary);
+}

package/src/IdCaptureNoConnectionScreen.tsx

@@ -0,0 +1,68 @@
+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 { IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+
+export interface IdCaptureNoConnectionScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `noConnection` slice. */
+  strings: IdCaptureStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * ID Capture — no internet connection, built on the `PrizmaResultScreen`
+ * archetype (GUIDELINES.md §6-F).
+ * Figma: purple section `1-9-10-id-no-internet` of the front-side group.
+ *
+ * Structurally identical to the Face Capture pilot's
+ * `genericErrors.noConnection` — Title + one CTA — which is why both now render
+ * the same archetype and neither composes a shell. Header and verified tag are on
+ * per the owner's non-capture rule (DEVIATIONS #F-30).
+ *
+ * The Wi-Fi glyph is Figma's `Icon / Wi-Fi` in the archetype's `glyph` slot with
+ * the foundation's `__glyph` class; Core's `PrizmaTitle` allowlist is
+ * status | spinner | none (DEVIATIONS #10, #DC-29).
+ */
+export const IdCaptureNoConnectionScreen = forwardRef<
+  HTMLDivElement,
+  IdCaptureNoConnectionScreenProps
+>(
+  ({ strings, screenId = 'id-capture-no-connection', overrides, onAction, ...shell }, ref) => (
+    <PrizmaResultScreen
+      ref={ref}
+      glyph={
+        <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>
+      }
+      title={strings.noConnection.title}
+      subtitle={strings.noConnection.description}
+      ctaLabel={strings.noConnection.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+IdCaptureNoConnectionScreen.displayName = 'IdCaptureNoConnectionScreen';
+
+export default IdCaptureNoConnectionScreen;

package/src/IdCapturePermissionScreen.tsx

@@ -0,0 +1,102 @@
+import React, { forwardRef } from 'react';
+import { IconApproval, IconBankCardSearch, IconCamera } 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 { IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+
+/**
+ * The three reason rows' leading icons, in the order the purple section lists
+ * them: the camera captures the ID · it verifies authenticity · it is required
+ * to verify identity. Canonical bank only (§10).
+ */
+const ROW_ICONS = [
+  <IconCamera key="camera" size="m" />,
+  <IconBankCardSearch key="authenticity" size="m" />,
+  <IconApproval key="required" size="m" />,
+];
+
+export interface IdCapturePermissionScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'ctaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `permission` slice. */
+  strings: IdCaptureStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * ID Capture — "Camera permission is required", built on the `PrizmaListScreen`
+ * archetype (GUIDELINES.md §6-G).
+ * Figma: purple section `1-3-2-id` of the `Permissions` group, plus its
+ * `1-3-2-id-allow-camera`, `1-3-2-id-quit-process` and
+ * `1-3-2-id-allow-camera-quit-process` siblings — which differ only in which
+ * control is pressed, i.e. copy/interaction variants of this ONE screen.
+ *
+ * Warning status mark → Title → three reason rows → a tertiary "quit" link →
+ * the permission CTA. `showHeader={false}` keeps the section's logo-free chrome
+ * (the flow has not started) with the nav row still reserved.
+ *
+ * NOT built from this group: `1-3-1-id-iOS+Android` and `1-4-1-id` are the
+ * NATIVE OS permission dialogs (an iOS alert and an Android sheet drawn as
+ * documentation), and `1-4-2-id` is a step list whose rows are OS app icons
+ * (Settings, Safari, the iOS camera tile). None of them is a Prizma surface and
+ * none of their chrome exists in Core — building them would mean inventing
+ * primitives and shipping platform raster assets, both forbidden (§10, rule 1).
+ * Reported to the owner instead. DEVIATIONS.md #IDC-26.
+ */
+export const IdCapturePermissionScreen = forwardRef<
+  HTMLDivElement,
+  IdCapturePermissionScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'id-capture-permission',
+      showHeader = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaListScreen
+      ref={ref}
+      showHeader={showHeader}
+      status="warning"
+      title={strings.permission.title}
+      subtitle={strings.permission.description}
+      ctaLabel={strings.permission.ctaLabel}
+      linkLabel={strings.permission.quitLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaCardListCommonIssues
+        items={strings.permission.rows.map((row, i) => ({
+          icon: ROW_ICONS[i % ROW_ICONS.length],
+          title: row.title,
+          subtitle: row.description,
+          showSubtitle: Boolean(row.description),
+        }))}
+      />
+    </PrizmaListScreen>
+  ),
+);
+IdCapturePermissionScreen.displayName = 'IdCapturePermissionScreen';
+
+export default IdCapturePermissionScreen;

package/src/IdCaptureResultScreen.tsx

@@ -0,0 +1,197 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import {
+  PrizmaIdCapture,
+  type PrizmaIdCaptureState,
+} from '@incodetech/prizma-core-web/id-capture';
+import { PrizmaResultScreen, type PrizmaResultScreenProps, type PrizmaResultStatus } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  IdCaptureDocumentType,
+  IdCaptureStrings,
+} from './IdCaptureStrings';
+import './ScreenLayout.css';
+import './IdCaptureLayout.css';
+
+/**
+ * Which verdict the screen reports. Each maps onto a purple section family:
+ * - `review`         — `*-review` (no status icon, Retake + Continue)
+ * - `success`        — `*-success`, `1-10-2-id-success-capture-only`
+ * - `error`          — `*-attempt`, `*-failed-attempt` (retries left)
+ * - `exhausted`      — `*-no-attempts` (retries used up)
+ * - `classification` — Classification Errors / "Scan the back of your ID"
+ */
+export type IdCaptureResultVerdict =
+  | 'review'
+  | 'success'
+  | 'error'
+  | 'exhausted'
+  | 'classification';
+
+/** Verdict → the archetype's status slot (Core `PrizmaTitle` icon). */
+const TITLE_STATUS: Record<IdCaptureResultVerdict, PrizmaResultStatus> = {
+  review: 'none',
+  success: 'success',
+  error: 'error',
+  exhausted: 'error',
+  classification: 'warning',
+};
+
+/**
+ * Verdict → Core `PrizmaIdCapture` frame border.
+ *
+ * `classification` is the one place Figma asks for something Core does not
+ * draw: an AMBER frame around the still. Core's `BORDER_GROUP` has exactly
+ * four treatments (enabled / focused / success / error) and no warning band, so
+ * the design system wins and the still keeps the neutral `filled` frame rather
+ * than borrowing the red one — a red border would tell the user the capture
+ * failed, which is the opposite of "we got it, we just need the other side".
+ * DEVIATIONS.md #IDC-22.
+ */
+const FRAME_STATE: Record<IdCaptureResultVerdict, PrizmaIdCaptureState> = {
+  review: 'filled',
+  success: 'success',
+  error: 'error',
+  exhausted: 'error',
+  classification: 'filled',
+};
+
+export interface IdCaptureResultScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'disclaimer'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'ctaOrientation'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the slice its `verdict` names. */
+  strings: IdCaptureStrings;
+  /** Which purple result section to render. Default `success`. */
+  verdict?: IdCaptureResultVerdict;
+  /** Which document was captured — Core `PrizmaIdCapture.type`. */
+  documentType?: IdCaptureDocumentType;
+  /** Portrait document orientation — the `↕️ vertical` groups. */
+  vertical?: boolean;
+  /** The captured document still (<img>) shown inside the frame. */
+  still?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * ID Capture — the captured-document verdict screens, built on the
+ * `PrizmaResultScreen` archetype (GUIDELINES.md §6-F).
+ *
+ * ONE screen for every `*-review`, `*-success`, `*-attempt`,
+ * `*-failed-attempt` and `*-no-attempts` section across all five capture groups,
+ * plus the Classification Errors section — ~35 purple sections that are copy,
+ * status-icon, frame-state and CTA variants of a single layout.
+ *
+ * The captured still rides in the archetype's `children` slot, the attempts line
+ * in `disclaimer`, and the review/classification action pair in
+ * `secondaryCtaLabel`. This file used to hand-build the whole shell (198 lines)
+ * with its own three-band arithmetic in `IdCaptureLayout.css`; the archetype now
+ * owns every offset, with two measured consequences logged as #F-33: the title
+ * block sits Spacing/16 above the frame rather than the module's Spacing/40, and
+ * review's Retake+Continue pair stacks vertically instead of sitting side by side
+ * (the archetype has one CTA orientation).
+ *
+ * `showHeader={false}` keeps the family's chrome as Figma draws it — no logo —
+ * while still reserving the nav row, so the offsets are identical to every other
+ * screen (owner rule 2026-08-18).
+ *
+ * Everything visual belongs to Core: the status marks are `PrizmaTitle`'s icon
+ * slot (outline bank icons — the module Figma still draws the two-tone filled
+ * discs, DEVIATIONS.md #15 again), and the frame and its border are
+ * `PrizmaIdCapture`.
+ */
+export const IdCaptureResultScreen = forwardRef<HTMLDivElement, IdCaptureResultScreenProps>(
+  (
+    {
+      strings,
+      verdict = 'success',
+      documentType = 'id',
+      vertical = false,
+      still,
+      screenId = `id-capture-${verdict}`,
+      showHeader = false,
+      className,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy =
+      verdict === 'review'
+        ? strings.review
+        : verdict === 'success'
+          ? strings.success
+          : verdict === 'classification'
+            ? strings.classification
+            : strings.error;
+
+    // Figma: the `*-attempt` / `*-failed-attempt` sections carry "N attempts
+    // remaining"; `*-no-attempts` swaps it for "No attempts remaining" and the
+    // CTA becomes the forward action. Both come from the same `error` slice, so
+    // the host's locale pack decides the wording; the screen only decides
+    // whether the line is rendered at all (review / success / classification
+    // have no attempts line in any purple section).
+    const attemptsLabel =
+      verdict === 'error' || verdict === 'exhausted' ? strings.error.attemptsLabel : undefined;
+
+    const secondaryLabel =
+      verdict === 'review'
+        ? strings.review.retakeLabel
+        : verdict === 'classification'
+          ? strings.classification.secondaryLabel
+          : undefined;
+
+    return (
+      <PrizmaResultScreen
+        ref={ref}
+        /* `id-capture-on-surface` re-inks Core's encrypted row for the LIGHT
+           result surface (DEVIATIONS #IDC-28); it carries no layout. */
+        className={['id-capture-on-surface', className ?? ''].filter(Boolean).join(' ')}
+        showHeader={showHeader}
+        status={TITLE_STATUS[verdict]}
+        title={copy.title}
+        subtitle={copy.description}
+        disclaimer={attemptsLabel}
+        ctaLabel={copy.ctaLabel}
+        secondaryCtaLabel={secondaryLabel}
+        // Figma pairs Retake | Continue side by side in the 342 column (IDC-35).
+        ctaOrientation={secondaryLabel ? 'row' : 'stacked'}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        {/* `mode="overlay"` on a LIGHT screen for the reason Core minted it:
+            it drops the stand-in camera plate, so the document's designed 7px
+            of air past the border stays the page surface instead of a dark
+            rectangle. The still, the border state and the encrypted row are
+            unaffected (DEVIATIONS.md #IDC-28). */}
+        <PrizmaIdCapture
+          type={documentType}
+          state={FRAME_STATE[verdict]}
+          isVertical={vertical}
+          mode="overlay"
+          encryptedLabel={strings.encryptedLabel}
+          still={still}
+        />
+      </PrizmaResultScreen>
+    );
+  },
+);
+IdCaptureResultScreen.displayName = 'IdCaptureResultScreen';
+
+export default IdCaptureResultScreen;