@incodetech/prizma-core-screens 0.2.7 → 0.2.14

package/src/OcrReviewSuccessScreen.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { OcrReviewStrings } from './OcrReviewStrings';
+import './ScreenLayout.css';
+
+export interface OcrReviewSuccessScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `success` slice. */
+  strings: OcrReviewStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * OCR Review — "Identity successfully verified", built on Archetype F
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`). Figma: `OCR Success` (31084:18796),
+ * the "Processed successfully?" decision's "Yes" branch — status mark + title
+ * alone, no CTA drawn (the frame hands off straight to the next module).
+ *
+ * Nav and footer tag are left at the archetype's DEFAULT (shown), matching
+ * every other module's success screen (`EkycSuccessScreen`, `EkybSuccessScreen`,
+ * `NfcSuccessScreen`, `FormsSuccessScreen`, …) — none of them hide header or
+ * footer. The Figma frame itself draws neither, but copying that as a
+ * per-screen override was wrong: hiding BOTH with no CTA band to balance it
+ * left nothing reserved at the bottom, so the status + title sat noticeably
+ * lower than the centred position every sibling success screen keeps (Mili,
+ * 2026-10-12 — checked against the system's own screens, not re-derived from
+ * the frame).
+ */
+export const OcrReviewSuccessScreen = forwardRef<HTMLDivElement, OcrReviewSuccessScreenProps>(
+  ({ strings, screenId = 'ocr-review-success', overrides, onAction, ...shell }, ref) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="success"
+      title={strings.success.title}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+OcrReviewSuccessScreen.displayName = 'OcrReviewSuccessScreen';
+
+export default OcrReviewSuccessScreen;

package/src/PermissionsAllowScreen.tsx

@@ -13,6 +13,7 @@ export interface PermissionsAllowScreenProps
     | 'glyph'
     | 'ctaLabel'
     | 'linkLabel'
+    | 'linkPosition'
     | 'verifiedLabel'
     | 'navLabel'
   > {
@@ -42,16 +43,13 @@ export interface PermissionsAllowScreenProps
  * `showHeader={false}` keeps the section's logo-free chrome (the flow has not
  * started) with the nav row still reserved.
  *
- * TWO things Figma draws that this screen does not, both reported rather than
- * worked around:
- * - **The filled amber disc.** Core renders the canonical OUTLINE warning mark
- *   (icon-outline sweep, DEVIATIONS #15).
- * - **"Quit process" above the CTA.** Archetype F renders its tertiary link
- *   BELOW the button stack (`ResultScreen.tsx`), so this screen ships inverted
- *   against its frame. The archetype owns the order and no screen re-declares
- *   it — F needs a `ctaOrder` slot alongside the `ctaOrientation` it already
- *   has, exactly as Geolocation escalated for the same reason. Borrowing
- *   `bandContent` to fake the position is the workaround #VS-17 rejected.
+ * "Quit process" sits ABOVE "Allow permission", as the frame draws it, through
+ * archetype F's `linkPosition="above"` (DEVIATIONS #GEN-3). Its sibling
+ * `PermissionsRequiredScreen` (archetype G) already renders that order.
+ *
+ * One thing Figma draws that this screen does not, reported rather than worked
+ * around: **the filled amber disc.** Core renders the canonical OUTLINE warning
+ * mark (icon-outline sweep, DEVIATIONS #15).
  */
 export const PermissionsAllowScreen = forwardRef<
   HTMLDivElement,
@@ -76,6 +74,7 @@ export const PermissionsAllowScreen = forwardRef<
       subtitle={strings.allow.subtitle}
       ctaLabel={strings.allow.ctaLabel}
       linkLabel={strings.allow.quitLabel}
+      linkPosition="above"
       verifiedLabel={strings.verifiedLabel}
       navLabel={strings.navLabel}
       screenId={screenId}

package/src/PermissionsAskScreen.tsx

@@ -0,0 +1,105 @@
+import React, { forwardRef } from 'react';
+import { PrizmaBottomSheetContent } from '@incodetech/prizma-core-web/bottom-sheet';
+import { PrizmaModalContent } from '@incodetech/prizma-core-web/modal';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler } from './types';
+import type { PermissionsStrings } from './PermissionsStrings';
+import './ScreenLayout.css';
+import './PermissionsLayout.css';
+
+export interface PermissionsAskScreenProps extends Omit<
+  PrizmaScreenShellProps,
+  'dark' | 'title' | 'children'
+> {
+  /** Family copy — this screen reads the `ask` slice. */
+  strings: PermissionsStrings;
+  /**
+   * How the ask is presented. `sheet` (default) is the phone frame's bottom
+   * sheet. `dialog` is Core's centred Modal, for a desktop browser window: a
+   * sheet pinned to the bottom of a wide window reads as a phone screen pasted
+   * on the page (Camila, 2026-10-07). Same copy, same two choices.
+   */
+  presentation?: 'sheet' | 'dialog';
+  screenId?: string;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Permissions — the pre-permission sheet, "Allow camera access".
+ *
+ * Figma: `1-3-1-id-permission-modal` (qGJjfL4O0JSjz1x4tOjJn8), the first frame
+ * of all three full-flow boards (Web 3:620, iOS 3:7788, Android 4:11304). It is
+ * the SDK's own sheet, not the browser's prompt: Core's Bottom Sheet `dialog`
+ * (handle, title, supporting line) carrying a horizontal Button Group with
+ * "Don't allow" (secondary) left of "Allow" (primary), which is
+ * `horizontal-v1`'s order. "Allow" is what raises the real OS prompt.
+ *
+ * On desktop (`presentation="dialog"`) the same ask is Core's Modal `default`
+ * variant, centred over the scrim the way NFC's settings dialog is: Core
+ * renders the card and its Button Group (its own `vertical-v1` default, Allow
+ * over Don't allow), the screen adds only the scrim and the centring. No close
+ * icon: the two buttons are the only answers the ask has.
+ *
+ * Nothing is drawn behind the sheet: every board shows the sheet over an empty
+ * frame, so the screen is the scrim alone. Same scrim + panel split as
+ * Document Capture's method sheet (#DC-30).
+ */
+export const PermissionsAskScreen = forwardRef<HTMLDivElement, PermissionsAskScreenProps>(
+  (
+    {
+      strings,
+      presentation = 'sheet',
+      screenId = presentation === 'dialog' ? 'permissions-ask-dialog' : 'permissions-ask',
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaScreenShell
+      ref={ref}
+      data-screen-id={screenId}
+      // A dialog dims the whole browser window, not a column of it. Hosts that
+      // frame screens (Core Lab's desktop card) read this to let the screen
+      // span the window.
+      data-pcs-overlay={presentation === 'dialog' ? 'window' : undefined}
+      {...shell}
+    >
+      <div className="permissions-sheet-scrim" aria-hidden="true" />
+      {presentation === 'dialog' ? (
+        <div className="permissions-dialog-panel">
+          <PrizmaModalContent
+            title={strings.ask.title}
+            subtitle={strings.ask.subtitle}
+            showCloseIcon={false}
+            buttonGroupProps={{
+              primaryLabel: strings.ask.allowLabel,
+              secondaryLabel: strings.ask.denyLabel,
+              onPrimaryClick: () => onAction?.({ type: 'cta', screenId }),
+              onSecondaryClick: () => onAction?.({ type: 'secondary', screenId }),
+            }}
+          />
+        </div>
+      ) : (
+        <div className="permissions-sheet-panel">
+          <PrizmaBottomSheetContent
+            variant="dialog"
+            ariaLabel={strings.ask.title}
+            title={strings.ask.title}
+            subtitle={strings.ask.subtitle}
+            buttonGroupProps={{
+              orientation: 'horizontal-v1',
+              primaryLabel: strings.ask.allowLabel,
+              secondaryLabel: strings.ask.denyLabel,
+              showTertiary: false,
+              onPrimaryClick: () => onAction?.({ type: 'cta', screenId }),
+              onSecondaryClick: () => onAction?.({ type: 'secondary', screenId }),
+            }}
+          />
+        </div>
+      )}
+    </PrizmaScreenShell>
+  ),
+);
+PermissionsAskScreen.displayName = 'PermissionsAskScreen';
+
+export default PermissionsAskScreen;

package/src/PermissionsBrowserStepsScreen.tsx

@@ -29,6 +29,7 @@ import './ScreenLayout.css';
  * both forbidden (rule 1, GUIDELINES §10), so each row takes the nearest
  * canonical glyph:
  *
+ *   addressBar  → IconTextAi          the address bar's page / site control
  *   settings    → IconLock            site settings sit behind the address-bar lock
  *   browser     → IconTextAi          Safari's "AA" is the address-bar text control
  *   menu        → IconNumberedList    the ⋮ overflow opens a menu list
@@ -45,6 +46,7 @@ import './ScreenLayout.css';
  * glyphs or bless the substitutions — one decision covers both families.
  */
 const STEP_ICONS: Record<PermissionsStepKind, ReactNode> = {
+  addressBar: <IconTextAi size="m" />,
   settings: <IconLock size="m" />,
   browser: <IconTextAi size="m" />,
   menu: <IconNumberedList size="m" />,
@@ -83,15 +85,22 @@ export interface PermissionsBrowserStepsScreenProps
  *
  * Figma: `1-4-2-id` of the `Permissions` section, plus the four
  * `Android browsers` frames of the Web full-flow board (4:8159 — Chrome,
- * Firefox, Samsung Internet, Opera). ONE screen for all five: they draw the
+ * Firefox, Samsung Internet, Opera). The browser set and every step path are
+ * Geolocation's (`GeolocationBrowserStepsScreen`), nine browsers, with the
+ * camera in place of the location. ONE screen for all of them: they draw the
  * identical skeleton — title block → a step list filling the middle → the
  * refresh CTA — and differ only in the rows, because re-enabling the camera is
- * a different journey in each browser. Five files would have been five chances
+ * a different journey in each browser. Nine files would have been nine chances
  * to drift.
  *
  * The rows are Core's `PrizmaCardListCommonIssues` verbatim; only the leading
  * glyph is chosen here, from the canonical bank (see `STEP_ICONS`).
  *
+ * No subtitle: none of the frames draws the browser name under the title,
+ * and the same call was made for Geolocation's step lists (owner call, Elena
+ * 2026-09-30). `label` stays in the strings as the section's identifier for
+ * hosts and catalogs; the screen itself shows title + steps.
+ *
  * The title block is LEFT-aligned for this whole family. Every frame starts the
  * two-line headline flush at the gutter over left-led step rows; a centred
  * headline above a left-aligned list reads as a mistake. The screen therefore
@@ -133,7 +142,6 @@ export const PermissionsBrowserStepsScreen = forwardRef<
         ref={ref}
         showHeader={showHeader}
         title={strings.browserSteps.title}
-        subtitle={slice?.label}
         ctaLabel={strings.browserSteps.ctaLabel}
         verifiedLabel={strings.verifiedLabel}
         navLabel={strings.navLabel}

package/src/PermissionsLayout.css

@@ -0,0 +1,47 @@
+/* Permissions — the pre-permission sheet (`PermissionsAskScreen`).
+ *
+ * Same idiom as Document Capture's method sheet (DEVIATIONS #DC-30): Core's
+ * `PrizmaBottomSheetContent` owns the panel (handle, radius, padding, title,
+ * button group); the screen owns the scrim, because the safe presenter portals
+ * to `document.body` and would escape the 390 × 844 frame. The scrim drinks
+ * Core's own `Surface/Overlay` token. No animation: a screen is one static
+ * spec state. */
+.permissions-sheet-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: var(--prizma-surface-overlay);
+}
+
+.permissions-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, var(--prizma-sheet-size-safe-area))`, 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 in this
+ * package reserve device chrome as fixed values (`--pcs-status-bar`), so the
+ * sheet takes Core's own Sheet/Size/Safe-area token directly here. */
+.permissions-sheet-panel .prizma-bottom-sheet__safe-area {
+  height: var(--prizma-sheet-size-safe-area);
+}
+
+/* Desktop: the same ask as Core's centred Modal (`presentation="dialog"`).
+ * Same split as NFC's settings dialog: Core's `PrizmaModalContent` is the card
+ * (width 100% up to its own Modal/Size/Max-width), this only centres it with
+ * the Spacing/12 gutter. */
+.permissions-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;
+}

package/src/PermissionsStrings.ts

@@ -12,20 +12,26 @@
 // is the ID Capture-flavoured copy of the same skeleton; it stays where it is so
 // nothing that imports it breaks (DEVIATIONS #IDC-26).
 //
-// The section's seven frames collapse onto THREE built screens:
+// The section's seven frames collapse onto FOUR built screens:
 //
+//   1-3-1-id-permission-modal         → PermissionsAskScreen       (the sheet)
 //   1-3-2-id                          → PermissionsRequiredScreen  (reason rows)
 //   1-3-2-id-allow-camera             → PermissionsAllowScreen     (subtitle)
 //   1-4-2-id (+ 4 Android siblings)   → PermissionsBrowserStepsScreen
 //
-// The other four are OS chrome and are NOT built:
+// The other three are OS chrome and are NOT built:
 //
-//   1-3-1-id-permission-modal   the browser's own "Allow camera access" sheet
 //   1-4-1-id                    the iOS "…Would Like to Access the Camera" alert
 //   1-3-2-id-quit-process       an iOS confirm alert layered over 1-3-2-id
 //   1-3-2-id-allow-camera-quit  the same alert layered over the allow screen
 //
-// None of them is a Prizma surface: their chrome does not exist in Core and
+// `1-3-1-id-permission-modal` was on this list until 2026-10-07. It is not the
+// browser's prompt: it is the SDK's own camera pre-permission sheet (the SDK
+// release notes call it "the camera permission sheet", shown by every module
+// that asks for the camera), drawn with Core's Bottom Sheet dialog and Button
+// Group. So it is built, from those two components (DEVIATIONS #GEN-1).
+//
+// None of the remaining three is a Prizma surface: their chrome does not exist in Core and
 // rebuilding it would mean inventing primitives and shipping platform rasters,
 // both forbidden (rule 1, GUIDELINES §10). Same call as Document Capture's iOS
 // action sheets (#DC-20) and Geolocation's system alert. Core Lab draws them as
@@ -49,18 +55,30 @@ export interface PermissionsReasonRow {
 }
 
 /**
- * Which browser's "turn it back on" journey to show. `safariIos` is the base
- * `1-4-2-id` frame; the other four are the `Android browsers` section of the
- * Web flow (4:8159). Re-enabling a permission is a different journey in every
- * browser, which is why one screen carries five step lists rather than five
- * screens carrying one skeleton.
+ * Which browser's "turn it back on" journey to show. The SAME nine browsers,
+ * keys and order as Geolocation's (`GeolocationBrowser`), because a refused
+ * camera and a refused location are the same journey through the same browser
+ * settings; only the permission's name changes (Camila, 2026-10-07). The
+ * Permissions Figma draws five of them (`1-4-2-id` for Safari plus the four
+ * `Android browsers` frames, 4:8159); the other four follow Geolocation.
  */
 export type PermissionsBrowser =
   | 'safariIos'
+  | 'chromeIos'
+  | 'firefoxIos'
+  | 'operaIos'
   | 'chromeAndroid'
   | 'firefoxAndroid'
+  | 'operaAndroid'
   | 'samsungAndroid'
-  | 'operaAndroid';
+  | 'unrecognizedAndroid'
+  // Desktop browsers. Not in Geolocation's set: a phone's lists send the user
+  // to the Settings app on an iPhone, which means nothing on a computer, so the
+  // desktop flow carries its own four (2026-10-07).
+  | 'chromeDesktop'
+  | 'edgeDesktop'
+  | 'firefoxDesktop'
+  | 'safariMac';
 
 /**
  * Step kind → canonical bank glyph, resolved in
@@ -73,6 +91,7 @@ export type PermissionsBrowser =
  * than inventing a second one.
  */
 export type PermissionsStepKind =
+  | 'addressBar'
   | 'settings'
   | 'browser'
   | 'menu'
@@ -90,7 +109,7 @@ export interface PermissionsStep {
 
 export interface PermissionsBrowserSteps {
   /** Names the browser under the headline. Figma labels the section, not the
-   *  screen; the label keeps five otherwise near-identical cards apart. */
+   *  screen; the label keeps nine otherwise near-identical cards apart. */
   label: string;
   steps: PermissionsStep[];
 }
@@ -101,6 +120,17 @@ export interface PermissionsStrings {
   /** "verified by" attribution copy for the footer tag. */
   verifiedLabel: string;
 
+  /** `1-3-1-id-permission-modal` — the pre-permission sheet, the very first
+   *  ask. Its "Allow" is what raises the real OS prompt. */
+  ask: {
+    title: string;
+    subtitle?: string;
+    /** Primary — raises the OS prompt. */
+    allowLabel: string;
+    /** Secondary — declines; the flow moves on to `required`. */
+    denyLabel: string;
+  };
+
   /** `1-3-2-id` — the permission was refused and the flow explains why it needs it. */
   required: {
     title: string;
@@ -112,7 +142,7 @@ export interface PermissionsStrings {
     ctaLabel: string;
   };
 
-  /** `1-3-2-id-allow-camera` — the first ask, before any refusal. */
+  /** `1-3-2-id-allow-camera` — the softer ask after the REAL OS prompt was refused. */
   allow: {
     title: string;
     subtitle?: string;

package/src/PhoneInputOtpScreen.tsx

@@ -19,6 +19,14 @@ export interface PhoneInputOtpScreenProps
   value?: string;
   /** How many digits the code carries. Default 6. */
   length?: number;
+  /**
+   * Seconds left before the code can be resent. While it is above 0 (and the
+   * copy carries `otp.resendCountdownLabel`), the resend line becomes one
+   * disabled link, "Resend code in 30s", exactly as Figma draws
+   * `phoneNumber.OTP.typing`. The host owns the timer; the screen only draws
+   * the number it is given.
+   */
+  resendIn?: number;
   screenId?: string;
   overrides?: PrizmaScreenOverrides;
   onAction?: PrizmaScreenActionHandler;
@@ -47,13 +55,16 @@ export const PhoneInputOtpScreen = forwardRef<HTMLDivElement, PhoneInputOtpScree
       state = 'typing',
       value,
       length = 6,
+      resendIn,
       screenId = `phone-input-otp-${state}`,
       overrides,
       onAction,
       ...shell
     },
     ref,
-  ) => (
+  ) => {
+    const counting = (resendIn ?? 0) > 0 && Boolean(strings.otp.resendCountdownLabel);
+    return (
     <PrizmaFormScreen
       ref={ref}
       title={strings.otp.title}
@@ -70,8 +81,16 @@ export const PhoneInputOtpScreen = forwardRef<HTMLDivElement, PhoneInputOtpScree
          than `linkLabel` (a full-width 56px button cannot sit inside a line of
          body text, and one button could not tell the two actions apart —
          DEVIATIONS #PI-10). */
+      /* While the resend timer runs, the line is ONE disabled link (Figma
+         `OTP.typing`: Tertiary / Link · Disabled), not the composed sentence. */
+      linkLabel={
+        counting
+          ? strings.otp.resendCountdownLabel!.replace('{{time}}', String(resendIn))
+          : undefined
+      }
+      linkDisabled={counting}
       linkContent={
-        strings.otp.resendPrompt ? (
+        !counting && strings.otp.resendPrompt ? (
           <p className="prizma-screen-layout__inline-prompt">
             {strings.otp.resendPrompt}{' '}
             {strings.otp.resendLabel ? (
@@ -119,7 +138,8 @@ export const PhoneInputOtpScreen = forwardRef<HTMLDivElement, PhoneInputOtpScree
         errorText={state === 'error' ? strings.otp.errorText : undefined}
       />
     </PrizmaFormScreen>
-  ),
+    );
+  },
 );
 PhoneInputOtpScreen.displayName = 'PhoneInputOtpScreen';
 

package/src/PhoneInputStrings.ts

@@ -50,8 +50,9 @@ export type PhoneInputOtpState = 'typing' | 'filled' | 'processing' | 'error';
 export type PhoneInputErrorVariant = 'tryAgain' | 'unknown' | 'noNetwork';
 
 /** One selectable country in the dial-code dropdown. Runtime data, not copy —
- *  the host supplies its own list; `flag` is the emoji Figma draws (Core has no
- *  country-flag primitive — DEVIATIONS #PI-3). */
+ *  the host supplies its own list. The screen draws the flag from Core's
+ *  raster bank by `value` (`PrizmaCountryFlag`, DEVIATIONS #PI-3); `flag` is
+ *  only the emoji fallback for a country outside the bank. */
 export interface PhoneInputCountry {
   /** Stable value, e.g. an ISO 3166-1 alpha-2 code. */
   value: string;
@@ -59,7 +60,7 @@ export interface PhoneInputCountry {
   dialCode: string;
   /** Country name for the open menu row. */
   label: string;
-  /** Emoji flag, e.g. `🇷🇸`. */
+  /** Emoji fallback, e.g. `🇷🇸`, drawn only when the bank has no raster. */
   flag?: string;
 }
 
@@ -127,6 +128,13 @@ export interface PhoneInputStrings {
     resendSeparator?: string;
     /** Second link — returns to phone entry. Emits `tertiary`. */
     changeNumberLabel?: string;
+    /**
+     * While the resend timer runs, the resend line is replaced by ONE disabled
+     * link: "Resend code in {{time}}s" (Figma `phoneNumber.OTP.typing`). The
+     * `{{time}}` placeholder is the SDK's own (`otp.resendCountdown`) and is
+     * filled with the screen's `resendIn` seconds.
+     */
+    resendCountdownLabel?: string;
     /** Primary CTA. */
     ctaLabel: string;
     /** Accessible / visible busy copy while the code is checked (`processing`). */

package/src/PhoneInputVerifyScreen.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaCountryFlag } from '@incodetech/prizma-core-web/combined';
 import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type {
@@ -83,10 +84,13 @@ export const PhoneInputVerifyScreen = forwardRef<HTMLDivElement, PhoneInputVerif
     const options = countries.map((c) => ({
       value: c.value,
       // The open menu row reads flag + dial code + country name
-      // ("🇷🇸 +381 Serbia"); the closed field keeps only flag + dial code
-      // ("🇷🇸 +381") through Core's `fieldLabel`, exactly as Figma draws it.
-      label: [c.flag, c.dialCode, c.label].filter(Boolean).join(' '),
-      fieldLabel: [c.flag, c.dialCode].filter(Boolean).join(' '),
+      // ("+381 Serbia" after the flag); the closed field keeps only flag +
+      // dial code ("+381") through Core's `fieldLabel`, as Figma draws it.
+      // The flag is not text: it rides the leading slot below (DEVIATIONS
+      // #PI-3), so it is Core's raster on every OS instead of an emoji that
+      // Windows draws as the letters "RS".
+      label: [c.dialCode, c.label].join(' '),
+      fieldLabel: c.dialCode,
     }));
 
     // Figma treats the states as three distinct field treatments, not one:
@@ -133,6 +137,22 @@ export const PhoneInputVerifyScreen = forwardRef<HTMLDivElement, PhoneInputVerif
             searchPlaceholder={strings.verify.countrySearchPlaceholder}
             /* The `countryCode` section IS the open-menu spec state. */
             forceOpen={state === 'countryCode'}
+            /* Core's canonical flag raster in the closed field and every menu
+               row, the WatchlistBusinessFormScreen precedent. A country
+               outside the bank falls back to its `flag` emoji. */
+            renderLeading={(option) => {
+              const match = countries.find((c) => c.value === option.value);
+              return match ? (
+                <PrizmaCountryFlag
+                  country={{
+                    code: match.value,
+                    name: match.label,
+                    dialCode: match.dialCode,
+                    flag: match.flag ?? '',
+                  }}
+                />
+              ) : null;
+            }}
             disabled={busy}
           />
           <PrizmaTextField

package/src/QualifiedSignatureDocumentScreen.tsx

@@ -55,16 +55,19 @@ export interface QualifiedSignatureDocumentScreenProps
  *
  * Archetype G is the fit: its `__list` middle is "content filling the space
  * between the title block and the CTA band", which is exactly what a document
- * page is, and both sections carry no CTA at all so the band never renders. The
+ * page is, and the band carries only the "Back" secondary (delta 1). The
  * body is allowed to scroll inside that middle — one module rule RELEASING an
  * overflow constraint, declaring no spacing or size, the same idiom as CURP's
  * taller-than-844 form (DEVIATIONS #CURP-1).
  *
  * THREE deltas from the frames:
- * 1. Both sections draw a back chevron at the nav's left. It is BUILT (owner
- *    call 2026-09-29): these are viewers the user opened from the accept
- *    screen, so they need a way back. It is Core's chevron through the opt-in
- *    `PrizmaScreenNav.backLabel`, emitting `back`; the logo stays centred.
+ * 1. Both sections draw a back chevron at the nav's left. These are viewers
+ *    the user opened from the accept screen, so they need a way back (owner
+ *    call 2026-09-29). It ships as a full-width SECONDARY "Back" button in the
+ *    CTA band instead, emitting `secondary` (owner call 2026-10-08): the person
+ *    reads and returns to sign, and a real button at the thumb is easier to
+ *    find than a chevron. "Back" over "Done" because nothing is finished here;
+ *    the signature still waits on the accept screen. The nav stays logo-only.
  *    `terms` replacing the logo row with a chevron + heading bar is still not
  *    followed — the title stays the archetype's H2 below the nav.
  * 2. `viewdoc` draws NO heading. GUIDELINES §4 is explicit that every screen has
@@ -100,14 +103,13 @@ export const QualifiedSignatureDocumentScreen = forwardRef<
   ) => {
     const copy = variant === 'terms' ? strings.document.terms : strings.document.document;
 
-
     return (
       <PrizmaListScreen
         ref={ref}
         title={copy.title}
         verifiedLabel={strings.verifiedLabel}
         navLabel={strings.navLabel}
-        backLabel={strings.document.backLabel}
+        secondaryCtaLabel={strings.document.backLabel}
         screenId={screenId}
         overrides={overrides}
         onAction={onAction}