@incodetech/prizma-core-screens 0.2.12 → 0.2.18

package/src/DigitalIdProvidersStrings.ts

@@ -0,0 +1,102 @@
+// Digital ID Providers — copy contract.
+//
+// Every Digital ID Providers screen receives the SAME `strings:
+// DigitalIdProvidersStrings` object (rule: all copy via props, no hardcoded
+// English — GUIDELINES.md §9).
+//
+// Authoritative screens: `Digital ID Providers - Latest Designs` Figma file
+// (q0wiyQkLXxGQ2jkPEutxR8) — the chooser `Document Chooser` (27753:8099) and its
+// full provider list (27703:4895), and the section `🪪 Digital ID Verification
+// Flow - 🌐 Web - Full flow` (27707:9237): Redirecting, the provider's own pages
+// (OS chrome, not built), success and five errors. Web only: the providers
+// redirect out of the browser to the provider's site and back (Web SDK,
+// `digitalIdRedirect`). These screens sit in the Digital IDs module beside the
+// device wallets (`DigitalIdDeviceWallets*`), and share its success screen.
+
+/** The five ways a provider run can fail (`27707:9338`). */
+export type DigitalIdProvidersErrorState =
+  | 'unavailable'
+  | 'consent-denied'
+  | 'timed-out'
+  | 'not-accepted'
+  | 'expired';
+
+/** One provider row on the chooser. `id` is what `onOptionSelect` reports. */
+export interface DigitalIdProvidersOption {
+  id: string;
+  /** "iDIN", "itsme", "CA DMV Wallet"… */
+  label: string;
+  /** The provider's logo tile (an image URL), from the backend catalog.
+   *  Absent → Core's generic `digital-id-web` card icon. Samples ship under
+   *  `samples/digital-id-providers/`. */
+  logo?: string;
+}
+
+/** What the person picked: a physical document, or a provider by its id. */
+export type DigitalIdProvidersSelection =
+  | { kind: 'id' }
+  | { kind: 'passport' }
+  | { kind: 'provider'; providerId: string };
+
+export interface DigitalIdProvidersStrings {
+  /** Accessible name for the logo nav region (i18n — no baked-in English). */
+  navLabel?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+
+  /** `Document Chooser` (27753:8099). */
+  documentSelection: {
+    /** "Select how to verify" — the module's one chooser title (owner call,
+     *  2026-10-28; the frame says "Verify your identity"). */
+    title: string;
+    /** "Viewing options for" — before the country. */
+    countryLabel: string;
+    /** ISO code of the country the options are for, e.g. "US" (the flag). */
+    countryCode: string;
+    /** The country as shown, e.g. "US". */
+    countryName: string;
+    /** "Use your ID" */
+    idSectionLabel: string;
+    /** "Identity Card" */
+    idLabel: string;
+    /** "Passport" */
+    passportLabel: string;
+    /** "Digital ID verification" */
+    providersSectionLabel: string;
+    /** The providers the flow offers, in order. */
+    providers: DigitalIdProvidersOption[];
+  };
+
+  /** `Redirecting` (1-18-1-id-hold-on, 27707:9281). */
+  redirecting: {
+    /** "Redirecting for verification…" */
+    title: string;
+    /** "You'll be redirected to complete verification" */
+    subtitle?: string;
+  };
+
+  /** `Errors` (27707:9338), one slice per state. */
+  errors: Record<
+    DigitalIdProvidersErrorState,
+    {
+      title: string;
+      subtitle?: string;
+      /** "Try again", or "Scan ID" when the provider is unavailable. */
+      ctaLabel: string;
+      /** "Choose another method" — one wording on every error (owner call,
+       *  2026-10-28; the frame says "Change verification method" on two). */
+      secondaryCtaLabel: string;
+    }
+  >;
+
+  /** The accepted-documents card on `not-accepted` and `expired`. */
+  acceptedDocuments: {
+    /** ISO code for the flag, e.g. "IN". */
+    countryCode: string;
+    /** "India" */
+    country: string;
+    /** Emoji fallback when the flag is outside Core's raster bank. */
+    flag?: string;
+    documents: string[];
+  };
+}

package/src/FaceCaptureLayout.css

@@ -50,6 +50,156 @@
   }
 }
 
+/* ── Landscape phones: the ring holds its 335, the stack changes axis ────────
+ * The capture half of ScreenLayout.css's landscape block (#F-39). A phone
+ * held sideways is 375 to 440 tall and the portrait stack needs ~557 (nav,
+ * Spacing/40, the 335 ring, Spacing/32, instruction, footer): on the 844 x
+ * 390 frame the ring ran 48 past the bottom of the panel, the instruction and
+ * the shutter were below the frame entirely and the bottom-anchored tag drew
+ * across the ring (measured on the Core Lab canvas, 2026-10-20). The ring is
+ * not what gives ground (#20, Camila 2026-10-14) and nothing stacked under it
+ * can fit, so the component's column becomes two ZONES side by side: the ring
+ * at the left, vertically centred, the instruction beside it filling the rest,
+ * and on the manual screen the shutter at the right edge. 375 − 335 leaves 20 of air
+ * above and below the ring on the shortest phone, so it fits at full size.
+ *
+ * The instruction stays INSIDE `PrizmaSelfieCapture` (#12/#14): the root
+ * changes axis, the way #20 already re-seats its padding and gap from this
+ * file, and no copy leaves the component. Three decisions:
+ *
+ * · The ring is pinned to the LEFT edge, not centred with its neighbours, so
+ *   it is in the same place on every live state (auto has an instruction
+ *   beside it, manual an instruction and a shutter); once it has dissolved
+ *   into the spinner or the verdict mark there is nothing beside it and the
+ *   stage centres: a ring that moves as the
+ *   step advances is the glitch #VS-24 exists for. The uploading / processing
+ *   spinner therefore dissolves in the ring's own seat at the left, with the
+ *   right zone empty for the second it lasts.
+ * · The instruction takes whatever width is left and centres in it. On the
+ *   844 panel that is 437; on the 667 SE it is 172 beside a shutter, which
+ *   wraps the manual line to five lines of H4 (104 tall) inside a 375 panel.
+ * · The SHUTTER sits at the right edge, where the thumb is on a phone held
+ *   sideways: the same seat every native camera app gives it in landscape.
+ *   Beside the ring would put it under the user's palm.
+ *
+ * The content column stops reserving the footer under the ring
+ * (ScreenLayout.css's block): with the reserve the ring had 328 to sit in;
+ * the tag itself goes, see below. The "Need more time" notice sits on the
+ * right zone's rail. Outside the query not one declaration
+ * exists. DEVIATIONS #F-39. */
+@container pcs-screen ((orientation: landscape) and (max-height: 500px)) {
+  /* The root becomes the frame the zones are anchored in. Anchored, not a
+   * flex row: Core Lab's scene engine centres the IN-FLOW children of a row
+   * as a group and draws the stage from its own pinned box, which put the
+   * instruction across the ring on the canvas while the browser drew it
+   * right. Anchored boxes are the one layout the engine reproduces exactly
+   * (the tag, the capture strip and the notice already rely on it), and the
+   * browser lays them out the same way, so the canvas IS the SDK. */
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture {
+    position: relative;
+    display: block;
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    padding: 0;
+    /* The ring's measure, stated once: Core's own Capture / Selfie frame width
+     * (SelfieCapture.css caps the ROOT at 335 and the stage takes 100% of it;
+     * with the root now the full width the cap moves to the stage, same
+     * number, same source). A host that must fit the ring between its own
+     * bars overrides this one property (Core Lab does, `[data-pcs-safe]`). */
+    --pcs-ring: 335px; /* hardcoded — Core's Capture / Selfie frame width; not a token */
+    /* The instruction's box beside the ring: 320 at most (the width a two-line
+     * H4 instruction takes), less when the column has less, and on manual
+     * capture less the shutter's 112 rail at the right edge. */
+    --pcs-instruction: min(320px, calc(100% - var(--pcs-ring) - var(--prizma-spacing-24)));
+    /* Ring, Spacing/24, instruction: ONE pair, centred on the column. Round 2
+     * pinned the ring at the left edge and let the instruction float in the
+     * middle of whatever was left, which at 844 put the words 230 from the
+     * ring (Camila, 2026-10-23: "the face frame looks too separate from the
+     * feedback"). Still anchored boxes, not a flex row, for the canvas. */
+    --pcs-pair: calc(var(--pcs-ring) + var(--prizma-spacing-24) + var(--pcs-instruction));
+    --pcs-pair-left: calc((100% - var(--pcs-pair)) / 2);
+  }
+
+  /* Manual capture: the pair centres in what is left of the shutter's rail. */
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture:has(> .prizma-selfie-capture__shutter) {
+    --pcs-instruction: min(320px, calc(100% - var(--pcs-ring) - var(--prizma-spacing-24) - var(--prizma-icon-size-3xl) - 2 * var(--prizma-spacing-24)));
+    --pcs-pair-left: calc((100% - var(--prizma-icon-size-3xl) - 2 * var(--prizma-spacing-24) - var(--pcs-pair)) / 2);
+  }
+
+  /* The ring: the pair's left edge, centred on the panel's height. */
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture > .prizma-selfie-capture__stage {
+    position: absolute;
+    left: var(--pcs-pair-left);
+    top: calc(50% - var(--pcs-ring) / 2);
+    width: var(--pcs-ring);
+    height: var(--pcs-ring); /* the same measure, stated outright so an engine without aspect-ratio draws the square */
+    max-width: none;
+  }
+
+  /* A stage with nothing beside it centres: uploading, processing and the
+   * success verdict have dissolved the ring into a spinner or a mark and
+   * carry no instruction, no shutter, so there is no second zone to hold
+   * (Camila, 2026-10-21: "it has space to be in the centre, so it should").
+   * The live capture states keep the ring at the left so it never moves
+   * between them; the dissolve is the one step where the stage changes
+   * anyway. */
+  .prizma-screen-layout__content--capture
+    > .prizma-selfie-capture:not(
+      :has(> .prizma-selfie-capture__feedback, > .prizma-selfie-capture__shutter, > .prizma-selfie-capture__status)
+    )
+    > .prizma-selfie-capture__stage {
+    left: calc(50% - var(--pcs-ring) / 2);
+  }
+
+  /* The instruction (and overlay mode's status band): Spacing/24 right of the
+   * ring, in its own box, vertically centred on the ring's axis, the words
+   * starting at the box's left edge so they read as the ring's caption rather
+   * than as a second column. */
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture > .prizma-selfie-capture__status,
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture > .prizma-selfie-capture__feedback {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(var(--pcs-pair-left) + var(--pcs-ring) + var(--prizma-spacing-24));
+    width: var(--pcs-instruction);
+    right: auto;
+    margin: 0;
+    max-width: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: start;
+  }
+
+  /* The shutter: right edge, centred on the panel's height. 64 is the strip's
+   * own measure (`--pcs-capture-chrome-space` reserves the same token). */
+  .prizma-screen-layout__content--capture > .prizma-selfie-capture > .prizma-selfie-capture__shutter {
+    position: absolute;
+    right: 0;
+    top: calc(50% - var(--prizma-icon-size-3xl) / 2);
+    width: var(--prizma-icon-size-3xl);
+    max-width: none;
+  }
+
+  /* The verified tag goes on landscape capture screens (Camila, 2026-10-21:
+   * "somewhere at the bottom or not at all"). Bottom centre, its one seat, is
+   * where the ring's lower edge is: on the SE the ring spans 20 to 355 and the
+   * tag 329 to 359. Moving the ring off centre to clear it would put the ring
+   * in a different place on this screen than on the uploading one, and a
+   * feed-open capture screen already drops the client logo for the same
+   * reason (dense, 2026-08-18): the tag comes back on the very next screen. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__content--capture) .prizma-screen-layout__footer {
+    display: none;
+  }
+
+  /* The notice keeps the rail the tag used to reserve, in the right zone. */
+  .prizma-screen-shell .prizma-screen-layout__capture-notice {
+    left: 50%;
+    bottom: 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

package/src/FormScreen.css

@@ -91,6 +91,41 @@
   flex-shrink: 0;
 }
 
+/* ── Short panels: a field stack that does not fit pans ──────────────────────
+ * The same decision archetype G's list took in #F-38, for archetype E. The
+ * stack is `flex: 1; min-height: 0`, so on a short panel it shrinks to what
+ * the title block and the CTA leave, and its rows, which keep their height,
+ * run straight on under the anchored CTA: on the closed iPhone Duo (678,
+ * measured 2026-10-29, the day the Duo presets opened to every module) eKYC's
+ * "Enter your details" drew Continue across its Date of Birth field and the
+ * empty-fields error painted its "This field is required" over the verified
+ * tag; Advanced Signature's accept screen lost its third required checkbox
+ * entirely on the open panel (626) while "Finish signing" showed enabled.
+ * The archetype already owns the answer as `scrollFields` (`--scroll`), opted
+ * into by the screens that know they are long (CURP, the consents, eKYB,
+ * the long forms, OCR review); a short panel is the same situation decided
+ * by the panel rather than the screen, so under 720 every stack takes the
+ * variant's declarations: the rows pan, Spacing/16 of air stays above the
+ * CTA, no scrollbar is drawn, and the title, the CTA and the tag hold still.
+ * Rows keep their intrinsic height for the same reason the variant's do
+ * (#QS-1). `--end` keeps hanging its rows off the bottom when they fit.
+ * Outside the query not one declaration exists. DEVIATIONS #F-40. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-form-screen__fields {
+    overflow-y: auto;
+    margin-bottom: var(--prizma-spacing-16);
+    scrollbar-width: none;
+  }
+
+  .prizma-form-screen__fields::-webkit-scrollbar {
+    display: none;
+  }
+
+  .prizma-form-screen__fields > * {
+    flex-shrink: 0;
+  }
+}
+
 /* CTA column: primary, then the optional tertiary link below it. Core's
  * `PrizmaButtonGroup` owns this primary → tertiary rhythm at Spacing/12, so the
  * same value is used here rather than a new one (the archetype composes two

package/src/IdCaptureLayout.css

@@ -312,3 +312,66 @@
 .id-capture-on-surface .prizma-id-capture__encrypted {
   color: var(--prizma-text-body-800-primary);
 }
+
+/* ── Short panels: the verdict still shrinks, the manual stage keeps its caption
+ * Two more rows for the 720 line (SHORT-PANELS.md), found the day the iPhone
+ * Duo presets opened to every module (2026-10-29), both on the open panel
+ * (626) and neither at 678 or above.
+ *
+ * (a) The result screens with a captured still (every error verdict, the
+ * success verdicts, Classification) run on archetype F, whose column pans
+ * under 720 (#F-37). The still is Core's `PrizmaIdCapture` in its filled
+ * state: 342 wide, its height from the variant's aspect, the encrypted row
+ * under it. At 626 the stack is 21 to 39px too tall, so the column panned and
+ * the still lost its bottom border and its caption, or the caption was
+ * squashed to a sliver (the row is a flex child with no floor). Step 1 of the
+ * order of concessions, the same mechanism as the vertical stage frame above:
+ * the still is the one part of the column that gives up height, its aspect
+ * ratio narrows the width to match, every other child keeps its height, and
+ * the caption stays a full row. With room to spare the still never shrinks.
+ * DEVIATIONS #IDC-33.
+ *
+ * (b) On the manual stages the strip carries the numbered tooltip above the
+ * shutter (`PrizmaCaptureManual`, absolute, `bottom: 100%` of the strip).
+ * The viewfinder column reserves the strip's footprint
+ * (`--pcs-capture-chrome-space`, ScreenLayout.css) but not the tooltip's, so
+ * on a panel short enough for the frame to sit flush on that reserve the
+ * tooltip landed on the "All data is encrypted" row under the frame. When the
+ * strip has a tooltip, the column reserves it too: the multiline Tooltip's
+ * two lines plus its Spacing/16 padding, plus the zone's Spacing/8 gap. The
+ * shortfall goes where this stylesheet already sends it, the frame. At 844
+ * the bottom band has that much slack and the frame would not move, but the
+ * rule is gated with the rest so the reference stays byte-identical.
+ * DEVIATIONS #IDC-34. */
+@container pcs-screen (max-height: 720px) {
+  .id-capture-on-surface .prizma-screen-layout__content--centered > :not(.prizma-id-capture) {
+    flex-shrink: 0;
+  }
+  .id-capture-on-surface .prizma-screen-layout__content--centered > .prizma-id-capture {
+    flex: 0 1 auto;
+    min-height: 0;
+  }
+  .id-capture-on-surface .prizma-screen-layout__content--centered > .prizma-id-capture > :not(.prizma-id-capture__frame) {
+    flex-shrink: 0;
+  }
+  .id-capture-on-surface .prizma-screen-layout__content--centered > .prizma-id-capture > .prizma-id-capture__frame {
+    flex: 0 1 auto;
+    min-height: 0;
+    width: auto;
+    max-width: 100%;
+    /* The still's natural height at the column's width (the column is capped
+     * at 390 on any panel, less its two Spacing/24 gutters), so with room to
+     * spare nothing changes and under pressure it is the first to give. */
+    flex-basis: calc((min(100cqw, 390px) - 2 * var(--prizma-spacing-24)) * 220 / 350);
+  }
+  .id-capture-on-surface .prizma-screen-layout__content--centered > .prizma-id-capture--passport > .prizma-id-capture__frame {
+    flex-basis: calc((min(100cqw, 390px) - 2 * var(--prizma-spacing-24)) * 254 / 350);
+  }
+
+  .prizma-screen-shell:has(.prizma-screen-layout__capture-strip .prizma-capture-manual__tooltip-zone) .prizma-viewfinder__content {
+    padding-bottom: calc(
+      var(--pcs-capture-chrome-space) + var(--prizma-spacing-8) +
+        2 * var(--prizma-tooltip-m-line-height) + 2 * var(--prizma-spacing-16)
+    );
+  }
+}

package/src/ScreenLayout.css

@@ -829,6 +829,197 @@
   }
 }
 
+/* ── Landscape phones: the stack keeps its order, the ring changes axis ──────
+ * WCAG 2.1 SC 1.3.4 Orientation (AA) asks every screen to work held sideways,
+ * and a phone held sideways is 375 to 440 tall (the phone catalog rotated:
+ * iPhone SE 667 x 375, the 844 x 390 reference, Large Android 915 x 412,
+ * Pro Max 956 x 440). Measured against the stacks the short-panel rules fit
+ * into 626: a capture screen needs ~557, a tutorial ~700. So two things give
+ * ground that no short panel asked for: the tutorial loses its illustration,
+ * and the capture screen turns its ring and its instruction side by side
+ * (FaceCaptureLayout.css). Everything else keeps the portrait order, title
+ * over copy over button, compacted (Camila, 2026-10-21: top-down, not side by
+ * side; the tag always centred; the button closer to the bottom).
+ *
+ * THE LINE is the shell's own shape, never the browser viewport (a 390 shell
+ * in a 1400 window is portrait): `orientation: landscape` with a 500 height
+ * cap. The cap keeps the rules off tablets, desktop windows and the iPhone
+ * Duo open full screen (626), which already have their own answers (#21,
+ * #VS-32, #F-37) and are wider than they are tall. 500 has slack above the
+ * 440 ceiling and under the 626 floor. Every rule below lives inside the one
+ * query, so outside it not one declaration exists and the portrait render is
+ * byte-identical. Exploration `face-capture-landscape` (Camila, 2026-10-20);
+ * the developer-facing list is LANDSCAPE.md. DEVIATIONS #F-39.
+ *
+ * What never changes, in either orientation: the H2, the CTA, the live
+ * instruction and where it lives (#12/#14), the status and verdict copy, and
+ * the tag's seat: bottom centre, Spacing/16 up, on every screen that has one. */
+@container pcs-screen ((orientation: landscape) and (max-height: 500px)) {
+  /* The status-bar reserve STAYS (`--pcs-status-bar`, 47 by default, the
+   * host's own value otherwise). Round 2 had zeroed it on the argument that an
+   * iPhone draws no status bar in landscape; Camila's QA of the canvas
+   * (2026-10-21) found the result screens' status mark sitting in the system
+   * bar's row (the Lab's pills at 25 to 35, Elena's landscape reference keeps
+   * a 54 bar), which no device would allow. The reserve is the one line every
+   * screen already respects in portrait, so it is kept rather than replaced
+   * by a landscape-only offset. The capture screens are unaffected: their nav
+   * is hidden below and the ring is placed on the panel's height. */
+
+  /* Capture screens drop the nav row entirely. It is already reserved and
+   * empty on a feed-open capture screen (the 2026-08-18 header rule), and a
+   * 335 ring plus the 56 row does not fit in 375. A client logo opt-in goes
+   * with it in landscape: there is no row to hold it. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__content--capture) > .prizma-screen-nav {
+    display: none;
+  }
+
+  /* …and the capture column stops reserving the footer under the ring: with
+   * the reserve the ring had 328 to sit in. (0,3,0), the reserve's own
+   * specificity, later in the file. FaceCaptureLayout.css says what happens
+   * to the tag there. */
+  .prizma-screen-shell .prizma-screen-layout__content.prizma-screen-layout__content--capture {
+    padding-bottom: 0;
+  }
+
+  /* ARCHETYPE A (tutorial). The illustration goes: it is the one element that
+   * carries no task information (step 1 of the order), and in landscape it is
+   * also the only one that cannot fit above a title block and a CTA at any
+   * size that still reads (Camila, 2026-10-21: "remove it to have more space,
+   * it's not adding essential information"). Its slot stays as the flexible
+   * middle, so the band keeps sitting at the bottom of the column, above the
+   * tag, where the portrait has it; the title block stays under the logo nav.
+   * Measured on the SE (375): nav 56, title block 77, disclaimer and CTA 105,
+   * the tag's reserve 62, Spacing/16 twice: 316, so the disclaimer stays too.
+   * Addressed by the archetype's own `--tutorial` class (TutorialScreen.tsx),
+   * not by `:has()` on the illustration slot: Core Lab's converter drops
+   * hidden subtrees before the scene is laid out, so a rule that needed the
+   * hidden art to match would vanish on the canvas. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial {
+    /* The logo nav is gone in landscape (below), so the column reserves the
+     * status bar itself, Spacing/8 under it like the result screens. */
+    padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+    /* The column centres its children (the band below is the one that is
+     * narrower than the column). `align-items` on the parent rather than
+     * `align-self` or `margin-inline: auto` on the band: Core Lab's converter
+     * reads a flex container's alignment and ignores per-child margins and
+     * `align-self`, so the first take drew the 420 band at the left edge on
+     * the canvas while the browser centred it (Camila, 2026-10-21). */
+    align-items: center;
+  }
+
+  /* Every other child keeps the full column: `align-items: center` would
+   * otherwise shrink the title block to its content. */
+  .prizma-screen-layout__content--tutorial > :not(.prizma-screen-layout__band) {
+    width: 100%;
+  }
+
+  .prizma-screen-layout__content--tutorial > .prizma-screen-layout__flex > [class*='prizma-illustration-'] {
+    display: none;
+  }
+
+  /* The slot that held the art keeps only its flexible height, not its
+   * Spacing/16 padding above and below: with the illustration gone those 32
+   * are empty, and on the SE they were what pushed the CTA onto the tag once
+   * the status bar came back (QA 2026-10-21). SE budget: nav 91, Spacing/16,
+   * title block 76, band 109, the tag's reserve 62: 354 of 375. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial > .prizma-screen-layout__flex {
+    padding-block: 0;
+  }
+
+  /* The actions take Elena's landscape column: 420, centred (Core Lab
+   * recipes, landscape, read off the Document Capture reference 6701:8042).
+   * A CTA stretched across 796 reads as a bar, not a button; 420 is the
+   * Title's own max width, so the axis is one. The band's tag is anchored to
+   * the shell and already centres. */
+  /* (0,3,0) on purpose: Core Lab's device CSS caps `.prizma-screen-layout__band`
+   * at the panel's column with a (0,2,0) rule declared later, and at 844 that
+   * read as "no cap" on the canvas while the browser kept 420. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial > .prizma-screen-layout__band {
+    width: 100%;
+    max-width: 420px; /* hardcoded — the actions column of Elena's landscape reference, equal to Core's Title max width */
+    gap: var(--prizma-spacing-8); /* Elena's first concession, the same rhythm as the result band below */
+  }
+
+  /* ARCHETYPE F (result with a CTA band). The logo nav goes instead of the
+   * status mark: the mark is the one thing that tells a warning from a
+   * failure, the logo is the client's presence and comes back on the next
+   * screen (Camila, 2026-10-21: remove the logo or the icon, keep the text,
+   * bring the button down). The title block centres in what is left above the
+   * band; the band keeps its portrait seat at the bottom, above the tag, with
+   * #F-37's compact rhythm already in force under 720. Measured on the SE:
+   * title block with its mark 153, band 101, the tag's reserve 62, Spacing/16:
+   * 332 in 375. The genericErrors family has no nav to begin with. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-nav {
+    display: none;
+  }
+
+  /* The title block sits at a FIXED offset under the status bar and the band
+   * at the bottom: Spacing/8 under the reserve clears the bar on both frames
+   * (mark at 55 with 47; Elena's bar ends at 54). Not `safe center`: the
+   * portrait column centres the title block in the free height, which on the
+   * SE left the mark 2.9 px inside the bar and 12.1 when the subtitle wrapped,
+   * and Core Lab's converter does not centre a column's children at all, so
+   * the canvas and the browser disagreed about where the mark was. A fixed
+   * seat is the same on both. SE budget, worst case (two-line subtitle):
+   * 55 + 132 + 16 + 109 + 62 = 374 of 375, with the band's gap conceded
+   * below. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__content {
+    padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+    justify-content: flex-start;
+  }
+
+  /* Same 420 column for the result band, centred. The band stays full width
+   * and centres its own rows (disclaimer, CTAs, extra content), each capped
+   * at 420: `align-items` on a flex column is what Core Lab's converter reads,
+   * while `margin-inline: auto` on the band, or `align-items` on the shell
+   * (whose anchored footer and tag it lays out by hand), centred in the
+   * browser and pinned the band left on the canvas (Camila, 2026-10-21).
+   * (0,3,0) for the same reason as the tutorial band above. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result {
+    width: 100%;
+    align-items: center;
+    box-sizing: border-box;
+    /* Elena's first concession (Core Lab recipes, landscape): gaps 16 to 8
+     * before anything else goes. It is what keeps the two-line result stack
+     * inside the 375 SE under the restored status bar. */
+    gap: var(--prizma-spacing-8);
+  }
+
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result > * {
+    width: 100%;
+    max-width: 420px; /* hardcoded — Elena's actions column, equal to Core's Title max width */
+  }
+
+  /* NO LOGO, NO TAG on any landscape screen (Camila, 2026-10-23: "they take
+   * up space that could be used by the content"). The nav row (the client
+   * logo's seat) and the verified tag go on every family; the capture screens
+   * had already dropped both. The columns that reserved the tag's 62 at the
+   * bottom keep Spacing/16 instead, and the result band sits Spacing/16 off
+   * the bottom; the capture column keeps its 0 so the ring's centre does not
+   * move. The status bar stays reserved by the columns themselves. */
+  .prizma-screen-shell > .prizma-screen-nav,
+  .prizma-screen-shell .prizma-screen-layout__footer,
+  .prizma-screen-shell .prizma-screen-layout__band__tag {
+    display: none;
+  }
+
+  .prizma-screen-shell:has(.prizma-screen-layout__band__tag) .prizma-screen-layout__content:not(.prizma-screen-layout__content--capture) {
+    padding-bottom: var(--prizma-spacing-16);
+  }
+
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result {
+    margin-bottom: var(--prizma-spacing-16);
+  }
+
+  /* The band's disclaimer ("2 attempts remaining", "Stay still…") stays on
+   * one line: in the 420 column every disclaimer the module ships fits, and
+   * Core Lab's converter wrapped it to its first word otherwise (Camila,
+   * 2026-10-23: "remaining attempts should always be in one line"). */
+  .prizma-screen-layout__band .prizma-disclaimer__text {
+    white-space: nowrap;
+  }
+}
+
 /* ── 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

package/src/ScreenShell.css

@@ -25,6 +25,19 @@
    * layout paint` does both without forcing a composited layer the way
    * `transform` would. */
   contain: layout paint;
+  /* And it is the WINDOW Core's presenters size their overlays to. The Modal
+   * and Bottom sheet presenters draw their scrim `position: fixed` with
+   * `height: var(--prizma-overlay-height, 100dvh)` and pin the panel to the
+   * scrim's bottom, so a host whose fixed children land inside a box smaller
+   * than the viewport has to say so. Unsaid, the scrim inside this shell was
+   * the browser's height and the sheet sat at the browser's bottom edge, below
+   * the frame: on the closed iPhone Duo (678) Qualified Signature's certificate
+   * popups showed only the sheet's title peeking in at the bottom, on the open
+   * panel (626) nothing but scrim (measured 2026-10-29). 100% of the shell is
+   * the window, whatever the panel; on a real device the shell IS the viewport
+   * and the value reads the same. DEVIATIONS #F-41. */
+  --prizma-overlay-top: 0px;
+  --prizma-overlay-height: 100%;
 }
 
 /* Camera viewfinder screens — always a dark stage regardless of theme.

package/src/TutorialScreen.tsx

@@ -109,7 +109,10 @@ export const PrizmaTutorialScreen = forwardRef<HTMLDivElement, PrizmaTutorialScr
       {progress ? (
         <div className="prizma-screen-layout__progress">{progress}</div>
       ) : null}
-      <div className="prizma-screen-layout__content">
+      {/* `--tutorial` names the archetype on the column so the landscape rule
+          in ScreenLayout.css (#F-39) can address it without `:has()` on the
+          illustration slot, which that rule hides. Portrait styles none of it. */}
+      <div className="prizma-screen-layout__content prizma-screen-layout__content--tutorial">
         <PrizmaTitle
           variant={overrides?.align === 'left' ? 'left' : 'centered'}
           title={title}

package/src/index.ts

@@ -181,6 +181,48 @@ export {
   DigitalIdUploadFileTooLargeScreen,
   type DigitalIdUploadFileTooLargeScreenProps,
 } from './DigitalIdUploadFileTooLargeScreen';
+// ── Digital ID Device Wallets ───────────────────────────────────────────────
+// Digital IDs - Latest Design Figma file (u7N5Zq4bfOwiVbpKHKmSPE), section
+// `iOS Apple Wallet` (node 26103:3689): the chooser with the wallet row and the
+// generic error. The Apple Wallet sheet is OS chrome and not built — see
+// DigitalIdDeviceWalletsStrings.ts header.
+export {
+  type DigitalIdDeviceWalletsStrings,
+  type DigitalIdDeviceWalletsPlatformWallet,
+  type DigitalIdDeviceWalletsResultState,
+  type DigitalIdDeviceWalletsOption,
+} from './DigitalIdDeviceWalletsStrings';
+export {
+  DigitalIdDeviceWalletsDocumentSelectionScreen,
+  type DigitalIdDeviceWalletsDocumentSelectionScreenProps,
+} from './DigitalIdDeviceWalletsDocumentSelectionScreen';
+export {
+  DigitalIdDeviceWalletsResultScreen,
+  type DigitalIdDeviceWalletsResultScreenProps,
+} from './DigitalIdDeviceWalletsResultScreen';
+// ── Digital ID Providers ────────────────────────────────────────────────────
+// Digital ID Providers - Latest Designs Figma file (q0wiyQkLXxGQ2jkPEutxR8):
+// the chooser (27753:8099) and the web full flow (27707:9237) — Redirecting
+// and five errors. The provider's own pages are OS chrome and not built; see
+// DigitalIdProvidersStrings.ts header.
+export {
+  type DigitalIdProvidersStrings,
+  type DigitalIdProvidersErrorState,
+  type DigitalIdProvidersOption,
+  type DigitalIdProvidersSelection,
+} from './DigitalIdProvidersStrings';
+export {
+  DigitalIdProvidersDocumentSelectionScreen,
+  type DigitalIdProvidersDocumentSelectionScreenProps,
+} from './DigitalIdProvidersDocumentSelectionScreen';
+export {
+  DigitalIdProvidersRedirectScreen,
+  type DigitalIdProvidersRedirectScreenProps,
+} from './DigitalIdProvidersRedirectScreen';
+export {
+  DigitalIdProvidersErrorScreen,
+  type DigitalIdProvidersErrorScreenProps,
+} from './DigitalIdProvidersErrorScreen';
 // ── ID Capture ──────────────────────────────────────────────────────────────
 // Purple sections of the ID Capture Figma file (U1EOfl9RQ1rOlOIuQw3rhL, page
 // 16285:41282) — 100 spec sections across 13 parent groups, collapsed onto 12

package/src/styles.css

@@ -16,6 +16,7 @@
 @import './CurpLayout.css';
 @import './DataSharingConsentLayout.css';
 @import './DemoScreensLayout.css';
+@import './DigitalIdProvidersLayout.css';
 @import './DocumentCaptureLayout.css';
 @import './EkycLayout.css';
 @import './ElectronicSignatureLayout.css';