@incodetech/prizma-core-screens 0.1.3 → 0.2.3

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

@@ -86,11 +86,28 @@ export interface PrizmaFormScreenProps extends Omit<PrizmaScreenShellProps, 'dar
      * 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 declare function PrizmaFormRow({ children, className }: {
+    children?: ReactNode;
+    className?: string;
+}): React.JSX.Element;
 /**
  * Archetype E — Form / Input (GUIDELINES.md §6-E).
  * Nav → title block → field stack → CTA → verified tag. Module states

package/dist/FormScreen.js

@@ -8,13 +8,24 @@ import { PrizmaScreenShell } from './ScreenShell';
 import { PrizmaScreenNav } from './ScreenNav';
 import './ScreenLayout.css';
 import './FormScreen.css';
+/**
+ * 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 }) {
+    return (_jsx("div", { className: ['prizma-form-screen__row', className].filter(Boolean).join(' '), children: children }));
+}
 /**
  * Archetype E — Form / Input (GUIDELINES.md §6-E).
  * Nav → title block → field stack → CTA → verified tag. Module states
  * (typing / filled / loading) are separate screens sharing this identical
  * layout, changing only field content.
  */
-export const PrizmaFormScreen = forwardRef(({ progress, title, subtitle, ctaLabel, ctaDisabled, ctaLoading = false, ctaLoadingLabel, linkLabel, linkContent, verifiedLabel, children, fieldsOffset, fieldsGap, scrollFields = false, navLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel }), _jsxs("div", { className: "prizma-screen-layout__content", children: [progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle }), _jsx("div", { className: [
+export const PrizmaFormScreen = forwardRef(({ progress, title, subtitle, ctaLabel, ctaDisabled, ctaLoading = false, ctaLoadingLabel, linkLabel, linkContent, verifiedLabel, children, fieldsOffset, fieldsGap, scrollFields = false, responsive = false, navLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, className: [shell.className, responsive ? 'prizma-form-screen--responsive' : null]
+        .filter(Boolean)
+        .join(' ') || undefined, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel }), _jsxs("div", { className: "prizma-screen-layout__content", children: [progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle }), _jsx("div", { className: [
                         'prizma-form-screen__fields',
                         scrollFields ? 'prizma-form-screen__fields--scroll' : null,
                     ]

package/dist/index.d.ts

@@ -89,7 +89,9 @@ export { FormsLongFormScreen, type FormsLongFormScreenProps } from './FormsLongF
 export { FormsSuccessScreen, type FormsSuccessScreenProps } from './FormsSuccessScreen';
 export { type DataSharingConsentState, type DataSharingConsentItemStrings, type DataSharingConsentStrings, } from './DataSharingConsentStrings';
 export { DataSharingConsentConsentScreen, type DataSharingConsentConsentScreenProps } from './DataSharingConsentConsentScreen';
-export { type EkycDetailsState, type EkycLicenseState, type EkycLicenseStateOption, type EkycDetailsValues, type EkycLicenseValues, type EkycStrings, } from './EkycStrings';
+export { type EkycDetailsState, type EkycLicenseState, type EkycLicenseStateOption, 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';
@@ -139,7 +141,18 @@ export { type LoadersStrings, type LoadersVariant, type LoadersCopy } from './Lo
 export { LoaderScreen, type LoaderScreenProps } from './LoaderScreen';
 export { type ErrorScreensStrings, type ErrorScreensVariant, type ErrorScreensCopy, } from './ErrorScreensStrings';
 export { ErrorScreensScreen, type ErrorScreensScreenProps } from './ErrorScreensScreen';
-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, } from './DemoScreensEndScreen';
 export { faceCaptureFlow, faceCaptureBranches, type FaceCaptureFlowStep, type FaceCaptureFlowVariant, type FaceCaptureScreenProps, faceMatchFlow, faceMatchBranches, type FaceMatchFlowStep, type FaceMatchFlowVariant, type FaceMatchScreenProps, } from './flows';
 export { documentCaptureFlow, documentCaptureCameraFlow, documentCaptureUploadFlow, documentCaptureBranchesByMethod, documentCaptureBranches, type DocumentCaptureFlowStep, type DocumentCaptureFlowVariant, type DocumentCaptureScreenProps, idCaptureFlow, idCapturePassportFlow, idCaptureBranches, idCaptureVerticalOf, type IdCaptureFlowStep, type IdCaptureFlowVariant, type IdCaptureScreenProps, } from './flows';

package/dist/index.js

@@ -82,6 +82,8 @@ export { FormsFieldScreen } from './FormsFieldScreen';
 export { FormsLongFormScreen } from './FormsLongFormScreen';
 export { FormsSuccessScreen } from './FormsSuccessScreen';
 export { DataSharingConsentConsentScreen } from './DataSharingConsentConsentScreen';
+export { EKYC_COUNTRY_CATALOG, ekycCountryVariant, } from './EkycCountryCatalog';
+export { EkycCountryFormScreen } from './EkycCountryFormScreen';
 export { EkycDetailsScreen } from './EkycDetailsScreen';
 export { EkycErrorScreen } from './EkycErrorScreen';
 export { EkycLicenseScreen } from './EkycLicenseScreen';
@@ -124,6 +126,17 @@ export { PermissionsAllowScreen, } from './PermissionsAllowScreen';
 export { PermissionsBrowserStepsScreen, } from './PermissionsBrowserStepsScreen';
 export { LoaderScreen } from './LoaderScreen';
 export { ErrorScreensScreen } from './ErrorScreensScreen';
+export { DemoScreensConfigScreen, } from './DemoScreensConfigScreen';
+export { DemoScreensTermsScreen, } from './DemoScreensTermsScreen';
+export { DemoScreensLaunchScreen, } from './DemoScreensLaunchScreen';
+export { DemoScreensConfigSheetScreen, } from './DemoScreensConfigSheetScreen';
+export { DemoScreensEditSheetScreen, } from './DemoScreensEditSheetScreen';
+export { DemoScreensRedirectScreen, } from './DemoScreensRedirectScreen';
+export { DemoScreensSplashScreen, } from './DemoScreensSplashScreen';
+export { DemoScreensStartScreen, } from './DemoScreensStartScreen';
+export { DemoScreensSettingsScreen, } from './DemoScreensSettingsScreen';
+export { DemoScreensRunningScreen, } from './DemoScreensRunningScreen';
+export { DemoScreensResultScreen, } from './DemoScreensResultScreen';
 export { DemoScreensEndScreen, } from './DemoScreensEndScreen';
 // ── Flows (module screen sequences — powers the FlowPlayer prototypes) ──────
 export { faceCaptureFlow, faceCaptureBranches, faceMatchFlow, faceMatchBranches, } from './flows';

package/dist/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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/prizma-core-screens",
-  "version": "0.1.3",
+  "version": "0.2.3",
   "description": "Prizma Design System — SDK module screens: composed, responsive, brand-themeable React screens built from @incodetech/prizma-core-web.",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,11 +55,66 @@
       "types": "./dist/DataSharingConsentConsentScreen.d.ts",
       "import": "./dist/DataSharingConsentConsentScreen.js"
     },
+    "./demo-screens-config-screen": {
+      "source": "./src/DemoScreensConfigScreen.tsx",
+      "types": "./dist/DemoScreensConfigScreen.d.ts",
+      "import": "./dist/DemoScreensConfigScreen.js"
+    },
+    "./demo-screens-config-sheet-screen": {
+      "source": "./src/DemoScreensConfigSheetScreen.tsx",
+      "types": "./dist/DemoScreensConfigSheetScreen.d.ts",
+      "import": "./dist/DemoScreensConfigSheetScreen.js"
+    },
+    "./demo-screens-edit-sheet-screen": {
+      "source": "./src/DemoScreensEditSheetScreen.tsx",
+      "types": "./dist/DemoScreensEditSheetScreen.d.ts",
+      "import": "./dist/DemoScreensEditSheetScreen.js"
+    },
     "./demo-screens-end-screen": {
       "source": "./src/DemoScreensEndScreen.tsx",
       "types": "./dist/DemoScreensEndScreen.d.ts",
       "import": "./dist/DemoScreensEndScreen.js"
     },
+    "./demo-screens-launch-screen": {
+      "source": "./src/DemoScreensLaunchScreen.tsx",
+      "types": "./dist/DemoScreensLaunchScreen.d.ts",
+      "import": "./dist/DemoScreensLaunchScreen.js"
+    },
+    "./demo-screens-redirect-screen": {
+      "source": "./src/DemoScreensRedirectScreen.tsx",
+      "types": "./dist/DemoScreensRedirectScreen.d.ts",
+      "import": "./dist/DemoScreensRedirectScreen.js"
+    },
+    "./demo-screens-result-screen": {
+      "source": "./src/DemoScreensResultScreen.tsx",
+      "types": "./dist/DemoScreensResultScreen.d.ts",
+      "import": "./dist/DemoScreensResultScreen.js"
+    },
+    "./demo-screens-running-screen": {
+      "source": "./src/DemoScreensRunningScreen.tsx",
+      "types": "./dist/DemoScreensRunningScreen.d.ts",
+      "import": "./dist/DemoScreensRunningScreen.js"
+    },
+    "./demo-screens-settings-screen": {
+      "source": "./src/DemoScreensSettingsScreen.tsx",
+      "types": "./dist/DemoScreensSettingsScreen.d.ts",
+      "import": "./dist/DemoScreensSettingsScreen.js"
+    },
+    "./demo-screens-splash-screen": {
+      "source": "./src/DemoScreensSplashScreen.tsx",
+      "types": "./dist/DemoScreensSplashScreen.d.ts",
+      "import": "./dist/DemoScreensSplashScreen.js"
+    },
+    "./demo-screens-start-screen": {
+      "source": "./src/DemoScreensStartScreen.tsx",
+      "types": "./dist/DemoScreensStartScreen.d.ts",
+      "import": "./dist/DemoScreensStartScreen.js"
+    },
+    "./demo-screens-terms-screen": {
+      "source": "./src/DemoScreensTermsScreen.tsx",
+      "types": "./dist/DemoScreensTermsScreen.d.ts",
+      "import": "./dist/DemoScreensTermsScreen.js"
+    },
     "./document-capture-capture-screen": {
       "source": "./src/DocumentCaptureCaptureScreen.tsx",
       "types": "./dist/DocumentCaptureCaptureScreen.d.ts",
@@ -145,6 +200,11 @@
       "types": "./dist/EkybSuccessScreen.d.ts",
       "import": "./dist/EkybSuccessScreen.js"
     },
+    "./ekyc-country-form-screen": {
+      "source": "./src/EkycCountryFormScreen.tsx",
+      "types": "./dist/EkycCountryFormScreen.d.ts",
+      "import": "./dist/EkycCountryFormScreen.js"
+    },
     "./ekyc-details-screen": {
       "source": "./src/EkycDetailsScreen.tsx",
       "types": "./dist/EkycDetailsScreen.d.ts",
@@ -624,6 +684,7 @@
     "./capture-overlay.css": "./dist/CaptureOverlay.css",
     "./curp-layout.css": "./dist/CurpLayout.css",
     "./data-sharing-consent-layout.css": "./dist/DataSharingConsentLayout.css",
+    "./demo-screens-layout.css": "./dist/DemoScreensLayout.css",
     "./document-capture-layout.css": "./dist/DocumentCaptureLayout.css",
     "./ekyc-layout.css": "./dist/EkycLayout.css",
     "./electronic-signature-layout.css": "./dist/ElectronicSignatureLayout.css",

package/src/DemoScreensConfigScreen.tsx

@@ -0,0 +1,101 @@
+import React, { forwardRef } from 'react';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+
+/**
+ * The five states the `Configuration` section draws:
+ *  - `empty`            `demo_2` — placeholders, CTA disabled
+ *  - `filled`           `demo_4` — Client ID typed, environment chosen
+ *  - `environmentOpen`  `demo_4` — the environment menu open
+ *  - `custom`           `demo_3` — environment "Custom" reveals the URL field
+ *  - `error`            `Error Client ID` — the backend rejected the ID
+ */
+export type DemoScreensConfigState = 'empty' | 'filled' | 'environmentOpen' | 'custom' | 'error';
+
+export interface DemoScreensConfigScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Family copy — this screen reads the `config` slice. */
+  strings: DemoScreensStrings;
+  state?: DemoScreensConfigState;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Demo screens · NATIVE — the configuration form, `Configuration` (2010:4704)
+ * in `Demo App - Latest Design`: the logo nav, Client ID, Environment, and a
+ * URL field once the environment is Custom. Continue stays disabled until
+ * both fields hold a value.
+ *
+ * Archetype E's shape without E's title: the frame draws no heading, and
+ * `PrizmaFormScreen` insists on one (DEVIATIONS #GEN-13), so the screen
+ * composes the nav and E's layout classes itself. Fields and CTA are Core's.
+ * The keyboard on the typing frames is OS chrome and is not drawn (#DC-20).
+ */
+export const DemoScreensConfigScreen = forwardRef<HTMLDivElement, DemoScreensConfigScreenProps>(
+  (
+    { strings, state = 'empty', screenId = `demo-screens-config-${state}`, overrides, onAction, ...shell },
+    ref,
+  ) => {
+    const c = strings.config;
+    const filled = state !== 'empty';
+    const custom = state === 'custom';
+    const environment =
+      state === 'empty' ? null : custom ? c.customEnvironment : c.environments[0]?.value ?? null;
+    return (
+      <PrizmaScreenShell ref={ref} data-screen-id={screenId} {...shell}>
+        <PrizmaScreenNav logo={overrides?.logo} navLabel={strings.navLabel} />
+        <div className="prizma-screen-layout__content">
+          <div className="demo-screens-config__fields">
+            {/* `defaultValue`, never `readOnly`: Core paints a read-only field on
+                the disabled surface, and the frame shows a live field. `key`
+                re-mounts it per state so the default takes. */}
+            <PrizmaTextField
+              key={state}
+              label={c.clientIdLabel}
+              placeholder={c.clientIdPlaceholder}
+              defaultValue={filled ? c.clientIdValue : ''}
+              error={state === 'error'}
+              errorText={state === 'error' ? c.clientIdError : undefined}
+              showRequiredMarker={false}
+            />
+            <PrizmaDropdown
+              label={c.environmentLabel}
+              placeholder={c.environmentPlaceholder}
+              options={c.environments}
+              value={environment}
+              showRequiredMarker={false}
+              forceOpen={state === 'environmentOpen'}
+            />
+            {custom ? (
+              <PrizmaTextField label={c.urlLabel} defaultValue={c.urlValue} showRequiredMarker={false} />
+            ) : null}
+          </div>
+        </div>
+        <div className="prizma-screen-layout__band prizma-screen-layout__band--bare demo-screens-band">
+          <div className="prizma-screen-layout__band__ctas">
+            <PrizmaButton
+              variant="primary"
+              size="L"
+              disabled={!filled || state === 'error'}
+              onClick={() => onAction?.({ type: 'cta', screenId })}
+            >
+              {c.ctaLabel}
+            </PrizmaButton>
+          </div>
+        </div>
+      </PrizmaScreenShell>
+    );
+  },
+);
+DemoScreensConfigScreen.displayName = 'DemoScreensConfigScreen';
+
+export default DemoScreensConfigScreen;

package/src/DemoScreensConfigSheetScreen.tsx

@@ -0,0 +1,120 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaNavigation } from '@incodetech/prizma-core-web/navigation';
+import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
+import { PrizmaBottomSheetContent } from '@incodetech/prizma-core-web/bottom-sheet';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+
+/**
+ * The four states of the `Demo config screen` row (2118:20999):
+ *  - `default`   "Build Predefined", Save disabled
+ *  - `flowOpen`  the flow menu open, with its search
+ *  - `selected`  "uxv2" chosen, Save live
+ *  - `saved`     back from the edit sheet: "settings saved" snackbar
+ */
+export type DemoScreensConfigSheetState = 'default' | 'flowOpen' | 'selected' | 'saved';
+
+export interface DemoScreensConfigSheetScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Family copy — this screen reads the `configSheet` slice. */
+  strings: DemoScreensStrings;
+  state?: DemoScreensConfigSheetState;
+  screenId?: string;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/** Scrim + Core's sheet panel, the way Document Capture's method sheet does it
+ *  (DEVIATIONS #DC-30): the screen owns the scrim, Core owns the panel. */
+export const DemoScreensSheet: React.FC<{ ariaLabel: string; children: ReactNode }> = ({ ariaLabel, children }) => (
+  <>
+    <div className="demo-screens-sheet-scrim" aria-hidden="true" />
+    <div className="demo-screens-sheet-panel">
+      <PrizmaBottomSheetContent variant="dialog" ariaLabel={ariaLabel} showButtonGroup={false} body={children} />
+    </div>
+  </>
+);
+
+/**
+ * Demo screens · NATIVE — the configuration sheet the Launch menu opens
+ * (`Configuration › Demo config screen`, 2118:20999): choose the flow to run,
+ * read which Client ID and environment are set, or go edit them.
+ *
+ * Core's bottom sheet carries the panel; inside it Navigation (close only),
+ * a left Title, a searchable Dropdown, two read-only lines, and a CTA band of
+ * primary → tertiary link → build caption. The sheet's own header slot is not
+ * used because the frame puts the nav row ABOVE the title.
+ */
+export const DemoScreensConfigSheetScreen = forwardRef<HTMLDivElement, DemoScreensConfigSheetScreenProps>(
+  (
+    { strings, state = 'default', screenId = `demo-screens-config-sheet-${state}`, onAction, ...shell },
+    ref,
+  ) => {
+    const s = strings.configSheet;
+    const options = [{ value: s.flowValue, label: s.flowValue }, ...s.flows];
+    const value = state === 'selected' ? s.flowSelected : s.flowValue;
+    return (
+      <PrizmaScreenShell ref={ref} data-screen-id={screenId} {...shell}>
+        {state === 'saved' ? (
+          <div className="demo-screens-toast">
+            <PrizmaSnackbar state="success" contentResizing="fill" isMultiline>
+              {s.savedSnackbar}
+            </PrizmaSnackbar>
+          </div>
+        ) : null}
+        <DemoScreensSheet ariaLabel={s.title}>
+          <div className="demo-screens-sheet__nav">
+            <PrizmaNavigation
+              showIncodeLogo={false}
+              showRightIcon
+              closeLabel={s.closeLabel}
+              onRightIconClick={() => onAction?.({ type: 'help', screenId })}
+              aria-label={s.title}
+            />
+          </div>
+          <div className="demo-screens-sheet__title">
+            <PrizmaTitle variant="left" title={s.title} showSubtitle subtitle={s.subtitle} />
+          </div>
+          <div className="demo-screens-sheet__fields">
+            <PrizmaDropdown
+              label={s.flowLabel}
+              options={options}
+              value={value}
+              showRequiredMarker={false}
+              searchable
+              searchPlaceholder={s.searchPlaceholder}
+              clearSearchLabel={s.clearSearchLabel}
+              forceOpen={state === 'flowOpen'}
+            />
+            <div className="demo-screens-sheet__lines">
+              <p className="demo-screens-sheet__line">{s.clientIdLine}</p>
+              <p className="demo-screens-sheet__line">{s.environmentLine}</p>
+            </div>
+          </div>
+          <div className="demo-screens-sheet__band">
+            <PrizmaButton
+              variant="primary"
+              size="L"
+              disabled={state !== 'selected'}
+              onClick={() => onAction?.({ type: 'cta', screenId })}
+            >
+              {s.saveLabel}
+            </PrizmaButton>
+            <PrizmaButton variant="tertiary-link" size="L" onClick={() => onAction?.({ type: 'tertiary', screenId })}>
+              {s.editLinkLabel}
+            </PrizmaButton>
+            <p className="demo-screens-build">{s.buildLabel}</p>
+          </div>
+        </DemoScreensSheet>
+      </PrizmaScreenShell>
+    );
+  },
+);
+DemoScreensConfigSheetScreen.displayName = 'DemoScreensConfigSheetScreen';
+
+export default DemoScreensConfigSheetScreen;