@incodetech/prizma-core-screens 0.2.7 → 0.2.12

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

@@ -120,7 +120,7 @@ export const VideoSelfieErrorScreen = forwardRef<
               }
             : {
                 title: slice.noConnection.title,
-                subtitle: undefined,
+                subtitle: slice.noConnection.subtitle,
                 ctaLabel: slice.noConnection.ctaLabel,
                 quitLabel: slice.noConnection.quitLabel,
               };

package/src/VideoSelfieIdCaptureScreen.tsx

@@ -191,7 +191,15 @@ export const VideoSelfieIdCaptureScreen = forwardRef<
       condition === 'wrongSide' ? WRONG_SIDE_FEEDBACK[side] : CONDITION_FEEDBACK[condition];
 
     return (
-      <PrizmaScreenShell ref={ref} dark className={className} {...shell}>
+      <PrizmaScreenShell
+        ref={ref}
+        dark
+        /* The camera owns the whole window, never a column of it — see the
+           contract note in `VideoSelfieLayout.css`. */
+        data-pcs-overlay="window"
+        className={className}
+        {...shell}
+      >
         <div className="prizma-viewfinder__surface">{camera}</div>
         <div className="video-selfie-stepper">
           <PrizmaStepper