@incodetech/prizma-core-screens 0.2.7 → 0.2.12

package/dist/index.js

@@ -35,6 +35,10 @@ export { DocumentCaptureConfirmImageScreen, } from './DocumentCaptureConfirmImag
 export { DocumentCaptureConfirmUploadScreen, } from './DocumentCaptureConfirmUploadScreen';
 export { DocumentCaptureGenericErrorScreen, } from './DocumentCaptureGenericErrorScreen';
 export { DocumentCaptureNoConnectionScreen, } from './DocumentCaptureNoConnectionScreen';
+export { DigitalIdUploadTutorialScreen, } from './DigitalIdUploadTutorialScreen';
+export { DigitalIdUploadReviewScreen, } from './DigitalIdUploadReviewScreen';
+export { DigitalIdUploadErrorScreen, } from './DigitalIdUploadErrorScreen';
+export { DigitalIdUploadFileTooLargeScreen, } from './DigitalIdUploadFileTooLargeScreen';
 export { IdCaptureDocumentSelectionScreen, } from './IdCaptureDocumentSelectionScreen';
 export { IdCaptureAgeVerificationScreen, } from './IdCaptureAgeVerificationScreen';
 export { IdCaptureTutorialScreen, } from './IdCaptureTutorialScreen';
@@ -82,6 +86,9 @@ export { FormsFieldScreen } from './FormsFieldScreen';
 export { FormsLongFormScreen } from './FormsLongFormScreen';
 export { FormsSuccessScreen } from './FormsSuccessScreen';
 export { DataSharingConsentConsentScreen } from './DataSharingConsentConsentScreen';
+export { BiometricConsentScreen } from './BiometricConsentScreen';
+export { ReusabilityCredentialSelectionScreen, REUSABILITY_SCAN_NEW, } from './ReusabilityCredentialSelectionScreen';
+export { ReusabilityPrivacyPolicyScreen } from './ReusabilityPrivacyPolicyScreen';
 export { EKYC_COUNTRY_CATALOG, ekycCountryVariant, } from './EkycCountryCatalog';
 export { EkycCountryFormScreen } from './EkycCountryFormScreen';
 export { EkycDetailsScreen } from './EkycDetailsScreen';
@@ -123,6 +130,11 @@ export { NfcSuccessScreen } from './NfcSuccessScreen';
 export { NfcSymbolScreen } from './NfcSymbolScreen';
 export { NfcTryAgainScreen, } from './NfcTryAgainScreen';
 export { NfcTutorialScreen } from './NfcTutorialScreen';
+export { OcrReviewScreen } from './OcrReviewScreen';
+export { OcrReviewLoadingScreen } from './OcrReviewLoadingScreen';
+export { OcrReviewSuccessScreen } from './OcrReviewSuccessScreen';
+export { OcrReviewErrorScreen } from './OcrReviewErrorScreen';
+export { PermissionsAskScreen, } from './PermissionsAskScreen';
 export { PermissionsRequiredScreen, } from './PermissionsRequiredScreen';
 export { PermissionsAllowScreen, } from './PermissionsAllowScreen';
 export { PermissionsBrowserStepsScreen, } from './PermissionsBrowserStepsScreen';

package/dist/styles.css

@@ -25,8 +25,11 @@
 @import './FormsLayout.css';
 @import './IdCaptureLayout.css';
 @import './NfcLayout.css';
+@import './OcrReviewLayout.css';
+@import './PermissionsLayout.css';
 @import './PhoneInputLayout.css';
 @import './QualifiedSignatureLayout.css';
+@import './ReusabilityLayout.css';
 @import './ScreenLayout.css';
 @import './ScreenNav.css';
 @import './ScreenShell.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/prizma-core-screens",
-  "version": "0.2.7",
+  "version": "0.2.12",
   "description": "Prizma Design System — SDK module screens: composed, responsive, brand-themeable React screens built from @incodetech/prizma-core-web.",
   "license": "UNLICENSED",
   "type": "module",
@@ -15,6 +15,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./biometric-consent-screen": {
+      "source": "./src/BiometricConsentScreen.tsx",
+      "types": "./dist/BiometricConsentScreen.d.ts",
+      "import": "./dist/BiometricConsentScreen.js"
+    },
     "./capture-overlay": {
       "source": "./src/CaptureOverlay.tsx",
       "types": "./dist/CaptureOverlay.d.ts",
@@ -115,6 +120,26 @@
       "types": "./dist/DemoScreensTermsScreen.d.ts",
       "import": "./dist/DemoScreensTermsScreen.js"
     },
+    "./digital-id-upload-error-screen": {
+      "source": "./src/DigitalIdUploadErrorScreen.tsx",
+      "types": "./dist/DigitalIdUploadErrorScreen.d.ts",
+      "import": "./dist/DigitalIdUploadErrorScreen.js"
+    },
+    "./digital-id-upload-file-too-large-screen": {
+      "source": "./src/DigitalIdUploadFileTooLargeScreen.tsx",
+      "types": "./dist/DigitalIdUploadFileTooLargeScreen.d.ts",
+      "import": "./dist/DigitalIdUploadFileTooLargeScreen.js"
+    },
+    "./digital-id-upload-review-screen": {
+      "source": "./src/DigitalIdUploadReviewScreen.tsx",
+      "types": "./dist/DigitalIdUploadReviewScreen.d.ts",
+      "import": "./dist/DigitalIdUploadReviewScreen.js"
+    },
+    "./digital-id-upload-tutorial-screen": {
+      "source": "./src/DigitalIdUploadTutorialScreen.tsx",
+      "types": "./dist/DigitalIdUploadTutorialScreen.d.ts",
+      "import": "./dist/DigitalIdUploadTutorialScreen.js"
+    },
     "./document-capture-capture-screen": {
       "source": "./src/DocumentCaptureCaptureScreen.tsx",
       "types": "./dist/DocumentCaptureCaptureScreen.d.ts",
@@ -495,11 +520,36 @@
       "types": "./dist/NfcTutorialScreen.d.ts",
       "import": "./dist/NfcTutorialScreen.js"
     },
+    "./ocr-review-error-screen": {
+      "source": "./src/OcrReviewErrorScreen.tsx",
+      "types": "./dist/OcrReviewErrorScreen.d.ts",
+      "import": "./dist/OcrReviewErrorScreen.js"
+    },
+    "./ocr-review-loading-screen": {
+      "source": "./src/OcrReviewLoadingScreen.tsx",
+      "types": "./dist/OcrReviewLoadingScreen.d.ts",
+      "import": "./dist/OcrReviewLoadingScreen.js"
+    },
+    "./ocr-review-screen": {
+      "source": "./src/OcrReviewScreen.tsx",
+      "types": "./dist/OcrReviewScreen.d.ts",
+      "import": "./dist/OcrReviewScreen.js"
+    },
+    "./ocr-review-success-screen": {
+      "source": "./src/OcrReviewSuccessScreen.tsx",
+      "types": "./dist/OcrReviewSuccessScreen.d.ts",
+      "import": "./dist/OcrReviewSuccessScreen.js"
+    },
     "./permissions-allow-screen": {
       "source": "./src/PermissionsAllowScreen.tsx",
       "types": "./dist/PermissionsAllowScreen.d.ts",
       "import": "./dist/PermissionsAllowScreen.js"
     },
+    "./permissions-ask-screen": {
+      "source": "./src/PermissionsAskScreen.tsx",
+      "types": "./dist/PermissionsAskScreen.d.ts",
+      "import": "./dist/PermissionsAskScreen.js"
+    },
     "./permissions-browser-steps-screen": {
       "source": "./src/PermissionsBrowserStepsScreen.tsx",
       "types": "./dist/PermissionsBrowserStepsScreen.d.ts",
@@ -575,6 +625,16 @@
       "types": "./dist/ResultScreen.d.ts",
       "import": "./dist/ResultScreen.js"
     },
+    "./reusability-credential-selection-screen": {
+      "source": "./src/ReusabilityCredentialSelectionScreen.tsx",
+      "types": "./dist/ReusabilityCredentialSelectionScreen.d.ts",
+      "import": "./dist/ReusabilityCredentialSelectionScreen.js"
+    },
+    "./reusability-privacy-policy-screen": {
+      "source": "./src/ReusabilityPrivacyPolicyScreen.tsx",
+      "types": "./dist/ReusabilityPrivacyPolicyScreen.d.ts",
+      "import": "./dist/ReusabilityPrivacyPolicyScreen.js"
+    },
     "./review-screen": {
       "source": "./src/ReviewScreen.tsx",
       "types": "./dist/ReviewScreen.d.ts",
@@ -704,8 +764,11 @@
     "./forms-layout.css": "./dist/FormsLayout.css",
     "./id-capture-layout.css": "./dist/IdCaptureLayout.css",
     "./nfc-layout.css": "./dist/NfcLayout.css",
+    "./ocr-review-layout.css": "./dist/OcrReviewLayout.css",
+    "./permissions-layout.css": "./dist/PermissionsLayout.css",
     "./phone-input-layout.css": "./dist/PhoneInputLayout.css",
     "./qualified-signature-layout.css": "./dist/QualifiedSignatureLayout.css",
+    "./reusability-layout.css": "./dist/ReusabilityLayout.css",
     "./screen-layout.css": "./dist/ScreenLayout.css",
     "./screen-nav.css": "./dist/ScreenNav.css",
     "./screen-shell.css": "./dist/ScreenShell.css",
@@ -730,7 +793,9 @@
     "./samples/selfie-hat.png": "./samples/selfie-hat.png",
     "./samples/selfie-mask.png": "./samples/selfie-mask.png",
     "./samples/selfie.png": "./samples/selfie.png",
+    "./samples/video-selfie-camera-wide.jpg": "./samples/video-selfie-camera-wide.jpg",
     "./samples/video-selfie-camera.png": "./samples/video-selfie-camera.png",
+    "./samples/video-selfie-room-wide.jpg": "./samples/video-selfie-room-wide.jpg",
     "./samples/video-selfie-room.png": "./samples/video-selfie-room.png",
     "./package.json": "./package.json"
   },
@@ -750,8 +815,8 @@
   },
   "dependencies": {
     "@incodetech/prizma-core-icons": "^0.4.0",
-    "@incodetech/prizma-core-tokens": "^0.13.0",
-    "@incodetech/prizma-core-web": "^0.13.0"
+    "@incodetech/prizma-core-tokens": "^0.15.2",
+    "@incodetech/prizma-core-web": "^0.15.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

package/src/BiometricConsentScreen.tsx

@@ -0,0 +1,192 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCheckbox } from '@incodetech/prizma-core-web/checkbox';
+import { PrizmaModalContent } from '@incodetech/prizma-core-web/modal';
+import { PrizmaFormScreen, 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'
+    // The column shape is the section's, not a host's.
+    | '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 const BiometricConsentScreen = forwardRef<HTMLDivElement, BiometricConsentScreenProps>(
+  (
+    {
+      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 ? (
+      <>
+        <div className="prizma-screen-layout__sheet-scrim" aria-hidden="true" />
+        <div className="prizma-screen-layout__modal-panel">
+          <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 }),
+            }}
+          />
+        </div>
+      </>
+    ) : undefined;
+
+    return (
+      <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}
+      >
+        <PrizmaCheckbox
+          size="L"
+          checked={accepted}
+          /* Mandatory for a11y (`aria-required`); the L container never paints
+             a `*` and the frame draws none. */
+          required
+          aria-label={strings.consent.ariaLabel}
+          segments={strings.consent.body}
+          onCheckedChange={quitConfirm ? undefined : onConsentChange}
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+BiometricConsentScreen.displayName = 'BiometricConsentScreen';
+
+export default BiometricConsentScreen;

package/src/BiometricConsentStrings.ts

@@ -0,0 +1,119 @@
+// 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).
+
+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/src/CaptureScreen.tsx

@@ -39,6 +39,19 @@ export interface PrizmaCaptureScreenProps
   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;
@@ -72,6 +85,7 @@ export const PrizmaCaptureScreen = forwardRef<HTMLDivElement, PrizmaCaptureScree
       isManual,
       manualFeedbackText,
       statusLabels,
+      notice,
       verifiedLabel,
       navLabel,
       screenId,
@@ -107,6 +121,9 @@ export const PrizmaCaptureScreen = forwardRef<HTMLDivElement, PrizmaCaptureScree
           manualFeedbackText={manualFeedbackText}
           statusLabels={statusLabels}
         />
+        {notice ? (
+          <div className="prizma-screen-layout__capture-notice">{notice}</div>
+        ) : null}
         {showFooter ? (
           <div className="prizma-screen-layout__footer prizma-screen-layout__footer--pinned">
             <PrizmaTag label={verifiedLabel} />

package/src/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/src/DemoScreensRedirectScreen.tsx

@@ -21,8 +21,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'> {
@@ -79,7 +84,8 @@ export const DemoScreensRedirectScreen = forwardRef<HTMLDivElement, DemoScreensR
       { 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';
+    const invalid = stage === 'invalidUuid';
+    const verdict = stage === 'sent' || stage === 'resend' || stage === 'resent' || stage === 'tooMany' || invalid;
 
     return (
       <PrizmaScreenShell
@@ -96,8 +102,8 @@ export const DemoScreensRedirectScreen = forwardRef<HTMLDivElement, DemoScreensR
         <div className="demo-screens-redirect__card">
           <PrizmaScreenNav logo={overrides?.logo} navLabel={strings.navLabel} />
           <div className="prizma-screen-layout__content demo-screens-redirect__content">
-            <PrizmaTitle variant="centered" title={r.title} showSubtitle subtitle={subtitle} />
-            {sms ? (
+            {invalid ? null : <PrizmaTitle variant="centered" title={r.title} showSubtitle subtitle={subtitle} />}
+            {sms && !invalid ? (
               <div className="demo-screens-tabs" role="tablist">
                 <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 })}>
                   {r.tabs.qr}
@@ -138,7 +144,9 @@ export const DemoScreensRedirectScreen = forwardRef<HTMLDivElement, DemoScreensR
 
             {verdict ? (
               <div className="demo-screens-redirect__leg demo-screens-redirect__leg--verdict">
-                {stage === 'tooMany' ? (
+                {invalid ? (
+                  <PrizmaTitle variant="centered" title={r.invalidUuid.title} showSubtitle subtitle={r.invalidUuid.subtitle} icon={{ type: 'status', status: 'error' }} />
+                ) : stage === 'tooMany' ? (
                   <PrizmaTitle variant="centered" title={r.tooMany.title} showSubtitle subtitle={r.tooMany.subtitle} icon={{ type: 'status', status: 'error' }} />
                 ) : (
                   <PrizmaTitle
@@ -149,7 +157,7 @@ export const DemoScreensRedirectScreen = forwardRef<HTMLDivElement, DemoScreensR
                     icon={{ type: 'status', status: 'success' }}
                   />
                 )}
-                {stage === 'tooMany' ? (
+                {invalid ? null : stage === 'tooMany' ? (
                   <PrizmaButton variant="tertiary-link" size="L" onClick={() => onAction?.({ type: 'tertiary', screenId })}>
                     {r.tooMany.changeLabel}
                   </PrizmaButton>

package/src/DemoScreensStrings.ts

@@ -171,6 +171,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. */