@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/src/OcrReviewLoadingScreen.tsx

@@ -0,0 +1,48 @@
+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 OcrReviewLoadingScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `loading` slice. */
+  strings: OcrReviewStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * OCR Review — server-side verification wait ("Hold on a sec…"). Figma:
+ * `1-18-1-id-hold-on` (31084:18795) — ID Capture's own frame, redrawn here
+ * rather than imported by reference: every module in this package owns its
+ * hold-on-shaped screen independently (`IdCaptureHoldOnScreen.tsx` is ID
+ * Capture's), and a cross-module import was tried once (Digital ID Upload)
+ * and dropped rather than kept.
+ *
+ * Archetype C (§6-C), `PrizmaResultScreen` with `status="loading"` and no CTA
+ * — identical shape to `IdCaptureHoldOnScreen.tsx`.
+ */
+export const OcrReviewLoadingScreen = forwardRef<HTMLDivElement, OcrReviewLoadingScreenProps>(
+  ({ strings, screenId = 'ocr-review-loading', overrides, onAction, ...shell }, ref) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="loading"
+      title={strings.loading.title}
+      subtitle={strings.loading.description}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+OcrReviewLoadingScreen.displayName = 'OcrReviewLoadingScreen';
+
+export default OcrReviewLoadingScreen;

package/src/OcrReviewScreen.tsx

@@ -0,0 +1,190 @@
+import React, { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaDateField } from '@incodetech/prizma-core-web/date-field';
+import { PrizmaRadio } from '@incodetech/prizma-core-web/radio';
+import { PrizmaRadioGroup } from '@incodetech/prizma-core-web/radio-group';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { OcrReviewState, OcrReviewStrings } from './OcrReviewStrings';
+import './ScreenLayout.css';
+import './OcrReviewLayout.css';
+
+export interface OcrReviewScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    'title' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel' | 'scrollFields'
+  > {
+  /** Module copy — this screen reads the `review` slice. */
+  strings: OcrReviewStrings;
+  /** Which `Review OCR Enable Edit` instance to render. Default `default`.
+   *  Ignored when `editable` is `false` — the disabled frame draws none of
+   *  these states (there is nothing to submit wrong when nothing can be
+   *  typed). */
+  state?: OcrReviewState;
+  /**
+   * `Review OCR Enable Edit` vs `Review OCR Disable Edit` (30530:119373) — the
+   * module's own boolean axis, orthogonal to `state`. `false` renders every
+   * field `disabled` (Core's grey surface + dimmed text, same prop
+   * `PrizmaTextField` / `PrizmaDateField` / `PrizmaRadioGroup` already ship)
+   * with no required asterisks (the frame hides them — nothing to validate on
+   * a field nobody can edit) while Continue stays enabled. Default `true`.
+   */
+  editable?: boolean;
+  /** The subject photo — Figma's `Image / Selfie`, 90×90 circular. */
+  photoSrc: string;
+  /** Field values the fields start with. Every field is uncontrolled
+   *  (`defaultValue`) — a screen is one static spec state, same rule
+   *  `EkycDetailsScreen` draws (#PI-6). */
+  values?: {
+    fullName?: string;
+    dateOfBirth?: string;
+    gender?: 'male' | 'female';
+    documentNumber?: string;
+    expiryDate?: string;
+    address?: string;
+  };
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * OCR Review — "Please check your data", built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for both drawn states: `default` (31084:18792 / 18794 — every
+ * field filled, Continue enabled) and `documentNumberMissing` (31084:18793 —
+ * every OTHER field keeps its filled value, only Document number is cleared
+ * and carries Core's `error` + `documentNumberRequiredError`). Unlike eKYC's
+ * `emptyError` (every required field clears and errors together), this frame
+ * draws a SINGLE field in that state — the empty-submit rule still applies,
+ * scoped to the one field Figma actually shows failing it.
+ *
+ * The photo sits ABOVE Full name as the field stack's own first row — Figma's
+ * `input-list` draws it at the same Spacing/16 rhythm as every field below it.
+ * It is the field stack's plain FIRST CHILD, nothing more: `PrizmaFormScreen`
+ * already renders whatever `children` hands it with that same gap, so this
+ * needed no new slot on the archetype (the archetype is untouched).
+ *
+ * Date of birth and Expiry date are both Core's `PrizmaDateField` — the
+ * frame's "Dropdown" instance name is the shared component's internal name for
+ * a date-kind field, not a literal dropdown (same reading `EkycDetailsScreen`
+ * gives its own Date of birth field). Gender is Core's `PrizmaRadioGroup` +
+ * `PrizmaRadio` — first real consumer of either in this package.
+ *
+ * The field stack SCROLLS (`scrollFields`, the same archetype prop eKYB's
+ * `EkybOwnersScreen`, Forms' long form and Qualified Signature's accept screen
+ * already use): the photo plus six fields do not fit an 844 frame without it,
+ * and without the release the Address row paints under the CTA instead of
+ * above it. Not a prop a caller picks — this module always needs it, so it is
+ * omitted from `OcrReviewScreenProps` and hardcoded here, matching those three
+ * precedents. `Review OCR Disable Edit` overflows the same way (its own
+ * `input-list` measures 654 against a 448 middle container) — one more reason
+ * `editable` is a prop of this same screen rather than a second component.
+ */
+export const OcrReviewScreen = forwardRef<HTMLDivElement, OcrReviewScreenProps>(
+  (
+    {
+      strings,
+      state = 'default',
+      editable = true,
+      photoSrc,
+      values,
+      screenId = editable ? `ocr-review-${state}` : 'ocr-review-disabled',
+      ctaDisabled,
+      className,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    // The empty-submit retry only exists on the editable frame — nothing can
+    // be left empty on a field nobody can type into.
+    const documentNumberMissing = editable && state === 'documentNumberMissing';
+    const documentNumberError = documentNumberMissing
+      ? { error: true, errorText: strings.review.documentNumberRequiredError }
+      : {};
+    // `Review OCR Disable Edit` hides every required asterisk (31256:169923 is
+    // marked `hidden` on its own Gender row) — spread onto every field only
+    // when editable, rather than a `required={editable}` on each that would
+    // still render an empty, pointless suffix slot.
+    const requiredProps = editable
+      ? { required: true, requiredHint: strings.review.requiredHint }
+      : {};
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        className={className}
+        title={strings.review.title}
+        ctaLabel={strings.review.ctaLabel}
+        ctaDisabled={ctaDisabled}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        /* The archetype's own scrolling field stack — the photo plus six
+           fields do not fit an 844 frame. No module CSS. */
+        scrollFields
+        {...shell}
+      >
+        <div className="ocr-review__photo">
+          <img src={photoSrc} alt="" />
+        </div>
+        <PrizmaTextField
+          label={strings.review.fullNameLabel}
+          {...requiredProps}
+          disabled={!editable}
+          defaultValue={values?.fullName ?? ''}
+          autoComplete="off"
+          clearable={false}
+        />
+        <PrizmaDateField
+          label={strings.review.dateOfBirthLabel}
+          {...requiredProps}
+          disabled={!editable}
+          defaultValue={values?.dateOfBirth ?? ''}
+          autoComplete="off"
+        />
+        <PrizmaRadioGroup
+          name={`${screenId}-gender`}
+          legend={strings.review.genderLabel}
+          defaultValue={values?.gender}
+          disabled={!editable}
+        >
+          <PrizmaRadio textSize="m" value="male" text={strings.review.maleLabel} />
+          <PrizmaRadio textSize="m" value="female" text={strings.review.femaleLabel} />
+        </PrizmaRadioGroup>
+        <PrizmaTextField
+          label={strings.review.documentNumberLabel}
+          {...requiredProps}
+          {...documentNumberError}
+          disabled={!editable}
+          defaultValue={documentNumberMissing ? '' : values?.documentNumber ?? ''}
+          autoComplete="off"
+          clearable={false}
+        />
+        <PrizmaDateField
+          label={strings.review.expiryDateLabel}
+          {...requiredProps}
+          disabled={!editable}
+          defaultValue={values?.expiryDate ?? ''}
+          autoComplete="off"
+        />
+        <PrizmaTextField
+          label={strings.review.addressLabel}
+          {...requiredProps}
+          disabled={!editable}
+          defaultValue={values?.address ?? ''}
+          autoComplete="off"
+          clearable={false}
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+OcrReviewScreen.displayName = 'OcrReviewScreen';
+
+export default OcrReviewScreen;

package/src/OcrReviewStrings.ts

@@ -0,0 +1,69 @@
+// OCR Review module — copy contract.
+//
+// Every OCR Review screen receives the SAME `strings: OcrReviewStrings`
+// object (rule: all copy via props, no hardcoded English — GUIDELINES.md §9).
+//
+// Authoritative screens: `ID Capture — Latest Design` file
+// (U1EOfl9RQ1rOlOIuQw3rhL), section `OCR Review - 🍎 iOS - Full flow`
+// (31084:18781) → `Happy Path` (31084:18782). Three `Review OCR Enable Edit`
+// instances draw one screen in two states (filled, and Document number
+// cleared + errored after an empty Continue press), `1-18-1-id-hold-on` is
+// ID Capture's own wait screen redrawn here rather than reused by reference
+// (see OcrReviewLoadingScreen.tsx — every module in this package owns its own
+// hold-on-shaped screen; Digital ID Upload tried sharing one by reference and
+// it was dropped, not kept), `OCR Success` and `OCR Error` (the latter OUTSIDE
+// the Happy Path section, reached off the "Processed successfully?" decision's
+// "No" branch) close the module on Archetype F.
+
+export type OcrReviewState = 'default' | 'documentNumberMissing';
+
+export interface OcrReviewStrings {
+  /** Accessible name for the logo nav region (i18n — no baked-in English). */
+  navLabel?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+
+  /** `Review OCR Enable Edit` (31084:18792 / 18793 / 18794) — one screen, two
+   *  states (`default`, `documentNumberMissing`). */
+  review: {
+    /** "Please check your data" */
+    title: string;
+    /** The asterisk suffix on every required field's label ("*"). */
+    requiredHint: string;
+    fullNameLabel: string;
+    dateOfBirthLabel: string;
+    genderLabel: string;
+    maleLabel: string;
+    femaleLabel: string;
+    documentNumberLabel: string;
+    /** "Field can't be empty" — Document number's error in `documentNumberMissing`. */
+    documentNumberRequiredError: string;
+    expiryDateLabel: string;
+    addressLabel: string;
+    /** "Continue" */
+    ctaLabel: string;
+  };
+
+  /** `1-18-1-id-hold-on`, redrawn for this module (see OcrReviewLoadingScreen.tsx). */
+  loading: {
+    /** "Hold on a sec.." */
+    title: string;
+    /** "We're verifying your identity" */
+    description: string;
+  };
+
+  /** `OCR Success` (31084:18796). */
+  success: {
+    /** "Identity successfully verified" */
+    title: string;
+  };
+
+  /** `OCR Error` (31084:18797) — off the "Processed successfully?" decision's
+   *  "No" branch, drawn outside the Happy Path section. */
+  error: {
+    /** "Something went wrong" */
+    title: string;
+    /** "Try again" */
+    ctaLabel: string;
+  };
+}

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;
+}