@incodetech/prizma-core-screens 0.1.3 → 0.2.4

package/src/FaceMatchLayout.css

@@ -30,13 +30,38 @@
   flex-direction: column;
   align-items: center;
 
+  /* The stage is exactly as wide as the discs at rest, and it clips.
+   *
+   * The entrance throw below is a flat 200px, chosen so a disc clears the edge
+   * of a 390 screen. On a phone that works: the discs start outside the screen
+   * and fly in. On a desktop viewport 200px clears nothing, so instead of an
+   * entrance you watch two discs sit 576px apart and glide together to 176 —
+   * the move reads as a mistake rather than an arrival (Camila, 2026-09-25).
+   *
+   * Rather than scale the throw per viewport, the stage stops being the
+   * viewport. `fit-content` makes it the width of the resting pair, which
+   * centres via the auto margins; anything thrown past that edge is clipped.
+   * The arithmetic: a disc at rest sits 88px off centre, +200 puts its centre
+   * at 288 and its inner edge at 208, against a half-stage of ~168. Hidden,
+   * with room to spare, at every viewport. No magic number and no new token —
+   * the discs define their own stage, and desktop now plays what the phone
+   * always played.
+   *
+   * `clip` rather than `hidden` on purpose: `hidden` on one axis forces the
+   * other to `auto` and quietly makes this a scroll container. Nothing
+   * legitimately overflows — the callouts are in normal flow, and the
+   * converge moves every disc inward and up — so there is nothing to lose. */
+  width: fit-content;
+  margin-inline: auto;
+  overflow: clip;
+
   /* The disc's diameter, named once. `--matching`'s rosette and `--animated`'s
    * convergence both have to know it, and a second literal is a second thing to
    * forget. Still a design literal, still DEVIATIONS #FM-22 — just not repeated. */
   --face-match-photo: 160px;
   /* Half the distance between two neighbouring discs: what one of them has to
    * travel to reach the pair's centre line. */
-  --face-match-half-step: calc((var(--face-match-photo) + var(--prizma-spacing-16)) / 2);
+  --face-match-half-step: calc((var(--face-match-photo, 160px) + var(--prizma-spacing-16)) / 2);
 }
 
 .face-match-cluster__row {
@@ -73,13 +98,38 @@
  * for component geometry. DEVIATIONS.md #FM-22. */
 .face-match-cluster__photo {
   flex-shrink: 0;
-  width: var(--face-match-photo);
-  height: var(--face-match-photo);
+  /* The fallback is load-bearing, not defensive noise. The diameter is
+     inherited from `.face-match-cluster`, so for the frame before that
+     ancestor's rule applies — or in any host that renders a disc outside the
+     cluster — `var()` resolves to nothing, `width` is dropped, and the box
+     falls back to auto. A portrait then paints at its INTRINSIC size, which is
+     landscape for most cameras: the disc flashes wide before snapping to 160.
+     Naming the same literal here costs nothing and removes the flash. */
+  width: var(--face-match-photo, 160px);
+  height: var(--face-match-photo, 160px);
+  /* Belt and braces: whatever resolves for width, the disc is never an
+     ellipse. A circle that is briefly the wrong SIZE is a non-event; one that
+     is briefly the wrong SHAPE reads as broken. */
+  aspect-ratio: 1;
   border-radius: var(--prizma-border-radius-full);
   overflow: hidden;
+  /* Backstop behind the host's pixels while they load, and under anything
+     with transparency. NOT the empty state — that is the modifier below. */
   background: var(--prizma-surface-neutral-100);
 }
 
+/* No photo supplied for this role.
+ *
+ * INTERIM (2026-09-25, owner call): colour is the whole state for now, so the
+ * slot reads as a portrait that belongs here rather than an undesigned hole.
+ * Brand/50 is the same disc PrizmaIllustrationAvatar sits on, which is where
+ * the designed state is most likely to land. The real treatment (bust,
+ * outline, or copy) replaces this rule; the modifier and its class name stay,
+ * so swapping it in is a one-rule change and nothing downstream moves. */
+.face-match-cluster__photo--empty {
+  background: var(--prizma-surface-brand-50);
+}
+
 .face-match-cluster__photo > img,
 .face-match-cluster__photo > video,
 .face-match-cluster__photo > svg {

package/src/FormScreen.css

@@ -49,6 +49,17 @@
 .prizma-form-screen__fields--scroll {
   overflow-y: auto;
   margin-bottom: var(--prizma-spacing-16);
+  /* No scrollbar drawn, on any platform. A phone paints none; a desktop with a
+   * mouse paints a permanent 15px track INSIDE the column, which narrows every
+   * row's box: the two lanes of a `row / 2-col` pair came out short of the
+   * title and the CTA above and below them, and the last link sat half under
+   * the track (eKYB owners on the 1440 frame, Elena 2026-09-24). The stack
+   * still scrolls — wheel, trackpad, keyboard — it just shows no chrome for
+   * it, like the SDK on a phone. DEVIATIONS #EKB-6. */
+  scrollbar-width: none;
+}
+.prizma-form-screen__fields--scroll::-webkit-scrollbar {
+  display: none;
 }
 
 /* Rows in a scrolling stack keep their intrinsic height. A flex item defaults to
@@ -76,3 +87,66 @@
   flex-direction: column;
   gap: var(--prizma-spacing-12);
 }
+
+/* ── Responsive field rows (tablet and desktop) ──────────────────────────────
+ * Exploration `ekyb-desktop` (Elena, 2026-09-24, Figma TWgYZVhurQCizfC4tfLEut
+ * section 6062:9990 "eKYB, Happy path, Desktop"): the eKYB forms designed for
+ * desktop keep the archetype (stepper, title, field stack, Continue + Back, tag)
+ * and only change the SHAPE of the field stack. Her frames keep a 420 column
+ * (the same measure as Title/Max-width and Button/Size/L/Max-width) and draw
+ * `row / 2-col`: two fields of 202 with Spacing/16 between, and Back | Continue
+ * on one row at the same split. Opt-in per screen through `responsive` on
+ * `PrizmaFormScreen` and `PrizmaFormRow` around the pair, so every phone screen
+ * and every other module is byte-identical.
+ *
+ * The threshold is a CONTAINER query on the shell (`pcs-screen`, ScreenShell.css),
+ * not a viewport one: the same screen framed at 390 stays a single column, and
+ * framed on a tablet or desktop panel (shell 468 = 420 column + the two
+ * Spacing/24 gutters) it takes the two-lane shape. 420 is the first width at
+ * which the column IS the designed desktop column. */
+.prizma-form-screen__row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pfs-fields-gap, var(--prizma-spacing-16));
+}
+
+@container pcs-screen (min-width: 420px) {
+  /* Flex + explicit widths rather than grid or `flex: 1`: the canvas converter
+   * reads flex direction, gap and computed widths, and ignores grid and grow
+   * (docs/core-lab-pencil-conversion-gotchas.md), so this is the one shape that
+   * is identical in the browser and on the canvas. Each lane is half the
+   * column less half the Spacing/16 gap: 202 on the 420 column, as drawn. */
+  .prizma-form-screen--responsive .prizma-form-screen__row {
+    flex-direction: row;
+    /* Bottom-aligned: when one label wraps to two lines ("UBO (Unique
+     * Beneficial Owner) name") the two INPUTS still sit on one line and the
+     * long label hangs above; top-aligned, the field itself dropped by a line
+     * (Elena, 2026-09-24). */
+    align-items: flex-end;
+    gap: var(--prizma-spacing-16);
+  }
+  .prizma-form-screen--responsive .prizma-form-screen__row > * {
+    flex: none;
+    width: calc(50% - var(--prizma-spacing-16) / 2);
+    min-width: 0;
+  }
+
+  /* Continue and Back share a row: Back on the left, Continue on the right, as
+   * her frames draw it. The DOM order (primary first, for focus and for the
+   * phone stack) is untouched; only the visual order flips. A screen with one
+   * button (country) keeps it full width. */
+  .prizma-form-screen--responsive .prizma-form-screen__cta {
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+    gap: var(--prizma-spacing-16);
+  }
+  .prizma-form-screen--responsive .prizma-form-screen__cta > .prizma-button {
+    flex: none;
+    width: calc(50% - var(--prizma-spacing-16) / 2);
+    min-width: 0;
+    max-width: none;
+  }
+  .prizma-form-screen--responsive .prizma-form-screen__cta > .prizma-button:only-child {
+    width: 100%;
+  }
+}

package/src/FormScreen.tsx

@@ -98,12 +98,31 @@ export interface PrizmaFormScreenProps
    * eKYB, Data Sharing Consent); it is the archetype's now. DEVIATIONS #DSC-2.
    */
   scrollFields?: boolean;
+  /**
+   * Let the field stack change SHAPE on a wide screen: `PrizmaFormRow` pairs
+   * become two lanes and Continue + Back share a row, once the shell's own
+   * container is at least 600 wide (FormScreen.css). Off by default, so every
+   * phone screen is untouched. Exploration `ekyb-desktop`, 2026-09-24.
+   */
+  responsive?: boolean;
   navLabel?: string;
   screenId?: string;
   overrides?: PrizmaScreenOverrides;
   onAction?: PrizmaScreenActionHandler;
 }
 
+/**
+ * Two (or one) related fields that share a row on a wide screen and stack on a
+ * phone — street + house number, name + surname. A plain wrapper: it carries no
+ * spacing of its own beyond the stack's gap, and it only does anything inside a
+ * `PrizmaFormScreen` with `responsive`.
+ */
+export function PrizmaFormRow({ children, className }: { children?: ReactNode; className?: string }) {
+  return (
+    <div className={['prizma-form-screen__row', className].filter(Boolean).join(' ')}>{children}</div>
+  );
+}
+
 /**
  * Archetype E — Form / Input (GUIDELINES.md §6-E).
  * Nav → title block → field stack → CTA → verified tag. Module states
@@ -127,6 +146,7 @@ export const PrizmaFormScreen = forwardRef<HTMLDivElement, PrizmaFormScreenProps
       fieldsOffset,
       fieldsGap,
       scrollFields = false,
+      responsive = false,
       navLabel,
       screenId,
       showHeader = true,
@@ -137,7 +157,13 @@ export const PrizmaFormScreen = forwardRef<HTMLDivElement, PrizmaFormScreenProps
     },
     ref,
   ) => (
-    <PrizmaScreenShell ref={ref} {...shell}>
+    <PrizmaScreenShell
+      ref={ref}
+      {...shell}
+      className={[shell.className, responsive ? 'prizma-form-screen--responsive' : null]
+        .filter(Boolean)
+        .join(' ') || undefined}
+    >
       <PrizmaScreenNav reserved={!showHeader} logo={overrides?.logo} navLabel={navLabel} />
       <div className="prizma-screen-layout__content">
         {progress ? (

package/src/index.ts

@@ -391,7 +391,18 @@ export {
   type EkycDetailsValues,
   type EkycLicenseValues,
   type EkycStrings,
+  type EkycCountryValues,
 } from './EkycStrings';
+export {
+  EKYC_COUNTRY_CATALOG,
+  ekycCountryVariant,
+  type EkycCountryVariant,
+  type EkycCountryStep,
+  type EkycField,
+  type EkycFieldKey,
+  type EkycFieldKind,
+} from './EkycCountryCatalog';
+export { EkycCountryFormScreen, type EkycCountryFormScreenProps } from './EkycCountryFormScreen';
 export { EkycDetailsScreen, type EkycDetailsScreenProps } from './EkycDetailsScreen';
 export { EkycErrorScreen, type EkycErrorScreenProps } from './EkycErrorScreen';
 export { EkycLicenseScreen, type EkycLicenseScreenProps } from './EkycLicenseScreen';
@@ -553,7 +564,60 @@ export {
 export { ErrorScreensScreen, type ErrorScreensScreenProps } from './ErrorScreensScreen';
 
 // Demo screens — the end screen; the start screen is owner-owned and pending.
-export { type DemoScreensStrings } from './DemoScreensStrings';
+export {
+  type DemoScreensStrings,
+  type DemoScreensLanguage,
+  type DemoScreensOption,
+} from './DemoScreensStrings';
+export {
+  DemoScreensConfigScreen,
+  type DemoScreensConfigScreenProps,
+  type DemoScreensConfigState,
+} from './DemoScreensConfigScreen';
+export {
+  DemoScreensTermsScreen,
+  type DemoScreensTermsScreenProps,
+} from './DemoScreensTermsScreen';
+export {
+  DemoScreensLaunchScreen,
+  type DemoScreensLaunchScreenProps,
+} from './DemoScreensLaunchScreen';
+export {
+  DemoScreensConfigSheetScreen,
+  type DemoScreensConfigSheetScreenProps,
+  type DemoScreensConfigSheetState,
+} from './DemoScreensConfigSheetScreen';
+export {
+  DemoScreensEditSheetScreen,
+  type DemoScreensEditSheetScreenProps,
+  type DemoScreensEditSheetState,
+} from './DemoScreensEditSheetScreen';
+export {
+  DemoScreensRedirectScreen,
+  type DemoScreensRedirectScreenProps,
+  type DemoScreensRedirectStage,
+} from './DemoScreensRedirectScreen';
+export {
+  DemoScreensSplashScreen,
+  type DemoScreensSplashScreenProps,
+} from './DemoScreensSplashScreen';
+export {
+  DemoScreensStartScreen,
+  type DemoScreensStartScreenProps,
+} from './DemoScreensStartScreen';
+export {
+  DemoScreensSettingsScreen,
+  type DemoScreensSettingsScreenProps,
+} from './DemoScreensSettingsScreen';
+export {
+  DemoScreensRunningScreen,
+  type DemoScreensRunningScreenProps,
+} from './DemoScreensRunningScreen';
+export {
+  DemoScreensResultScreen,
+  type DemoScreensResultScreenProps,
+  type DemoScreensResultStatus,
+} from './DemoScreensResultScreen';
 export {
   DemoScreensEndScreen,
   type DemoScreensEndScreenProps,

package/src/styles.css

@@ -15,6 +15,7 @@
 @import './CaptureOverlay.css';
 @import './CurpLayout.css';
 @import './DataSharingConsentLayout.css';
+@import './DemoScreensLayout.css';
 @import './DocumentCaptureLayout.css';
 @import './EkycLayout.css';
 @import './ElectronicSignatureLayout.css';