@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/dist/ErrorScreensScreen.d.ts

@@ -21,7 +21,7 @@ export interface ErrorScreensScreenProps extends Omit<PrizmaResultScreenProps, '
  * Error screens — the session-level failures, built on the Result archetype
  * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
  *
- * ONE screen for all three generic sections. They draw the identical skeleton —
+ * ONE screen for all four generic sections. They draw the identical skeleton —
  * a centred mark + title + supporting line over a CTA band — and differ only in
  * copy, in which mark leads, and in what the band carries:
  *
@@ -29,8 +29,11 @@ export interface ErrorScreensScreenProps extends Omit<PrizmaResultScreenProps, '
  * - `noConnection`       — Wi-Fi glyph, "Refresh"
  * - `unsupportedBrowser` — canonical negative mark, the session URL above
  *                          "Copy link", with "Continue anyways" under it
+ * - `somethingWentWrong` — canonical negative mark, "Try again" when the copy
+ *                          carries a CTA, "Quit process" under it when it
+ *                          carries a quit label; a dead end when it has neither
  *
- * Chrome is CONSTANT. All three frames are drawn without the logo header and
+ * Chrome is CONSTANT. All the frames are drawn without the logo header and
  * without the verified tag; both are kept here, because the owner rule of
  * 2026-08-18 (#F-30, #F-34) makes the chrome the same on every screen so
  * nothing shifts between states, and every module's connectivity screen must

package/dist/ErrorScreensScreen.js

@@ -9,7 +9,7 @@ import './ScreenLayout.css';
  * Error screens — the session-level failures, built on the Result archetype
  * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
  *
- * ONE screen for all three generic sections. They draw the identical skeleton —
+ * ONE screen for all four generic sections. They draw the identical skeleton —
  * a centred mark + title + supporting line over a CTA band — and differ only in
  * copy, in which mark leads, and in what the band carries:
  *
@@ -17,8 +17,11 @@ import './ScreenLayout.css';
  * - `noConnection`       — Wi-Fi glyph, "Refresh"
  * - `unsupportedBrowser` — canonical negative mark, the session URL above
  *                          "Copy link", with "Continue anyways" under it
+ * - `somethingWentWrong` — canonical negative mark, "Try again" when the copy
+ *                          carries a CTA, "Quit process" under it when it
+ *                          carries a quit label; a dead end when it has neither
  *
- * Chrome is CONSTANT. All three frames are drawn without the logo header and
+ * Chrome is CONSTANT. All the frames are drawn without the logo header and
  * without the verified tag; both are kept here, because the owner rule of
  * 2026-08-18 (#F-30, #F-34) makes the chrome the same on every screen so
  * nothing shifts between states, and every module's connectivity screen must
@@ -49,11 +52,19 @@ import './ScreenLayout.css';
 export const ErrorScreensScreen = forwardRef(({ strings, variant = 'sessionExpired', sessionUrl, copied = false, screenId = `error-screens-${variant}`, overrides, onAction, ...shell }, ref) => {
     const unsupported = variant === 'unsupportedBrowser';
     const noConnection = variant === 'noConnection';
+    const generic = variant === 'somethingWentWrong';
     const copy = unsupported
         ? strings.unsupportedBrowser
         : noConnection
             ? strings.noConnection
-            : strings.sessionExpired;
+            : generic
+                ? strings.somethingWentWrong
+                : strings.sessionExpired;
+    const linkLabel = unsupported
+        ? strings.unsupportedBrowser.continueLabel
+        : generic
+            ? strings.somethingWentWrong.quitLabel
+            : undefined;
     return (_jsx(PrizmaResultScreen, { ref: ref, 
         /* The connectivity screen leads with the Wi-Fi glyph instead of a
            status mark; the other two carry the canonical negative mark. */
@@ -65,7 +76,7 @@ export const ErrorScreensScreen = forwardRef(({ strings, variant = 'sessionExpir
                 .filter(Boolean)
                 .join(' '), children: _jsx(IconWifiOff, { size: "l" }) })) : undefined, progress: unsupported && copied ? (_jsx(PrizmaSnackbar, { state: "success", contentResizing: "fill", children: strings.unsupportedBrowser.copiedLabel })) : undefined, title: copy.title, subtitle: copy.subtitle, disclaimer: unsupported
             ? sessionUrl ?? strings.unsupportedBrowser.urlPlaceholder
-            : undefined, ctaLabel: copy.ctaLabel, linkLabel: unsupported ? strings.unsupportedBrowser.continueLabel : undefined, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+            : undefined, ctaLabel: copy.ctaLabel, linkLabel: linkLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
 });
 ErrorScreensScreen.displayName = 'ErrorScreensScreen';
 export default ErrorScreensScreen;

package/dist/ErrorScreensStrings.d.ts

@@ -1,10 +1,11 @@
 /**
- * The three sections.
+ * The four sections.
  * - `sessionExpired`     — the link is dead; the user must go back to the provider
  * - `noConnection`       — the network went away; retry when it returns
  * - `unsupportedBrowser` — the SDK cannot run here; copy the link and move
+ * - `somethingWentWrong` — the generic failure; try again, or nothing, or quit
  */
-export type ErrorScreensVariant = 'sessionExpired' | 'noConnection' | 'unsupportedBrowser';
+export type ErrorScreensVariant = 'sessionExpired' | 'noConnection' | 'unsupportedBrowser' | 'somethingWentWrong';
 export interface ErrorScreensCopy {
     title: string;
     subtitle?: string;
@@ -28,4 +29,18 @@ export interface ErrorScreensStrings {
         /** Snackbar copy after the link is copied — the frame's second state. */
         copiedLabel: string;
     };
+    /**
+     * The generic failure. Three ways the modules fill it, all the same screen:
+     * `ctaLabel` "Try again" (eKYC, eKYB, Forms, Email Input);
+     * no `ctaLabel`, a dead end (Certificate Issuance, Qualified Signature);
+     * `ctaLabel` plus `quitLabel`, the way out under the retry (Video Selfie).
+     * Phone Input's `unknown` fills it with "Continue" instead, because a retry
+     * may not be possible there (owner, 2026-10-09) — the CTA is the module's
+     * call; the shape and the title are what the family fixes.
+     * The title never carries an ellipsis — a failure is not in progress.
+     */
+    somethingWentWrong: ErrorScreensCopy & {
+        /** Tertiary link under the CTA — "Quit process". Omit for no way out. */
+        quitLabel?: string;
+    };
 }

package/dist/ErrorScreensStrings.js

@@ -6,19 +6,27 @@
 //   214:3357 Geolocation.error.noNetwork      → `noConnection`
 //   240:154  Error screen - Unsupported browser → `unsupportedBrowser`
 //
-// The three failures that belong to the SESSION rather than to any module: the
-// link has expired, the network went away, the browser cannot run the SDK.
-// Every module can hit all three, which is why they are drawn once in the
-// generic file — a user who sees three different "no internet" screens in one
-// journey reads them as three different products.
+// plus the one failure every module draws for itself and the file never did:
+//
+//   —        <module>.error "Something went wrong" → `somethingWentWrong`
+//
+// The failures that belong to the SESSION rather than to any module: the link
+// has expired, the network went away, the browser cannot run the SDK, the
+// server said no for a reason the user cannot act on. Every module can hit all
+// four, which is why they are recorded once in the generic family — a user who
+// sees three different "no internet" screens in one journey reads them as three
+// different products.
 //
 // `noConnection` is deliberately the same screen every module already ships
 // (`FaceCaptureNoConnectionScreen`, `IdCaptureNoConnectionScreen`,
-// `DocumentCaptureNoConnectionScreen`, `GeolocationErrorScreen`'s `noNetwork`).
-// The generic entry is where the shape is DOCUMENTED; the module copies stay
-// put until someone retires them deliberately, because deleting four exported
-// components to save one screen is a breaking change for every host that
-// imports them. Flagged for the owner.
+// `DocumentCaptureNoConnectionScreen`, `GeolocationErrorScreen`'s `noNetwork`,
+// Phone Input's and Video Selfie's `noConnection`). `somethingWentWrong` is the
+// same screen eKYC, eKYB, Forms, Email Input, Phone Input, Certificate
+// Issuance, both signatures and Video Selfie already ship. The generic entry is
+// where the shape and the copy are DOCUMENTED; the module copies stay put until
+// someone retires them deliberately, because deleting exported components to
+// save one screen is a breaking change for every host that imports them.
+// Flagged for the owner (DEVIATIONS #GEN-7, #GEN-18).
 //
 // The family has no flow of its own: each of these is entered from wherever the
 // session broke and exits to a retry or to nothing. Core Lab lists it as a

package/dist/FaceCaptureCapturingScreen.d.ts

@@ -9,6 +9,19 @@ export interface FaceCaptureCapturingScreenProps extends Omit<PrizmaCaptureScree
     state?: FaceCaptureCapturingState;
     /** Live camera feed (<video>) or sample still (<img>) for the ring window. */
     camera?: ReactNode;
+    /**
+     * Raise the "Need more time?" offer over the feed — the accessibility
+     * notification shown 20 s before auto capture falls back to manual.
+     *
+     * It is a MODIFIER of whatever capturing state is already on screen, not a
+     * sixteenth state: the timer runs underneath the guidance, so the user can be
+     * told to move closer and offered more time in the same frame. Needs
+     * `strings.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.
+     */
+    extendTime?: boolean;
+    /** Tapping "Extend auto-capture". The host resets its own fallback timer. */
+    onExtendTime?: () => void;
 }
 /**
  * Face Capture — auto-capture stage (Archetype B, GUIDELINES.md §6-B).
@@ -27,6 +40,56 @@ export interface FaceCaptureCapturingScreenProps extends Omit<PrizmaCaptureScree
  *
  * The archetype adds no offsets of its own — the component owns that spacing
  * (same deviation row).
+ *
+ * ── The "Need more time?" offer (`extendTime`) ──────────────────────────────
+ *
+ * Auto capture gives up after a configured timeout and drops the user into
+ * manual capture. Someone who is struggling — a tremor, low vision, bad light,
+ * an unfamiliar phone — gets moved off the EASIER path precisely because they
+ * were slow, which is backwards. So 20 s before the switch, the screen offers
+ * to stay on auto. A client turns it on per flow from the dashboard; with it
+ * off, nothing about today's capture changes.
+ *
+ * NOT a nicety — 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).
+ * Two things follow that the visuals cannot settle: the notice must be able to
+ * come back ten times, and it must be ANNOUNCED early enough to be acted on.
+ *
+ * ── Live-region politeness: `role="alert"`, not the default ────────────────
+ *
+ * SETTLED 2026-10-05 (Camila). The Snackbar computes `role="status"` (polite)
+ * for every state but error, and this instance overrides it to `alert`.
+ *
+ * A polite region is allowed to wait until the screen reader finishes whatever
+ * it is already saying — and on this screen it always IS saying something: the
+ * capture instruction under the ring changes as the face moves, so the queue
+ * is rarely empty. The offer has a 20 s life. Queued behind two or three
+ * guidance announcements it can be read out after it has already expired,
+ * which turns the one affordance a struggling user needs into an
+ * announcement that the limit has passed.
+ *
+ * That is not a polish issue, it is the conformance failing: WCAG 2.2.1's
+ * Extend clause requires the warning to be given in time to ACT on it. An
+ * announcement the user cannot act on does not satisfy it, however correct the
+ * visuals. `alert` is assertive, so it interrupts the guidance and is heard
+ * while the 20 s is still running.
+ *
+ * The usual objection to `alert` is that interrupting is rude. It applies to
+ * notices that can wait; this one cannot, and it is strictly better to
+ * interrupt "Move closer" than to let the window close in silence. It is also
+ * why the offer must not be re-raised on a timer — each new `alert` interrupts
+ * again. It appears once per countdown, and WCAG allows that up to ten times.
+ *
+ * ⚠ NEW, not yet authored in Core. Two parts of this notice have no Figma
+ * variant behind them and are drawn from the exploration, not from the SoT:
+ *   • the bold title line — the Snackbar has no `title` slot, so it rides
+ *     inside `children` as a <strong>. Core to decide whether to adopt a real
+ *     slot, at which point this moves onto it.
+ *   • the state — it is `neutral` (blue surface, ⓘ glyph), Camila's call
+ *     2026-10-05. `warning` would signal attention more sharply but turns the
+ *     surface amber, and the exploration's open question is whether amber
+ *     reads as "hurry up" to someone who was already struggling. The icon
+ *     cannot be chosen independently: `ICON_BY_STATE` binds it to `state`.
  */
 export declare const FaceCaptureCapturingScreen: React.ForwardRefExoticComponent<FaceCaptureCapturingScreenProps & React.RefAttributes<HTMLDivElement>>;
 export default FaceCaptureCapturingScreen;

package/dist/FaceCaptureCapturingScreen.js

@@ -1,6 +1,7 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
 import { PrizmaCaptureScreen } from './CaptureScreen';
 import './FaceCaptureLayout.css';
 /**
@@ -47,7 +48,66 @@ const SELFIE_STATE = {
  *
  * The archetype adds no offsets of its own — the component owns that spacing
  * (same deviation row).
+ *
+ * ── The "Need more time?" offer (`extendTime`) ──────────────────────────────
+ *
+ * Auto capture gives up after a configured timeout and drops the user into
+ * manual capture. Someone who is struggling — a tremor, low vision, bad light,
+ * an unfamiliar phone — gets moved off the EASIER path precisely because they
+ * were slow, which is backwards. So 20 s before the switch, the screen offers
+ * to stay on auto. A client turns it on per flow from the dashboard; with it
+ * off, nothing about today's capture changes.
+ *
+ * NOT a nicety — 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).
+ * Two things follow that the visuals cannot settle: the notice must be able to
+ * come back ten times, and it must be ANNOUNCED early enough to be acted on.
+ *
+ * ── Live-region politeness: `role="alert"`, not the default ────────────────
+ *
+ * SETTLED 2026-10-05 (Camila). The Snackbar computes `role="status"` (polite)
+ * for every state but error, and this instance overrides it to `alert`.
+ *
+ * A polite region is allowed to wait until the screen reader finishes whatever
+ * it is already saying — and on this screen it always IS saying something: the
+ * capture instruction under the ring changes as the face moves, so the queue
+ * is rarely empty. The offer has a 20 s life. Queued behind two or three
+ * guidance announcements it can be read out after it has already expired,
+ * which turns the one affordance a struggling user needs into an
+ * announcement that the limit has passed.
+ *
+ * That is not a polish issue, it is the conformance failing: WCAG 2.2.1's
+ * Extend clause requires the warning to be given in time to ACT on it. An
+ * announcement the user cannot act on does not satisfy it, however correct the
+ * visuals. `alert` is assertive, so it interrupts the guidance and is heard
+ * while the 20 s is still running.
+ *
+ * The usual objection to `alert` is that interrupting is rude. It applies to
+ * notices that can wait; this one cannot, and it is strictly better to
+ * interrupt "Move closer" than to let the window close in silence. It is also
+ * why the offer must not be re-raised on a timer — each new `alert` interrupts
+ * again. It appears once per countdown, and WCAG allows that up to ten times.
+ *
+ * ⚠ NEW, not yet authored in Core. Two parts of this notice have no Figma
+ * variant behind them and are drawn from the exploration, not from the SoT:
+ *   • the bold title line — the Snackbar has no `title` slot, so it rides
+ *     inside `children` as a <strong>. Core to decide whether to adopt a real
+ *     slot, at which point this moves onto it.
+ *   • the state — it is `neutral` (blue surface, ⓘ glyph), Camila's call
+ *     2026-10-05. `warning` would signal attention more sharply but turns the
+ *     surface amber, and the exploration's open question is whether amber
+ *     reads as "hurry up" to someone who was already struggling. The icon
+ *     cannot be chosen independently: `ICON_BY_STATE` binds it to `state`.
  */
-export const FaceCaptureCapturingScreen = forwardRef(({ strings, state = 'initiating', camera, screenId = 'face-capture-capturing', className, ...rest }, ref) => (_jsx(PrizmaCaptureScreen, { ref: ref, className: className, state: SELFIE_STATE[state], camera: camera, feedbackText: strings.capturing[state], verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, ...rest })));
+export const FaceCaptureCapturingScreen = forwardRef(({ strings, state = 'initiating', camera, extendTime, onExtendTime, screenId = 'face-capture-capturing', className, ...rest }, ref) => {
+    const offer = strings.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 notice = extendTime && offer ? (_jsxs(PrizmaSnackbar, { state: "neutral", isMultiline: true, 
+        // Assertive on purpose — see the live-region note in this file's
+        // header. The component default here would be `status`.
+        role: "alert", linkLabel: offer.linkLabel, onLinkClick: onExtendTime, children: [_jsx("strong", { children: offer.title }), _jsx("br", {}), offer.description] })) : undefined;
+    return (_jsx(PrizmaCaptureScreen, { ref: ref, className: className, state: SELFIE_STATE[state], camera: camera, feedbackText: strings.capturing[state], notice: notice, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, ...rest }));
+});
 FaceCaptureCapturingScreen.displayName = 'FaceCaptureCapturingScreen';
 export default FaceCaptureCapturingScreen;

package/dist/FaceCaptureLayout.css

@@ -12,7 +12,72 @@
  * inherit all three as correct defaults.
  */
 
-/* Nothing module-specific is left: the non-status glyph slot this file used to
- * own (`.face-capture-glyph`) was the third byte-identical copy of one pattern,
- * so it moved to `ScreenLayout.css` as `__glyph` — DEVIATIONS #DC-29, closed.
- * The file is kept as the module's landing place for future additions. */
+/* The non-status glyph slot this file used to own (`.face-capture-glyph`) was
+ * the third byte-identical copy of one pattern, so it moved to
+ * `ScreenLayout.css` as `__glyph` — DEVIATIONS #DC-29, closed. */
+
+/* ── Short panels: the capture stack moves up, the ring never changes size ───
+ * `PrizmaSelfieCapture` is a fixed stack by design: Spacing/40, the 335 stage,
+ * Spacing/32, the instruction, and in manual mode another Spacing/32 and the 64
+ * shutter, then Spacing/40 — 583 tall on the manual screen, every number
+ * measured off the module Figma (DEVIATIONS #12). Under the nav and above the
+ * footer's reserve a closed iPhone Duo leaves 513 (678 − 103 − 62, measured
+ * 2026-10-14), so the manual stack ran 70 past its column and the shutter
+ * landed on the verified tag (shutter 582–646, tag 606–636). The auto-capture
+ * screens are 94 shorter and fit the Duo as authored.
+ *
+ * The RING is not what gives ground. Camila, 2026-10-14: the face frame is the
+ * same size on every screen, because the user has to see their face; if it
+ * ever had to shrink it would shrink on every capture screen together, and we
+ * avoid that. So the stack moves UP instead: the root's Spacing/40 above and
+ * below go (the ring sits flush under the nav row, 40 higher than on the
+ * reference) and the two Spacing/32 gaps become Spacing/16, which on the
+ * manual screen is 112 back — 103 + 334 + 16 + 41 + 16 + 64 = 574, 32 of air
+ * above the tag. Instruction and shutter keep their height, the ring its 334.
+ *
+ * EVERY capture screen takes it, not only the manual one that needed it
+ * (Camila, 2026-10-14: "put all face frames at the height that the manual
+ * capture one is, so we don't need a jump there"). The ring not moving between
+ * screens is the rule Video Selfie's #VS-24 was written for: a capture window
+ * that jumps as the step advances reads as a glitch. So on a short panel the
+ * whole module's ring is at 103, auto, manual, loading and verdict alike.
+ * Outside the query not one declaration exists, so the reference is
+ * byte-identical. DEVIATIONS #20. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture {
+    padding-block: 0;
+    gap: var(--prizma-spacing-16);
+  }
+}
+
+/* ── Big panels: the ring grows to the column and the stack moves down ───────
+ * The mirror of the block above, and the capture counterpart of the tutorial's
+ * #F-36. On the 768 × 1024 iPad the column widens to 468 but the stack kept
+ * its 335 ring flush under the nav, so the ring read small (335 in a 420
+ * content column, 85px of air either side) and high (its centre at 30% of the
+ * panel, where the 390 phone has it at 37%), with 300px of empty column under
+ * the instruction (Camila, 2026-10-19: "the face frame too small and way up
+ * the screen", on the tablet flow, grid and screen view alike).
+ *
+ * Two owner decisions, 2026-10-20. The RING GROWS: the 2026-10-14 rule that
+ * the ring never changes size was written so it would not SHRINK on a short
+ * panel, and on a panel this big the person's face is still what the screen is
+ * about, so the stage takes the content column's full measure (420 inside the
+ * 468 wide column), the way #F-36 lets the tutorial art grow. Every state
+ * grows together (auto, manual, loading, verdict) so the ring still never
+ * jumps between steps. The STACK MOVES DOWN BY A FIXED OFFSET, not to the
+ * centre: the stack under the ring is a different height on every screen
+ * (the manual one carries the shutter), so centring THAT would move the ring
+ * between steps, the bug #VS-24 exists for; the same reason Video Selfie's
+ * #VS-32 took an offset. Spacing/40 + Spacing/32 above the ring puts its
+ * centre at 102 + 72 + 210 = 384, 37.5% of 1024, the reference's own
+ * proportion (measured 2026-10-20); the manual screen's shutter ends at 765
+ * with the verified tag at 978. Both axes gate it for #F-36's reasons: `min-height: 845px` keeps the
+ * 844 reference and every short panel byte-identical, `min-width: 468px` keeps
+ * it off phones and foldables where the column stays 390. DEVIATIONS #21. */
+@container pcs-screen ((min-height: 845px) and (min-width: 468px)) {
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture {
+    max-width: 100%;
+    padding-top: calc(var(--prizma-spacing-40) + var(--prizma-spacing-32));
+  }
+}

package/dist/FaceCaptureStrings.d.ts

@@ -23,6 +23,29 @@ export interface FaceCaptureStrings {
     /** faceCapture.capturing.* — the H2 instruction under the ring, per state.
      *  `initiating` has no instruction in the design; omit it. */
     capturing: Partial<Record<FaceCaptureCapturingState, string>>;
+    /**
+     * faceCapture.capturing.extendTime — the accessibility offer that rides any
+     * capturing state 20 s before auto capture falls back to manual.
+     *
+     * It exists for WCAG 2.2.1 Timing Adjustable, satisfied through the *Extend*
+     * clause: warn before the limit expires, give the user at least 20 s to
+     * extend with a simple action, and let them extend at least ten times. The
+     * 20 s is that threshold, not a chosen duration — which is why `description`
+     * is a whole string and not a number the screen formats: ten locales write
+     * that sentence ten different ways, and the count has to live inside it.
+     *
+     * Shown only when accessibility mode is ON for the flow (a per-flow
+     * dashboard setting). With it off, nothing about today's capture changes.
+     * Optional for that reason: a host that never turns it on never writes it.
+     */
+    extendTime?: {
+        /** Bold first line — "Need more time?" */
+        title: string;
+        /** "Manual capture starts in 20 s" — carries the count, see above. */
+        description: string;
+        /** The action that keeps the user on auto — "Extend auto-capture". */
+        linkLabel: string;
+    };
     /** faceCapture.manualCapture.default */
     manualCapture: {
         /** "Align your face within the silhouette and press the button to capture" */

package/dist/FaceMatchComparisonScreen.d.ts

@@ -8,9 +8,9 @@ import './FaceMatchLayout.css';
  *  contract as `camera` on the capture screens) — Face Match never captures. */
 export type FaceMatchPhotoRole = 'selfie' | 'id' | 'nfc' | 'secondId';
 /** Host-supplied portraits, one per role the chosen variant asks for. A role
- *  left out renders the empty state: a Brand/50 disc, marked with
- *  `.face-match-cluster__photo--empty`. Interim treatment (2026-09-25) while
- *  the designed no-photo state is drawn; see FaceMatchLayout.css. */
+ *  left out renders the empty state (capture missing or not retrievable): a
+ *  grey Surface/Neutral/100 disc under its usual label tooltip, marked with
+ *  `.face-match-cluster__photo--empty`. See FaceMatchLayout.css. */
 export type FaceMatchComparisonPhotos = Partial<Record<FaceMatchPhotoRole, ReactNode>>;
 /**
  * Where the comparison is in its own choreography — the module MOVING rather

package/dist/FaceMatchLayout.css

@@ -57,8 +57,14 @@
 
   /* The disc's diameter, named once. `--matching`'s rosette and `--animated`'s
    * convergence both have to know it, and a second literal is a second thing to
-   * forget. Still a design literal, still DEVIATIONS #FM-22 — just not repeated. */
-  --face-match-photo: 160px;
+   * forget. Still a design literal, still DEVIATIONS #FM-22 — just not repeated.
+   *
+   * 160 at most, and smaller when two discs and their gap do not fit the
+   * content column: on a 320 phone the column is 272, so each disc takes
+   * (272 − 16) / 2 = 128 (Camila, 2026-09-28). `100cqi` is the screen shell's
+   * width (ScreenShell.css, `container-type: size`), less its two Spacing/24
+   * gutters. At 390 and up this resolves to 160, unchanged. */
+  --face-match-photo: min(160px, calc((100cqi - 2 * var(--prizma-spacing-24) - var(--prizma-spacing-16)) / 2));
   /* Half the distance between two neighbouring discs: what one of them has to
    * travel to reach the pair's centre line. */
   --face-match-half-step: calc((var(--face-match-photo, 160px) + var(--prizma-spacing-16)) / 2);
@@ -118,16 +124,16 @@
   background: var(--prizma-surface-neutral-100);
 }
 
-/* No photo supplied for this role.
+/* No photo for this role: the capture was never taken, or could not be
+ * retrieved.
  *
- * INTERIM (2026-09-25, owner call): colour is the whole state for now, so the
- * slot reads as a portrait that belongs here rather than an undesigned hole.
- * Brand/50 is the same disc PrizmaIllustrationAvatar sits on, which is where
- * the designed state is most likely to land. The real treatment (bust,
- * outline, or copy) replaces this rule; the modifier and its class name stay,
- * so swapping it in is a one-rule change and nothing downstream moves. */
+ * Owner call 2026-09-28 (replaces the 2026-09-25 Brand/50 interim): a plain
+ * grey disc, Surface/Neutral/100, the same neutral Core puts behind an image
+ * that is not there yet (CaptureDigitalId.css, list.css). The callout above it
+ * still renders, so the tooltip names which capture is missing. The modifier
+ * stays a named state so a richer treatment is still a one-rule change. */
 .face-match-cluster__photo--empty {
-  background: var(--prizma-surface-brand-50);
+  background: var(--prizma-surface-neutral-100);
 }
 
 .face-match-cluster__photo > img,
@@ -153,11 +159,14 @@
 }
 
 .face-match-cluster--matching .face-match-cluster__face + .face-match-cluster__face {
-  margin-left: -44px; /* hardcoded — Figma converged overlap; no token (verified absent) */
+  /* Figma converged overlap, 44 on the 160 disc; no token (verified absent).
+   * Kept as that ratio so the rosette holds its shape on a smaller disc. */
+  margin-left: calc(var(--face-match-photo, 160px) * -44 / 160);
 }
 
 .face-match-cluster--matching .face-match-cluster__row + .face-match-cluster__row {
-  margin-top: calc(-2 * var(--prizma-spacing-40));
+  /* Half a disc: 80 on the 160 disc (`2 × Spacing/40`), proportional below it. */
+  margin-top: calc(var(--face-match-photo, 160px) / -2);
 }
 
 /* ── The comparison, moving (`phase` on FaceMatchComparisonScreen) ───────────

package/dist/FormScreen.css

@@ -29,6 +29,20 @@
   padding-top: var(--pfs-fields-offset, var(--prizma-spacing-32));
 }
 
+/* ── Field stack pinned to the CTA band ──────────────────────────────────────
+ * `fieldsAlign="end"` on `PrizmaFormScreen`. The stack keeps its `flex: 1`
+ * column and simply packs its rows at the bottom, so the space between the
+ * title block and the first row is what is left over rather than a value
+ * anybody declares. The `margin-bottom` is the frame's own Spacing/16 between
+ * the card and the Button group (`biometricConsent.empty`, 2001:16361 — the
+ * CONTENT column's gap), the same value the scrolling stack uses for the same
+ * seam, so the two shapes agree on how far a row sits from Continue. Biometric
+ * Consent is the first consumer. DEVIATIONS #BC-1. */
+.prizma-form-screen__fields--end {
+  justify-content: flex-end;
+  margin-bottom: var(--prizma-spacing-16);
+}
+
 /* ── Scrolling field stack ───────────────────────────────────────────────────
  * Screens are authored at 390×844 and never reflow (DEVIATIONS #17), but some
  * Form sections draw a middle column taller than the frame and let it pan:
@@ -129,6 +143,22 @@
     flex: none;
     width: calc(50% - var(--prizma-spacing-16) / 2);
     min-width: 0;
+    position: relative;
+  }
+  /* An error or helper line under ONE field of a pair made that field taller,
+   * and the bottom alignment above lifted its input above its neighbour's
+   * (Elena, 2026-10-02: "estos inputs tienen que estar alineados"). The line
+   * hangs below its input instead, out of the alignment, and the row reserves
+   * its height so the next row does not ride over it. */
+  .prizma-form-screen--responsive .prizma-form-screen__row > * > [class$="__error"],
+  .prizma-form-screen--responsive .prizma-form-screen__row > * > [class$="__helper"] {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: var(--prizma-spacing-8);
+  }
+  .prizma-form-screen--responsive .prizma-form-screen__row:has(> * > [class$="__error"], > * > [class$="__helper"]) {
+    padding-bottom: calc(var(--prizma-spacing-8) + var(--prizma-body-m-regular-line-height));
   }
 
   /* Continue and Back share a row: Back on the left, Continue on the right, as

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/FormsLongFormScreen.d.ts

@@ -65,6 +65,14 @@ export interface FormsLongFormScreenProps extends Omit<PrizmaFormScreenProps, 't
  * into the CTA band — the half a module stylesheet kept losing. It is a no-op
  * on the short `name` preset, whose rows never overflow. DEVIATIONS #DSC-2,
  * restating #CURP-1.
+ *
+ * `emptyError` is the GUIDELINES §6-E empty-submit rule (Elena 2026-09-30):
+ * the user pressed the CTA with the form still empty. Every REQUIRED row
+ * renders empty, with no placeholder, in Core's own error state carrying
+ * `strings.requiredError`; optional and unmarked rows stay on their resting
+ * surface with no error. The CTA greys there and ONLY there: the resting
+ * `default` keeps it enabled, so the user can press it to reach the error —
+ * the `FormsFieldScreen` `emptyError` precedent applied to a stack.
  */
 export declare const FormsLongFormScreen: React.ForwardRefExoticComponent<FormsLongFormScreenProps & React.RefAttributes<HTMLDivElement>>;
 export default FormsLongFormScreen;