@incodetech/prizma-core-screens 0.2.7 → 0.2.14

package/dist/ReviewScreen.d.ts

@@ -3,18 +3,24 @@ import { type PrizmaScreenShellProps } from './ScreenShell';
 import type { PrizmaScreenActionHandler, PrizmaScreenChromeProps, PrizmaScreenOverrides } from './types';
 import './ScreenLayout.css';
 /**
- * The three stages every captured-media review section shares. Identical
- * skeleton — only the header block (Title vs loading bar), the media's own
- * state and the presence of the CTA row change. Named to match the modules'
- * own stage axis (`DocumentCaptureConfirmStage`, Video Selfie's review step).
+ * The stages a captured-media review section shares. Identical skeleton —
+ * only the header block (Title vs loading bar), the media's own state and
+ * the presence of the CTA row change. `review`/`analyzing`/`success` name the
+ * modules' own confirm-flow axis (`DocumentCaptureConfirmStage`, Video
+ * Selfie's review step); `error` is Digital ID Upload-only so far — its
+ * verdict screen shows the SAME rejected-file media the confirm flow does
+ * (`PrizmaCaptureDigitalId state="error"`), drawn with the identical
+ * header/media/CTA skeleton as `analyzing`/`success` (`Upload Digital ID`
+ * file wxFsHRvllern4VnjRqM4JO, node 25874:11957) — not archetype F, whose
+ * verdict screens carry no media stage of their own.
  */
-export type PrizmaReviewStage = 'review' | 'analyzing' | 'success';
+export type PrizmaReviewStage = 'review' | 'analyzing' | 'success' | 'error';
 export interface PrizmaReviewScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'>, Pick<PrizmaScreenChromeProps, 'showHeader' | 'showFooter'> {
     /** Which review stage to render. Default `review`. */
     stage?: PrizmaReviewStage;
     /** H2 review/base title ("Review your document"). */
     title: string;
-    /** Supporting copy under the title — drawn on `review` only (Figma). */
+    /** Supporting copy under the title — drawn on `review`/`error` (Figma). */
     subtitle?: string;
     /** Title shown on `success`; falls back to `title` when omitted. */
     successTitle?: string;
@@ -28,6 +34,25 @@ export interface PrizmaReviewScreenProps extends Omit<PrizmaScreenShellProps, 'd
     analyzingState?: 'analyzing' | 'uploading';
     /** Loading-bar progress on `analyzing`, 0–100. */
     progress?: number;
+    /**
+     * Only takes effect while the nav is hidden (`showHeader=false` — every
+     * current no-nav stage is `analyzing`/`success`). Default `false` —
+     * Document Capture's verified layout (DEVIATIONS #DC-22/24): the header
+     * sits where a title normally would, Spacing/32 above the stage, and
+     * whatever follows (the stage, then an optional band) centres or flows
+     * independently.
+     *
+     * `true`: the header and the media centre as ONE group — leftover space
+     * splits evenly above the header and below the trailing content (the CTA
+     * band, or nothing) — because with no nav the header has nothing to anchor
+     * to. Digital ID Upload's Figma draws BOTH its no-nav stages this way: a
+     * top flex-1 region bottom-anchoring the header, the fixed media, then a
+     * bottom flex-1 region (empty on `analyzing`, bottom-anchoring the CTA on
+     * `success`) — `Upload Digital ID` file wxFsHRvllern4VnjRqM4JO, nodes
+     * 25351:14726 (analyzing) / 25351:14727 (success). `review` always shows
+     * its own nav, so this is a no-op there regardless of the value passed.
+     */
+    centeredWhenNoNav?: boolean;
     /**
      * The flexing captured-media slot: a `PrizmaIdCapture` still, an uploaded-file
      * preview card, a portrait review. Kept a slot so one template serves every
@@ -42,7 +67,7 @@ export interface PrizmaReviewScreenProps extends Omit<PrizmaScreenShellProps, 'd
      * offset and footer all come from ScreenLayout.css regardless.
      */
     stageClassName?: string;
-    /** Primary CTA — the forward action. Drawn on `review` and `success`. */
+    /** Primary CTA — the forward action. Drawn on `review`, `success`, `error`. */
     primaryLabel: string;
     /** Secondary CTA ("Replace" / "Retake") — drawn on `review` only. */
     secondaryLabel?: string;
@@ -57,11 +82,12 @@ export interface PrizmaReviewScreenProps extends Omit<PrizmaScreenShellProps, 'd
  * Archetype H — Review (captured-media confirmation).
  *
  * The "header → flexing captured-media stage → CTA band → tag" recipe, with a
- * `review → analyzing → success` stage axis. It exists because two Document
- * Capture screens hand-built it independently (`DocumentCaptureConfirmImage`,
- * `DocumentCaptureConfirmUpload`) with their own three-band arithmetic in
- * `DocumentCaptureLayout.css`, and Video Selfie's review step needs the same
- * skeleton — a captured still under a title, confirmed or replaced.
+ * `review → analyzing → success` stage axis (+ `error`, see `PrizmaReviewStage`).
+ * It exists because two Document Capture screens hand-built it independently
+ * (`DocumentCaptureConfirmImage`, `DocumentCaptureConfirmUpload`) with their
+ * own three-band arithmetic in `DocumentCaptureLayout.css`, and Video Selfie's
+ * review step needs the same skeleton — a captured still under a title,
+ * confirmed or replaced.
  *
  * It is NOT archetype F (Result): F centres a small status + CTA block, while a
  * review TOP-aligns the header over a large media stage that flexes to fill the

package/dist/ReviewScreen.js

@@ -12,11 +12,12 @@ import './ScreenLayout.css';
  * Archetype H — Review (captured-media confirmation).
  *
  * The "header → flexing captured-media stage → CTA band → tag" recipe, with a
- * `review → analyzing → success` stage axis. It exists because two Document
- * Capture screens hand-built it independently (`DocumentCaptureConfirmImage`,
- * `DocumentCaptureConfirmUpload`) with their own three-band arithmetic in
- * `DocumentCaptureLayout.css`, and Video Selfie's review step needs the same
- * skeleton — a captured still under a title, confirmed or replaced.
+ * `review → analyzing → success` stage axis (+ `error`, see `PrizmaReviewStage`).
+ * It exists because two Document Capture screens hand-built it independently
+ * (`DocumentCaptureConfirmImage`, `DocumentCaptureConfirmUpload`) with their
+ * own three-band arithmetic in `DocumentCaptureLayout.css`, and Video Selfie's
+ * review step needs the same skeleton — a captured still under a title,
+ * confirmed or replaced.
  *
  * It is NOT archetype F (Result): F centres a small status + CTA block, while a
  * review TOP-aligns the header over a large media stage that flexes to fill the
@@ -32,25 +33,57 @@ import './ScreenLayout.css';
  * to the bottom itself. Every offset lives in ScreenLayout.css; this file
  * declares none of its own.
  */
-export const PrizmaReviewScreen = forwardRef(({ stage = 'review', title, subtitle, successTitle, analyzingLabel, analyzingState = 'analyzing', progress = 0, children, stageClassName, primaryLabel, secondaryLabel, verifiedLabel, navLabel, showHeader, showFooter = true, screenId, overrides, onAction, ...shell }, ref) => {
+export const PrizmaReviewScreen = forwardRef(({ stage = 'review', title, subtitle, successTitle, analyzingLabel, analyzingState = 'analyzing', progress = 0, centeredWhenNoNav = false, children, stageClassName, primaryLabel, secondaryLabel, verifiedLabel, navLabel, showHeader, showFooter = true, screenId, overrides, onAction, ...shell }, ref) => {
     // Review screens are the capture family: no logo unless the client opts in
     // by supplying one (types.ts chrome contract). `showHeader` still wins when
     // set explicitly.
     const withNav = showHeader ?? Boolean(overrides?.logo);
     const showSecondary = stage === 'review' && Boolean(secondaryLabel);
     const showBand = stage !== 'analyzing' && Boolean(primaryLabel || secondaryLabel);
+    const centeredGroup = !withNav && centeredWhenNoNav;
     return (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [withNav ? (_jsx(PrizmaScreenNav, { logo: overrides?.logo, navLabel: navLabel })) : null, _jsxs("div", { className: [
                     'prizma-screen-layout__content',
                     withNav ? '' : 'prizma-screen-layout__content--no-nav',
                 ]
                     .filter(Boolean)
-                    .join(' '), children: [_jsx("div", { className: "prizma-screen-layout__review-header", children: stage === 'analyzing' ? (_jsx("div", { className: "prizma-screen-layout__review-loading", children: _jsx(PrizmaLoadingBar, { state: analyzingState, progress: progress, title: analyzingLabel }) })) : (_jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: stage === 'success' ? successTitle ?? title : title, showSubtitle: stage === 'review' && Boolean(subtitle), subtitle: subtitle, icon: stage === 'success' ? { type: 'status', status: 'success' } : undefined })) }), _jsx("div", { className: [
+                    .join(' '), children: [_jsx("div", { className: [
+                            'prizma-screen-layout__review-header',
+                            centeredGroup ? 'prizma-screen-layout__review-header--centered' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), children: stage === 'analyzing' ? (_jsx("div", { className: "prizma-screen-layout__review-loading", children: _jsx(PrizmaLoadingBar, { state: analyzingState, progress: progress, title: analyzingLabel }) })) : (_jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: stage === 'success' ? successTitle ?? title : title, showSubtitle: (stage === 'review' || stage === 'error') && Boolean(subtitle), subtitle: subtitle, icon: stage === 'success'
+                                ? { type: 'status', status: 'success' }
+                                : stage === 'error'
+                                    ? { type: 'status', status: 'error' }
+                                    : undefined })) }), _jsx("div", { className: [
                             'prizma-screen-layout__review-stage',
                             stage === 'analyzing' ? 'prizma-screen-layout__review-stage--flush' : '',
+                            centeredGroup ? 'prizma-screen-layout__review-stage--centered-group' : '',
                             stageClassName ?? '',
                         ]
                             .filter(Boolean)
-                            .join(' '), children: children }), showBand ? (_jsx("div", { className: "prizma-screen-layout__band prizma-screen-layout__band--review", children: _jsx(PrizmaButtonGroup, { orientation: "horizontal-v1", showSecondary: showSecondary, primaryLabel: primaryLabel, onPrimaryClick: () => onAction?.({ type: 'cta', screenId }), secondaryLabel: secondaryLabel, onSecondaryClick: () => onAction?.({ type: 'secondary', screenId }) }) })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] }));
+                            .join(' '), children: children }), (() => {
+                        const band = showBand ? (_jsx("div", { className: [
+                                'prizma-screen-layout__band',
+                                'prizma-screen-layout__band--review',
+                                // No footer tag to reserve the bottom space (§6, owner rule
+                                // 2026-08-18: header/footer are independently controlled) —
+                                // fall back to the band's own Spacing/24, same as any other
+                                // screen that "genuinely carries no tag" (ScreenLayout.css).
+                                // Otherwise the CTA sits flush against the shell edge.
+                                !showFooter ? 'prizma-screen-layout__band--bare' : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' '), children: _jsx(PrizmaButtonGroup, { orientation: "horizontal-v1", showSecondary: showSecondary, primaryLabel: primaryLabel, onPrimaryClick: () => onAction?.({ type: 'cta', screenId }), secondaryLabel: secondaryLabel, onSecondaryClick: () => onAction?.({ type: 'secondary', screenId }) }) })) : null;
+                        // Balances the header's own flex-1 (`--centered`) so the header +
+                        // media sit as one group centred between equal top/bottom space,
+                        // instead of the media alone centring below a pinned header. The
+                        // band (if any — `success`) bottom-anchors inside this same
+                        // trailing region instead of just following the stage, matching
+                        // Figma's own bottom flex-1 container; `analyzing` carries no
+                        // band, so the region is just an empty spacer.
+                        return centeredGroup ? (_jsx("div", { className: "prizma-screen-layout__review-trailing", children: band })) : (band);
+                    })(), showFooter ? (_jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] }));
 });
 PrizmaReviewScreen.displayName = 'PrizmaReviewScreen';
 export default PrizmaReviewScreen;

package/dist/ScreenLayout.css

@@ -97,10 +97,17 @@
   padding-inline: var(--prizma-spacing-24);
 }
 
-/* Processing/result screens: fully centered column. */
+/* Processing/result screens: fully centered column.
+ * `safe center` second: flex centring is UNSAFE by default, so a stack taller
+ * than the column splits its overflow around the centre and the top half
+ * climbs over the nav row (#F-37). `safe` starts an overflowing stack at the
+ * top instead and does nothing while the stack fits, so the reference is
+ * byte-identical; the plain `center` before it is the fallback for engines
+ * that do not parse the keyword yet. */
 .prizma-screen-layout__content--centered {
   align-items: center;
   justify-content: center;
+  justify-content: safe center;
   gap: var(--prizma-spacing-16);
 }
 
@@ -114,6 +121,68 @@
   justify-content: center;
 }
 
+/* ── Short panels: the illustration gives ground first ───────────────────────
+ * A tutorial is authored at 844: nav, title block, a 296 illustration centred
+ * in the flexible middle, disclaimer, CTA, tag. On a short panel the middle is
+ * the only part of that stack that flexes, and it flexes to ZERO air: on the
+ * closed iPhone Duo (678 tall, measured 2026-10-14) the slot came out 270 for
+ * Face Capture and 288 for ID Capture, the art scaled into it, and the halo sat
+ * flush against the subtitle above and the disclaimer below, both at 0px.
+ * Nothing overflowed, so nothing scrolled, but the screen read as jammed.
+ *
+ * The order of concessions (docs/core-lab-frame-adaptation.md §2) says the
+ * illustration is the first thing to shrink, because it is the one element
+ * that carries no task information. This rule is that step, as a rule rather
+ * than a per-card knob: under 720 the slot keeps Spacing/16 of air above and
+ * below, so the art loses 32 more px (270 → 238 on the Duo, above the 200
+ * floor) and the title block and the disclaimer get their breathing room back.
+ *
+ * 720 is the line every short-panel rule in this package uses (Video Selfie's
+ * ring and live cues): the reference is 844, and 640, 667, 678 and 693 are all
+ * short. A CONTAINER query, for the reason the 340 rule below documents — the
+ * browser viewport is not the phone. Scoped to a middle that holds an
+ * illustration so archetype E's field stack, which shares `__flex`, is
+ * untouched. Outside the query not one declaration exists: the reference is
+ * byte-identical. DEVIATIONS #F-35. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-screen-layout__flex:has(> [class*='prizma-illustration-']) {
+    padding-block: var(--prizma-spacing-16);
+  }
+}
+
+/* ── Big panels: the illustration takes the room, not the air ───────────────
+ * The mirror of the rule above, and the same argument read the other way. The
+ * flexible middle is the only part of the stack that flexes, so on a panel
+ * TALLER than the reference every extra pixel becomes air around an
+ * illustration that never grows: on the 768 x 1024 iPad the slot goes 436 →
+ * 616 and Face Capture's tutorial opens from 70 / 70 of air above and below
+ * the 296 art to 160 / 160, which reads as a small picture adrift between a
+ * title and a button (Camila, 2026-10-15: "it looks rather small… the title
+ * and button could be closer to the illustration").
+ *
+ * The order of concessions (docs/core-lab-frame-adaptation.md §2) makes the
+ * illustration the first thing to shrink on a short panel. Run it backwards
+ * and it is the first thing to GROW on a big one: it is the element that
+ * carries no task information, so it is the one that can absorb the slack
+ * without moving anything that does. The art takes the content column's full
+ * measure (420 inside the 468 wide column) and the air falls back to 98 / 98,
+ * close to the reference's 70.
+ *
+ * BOTH axes gate it, and deliberately. `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 and the art would grow
+ * by 46px for no reason — it fires only on the tablet and desktop panels,
+ * which is where the column widens to 468 and the slot is tall. A CONTAINER
+ * query, for the reason #F-35 and the 340 rule document: the browser viewport
+ * is not the panel. Scoped to a middle that holds an illustration so
+ * archetype E's field stack, which shares `__flex`, is untouched.
+ * DEVIATIONS #F-36. */
+@container pcs-screen ((min-height: 845px) and (min-width: 468px)) {
+  .prizma-screen-layout__flex:has(> [class*='prizma-illustration-']) > [class*='prizma-illustration-'] {
+    width: 100%;
+  }
+}
+
 /* ── List archetype middle (archetype G) ─────────────────────────────────────
  * A Core card/option list filling the space between the title block and the CTA
  * band. NOT `__flex`, which centres AND shrink-wraps its child — that slot is
@@ -170,6 +239,19 @@
   margin-bottom: var(--prizma-spacing-32);
 }
 
+/* `analyzingLayout="centered"` (PrizmaReviewScreen): the header becomes the
+ * TOP half of a symmetric flex-1 pair around the loading bar + media group —
+ * its content bottom-anchors via `flex-end` so the Spacing/32 margin still
+ * lands directly above the stage, and all the leftover vertical space goes
+ * above the bar instead of being absorbed by the (now non-flexing) stage
+ * below. Paired with `--centered-group` and `__review-trailing-spacer`. */
+.prizma-screen-layout__review-header--centered {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
 /* The media stage: a centred column that flexes into whatever the header
  * leaves, so the captured still / file card sits in the middle at every screen
  * height. Its own child gap is Spacing/16 (the file card → encrypted-notice gap
@@ -193,6 +275,26 @@
   margin-bottom: var(--prizma-spacing-24);
 }
 
+/* The stage no longer absorbs the leftover space itself — the header/spacer
+ * pair does that instead — so it shrinks to the media's own height. Centering
+ * stays horizontal only (`align-items: center`, inherited). */
+.prizma-screen-layout__review-stage--centered-group {
+  flex: 0 0 auto;
+}
+
+/* The bottom half of the symmetric pair — equal flex-1 to
+ * `__review-header--centered`, so the group centres with even space on both
+ * sides, matching the Figma structure exactly (two flex-1 siblings flanking
+ * a fixed group). Empty on `analyzing` (pure spacer); bottom-anchors the CTA
+ * band on `success`, mirroring Figma's own bottom flex-1 container rather
+ * than letting the band just follow the stage at its natural position. */
+.prizma-screen-layout__review-trailing {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
 /* The `analyzing` loading bar is centred and capped at Figma's 164px instance
  * width; Core's `PrizmaLoadingBar` is `width: 100%` and takes its cap from the
  * host. 164 is absent from the spacing SOT — a documented literal, the same
@@ -297,6 +399,21 @@
   min-width: 0;
 }
 
+/* Two tertiary links stacked in the band (archetype G's `linkLabel` +
+ * `secondaryLinkLabel`; Reusability's "What data will be shared?" over
+ * "Incode’s Privacy Policy"). They share ONE band slot and sit FLUSH: each L
+ * link is already a 56px row with its text centred, so the band's flat
+ * Spacing/16 between two of them put the two lines 72px apart and they read as
+ * unrelated (Camila, 2026-10-13: "way too separate"). Flush, the lines sit 56
+ * apart — the frame's Button group pulls them to 48 with a −8 overlap, which
+ * is that component's own tightening and not copied (DEVIATIONS #RU-4). The
+ * 16 to the neighbouring button or disclaimer is untouched. */
+.prizma-screen-layout__band__links {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
 /* Band content above the buttons (Face Match's verdict Snackbar). The band's
  * flat Spacing/16 plus this row's own 16 reaches the designed 32 to the CTA —
  * the same idiom as the Disclaimer's 12 + 16 = 28 (DEVIATIONS #8, #FM-23). */
@@ -327,6 +444,16 @@
   padding-bottom: var(--prizma-spacing-24);
 }
 
+/* `--result` reserves `--pcs-footer-space` as a MARGIN outside the band
+ * (it sits as a shell-level sibling, not inside the content column that
+ * `--review`'s own footer-space reservation lives on) — so `--bare`'s flat
+ * padding would otherwise stack underneath it instead of replacing it. Zero
+ * it out here so the two combined give exactly the flat Spacing/24 `--bare`
+ * promises, not 24 plus a hidden tag's worth of space. */
+.prizma-screen-layout__band--result.prizma-screen-layout__band--bare {
+  margin-bottom: 0;
+}
+
 /* Full-width CTA row — for screens whose CTA is not part of a band. */
 .prizma-screen-layout__cta {
   flex-shrink: 0;
@@ -336,14 +463,14 @@
 }
 
 /* ── Inline prompt with links ────────────────────────────────────────────────
- * A line of body copy carrying one or more INLINE links — Phone Input's
+ * A line of body copy carrying one or more inline links — Phone Input's
  * "Didn't receive the code? Resend code or Change phone number", and the same
  * shape every other OTP-bearing module draws (Email Input, eKYC…).
  *
  * Core has no inline-link primitive: `PrizmaButton variant="tertiary-link"` is
- * the right INK (underlined, `button/tertiary/text/default`) but size L is
+ * the right ink (underlined, `button/tertiary/text/default`) but size L is
  * `width: 100%; min-height: 56px`, so it cannot sit inside a sentence. The
- * recipe therefore lives here — built from Core's OWN tokens, inventing no
+ * recipe therefore lives here — built from Core's own tokens, inventing no
  * palette — and is placed in the foundation rather than a module file because
  * it is a cross-module pattern (DEVIATIONS #PI-10, #DC-29 precedent).
  */
@@ -379,6 +506,79 @@
   text-decoration: none;
 }
 
+/* ── Presented surfaces: sheet and dialog over a screen ──────────────────────
+ * The scrim + panel split every presented Core surface in this package uses
+ * (Document Capture's method sheet #DC-30, the Permissions ask #GEN-1): Core's
+ * `PrizmaBottomSheetContent` / `PrizmaModalContent` own the panel (handle,
+ * radius, padding, title, button group); the SCREEN owns the scrim and the
+ * anchoring, because Core's safe presenters portal to `document.body` and would
+ * escape the 390 × 844 frame and the host's `transform: scale()`. The scrim
+ * drinks Core's own `Surface/Overlay` token. No animation: a screen is one
+ * static spec state.
+ *
+ * Promoted here from two identical module copies (`permissions-sheet-*`,
+ * `document-capture-sheet-*`) when a third module needed the same three rules
+ * (Biometric Consent's quit confirmation, DEVIATIONS #BC-8). The two module
+ * copies still stand until their owners move them; new consumers use these. */
+.prizma-screen-layout__sheet-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: var(--prizma-surface-overlay);
+}
+
+/* A bottom sheet: pinned to the frame's bottom edge. */
+.prizma-screen-layout__sheet-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}
+
+/* The frame's `System UI Bottom Bar` (34) sits INSIDE the sheet. Core reserves
+ * it as `env(safe-area-inset-bottom, …)`, but a browser defines the inset as 0
+ * on a flat screen, so the fallback never applies and the CTAs drop to 12px off
+ * the frame's bottom. Screens here reserve device chrome as fixed values
+ * (`--pcs-status-bar`), so the sheet takes Core's own Sheet/Size/Safe-area
+ * token directly. */
+.prizma-screen-layout__sheet-panel .prizma-bottom-sheet__safe-area {
+  height: var(--prizma-sheet-size-safe-area);
+}
+
+/* Core's Modal, placed the way Core's own presenter places it
+ * (`.prizma-modal-presenter__scrim`, Modal.css): the card pins to the BOTTOM
+ * of the frame with a Spacing/12 margin on the sides and bottom — never
+ * centred (owner reference 2026-07-12). `PrizmaModalContent` is the card
+ * (width 100% up to its own Modal/Size/Max-width); this is the presenter's
+ * geometry without its portal and its clock. Biometric Consent's quit
+ * confirmation is the first consumer (DEVIATIONS #BC-7). */
+.prizma-screen-layout__modal-panel {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: var(--prizma-spacing-12);
+  box-sizing: border-box;
+}
+
+/* A CENTRED dialog — the reading the Permissions ask and NFC's settings
+ * dialog take for a desktop browser window, where a card pinned to the bottom
+ * of a wide window reads as a phone pasted on the page. Same card, centred
+ * with the Spacing/12 gutter. */
+.prizma-screen-layout__dialog-panel {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--prizma-spacing-12);
+  box-sizing: border-box;
+}
+
 /* ── Footer (verified-by tag) ─────────────────────────────────────────────────
  * ANCHORED to the shell, not flowed after the content. The owner's rule is
  * absolute: where a tag exists it sits at exactly the same position on every
@@ -418,6 +618,108 @@
   padding-bottom: var(--pcs-capture-chrome-space);
 }
 
+/* ── Short panels: the result column never climbs over the nav ───────────────
+ * Archetype F (`PrizmaResultScreen`) centres its title block in the flexible
+ * column. On the iPhone Duo open full screen (890 x 626, measured 2026-10-20)
+ * ID Capture's Document error drew its error status mark across the Incode
+ * logo (developer report via Camila): the column was 318 tall with 24 of
+ * padding above and 88 below, the title block (114) + gap (16) + the
+ * accepted-documents card (180) needed 422, and unsafe centring split the 104
+ * of overflow into 52 above the column and 52 below. `safe center` (declared
+ * with the column above) stops the climb; the rest of the fit comes from the
+ * order of concessions (docs/core-lab-frame-adaptation.md §2), scoped to the
+ * archetype:
+ *
+ * 1. The column stops reserving the footer twice. Every content column pads
+ *    its bottom by `--pcs-footer-space` so content never sits under the tag,
+ *    but F's CTA band is a shell-level SIBLING of the column that reserves the
+ *    same space again as its margin (`__band--result`). On the 844 reference
+ *    that is 62 of invisible air above the band; on a 626 panel it is a
+ *    quarter of the column. Under 720 the column drops it when a result band
+ *    follows. The reference keeps the double reserve on purpose: dropping it
+ *    there would move the centred block 31 lower on every result screen,
+ *    which is the owner's call, not a short-panel fix.
+ * 2. Rhythm (step 2 of the order): the column's 24 above the title goes to 16
+ *    and its 16 gaps to 12, the band's 16 gap to 12. The same values the Lab's
+ *    `compact` adaptation uses. With both, the Document error fits the 626
+ *    panel exactly (322 in 322).
+ *
+ * What still does not fit after that pans: `overflow-y: auto` on the column,
+ * the answer archetype G's scroll variant gives a long list, so a longer
+ * document list or a two-line Spanish title scrolls above the CTA instead of
+ * running under it. Never the H2, the CTA or the tag. Outside the query not
+ * one declaration exists. DEVIATIONS #F-37. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-screen-layout__content--centered {
+    overflow-y: auto;
+  }
+
+  /* (0,3,0), the footer reserve's own specificity, and later in the file: it
+     wins the tie only where a result band follows the column. */
+  .prizma-screen-shell .prizma-screen-layout__content--centered:has(+ .prizma-screen-layout__band--result) {
+    padding-top: var(--prizma-spacing-16);
+    padding-bottom: 0;
+    gap: var(--prizma-spacing-12);
+  }
+
+  .prizma-screen-layout__band--result {
+    gap: var(--prizma-spacing-12);
+  }
+}
+
+/* ── Short panels: a list that does not fit pans ─────────────────────────────
+ * Archetype G's middle is `flex: 1; min-height: 0`, so on a short panel it
+ * shrinks to whatever the title block and the band leave, and its rows, which
+ * keep their height, run straight through the band: on the Duo open full
+ * screen ID Capture's Common issues drew "Take the photo manually" across its
+ * third row (56px of overlap, measured 2026-10-20). The archetype already owns
+ * the answer as the `--scroll` variant a screen opts into when it knows it is
+ * long; a short panel is the same situation decided by the panel rather than
+ * the screen, so under 720 every list takes it, all three declarations: the
+ * rows pan, Spacing/16 of air stays above the band, the title, the CTA and the
+ * tag hold still. Rows keep their intrinsic height for the same reason the
+ * variant's do (#QS-1). The `--end` variant still hangs its rows off the
+ * bottom when they fit.
+ *
+ * An ILLUSTRATION in the middle is the exception, and it goes the other way:
+ * step 1 of the order of concessions, it shrinks to the slot instead of
+ * panning. NFC's symbol and try-again screens hang Core's 342 x 392 art under
+ * a top-aligned title (that is why they are on G, not A), and on the 626 panel
+ * a rigid art scrolled with its bottom third cut off under the CTA. Shrunk, the
+ * svg's own `xMidYMid meet` scales the drawing into the shorter box and nothing
+ * is cut. Outside the query not one declaration exists. DEVIATIONS #F-38. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-screen-layout__list {
+    overflow-y: auto;
+    margin-bottom: var(--prizma-spacing-16);
+  }
+
+  .prizma-screen-layout__list > :not([class*='prizma-illustration-']) {
+    flex-shrink: 0;
+  }
+
+  .prizma-screen-layout__list > [class*='prizma-illustration-'] {
+    flex: 0 1 auto;
+    min-height: 0;
+    /* A shrunk art is narrower than the column, and a `fit-content` wrapper
+       is not stretched, so it centres itself the way the slot centres rows. */
+    align-self: center;
+  }
+
+  /* The drawing follows the box. Core's location art is a bare svg with its
+     342 x 392 attributes and no sizing rule of its own, so a shorter wrapper
+     alone left it at full size and cut; the scan art already sizes its svg to
+     the wrapper. One rule for both: the svg takes the wrapper's height and
+     keeps its ratio. When nothing shrinks, 100% of the intrinsic height is the
+     intrinsic height, so the reference is byte-identical. */
+  .prizma-screen-layout__list > [class*='prizma-illustration-'] > svg {
+    display: block;
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+  }
+}
+
 /* Camera screens built on the viewfinder surface (ID / Document stages) reserve
  * the same chrome footprint on their content column. Without it, Core's poa
  * frame — which has NO aspect lock and FILLS its box — grows to the full shell
@@ -453,6 +755,80 @@
   max-width: 100%;
 }
 
+/* ── Capture notice band ─────────────────────────────────────────────────────
+ * A Snackbar raised over the live feed without taking the camera away — Face
+ * Capture's "Need more time?" offer (2026-10-05) is the first consumer.
+ *
+ * ANCHORED on the same rail as the control strip above, and deliberately at the
+ * same offset: the two are alternatives, never stacked. A capture screen either
+ * hands the user a shutter or raises a notice, so sharing the rail keeps the
+ * band in one place instead of inventing a second vertical system.
+ *
+ * It does NOT get a `--pcs-*` content reserve the way the strip does. The strip
+ * is a fixed 64px row, so reserving it is arithmetic; a notice is multiline and
+ * localized, so its height is not knowable from a token. It floats over the gap
+ * Core already leaves under the instruction line, which is where the module
+ * Figma draws it. */
+.prizma-screen-shell .prizma-screen-layout__capture-notice {
+  position: absolute;
+  left: var(--prizma-spacing-24);
+  right: var(--prizma-spacing-24);
+  bottom: calc(var(--pcs-footer-space) + var(--prizma-spacing-8));
+  display: flex;
+}
+
+/* On a 320 phone the notice drops its status glyph (Camila, 2026-10-05).
+ *
+ * The Snackbar's icon slot is 32px plus the root's 12px gap: 44 of the 272px
+ * the content column has at 320, a sixth of the width, spent on a decorative
+ * mark. It pushed the body from two lines to four and the band grew upward
+ * until it covered the capture instruction — the one line the screen exists
+ * to show. At 390 there is room for both and the glyph stays.
+ *
+ * A CONTAINER query, not a media query, and that is the whole reason this
+ * rule lives in the screens layer rather than in Snackbar.css: Core web
+ * components are width-agnostic by design, and the browser viewport is not
+ * the phone — in Core Lab a 320 shell sits inside a 1400px window, so
+ * `@media` would read the wrong number. `pcs-screen` is the shell's own
+ * container (ScreenShell.css), so this asks the question that matters: how
+ * wide is the screen. Same mechanism as FormScreen.css's 420 breakpoint.
+ *
+ * 340 is the line because it is the gap above the narrowest phone we support
+ * and below the next one: 320 loses the glyph, 360 and 390 keep it — measured,
+ * both of those clear the instruction line with the icon in. The icon is
+ * `aria-hidden`, so
+ * nothing is lost for a screen-reader user; what is lost is the non-colour
+ * signal of state, and the copy here carries the meaning without it
+ * ("Need more time? / Manual capture starts in 20 s"). */
+@container pcs-screen (max-width: 340px) {
+  .prizma-screen-layout__capture-notice .prizma-snackbar__icon {
+    display: none;
+  }
+
+  /* …and the capture frame gives up Spacing/40 of its width to make room for
+   * the band. Dropping the glyph was enough for English and not for Spanish:
+   * measured at 320, the instruction ends at 488 and the notice starts at 500
+   * in English but 482 in Spanish, because both the instruction AND the body
+   * wrap to two lines. Six pixels of overlap, on the one line the screen is
+   * for.
+   *
+   * The frame is the right thing to give. It is the lever Core already uses
+   * when anchored chrome needs room — `--pcs-capture-chrome-space` exists so
+   * the shutter strip can push the frame smaller — and the owner's rule is
+   * explicit that the frame may get smaller, that is not a constraint
+   * (2026-08-18). The alternative was the Figma-exact padding and gap inside
+   * `.prizma-selfie-capture`, which are measured values and not ours to bend.
+   *
+   * The stage is `width: 100%` with `aspect-ratio: 1`, so 40 off the width is
+   * 40 off the height and everything below rises by it: Spanish goes from 6px
+   * of overlap to 34px of clearance, English to 52. Scoped to screens that
+   * actually carry a notice — a capturing screen without one keeps the full
+   * frame at 320. */
+  .prizma-screen-shell:has(.prizma-screen-layout__capture-notice) .prizma-selfie-capture {
+    max-width: calc(100% - var(--prizma-spacing-40));
+  }
+}
+
 /* ── Anchored-chrome layering ─────────────────────────────────────────────────
  * The camera HUD bands lift themselves to `z-index: 1` so their copy paints
  * above `PrizmaIdCapture`'s scrim (an absolutely positioned box-shadow that
@@ -463,7 +839,7 @@
  * chrome are ordered in a single place. */
 .prizma-screen-shell .prizma-screen-layout__footer,
 .prizma-screen-shell .prizma-screen-layout__band__tag,
-.prizma-screen-shell .prizma-screen-layout__capture-strip {
+.prizma-screen-shell .prizma-screen-layout__capture-strip,
+.prizma-screen-shell .prizma-screen-layout__capture-notice {
   z-index: 2;
 }
-

package/dist/VideoSelfieErrorScreen.js

@@ -73,7 +73,7 @@ export const VideoSelfieErrorScreen = forwardRef(({ strings, variant = 'processi
                 }
                 : {
                     title: slice.noConnection.title,
-                    subtitle: undefined,
+                    subtitle: slice.noConnection.subtitle,
                     ctaLabel: slice.noConnection.ctaLabel,
                     quitLabel: slice.noConnection.quitLabel,
                 };

package/dist/VideoSelfieIdCaptureScreen.js

@@ -106,7 +106,7 @@ export const VideoSelfieIdCaptureScreen = forwardRef(({ strings, side = 'front',
         ? strings.idCapture.conditions.wrongSide[side]
         : strings.idCapture.conditions[condition];
     const conditionFeedback = condition === 'wrongSide' ? WRONG_SIDE_FEEDBACK[side] : CONDITION_FEEDBACK[condition];
-    return (_jsxs(PrizmaScreenShell, { ref: ref, dark: true, className: className, ...shell, children: [_jsx("div", { className: "prizma-viewfinder__surface", children: camera }), _jsx("div", { className: "video-selfie-stepper", children: _jsx(PrizmaStepper, { steps: 7, currentState: STEP[side], documentType: documentType, completedValueText: strings.stepperCompletedLabel }) }), _jsxs("div", { className: [
+    return (_jsxs(PrizmaScreenShell, { ref: ref, dark: true, "data-pcs-overlay": "window", className: className, ...shell, children: [_jsx("div", { className: "prizma-viewfinder__surface", children: camera }), _jsx("div", { className: "video-selfie-stepper", children: _jsx(PrizmaStepper, { steps: 7, currentState: STEP[side], documentType: documentType, completedValueText: strings.stepperCompletedLabel }) }), _jsxs("div", { className: [
                     'prizma-viewfinder__content',
                     overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
                 ]