@incodetech/prizma-core-screens 0.1.0

package/dist/FormsLongFormScreen.js

@@ -0,0 +1,149 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaDateField } from '@incodetech/prizma-core-web/date-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 './FormsLayout.css';
+/**
+ * The row stacks each purple section draws, in order. Structure belongs to the
+ * screen (the archetype and Core own everything visual); only the labels and
+ * placeholders come from `FormsStrings`.
+ */
+const PRESET_ROWS = {
+    // `forms.name` — the three-name form.
+    name: [
+        { key: 'fullName', kind: 'text', requirement: 'required' },
+        { key: 'firstName', kind: 'text', requirement: 'required' },
+        { key: 'lastName', kind: 'text', requirement: 'none' },
+    ],
+    // `longform.customizable` — the five-row customizable form.
+    profile: [
+        { key: 'fullName', kind: 'text', requirement: 'required' },
+        { key: 'residence', kind: 'country', requirement: 'required' },
+        { key: 'occupation', kind: 'select', requirement: 'none' },
+        { key: 'dob', kind: 'date', requirement: 'none' },
+        { key: 'referral', kind: 'select', requirement: 'none' },
+    ],
+    // `🧩 Long forms - pre-defined cases` — the four-row eKYC form.
+    eKyc: [
+        { key: 'idNumber', kind: 'text', requirement: 'required' },
+        { key: 'email', kind: 'email', requirement: 'required' },
+        { key: 'residence', kind: 'country', requirement: 'required' },
+        { key: 'dob', kind: 'date', requirement: 'required' },
+    ],
+};
+/**
+ * The "Forms and data entry - Optional / Required" pair documents the SAME
+ * eKYC form with a different marker on each row — that is the whole point of
+ * the section, so the override is structure and lives here.
+ */
+const OPTIONAL_VARIANT = {
+    idNumber: 'none',
+    email: 'required',
+    residence: 'optional',
+    dob: 'optional',
+};
+/**
+ * Forms & Data Entry — the multi-field screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for the module's seven multi-field purple sections: `forms.name`,
+ * `longform.customizable` (default + filled) and the whole
+ * `🧩 Long forms - pre-defined cases` group (`longform.default` / `.focused` /
+ * `.filled` / `.loading` plus the "Optional / Required" documentation pair).
+ * They share the identical skeleton — nav → Title (H2 + the "All fields marked
+ * with * are required." H5) → Spacing/32 → a stack of labelled Core inputs →
+ * primary CTA → tag — and differ in which rows the stack carries and what state
+ * each row is in.
+ *
+ * Four things are deliberate:
+ *
+ * 1. Rows are UNCONTROLLED (`defaultValue`). `readOnly` would paint Core's
+ *    DISABLED grey on the six sections Figma draws white (DEVIATIONS #PI-6);
+ *    `disabled` is set ONLY on `loading`, the one section Figma actually greys
+ *    — and it greys every row at once, exactly as drawn.
+ * 2. The focused row gets Core's OWN `--focused` modifier through `className`
+ *    (DEVIATIONS #PI-7). Its clear ✕ needs one module rule to appear, because
+ *    Core reveals the button under a live `:focus-within` a static spec state
+ *    can never satisfy — see `FormsLayout.css`, which only lifts Core's
+ *    `display: none` and re-styles nothing (the #CURP-3 idiom).
+ * 3. The in-flight spinner rides the CTA (`ctaLoading`), never a field
+ *    (DEVIATIONS #PI-5) — without it `loading` would render as `filled`.
+ * 4. The required marker rides Core's `requiredHint` so it stays localizable.
+ *    Core has no OPTIONAL counterpart, so "(Optional)" is composed into the
+ *    label string instead — DEVIATIONS #FDE-4.
+ *
+ * The stack SCROLLS inside the content column through the archetype's own
+ * `scrollFields` prop: the profile preset is five 78px rows plus gaps and does
+ * not fit a 390×844 frame, and screens never reflow (#17). The variant carries
+ * the `overflow-y: auto` AND the Spacing/16 margin below the clipped stack, so
+ * the sliced last row is followed by clear surface instead of running flush
+ * into the CTA band — the half a module stylesheet kept losing. It is a no-op
+ * on the short `name` preset, whose rows never overflow. DEVIATIONS #DSC-2,
+ * restating #CURP-1.
+ */
+export const FormsLongFormScreen = forwardRef(({ strings, preset = 'eKyc', state = 'default', values, focusedField, options, countries, screenId = `forms-long-form-${preset}-${state}`, className, overrides, onAction, ...shell }, ref) => {
+    const copy = strings.longForm[preset];
+    const busy = state === 'loading';
+    const countryList = countries ?? [];
+    // The Optional / Required pair documents the eKYC form specifically; no
+    // other preset draws it, so the override never leaks to a preset whose
+    // Figma has no such section.
+    const applyOptional = state === 'optional' && preset === 'eKyc';
+    const rows = PRESET_ROWS[preset].map((row) => applyOptional && OPTIONAL_VARIANT[row.key]
+        ? { ...row, requirement: OPTIONAL_VARIANT[row.key] }
+        : row);
+    /** Core appends `requiredHint` itself; "(Optional)" has no Core slot. */
+    const labelFor = (row) => {
+        const base = copy.fields[row.key]?.label ?? '';
+        return row.requirement === 'optional' ? `${base} ${strings.optionalHint}` : base;
+    };
+    const renderRow = (row) => {
+        const fieldCopy = copy.fields[row.key];
+        const label = labelFor(row);
+        const required = row.requirement === 'required';
+        const value = values?.[row.key] ?? '';
+        const focused = !busy && focusedField === row.key;
+        switch (row.kind) {
+            case 'country':
+                return (_jsx(PrizmaDropdown, { label: label, required: required, requiredHint: strings.requiredHint, placeholder: fieldCopy?.placeholder, options: countryList.map((c) => ({ value: c.code, label: c.name })), value: value || null, searchable: true, searchPlaceholder: copy.searchPlaceholder, disabled: busy, forceState: focused ? 'focused' : undefined, renderLeading: (option) => {
+                        const match = countryList.find((c) => c.code === option.value);
+                        return match ? _jsx(PrizmaCountryFlag, { country: match }) : null;
+                    } }, row.key));
+            case 'select':
+                return (_jsx(PrizmaDropdown, { label: label, required: required, requiredHint: strings.requiredHint, placeholder: fieldCopy?.placeholder, options: options?.[row.key] ?? [], value: value || null, disabled: busy, forceState: focused ? 'focused' : undefined }, row.key));
+            case 'date':
+                return (_jsx(PrizmaDateField, { className: focused ? 'prizma-input-datefield--focused' : undefined, label: label, required: required, requiredHint: strings.requiredHint, placeholder: fieldCopy?.placeholder, defaultValue: value, disabled: busy, calendarLabel: copy.calendarLabel }, row.key));
+            default:
+                return (_jsx(PrizmaTextField, { className: focused ? 'prizma-input-textfield--focused' : undefined, label: label, required: required, requiredHint: strings.requiredHint, placeholder: fieldCopy?.placeholder, defaultValue: value, type: row.kind === 'email' ? 'email' : 'text', inputMode: row.kind === 'email' ? 'email' : undefined, autoComplete: row.kind === 'email' ? 'email' : 'off', autoCapitalize: row.kind === 'email' ? 'none' : undefined, spellCheck: false, disabled: busy, 
+                    /* Figma draws the clear ✕ only on the focused row of
+                       `longform.focused`; every other row draws none. */
+                    clearable: focused, clearLabel: copy.clearLabel }, row.key));
+        }
+    };
+    return (_jsx(PrizmaFormScreen, { ref: ref, className: [
+            'forms-long-form',
+            /* Scopes the ONE rule that lets Core's own clear ✕ paint on the
+               statically-focused row. See FormsLayout.css. */
+            state === 'focused' ? 'forms-long-form--focused' : '',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), title: copy.title, subtitle: copy.subtitle, ctaLabel: copy.ctaLabel, 
+        /* `longform.default` and `longform.customizable`'s default section grey
+           the CTA until something is entered; `forms.name` draws it ENABLED on
+           the same empty form. Figma contradicts its own "optimistic rule"
+           sticky here, so each section is followed literally — DEVIATIONS
+           #FDE-3. */
+        ctaDisabled: state === 'default' && preset !== 'name', ctaLoading: busy, ctaLoadingLabel: copy.ctaLoadingLabel, 
+        /* The four- and five-row stacks are taller than the 844 frame; the
+           archetype's variant pans them and keeps Spacing/16 of clear surface
+           above the CTA. No module CSS re-declares this. */
+        scrollFields: true, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: rows.map(renderRow) }));
+});
+FormsLongFormScreen.displayName = 'FormsLongFormScreen';
+export default FormsLongFormScreen;

package/dist/FormsStrings.d.ts

@@ -0,0 +1,181 @@
+/**
+ * Which single-field section `FormsFieldScreen` renders. Each key names one
+ * purple section and picks the Core input the section draws:
+ * - `idNumber` · `cpf` — `PrizmaTextField`
+ * - `email`            — `PrizmaTextField` with e-mail semantics
+ * - `dob`              — `PrizmaDateField`
+ * - `phone`            — `PrizmaCombined` (country dial code + number)
+ * - `text`             — `PrizmaMultiline`
+ */
+export type FormsFieldKey = 'idNumber' | 'cpf' | 'email' | 'dob' | 'phone' | 'text';
+/**
+ * The field treatments the single-field sections draw.
+ *
+ * `forms.DOB.iconButton` (2:12185) has NO state here, deliberately. That frame
+ * draws the date field focused with an OPEN date-picker panel over it — the
+ * "March 2024" month grid instanced beside the frame as `Date Picker`
+ * (2:5458). Core ships no calendar: `PrizmaDateField`'s contract is that "the
+ * date PICKER is the consumer's — the OS picker by contract; the field never
+ * renders one", and it exposes no `forceCalendarOpen` hook. Composing a month
+ * grid here would be inventing a primitive, and shipping the state without one
+ * left a card that was `focused` with a different name. The state returns the
+ * day Core gains the panel — DEVIATIONS #FDE-5.
+ *
+ * - `default`      — resting field, placeholder visible, CTA enabled
+ * - `focused`      — `forms.DOB.typing`: blue focus ring with a partial value
+ * - `filled`       — a complete value on the resting surface
+ * - `emptyError`   — `forms.IDnumber.error` (2443:68470): empty NEGATIVE field,
+ *                    "Enter a valid ID number.", CTA greyed. This is the
+ *                    canvas sticky's "optimistic rule": the CTA starts enabled
+ *                    and only greys after a submit with nothing entered.
+ * - `invalidError` — `forms.IDnumber.error` (2443:69116): a typed value that
+ *                    failed validation, "Invalid ID number", CTA greyed
+ */
+export type FormsFieldState = 'default' | 'focused' | 'filled' | 'emptyError' | 'invalidError';
+/**
+ * Which choice section `FormsChoiceScreen` renders — the label above the
+ * dropdown is what separates them:
+ * - `residence`   — `forms.country` / `forms.Residence` ("Country of residence")
+ * - `nationality` — `Forms.nationality` ("Nationality")
+ * - `question`    — `forms.select` / `forms.yesNo` / `forms.country` question
+ *                   variant ("Enter your question")
+ */
+export type FormsChoiceKey = 'residence' | 'nationality' | 'question';
+/**
+ * Which option list the open menu carries. The three question sections draw an
+ * IDENTICAL closed field and differ only here, so the option set is its own
+ * axis rather than three screens:
+ * - `countries` — flag + country name, searchable (`forms.country`)
+ * - `generic`   — "Option 1…5", no search (`forms.select`)
+ * - `yesNo`     — two rows, no search (`forms.yesNo`)
+ */
+export type FormsChoiceOptionSet = 'countries' | 'generic' | 'yesNo';
+/**
+ * - `closed` — resting trigger with the placeholder
+ * - `open`   — the menu drawn over the form, nothing selected
+ *
+ * `forms.residencetyping` (68:31241) has NO state here, deliberately. It is the
+ * TYPING frame: the same open menu as `forms.Residenceopen`, distinguished by
+ * the search bar holding "Por" with a live caret and an ✕ replacing the
+ * magnifier. `PrizmaDropdown` ships documentation-only `forceState` and
+ * `forceOpen` but nothing that seeds the query, so the state rendered with an
+ * EMPTY search bar — `open` under another name. Faking it would mean
+ * hand-rolling a search bar the component already owns. The state returns the
+ * day Core gains a `searchValue` — DEVIATIONS #FDE-6.
+ */
+export type FormsChoiceState = 'closed' | 'open';
+/**
+ * The multi-field sections `FormsLongFormScreen` renders:
+ * - `name`    — `forms.name`: full / first / last name
+ * - `profile` — `longform.customizable`: the five-field customizable form
+ * - `eKyc`    — the `🧩 Long forms - pre-defined cases` section: ID number,
+ *               e-mail, country of residence, date of birth
+ */
+export type FormsLongFormPreset = 'name' | 'profile' | 'eKyc';
+/**
+ * - `default`  — every field empty
+ * - `focused`  — `longform.focused`: one field carries the focus ring, an
+ *                earlier one is already filled
+ * - `filled`   — every field carries a value
+ * - `loading`  — `longform.loading`: the whole form greyed, spinner in the CTA
+ * - `optional` — the "Optional / Required" documentation pair: the same form
+ *                with mixed required and optional markers
+ */
+export type FormsLongFormState = 'default' | 'focused' | 'filled' | 'loading' | 'optional';
+/** Copy for one single-field section. */
+export interface FormsFieldCopy {
+    /** H2 ("Enter your title", "Enter your email", "Enter your phone number"). */
+    title: string;
+    /** H5 below the title, where the section draws one. */
+    subtitle?: string;
+    /** The VISIBLE label row above the field. Unlike Phone Input and CURP
+     *  (DEVIATIONS #PI-4, #EI-2), every section in this module draws one. */
+    label: string;
+    /** Field placeholder. The date field takes Core's own DD/MM/YYYY mask. */
+    placeholder?: string;
+    /** Primary CTA ("Continue"). */
+    ctaLabel: string;
+    /** Accessible busy copy, for hosts that put the field behind a request. */
+    ctaLoadingLabel?: string;
+    /** Accessible name for the clear (✕) affordance. */
+    clearLabel?: string;
+    /** Accessible name for the date field's calendar button (`dob` only). */
+    calendarLabel?: string;
+    /** Accessible name for the dial-code listbox (`phone` only). */
+    countryListLabel?: string;
+    /** Error row on `emptyError` ("Enter a valid ID number."). */
+    emptyErrorText?: string;
+    /** Error row on `invalidError` ("Invalid ID number"). */
+    invalidErrorText?: string;
+}
+/** Copy for one choice section. */
+export interface FormsChoiceCopy {
+    title: string;
+    subtitle?: string;
+    /** The visible label above the dropdown. */
+    label: string;
+    /** Trigger placeholder ("Select an option"). */
+    placeholder: string;
+    /** Search-bar placeholder inside the menu ("Search for country"). */
+    searchPlaceholder?: string;
+    /** Accessible name for the search-clear button. */
+    clearSearchLabel?: string;
+    ctaLabel: string;
+}
+/** Copy for one field row of a multi-field form. Which rows a preset carries
+ *  is STRUCTURE and lives in `FormsLongFormScreen`; only the words are here. */
+export interface FormsLongFormFieldCopy {
+    label: string;
+    placeholder?: string;
+}
+/** Copy for one multi-field section. */
+export interface FormsLongFormCopy {
+    title: string;
+    /** "All fields marked with * are required." */
+    subtitle?: string;
+    ctaLabel: string;
+    ctaLoadingLabel?: string;
+    /** One entry per row the preset draws — see `FormsLongFormScreen`. */
+    fields: Record<string, FormsLongFormFieldCopy>;
+    /** Accessible name for the clear (✕) affordance on the focused row. */
+    clearLabel?: string;
+    /** Accessible name for the calendar button on the date row. */
+    calendarLabel?: string;
+    /** Search-bar placeholder for the country row's menu. */
+    searchPlaceholder?: string;
+}
+export interface FormsStrings {
+    /** "verified by" attribution in the footer tag. */
+    verifiedLabel: string;
+    /** Accessible name for the logo nav row. */
+    navLabel?: string;
+    /**
+     * The required marker appended to a label ("*"). It rides Core's
+     * `requiredHint` prop so it stays localizable and so no module paints its
+     * own asterisk — the CURP-4 idiom.
+     */
+    requiredHint: string;
+    /**
+     * The optional marker appended to a label ("(Optional)"). Core has a
+     * `requiredHint` but NO optional counterpart, so the marker is composed into
+     * the label string by the screen. See DEVIATIONS #FDE-4.
+     */
+    optionalHint: string;
+    /** The single-field sections. */
+    fields: Record<FormsFieldKey, FormsFieldCopy>;
+    /** The choice sections. */
+    choice: Record<FormsChoiceKey, FormsChoiceCopy>;
+    /** The multi-field sections. */
+    longForm: Record<FormsLongFormPreset, FormsLongFormCopy>;
+    /** `forms.success` — a bare status mark over an H2, no CTA. */
+    success: {
+        title: string;
+        subtitle?: string;
+    };
+    /** `forms.error` — status mark, H2 and a "Try again" CTA. */
+    error: {
+        title: string;
+        subtitle?: string;
+        ctaLabel: string;
+    };
+}

package/dist/FormsStrings.js

@@ -0,0 +1,36 @@
+// Forms & Data Entry — copy contract.
+//
+// Figma: `🧩 Forms and Data entry (Input type) - Screens specs + Localization`
+// (N6otHMuY2Hha5eBqRz0uC3, page 1:222). Two top-level groups of purple parent
+// sections:
+//
+//   🧩 Forms and Data entry (Input type)
+//     forms.idnumber · forms.cpf · forms.email · forms.phone · forms.text
+//     forms.dob (default / typing / iconButton†)
+//     forms.country (Residence: default / open / typing†) · Forms.nationality
+//     forms.select · forms.yesNo · forms.country (question)
+//     forms.name · longform.customizable
+//     forms.success · forms.error · forms.inputerror (empty / invalid)
+//
+//   🧩 Long forms - pre-defined cases
+//     forms.longform.default / longform.focused / longform.filled /
+//     longform.loading / "Forms and data entry - Optional / Required"
+//
+// This is the archetype-E showcase: every section is nav → title block →
+// labelled field stack → CTA → verified tag (GUIDELINES §6-E), and the sections
+// differ only in WHICH Core input sits in the stack and in what state. The
+// module therefore ships four screen families rather than nineteen screens:
+// one for a single field, one for a choice field, one for a multi-field form,
+// plus the two verdicts.
+//
+// † Two sections have no state of their own, because the ONE thing that makes
+// each of them a distinct frame is a piece of Core that does not exist yet: the
+// open date-picker panel (`forms.DOB.iconButton`) and a search bar carrying a
+// typed query (`forms.residencetyping`). Both are logged as Core requests —
+// DEVIATIONS #FDE-5 and #FDE-6 — and neither is faked here: a card that repeats
+// its neighbour is the defect, not the coverage. See the state unions below.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here,
+// so the host's locale pack drives the module (the Figma file ships ES + PT
+// columns beside the EN one).
+export {};

package/dist/FormsSuccessScreen.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FormsStrings } from './FormsStrings';
+import './ScreenLayout.css';
+export interface FormsSuccessScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `success` slice. */
+    strings: FormsStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Forms & Data Entry — the success verdict, built on the Processing archetype
+ * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `forms.success` section (3:18734). A centred status mark
+ * over a bare H2 ("Success!") and then NOTHING — the CTA slot is empty all the
+ * way down to the anchored tag, while the sibling `forms.error` section
+ * (2014:21506) draws "Try again" in that same slot.
+ *
+ * §6-F reserves the Result archetype for "every verdict screen that needs a
+ * button" and keeps C as the pure no-button case, so the module's two verdicts
+ * legitimately sit on two different archetypes — the #EI-4 split, applied
+ * unchanged.
+ *
+ * The mark is Core's outline status icon via `PrizmaTitle`'s icon slot; the
+ * module Figma still draws the two-tone filled disc, one icon sweep behind
+ * (DEVIATIONS #15, unchanged here).
+ */
+export declare const FormsSuccessScreen: React.ForwardRefExoticComponent<FormsSuccessScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default FormsSuccessScreen;

package/dist/FormsSuccessScreen.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen, } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * Forms & Data Entry — the success verdict, built on the Processing archetype
+ * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `forms.success` section (3:18734). A centred status mark
+ * over a bare H2 ("Success!") and then NOTHING — the CTA slot is empty all the
+ * way down to the anchored tag, while the sibling `forms.error` section
+ * (2014:21506) draws "Try again" in that same slot.
+ *
+ * §6-F reserves the Result archetype for "every verdict screen that needs a
+ * button" and keeps C as the pure no-button case, so the module's two verdicts
+ * legitimately sit on two different archetypes — the #EI-4 split, applied
+ * unchanged.
+ *
+ * The mark is Core's outline status icon via `PrizmaTitle`'s icon slot; the
+ * module Figma still draws the two-tone filled disc, one icon sweep behind
+ * (DEVIATIONS #15, unchanged here).
+ */
+export const FormsSuccessScreen = forwardRef(({ strings, screenId = 'forms-success', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, status: "success", title: strings.success.title, subtitle: strings.success.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+FormsSuccessScreen.displayName = 'FormsSuccessScreen';
+export default FormsSuccessScreen;

package/dist/GeolocationBrowserStepsScreen.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { GeolocationBrowser, GeolocationStrings } from './GeolocationStrings';
+import './ScreenLayout.css';
+export interface GeolocationBrowserStepsScreenProps extends Omit<PrizmaListScreenProps, 'status' | 'title' | 'subtitle' | 'children' | 'ctaLabel' | 'secondaryCtaLabel' | 'linkLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `browserSteps` slice. */
+    strings: GeolocationStrings;
+    /** Which browser's steps to show. Default `safariIos`. */
+    browser?: GeolocationBrowser;
+    /**
+     * Offer the second action. Default `true`. Figma's Samsung Internet section
+     * draws the primary alone, because that flow cannot skip the step.
+     */
+    showSkip?: boolean;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Geolocation — "Follow the next steps to allow Incode to access your
+ * location", built on the List archetype (GUIDELINES.md §6-G,
+ * `PrizmaListScreen`).
+ *
+ * ONE screen for all NINE purple sections of the Web group. 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 location is a
+ * different journey in Safari, Chrome, Firefox, Opera and Samsung Internet, on
+ * iOS and on Android. 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`).
+ *
+ * The title block is LEFT-aligned for this whole family. Every
+ * `Geolocation.allowLocation.<browser>` section starts the two-line headline —
+ * and the browser label under it — flush at the gutter, over left-led step
+ * rows; a centred headline above a left-aligned list reads as a mistake. The
+ * screen therefore DEFAULTS the archetype's own `align` override to `left`
+ * rather than declaring any alignment of its own, and a host that passes
+ * `overrides.align` still wins.
+ *
+ * Two things Figma draws that this screen does not, both reported rather than
+ * worked around:
+ * - **Mixed weight inside a row.** Figma bolds the actionable fragment ("Tap
+ *   **Three dots** in the top right"); Core's row `title` is a plain `string`,
+ *   so the sentence renders in one weight. Core request: a `ReactNode` title.
+ * - **Primary above secondary.** Figma stacks "Refresh page" over "Skip this
+ *   step" on all nine sections; archetype G's band renders the secondary first
+ *   (`ListScreen.tsx`), so these screens ship inverted against their frames.
+ *   The archetype owns the order and no module re-declares it — archetype G
+ *   needs a `ctaOrder` slot the way archetype F already has `ctaOrientation`.
+ *   ESCALATED, NOT RESOLVED: DEVIATIONS.md still has no Geolocation section, so
+ *   there is no ruling to cite yet.
+ */
+export declare const GeolocationBrowserStepsScreen: React.ForwardRefExoticComponent<GeolocationBrowserStepsScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default GeolocationBrowserStepsScreen;

package/dist/GeolocationBrowserStepsScreen.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconArrowLeft, IconFolderFileOpen, IconGeoPin, IconLock, IconLockCheck, IconMobilePhone, IconNumberedList, IconTextAi, } from '@incodetech/prizma-core-icons';
+import { PrizmaCardListCommonIssues } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+/**
+ * Step kind → canonical bank glyph. ONE map, in one place, for the same reason
+ * Document Capture's common-issues map exists (DEVIATIONS #DC-23): Figma leads
+ * every row with OS/browser chrome the Prizma bank does not ship — a ⋮ overflow
+ * menu, a gear, a permission toggle, Safari's "AA" control and each browser's
+ * own logo. Shipping those would mean inventing primitives and bundling brand
+ * rasters, both forbidden (rule 1, GUIDELINES §10), so each row takes the
+ * nearest canonical glyph:
+ *
+ *   addressBar  → IconTextAi        Safari's "AA" is the address-bar text control
+ *   menu        → IconNumberedList  the ⋮ overflow opens a menu list
+ *   settings    → IconLock          site settings sit behind the address-bar lock
+ *   permissions → IconLockCheck     a granted permission
+ *   location    → IconGeoPin        near-exact
+ *   device      → IconMobilePhone   the device's Settings app
+ *   apps        → IconFolderFileOpen the app list / app drawer
+ *   return      → IconArrowLeft     "return here and refresh" (Figma draws the
+ *                                   browser's logo — a brand raster, never bundled)
+ *
+ * Owner decision needed: mint the eight glyphs, or bless these substitutions.
+ * NOT YET RECORDED: DEVIATIONS.md has no Geolocation section, so this is an
+ * open escalation rather than a settled ruling. Verified against the frames on
+ * 2026-08-19 — every section leads its rows with OS/browser chrome, and the
+ * last row of each browser section draws that browser's own logo (Chrome disc,
+ * Firefox flame, Opera O, Samsung Internet mark).
+ */
+const STEP_ICONS = {
+    addressBar: _jsx(IconTextAi, { size: "m" }),
+    menu: _jsx(IconNumberedList, { size: "m" }),
+    settings: _jsx(IconLock, { size: "m" }),
+    permissions: _jsx(IconLockCheck, { size: "m" }),
+    location: _jsx(IconGeoPin, { size: "m" }),
+    device: _jsx(IconMobilePhone, { size: "m" }),
+    apps: _jsx(IconFolderFileOpen, { size: "m" }),
+    return: _jsx(IconArrowLeft, { size: "m" }),
+};
+/**
+ * Geolocation — "Follow the next steps to allow Incode to access your
+ * location", built on the List archetype (GUIDELINES.md §6-G,
+ * `PrizmaListScreen`).
+ *
+ * ONE screen for all NINE purple sections of the Web group. 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 location is a
+ * different journey in Safari, Chrome, Firefox, Opera and Samsung Internet, on
+ * iOS and on Android. 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`).
+ *
+ * The title block is LEFT-aligned for this whole family. Every
+ * `Geolocation.allowLocation.<browser>` section starts the two-line headline —
+ * and the browser label under it — flush at the gutter, over left-led step
+ * rows; a centred headline above a left-aligned list reads as a mistake. The
+ * screen therefore DEFAULTS the archetype's own `align` override to `left`
+ * rather than declaring any alignment of its own, and a host that passes
+ * `overrides.align` still wins.
+ *
+ * Two things Figma draws that this screen does not, both reported rather than
+ * worked around:
+ * - **Mixed weight inside a row.** Figma bolds the actionable fragment ("Tap
+ *   **Three dots** in the top right"); Core's row `title` is a plain `string`,
+ *   so the sentence renders in one weight. Core request: a `ReactNode` title.
+ * - **Primary above secondary.** Figma stacks "Refresh page" over "Skip this
+ *   step" on all nine sections; archetype G's band renders the secondary first
+ *   (`ListScreen.tsx`), so these screens ship inverted against their frames.
+ *   The archetype owns the order and no module re-declares it — archetype G
+ *   needs a `ctaOrder` slot the way archetype F already has `ctaOrientation`.
+ *   ESCALATED, NOT RESOLVED: DEVIATIONS.md still has no Geolocation section, so
+ *   there is no ruling to cite yet.
+ */
+export const GeolocationBrowserStepsScreen = forwardRef(({ strings, browser = 'safariIos', showSkip = true, screenId = `geolocation-allow-location-${browser}`, overrides, onAction, ...shell }, ref) => {
+    const slice = strings.browserSteps.browsers[browser];
+    /* Family default, not a local re-declaration: the archetype already owns a
+       left variant, so the screen only picks which of ITS variants this family
+       uses. An explicit `overrides.align` from the host still wins. */
+    const alignedOverrides = {
+        ...overrides,
+        align: overrides?.align ?? 'left',
+    };
+    return (_jsx(PrizmaListScreen, { ref: ref, title: strings.browserSteps.title, subtitle: slice?.label, ctaLabel: strings.browserSteps.ctaLabel, secondaryCtaLabel: showSkip ? strings.browserSteps.skipLabel : undefined, 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,
+            })) }) }));
+});
+GeolocationBrowserStepsScreen.displayName = 'GeolocationBrowserStepsScreen';
+export default GeolocationBrowserStepsScreen;

package/dist/GeolocationErrorScreen.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { GeolocationErrorVariant, GeolocationStrings } from './GeolocationStrings';
+import './ScreenLayout.css';
+export interface GeolocationErrorScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `error` slice its `variant` names. */
+    strings: GeolocationStrings;
+    /** Which purple `Geolocation.error.*` section to render. Default `locationUnavailable`. */
+    variant?: GeolocationErrorVariant;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Geolocation — the error verdicts, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * ONE screen for the four purple `Geolocation.error.*` sections. All four draw
+ * the identical skeleton — a centred mark + title + supporting line over a
+ * single CTA — and differ only in copy and in which mark leads:
+ *
+ * - `locationUnavailable` — weak/inaccurate signal, "Try again"
+ * - `quit`                — attempts exhausted, the step is required
+ * - `skip`                — attempts exhausted, the step is optional
+ * - `noNetwork`           — the connectivity family every module carries
+ *
+ * Figma draws the first three with a filled amber disc; Core renders the
+ * canonical OUTLINE warning mark (icon-outline sweep, DEVIATIONS #15). The
+ * module Figma is one sweep behind, exactly as Face Capture's and ID Capture's
+ * result screens were.
+ *
+ * `noNetwork` KEEPS the logo header and the verified tag even though its purple
+ * section draws neither: the owner rule of 2026-08-18 (#F-30, #F-34) makes the
+ * chrome constant across every screen so nothing shifts between states, and all
+ * modules' connectivity screens must read identically (#PI-8).
+ *
+ * The Wi-Fi mark is Figma's `Icon / Wi-Fi`; Core's `PrizmaTitle` icon allowlist
+ * is `status | spinner | none`, so it rides the archetype's `glyph` slot with
+ * the foundation's `__glyph` class, drawn from the canonical icon bank (#10).
+ */
+export declare const GeolocationErrorScreen: React.ForwardRefExoticComponent<GeolocationErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default GeolocationErrorScreen;