@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/dist/PermissionsAskScreen.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaBottomSheetContent } from '@incodetech/prizma-core-web/bottom-sheet';
+import { PrizmaModalContent } from '@incodetech/prizma-core-web/modal';
+import { PrizmaScreenShell } from './ScreenShell';
+import './ScreenLayout.css';
+import './PermissionsLayout.css';
+/**
+ * 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(({ strings, presentation = 'sheet', screenId = presentation === 'dialog' ? 'permissions-ask-dialog' : 'permissions-ask', onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, "data-pcs-overlay": presentation === 'dialog' ? 'window' : undefined, ...shell, children: [_jsx("div", { className: "permissions-sheet-scrim", "aria-hidden": "true" }), presentation === 'dialog' ? (_jsx("div", { className: "permissions-dialog-panel", children: _jsx(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 }),
+                } }) })) : (_jsx("div", { className: "permissions-sheet-panel", children: _jsx(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 }),
+                } }) }))] })));
+PermissionsAskScreen.displayName = 'PermissionsAskScreen';
+export default PermissionsAskScreen;

package/dist/PermissionsBrowserStepsScreen.d.ts

@@ -18,15 +18,22 @@ export interface PermissionsBrowserStepsScreenProps extends Omit<PrizmaListScree
  *
  * 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

package/dist/PermissionsBrowserStepsScreen.js

@@ -15,6 +15,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
@@ -31,6 +32,7 @@ import './ScreenLayout.css';
  * glyphs or bless the substitutions — one decision covers both families.
  */
 const STEP_ICONS = {
+    addressBar: _jsx(IconTextAi, { size: "m" }),
     settings: _jsx(IconLock, { size: "m" }),
     browser: _jsx(IconTextAi, { size: "m" }),
     menu: _jsx(IconNumberedList, { size: "m" }),
@@ -47,15 +49,22 @@ const STEP_ICONS = {
  *
  * 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
@@ -76,7 +85,7 @@ export const PermissionsBrowserStepsScreen = forwardRef(({ strings, browser = 's
         ...overrides,
         align: overrides?.align ?? 'left',
     };
-    return (_jsx(PrizmaListScreen, { ref: ref, showHeader: showHeader, title: strings.browserSteps.title, subtitle: slice?.label, ctaLabel: strings.browserSteps.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: alignedOverrides, onAction: onAction, ...shell, children: _jsx(PrizmaCardListCommonIssues, { items: (slice?.steps ?? []).map((step) => ({
+    return (_jsx(PrizmaListScreen, { ref: ref, showHeader: showHeader, title: strings.browserSteps.title, ctaLabel: strings.browserSteps.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: alignedOverrides, onAction: onAction, ...shell, children: _jsx(PrizmaCardListCommonIssues, { items: (slice?.steps ?? []).map((step) => ({
                 icon: STEP_ICONS[step.kind],
                 title: step.label,
                 showSubtitle: false,

package/dist/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/dist/PermissionsStrings.d.ts

@@ -11,13 +11,14 @@ export interface PermissionsReasonRow {
     description?: string;
 }
 /**
- * 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' | 'chromeAndroid' | 'firefoxAndroid' | 'samsungAndroid' | 'operaAndroid';
+export type PermissionsBrowser = 'safariIos' | 'chromeIos' | 'firefoxIos' | 'operaIos' | 'chromeAndroid' | 'firefoxAndroid' | 'operaAndroid' | 'samsungAndroid' | 'unrecognizedAndroid' | 'chromeDesktop' | 'edgeDesktop' | 'firefoxDesktop' | 'safariMac';
 /**
  * Step kind → canonical bank glyph, resolved in
  * `PermissionsBrowserStepsScreen`. Figma leads every row with OS/browser chrome
@@ -28,14 +29,14 @@ export type PermissionsBrowser = 'safariIos' | 'chromeAndroid' | 'firefoxAndroid
  * escalated (`GeolocationBrowserStepsScreen`); this family reuses it rather
  * than inventing a second one.
  */
-export type PermissionsStepKind = 'settings' | 'browser' | 'menu' | 'permissions' | 'camera' | 'toggle' | 'device' | 'apps' | 'return';
+export type PermissionsStepKind = 'addressBar' | 'settings' | 'browser' | 'menu' | 'permissions' | 'camera' | 'toggle' | 'device' | 'apps' | 'return';
 export interface PermissionsStep {
     kind: PermissionsStepKind;
     label: string;
 }
 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[];
 }
@@ -44,6 +45,16 @@ export interface PermissionsStrings {
     navLabel?: string;
     /** "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;
@@ -54,7 +65,7 @@ export interface PermissionsStrings {
         quitLabel: string;
         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/dist/PermissionsStrings.js

@@ -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

package/dist/PhoneInputLayout.css

@@ -21,6 +21,7 @@
   align-items: flex-start;
   gap: var(--prizma-spacing-8);
   width: 100%;
+  position: relative; /* the country menu's containing block — see below */
 }
 
 /* The dial-code dropdown hugs its content ("🇷🇸 +381"), as Figma draws it.
@@ -47,15 +48,15 @@
   min-width: 0;
 }
 
-/* The open menu must NOT inherit the hugged anchor's width: Core anchors the
- * menu to the trigger, so once the trigger hugs "🇷🇸 +381" the option rows
- * truncate ("+…"). The menu keeps its own readable width — it lists country
- * names and dial codes, which the closed field never shows. Sized to the
- * content and capped at the 342 column so it never escapes the screen.
+/* The open menu spans the WHOLE row (dial code + number field), as Figma's
+ * `Input / Combined` draws it: Core anchors the menu overlay to the trigger's
+ * `__anchor` (`position: relative`, Dropdown.css), so once the trigger hugs
+ * "🇷🇸 +381" the menu came out as narrow as the dial code. Releasing the
+ * anchor's positioning hands the overlay's `left: 0; right: 0` to the row
+ * above (`position: relative`), so the menu matches the row's width exactly.
+ * Core's own overlay offset (`top: 100% + Spacing/8`) is left untouched.
  * DEVIATIONS #PI-1 (same root cause as the hug).
  */
-.phone-input-combined__country .prizma-dropdown__menu {
-  width: max-content;
-  min-width: 100%;
-  max-width: 342px;
+.phone-input-combined__country .prizma-dropdown__anchor {
+  position: static;
 }

package/dist/PhoneInputOtpScreen.d.ts

@@ -13,6 +13,14 @@ export interface PhoneInputOtpScreenProps extends Omit<PrizmaFormScreenProps, 't
     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;

package/dist/PhoneInputOtpScreen.js

@@ -21,24 +21,31 @@ import './PhoneInputLayout.css';
  * wins; `PrizmaOtp.loading` stays correct for hosts that want the in-field
  * spinner. DEVIATIONS #PI-5.
  */
-export const PhoneInputOtpScreen = forwardRef(({ strings, state = 'typing', value, length = 6, screenId = `phone-input-otp-${state}`, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaFormScreen, { ref: ref, title: strings.otp.title, subtitle: strings.otp.subtitle, ctaLabel: strings.otp.ctaLabel, 
-    /* Figma greys the CTA until the code is complete. */
-    ctaDisabled: state === 'typing', 
-    /* The spinner rides the CTA, not the field (see the note above). */
-    ctaLoading: state === 'processing', ctaLoadingLabel: strings.otp.ctaLoadingLabel, 
-    /* "Didn't receive the code? Resend code or Change phone number" — drawn
-       under the CTA on every OTP section. ONE sentence, TWO independently
-       actionable links, so it uses the archetype's composed-line slot rather
-       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). */
-    linkContent: strings.otp.resendPrompt ? (_jsxs("p", { className: "prizma-screen-layout__inline-prompt", children: [strings.otp.resendPrompt, ' ', strings.otp.resendLabel ? (_jsx("button", { type: "button", className: "prizma-screen-layout__inline-link", onClick: () => onAction?.({ type: 'secondary', screenId }), children: strings.otp.resendLabel })) : null, strings.otp.changeNumberLabel ? (_jsxs(_Fragment, { children: [' ', strings.otp.resendSeparator, ' ', _jsx("button", { type: "button", className: "prizma-screen-layout__inline-link", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: strings.otp.changeNumberLabel })] })) : null] })) : undefined, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaOtp, { length: length, 
-        /* Uncontrolled, for the same reason as the phone field: `readOnly`
-           would paint Core's DISABLED surface on the resting states, which is
-           grey Figma does not draw there (DEVIATIONS #PI-6). */
-        defaultValue: value ?? '', 
-        /* `processing` is the one section Figma greys — the code stays legible
-           while the check runs. */
-        disabled: state === 'processing', error: state === 'error', errorText: state === 'error' ? strings.otp.errorText : undefined }) })));
+export const PhoneInputOtpScreen = forwardRef(({ strings, 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 (_jsx(PrizmaFormScreen, { ref: ref, title: strings.otp.title, subtitle: strings.otp.subtitle, ctaLabel: strings.otp.ctaLabel, 
+        /* Figma greys the CTA until the code is complete. */
+        ctaDisabled: state === 'typing', 
+        /* The spinner rides the CTA, not the field (see the note above). */
+        ctaLoading: state === 'processing', ctaLoadingLabel: strings.otp.ctaLoadingLabel, 
+        /* "Didn't receive the code? Resend code or Change phone number" — drawn
+           under the CTA on every OTP section. ONE sentence, TWO independently
+           actionable links, so it uses the archetype's composed-line slot rather
+           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: !counting && strings.otp.resendPrompt ? (_jsxs("p", { className: "prizma-screen-layout__inline-prompt", children: [strings.otp.resendPrompt, ' ', strings.otp.resendLabel ? (_jsx("button", { type: "button", className: "prizma-screen-layout__inline-link", onClick: () => onAction?.({ type: 'secondary', screenId }), children: strings.otp.resendLabel })) : null, strings.otp.changeNumberLabel ? (_jsxs(_Fragment, { children: [' ', strings.otp.resendSeparator, ' ', _jsx("button", { type: "button", className: "prizma-screen-layout__inline-link", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: strings.otp.changeNumberLabel })] })) : null] })) : undefined, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaOtp, { length: length, 
+            /* Uncontrolled, for the same reason as the phone field: `readOnly`
+               would paint Core's DISABLED surface on the resting states, which is
+               grey Figma does not draw there (DEVIATIONS #PI-6). */
+            defaultValue: value ?? '', 
+            /* `processing` is the one section Figma greys — the code stays legible
+               while the check runs. */
+            disabled: state === 'processing', error: state === 'error', errorText: state === 'error' ? strings.otp.errorText : undefined }) }));
+});
 PhoneInputOtpScreen.displayName = 'PhoneInputOtpScreen';
 export default PhoneInputOtpScreen;

package/dist/PhoneInputStrings.d.ts

@@ -7,8 +7,12 @@
  * - `typing`      — partial value, focused field
  * - `filled`      — complete value
  * - `loading`     — CTA in its loading treatment while the code is requested
+ * - `emptyError`  — "Continue" pressed with no number typed: the phone field
+ *   stays empty (no placeholder) in Core's error state with `requiredError`,
+ *   and the CTA is disabled. The dial code always carries a selection, so it
+ *   takes no error. GUIDELINES §6-E empty-submit rule (Elena, 2026-09-30).
  */
-export type PhoneInputVerifyState = 'default' | 'countryCode' | 'typing' | 'filled' | 'loading';
+export type PhoneInputVerifyState = 'default' | 'countryCode' | 'typing' | 'filled' | 'loading' | 'emptyError';
 /**
  * The `phoneNumber.OTP.*` sections — same layout, different field state:
  * - `typing`     — partial code
@@ -24,8 +28,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;
@@ -33,7 +38,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;
 }
 export interface PhoneInputStrings {
@@ -41,6 +46,12 @@ export interface PhoneInputStrings {
     verifiedLabel: string;
     /** Accessible name for the logo nav row. */
     navLabel?: string;
+    /**
+     * Error row under the required field when the primary CTA is pressed with it
+     * still empty (the verify screen's `emptyError` state): "This field is
+     * required". SDK key `dynamicForms.fieldRequired`.
+     */
+    requiredError: string;
     /** phoneNumber.verify.* */
     verify: {
         /** H2 ("Verify your phone number"). */
@@ -92,6 +103,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/dist/PhoneInputVerifyScreen.d.ts

@@ -36,6 +36,14 @@ export interface PhoneInputVerifyScreenProps extends Omit<PrizmaFormScreenProps,
  * primitives (`PrizmaDropdown`, `PrizmaTextField`) at the designed 56px min
  * height and `Border/Radius/small`, so the module layer contributes only the
  * row that pairs them (`PhoneInputLayout.css`) — no primitive is re-implemented.
+ *
+ * `emptyError` is the empty-submit state (rule from Elena, 2026-09-30,
+ * GUIDELINES §6-E empty-submit rule): "Continue" was pressed with no number
+ * typed. The phone field renders empty with no placeholder, in Core's error
+ * state with `requiredError`, and the primary CTA is disabled, following the
+ * drawn precedent in `FormsFieldScreen`. The dial code always carries a
+ * selection, so it takes no error. The resting `default` keeps the CTA enabled
+ * so the user can reach this state.
  */
 export declare const PhoneInputVerifyScreen: React.ForwardRefExoticComponent<PhoneInputVerifyScreenProps & React.RefAttributes<HTMLDivElement>>;
 export default PhoneInputVerifyScreen;

package/dist/PhoneInputVerifyScreen.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { 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 } from './FormScreen';
 import './ScreenLayout.css';
 import './PhoneInputLayout.css';
@@ -29,14 +30,27 @@ const DEFAULT_COUNTRIES = [
  * primitives (`PrizmaDropdown`, `PrizmaTextField`) at the designed 56px min
  * height and `Border/Radius/small`, so the module layer contributes only the
  * row that pairs them (`PhoneInputLayout.css`) — no primitive is re-implemented.
+ *
+ * `emptyError` is the empty-submit state (rule from Elena, 2026-09-30,
+ * GUIDELINES §6-E empty-submit rule): "Continue" was pressed with no number
+ * typed. The phone field renders empty with no placeholder, in Core's error
+ * state with `requiredError`, and the primary CTA is disabled, following the
+ * drawn precedent in `FormsFieldScreen`. The dial code always carries a
+ * selection, so it takes no error. The resting `default` keeps the CTA enabled
+ * so the user can reach this state.
  */
 export const PhoneInputVerifyScreen = forwardRef(({ strings, state = 'default', countries = DEFAULT_COUNTRIES, country, value, screenId = `phone-input-verify-${state}`, overrides, onAction, ...shell }, ref) => {
     const selected = country ?? countries[0]?.value;
     const options = countries.map((c) => ({
         value: c.value,
-        // The closed field shows flag + dial code exactly as Figma draws it
-        // ("🇷🇸 +381"); the open menu row adds the country name.
-        label: [c.flag, c.dialCode].filter(Boolean).join(' '),
+        // The open menu row reads flag + dial code + country name
+        // ("+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:
     // `loading` greys BOTH fields (the request is in flight and the form is
@@ -47,11 +61,26 @@ export const PhoneInputVerifyScreen = forwardRef(({ strings, state = 'default',
     // for none of them — it would grey the resting states too (DEVIATIONS #PI-6).
     const busy = state === 'loading';
     const focused = state === 'typing';
+    // Empty submit: the number field drops its placeholder and takes Core's
+    // error state with the shared "required" row; the CTA greys.
+    const emptyError = state === 'emptyError';
     return (_jsx(PrizmaFormScreen, { ref: ref, title: strings.verify.title, subtitle: strings.verify.subtitle, ctaLabel: strings.verify.ctaLabel, 
         /* Figma's `loading` section swaps the CTA label for Core's spinner. */
-        ctaLoading: busy, ctaLoadingLabel: strings.verify.ctaLoadingLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsxs("div", { className: "phone-input-combined", children: [_jsx(PrizmaDropdown, { className: "phone-input-combined__country", "aria-label": strings.verify.countryLabel, options: options, value: selected, searchable: true, searchPlaceholder: strings.verify.countrySearchPlaceholder, 
+        ctaLoading: busy, ctaDisabled: emptyError, ctaLoadingLabel: strings.verify.ctaLoadingLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsxs("div", { className: "phone-input-combined", children: [_jsx(PrizmaDropdown, { className: "phone-input-combined__country", "aria-label": strings.verify.countryLabel, options: options, value: selected, searchable: true, searchPlaceholder: strings.verify.countrySearchPlaceholder, 
                     /* The `countryCode` section IS the open-menu spec state. */
-                    forceOpen: state === 'countryCode', disabled: busy }), _jsx(PrizmaTextField, { className: [
+                    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 ? (_jsx(PrizmaCountryFlag, { country: {
+                                code: match.value,
+                                name: match.label,
+                                dialCode: match.dialCode,
+                                flag: match.flag ?? '',
+                            } })) : null;
+                    }, disabled: busy }), _jsx(PrizmaTextField, { className: [
                         'phone-input-combined__number',
                         /* Core's own static-focus modifier — the same mechanism the
                            Dropdown exposes as `forceState`, which `PrizmaTextField` has
@@ -59,11 +88,11 @@ export const PhoneInputVerifyScreen = forwardRef(({ strings, state = 'default',
                         focused ? 'prizma-input-textfield--focused' : '',
                     ]
                         .filter(Boolean)
-                        .join(' '), type: "tel", inputMode: "tel", "aria-label": strings.verify.fieldLabel, placeholder: strings.verify.placeholder, 
+                        .join(' '), type: "tel", inputMode: "tel", "aria-label": strings.verify.fieldLabel, placeholder: emptyError ? undefined : strings.verify.placeholder, 
                     /* Uncontrolled: a screen is one static spec state, and `value`
                        without `onChange` would either warn or force `readOnly`, whose
                        disabled surface is exactly the grey Figma does NOT draw here. */
-                    defaultValue: value ?? '', disabled: busy, 
+                    defaultValue: emptyError ? '' : value ?? '', disabled: busy, error: emptyError, errorText: emptyError ? strings.requiredError : undefined, 
                     /* Figma draws the clear ✕ only while the field is focused. */
                     clearable: focused })] }) }));
 });

package/dist/QualifiedSignatureAcceptScreen.js

@@ -62,6 +62,7 @@ export const QualifiedSignatureAcceptScreen = forwardRef(({ strings, variant = '
     // `loading` makes the whole form inert.
     const busy = state === 'loading';
     const ticked = state !== 'default';
+    const requiredHint = strings.accept.requiredHint;
     return (_jsxs(PrizmaFormScreen, { ref: ref, className: ['qualified-signature-accept', className].filter(Boolean).join(' '), title: copy.title, subtitle: copy.subtitle, ctaLabel: copy.ctaLabel, ctaDisabled: !ticked, ctaLoading: busy, ctaLoadingLabel: copy.ctaLoadingLabel, 
         /* The clause stack pans inside the column — the archetype owns this now
            (`--scroll`), so the module declares no overflow of its own. #QS-1 */
@@ -80,7 +81,11 @@ export const QualifiedSignatureAcceptScreen = forwardRef(({ strings, variant = '
                action outright while the partner's `loading` frame greys it. Two
                Figma readings of one inert state; Core models inert as disabled,
                so both take the greyed treatment and the removal is logged. */
-            _jsx(PrizmaCardDocumentContainer, { filename: filename, actionLabel: strings.accept.viewLabel, actionDisabled: busy, onAction: () => onAction?.({ type: 'tertiary', screenId }) })) : null, _jsx("div", { className: "qualified-signature-terms", role: "group", "aria-label": strings.accept.termsLabel, children: terms.map((term) => (_jsx(PrizmaCheckbox, { size: "L", name: term.id, value: term.id, checked: ticked, disabled: busy, segments: term.segments }, term.id))) })] }));
+            _jsx(PrizmaCardDocumentContainer, { filename: filename, actionLabel: strings.accept.viewLabel, actionDisabled: busy, onAction: () => onAction?.({ type: 'tertiary', screenId }) })) : null, _jsxs("div", { className: "qualified-signature-terms", role: "group", "aria-label": strings.accept.termsLabel, children: [requiredHint && strings.accept.requiredLegend ? (_jsx("p", { className: "qualified-signature-terms__legend", children: strings.accept.requiredLegend })) : null, terms.map((term) => (_jsx(PrizmaCheckbox, { size: "L", name: term.id, value: term.id, checked: ticked, disabled: busy, required: Boolean(requiredHint), 
+                        /* The `*` rides the END of the clause copy, the Data Sharing
+                           Consent idiom — the L card paints no marker of its own beside
+                           the box (owner, 2026-09-02). */
+                        segments: requiredHint ? [...term.segments, ` ${requiredHint}`] : term.segments }, term.id)))] })] }));
 });
 QualifiedSignatureAcceptScreen.displayName = 'QualifiedSignatureAcceptScreen';
 export default QualifiedSignatureAcceptScreen;

package/dist/QualifiedSignatureDocumentScreen.d.ts

@@ -35,16 +35,21 @@ export interface QualifiedSignatureDocumentScreenProps extends Omit<PrizmaListSc
  *
  * 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, all reported rather than worked around:
- * 1. Both sections draw a back chevron at the nav's left (and `terms` replaces
- *    the logo row with a chevron + heading bar). GUIDELINES §3 stands: SDK
- *    screens carry no dismiss or back affordance — the standing ruling of
- *    DEVIATIONS #PI-9, which is not re-litigated per module.
+ * THREE deltas from the frames:
+ * 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
  *    exactly one H2, and archetype G has no title-less path, so the screen
  *    carries one and the Figma frame is the side to change. (An archetype
@@ -53,10 +58,12 @@ export interface QualifiedSignatureDocumentScreenProps extends Omit<PrizmaListSc
  *    for attribution chrome (#PI-8, #F-30, #F-34), so both variants keep the
  *    header and the footer and nothing shifts between states.
  *
- * `terms` is LEFT-aligned, as Figma draws it: a centred heading over a
- * left-aligned wall of legal text reads as a mistake. The alignment rides the
- * sanctioned `overrides.align` path (types.ts) — nothing is re-styled here — and
- * an explicit host override still wins. The #GEO-2 precedent.
+ * Both variants frame the page in the box Electronic Signature's review screen
+ * uses, so the title is CENTRED on both, like that screen (owner call
+ * 2026-09-29, "take reference from other screens"). Figma's `QSign.T&C` draws
+ * the title left over an unframed wall of text; once the text sits in its own
+ * left-aligned frame the centred title no longer reads as a mistake. An
+ * explicit `overrides.align` from the host still wins.
  */
 export declare const QualifiedSignatureDocumentScreen: React.ForwardRefExoticComponent<QualifiedSignatureDocumentScreenProps & React.RefAttributes<HTMLDivElement>>;
 export default QualifiedSignatureDocumentScreen;