@incodetech/prizma-core-screens 0.1.0

package/src/NfcTutorialScreen.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaIllustrationNfcScan } from '@incodetech/prizma-core-web/illustration-nfc-scan';
+import { PrizmaTutorialScreen, type PrizmaTutorialScreenProps } from './TutorialScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { NfcDocumentType, NfcStrings } from './NfcStrings';
+import './ScreenLayout.css';
+
+export interface NfcTutorialScreenProps
+  extends Omit<
+    PrizmaTutorialScreenProps,
+    'title' | 'subtitle' | 'ctaLabel' | 'illustration' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `tutorial` slice. */
+  strings: NfcStrings;
+  /** Which purple section: `nfc.tutorial.passport` or `nfc.tutorial.id`. */
+  documentType?: NfcDocumentType;
+  /** Replace Core's NFC artwork (hosts that ship their own document art). */
+  illustration?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * NFC — "Let's scan your passport chip" / "Read the chip on the ID", the
+ * instruction screen the CTA starts the read from. Purple sections
+ * `nfc.tutorial.passport` (19974:80984) and `nfc.tutorial.id` (19978:115144),
+ * on the Tutorial archetype (GUIDELINES.md §6-A).
+ *
+ * The centrepiece is Core's `PrizmaIllustrationNfcScan` — the looping
+ * phone-approaches-the-chip composition whose Figma frames ARE the two
+ * `iOS Animation` / `Android Animation` layers these sections draw. The screen
+ * supplies no artwork of its own.
+ *
+ * This is also what the four `nfc.scanning.*ready` sections show: they are this
+ * exact screen with the platform's NFC sheet presented over it, so they need no
+ * screen of their own (see `NfcScanningScreen`).
+ */
+export const NfcTutorialScreen = forwardRef<HTMLDivElement, NfcTutorialScreenProps>(
+  (
+    {
+      strings,
+      documentType = 'passport',
+      illustration,
+      screenId = `nfc-tutorial-${documentType}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaTutorialScreen
+      ref={ref}
+      title={strings.tutorial[documentType].title}
+      subtitle={strings.tutorial[documentType].subtitle}
+      ctaLabel={strings.tutorial.ctaLabel}
+      illustration={
+        illustration ?? (
+          <PrizmaIllustrationNfcScan
+            type={documentType}
+            ariaLabel={strings.tutorial.illustrationLabel}
+          />
+        )
+      }
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+NfcTutorialScreen.displayName = 'NfcTutorialScreen';
+
+export default NfcTutorialScreen;

package/src/PermissionsAllowScreen.tsx

@@ -0,0 +1,90 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { PermissionsStrings } from './PermissionsStrings';
+import './ScreenLayout.css';
+
+export interface PermissionsAllowScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'glyph'
+    | 'ctaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Family copy — this screen reads the `allow` slice. */
+  strings: PermissionsStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Permissions — "Allow Incode to access your camera", built on the Result
+ * archetype (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Figma: `1-3-2-id-allow-camera` of the `Permissions` section
+ * (qGJjfL4O0JSjz1x4tOjJn8, 3:1193). The sibling of
+ * `PermissionsRequiredScreen`, and the reason they are two screens rather than
+ * one with a variant: this frame states the ask in a centred title + supporting
+ * line, that one argues it with a list of reasons hung under the title. Result
+ * centres its column, List hangs it from the top — different archetypes, so
+ * different screens.
+ *
+ * `1-3-2-id-allow-camera-quit-process` is the SAME screen with an iOS confirm
+ * alert layered over it — an OS surface, not a second Prizma screen (see
+ * `PermissionsStrings.ts`).
+ *
+ * `showHeader={false}` keeps the section's logo-free chrome (the flow has not
+ * started) with the nav row still reserved.
+ *
+ * TWO things Figma draws that this screen does not, both reported rather than
+ * worked around:
+ * - **The filled amber disc.** Core renders the canonical OUTLINE warning mark
+ *   (icon-outline sweep, DEVIATIONS #15).
+ * - **"Quit process" above the CTA.** Archetype F renders its tertiary link
+ *   BELOW the button stack (`ResultScreen.tsx`), so this screen ships inverted
+ *   against its frame. The archetype owns the order and no screen re-declares
+ *   it — F needs a `ctaOrder` slot alongside the `ctaOrientation` it already
+ *   has, exactly as Geolocation escalated for the same reason. Borrowing
+ *   `bandContent` to fake the position is the workaround #VS-17 rejected.
+ */
+export const PermissionsAllowScreen = forwardRef<
+  HTMLDivElement,
+  PermissionsAllowScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'permissions-allow',
+      showHeader = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaResultScreen
+      ref={ref}
+      showHeader={showHeader}
+      status="warning"
+      title={strings.allow.title}
+      subtitle={strings.allow.subtitle}
+      ctaLabel={strings.allow.ctaLabel}
+      linkLabel={strings.allow.quitLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+PermissionsAllowScreen.displayName = 'PermissionsAllowScreen';
+
+export default PermissionsAllowScreen;

package/src/PermissionsBrowserStepsScreen.tsx

@@ -0,0 +1,158 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import {
+  IconArrowLeft,
+  IconCamera,
+  IconFolderFileOpen,
+  IconLock,
+  IconLockCheck,
+  IconMobilePhone,
+  IconNumberedList,
+  IconTextAi,
+} 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 {
+  PermissionsBrowser,
+  PermissionsStepKind,
+  PermissionsStrings,
+} from './PermissionsStrings';
+import './ScreenLayout.css';
+
+/**
+ * Step kind → canonical bank glyph. ONE map, in one place, for the same reason
+ * Geolocation's exists (`GeolocationBrowserStepsScreen`) and Document Capture's
+ * before it (DEVIATIONS #DC-23): Figma leads every row with OS/browser chrome
+ * the Prizma bank does not ship — a ⋮ overflow menu, a gear tile, a permission
+ * toggle, Safari's "AA" control and each browser's own logo on the last row.
+ * Shipping those would mean inventing primitives and bundling brand rasters,
+ * both forbidden (rule 1, GUIDELINES §10), so each row takes the nearest
+ * canonical glyph:
+ *
+ *   settings    → IconLock            site settings sit behind the address-bar lock
+ *   browser     → IconTextAi          Safari's "AA" is the address-bar text control
+ *   menu        → IconNumberedList    the ⋮ overflow opens a menu list
+ *   permissions → IconLockCheck       a granted permission
+ *   camera      → IconCamera          exact
+ *   toggle      → IconLockCheck       the Allow/Ask switch
+ *   device      → IconMobilePhone     the device's Settings app
+ *   apps        → IconFolderFileOpen  the app list / app drawer
+ *   return      → IconArrowLeft       "return here and refresh" (Figma draws the
+ *                                     browser's own logo — never bundled)
+ *
+ * This is the SAME substitution table Geolocation already escalated to the
+ * owner, extended by `camera`/`toggle`/`browser` for this family. Mint the
+ * glyphs or bless the substitutions — one decision covers both families.
+ */
+const STEP_ICONS: Record<PermissionsStepKind, ReactNode> = {
+  settings: <IconLock size="m" />,
+  browser: <IconTextAi size="m" />,
+  menu: <IconNumberedList size="m" />,
+  permissions: <IconLockCheck size="m" />,
+  camera: <IconCamera size="m" />,
+  toggle: <IconLockCheck size="m" />,
+  device: <IconMobilePhone size="m" />,
+  apps: <IconFolderFileOpen size="m" />,
+  return: <IconArrowLeft size="m" />,
+};
+
+export interface PermissionsBrowserStepsScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'ctaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Family copy — this screen reads the `browserSteps` slice. */
+  strings: PermissionsStrings;
+  /** Which browser's steps to show. Default `safariIos`. */
+  browser?: PermissionsBrowser;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Permissions — "Follow the next steps to allow Incode to access your camera",
+ * built on the List archetype (GUIDELINES.md §6-G, `PrizmaListScreen`).
+ *
+ * Figma: `1-4-2-id` of the `Permissions` section, plus the four
+ * `Android browsers` frames of the Web full-flow board (4:8159 — Chrome,
+ * Firefox, Samsung Internet, Opera). ONE screen for all five: they draw the
+ * identical skeleton — title block → a step list filling the middle → the
+ * refresh CTA — and differ only in the rows, because re-enabling the camera is
+ * a different journey in each browser. Five files would have been five chances
+ * to drift.
+ *
+ * The rows are Core's `PrizmaCardListCommonIssues` verbatim; only the leading
+ * glyph is chosen here, from the canonical bank (see `STEP_ICONS`).
+ *
+ * The title block is LEFT-aligned for this whole family. Every frame starts the
+ * two-line headline flush at the gutter over left-led step rows; a centred
+ * headline above a left-aligned list reads as a mistake. The screen therefore
+ * DEFAULTS the archetype's own `align` override to `left` rather than declaring
+ * any alignment of its own, and a host that passes `overrides.align` still wins.
+ *
+ * One thing Figma draws that this screen does not: **mixed weight inside a
+ * row.** Figma bolds the actionable fragment ("Tap **Three dots** in the top
+ * right"); Core's row `title` is a plain `string`, so the sentence renders in
+ * one weight. Core request already open from Geolocation: a `ReactNode` title.
+ */
+export const PermissionsBrowserStepsScreen = forwardRef<
+  HTMLDivElement,
+  PermissionsBrowserStepsScreenProps
+>(
+  (
+    {
+      strings,
+      browser = 'safariIos',
+      screenId = `permissions-browser-steps-${browser}`,
+      showHeader = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const slice = strings.browserSteps.browsers[browser];
+    /* Family default, not a local re-declaration: the archetype already owns a
+       left variant, so the screen only picks which of ITS variants this family
+       uses. An explicit `overrides.align` from the host still wins. */
+    const alignedOverrides: PrizmaScreenOverrides = {
+      ...overrides,
+      align: overrides?.align ?? 'left',
+    };
+
+    return (
+      <PrizmaListScreen
+        ref={ref}
+        showHeader={showHeader}
+        title={strings.browserSteps.title}
+        subtitle={slice?.label}
+        ctaLabel={strings.browserSteps.ctaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={alignedOverrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <PrizmaCardListCommonIssues
+          items={(slice?.steps ?? []).map((step) => ({
+            icon: STEP_ICONS[step.kind],
+            title: step.label,
+            showSubtitle: false,
+          }))}
+        />
+      </PrizmaListScreen>
+    );
+  },
+);
+PermissionsBrowserStepsScreen.displayName = 'PermissionsBrowserStepsScreen';
+
+export default PermissionsBrowserStepsScreen;

package/src/PermissionsRequiredScreen.tsx

@@ -0,0 +1,118 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import {
+  IconApproval,
+  IconBankCardSearch,
+  IconCamera,
+  IconGeoPin,
+  IconMicrophone,
+} 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 { PermissionsCapability, PermissionsStrings } from './PermissionsStrings';
+import './ScreenLayout.css';
+
+/**
+ * The reason rows' leading glyphs, in the order the frame lists them: the
+ * capability itself · what it proves · that it is required. Canonical bank only
+ * (§10). The first row is keyed to the capability so a microphone prompt does
+ * not lead with a camera.
+ */
+const LEAD_ICON: Record<PermissionsCapability, ReactNode> = {
+  camera: <IconCamera size="m" />,
+  microphone: <IconMicrophone size="m" />,
+  location: <IconGeoPin size="m" />,
+};
+
+const TRAILING_ICONS = [
+  <IconBankCardSearch key="authenticity" size="m" />,
+  <IconApproval key="required" size="m" />,
+];
+
+export interface PermissionsRequiredScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'ctaLabel'
+    | 'linkLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Family copy — this screen reads the `required` slice. */
+  strings: PermissionsStrings;
+  /** Which capability is being asked for. Keys the first row's glyph. Default `camera`. */
+  capability?: PermissionsCapability;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Permissions — "Camera permission is required", built on the List archetype
+ * (GUIDELINES.md §6-G, `PrizmaListScreen`).
+ *
+ * Figma: `1-3-2-id` of the `Permissions` section (qGJjfL4O0JSjz1x4tOjJn8,
+ * 3:1193). This is the screen a user lands on after refusing the browser's own
+ * prompt: a warning mark, the headline, three rows saying what the capability
+ * is for, a tertiary "quit" link and the ask.
+ *
+ * `1-3-2-id-quit-process` is the SAME screen with an iOS confirm alert layered
+ * over it — an OS surface, not a second Prizma screen, so it is not built here
+ * (see `PermissionsStrings.ts`).
+ *
+ * `showHeader={false}` keeps the section's logo-free chrome — the flow has not
+ * started — with the nav row still reserved so nothing shifts on the next
+ * screen.
+ *
+ * Figma draws the status mark as a filled amber disc; Core renders the
+ * canonical OUTLINE warning mark (icon-outline sweep, DEVIATIONS #15). The
+ * generic file is one sweep behind, exactly as the module files were.
+ */
+export const PermissionsRequiredScreen = forwardRef<
+  HTMLDivElement,
+  PermissionsRequiredScreenProps
+>(
+  (
+    {
+      strings,
+      capability = 'camera',
+      screenId = 'permissions-required',
+      showHeader = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaListScreen
+      ref={ref}
+      showHeader={showHeader}
+      status="warning"
+      title={strings.required.title}
+      subtitle={strings.required.description}
+      ctaLabel={strings.required.ctaLabel}
+      linkLabel={strings.required.quitLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaCardListCommonIssues
+        items={strings.required.rows.map((row, i) => ({
+          icon: i === 0 ? LEAD_ICON[capability] : TRAILING_ICONS[(i - 1) % TRAILING_ICONS.length],
+          title: row.title,
+          subtitle: row.description,
+          showSubtitle: Boolean(row.description),
+        }))}
+      />
+    </PrizmaListScreen>
+  ),
+);
+PermissionsRequiredScreen.displayName = 'PermissionsRequiredScreen';
+
+export default PermissionsRequiredScreen;

package/src/PermissionsStrings.ts

@@ -0,0 +1,129 @@
+// Permission screens — copy contract for the GENERIC family.
+//
+// Figma: `Module Generic Screens` (qGJjfL4O0JSjz1x4tOjJn8), section
+// `Permissions` (3:1193), with the two full-flow frames `🍎 iOS` (3:7788) and
+// `🌐 Web` (3:620).
+//
+// These screens are not one module's. Every module that reaches for the camera
+// — ID Capture, Face Capture, Document Capture, Video Selfie — shows the SAME
+// three surfaces when the browser or the OS says no, which is why the file that
+// documents them is called "Generic Screens" and why they live here rather than
+// under a module prefix. `IdCapturePermissionScreen` predates this family and
+// is the ID Capture-flavoured copy of the same skeleton; it stays where it is so
+// nothing that imports it breaks (DEVIATIONS #IDC-26).
+//
+// The section's seven frames collapse onto THREE built screens:
+//
+//   1-3-2-id                          → PermissionsRequiredScreen  (reason rows)
+//   1-3-2-id-allow-camera             → PermissionsAllowScreen     (subtitle)
+//   1-4-2-id (+ 4 Android siblings)   → PermissionsBrowserStepsScreen
+//
+// The other four are OS chrome and are NOT built:
+//
+//   1-3-1-id-permission-modal   the browser's own "Allow camera access" sheet
+//   1-4-1-id                    the iOS "…Would Like to Access the Camera" alert
+//   1-3-2-id-quit-process       an iOS confirm alert layered over 1-3-2-id
+//   1-3-2-id-allow-camera-quit  the same alert layered over the allow screen
+//
+// None of them is a Prizma surface: their chrome does not exist in Core and
+// rebuilding it would mean inventing primitives and shipping platform rasters,
+// both forbidden (rule 1, GUIDELINES §10). Same call as Document Capture's iOS
+// action sheets (#DC-20) and Geolocation's system alert. Core Lab draws them as
+// dashed OS mocks on the flow instead, so the chain still reads.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here,
+// so a host's locale pack drives the family.
+
+/**
+ * The capability being asked for. The Figma section is drawn for the camera
+ * throughout, but the skeleton is identical for a microphone or a location
+ * prompt — so the screens never name the device themselves, the copy does, and
+ * this type exists only to key the reason-row glyphs.
+ */
+export type PermissionsCapability = 'camera' | 'microphone' | 'location';
+
+/** A single reason row — Core `PrizmaCardListCommonIssues` rows. */
+export interface PermissionsReasonRow {
+  title: string;
+  description?: string;
+}
+
+/**
+ * Which browser's "turn it back on" journey to show. `safariIos` is the base
+ * `1-4-2-id` frame; the other four are the `Android browsers` section of the
+ * Web flow (4:8159). Re-enabling a permission is a different journey in every
+ * browser, which is why one screen carries five step lists rather than five
+ * screens carrying one skeleton.
+ */
+export type PermissionsBrowser =
+  | 'safariIos'
+  | 'chromeAndroid'
+  | 'firefoxAndroid'
+  | 'samsungAndroid'
+  | 'operaAndroid';
+
+/**
+ * Step kind → canonical bank glyph, resolved in
+ * `PermissionsBrowserStepsScreen`. Figma leads every row with OS/browser chrome
+ * the Prizma bank does not ship — a ⋮ overflow, a gear tile, a permission
+ * toggle, and each browser's own logo on the last row. Shipping those would
+ * mean inventing primitives and bundling brand rasters, so each row takes the
+ * nearest canonical glyph. Same substitution table Geolocation already
+ * escalated (`GeolocationBrowserStepsScreen`); this family reuses it rather
+ * than inventing a second one.
+ */
+export type PermissionsStepKind =
+  | 'settings'
+  | 'browser'
+  | 'menu'
+  | 'permissions'
+  | 'camera'
+  | 'toggle'
+  | 'device'
+  | 'apps'
+  | 'return';
+
+export interface PermissionsStep {
+  kind: PermissionsStepKind;
+  label: string;
+}
+
+export interface PermissionsBrowserSteps {
+  /** Names the browser under the headline. Figma labels the section, not the
+   *  screen; the label keeps five otherwise near-identical cards apart. */
+  label: string;
+  steps: PermissionsStep[];
+}
+
+export interface PermissionsStrings {
+  /** Accessible name for the logo nav region (i18n — no baked-in English). */
+  navLabel?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+
+  /** `1-3-2-id` — the permission was refused and the flow explains why it needs it. */
+  required: {
+    title: string;
+    /** Optional line under the title. Figma's frame draws the rows alone. */
+    description?: string;
+    rows: PermissionsReasonRow[];
+    /** Tertiary link — "Quit process". */
+    quitLabel: string;
+    ctaLabel: string;
+  };
+
+  /** `1-3-2-id-allow-camera` — the first ask, before any refusal. */
+  allow: {
+    title: string;
+    subtitle?: string;
+    quitLabel: string;
+    ctaLabel: string;
+  };
+
+  /** `1-4-2-id` + the four `Android browsers` siblings. */
+  browserSteps: {
+    title: string;
+    ctaLabel: string;
+    browsers: Record<PermissionsBrowser, PermissionsBrowserSteps>;
+  };
+}

package/src/PhoneInputErrorScreen.tsx

@@ -0,0 +1,104 @@
+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 { PhoneInputErrorVariant, PhoneInputStrings } from './PhoneInputStrings';
+import './ScreenLayout.css';
+
+export interface PhoneInputErrorScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'glyph'
+    | 'ctaLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `error` slice its `variant` names. */
+  strings: PhoneInputStrings;
+  /** Which purple `phoneNumber.error.*` section to render. Default `tryAgain`. */
+  variant?: PhoneInputErrorVariant;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Phone Input — the error verdicts, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * ONE screen for the three purple `phoneNumber.error.*` sections:
+ * - `tryAgain`  — the code could not be sent, retry
+ * - `unknown`   — `phonenumber.error.unknown`, the generic failure
+ * - `noNetwork` — the connectivity family every module carries
+ *
+ * `noNetwork` KEEPS the logo header and the verified tag, exactly as the three
+ * Wave-2 `*NoConnectionScreen`s do. The module Figma draws this section bare —
+ * DEVIATIONS #9 recorded that observation in Wave 1 — but the owner rule of
+ * 2026-08-18 (#F-34) supersedes it: the chrome is constant across every screen
+ * so nothing shifts between states, and all four modules' connectivity screens
+ * must read identically. DEVIATIONS #PI-8.
+ *
+ * The Wi-Fi mark is Figma's `Icon / Wi-Fi`; Core's `PrizmaTitle` icon allowlist
+ * is `status | spinner | none`, so it rides the archetype's `glyph` slot with
+ * the foundation's `__glyph` class, drawn from the canonical icon bank
+ * (DEVIATIONS #10).
+ */
+export const PhoneInputErrorScreen = forwardRef<HTMLDivElement, PhoneInputErrorScreenProps>(
+  (
+    {
+      strings,
+      variant = 'tryAgain',
+      screenId = `phone-input-error-${variant}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const noConnection = variant === 'noNetwork';
+    const copy = noConnection
+      ? strings.error.noConnection
+      : variant === 'unknown'
+        ? strings.error.unknown
+        : strings.error.tryAgain;
+
+    return (
+      <PrizmaResultScreen
+        ref={ref}
+        /* The connectivity screen leads with the Wi-Fi glyph instead of a
+           status mark; the other two carry the canonical error mark. */
+        status={noConnection ? 'none' : 'error'}
+        glyph={
+          noConnection ? (
+            <span
+              className={[
+                'prizma-screen-layout__glyph',
+                'prizma-screen-layout__glyph--negative',
+                overrides?.align === 'left' ? 'prizma-screen-layout__glyph--left' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              <IconWifiOff size="l" />
+            </span>
+          ) : undefined
+        }
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      />
+    );
+  },
+);
+PhoneInputErrorScreen.displayName = 'PhoneInputErrorScreen';
+
+export default PhoneInputErrorScreen;