@incodetech/prizma-core-screens 0.2.7 → 0.2.14

package/dist/FormScreen.d.ts

@@ -50,6 +50,13 @@ export interface PrizmaFormScreenProps extends Omit<PrizmaScreenShellProps, 'dar
      * body text.
      */
     linkLabel?: string;
+    /**
+     * Renders `linkLabel` in Core's disabled treatment, for a link that exists
+     * but cannot be pressed yet — Phone Input's "Resend code in 30s" while the
+     * resend timer runs (Figma `phoneNumber.OTP.typing`, Tertiary / Link ·
+     * Disabled).
+     */
+    linkDisabled?: boolean;
     /**
      * A composed line below the primary: body copy with inline links, e.g. Phone
      * Input's "Didn't receive the code? **Resend code** or **Change phone
@@ -86,6 +93,27 @@ export interface PrizmaFormScreenProps extends Omit<PrizmaScreenShellProps, 'dar
      * eKYB, Data Sharing Consent); it is the archetype's now. DEVIATIONS #DSC-2.
      */
     scrollFields?: boolean;
+    /**
+     * Where the field stack sits in the column when it is SHORTER than the
+     * space it has. `start` (the default) hangs it off the title block, which is
+     * every form so far. `end` pins it to the CTA band instead, leaving the space
+     * between the title and the stack empty — Biometric Consent's section draws
+     * exactly that: a `justify-between` middle with the Title at the top and the
+     * one consent card flush against Continue, Spacing/16 above it
+     * (`biometricConsent.empty`, 2001:16361). Selected here so the module
+     * declares no layout of its own; the rule lives once in `FormScreen.css`.
+     * DEVIATIONS #BC-1.
+     */
+    fieldsAlign?: 'start' | 'end';
+    /**
+     * A shell-level layer painted OVER the whole screen — the same slot archetype
+     * A carries for Document Capture's method sheet (#F-32, #DC-30): a scrim plus
+     * Core's `PrizmaBottomSheetContent` or `PrizmaModalContent`, presented on top
+     * of the dimmed form. It cannot ride in the content column: it is absolutely
+     * positioned against the shell. Biometric Consent's quit confirmation is the
+     * first Form consumer (DEVIATIONS #BC-8).
+     */
+    overlay?: ReactNode;
     /**
      * Let the field stack change SHAPE on a wide screen: `PrizmaFormRow` pairs
      * become two lanes and Continue + Back share a row, once the shell's own

package/dist/FormScreen.js

@@ -23,11 +23,12 @@ export function PrizmaFormRow({ children, className }) {
  * (typing / filled / loading) are separate screens sharing this identical
  * layout, changing only field content.
  */
-export const PrizmaFormScreen = forwardRef(({ progress, title, subtitle, ctaLabel, ctaDisabled, ctaLoading = false, ctaLoadingLabel, linkLabel, linkContent, verifiedLabel, children, fieldsOffset, fieldsGap, scrollFields = false, responsive = false, navLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, className: [shell.className, responsive ? 'prizma-form-screen--responsive' : null]
+export const PrizmaFormScreen = forwardRef(({ progress, title, subtitle, ctaLabel, ctaDisabled, ctaLoading = false, ctaLoadingLabel, linkLabel, linkDisabled, linkContent, verifiedLabel, children, fieldsOffset, fieldsGap, scrollFields = false, fieldsAlign = 'start', overlay, responsive = false, navLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, className: [shell.className, responsive ? 'prizma-form-screen--responsive' : null]
         .filter(Boolean)
         .join(' ') || undefined, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel }), _jsxs("div", { className: "prizma-screen-layout__content", children: [progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle }), _jsx("div", { className: [
                         'prizma-form-screen__fields',
                         scrollFields ? 'prizma-form-screen__fields--scroll' : null,
+                        fieldsAlign === 'end' ? 'prizma-form-screen__fields--end' : null,
                     ]
                         .filter(Boolean)
                         .join(' '), 
@@ -42,6 +43,6 @@ export const PrizmaFormScreen = forwardRef(({ progress, title, subtitle, ctaLabe
                                 ? { '--pfs-fields-gap': `var(--prizma-spacing-${fieldsGap})` }
                                 : null),
                         }
-                        : undefined, children: children }), ctaLabel || linkLabel || linkContent ? (_jsxs("div", { className: "prizma-screen-layout__cta prizma-form-screen__cta", children: [ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", disabled: ctaDisabled, loading: ctaLoading, loadingLabel: ctaLoadingLabel, onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, linkContent] })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer prizma-screen-layout__footer--pinned", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] })));
+                        : undefined, children: children }), ctaLabel || linkLabel || linkContent ? (_jsxs("div", { className: "prizma-screen-layout__cta prizma-form-screen__cta", children: [ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", disabled: ctaDisabled, loading: ctaLoading, loadingLabel: ctaLoadingLabel, onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", disabled: linkDisabled, onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, linkContent] })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer prizma-screen-layout__footer--pinned", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] }), overlay] })));
 PrizmaFormScreen.displayName = 'PrizmaFormScreen';
 export default PrizmaFormScreen;

package/dist/IdCaptureLayout.css

@@ -99,12 +99,89 @@
   flex-basis: calc((100cqw - 2 * var(--prizma-spacing-24)) * 420 / 306);
 }
 
+/* ── A notice on the stage: the horizontal frame may give up height too ──────
+ * The "Need more time?" offer (`.id-capture-stage__notice`, IDC-32) adds ~90px
+ * of content to the bottom band. On the 390 × 844 reference the band has the
+ * room and nothing moves. On a short panel it does not: measured 2026-10-15,
+ * the horizontal ID frame is aspect-locked and does not shrink, so the column
+ * overflowed and the notice ran 10px into the help strip at 320 × 693 and 36px
+ * at the closed iPhone Duo (466 × 678). The same recipe as the vertical rule
+ * above, applied to the horizontal frames ONLY while a notice is on the stage:
+ * the frame starts at its full-width height and gives up height when the
+ * column is short, the aspect ratio narrows it to match, the title band keeps
+ * its content height. Face Capture makes the identical trade at 320 (its
+ * selfie frame gives up Spacing/40 for the notice, ScreenLayout.css) and the
+ * owner's rule is explicit that the frame may get smaller (2026-08-18). A
+ * stage without a notice is untouched. */
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) {
+  min-height: 0;
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .id-capture-band--top {
+  flex-shrink: 0;
+  min-height: min-content;
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .prizma-id-capture--horizontal:not(.prizma-id-capture--poa) {
+  flex: 0 1 auto;
+  min-height: 0;
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .prizma-id-capture--horizontal:not(.prizma-id-capture--poa) .prizma-id-capture__frame {
+  flex: 0 1 auto;
+  min-height: 0;
+  width: auto;
+  max-width: 100%;
+  flex-basis: calc((100cqw - 2 * var(--prizma-spacing-24)) * 220 / 350);
+}
+.prizma-viewfinder__content:has(> .id-capture-band > .id-capture-stage__notice) > .prizma-id-capture--passport.prizma-id-capture--horizontal .prizma-id-capture__frame {
+  flex-basis: calc((100cqw - 2 * var(--prizma-spacing-24)) * 254 / 350);
+}
+
+/* ── Short panels: the tutorial art is sized by its halo, not its canvas ─────
+ * `PrizmaIllustrationIdTutorial` is a 342 × 392 canvas with the halo centred
+ * at r130 (y 66–326) and the hand-and-document artwork inside it (y 100–313;
+ * the passport's hand fades out above). The 66 above and below the halo are
+ * air at rest; the bottom band is where the hand travels in from during the
+ * loop. The selfie illustration is a 296 canvas with the same r130 halo and 18
+ * of air: on the 844 reference both halos are 260 and the two tutorials match.
+ *
+ * On a short panel the tutorial middle is height-limited (ScreenLayout.css,
+ * #F-35) and the two canvases scale by height, so the ID halo comes out 18 %
+ * smaller than the selfie's (170 vs 209 on the closed iPhone Duo, measured
+ * 2026-10-14; Camila: "ID tutorials have illustration a bit too small, no?
+ * Compared to the size on the selfie tutorial one"). Fixed by cropping the
+ * canvas to the halo band plus Spacing/16 on each side — y 50 to 342, 292
+ * units, the same 89 % the selfie's halo takes of its own box — so the halo
+ * fills the slot the way the selfie's does. The wrapper takes the slot and
+ * clips; the svg is scaled so 292 of its 392 units fill the wrapper and
+ * centres, so the crop is symmetric around the halo and the halo's centre
+ * does not move. During the loop the entering hand is clipped 50 units
+ * earlier than the canvas clips it, which is invisible against the fade.
+ * Outside the query nothing exists: the reference renders the full canvas.
+ * DEVIATIONS #IDC-31. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-screen-layout__flex > .prizma-illustration-tutorial {
+    flex: 1 1 0;
+    min-height: 0;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .prizma-screen-layout__flex > .prizma-illustration-tutorial > svg {
+    flex: none;
+    height: calc(100% * 392 / 292);
+    width: auto;
+    max-width: none;
+  }
+}
+
 /* ── Camera stage (dark) ───────────────────────────────────────────────────── */
 
 /* The stage's nav row carries only the close X (no logo — the camera owns the
  * screen). The foundation `.prizma-screen-nav` supplies the status-bar reserve,
  * the 44px flow slot and the un-fixing of Core's PrizmaNavigation; the ink is
- * the only thing the camera stage changes: Core's nav icon is the THEMED
+ * the only thing the camera stage changes: Core's nav icon is the themed
  * `Icon/Neutral/500`, which disappears on the always-dark camera surface, so it
  * takes the camera's own Static ink — the same token PrizmaCaptureManual uses
  * for the shutter and the "?" help control. DEVIATIONS.md #IDC-21. */
@@ -118,6 +195,44 @@
   width: 100%;
 }
 
+/* ── The "Need more time?" notice ─────────────────────────────────────────────
+ * The Snackbar the stage raises 20 s before auto-capture falls back to the
+ * shutter (IdCaptureStageScreen `extendTime`, 2026-10-15). It takes the BOTTOM
+ * band — the air between the encrypted row and the strip's reserved space —
+ * because, unlike Face Capture, this stage's strip is never empty: the "?" help
+ * control rides it on every stage (IDC-29), so the shared rail the selfie notice
+ * uses (`.prizma-screen-layout__capture-notice`) would land on top of it.
+ *
+ * The band is `justify-content: flex-end`, so the notice sits just above the
+ * strip's Spacing/12 of breathing and the frame above does not move when the
+ * offer arrives. The band is also `flex: 1; min-height: 0`, which on a short
+ * panel would let it shrink to nothing and spill the notice upward over the
+ * encrypted row; with a notice in it the band keeps its content height and the
+ * shortfall goes where this stylesheet already sends it — the vertical frame
+ * (the short-panel rule above), which the owner has said may get smaller
+ * (2026-08-18). DEVIATIONS #IDC-32. */
+.id-capture-band:has(> .id-capture-stage__notice) {
+  flex-shrink: 0;
+  min-height: min-content;
+  padding-top: var(--prizma-spacing-16);
+}
+
+.id-capture-stage__notice {
+  display: flex;
+  /* The HUD column centres its copy; the Snackbar's own text is left-set. */
+  text-align: left;
+}
+
+/* On a 320 phone the notice drops its status glyph — the same call Face
+ * Capture made (Camila, 2026-10-05, ScreenLayout.css): 44 of the 272px column
+ * on a decorative mark pushed the body to four lines. The icon is
+ * `aria-hidden`; the copy carries the meaning without it. */
+@container pcs-screen (max-width: 340px) {
+  .id-capture-stage__notice .prizma-snackbar__icon {
+    display: none;
+  }
+}
+
 /* The feedback pill replaces the title block on the error stages (Figma
  * `1-5-5 … 1-5-9-id-errors`): same band, same Spacing/40 above the frame. */
 .id-capture-stage__feedback {
@@ -125,6 +240,54 @@
   justify-content: center;
 }
 
+/* ── Short or narrow panels: the live cue takes Template B ───────────────────
+ * `PrizmaCaptureFeedback` ships two templates on its `showAnimation` axis:
+ * A, the 120-ish pill with the illustration and a Headline/H3 title, and B, a
+ * 72 pill with no illustration and Headline/H5. The error stages draw A on the
+ * 390 × 844 reference. On a closed iPhone Duo (678) A still fits — measured
+ * 2026-10-14, the frame lands at 198–473 with the pill above it — but it is
+ * the tallest element on a stage that has just lost 166px, and on a 640 phone
+ * or a 320 column it does not fit at all. Video Selfie already made this call
+ * for its own cues (DEVIATIONS #VS-30, Camila 2026-10-07): under 340 wide or
+ * 720 tall the pill is B. The same line here, so the two camera modules agree
+ * on when a cue goes compact. Nothing is re-skinned: fill, radius, stroke and
+ * shadow are Core's and identical between A and B (capture-feedback.md §4.4);
+ * what changes is exactly Template B's four switches, taken from
+ * `CaptureFeedback.css`'s own `--compact` modifier.
+ *
+ * A container query, not the prop: the screen cannot know the panel's height,
+ * the shell's `pcs-screen` container can. ONE `or` condition, not two
+ * comma-separated queries (lightningcss rejects the latter; see
+ * VideoSelfieLayout.css). The 390 reference is unchanged. DEVIATIONS #IDC-30. */
+@container pcs-screen ((max-width: 340px) or (max-height: 720px)) {
+  .id-capture-stage__feedback .prizma-capture-feedback__illustration {
+    display: none;
+  }
+
+  /* Template B: body padding-bottom 12 → 16, itemSpacing 8 → 4. */
+  .id-capture-stage__feedback .prizma-capture-feedback__body {
+    padding: var(--prizma-spacing-16) 0;
+    gap: var(--prizma-spacing-4);
+  }
+
+  /* Title Headline/H3 → Headline/H5. */
+  .id-capture-stage__feedback .prizma-capture-feedback__title {
+    font-weight: var(--prizma-headline-h5-font-weight);
+    font-size: var(--prizma-headline-h5-font-size);
+    line-height: var(--prizma-headline-h5-line-height);
+    letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  }
+
+  /* Subtitle Headline/H5 → Body/M Regular. */
+  .id-capture-stage__feedback .prizma-capture-feedback__subtitle {
+    font-family: var(--prizma-body-family);
+    font-weight: var(--prizma-body-m-regular-font-weight);
+    font-size: var(--prizma-body-m-regular-font-size);
+    line-height: var(--prizma-body-m-regular-line-height);
+    letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+  }
+}
+
 /* ── Removed: promoted into the foundation ───────────────────────────────────
  * `.id-capture-glyph*` (the non-status glyph slot) is now
  * `ScreenLayout.css`'s `__glyph` — DEVIATIONS #DC-29, closed.
@@ -142,7 +305,7 @@
  *
  * The plate needs no override — Core's own `mode="overlay"` already makes the
  * window transparent, which is what the light screens want. The ink does: the
- * row is re-inked with the THEMED body token so it also survives dark mode,
+ * row is re-inked with the themed body token so it also survives dark mode,
  * scoped to the light screens only (the camera stage keeps Core's Static white).
  * Core gap — PrizmaIdCapture has no surface-aware encrypted row. DEVIATIONS.md #IDC-28.
  */

package/dist/IdCaptureStageScreen.d.ts

@@ -32,6 +32,28 @@ export interface IdCaptureStageScreenProps extends Omit<PrizmaScreenShellProps,
     still?: ReactNode;
     /** Digit shown by the countdown Timer (`*-countdown` sections 1..3). */
     countdownValue?: 1 | 2 | 3;
+    /**
+     * Raise the "Need more time?" offer over the feed — the accessibility
+     * notification shown 20 s before auto-capture falls back to the shutter.
+     *
+     * A MODIFIER of whatever stage state is already showing, not a twelfth
+     * state: the 30 s fallback timer runs underneath the hint overlay, so the
+     * person can be shown the hand-and-document ghost and offered more time in
+     * the same frame. Needs `strings.stage.extendTime`; without it the flag is a
+     * no-op, which is what a host that has not localized the copy should get
+     * rather than English. Same contract as `FaceCaptureCapturingScreen`.
+     */
+    extendTime?: boolean;
+    /** Tapping "Extend auto-capture". The host resets its own fallback timer. */
+    onExtendTime?: () => void;
+    /**
+     * A notice band of the host's own, in the slot `extendTime` uses. Wins over
+     * `extendTime` when both are given. Exists for a host that needs the
+     * Snackbar to do something the static one cannot — Core Lab's prototype
+     * swaps in a copy whose count actually runs down — without reaching into
+     * the screen. The static `extendTime` notice stays the default.
+     */
+    notice?: ReactNode;
     screenId?: string;
     overrides?: PrizmaScreenOverrides;
     onAction?: PrizmaScreenActionHandler;
@@ -64,6 +86,31 @@ export interface IdCaptureStageScreenProps extends Omit<PrizmaScreenShellProps,
  * to the column's bottom padding) — no offsets are invented here, and
  * PrizmaIdCapture's own frame→encrypted-row adjacency is left untouched
  * (DEVIATIONS.md #12's lesson: never stack an offset a Core component carries).
+ *
+ * ── The "Need more time?" offer (`extendTime`) ──────────────────────────────
+ *
+ * Auto-capture gives up after a configured timeout (30 s in the module's own
+ * flow frames) and drops the person onto the shutter. Someone who is
+ * struggling — a tremor, low vision, a dark room, a card that will not sit
+ * flat — gets moved off the EASIER path precisely because they were slow,
+ * which is backwards. So 20 s before the switch, the stage offers to stay on
+ * auto. A client turns it on per flow from the dashboard; with it off, nothing
+ * about today's capture changes. It is the conformance route for WCAG 2.2.1
+ * Timing Adjustable via the *Extend* clause (warn before the limit, ≥20 s to
+ * act, ≥10 extensions) — the reasoning, the `role="alert"` decision and the
+ * `neutral` state are all Face Capture's (2026-10-05) and are not re-argued
+ * here: `FaceCaptureCapturingScreen`'s header is the record. One feature, two
+ * modules, one Snackbar.
+ *
+ * WHERE IT SITS is the one thing this module decides differently. Face
+ * Capture anchors the notice on the shutter-strip rail because, there, notice
+ * and shutter are alternatives — a capturing screen either raises the offer or
+ * shows the button. ID Capture's strip is never free: the "?" help control
+ * rides it on every stage, auto or manual (IDC-29). So the notice takes the
+ * BOTTOM BAND instead — the flexible air between the encrypted row and the
+ * strip's reserved space — which is the one slot on this stage nothing else
+ * owns. It bottom-anchors there like the band's other content would, so the
+ * frame above does not move when the offer arrives. DEVIATIONS.md #IDC-32.
  */
 export declare const IdCaptureStageScreen: React.ForwardRefExoticComponent<IdCaptureStageScreenProps & React.RefAttributes<HTMLDivElement>>;
 export default IdCaptureStageScreen;

package/dist/IdCaptureStageScreen.js

@@ -1,10 +1,11 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { PrizmaNavigation } from '@incodetech/prizma-core-web/navigation';
 import { PrizmaIdCapture, } from '@incodetech/prizma-core-web/id-capture';
 import { PrizmaCaptureManual } from '@incodetech/prizma-core-web/capture-manual';
 import { PrizmaCaptureFeedback } from '@incodetech/prizma-core-web/capture-feedback';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
 import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
 import { PrizmaScreenShell } from './ScreenShell';
 import './ScreenLayout.css';
@@ -68,8 +69,33 @@ const STAGE_FEEDBACK = {
  * to the column's bottom padding) — no offsets are invented here, and
  * PrizmaIdCapture's own frame→encrypted-row adjacency is left untouched
  * (DEVIATIONS.md #12's lesson: never stack an offset a Core component carries).
+ *
+ * ── The "Need more time?" offer (`extendTime`) ──────────────────────────────
+ *
+ * Auto-capture gives up after a configured timeout (30 s in the module's own
+ * flow frames) and drops the person onto the shutter. Someone who is
+ * struggling — a tremor, low vision, a dark room, a card that will not sit
+ * flat — gets moved off the EASIER path precisely because they were slow,
+ * which is backwards. So 20 s before the switch, the stage offers to stay on
+ * auto. A client turns it on per flow from the dashboard; with it off, nothing
+ * about today's capture changes. It is the conformance route for WCAG 2.2.1
+ * Timing Adjustable via the *Extend* clause (warn before the limit, ≥20 s to
+ * act, ≥10 extensions) — the reasoning, the `role="alert"` decision and the
+ * `neutral` state are all Face Capture's (2026-10-05) and are not re-argued
+ * here: `FaceCaptureCapturingScreen`'s header is the record. One feature, two
+ * modules, one Snackbar.
+ *
+ * WHERE IT SITS is the one thing this module decides differently. Face
+ * Capture anchors the notice on the shutter-strip rail because, there, notice
+ * and shutter are alternatives — a capturing screen either raises the offer or
+ * shows the button. ID Capture's strip is never free: the "?" help control
+ * rides it on every stage, auto or manual (IDC-29). So the notice takes the
+ * BOTTOM BAND instead — the flexible air between the encrypted row and the
+ * strip's reserved space — which is the one slot on this stage nothing else
+ * owns. It bottom-anchors there like the band's other content would, so the
+ * frame above does not move when the offer arrives. DEVIATIONS.md #IDC-32.
  */
-export const IdCaptureStageScreen = forwardRef(({ strings, documentType = 'id', side = 'front', vertical = false, state = 'empty', manual = false, showClose = state !== 'empty', feedback, camera, still, countdownValue = 3, screenId = `id-capture-${documentType}-${side}-${state}`, overrides, onAction, className, ...shell }, ref) => {
+export const IdCaptureStageScreen = forwardRef(({ strings, documentType = 'id', side = 'front', vertical = false, state = 'empty', manual = false, showClose = state !== 'empty', feedback, camera, still, countdownValue = 3, extendTime, onExtendTime, notice, screenId = `id-capture-${documentType}-${side}-${state}`, overrides, onAction, className, ...shell }, ref) => {
     const slice = documentType === 'passport'
         ? strings.stage.passport
         : side === 'back'
@@ -77,12 +103,22 @@ export const IdCaptureStageScreen = forwardRef(({ strings, documentType = 'id',
             : strings.stage.front;
     const pillKind = feedback === undefined ? STAGE_FEEDBACK[state] : feedback;
     const pillCopy = pillKind ? strings.feedback[pillKind] : undefined;
+    const offer = strings.stage.extendTime;
+    // No copy, no notice: a host that has not localized this must not get
+    // English, and the flag alone is not permission to invent it.
+    const band = notice ??
+        (extendTime && offer ? (_jsxs(PrizmaSnackbar, { state: "neutral", isMultiline: true, 
+            // Assertive on purpose — a polite region can queue behind the
+            // stage's own state announcements and be read out after the 20 s
+            // has already run out. FaceCaptureCapturingScreen's header has the
+            // full reasoning; this instance follows it.
+            role: "alert", linkLabel: offer.linkLabel, onLinkClick: onExtendTime, children: [_jsx("strong", { children: offer.title }), _jsx("br", {}), offer.description] })) : undefined);
     return (_jsxs(PrizmaScreenShell, { ref: ref, dark: true, className: className, ...shell, children: [_jsx("div", { className: "prizma-viewfinder__surface", children: camera }), _jsx("header", { className: "prizma-screen-nav id-capture-stage__nav", children: _jsx(PrizmaNavigation, { showIncodeLogo: false, showRightIcon: showClose, closeLabel: strings.closeLabel, "aria-label": strings.navLabel, onRightIconClick: () => onAction?.({ type: 'secondary', screenId }) }) }), _jsxs("div", { className: [
                     'prizma-viewfinder__content',
                     overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
                 ]
                     .filter(Boolean)
-                    .join(' '), children: [_jsx("div", { className: "id-capture-band id-capture-band--top", children: pillKind && pillCopy ? (_jsx("div", { className: "id-capture-stage__feedback", children: _jsx(PrizmaCaptureFeedback, { feedback: pillKind, title: pillCopy.title, subtitle: pillCopy.subtitle }) })) : (_jsxs(_Fragment, { children: [_jsx("h2", { className: "prizma-viewfinder__title", children: slice.title }), slice.instruction && !manual ? (_jsx("p", { className: "prizma-viewfinder__instruction", children: slice.instruction })) : null] })) }), _jsx(PrizmaIdCapture, { type: documentType, state: CAPTURE_STATE[state], isVertical: vertical, mode: "overlay", scrim: true, countdownValue: countdownValue, encryptedLabel: strings.encryptedLabel, announcement: strings.stage.stateLabels?.[state], still: still }), _jsx("div", { className: "id-capture-band" })] }), _jsx("div", { className: "prizma-screen-layout__capture-strip", children: _jsx(PrizmaCaptureManual, { className: "id-capture-stage__manual", variant: "id-capture", showButton: manual, showTooltip: manual, showHelpIcon: true, tooltipText: manual ? strings.stage.manualTooltip : undefined, ariaLabel: strings.stage.captureLabel, helpLabel: strings.stage.helpLabel, onCapture: () => onAction?.({ type: 'cta', screenId }), onHelp: () => onAction?.({ type: 'help', screenId }) }) }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
+                    .join(' '), children: [_jsx("div", { className: "id-capture-band id-capture-band--top", children: pillKind && pillCopy ? (_jsx("div", { className: "id-capture-stage__feedback", children: _jsx(PrizmaCaptureFeedback, { feedback: pillKind, title: pillCopy.title, subtitle: pillCopy.subtitle }) })) : (_jsxs(_Fragment, { children: [_jsx("h2", { className: "prizma-viewfinder__title", children: slice.title }), slice.instruction && !manual ? (_jsx("p", { className: "prizma-viewfinder__instruction", children: slice.instruction })) : null] })) }), _jsx(PrizmaIdCapture, { type: documentType, state: CAPTURE_STATE[state], isVertical: vertical, mode: "overlay", scrim: true, countdownValue: countdownValue, encryptedLabel: strings.encryptedLabel, announcement: strings.stage.stateLabels?.[state], still: still }), _jsx("div", { className: "id-capture-band", children: band ? _jsx("div", { className: "id-capture-stage__notice", children: band }) : null })] }), _jsx("div", { className: "prizma-screen-layout__capture-strip", children: _jsx(PrizmaCaptureManual, { className: "id-capture-stage__manual", variant: "id-capture", showButton: manual, showTooltip: manual, showHelpIcon: true, tooltipText: manual ? strings.stage.manualTooltip : undefined, ariaLabel: strings.stage.captureLabel, helpLabel: strings.stage.helpLabel, onCapture: () => onAction?.({ type: 'cta', screenId }), onHelp: () => onAction?.({ type: 'help', screenId }) }) }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
 });
 IdCaptureStageScreen.displayName = 'IdCaptureStageScreen';
 export default IdCaptureStageScreen;

package/dist/IdCaptureStrings.d.ts

@@ -102,6 +102,25 @@ export interface IdCaptureStrings {
         /** Visually-hidden state announcements, per stage state — forwarded to
          *  `PrizmaIdCapture.stateLabels`. */
         stateLabels?: Partial<Record<IdCaptureStageState, string>>;
+        /**
+         * stage.extendTime — the accessibility offer that rides the camera stage
+         * 20 s before auto-capture gives up and hands over to the shutter
+         * ("Need more time? / Manual capture starts in 20 s / Extend auto-capture").
+         * The same contract as Face Capture's `extendTime`: one feature, two
+         * modules, identical copy, so the locale overlay translates both at once.
+         *
+         * `description` is one localized sentence that CONTAINS the count, not a
+         * template — ten locales put the number in ten places. Optional: a host
+         * that has not localized it gets no notice rather than English.
+         */
+        extendTime?: {
+            /** Bold first line — "Need more time?" */
+            title: string;
+            /** "Manual capture starts in 20 s" — the count lives inside the copy. */
+            description: string;
+            /** The action that keeps the user on auto — "Extend auto-capture". */
+            linkLabel: string;
+        };
     };
     /** The on-camera feedback pills the error stages carry. */
     feedback: Partial<Record<IdCaptureFeedbackKind, IdCaptureFeedbackCopy>>;

package/dist/ListScreen.d.ts

@@ -61,6 +61,25 @@ export interface PrizmaListScreenProps extends Omit<PrizmaScreenShellProps, 'dar
      *  (common issues) and "Quit process" (permission). Figma draws Core's
      *  `tertiary-link` composite in the band's top slot. */
     linkLabel?: string;
+    /**
+     * A SECOND tertiary link, under the first. Reusability's selection draws
+     * "What data will be shared?" over "Incode’s Privacy Policy" with no primary
+     * between them — two non-primary actions a host has to tell apart, so this
+     * one emits `tertiary` where `linkLabel` emits `secondary` (the #PI-10
+     * reasoning). Stacked at the band's flat Spacing/16 like everything else in
+     * it. Omit it and nothing renders, so every existing consumer is untouched.
+     * DEVIATIONS #RU-4.
+     */
+    secondaryLinkLabel?: string;
+    /**
+     * A shell-level layer painted OVER the whole screen — the same slot
+     * archetypes A and E carry (#F-32, #BC-8): a scrim plus Core's
+     * `PrizmaBottomSheetContent` or `PrizmaModalContent`, presented on top of the
+     * dimmed list. It cannot ride in the content column: it is absolutely
+     * positioned against the shell. Reusability's shared-details sheet is the
+     * first List consumer (DEVIATIONS #RU-5).
+     */
+    overlay?: ReactNode;
     /** "verified by" attribution copy for the footer tag. */
     verifiedLabel: string;
     navLabel?: string;

package/dist/ListScreen.js

@@ -31,7 +31,7 @@ import './ScreenLayout.css';
  * Reach for `PrizmaResultScreen` instead when the middle is a centred verdict
  * rather than a list.
  */
-export const PrizmaListScreen = forwardRef(({ progress, status = 'none', title, subtitle, glyph, children, listAlign = 'start', scrollList = false, disclaimer, ctaLabel, secondaryCtaLabel, linkLabel, verifiedLabel, navLabel, backLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel, backLabel: backLabel, onBack: () => onAction?.({ type: 'back', screenId }) }), progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsxs("div", { className: "prizma-screen-layout__content", children: [glyph, _jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle, icon: status === 'loading'
+export const PrizmaListScreen = forwardRef(({ progress, status = 'none', title, subtitle, glyph, children, listAlign = 'start', scrollList = false, disclaimer, ctaLabel, secondaryCtaLabel, linkLabel, secondaryLinkLabel, overlay, verifiedLabel, navLabel, backLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel, backLabel: backLabel, onBack: () => onAction?.({ type: 'back', screenId }) }), progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsxs("div", { className: "prizma-screen-layout__content", children: [glyph, _jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle, icon: status === 'loading'
                         ? { type: 'spinner' }
                         : status === 'none'
                             ? { type: 'none' }
@@ -41,6 +41,11 @@ export const PrizmaListScreen = forwardRef(({ progress, status = 'none', title,
                         scrollList ? 'prizma-screen-layout__list--scroll' : '',
                     ]
                         .filter(Boolean)
-                        .join(' '), children: children }), ctaLabel || secondaryCtaLabel || linkLabel || disclaimer ? (_jsxs("div", { className: "prizma-screen-layout__band", children: [disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, secondaryCtaLabel ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: secondaryCtaLabel })) : null] })) : null] }), showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })));
+                        .join(' '), children: children }), ctaLabel || secondaryCtaLabel || linkLabel || secondaryLinkLabel || disclaimer ? (_jsxs("div", { className: "prizma-screen-layout__band", children: [disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, linkLabel || secondaryLinkLabel ? (
+                        /* The links share ONE band slot, stacked flush: two 56px link
+                           rows with the band's 16 between them read as two distant
+                           lines (Camila, 2026-10-13); the row height is already the
+                           touch target. ScreenLayout.css `__band__links`. */
+                        _jsxs("div", { className: "prizma-screen-layout__band__links", children: [linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, secondaryLinkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: secondaryLinkLabel })) : null] })) : null, ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, secondaryCtaLabel ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: secondaryCtaLabel })) : null] })) : null] }), showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null, overlay] })));
 PrizmaListScreen.displayName = 'PrizmaListScreen';
 export default PrizmaListScreen;

package/dist/LoaderScreen.d.ts

@@ -17,11 +17,13 @@ export interface LoaderScreenProps extends Omit<PrizmaProcessingScreenProps, 'st
  * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
  *
  * Figma: `Module Generic Screens` frames `67:2388` ("Processing…") and
- * `67:3593` ("Just a moment…"). ONE screen for both, and for every module
- * loader after them: logo header → Core's spinner → status line → reassurance
- * line → the verified tag, with no CTA. The archetype already IS this recipe;
- * this component exists so the family has a name a designer can point at and a
- * copy contract a host can fill, not to add layout.
+ * `67:3593` ("Just a moment…"), plus the SDK's own "Hold on a sec…" wait that
+ * ID Capture, NFC and the Demo App show (`verifyingIdentity`). ONE screen for
+ * all of them, and for every module loader after them: logo header → Core's
+ * spinner → status line → reassurance line → the verified tag, with no CTA.
+ * The archetype already IS this recipe; this component exists so the family
+ * has a name a designer can point at and a copy contract a host can fill, not
+ * to add layout.
  *
  * Reach for `PrizmaResultScreen` the moment a wait screen needs a button — a
  * loader with a "Cancel" is a result screen, and the missing CTA band here is

package/dist/LoaderScreen.js

@@ -8,11 +8,13 @@ import './ScreenLayout.css';
  * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
  *
  * Figma: `Module Generic Screens` frames `67:2388` ("Processing…") and
- * `67:3593` ("Just a moment…"). ONE screen for both, and for every module
- * loader after them: logo header → Core's spinner → status line → reassurance
- * line → the verified tag, with no CTA. The archetype already IS this recipe;
- * this component exists so the family has a name a designer can point at and a
- * copy contract a host can fill, not to add layout.
+ * `67:3593` ("Just a moment…"), plus the SDK's own "Hold on a sec…" wait that
+ * ID Capture, NFC and the Demo App show (`verifyingIdentity`). ONE screen for
+ * all of them, and for every module loader after them: logo header → Core's
+ * spinner → status line → reassurance line → the verified tag, with no CTA.
+ * The archetype already IS this recipe; this component exists so the family
+ * has a name a designer can point at and a copy contract a host can fill, not
+ * to add layout.
  *
  * Reach for `PrizmaResultScreen` the moment a wait screen needs a button — a
  * loader with a "Cancel" is a result screen, and the missing CTA band here is

package/dist/LoadersStrings.d.ts

@@ -1,10 +1,23 @@
 /**
- * The two frames in the generic file. They are the same screen with different
- * copy — which is the point of the family: the loader is a shape, and the two
- * entries here are examples of filling it, not a closed set. A module that
- * waits for something else supplies its own pair of strings under a new key.
+ * The copy pairs the family records. The loader is a shape, and each entry
+ * here is a way of filling it that more than one module already uses — not a
+ * closed set. A module that waits for something else supplies its own pair of
+ * strings under a new key.
+ *
+ * - `processing`        — frame `67:2388`. "Processing…" over the generic
+ *                         reassurance line. Watchlist for Business, eKYC, eKYB,
+ *                         Email Input and the signatures all draw this title.
+ * - `validating`        — frame `67:3593`. "Just a moment…", the documents
+ *                         are being validated.
+ * - `verifyingIdentity` — the SDK's own `loadingCircle.holdOn` wait: "Hold on
+ *                         a sec…" over "We're verifying your identity". ID
+ *                         Capture, NFC and the Demo App show it between the
+ *                         last capture and the verdict (Camila, 2026-10-09).
+ *
+ * Copy rule for every wait title: the ellipsis is the single `…` character,
+ * never two or three periods, so the same word reads the same in every module.
  */
-export type LoadersVariant = 'processing' | 'validating';
+export type LoadersVariant = 'processing' | 'validating' | 'verifyingIdentity';
 export interface LoadersCopy {
     /** H2 status line ("Processing…"). */
     title: string;

package/dist/OcrReviewErrorScreen.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { OcrReviewStrings } from './OcrReviewStrings';
+import './ScreenLayout.css';
+export interface OcrReviewErrorScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `error` slice. */
+    strings: OcrReviewStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * OCR Review — "Something went wrong", built on Archetype F (GUIDELINES.md
+ * §6-F, `PrizmaResultScreen`). Figma: `OCR Error` (31084:18797), drawn OUTSIDE
+ * the Happy Path section and reached off the "Processed successfully?"
+ * decision's "No" branch — a plain status + title + "Try again" CTA.
+ *
+ * Nav and footer tag are left at the archetype's DEFAULT (shown). The frame
+ * itself draws neither, matching `DigitalIdUploadFileTooLargeScreen.tsx` —
+ * but that screen is the ONE exception in the whole package, not the pattern:
+ * every other error screen (`EkycErrorScreen`, `EkybErrorScreen`,
+ * `EmailInputErrorScreen`, `FormsErrorScreen`, `IdCaptureDocumentErrorScreen`)
+ * keeps both. Hiding them here, with only one CTA to balance the bottom,
+ * pushed the status + title below where every sibling error screen centres it
+ * (Mili, 2026-10-12 — checked against the system's own screens, not re-derived
+ * from the frame).
+ */
+export declare const OcrReviewErrorScreen: React.ForwardRefExoticComponent<OcrReviewErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default OcrReviewErrorScreen;

package/dist/OcrReviewErrorScreen.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * OCR Review — "Something went wrong", built on Archetype F (GUIDELINES.md
+ * §6-F, `PrizmaResultScreen`). Figma: `OCR Error` (31084:18797), drawn OUTSIDE
+ * the Happy Path section and reached off the "Processed successfully?"
+ * decision's "No" branch — a plain status + title + "Try again" CTA.
+ *
+ * Nav and footer tag are left at the archetype's DEFAULT (shown). The frame
+ * itself draws neither, matching `DigitalIdUploadFileTooLargeScreen.tsx` —
+ * but that screen is the ONE exception in the whole package, not the pattern:
+ * every other error screen (`EkycErrorScreen`, `EkybErrorScreen`,
+ * `EmailInputErrorScreen`, `FormsErrorScreen`, `IdCaptureDocumentErrorScreen`)
+ * keeps both. Hiding them here, with only one CTA to balance the bottom,
+ * pushed the status + title below where every sibling error screen centres it
+ * (Mili, 2026-10-12 — checked against the system's own screens, not re-derived
+ * from the frame).
+ */
+export const OcrReviewErrorScreen = forwardRef(({ strings, screenId = 'ocr-review-error', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, status: "error", title: strings.error.title, ctaLabel: strings.error.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+OcrReviewErrorScreen.displayName = 'OcrReviewErrorScreen';
+export default OcrReviewErrorScreen;