@incodetech/prizma-core-screens 0.1.0

package/dist/EmailInputStrings.d.ts

@@ -0,0 +1,130 @@
+/**
+ * The `email.verifyEmail.*` sections. All five draw the SAME layout — nav →
+ * Title (H2 + H5) → Spacing/32 → a single email field → CTA → tag — and differ
+ * only in field content and CTA state, which is what GUIDELINES §6-E means by
+ * "states are separate screens sharing the identical layout":
+ * - `default` — empty field showing the placeholder, CTA enabled
+ * - `typing`  — focused field with a partial address
+ * - `filled`  — focused field with a complete address
+ * - `error`   — negative field + clear ✕ + the invalid-format row
+ * - `loading` — field greyed while the code is requested, spinner in the CTA
+ */
+export type EmailInputVerifyState = 'default' | 'typing' | 'filled' | 'error' | 'loading';
+/**
+ * The `email.OTP.*` sections — same layout, different code-field state:
+ * - `typing`       — focused field, partial code, CTA enabled, and the line
+ *                    under the CTA is the RE-SEND COUNTDOWN, not the two links
+ * - `filled`       — resting field, complete code, the two-link line
+ * - `processing`   — code submitted: field greyed, spinner in the CTA, and the
+ *                    same sentence rendered INERT (no links)
+ * - `error`        — wrong code: negative field + "Invalid code…", CTA disabled
+ * - `errorGeneric` — the second purple error section, same treatment carrying
+ *                    the generic "Something went wrong" row instead
+ */
+export type EmailInputOtpState = 'typing' | 'filled' | 'processing' | 'error' | 'errorGeneric';
+export interface EmailInputStrings {
+    /** "verified by" attribution in the footer tag. */
+    verifiedLabel: string;
+    /** Accessible name for the logo nav row. */
+    navLabel?: string;
+    /** email.verifyEmail.* */
+    verify: {
+        /** H2 ("Verify your email"). */
+        title: string;
+        /** H5 ("We'll send you a code to ensure it's yours"). */
+        subtitle: string;
+        /** Field placeholder ("Email"). */
+        placeholder: string;
+        /**
+         * Accessible label for the email field.
+         *
+         * DEVIATIONS #EI-2 — Figma draws NO visible label row above the field: the
+         * placeholder ("Email") carries the whole meaning, measured on
+         * `email.verifyYourEmail.default` (28:13802) and unchanged across all five
+         * purple sections. A screen reader would therefore reach an unnamed input,
+         * so the copy rides `aria-label` instead of a drawn row — Core wins over
+         * Figma on the accessible name, and nothing new is painted. This is the
+         * #PI-4 precedent applied unchanged; Phone Input resolved the identical
+         * conflict the same way.
+         */
+        fieldLabel?: string;
+        /** Accessible name for the clear ✕ affordance. Core ships no English
+         *  default, so the row is only drawn when this is supplied. */
+        clearLabel?: string;
+        /** Error row on the `error` state ("Invalid email format"). */
+        errorText: string;
+        /** Primary CTA ("Continue"). */
+        ctaLabel: string;
+        /** Accessible busy label while the code is requested (`loading`). */
+        ctaLoadingLabel?: string;
+    };
+    /** email.OTP.* */
+    otp: {
+        /** H2 ("Enter the code we've sent to your email"). */
+        title: string;
+        /** H5 — carries the masked destination address, when a section shows one. */
+        subtitle?: string;
+        /** Accessible label for the code field (no visible label row in Figma). */
+        fieldLabel?: string;
+        /** Error row on `error` ("Invalid code. Please try again."). */
+        errorText: string;
+        /** Error row on `errorGeneric` ("Something went wrong"). */
+        genericErrorText: string;
+        /**
+         * The `typing` section draws a COUNTDOWN instead of the two links —
+         * "Resend code in 30s". Pre-formatted by the host, which owns the clock
+         * (a screen is one static spec state and runs no timer).
+         */
+        resendCountdown?: string;
+        /**
+         * The line under the CTA on `filled` / `processing` / both error sections
+         * is ONE sentence carrying TWO separate links:
+         * "Didn't receive the code? [Resend code] or [Change email]".
+         * Split into four strings because the links are independently actionable —
+         * the host must tell a re-send from a return to email entry — and because a
+         * locale needs to order the fragments itself. Omit `resendPrompt` to render
+         * no line at all. DEVIATIONS #PI-10.
+         */
+        resendPrompt?: string;
+        /** First link — re-sends the code. Emits `secondary`. */
+        resendLabel?: string;
+        /** The conjunction between the two links ("or"). */
+        resendSeparator?: string;
+        /** Second link — returns to email entry. Emits `tertiary`. */
+        changeEmailLabel?: string;
+        /** Primary CTA. */
+        ctaLabel: string;
+        /** Accessible / visible busy copy while the code is checked (`processing`). */
+        ctaLoadingLabel?: string;
+    };
+    /** email.OTP → `email.processing`: the post-submit spinner screen. */
+    processing: {
+        /** H2 shown under the spinner ("Processing…"). */
+        title: string;
+        subtitle?: string;
+    };
+    /** email.success */
+    success: {
+        /** H2 ("Email verified!"). */
+        title: string;
+        subtitle?: string;
+    };
+    /**
+     * email.error.somethingWentWrong.
+     *
+     * DEVIATIONS #EI-5 — this is the module's ONLY error verdict. The purple
+     * `email.error` section (3058:103116) holds exactly one screen, and the file
+     * draws no connectivity section anywhere. Phone Input's error screen carries
+     * a `variant` axis precisely because its Figma splits `somethingWentWrong`
+     * from a no-connection screen with a Wi-Fi glyph; this module has nothing to
+     * switch between, so `EmailInputErrorScreen` ships NO `variant` prop and no
+     * Wi-Fi glyph. Adding either would be inventing a state the spec does not
+     * have. If a connectivity section is added upstream, this row is where the
+     * axis gets reinstated.
+     */
+    error: {
+        title: string;
+        subtitle?: string;
+        ctaLabel: string;
+    };
+}

package/dist/EmailInputStrings.js

@@ -0,0 +1,19 @@
+// Email Input — copy contract.
+//
+// Figma: `📨 Email - Screens specs + Localization` (IovIhDAPjR7zxjC4NKZzfq,
+// page 5:13191). Four purple parent sections:
+//   email.verifyEmail — default / typing / filled / error / loading
+//   email.OTP         — typing / filled / processing / error(×2) + email.processing
+//   email.error       — somethingWentWrong
+//   email.success     — success
+//
+// Sibling of Phone Input (`PhoneInputStrings.ts`) and deliberately shaped the
+// same way: same archetypes, same state axes, same inline-link split. The two
+// real differences are that the entry field is a single email TextField (no
+// dial-code pairing, so no `Input / Combined` and no country list) and that the
+// module draws no Silent-Network-Auth and no connectivity section.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here,
+// so the host's locale pack drives the module (the Figma file ships ES + PT
+// columns alongside EN).
+export {};

package/dist/EmailInputSuccessScreen.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EmailInputStrings } from './EmailInputStrings';
+import './ScreenLayout.css';
+export interface EmailInputSuccessScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `success` slice. */
+    strings: EmailInputStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Email Input — the verified verdict, built on the Processing archetype
+ * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `email.success` section. A centred status mark over a bare
+ * H2 ("Email verified!") with **no CTA and no subtitle** — the module hands
+ * control straight back to the flow.
+ *
+ * DEVIATIONS #EI-4 — this screen sits on archetype C while its Phone Input
+ * sibling sits on F, and that split is deliberate, not an oversight. Measured
+ * on `email.success` (31:19307): mark + H2 and then nothing — the CTA band is
+ * empty all the way down to the browser chrome, where the error verdict
+ * (40:33375) does draw "Try again" in the same slot. `phoneNumber.success`
+ * draws a button; `email.success` does not. §6-F reserves the Result archetype
+ * for "every verdict screen that needs a button" and keeps C as the pure
+ * no-button case, so following the archetype rule across two modules whose
+ * Figma disagrees is what produces two different archetypes here. Putting this
+ * screen on F to match its sibling would draw a button the spec omits.
+ *
+ * The mark is Core's outline status icon via `PrizmaTitle`'s icon slot — the
+ * module Figma still draws the two-tone filled disc, one icon sweep behind
+ * (DEVIATIONS #15, unchanged here).
+ */
+export declare const EmailInputSuccessScreen: React.ForwardRefExoticComponent<EmailInputSuccessScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default EmailInputSuccessScreen;

package/dist/EmailInputSuccessScreen.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen, } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * Email Input — the verified verdict, built on the Processing archetype
+ * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `email.success` section. A centred status mark over a bare
+ * H2 ("Email verified!") with **no CTA and no subtitle** — the module hands
+ * control straight back to the flow.
+ *
+ * DEVIATIONS #EI-4 — this screen sits on archetype C while its Phone Input
+ * sibling sits on F, and that split is deliberate, not an oversight. Measured
+ * on `email.success` (31:19307): mark + H2 and then nothing — the CTA band is
+ * empty all the way down to the browser chrome, where the error verdict
+ * (40:33375) does draw "Try again" in the same slot. `phoneNumber.success`
+ * draws a button; `email.success` does not. §6-F reserves the Result archetype
+ * for "every verdict screen that needs a button" and keeps C as the pure
+ * no-button case, so following the archetype rule across two modules whose
+ * Figma disagrees is what produces two different archetypes here. Putting this
+ * screen on F to match its sibling would draw a button the spec omits.
+ *
+ * The mark is Core's outline status icon via `PrizmaTitle`'s icon slot — the
+ * module Figma still draws the two-tone filled disc, one icon sweep behind
+ * (DEVIATIONS #15, unchanged here).
+ */
+export const EmailInputSuccessScreen = forwardRef(({ strings, screenId = 'email-input-success', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, status: "success", title: strings.success.title, subtitle: strings.success.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+EmailInputSuccessScreen.displayName = 'EmailInputSuccessScreen';
+export default EmailInputSuccessScreen;

package/dist/EmailInputVerifyScreen.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EmailInputStrings, EmailInputVerifyState } from './EmailInputStrings';
+import './ScreenLayout.css';
+export interface EmailInputVerifyScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'> {
+    /** Module copy — this screen reads the `verify` slice. */
+    strings: EmailInputStrings;
+    /** Which purple `email.verifyEmail.*` section to render. Default `default`. */
+    state?: EmailInputVerifyState;
+    /** The address as typed. Empty renders the placeholder (`default`). */
+    value?: string;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Email Input — the address-entry screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all five purple `email.verifyEmail.*` sections
+ * (`default` / `typing` / `filled` / `error` / `loading`): measured against the
+ * 390 frames they share an identical layout — nav → Title (H2 + H5) →
+ * Spacing/32 → the email field → CTA → tag — and differ ONLY in field content
+ * and CTA state.
+ *
+ * Where this parts company with its Phone Input sibling: there is no dial-code
+ * pairing here, so no `Input / Combined` row and no module CSS at all — a bare
+ * `PrizmaTextField` is the whole field stack, and every offset stays the
+ * archetype's.
+ *
+ * Field treatments, one per Figma frame rather than one for all:
+ * - `default` — resting field, placeholder only
+ * - `typing` / `filled` — Figma draws BOTH with the focused blue border and a
+ *   caret, differing only in how much of the address is typed
+ * - `error` — Core's negative treatment plus the clear ✕ Figma draws on this
+ *   section alone
+ * - `loading` — the one section Figma greys, with the spinner in the CTA
+ *
+ * Core's `readOnly` is deliberately NOT used to make the field static: it
+ * paints the DISABLED surface (owner definition 2026-07-12), which would grey
+ * the four resting states Figma draws white. The field is uncontrolled instead
+ * (DEVIATIONS #PI-6).
+ */
+export declare const EmailInputVerifyScreen: React.ForwardRefExoticComponent<EmailInputVerifyScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default EmailInputVerifyScreen;

package/dist/EmailInputVerifyScreen.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+/**
+ * Email Input — the address-entry screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all five purple `email.verifyEmail.*` sections
+ * (`default` / `typing` / `filled` / `error` / `loading`): measured against the
+ * 390 frames they share an identical layout — nav → Title (H2 + H5) →
+ * Spacing/32 → the email field → CTA → tag — and differ ONLY in field content
+ * and CTA state.
+ *
+ * Where this parts company with its Phone Input sibling: there is no dial-code
+ * pairing here, so no `Input / Combined` row and no module CSS at all — a bare
+ * `PrizmaTextField` is the whole field stack, and every offset stays the
+ * archetype's.
+ *
+ * Field treatments, one per Figma frame rather than one for all:
+ * - `default` — resting field, placeholder only
+ * - `typing` / `filled` — Figma draws BOTH with the focused blue border and a
+ *   caret, differing only in how much of the address is typed
+ * - `error` — Core's negative treatment plus the clear ✕ Figma draws on this
+ *   section alone
+ * - `loading` — the one section Figma greys, with the spinner in the CTA
+ *
+ * Core's `readOnly` is deliberately NOT used to make the field static: it
+ * paints the DISABLED surface (owner definition 2026-07-12), which would grey
+ * the four resting states Figma draws white. The field is uncontrolled instead
+ * (DEVIATIONS #PI-6).
+ */
+export const EmailInputVerifyScreen = forwardRef(({ strings, state = 'default', value, screenId = `email-input-verify-${state}`, overrides, onAction, ...shell }, ref) => {
+    const busy = state === 'loading';
+    const invalid = state === 'error';
+    const focused = state === 'typing' || state === 'filled';
+    return (_jsx(PrizmaFormScreen, { ref: ref, title: strings.verify.title, subtitle: strings.verify.subtitle, ctaLabel: strings.verify.ctaLabel, 
+        /* Figma's `loading` section swaps the CTA label for Core's spinner. */
+        ctaLoading: busy, ctaLoadingLabel: strings.verify.ctaLoadingLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaTextField, { className: 
+            /* Core's OWN static-focus modifier — the class its CSS already
+               implements beside `:focus-within`. `PrizmaTextField` has no
+               `forceState` prop the way `PrizmaDropdown` does, so this is how a
+               static spec state draws the focus ring without redeclaring any
+               styling (DEVIATIONS #PI-7). */
+            focused ? 'prizma-input-textfield--focused' : undefined, type: "email", inputMode: "email", autoComplete: "email", "aria-label": strings.verify.fieldLabel, placeholder: strings.verify.placeholder, 
+            /* Uncontrolled: a screen is one static spec state, so no `onChange`
+               is needed and no warning is raised. */
+            defaultValue: value ?? '', disabled: busy, error: invalid, errorText: invalid ? strings.verify.errorText : undefined, 
+            /* The clear ✕ is drawn on the `error` section only. */
+            clearable: invalid, clearLabel: strings.verify.clearLabel }) }));
+});
+EmailInputVerifyScreen.displayName = 'EmailInputVerifyScreen';
+export default EmailInputVerifyScreen;

package/dist/ErrorScreensScreen.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { ErrorScreensStrings, ErrorScreensVariant } from './ErrorScreensStrings';
+import './ScreenLayout.css';
+export interface ErrorScreensScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'linkLabel' | 'disclaimer' | 'progress' | 'verifiedLabel' | 'navLabel'> {
+    /** Family copy — this screen reads the slice its `variant` names. */
+    strings: ErrorScreensStrings;
+    /** Which section to render. Default `sessionExpired`. */
+    variant?: ErrorScreensVariant;
+    /** `unsupportedBrowser` only — the real session URL to show above the CTA. */
+    sessionUrl?: string;
+    /** `unsupportedBrowser` only — draw the "link copied" Snackbar (the frame's
+     *  second state). Default `false`. */
+    copied?: boolean;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Error screens — the session-level failures, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * ONE screen for all three generic sections. They draw the identical skeleton —
+ * a centred mark + title + supporting line over a CTA band — and differ only in
+ * copy, in which mark leads, and in what the band carries:
+ *
+ * - `sessionExpired`     — canonical negative mark, NO CTA (a dead end)
+ * - `noConnection`       — Wi-Fi glyph, "Refresh"
+ * - `unsupportedBrowser` — canonical negative mark, the session URL above
+ *                          "Copy link", with "Continue anyways" under it
+ *
+ * Chrome is CONSTANT. All three frames are drawn without the logo header and
+ * without the verified tag; both are kept here, because the owner rule of
+ * 2026-08-18 (#F-30, #F-34) makes the chrome the same on every screen so
+ * nothing shifts between states, and every module's connectivity screen must
+ * read identically (#PI-8). Same call `GeolocationErrorScreen` already makes
+ * for its own `noNetwork`.
+ *
+ * Three things Figma draws that this screen does not, all reported rather than
+ * worked around:
+ * - **The browser-window mark.** `unsupportedBrowser` leads with a red browser
+ *   window carrying an ✕. The canonical bank has no such glyph, so the screen
+ *   uses Core's negative status mark — the nearest thing that means the same
+ *   (rule 1, GUIDELINES §10; the same substitution logic as #10 / #DC-23).
+ *   Mint the glyph or bless the substitution.
+ * - **Links inside the supporting line.** Figma renders "Safari" and "Chrome"
+ *   as blue in-sentence links; Core's `PrizmaTitle` subtitle is a plain
+ *   `string`, so the sentence renders in one colour. Same open Core request as
+ *   the step rows: a `ReactNode` subtitle.
+ * - **"Continue anyways" above the CTA.** Archetype F renders its tertiary link
+ *   BELOW the button stack, so this screen ships inverted against its frame.
+ *   The archetype owns the order (see `PermissionsAllowScreen` for the same
+ *   escalation).
+ *
+ * The "link copied" Snackbar rides the archetype's `progress` slot — the only
+ * block that renders BETWEEN the nav and the content, which is exactly where
+ * the frame draws it. `bandContent` would have put it above the buttons instead
+ * (the workaround #VS-17 rejected).
+ */
+export declare const ErrorScreensScreen: React.ForwardRefExoticComponent<ErrorScreensScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default ErrorScreensScreen;

package/dist/ErrorScreensScreen.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconWifiOff } from '@incodetech/prizma-core-icons';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * Error screens — the session-level failures, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * ONE screen for all three generic sections. They draw the identical skeleton —
+ * a centred mark + title + supporting line over a CTA band — and differ only in
+ * copy, in which mark leads, and in what the band carries:
+ *
+ * - `sessionExpired`     — canonical negative mark, NO CTA (a dead end)
+ * - `noConnection`       — Wi-Fi glyph, "Refresh"
+ * - `unsupportedBrowser` — canonical negative mark, the session URL above
+ *                          "Copy link", with "Continue anyways" under it
+ *
+ * Chrome is CONSTANT. All three frames are drawn without the logo header and
+ * without the verified tag; both are kept here, because the owner rule of
+ * 2026-08-18 (#F-30, #F-34) makes the chrome the same on every screen so
+ * nothing shifts between states, and every module's connectivity screen must
+ * read identically (#PI-8). Same call `GeolocationErrorScreen` already makes
+ * for its own `noNetwork`.
+ *
+ * Three things Figma draws that this screen does not, all reported rather than
+ * worked around:
+ * - **The browser-window mark.** `unsupportedBrowser` leads with a red browser
+ *   window carrying an ✕. The canonical bank has no such glyph, so the screen
+ *   uses Core's negative status mark — the nearest thing that means the same
+ *   (rule 1, GUIDELINES §10; the same substitution logic as #10 / #DC-23).
+ *   Mint the glyph or bless the substitution.
+ * - **Links inside the supporting line.** Figma renders "Safari" and "Chrome"
+ *   as blue in-sentence links; Core's `PrizmaTitle` subtitle is a plain
+ *   `string`, so the sentence renders in one colour. Same open Core request as
+ *   the step rows: a `ReactNode` subtitle.
+ * - **"Continue anyways" above the CTA.** Archetype F renders its tertiary link
+ *   BELOW the button stack, so this screen ships inverted against its frame.
+ *   The archetype owns the order (see `PermissionsAllowScreen` for the same
+ *   escalation).
+ *
+ * The "link copied" Snackbar rides the archetype's `progress` slot — the only
+ * block that renders BETWEEN the nav and the content, which is exactly where
+ * the frame draws it. `bandContent` would have put it above the buttons instead
+ * (the workaround #VS-17 rejected).
+ */
+export const ErrorScreensScreen = forwardRef(({ strings, variant = 'sessionExpired', sessionUrl, copied = false, screenId = `error-screens-${variant}`, overrides, onAction, ...shell }, ref) => {
+    const unsupported = variant === 'unsupportedBrowser';
+    const noConnection = variant === 'noConnection';
+    const copy = unsupported
+        ? strings.unsupportedBrowser
+        : noConnection
+            ? strings.noConnection
+            : strings.sessionExpired;
+    return (_jsx(PrizmaResultScreen, { ref: ref, 
+        /* The connectivity screen leads with the Wi-Fi glyph instead of a
+           status mark; the other two carry the canonical negative mark. */
+        status: noConnection ? 'none' : 'error', glyph: noConnection ? (_jsx("span", { className: [
+                'prizma-screen-layout__glyph',
+                'prizma-screen-layout__glyph--negative',
+                overrides?.align === 'left' ? 'prizma-screen-layout__glyph--left' : '',
+            ]
+                .filter(Boolean)
+                .join(' '), children: _jsx(IconWifiOff, { size: "l" }) })) : undefined, progress: unsupported && copied ? (_jsx(PrizmaSnackbar, { state: "success", contentResizing: "fill", children: strings.unsupportedBrowser.copiedLabel })) : undefined, title: copy.title, subtitle: copy.subtitle, disclaimer: unsupported
+            ? sessionUrl ?? strings.unsupportedBrowser.urlPlaceholder
+            : undefined, ctaLabel: copy.ctaLabel, linkLabel: unsupported ? strings.unsupportedBrowser.continueLabel : undefined, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+});
+ErrorScreensScreen.displayName = 'ErrorScreensScreen';
+export default ErrorScreensScreen;

package/dist/ErrorScreensStrings.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The three sections.
+ * - `sessionExpired`     — the link is dead; the user must go back to the provider
+ * - `noConnection`       — the network went away; retry when it returns
+ * - `unsupportedBrowser` — the SDK cannot run here; copy the link and move
+ */
+export type ErrorScreensVariant = 'sessionExpired' | 'noConnection' | 'unsupportedBrowser';
+export interface ErrorScreensCopy {
+    title: string;
+    subtitle?: string;
+    /** Primary CTA. Omit — as `sessionExpired` does — for a dead end. */
+    ctaLabel?: string;
+}
+export interface ErrorScreensStrings {
+    /** Accessible name for the logo nav region (i18n — no baked-in English). */
+    navLabel?: string;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    sessionExpired: ErrorScreensCopy;
+    noConnection: ErrorScreensCopy;
+    unsupportedBrowser: ErrorScreensCopy & {
+        /** The session URL shown above the CTA, for pasting into a supported
+         *  browser. A host passes the real one through `sessionUrl`; this is the
+         *  fallback the gallery draws. */
+        urlPlaceholder?: string;
+        /** Tertiary link — "Continue anyways". */
+        continueLabel: string;
+        /** Snackbar copy after the link is copied — the frame's second state. */
+        copiedLabel: string;
+    };
+}

package/dist/ErrorScreensStrings.js

@@ -0,0 +1,28 @@
+// Error screens — copy contract for the GENERIC family.
+//
+// Figma: `Module Generic Screens` (qGJjfL4O0JSjz1x4tOjJn8):
+//
+//   79:360   ErrorSessionReopen               → `sessionExpired`
+//   214:3357 Geolocation.error.noNetwork      → `noConnection`
+//   240:154  Error screen - Unsupported browser → `unsupportedBrowser`
+//
+// The three failures that belong to the SESSION rather than to any module: the
+// link has expired, the network went away, the browser cannot run the SDK.
+// Every module can hit all three, which is why they are drawn once in the
+// generic file — a user who sees three different "no internet" screens in one
+// journey reads them as three different products.
+//
+// `noConnection` is deliberately the same screen every module already ships
+// (`FaceCaptureNoConnectionScreen`, `IdCaptureNoConnectionScreen`,
+// `DocumentCaptureNoConnectionScreen`, `GeolocationErrorScreen`'s `noNetwork`).
+// The generic entry is where the shape is DOCUMENTED; the module copies stay
+// put until someone retires them deliberately, because deleting four exported
+// components to save one screen is a breaking change for every host that
+// imports them. Flagged for the owner.
+//
+// The family has no flow of its own: each of these is entered from wherever the
+// session broke and exits to a retry or to nothing. Core Lab lists it as a
+// library of states.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here.
+export {};

package/dist/FaceCaptureCapturingScreen.d.ts

@@ -0,0 +1,32 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaCaptureScreenProps } from './CaptureScreen';
+import type { FaceCaptureCapturingState, FaceCaptureStrings } from './FaceCaptureStrings';
+import './FaceCaptureLayout.css';
+export interface FaceCaptureCapturingScreenProps extends Omit<PrizmaCaptureScreenProps, 'state' | 'title' | 'feedbackText' | 'statusLabels' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `capturing` slice (+ shared labels). */
+    strings: FaceCaptureStrings;
+    /** Which purple `faceCapture.capturing.*` spec section to render. */
+    state?: FaceCaptureCapturingState;
+    /** Live camera feed (<video>) or sample still (<img>) for the ring window. */
+    camera?: ReactNode;
+}
+/**
+ * Face Capture — auto-capture stage (Archetype B, GUIDELINES.md §6-B).
+ * Figma: the 15 purple `faceCapture.capturing.*` sections — ring-state and
+ * instruction-copy variants of this ONE screen. Ring, silhouette, glow, and the
+ * instruction line all come from Core's PrizmaSelfieCapture via the
+ * CaptureScreen archetype — never re-implemented (§7).
+ *
+ * The instruction goes to the component's own `feedbackText` slot, NOT to the
+ * archetype's H2-below-the-ring slot: in Figma the line lives INSIDE the
+ * `Capture / Selfie` instance at Spacing/32 under the ring (measured y=407 vs
+ * ring bottom 375), which is exactly where the component puts it. Routing it
+ * through the archetype's `__below-capture` H2 instead would add the
+ * component's own 40px bottom padding on top of that 32px and change the type
+ * role — DEVIATIONS.md #12.
+ *
+ * The archetype adds no offsets of its own — the component owns that spacing
+ * (same deviation row).
+ */
+export declare const FaceCaptureCapturingScreen: React.ForwardRefExoticComponent<FaceCaptureCapturingScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FaceCaptureCapturingScreen;

package/dist/FaceCaptureCapturingScreen.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaCaptureScreen } from './CaptureScreen';
+import './FaceCaptureLayout.css';
+/**
+ * Purple `faceCapture.capturing.*` state → Core PrizmaSelfieCapture ring state.
+ * - `initiating` — grey ring, blank disc, camera not yet revealed (`enabled`).
+ * - `getReady`   — face detected, blue glow arc while the capture happens
+ *   (`ready`). NOTE: the module Figma cell still shows the silhouette during
+ *   this state; Core hides it per the owner's choreography (2026-07-14) —
+ *   DEVIATIONS.md #13. The design system wins.
+ * - every feedback state — camera + silhouette guide (`empty`) with the
+ *   instruction line below the ring.
+ */
+const SELFIE_STATE = {
+    initiating: 'enabled',
+    getReady: 'ready',
+    alignFace: 'empty',
+    lookAtCamera: 'empty',
+    tooDark: 'empty',
+    tooBright: 'empty',
+    eyesClosed: 'empty',
+    maskDetected: 'empty',
+    glassesDetected: 'empty',
+    hatDetected: 'empty',
+    moveRight: 'empty',
+    moveLeft: 'empty',
+    moveCloser: 'empty',
+    moveAway: 'empty',
+    faceOcclusion: 'empty',
+};
+/**
+ * Face Capture — auto-capture stage (Archetype B, GUIDELINES.md §6-B).
+ * Figma: the 15 purple `faceCapture.capturing.*` sections — ring-state and
+ * instruction-copy variants of this ONE screen. Ring, silhouette, glow, and the
+ * instruction line all come from Core's PrizmaSelfieCapture via the
+ * CaptureScreen archetype — never re-implemented (§7).
+ *
+ * The instruction goes to the component's own `feedbackText` slot, NOT to the
+ * archetype's H2-below-the-ring slot: in Figma the line lives INSIDE the
+ * `Capture / Selfie` instance at Spacing/32 under the ring (measured y=407 vs
+ * ring bottom 375), which is exactly where the component puts it. Routing it
+ * through the archetype's `__below-capture` H2 instead would add the
+ * component's own 40px bottom padding on top of that 32px and change the type
+ * role — DEVIATIONS.md #12.
+ *
+ * The archetype adds no offsets of its own — the component owns that spacing
+ * (same deviation row).
+ */
+export const FaceCaptureCapturingScreen = forwardRef(({ strings, state = 'initiating', camera, screenId = 'face-capture-capturing', className, ...rest }, ref) => (_jsx(PrizmaCaptureScreen, { ref: ref, className: className, state: SELFIE_STATE[state], camera: camera, feedbackText: strings.capturing[state], verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, ...rest })));
+FaceCaptureCapturingScreen.displayName = 'FaceCaptureCapturingScreen';
+export default FaceCaptureCapturingScreen;

package/dist/FaceCaptureLayout.css

@@ -0,0 +1,18 @@
+/* Face 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.
+ *
+ * The pilot's other three additions were promoted INTO the foundation
+ * (`ScreenLayout.css`) once they proved to be recurring patterns rather than
+ * module quirks: the CTA band recipe (`__band`, DEVIATIONS #8), the no-nav
+ * content offset for generic errors (`__content--no-nav`, #9), and the capture
+ * stage offset fix (`__content--capture` now adds nothing, #12). Wave agents
+ * inherit all three as correct defaults.
+ */
+
+/* Nothing module-specific is left: the non-status glyph slot this file used to
+ * own (`.face-capture-glyph`) was the third byte-identical copy of one pattern,
+ * so it moved to `ScreenLayout.css` as `__glyph` — DEVIATIONS #DC-29, closed.
+ * The file is kept as the module's landing place for future additions. */