@incodetech/prizma-core-screens 0.1.0

package/README.md

@@ -0,0 +1,74 @@
+# @incodetech/prizma-core-screens
+
+SDK module screens — composed, **responsive**, brand-themeable React screens
+(Face Capture, ID Capture, Phone Input, …) built entirely from
+`@incodetech/prizma-core-web` components and `@incodetech/prizma-core-tokens`.
+
+This package is the **pattern/product tier** of Prizma Core: screens are
+web-only compositions and deliberately do NOT enter the three-platform parity
+regime that governs `prizma-core-web` components.
+
+## What a screen is
+
+- A pure, stateless React component: `({ strings, overrides?, onAction? }) => JSX`.
+- Copy always arrives via `strings` props — nothing hardcoded (i18n-ready).
+- Styled with plain CSS bound to `--prizma-*` token variables; zero `!important`.
+- Brand-reactive through `applyPrizmaTheme({ seed })` from `prizma-core-web` —
+  no bespoke theming layer.
+- Dark mode via `[data-prizma-theme='dark']`, same as every Core component.
+- Sizing: screens are authored at the **390×844** design reference and the HOST
+  scales them to fit its container (`transform: scale()`), the way Studio's
+  device frames and the hub's preview cards already work. Height is fluid and
+  width grows/re-centers above 390, but layout never reflows below it — Core's
+  fixed-width `PrizmaTag` (340) and `PrizmaSelfieCapture` (335) make ~388px a
+  hard floor, and scaling means nothing ever clips. Owner decision 2026-08-17
+  (DEVIATIONS.md #17). Do NOT add fixed-width breakpoint variants of a screen.
+- All visual assets (rings, silhouettes, frames) are inline SVG components —
+  vector, tintable, no host-app `public/` dependencies.
+
+## Structure
+
+`src/` is **flat** — `scripts/exports-map.mjs` globs top-level `src/*.tsx` and
+`src/*.css` to generate the package's `exports` map and aggregate stylesheet, so
+subfolders would be published as nothing. Files group by name prefix instead:
+
+```
+src/
+  ScreenShell/ScreenNav + the archetype *Screen.tsx templates
+                    the foundation: shell, nav, CTA/footer spacing, vignette
+  ScreenLayout.css  THE archetype spacing layer (§5) — nothing else declares it
+  <Module><X>Screen.tsx     one file per module screen, flat PascalCase
+  <Module>Strings.ts        the module's copy contract (props, no English)
+  <Module>Layout.css        module-only layout additions, if any
+  flows.ts          per-module screen sequences (powers the FlowPlayer prototypes)
+GUIDELINES.md       the compiled screen-construction rulebook (from Incode Studio)
+DEVIATIONS.md       every guidelines-vs-design-system conflict and its resolution
+FIGMA-SOURCES.md    the authoritative design file per SDK module
+```
+
+## Rules for adding screens
+
+1. Compose ONLY from `src/foundation/` templates + `prizma-core-web` components
+   + `prizma-core-icons`. Never invent a new primitive in a module folder.
+2. Every capture screen composes Core's capture components — `PrizmaSelfieCapture`,
+   or `PrizmaIdCapture` (`mode="overlay"`, `scrim`) inside a dark `ScreenShell`.
+   NEVER re-create a window, scrim, overlay geometry or encrypted row. The local
+   `CaptureOverlay` / `ViewfinderScreen` are deprecated re-implementations kept
+   only until the wave completes (DEVIATIONS #F-26).
+3. Spacing/typography come from the archetype templates, never re-declared.
+4. Where `GUIDELINES.md` and the Prizma design system disagree, the design
+   system wins — and the conflict is logged in `DEVIATIONS.md`. Never silently.
+5. Build only the screens inside the **purple parent section** of the module's
+   Figma file.
+
+## Build
+
+`npm run build` = `tsc` → `dist/` + CSS/asset copy + exports-map & aggregate
+drift checks (same contract as `prizma-core-web`). Consumers import tokens once
+(`@incodetech/prizma-core-tokens/css`), then `styles.css` or per-screen sheets.
+
+The build also stamps `'use client'` onto every `src/*.tsx`-derived module in
+`dist/`, so screens import straight into a Next App Router page. `flows.ts`,
+`types.ts` and the `*Strings.ts` deliberately do NOT get it — they are data, and
+the build fails if one of them ends up carrying it. See `prizma-core-web`'s
+README § React Server Components.

package/dist/CaptureOverlay.css

@@ -0,0 +1,55 @@
+/* CaptureOverlay — the one shared capture vignette (GUIDELINES.md §6-D, §7).
+ *
+ * The transparent window carries the scrim as an oversized box-shadow, so the
+ * dimmed surround always hugs the window's rounded geometry. Hardcoded values
+ * below are geometry fixed by design (verified absent from the token set):
+ * the 2000px scrim spread, the rgba(0,0,0,.8) scrim, the 35%-white default
+ * border, and the ID-1 card aspect ratio.
+ */
+
+.prizma-capture-overlay {
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+  border-radius: var(--prizma-border-radius-medium);
+  border: 4px solid rgba(255, 255, 255, 0.35); /* hardcoded — Figma overlay frame, no token */
+  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.8); /* hardcoded — the vignette scrim, no token */
+}
+
+/* Ring (face): 342×342 at the 390 reference → 87.7cqw, capped at design size. */
+.prizma-capture-overlay--ring {
+  width: min(87.7cqw, 342px);
+  aspect-ratio: 1;
+  border-radius: var(--prizma-border-radius-full);
+  margin-inline: auto;
+}
+
+/* Landscape (ID card): full content width, ID-1 card ratio. */
+.prizma-capture-overlay--landscape {
+  width: 100%;
+  aspect-ratio: 1.586; /* hardcoded — ISO/IEC 7810 ID-1 card ratio */
+}
+
+/* Portrait (document / proof of address): full content width, letter-ish ratio. */
+.prizma-capture-overlay--portrait {
+  width: 100%;
+  aspect-ratio: 0.72; /* hardcoded — Studio portrait document frame ratio */
+}
+
+.prizma-capture-overlay--focused {
+  border-color: var(--prizma-border-status-focus);
+}
+
+.prizma-capture-overlay--success {
+  border-color: var(--prizma-border-status-positive-static);
+}
+
+/* Window content (camera feed / captured still) fills the window. */
+.prizma-capture-overlay > img,
+.prizma-capture-overlay > video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/dist/CaptureOverlay.d.ts

@@ -0,0 +1,34 @@
+import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import './CaptureOverlay.css';
+export type PrizmaCaptureOverlayShape = 'ring' | 'portrait' | 'landscape';
+export type PrizmaCaptureOverlayState = 'default' | 'focused' | 'success';
+export interface PrizmaCaptureOverlayProps extends ComponentPropsWithoutRef<'div'> {
+    /** Window geometry: `ring` (face, circular), `landscape` (ID card),
+     *  `portrait` (document / proof of address). */
+    shape: PrizmaCaptureOverlayShape;
+    /** Border treatment: `default` (35% white), `focused` (focus token),
+     *  `success` (positive token). */
+    state?: PrizmaCaptureOverlayState;
+    /** Content inside the transparent window (camera feed / captured still). */
+    children?: ReactNode;
+}
+/**
+ * @deprecated DO NOT USE — scheduled for removal. Use Core instead:
+ * `PrizmaIdCapture` (`type="id" | "passport" | "poa"`, `mode="overlay"`,
+ * `scrim`) or `PrizmaSelfieCapture`.
+ *
+ * This component was written from the Studio-era guidelines' description of the
+ * capture vignette without first checking that the design system already ships
+ * it. It does, and better: Core's scrim is
+ * `box-shadow: 0 0 0 200vmax var(--prizma-surface-neutral-900-80-static)`
+ * (tokenized, viewport-relative) and it carries the real id-h / id-v /
+ * passport-h / passport-v / glare geometry, while this file hardcodes
+ * `rgba(0,0,0,.8)` at a fixed 2000px spread over three generic shapes.
+ *
+ * Keeping a local re-implementation of a Core primitive is exactly the drift
+ * this package exists to end. Zero modules use it (face-capture and face-match
+ * use `PrizmaSelfieCapture`; document-capture uses `PrizmaIdCapture`).
+ * DEVIATIONS.md #F-26.
+ */
+export declare const PrizmaCaptureOverlay: React.ForwardRefExoticComponent<PrizmaCaptureOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export default PrizmaCaptureOverlay;

package/dist/CaptureOverlay.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import './CaptureOverlay.css';
+/**
+ * @deprecated DO NOT USE — scheduled for removal. Use Core instead:
+ * `PrizmaIdCapture` (`type="id" | "passport" | "poa"`, `mode="overlay"`,
+ * `scrim`) or `PrizmaSelfieCapture`.
+ *
+ * This component was written from the Studio-era guidelines' description of the
+ * capture vignette without first checking that the design system already ships
+ * it. It does, and better: Core's scrim is
+ * `box-shadow: 0 0 0 200vmax var(--prizma-surface-neutral-900-80-static)`
+ * (tokenized, viewport-relative) and it carries the real id-h / id-v /
+ * passport-h / passport-v / glare geometry, while this file hardcodes
+ * `rgba(0,0,0,.8)` at a fixed 2000px spread over three generic shapes.
+ *
+ * Keeping a local re-implementation of a Core primitive is exactly the drift
+ * this package exists to end. Zero modules use it (face-capture and face-match
+ * use `PrizmaSelfieCapture`; document-capture uses `PrizmaIdCapture`).
+ * DEVIATIONS.md #F-26.
+ */
+export const PrizmaCaptureOverlay = forwardRef(({ shape, state = 'default', className, children, ...rest }, ref) => (_jsx("div", { ref: ref, className: [
+        'prizma-capture-overlay',
+        `prizma-capture-overlay--${shape}`,
+        `prizma-capture-overlay--${state}`,
+        className ?? '',
+    ]
+        .filter(Boolean)
+        .join(' '), ...rest, children: children })));
+PrizmaCaptureOverlay.displayName = 'PrizmaCaptureOverlay';
+export default PrizmaCaptureOverlay;

package/dist/CaptureScreen.d.ts

@@ -0,0 +1,51 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaSelfieCaptureState } from '@incodetech/prizma-core-web/selfie-capture';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenChromeProps, PrizmaScreenOverrides } from './types';
+import './ScreenLayout.css';
+export interface PrizmaCaptureScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title'>, PrizmaScreenChromeProps {
+    /** Where the selfie flow is — forwarded to PrizmaSelfieCapture. */
+    state?: PrizmaSelfieCaptureState;
+    /**
+     * Is the LIVE CAMERA FEED open? Default `true`.
+     *
+     * Only feed-open screens count as "capture screens" (owner rule 2026-08-18):
+     * `uploading` / `processing` / `success` reuse this archetype's geometry —
+     * Core dissolves the stage into a spinner or status mark (DEVIATIONS #11) —
+     * but the camera is closed, so they are ordinary screens: header shown, and
+     * they follow the app theme instead of pinning light.
+     */
+    cameraOpen?: boolean;
+    /** Live camera feed (<video>) or captured still (<img>). */
+    camera?: ReactNode;
+    /** Instruction line under the ring (e.g. "Look at the camera"). Rendered by
+     *  PrizmaSelfieCapture as Headline/H4 at the designed offset — this is the
+     *  ONLY place a capture instruction belongs (DEVIATIONS #12, #14). */
+    feedbackText?: string;
+    /** Manual capture mode — shutter button + manual instruction copy. */
+    isManual?: boolean;
+    manualFeedbackText?: string;
+    /** Per-state status copy (uploading / success / error / warning). */
+    statusLabels?: Partial<Record<PrizmaSelfieCaptureState, string>>;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    navLabel?: string;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Archetype B — Capture / Liveness ring (GUIDELINES.md §6-B).
+ * Nav → capture stage → tag pinned to the bottom. The ring offset (40), the
+ * instruction gap (32), the instruction typography (H4), the silhouette,
+ * and every verdict state live INSIDE Core's PrizmaSelfieCapture — this
+ * archetype adds no offsets of its own (DEVIATIONS #12, #14) and never
+ * re-implements any of it (§7).
+ *
+ * Core also models `uploading` / `success` as capture STATES (the stage
+ * dissolves into the spinner / status title in the ring's own slot), so
+ * loading and result screens of a capture module use this archetype too —
+ * not the centered Processing archetype (DEVIATIONS #11).
+ */
+export declare const PrizmaCaptureScreen: React.ForwardRefExoticComponent<PrizmaCaptureScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PrizmaCaptureScreen;

package/dist/CaptureScreen.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaSelfieCapture, } from '@incodetech/prizma-core-web/selfie-capture';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import './ScreenLayout.css';
+/**
+ * Archetype B — Capture / Liveness ring (GUIDELINES.md §6-B).
+ * Nav → capture stage → tag pinned to the bottom. The ring offset (40), the
+ * instruction gap (32), the instruction typography (H4), the silhouette,
+ * and every verdict state live INSIDE Core's PrizmaSelfieCapture — this
+ * archetype adds no offsets of its own (DEVIATIONS #12, #14) and never
+ * re-implements any of it (§7).
+ *
+ * Core also models `uploading` / `success` as capture STATES (the stage
+ * dissolves into the spinner / status title in the ring's own slot), so
+ * loading and result screens of a capture module use this archetype too —
+ * not the centered Processing archetype (DEVIATIONS #11).
+ */
+export const PrizmaCaptureScreen = forwardRef(({ showHeader, showFooter = true, cameraOpen = true, state, camera, feedbackText, isManual, manualFeedbackText, statusLabels, verifiedLabel, navLabel, screenId, overrides, onAction, ...shell }, ref) => (
+// Pin light ONLY while the camera feed is open: Core paints the live
+// capture area with Static inks because "the capture screen stays WHITE in
+// both modes — light is needed for the shot" (SelfieCapture.css, owner
+// 2026-07-14). Feed-closed screens are ordinary screens and follow the app.
+// DEVIATIONS #F-27.
+_jsxs(PrizmaScreenShell, { ref: ref, theme: cameraOpen ? 'light' : undefined, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !(showHeader ?? (cameraOpen ? Boolean(overrides?.logo) : true)), logo: overrides?.logo, navLabel: navLabel }), _jsxs("div", { className: "prizma-screen-layout__content prizma-screen-layout__content--capture", children: [_jsx(PrizmaSelfieCapture, { state: state, camera: camera, showFeedback: Boolean(feedbackText ?? manualFeedbackText), feedbackText: feedbackText, isManual: isManual, manualFeedbackText: manualFeedbackText, statusLabels: statusLabels }), showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer prizma-screen-layout__footer--pinned", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] })));
+PrizmaCaptureScreen.displayName = 'PrizmaCaptureScreen';
+export default PrizmaCaptureScreen;

package/dist/CurpConfirmScreen.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { CurpStrings } from './CurpStrings';
+import './ScreenLayout.css';
+export interface CurpConfirmScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'> {
+    /** Module copy — this screen reads the `confirm` slice. */
+    strings: CurpStrings;
+    /** The CURP the generator produced, read back for confirmation. */
+    value?: string;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * CURP — the generated-CURP confirmation, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * Figma: the purple `CURP.Gene.confirm` section. Structurally it is
+ * `CurpEnterScreen` with one field and one CTA — nav → Title → Spacing/32 →
+ * field → CTA → tag — but the field is a READ-BACK of what the generator
+ * produced rather than an input, and there is no secondary action, so it stays
+ * its own screen rather than a sixth state of the entry form.
+ *
+ * The field is the one place in this module where Core's disabled surface is
+ * correct: Figma paints it `input/surface/disabled` grey with the value in full
+ * ink, which is exactly what `disabled` renders. (`readOnly` would paint the
+ * same grey and is the semantically better match, but it is the prop the pilot
+ * was told not to reach for by reflex — DEVIATIONS #PI-6 — and on a static spec
+ * screen the two are visually identical, so the plainer one is used.)
+ */
+export declare const CurpConfirmScreen: React.ForwardRefExoticComponent<CurpConfirmScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default CurpConfirmScreen;

package/dist/CurpConfirmScreen.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+/**
+ * CURP — the generated-CURP confirmation, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * Figma: the purple `CURP.Gene.confirm` section. Structurally it is
+ * `CurpEnterScreen` with one field and one CTA — nav → Title → Spacing/32 →
+ * field → CTA → tag — but the field is a READ-BACK of what the generator
+ * produced rather than an input, and there is no secondary action, so it stays
+ * its own screen rather than a sixth state of the entry form.
+ *
+ * The field is the one place in this module where Core's disabled surface is
+ * correct: Figma paints it `input/surface/disabled` grey with the value in full
+ * ink, which is exactly what `disabled` renders. (`readOnly` would paint the
+ * same grey and is the semantically better match, but it is the prop the pilot
+ * was told not to reach for by reflex — DEVIATIONS #PI-6 — and on a static spec
+ * screen the two are visually identical, so the plainer one is used.)
+ */
+export const CurpConfirmScreen = forwardRef(({ strings, value, screenId = 'curp-confirm', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaFormScreen, { ref: ref, title: strings.confirm.title, subtitle: strings.confirm.subtitle, ctaLabel: strings.confirm.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaTextField
+    /* No visible label row in the section — the title carries the meaning
+       (DEVIATIONS #PI-4). */
+    , { "aria-label": strings.confirm.fieldLabel, defaultValue: value ?? '', disabled: true }) })));
+CurpConfirmScreen.displayName = 'CurpConfirmScreen';
+export default CurpConfirmScreen;

package/dist/CurpEnterScreen.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { CurpEnterState, CurpStrings } from './CurpStrings';
+import './ScreenLayout.css';
+import './CurpLayout.css';
+export interface CurpEnterScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel' | 'linkContent'> {
+    /** Module copy — this screen reads the `enter` slice. */
+    strings: CurpStrings;
+    /** Which purple `CURP.EnterCURP.*` section to render. Default `default`. */
+    state?: CurpEnterState;
+    /** The CURP as typed. Empty renders the placeholder. */
+    value?: string;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * CURP — the CURP-entry screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all five purple `CURP.EnterCURP.*` input sections
+ * (`default` / `focused` / `filled` / `error` / `loading`): measured against the
+ * 390 frames they share an identical skeleton — nav → Title (H2, no subtitle)
+ * → Spacing/32 → a single text field → primary CTA → secondary CTA → tag — and
+ * differ ONLY in field content, field treatment and CTA state.
+ *
+ * Three things are deliberate, each a lesson the Phone Input pilot paid for:
+ *
+ * 1. The field is UNCONTROLLED (`defaultValue`). A screen is one static spec
+ *    state, so no `onChange` is needed — and Core's `readOnly`, the other way
+ *    to make a field inert, paints the DISABLED grey surface on states Figma
+ *    draws white (DEVIATIONS #PI-6). `disabled` is set ONLY on `loading`, the
+ *    one section Figma actually greys.
+ * 2. `focused` and `filled` get Core's OWN `--focused` modifier through
+ *    `className` — the class its CSS already implements beside `:focus-within`.
+ *    `PrizmaTextField` has no `forceState` prop yet, unlike `PrizmaDropdown`
+ *    (DEVIATIONS #PI-7); nothing is re-styled here.
+ * 3. The in-flight spinner rides the CTA (`ctaLoading`), never the field
+ *    (DEVIATIONS #PI-5).
+ *
+ * The secondary action, "I don't have a CURP", is drawn by every section as a
+ * full-width OUTLINED button — Core's `PrizmaButton variant="secondary"` — sat
+ * Spacing/16 under the primary. Archetype E has no `secondaryCtaLabel` slot
+ * (archetype F does), so the button is composed into the archetype's
+ * `linkContent` slot: no primitive is invented, no layout is declared, and the
+ * two actions stay distinguishable (`cta` vs `secondary`, the #PI-10 rule).
+ * The gap is reported for promotion — see the module's DEVIATIONS rows.
+ */
+export declare const CurpEnterScreen: React.ForwardRefExoticComponent<CurpEnterScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default CurpEnterScreen;

package/dist/CurpEnterScreen.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+import './CurpLayout.css';
+/**
+ * CURP — the CURP-entry screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all five purple `CURP.EnterCURP.*` input sections
+ * (`default` / `focused` / `filled` / `error` / `loading`): measured against the
+ * 390 frames they share an identical skeleton — nav → Title (H2, no subtitle)
+ * → Spacing/32 → a single text field → primary CTA → secondary CTA → tag — and
+ * differ ONLY in field content, field treatment and CTA state.
+ *
+ * Three things are deliberate, each a lesson the Phone Input pilot paid for:
+ *
+ * 1. The field is UNCONTROLLED (`defaultValue`). A screen is one static spec
+ *    state, so no `onChange` is needed — and Core's `readOnly`, the other way
+ *    to make a field inert, paints the DISABLED grey surface on states Figma
+ *    draws white (DEVIATIONS #PI-6). `disabled` is set ONLY on `loading`, the
+ *    one section Figma actually greys.
+ * 2. `focused` and `filled` get Core's OWN `--focused` modifier through
+ *    `className` — the class its CSS already implements beside `:focus-within`.
+ *    `PrizmaTextField` has no `forceState` prop yet, unlike `PrizmaDropdown`
+ *    (DEVIATIONS #PI-7); nothing is re-styled here.
+ * 3. The in-flight spinner rides the CTA (`ctaLoading`), never the field
+ *    (DEVIATIONS #PI-5).
+ *
+ * The secondary action, "I don't have a CURP", is drawn by every section as a
+ * full-width OUTLINED button — Core's `PrizmaButton variant="secondary"` — sat
+ * Spacing/16 under the primary. Archetype E has no `secondaryCtaLabel` slot
+ * (archetype F does), so the button is composed into the archetype's
+ * `linkContent` slot: no primitive is invented, no layout is declared, and the
+ * two actions stay distinguishable (`cta` vs `secondary`, the #PI-10 rule).
+ * The gap is reported for promotion — see the module's DEVIATIONS rows.
+ */
+export const CurpEnterScreen = forwardRef(({ strings, state = 'default', value, screenId = `curp-enter-${state}`, className, overrides, onAction, ...shell }, ref) => {
+    // Figma treats the five sections as four distinct field treatments:
+    // `loading` greys the field and both actions (the lookup is in flight and
+    // the form is inert); `error` paints the negative surface with the clear ✕
+    // and the "Invalid CURP" row; `focused` / `filled` draw the blue focus ring
+    // with the caret; `default` is the plain resting field on the white
+    // surface.
+    const busy = state === 'loading';
+    const invalid = state === 'error';
+    const focused = state === 'focused' || state === 'filled';
+    return (_jsx(PrizmaFormScreen, { ref: ref, 
+        /* Scopes the one module rule that lets the `error` section keep the
+           clear ✕ Figma draws inside the invalid field — Core renders the
+           button but hides it behind a `:focus-within:not(--error)` guard a
+           static spec state can never satisfy. See CurpLayout.css and the Core
+           request recorded there. Nothing is hand-rolled: the rule only lifts
+           Core's `display: none`. */
+        className: [
+            'curp-enter',
+            invalid ? 'curp-enter--error' : '',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), title: strings.enter.title, subtitle: strings.enter.subtitle, ctaLabel: strings.enter.ctaLabel, 
+        /* The `loading` section swaps the CTA label for Core's spinner. */
+        ctaLoading: busy, ctaLoadingLabel: strings.enter.ctaLoadingLabel, linkContent: _jsx(PrizmaButton, { variant: "secondary", size: "L", 
+            /* Figma greys this action too while the lookup runs. */
+            disabled: busy, onClick: () => onAction?.({ type: 'secondary', screenId }), children: strings.enter.noCurpLabel }), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaTextField, { className: focused ? 'prizma-input-textfield--focused' : undefined, "aria-label": strings.enter.fieldLabel, placeholder: strings.enter.placeholder, defaultValue: value ?? '', 
+            /* A CURP is an 18-character uppercase key. */
+            autoCapitalize: "characters", autoComplete: "off", spellCheck: false, disabled: busy, error: invalid, errorText: invalid ? strings.enter.errorText : undefined, 
+            /* The clear ✕ is drawn only on the error section (76:36434); the
+               `filled` section (79:1553) draws none. Core still owns WHEN it
+               shows — its `--show` state needs a value in the field. */
+            clearable: invalid, clearLabel: strings.enter.clearLabel }) }));
+});
+CurpEnterScreen.displayName = 'CurpEnterScreen';
+export default CurpEnterScreen;

package/dist/CurpGenerateScreen.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { CurpGenerateState, CurpGenerateValues, CurpOption, CurpStrings } from './CurpStrings';
+import './ScreenLayout.css';
+import './CurpLayout.css';
+export interface CurpGenerateScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'> {
+    /** Module copy — this screen reads the `generate` slice. */
+    strings: CurpStrings;
+    /** Which purple `CURP.Gene.*` section to render. Default `default`. */
+    state?: CurpGenerateState;
+    /** The six field values. Empty fields fall back to their placeholders. */
+    values?: CurpGenerateValues;
+    /** Selectable genders. Runtime data, not copy — the host owns the set. */
+    genders?: CurpOption[];
+    /** Selectable birth states (the 32 Mexican entities plus "born abroad").
+     *  Runtime data — a catalogue, never a string table. */
+    states?: CurpOption[];
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * CURP — the generator form, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for the three purple `CURP.Gene.*` form sections
+ * (`default` / `dropdown` / `filled`): identical layout — nav → Title (H2 +
+ * H5) → Spacing/32 → six labelled fields at Spacing/16 → CTA → tag — differing
+ * only in field content and whether the Gender menu is open.
+ *
+ * Unlike `CurpEnterScreen`, these fields DO carry visible labels: Figma draws
+ * "First name *", "Gender *" and so on above every field, which is Core's
+ * `label` slot exactly. The required `*` is Core's `requiredHint` suffix rather
+ * than part of the label string, so a locale can move or replace the marker.
+ *
+ * The date field is Core's `PrizmaDateField` (the `Input / Date` kind, with its
+ * DD/MM/YYYY mask and trailing calendar affordance) — the picker itself belongs
+ * to the OS by Core's contract, so no `onCalendarClick` is wired on a static
+ * spec screen and the icon stays decorative.
+ *
+ * The `dropdown` section IS the open-menu spec state, which Core exposes as the
+ * documentation-only `forceOpen` (a screen is one static state, never a live
+ * interaction) — the same mechanism Phone Input's `countryCode` section uses.
+ */
+export declare const CurpGenerateScreen: React.ForwardRefExoticComponent<CurpGenerateScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default CurpGenerateScreen;

package/dist/CurpGenerateScreen.js

@@ -0,0 +1,57 @@
+'use client';
+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 { PrizmaDateField } from '@incodetech/prizma-core-web/date-field';
+import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+import './CurpLayout.css';
+/**
+ * CURP — the generator form, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for the three purple `CURP.Gene.*` form sections
+ * (`default` / `dropdown` / `filled`): identical layout — nav → Title (H2 +
+ * H5) → Spacing/32 → six labelled fields at Spacing/16 → CTA → tag — differing
+ * only in field content and whether the Gender menu is open.
+ *
+ * Unlike `CurpEnterScreen`, these fields DO carry visible labels: Figma draws
+ * "First name *", "Gender *" and so on above every field, which is Core's
+ * `label` slot exactly. The required `*` is Core's `requiredHint` suffix rather
+ * than part of the label string, so a locale can move or replace the marker.
+ *
+ * The date field is Core's `PrizmaDateField` (the `Input / Date` kind, with its
+ * DD/MM/YYYY mask and trailing calendar affordance) — the picker itself belongs
+ * to the OS by Core's contract, so no `onCalendarClick` is wired on a static
+ * spec screen and the icon stays decorative.
+ *
+ * The `dropdown` section IS the open-menu spec state, which Core exposes as the
+ * documentation-only `forceOpen` (a screen is one static state, never a live
+ * interaction) — the same mechanism Phone Input's `countryCode` section uses.
+ */
+export const CurpGenerateScreen = forwardRef(({ strings, state = 'default', values, genders = [], states = [], screenId = `curp-generate-${state}`, className, overrides, onAction, ...shell }, ref) => {
+    const copy = strings.generate;
+    return (_jsxs(PrizmaFormScreen, { ref: ref, 
+        /* Scopes the two module rules in CurpLayout.css (see the foundation and
+           Core requests recorded there):
+           - `--scroll` lets the six-field stack scroll inside the 844 frame
+             instead of overflowing its box and painting over the CTA. EVERY
+             section gets it, `dropdown` included — Figma draws "Generate"
+             clear and unobstructed under the open menu.
+           - `--menu-open` flips Core's absolutely-positioned menu above its
+             trigger on the one section that forces it open, so the three
+             gender rows stay inside the scrolling column. */
+        className: [
+            'curp-generate',
+            'curp-generate--scroll',
+            state === 'dropdown' ? 'curp-generate--menu-open' : '',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), title: copy.title, subtitle: copy.subtitle, ctaLabel: copy.ctaLabel, ctaLoadingLabel: copy.ctaLoadingLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: [_jsx(PrizmaTextField, { label: copy.firstName.label, placeholder: copy.firstName.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.firstName ?? '' }), _jsx(PrizmaTextField, { label: copy.firstLastName.label, placeholder: copy.firstLastName.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.firstLastName ?? '' }), _jsx(PrizmaTextField, { label: copy.secondLastName.label, placeholder: copy.secondLastName.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.secondLastName ?? '' }), _jsx(PrizmaDropdown, { label: copy.gender.label, placeholder: copy.gender.placeholder, required: true, requiredHint: strings.requiredHint, options: genders, defaultValue: values?.gender ?? null, searchPlaceholder: copy.gender.searchPlaceholder, 
+                /* The `dropdown` section is the open Gender menu. */
+                forceOpen: state === 'dropdown' }), _jsx(PrizmaDateField, { label: copy.dateOfBirth.label, placeholder: copy.dateOfBirth.placeholder, required: true, requiredHint: strings.requiredHint, calendarLabel: copy.dateOfBirth.calendarLabel, defaultValue: values?.dateOfBirth ?? '' }), _jsx(PrizmaDropdown, { label: copy.birthState.label, placeholder: copy.birthState.placeholder, required: true, requiredHint: strings.requiredHint, options: states, defaultValue: values?.birthState ?? null, searchable: true, searchPlaceholder: copy.birthState.searchPlaceholder })] }));
+});
+CurpGenerateScreen.displayName = 'CurpGenerateScreen';
+export default CurpGenerateScreen;