@incodetech/prizma-core-screens 0.2.7 → 0.2.14

package/dist/BiometricConsentScreen.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { BiometricConsentState, BiometricConsentStrings } from './BiometricConsentStrings';
+import './ScreenLayout.css';
+export interface BiometricConsentScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'ctaDisabled' | 'verifiedLabel' | 'children' | 'navLabel' | 'linkLabel' | 'linkDisabled' | 'linkContent' | 'overlay' | 'fieldsOffset' | 'fieldsGap' | 'fieldsAlign' | 'scrollFields'> {
+    /** Module copy — this screen reads the `consent` and `quit` slices. */
+    strings: BiometricConsentStrings;
+    /** Which of the two section states to render. Default `default`. */
+    state?: BiometricConsentState;
+    /**
+     * Cancel was pressed: present the quit confirmation over the consent. The
+     * consent underneath keeps its `state` — the box is whatever the person had.
+     * Its two answers: the confirm emits `cta` (the session ends), the dismiss
+     * emits `secondary` (back to the consent). DEVIATIONS #BC-7.
+     */
+    quitConfirm?: boolean;
+    /**
+     * The box was ticked or unticked. A REAL change event from Core's own
+     * `<input type="checkbox">` — the card is a `<label>`, so tapping the copy
+     * toggles it too, which is the behaviour the request named ("tapping the body
+     * also toggles the checkbox"). The screen stays controlled by `state`; this
+     * only reports the press so a host (or the Core Lab prototype) can move the
+     * state itself. The sibling consent screen forwards no such handler and its
+     * prototype had to listen on a wrapper instead — this closes that gap for this
+     * module.
+     */
+    onConsentChange?: (checked: boolean) => void;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Biometric Consent — the mandatory biometric-processing consent, built on the
+ * Form archetype (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for the whole `biometricConsent` section (2001:16315): the two
+ * state frames (`empty` 2001:16361, `checked` 2001:16372) share an identical
+ * skeleton — nav → Title (H2 + H5) → one consent card → Continue → Cancel →
+ * tag — and differ ONLY in whether the box is ticked and the CTA released.
+ * Plus the quit confirmation (`quitConfirm`), a Core sheet or dialog presented
+ * over either state when Cancel is pressed.
+ *
+ * WHY ARCHETYPE E. The same reason the sibling consent screen gives: a
+ * `PrizmaCheckbox` is a real `<input type="checkbox">` that joins the form, and
+ * the gated CTA is the whole point of a consent screen — `PrizmaListScreen` has
+ * no `ctaDisabled` slot. E also carries the one tertiary action under the
+ * primary (`linkLabel`), which is exactly where the frame draws Cancel.
+ *
+ * THE CARD SITS AT THE BOTTOM OF THE COLUMN, NOT UNDER THE TITLE. The frame's
+ * middle (2001:15150) is a `justify-between` column: the Title block at the top,
+ * the consent card flush against the CTA band with the frame's Spacing/16
+ * between them, and everything in between left empty. That is the opposite of
+ * every other Form consumer, whose stack hangs off the title, so the screen
+ * SELECTS it through the archetype's `fieldsAlign="end"` slot rather than
+ * declaring a layout of its own — the value lives once, in `FormScreen.css`.
+ * DEVIATIONS #BC-1.
+ *
+ * Five things are deliberate:
+ *
+ * 1. The consent card is Core's `PrizmaCheckbox size="L"` — the component IS
+ *    the tinted container Figma draws (padding, radius, `Surface/Brand/50`,
+ *    the 28×28 box, the Size-S body). Its `segments` carry the inline
+ *    "Incode's Privacy Policy" link, which opens the document without toggling
+ *    the box. Nothing about the card is composed here.
+ * 2. The box is CONTROLLED by `state`, like every other spec state in this
+ *    package, and the real change event is forwarded through `onConsentChange`
+ *    so a host can drive it. `disabled` is NOT used — the frame draws the card
+ *    on the live surface in both states (#PI-6: never borrow a semantic state
+ *    to make something inert).
+ * 3. The CTA is gated by `ctaDisabled`, Core's own
+ *    `button/primary/surface|text/disabled` treatment, until the box is ticked
+ *    — the behaviour the requesting engineer asked for and the two sibling
+ *    consents already ship. The frame paints Continue blue in both states;
+ *    recorded, not resolved silently (DEVIATIONS #BC-2).
+ * 4. Cancel is the archetype's `tertiary-link` button and emits `secondary`.
+ *    The frame draws it as the Button group's "Tertiary CTA" slot in body-800
+ *    ink with no underline on the ES/PT copies and in brand blue on the EN one
+ *    — Core ships one L tertiary (underlined, `button/tertiary/text/default`)
+ *    and the component wins (DEVIATIONS #BC-4).
+ * 5. The quit confirmation rides archetype E's `overlay` slot: the screen owns
+ *    the scrim and the placement (the foundation's `__sheet-scrim` /
+ *    `__modal-panel` recipes), Core owns the card — `PrizmaModalContent`,
+ *    the `default` variant exactly as the design system documents it: close
+ *    icon, title, optional subtitle, and its own `vertical-v1` Button Group
+ *    (Quit over Cancel). Placed the way Core's presenter places a modal —
+ *    pinned to the bottom of the frame with a Spacing/12 margin, never
+ *    centred — on EVERY platform. The owner ruled out a bottom sheet on the
+ *    phone, then a centred card (Camila, 2026-10-13): "use the default modal
+ *    … so we try with an existing component". The close icon dismisses, the
+ *    same as Cancel. Nothing is drawn behind it that the consent did not
+ *    already draw. DEVIATIONS #BC-7, #BC-8.
+ */
+export declare const BiometricConsentScreen: React.ForwardRefExoticComponent<BiometricConsentScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default BiometricConsentScreen;

package/dist/BiometricConsentScreen.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaCheckbox } from '@incodetech/prizma-core-web/checkbox';
+import { PrizmaModalContent } from '@incodetech/prizma-core-web/modal';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+/**
+ * Biometric Consent — the mandatory biometric-processing consent, built on the
+ * Form archetype (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for the whole `biometricConsent` section (2001:16315): the two
+ * state frames (`empty` 2001:16361, `checked` 2001:16372) share an identical
+ * skeleton — nav → Title (H2 + H5) → one consent card → Continue → Cancel →
+ * tag — and differ ONLY in whether the box is ticked and the CTA released.
+ * Plus the quit confirmation (`quitConfirm`), a Core sheet or dialog presented
+ * over either state when Cancel is pressed.
+ *
+ * WHY ARCHETYPE E. The same reason the sibling consent screen gives: a
+ * `PrizmaCheckbox` is a real `<input type="checkbox">` that joins the form, and
+ * the gated CTA is the whole point of a consent screen — `PrizmaListScreen` has
+ * no `ctaDisabled` slot. E also carries the one tertiary action under the
+ * primary (`linkLabel`), which is exactly where the frame draws Cancel.
+ *
+ * THE CARD SITS AT THE BOTTOM OF THE COLUMN, NOT UNDER THE TITLE. The frame's
+ * middle (2001:15150) is a `justify-between` column: the Title block at the top,
+ * the consent card flush against the CTA band with the frame's Spacing/16
+ * between them, and everything in between left empty. That is the opposite of
+ * every other Form consumer, whose stack hangs off the title, so the screen
+ * SELECTS it through the archetype's `fieldsAlign="end"` slot rather than
+ * declaring a layout of its own — the value lives once, in `FormScreen.css`.
+ * DEVIATIONS #BC-1.
+ *
+ * Five things are deliberate:
+ *
+ * 1. The consent card is Core's `PrizmaCheckbox size="L"` — the component IS
+ *    the tinted container Figma draws (padding, radius, `Surface/Brand/50`,
+ *    the 28×28 box, the Size-S body). Its `segments` carry the inline
+ *    "Incode's Privacy Policy" link, which opens the document without toggling
+ *    the box. Nothing about the card is composed here.
+ * 2. The box is CONTROLLED by `state`, like every other spec state in this
+ *    package, and the real change event is forwarded through `onConsentChange`
+ *    so a host can drive it. `disabled` is NOT used — the frame draws the card
+ *    on the live surface in both states (#PI-6: never borrow a semantic state
+ *    to make something inert).
+ * 3. The CTA is gated by `ctaDisabled`, Core's own
+ *    `button/primary/surface|text/disabled` treatment, until the box is ticked
+ *    — the behaviour the requesting engineer asked for and the two sibling
+ *    consents already ship. The frame paints Continue blue in both states;
+ *    recorded, not resolved silently (DEVIATIONS #BC-2).
+ * 4. Cancel is the archetype's `tertiary-link` button and emits `secondary`.
+ *    The frame draws it as the Button group's "Tertiary CTA" slot in body-800
+ *    ink with no underline on the ES/PT copies and in brand blue on the EN one
+ *    — Core ships one L tertiary (underlined, `button/tertiary/text/default`)
+ *    and the component wins (DEVIATIONS #BC-4).
+ * 5. The quit confirmation rides archetype E's `overlay` slot: the screen owns
+ *    the scrim and the placement (the foundation's `__sheet-scrim` /
+ *    `__modal-panel` recipes), Core owns the card — `PrizmaModalContent`,
+ *    the `default` variant exactly as the design system documents it: close
+ *    icon, title, optional subtitle, and its own `vertical-v1` Button Group
+ *    (Quit over Cancel). Placed the way Core's presenter places a modal —
+ *    pinned to the bottom of the frame with a Spacing/12 margin, never
+ *    centred — on EVERY platform. The owner ruled out a bottom sheet on the
+ *    phone, then a centred card (Camila, 2026-10-13): "use the default modal
+ *    … so we try with an existing component". The close icon dismisses, the
+ *    same as Cancel. Nothing is drawn behind it that the consent did not
+ *    already draw. DEVIATIONS #BC-7, #BC-8.
+ */
+export const BiometricConsentScreen = forwardRef(({ strings, state = 'default', quitConfirm = false, onConsentChange, screenId = quitConfirm ? 'biometric-consent-quit' : `biometric-consent-${state}`, overrides, onAction, ...shell }, ref) => {
+    const accepted = state === 'accepted';
+    const quit = quitConfirm ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "prizma-screen-layout__sheet-scrim", "aria-hidden": "true" }), _jsx("div", { className: "prizma-screen-layout__modal-panel", children: _jsx(PrizmaModalContent, { variant: "default", title: strings.quit.title, subtitle: strings.quit.subtitle, closeLabel: strings.quit.closeLabel, onClose: () => onAction?.({ type: 'secondary', screenId }), buttonGroupProps: {
+                        primaryLabel: strings.quit.confirmLabel,
+                        secondaryLabel: strings.quit.dismissLabel,
+                        onPrimaryClick: () => onAction?.({ type: 'cta', screenId }),
+                        onSecondaryClick: () => onAction?.({ type: 'secondary', screenId }),
+                    } }) })] })) : undefined;
+    return (_jsx(PrizmaFormScreen, { ref: ref, title: strings.consent.title, subtitle: strings.consent.subtitle, 
+        /* The card hangs off the CTA band, not the title — the frame's
+           justify-between middle. Selected from the archetype, not declared. */
+        fieldsAlign: "end", ctaLabel: strings.consent.ctaLabel, 
+        /* "Continue" stays inert until the box is ticked. */
+        ctaDisabled: !accepted, linkLabel: strings.consent.cancelLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, 
+        /* With the sheet up, the consent's own buttons are under the scrim and
+           must not report: the sheet's two answers are the only actions. */
+        onAction: quitConfirm ? undefined : onAction, overlay: quit, ...shell, children: _jsx(PrizmaCheckbox, { size: "L", checked: accepted, 
+            /* Mandatory for a11y (`aria-required`); the L container never paints
+               a `*` and the frame draws none. */
+            required: true, "aria-label": strings.consent.ariaLabel, segments: strings.consent.body, onCheckedChange: quitConfirm ? undefined : onConsentChange }) }));
+});
+BiometricConsentScreen.displayName = 'BiometricConsentScreen';
+export default BiometricConsentScreen;

package/dist/BiometricConsentStrings.d.ts

@@ -0,0 +1,84 @@
+import type { PrizmaConsentSegment } from '@incodetech/prizma-core-web/checkbox';
+/**
+ * The two states the section draws. Both share ONE layout — nav → Title →
+ * (space) → consent card → Continue → Cancel → tag — and differ only in whether
+ * the box is ticked and, with it, whether Continue is released:
+ *
+ * - `default`  — `biometricConsent.empty` (2001:16361): the box unticked.
+ *                Continue is DISABLED. The frame paints it brand blue; the
+ *                requesting engineer asked for it greyed until the box is
+ *                ticked, "like in Data Sharing Consent" (Uros, #uxp-design
+ *                2026-09-02), which is also what the two sibling consent
+ *                screens do. DEVIATIONS #BC-2 — flip `ctaDisabled` in the
+ *                screen if the frame is the final word.
+ * - `accepted` — `biometricConsent.checked` (2001:16372): the box ticked,
+ *                Continue released to brand blue.
+ *
+ * There is NO refusal state. With Continue gated, "pressed with nothing ticked"
+ * cannot happen, and the file draws no such frame — the sibling modules' added
+ * `rejected` state is deliberately not copied here (DEVIATIONS #BC-3).
+ *
+ * The quit confirmation is NOT a third state: it is a dialog presented over
+ * either state (`quitConfirm` on the screen), because what is underneath — the
+ * box empty or ticked — is whatever the person had before they pressed Cancel.
+ */
+export type BiometricConsentState = 'default' | 'accepted';
+export interface BiometricConsentStrings {
+    /** "verified by" attribution in the footer tag. */
+    verifiedLabel: string;
+    /** Accessible name for the logo nav row. */
+    navLabel?: string;
+    /** The `biometricConsent` section. */
+    consent: {
+        /** H2 ("Request for Biometric Processing"). Centered, per the section. */
+        title: string;
+        /** H5 under the title ("Your verification is powered by Incode…"). The
+         *  section draws one on every frame. */
+        subtitle: string;
+        /**
+         * The consent card's copy, as ordered segments: a plain string renders as
+         * body copy, an object renders as an inline `<a>` that opens the document
+         * WITHOUT toggling the box. Core's own `PrizmaConsentSegment` contract — the
+         * multi-link path on `PrizmaCheckbox size="L"` — so a consent citing two
+         * documents stays expressible (#PI-10: each link is separately actionable).
+         * In production this body arrives from the backend.
+         */
+        body: PrizmaConsentSegment[];
+        /** Accessible name for the box — the card copy is a paragraph, too long to
+         *  serve as one. */
+        ariaLabel?: string;
+        /** Primary CTA ("Continue"). Disabled until the box is ticked. */
+        ctaLabel: string;
+        /** The tertiary action under Continue ("Cancel"). Declining is a hard stop:
+         *  the session cannot process the person's biometrics without this consent. */
+        cancelLabel: string;
+    };
+    /**
+     * The confirmation presented when Cancel is pressed, before the session ends.
+     *
+     * NOT IN THE FIGMA FILE, and not in the shipped Web SDK either — today
+     * `manager.cancel()` ends the session the moment Cancel is tapped. Added at
+     * the owner's request (Camila, 2026-10-13): Cancel is irreversible here, the
+     * person cannot be verified without the consent, and a mis-tap on the
+     * tertiary under Continue should not cost them the session. It is Core's
+     * Modal, `default` variant, on EVERY platform — the existing component as
+     * the design system documents it, close icon and all, pinned to the bottom
+     * of the frame the way Core's presenter places it; not a bottom sheet and
+     * not a centred card (owner calls, same day). The copy is the
+     * SDK's own close dialog (`page.close.confirmQuit` / `page.close.confirm` /
+     * `page.close.cancel`), so nothing is invented. DEVIATIONS #BC-7.
+     */
+    quit: {
+        /** Dialog title ("Are you sure you want to quit?"). */
+        title: string;
+        /** Optional supporting line. The SDK's close dialog carries none. */
+        subtitle?: string;
+        /** The destructive confirmation ("Quit") — primary, on top. */
+        confirmLabel: string;
+        /** Dismiss and stay on the consent ("Cancel") — secondary, below it. */
+        dismissLabel: string;
+        /** Accessible name of the card's close icon ("Close"), which also
+         *  dismisses. Core's Default modal always draws the icon. */
+        closeLabel: string;
+    };
+}

package/dist/BiometricConsentStrings.js

@@ -0,0 +1,31 @@
+// Biometric Consent — copy contract.
+//
+// The mandatory biometric consent the BACKEND decides to show — at the start of
+// a flow, or right after ID capture — when the session comes from a protected
+// geography (Illinois BIPA and the handful of states like it), or when the state
+// on the captured ID says so. It is NOT the User Consent / Data Sharing Consent
+// module: it is the flow builder's "Required biometric consent" setting, it uses
+// its own endpoint, and declining it is a hard stop. Uros Milivojevic
+// (#uxp-design, 2026-09-01): "Compared to User Consent it has a Cancel button
+// next to Continue, a subtitle, and a long consent body loaded from the BE with
+// tappable links (tapping the body also toggles the checkbox)."
+//
+// Figma: `Biometric Consent Screen` (vXvIMQF5DSJgkQHhFAQcWC), section
+// `biometricConsent` (2001:16315). ONE screen, drawn across:
+//   · 2001:16361 `biometricConsent.empty`    the master — box unticked
+//   · 2001:16372 `biometricConsent.checked`  the box ticked
+//   · `🔧 Behavior`, `🖤 Dark mode`, `🇪🇸 ES`, `🇵🇹 PT` and the six device
+//     sections are the same two states re-presented: dark is token-driven
+//     (`[data-prizma-theme='dark']`), the locales are the host's locale pack,
+//     and the widths are excluded by the no-per-width-variants rule (DEVIATIONS
+//     #17).
+//
+// The screen is: nav → Title (H2 + H5 subtitle) → one consent card pinned to
+// the BOTTOM of the column → Continue → Cancel → tag. No disclosure paragraph —
+// unlike the consent screen the two sibling modules share, the legal body here
+// lives INSIDE the card, and the backend supplies it.
+//
+// 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 beside the EN one).
+export {};

package/dist/CaptureScreen.d.ts

@@ -27,6 +27,19 @@ export interface PrizmaCaptureScreenProps extends Omit<PrizmaScreenShellProps, '
     manualFeedbackText?: string;
     /** Per-state status copy (uploading / success / error / warning). */
     statusLabels?: Partial<Record<PrizmaSelfieCaptureState, string>>;
+    /**
+     * A notice band above the footer — a Snackbar the module raises over the live
+     * feed without taking the camera away (Face Capture's "Need more time?" offer
+     * is the first consumer).
+     *
+     * ANCHORED, like the footer and the control strip, and for the same reason:
+     * the owner's rule is that anchored chrome sits at the same position on every
+     * screen (2026-08-18). Flowing it would push Core's ring up, and the ring
+     * offset is the one thing this archetype is forbidden to touch
+     * (DEVIATIONS #12). It rides the empty band under the instruction line, which
+     * is where the module Figma puts it.
+     */
+    notice?: ReactNode;
     /** "verified by" attribution copy for the footer tag. */
     verifiedLabel: string;
     navLabel?: string;

package/dist/CaptureScreen.js

@@ -19,12 +19,12 @@ import './ScreenLayout.css';
  * loading and result screens of a capture module use this archetype too —
  * not the centered Processing archetype (DEVIATIONS #11).
  */
-export const PrizmaCaptureScreen = forwardRef(({ showHeader, showFooter = true, cameraOpen = true, state, camera, feedbackText, isManual, manualFeedbackText, statusLabels, verifiedLabel, navLabel, screenId, overrides, onAction, ...shell }, ref) => (
+export const PrizmaCaptureScreen = forwardRef(({ showHeader, showFooter = true, cameraOpen = true, state, camera, feedbackText, isManual, manualFeedbackText, statusLabels, notice, verifiedLabel, navLabel, screenId, overrides, onAction, ...shell }, ref) => (
 // Pin light ONLY while the camera feed is open: Core paints the live
 // capture area with Static inks because "the capture screen stays WHITE in
 // both modes — light is needed for the shot" (SelfieCapture.css, owner
 // 2026-07-14). Feed-closed screens are ordinary screens and follow the app.
 // DEVIATIONS #F-27.
-_jsxs(PrizmaScreenShell, { ref: ref, theme: cameraOpen ? 'light' : undefined, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !(showHeader ?? (cameraOpen ? Boolean(overrides?.logo) : true)), logo: overrides?.logo, navLabel: navLabel }), _jsxs("div", { className: "prizma-screen-layout__content prizma-screen-layout__content--capture", children: [_jsx(PrizmaSelfieCapture, { state: state, camera: camera, showFeedback: Boolean(feedbackText ?? manualFeedbackText), feedbackText: feedbackText, isManual: isManual, manualFeedbackText: manualFeedbackText, statusLabels: statusLabels }), showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer prizma-screen-layout__footer--pinned", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] })));
+_jsxs(PrizmaScreenShell, { ref: ref, theme: cameraOpen ? 'light' : undefined, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !(showHeader ?? (cameraOpen ? Boolean(overrides?.logo) : true)), logo: overrides?.logo, navLabel: navLabel }), _jsxs("div", { className: "prizma-screen-layout__content prizma-screen-layout__content--capture", children: [_jsx(PrizmaSelfieCapture, { state: state, camera: camera, showFeedback: Boolean(feedbackText ?? manualFeedbackText), feedbackText: feedbackText, isManual: isManual, manualFeedbackText: manualFeedbackText, statusLabels: statusLabels }), notice ? (_jsx("div", { className: "prizma-screen-layout__capture-notice", children: notice })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer prizma-screen-layout__footer--pinned", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] })));
 PrizmaCaptureScreen.displayName = 'PrizmaCaptureScreen';
 export default PrizmaCaptureScreen;

package/dist/DemoScreensLayout.css

@@ -389,6 +389,22 @@
   background: var(--prizma-surface-neutral-50);
   align-items: center;
   justify-content: center;
+  /* The card hugs its content and is taller than a short window: on the Duo
+   * open full screen (626) unsafe centring put 90px of it above the page and
+   * 90 below, heading cut off (sweep 2026-10-20). `safe` starts the card at
+   * the top of the page when it does not fit, and does nothing when it does
+   * (#F-37, same mechanism). The plain `center` is the fallback. */
+  justify-content: safe center;
+}
+
+/* …and under 720 the page scrolls, as a desktop page does when the window is
+ * shorter than its content. The shell is `overflow: hidden` for the screens
+ * that pin chrome to its edges; this page pins nothing, the tag rides in the
+ * card's band. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-screen-shell.demo-screens-redirect {
+    overflow-y: auto;
+  }
 }
 
 .demo-screens-redirect__card {

package/dist/DemoScreensRedirectScreen.d.ts

@@ -13,8 +13,13 @@ import './DemoScreensLayout.css';
  *  - `resend`    "Link sent!", resend available
  *  - `resent`    "Link sent!" with the "resent" snackbar
  *  - `tooMany`   "Too many attempts"
+ *  - `invalidUuid` the link's UUID was rejected (expired or unknown): no leg
+ *                to offer, only the error. One message for Flows and
+ *                Workflows alike, since the backend answers the same way for
+ *                both (Elena, 2026-10-21: web SDK 2.0 showed "QR code
+ *                expired" for Flows and "Session expired" with 2.0 off).
  */
-export type DemoScreensRedirectStage = 'qr' | 'sms' | 'smsFilled' | 'sent' | 'resend' | 'resent' | 'tooMany';
+export type DemoScreensRedirectStage = 'qr' | 'sms' | 'smsFilled' | 'sent' | 'resend' | 'resent' | 'tooMany' | 'invalidUuid';
 export interface DemoScreensRedirectScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
     /** Family copy — this screen reads the `redirect` slice. */
     strings: DemoScreensStrings;

package/dist/DemoScreensRedirectScreen.js

@@ -31,8 +31,9 @@ export const DemoScreensRedirectScreen = forwardRef(({ strings, stage = 'qr', sm
         { code: 'RS', name: 'Serbia', dialCode: '+381', flag: '' },
     ].find(c => c.code === r.countryCode);
     const subtitle = sms ? r.subtitle : desktop ? r.subtitleQrDesktop : r.subtitleQrOnly;
-    const verdict = stage === 'sent' || stage === 'resend' || stage === 'resent' || stage === 'tooMany';
-    return (_jsxs(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, className: ['demo-screens-redirect', className ?? ''].filter(Boolean).join(' '), ...shell, children: [stage === 'resent' ? (_jsx("div", { className: "demo-screens-toast demo-screens-toast--desktop", children: _jsx(PrizmaSnackbar, { state: "success", children: r.sent.resentSnackbar }) })) : null, _jsxs("div", { className: "demo-screens-redirect__card", children: [_jsx(PrizmaScreenNav, { logo: overrides?.logo, navLabel: strings.navLabel }), _jsxs("div", { className: "prizma-screen-layout__content demo-screens-redirect__content", children: [_jsx(PrizmaTitle, { variant: "centered", title: r.title, showSubtitle: true, subtitle: subtitle }), sms ? (_jsxs("div", { className: "demo-screens-tabs", role: "tablist", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": !onSms, className: ['demo-screens-tabs__tab', !onSms ? 'demo-screens-tabs__tab--active' : ''].join(' '), onClick: () => onAction?.({ type: 'secondary', screenId }), children: r.tabs.qr }), _jsx("button", { type: "button", role: "tab", "aria-selected": onSms, className: ['demo-screens-tabs__tab', onSms ? 'demo-screens-tabs__tab--active' : ''].join(' '), onClick: () => onAction?.({ type: 'tertiary', screenId }), children: r.tabs.sms })] })) : null, stage === 'qr' ? (_jsxs("div", { className: "demo-screens-redirect__leg", children: [sms ? _jsx("p", { className: "demo-screens-redirect__hint", children: r.qrHint }) : null, _jsx("div", { className: "demo-screens-redirect__qr", "aria-label": r.tabs.qr, children: qr })] })) : null, stage === 'sms' || stage === 'smsFilled' ? (_jsxs("div", { className: "demo-screens-redirect__leg demo-screens-redirect__leg--form", children: [_jsx("p", { className: "demo-screens-redirect__hint", children: r.smsHint }), _jsx(PrizmaCombined, { "aria-label": r.phoneLabel, placeholder: r.phonePlaceholder, defaultValue: stage === 'smsFilled' ? r.phoneValue : '', defaultCountry: country, showRequiredMarker: false }, stage), _jsx(PrizmaButton, { variant: "primary", size: "L", disabled: stage !== 'smsFilled', onClick: () => onAction?.({ type: 'cta', screenId }), children: r.sendLabel })] })) : null, verdict ? (_jsxs("div", { className: "demo-screens-redirect__leg demo-screens-redirect__leg--verdict", children: [stage === 'tooMany' ? (_jsx(PrizmaTitle, { variant: "centered", title: r.tooMany.title, showSubtitle: true, subtitle: r.tooMany.subtitle, icon: { type: 'status', status: 'error' } })) : (_jsx(PrizmaTitle, { variant: "centered", title: r.sent.title, showSubtitle: true, subtitle: `${r.sent.toPrefix} ${country?.dialCode ?? ''} ${r.phoneValue}`.trim(), icon: { type: 'status', status: 'success' } })), stage === 'tooMany' ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: r.tooMany.changeLabel })) : stage === 'sent' || stage === 'resent' ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", disabled: true, children: r.sent.resendIn })) : (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'cta', screenId }), children: r.sent.resend }))] })) : null] }), _jsxs("div", { className: "prizma-screen-layout__band demo-screens-redirect__band", children: [desktop && !verdict ? (_jsxs(_Fragment, { children: [_jsx(PrizmaDisclaimer, { text: r.orLabel }), _jsx("div", { className: "prizma-screen-layout__band__ctas", children: _jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: r.desktopLabel }) })] })) : null, _jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] })] })] }));
+    const invalid = stage === 'invalidUuid';
+    const verdict = stage === 'sent' || stage === 'resend' || stage === 'resent' || stage === 'tooMany' || invalid;
+    return (_jsxs(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, className: ['demo-screens-redirect', className ?? ''].filter(Boolean).join(' '), ...shell, children: [stage === 'resent' ? (_jsx("div", { className: "demo-screens-toast demo-screens-toast--desktop", children: _jsx(PrizmaSnackbar, { state: "success", children: r.sent.resentSnackbar }) })) : null, _jsxs("div", { className: "demo-screens-redirect__card", children: [_jsx(PrizmaScreenNav, { logo: overrides?.logo, navLabel: strings.navLabel }), _jsxs("div", { className: "prizma-screen-layout__content demo-screens-redirect__content", children: [invalid ? null : _jsx(PrizmaTitle, { variant: "centered", title: r.title, showSubtitle: true, subtitle: subtitle }), sms && !invalid ? (_jsxs("div", { className: "demo-screens-tabs", role: "tablist", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": !onSms, className: ['demo-screens-tabs__tab', !onSms ? 'demo-screens-tabs__tab--active' : ''].join(' '), onClick: () => onAction?.({ type: 'secondary', screenId }), children: r.tabs.qr }), _jsx("button", { type: "button", role: "tab", "aria-selected": onSms, className: ['demo-screens-tabs__tab', onSms ? 'demo-screens-tabs__tab--active' : ''].join(' '), onClick: () => onAction?.({ type: 'tertiary', screenId }), children: r.tabs.sms })] })) : null, stage === 'qr' ? (_jsxs("div", { className: "demo-screens-redirect__leg", children: [sms ? _jsx("p", { className: "demo-screens-redirect__hint", children: r.qrHint }) : null, _jsx("div", { className: "demo-screens-redirect__qr", "aria-label": r.tabs.qr, children: qr })] })) : null, stage === 'sms' || stage === 'smsFilled' ? (_jsxs("div", { className: "demo-screens-redirect__leg demo-screens-redirect__leg--form", children: [_jsx("p", { className: "demo-screens-redirect__hint", children: r.smsHint }), _jsx(PrizmaCombined, { "aria-label": r.phoneLabel, placeholder: r.phonePlaceholder, defaultValue: stage === 'smsFilled' ? r.phoneValue : '', defaultCountry: country, showRequiredMarker: false }, stage), _jsx(PrizmaButton, { variant: "primary", size: "L", disabled: stage !== 'smsFilled', onClick: () => onAction?.({ type: 'cta', screenId }), children: r.sendLabel })] })) : null, verdict ? (_jsxs("div", { className: "demo-screens-redirect__leg demo-screens-redirect__leg--verdict", children: [invalid ? (_jsx(PrizmaTitle, { variant: "centered", title: r.invalidUuid.title, showSubtitle: true, subtitle: r.invalidUuid.subtitle, icon: { type: 'status', status: 'error' } })) : stage === 'tooMany' ? (_jsx(PrizmaTitle, { variant: "centered", title: r.tooMany.title, showSubtitle: true, subtitle: r.tooMany.subtitle, icon: { type: 'status', status: 'error' } })) : (_jsx(PrizmaTitle, { variant: "centered", title: r.sent.title, showSubtitle: true, subtitle: `${r.sent.toPrefix} ${country?.dialCode ?? ''} ${r.phoneValue}`.trim(), icon: { type: 'status', status: 'success' } })), invalid ? null : stage === 'tooMany' ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: r.tooMany.changeLabel })) : stage === 'sent' || stage === 'resent' ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", disabled: true, children: r.sent.resendIn })) : (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'cta', screenId }), children: r.sent.resend }))] })) : null] }), _jsxs("div", { className: "prizma-screen-layout__band demo-screens-redirect__band", children: [desktop && !verdict ? (_jsxs(_Fragment, { children: [_jsx(PrizmaDisclaimer, { text: r.orLabel }), _jsx("div", { className: "prizma-screen-layout__band__ctas", children: _jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: r.desktopLabel }) })] })) : null, _jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] })] })] }));
 });
 DemoScreensRedirectScreen.displayName = 'DemoScreensRedirectScreen';
 export default DemoScreensRedirectScreen;

package/dist/DemoScreensStrings.d.ts

@@ -150,6 +150,11 @@ export interface DemoScreensStrings {
             subtitle: string;
             changeLabel: string;
         };
+        /** The link's UUID was rejected: the same copy for Flows and Workflows. */
+        invalidUuid: {
+            title: string;
+            subtitle: string;
+        };
     };
     /** WEB · `demo_2` — the front door: language, the wordmark, one CTA. */
     start: {

package/dist/DigitalIdDeviceWalletsDocumentSelectionScreen.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DigitalIdDeviceWalletsOption, DigitalIdDeviceWalletsPlatformWallet, DigitalIdDeviceWalletsStrings } from './DigitalIdDeviceWalletsStrings';
+import './ScreenLayout.css';
+export interface DigitalIdDeviceWalletsDocumentSelectionScreenProps extends Omit<PrizmaListScreenProps, 'title' | 'subtitle' | 'children' | 'listAlign' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `documentSelection` slice. */
+    strings: DigitalIdDeviceWalletsStrings;
+    /** Which wallet row the list carries. Default `apple` (iOS); `google` on
+     *  Android; `digital-id` on web, where the row comes last with no tag. */
+    wallet?: DigitalIdDeviceWalletsPlatformWallet;
+    /** Fired with the chosen option; `onAction` still reports the tap. Named
+     *  `onOptionSelect`, not `onSelect` — the latter is a native <div> event the
+     *  shell already passes through. */
+    onOptionSelect?: (option: DigitalIdDeviceWalletsOption) => void;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Digital ID Device Wallets — choose how to verify, with the device wallet
+ * first, built on the `PrizmaListScreen` archetype (GUIDELINES.md §6-G).
+ * Figma: `Digital IDs - Latest Design` (u7N5Zq4bfOwiVbpKHKmSPE), section
+ * `iOS Apple Wallet`, frame `1-1-1-how to verify` (26106:12647).
+ *
+ * The same screen as `IdCaptureDocumentSelectionScreen` with one more row: on
+ * iOS and Android the wallet on top, carrying Core's ⚡ Instant tag; on web a
+ * plain Digital ID row last (`[Web] Device Wallets`, 26106:13011). It is its own screen rather
+ * than a flag on ID Capture's so that ID Capture's chooser stays exactly what
+ * that module ships. Every piece is Core's — the row, the tag and the
+ * `apple-wallet` / `google-wallet` card icons (§10).
+ */
+export declare const DigitalIdDeviceWalletsDocumentSelectionScreen: React.ForwardRefExoticComponent<DigitalIdDeviceWalletsDocumentSelectionScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DigitalIdDeviceWalletsDocumentSelectionScreen;

package/dist/DigitalIdDeviceWalletsDocumentSelectionScreen.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaCardListVerificationOptions } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+/**
+ * Digital ID Device Wallets — choose how to verify, with the device wallet
+ * first, built on the `PrizmaListScreen` archetype (GUIDELINES.md §6-G).
+ * Figma: `Digital IDs - Latest Design` (u7N5Zq4bfOwiVbpKHKmSPE), section
+ * `iOS Apple Wallet`, frame `1-1-1-how to verify` (26106:12647).
+ *
+ * The same screen as `IdCaptureDocumentSelectionScreen` with one more row: on
+ * iOS and Android the wallet on top, carrying Core's ⚡ Instant tag; on web a
+ * plain Digital ID row last (`[Web] Device Wallets`, 26106:13011). It is its own screen rather
+ * than a flag on ID Capture's so that ID Capture's chooser stays exactly what
+ * that module ships. Every piece is Core's — the row, the tag and the
+ * `apple-wallet` / `google-wallet` card icons (§10).
+ */
+export const DigitalIdDeviceWalletsDocumentSelectionScreen = forwardRef(({ strings, wallet = 'apple', onOptionSelect, screenId = 'digital-id-device-wallets-document-selection', overrides, onAction, ...shell }, ref) => {
+    const choose = (option) => {
+        onOptionSelect?.(option);
+        onAction?.({ type: 'cta', screenId });
+    };
+    const copy = strings.documentSelection;
+    return (_jsx(PrizmaListScreen, { ref: ref, title: copy.title, subtitle: copy.subtitle, listAlign: "end", verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaCardListVerificationOptions, { items: wallet === 'digital-id'
+                ? [
+                    // Web: the documents first, the plain Digital ID row last.
+                    { icon: 'id', title: copy.idLabel, onClick: () => choose('id') },
+                    { icon: 'passport', title: copy.passportLabel, onClick: () => choose('passport') },
+                    { icon: 'digital-id', title: copy.digitalIdLabel, onClick: () => choose('wallet') },
+                ]
+                : [
+                    {
+                        icon: wallet === 'apple' ? 'apple-wallet' : 'google-wallet',
+                        title: wallet === 'apple' ? copy.appleWalletLabel : copy.googleWalletLabel,
+                        hasTag: true,
+                        tagLabel: copy.instantLabel,
+                        onClick: () => choose('wallet'),
+                    },
+                    { icon: 'id', title: copy.idLabel, onClick: () => choose('id') },
+                    { icon: 'passport', title: copy.passportLabel, onClick: () => choose('passport') },
+                ] }) }));
+});
+DigitalIdDeviceWalletsDocumentSelectionScreen.displayName =
+    'DigitalIdDeviceWalletsDocumentSelectionScreen';
+export default DigitalIdDeviceWalletsDocumentSelectionScreen;

package/dist/DigitalIdDeviceWalletsResultScreen.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DigitalIdDeviceWalletsResultState, DigitalIdDeviceWalletsStrings } from './DigitalIdDeviceWalletsStrings';
+import './ScreenLayout.css';
+export interface DigitalIdDeviceWalletsResultScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'ctaLabel' | 'secondaryCtaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `success` or `error` slice. */
+    strings: DigitalIdDeviceWalletsStrings;
+    /** Which verdict the wallet hand-back landed on. */
+    state: DigitalIdDeviceWalletsResultState;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Digital ID Device Wallets — the verdict after the wallet hands the ID back,
+ * built on the `PrizmaResultScreen` archetype (GUIDELINES.md §6-F).
+ *
+ * `error` is `Digital ID Generic Error` (26540:5685): status icon, title and
+ * subtitle centred in the full height, one CTA near the bottom, no logo nav and
+ * no verified tag. `success` has no frame — the section's `Success?` decision
+ * goes straight to the next module — so it is the same recipe with the
+ * positive mark and no button: it moves on by itself after 3 s, the way Face
+ * Capture's success does (DEVIATIONS.md #DIW-1). On web the error can carry a
+ * second button, "Choose another method", back to the chooser (#DIW-5).
+ */
+export declare const DigitalIdDeviceWalletsResultScreen: React.ForwardRefExoticComponent<DigitalIdDeviceWalletsResultScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DigitalIdDeviceWalletsResultScreen;

package/dist/DigitalIdDeviceWalletsResultScreen.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * Digital ID Device Wallets — the verdict after the wallet hands the ID back,
+ * built on the `PrizmaResultScreen` archetype (GUIDELINES.md §6-F).
+ *
+ * `error` is `Digital ID Generic Error` (26540:5685): status icon, title and
+ * subtitle centred in the full height, one CTA near the bottom, no logo nav and
+ * no verified tag. `success` has no frame — the section's `Success?` decision
+ * goes straight to the next module — so it is the same recipe with the
+ * positive mark and no button: it moves on by itself after 3 s, the way Face
+ * Capture's success does (DEVIATIONS.md #DIW-1). On web the error can carry a
+ * second button, "Choose another method", back to the chooser (#DIW-5).
+ */
+export const DigitalIdDeviceWalletsResultScreen = forwardRef(({ strings, state, screenId = `digital-id-device-wallets-${state}`, showHeader = false, showFooter = false, overrides, onAction, ...shell }, ref) => {
+    const copy = state === 'success' ? strings.success : strings.error;
+    return (_jsx(PrizmaResultScreen, { ref: ref, status: state, title: copy.title, subtitle: copy.subtitle, ctaLabel: copy.ctaLabel, secondaryCtaLabel: state === 'error' ? strings.error.secondaryCtaLabel : undefined, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, showHeader: showHeader, showFooter: showFooter, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+});
+DigitalIdDeviceWalletsResultScreen.displayName = 'DigitalIdDeviceWalletsResultScreen';
+export default DigitalIdDeviceWalletsResultScreen;

package/dist/DigitalIdDeviceWalletsStrings.d.ts

@@ -0,0 +1,55 @@
+/** Which wallet row the chooser offers. iOS shows Apple Wallet and Android
+ *  Google Wallet, first and tagged Instant; web shows a plain Digital ID row
+ *  last (`[Web] Device Wallets`, 26106:13011), which opens the browser's
+ *  wallet sheet. */
+export type DigitalIdDeviceWalletsPlatformWallet = 'apple' | 'google' | 'digital-id';
+/** The two verdicts the wallet hand-back can land on. */
+export type DigitalIdDeviceWalletsResultState = 'success' | 'error';
+/** What the person picked on the chooser. `wallet` stays in this module; `id`
+ *  and `passport` hand off to ID Capture. */
+export type DigitalIdDeviceWalletsOption = 'wallet' | 'id' | 'passport';
+export interface DigitalIdDeviceWalletsStrings {
+    /** 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-1-1-how to verify` (node 26106:12647). */
+    documentSelection: {
+        /** "Select how to verify" */
+        title: string;
+        subtitle?: string;
+        /** "Apple Wallet" */
+        appleWalletLabel: string;
+        /** "Google Wallet" — the Android row. */
+        googleWalletLabel: string;
+        /** "Digital ID" — the web row. */
+        digitalIdLabel: string;
+        /** "Instant" — the tag under the wallet row. */
+        instantLabel: string;
+        /** "Identity Card" */
+        idLabel: string;
+        /** "Passport" */
+        passportLabel: string;
+    };
+    /** `Successfully verified` (node 26598:16374) — no button (DEVIATIONS.md #DIW-1). */
+    success: {
+        /** "Identity successfully verified" — the NFC / OCR Review success title. */
+        title: string;
+        subtitle?: string;
+        /** No button by default: like Face Capture's success, the flow moves on by
+         *  itself after 3 s. Set it only for a host that waits for a tap. */
+        ctaLabel?: string;
+    };
+    /** `Digital ID Generic Error` (node 26540:5685). */
+    error: {
+        /** "Couldn't verify your ID" */
+        title: string;
+        /** "Please try again" */
+        subtitle?: string;
+        /** "Try again" */
+        ctaLabel: string;
+        /** "Choose another method" — web only: back to the chooser, the SDK's
+         *  `deviceWalletUseAnotherMethod()`. Absent, the screen has one button. */
+        secondaryCtaLabel?: string;
+    };
+}