@incodetech/prizma-core-screens 0.1.3 → 0.2.4

package/dist/DemoScreensResultScreen.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+const MARK = {
+    approved: 'success',
+    rejected: 'error',
+    // No mark while a human decides: a tick or a cross here would claim a
+    // verdict the session never reached.
+    inReview: 'none',
+    // A broken flow reads as an error, not as a pending result (dev spec).
+    notCompleted: 'error',
+};
+const RESTART_BY_DEFAULT = {
+    approved: false,
+    rejected: true,
+    inReview: false,
+    notCompleted: true,
+};
+/**
+ * Demo screens — the end of a session, on the Result archetype
+ * (GUIDELINES §6-F, `PrizmaResultScreen`).
+ *
+ * Figma:
+ *   `approved`     `demo_7` (2010:5745) "Thank you!" · green mark
+ *   `rejected`     `demo_8` (2010:5808) "Verification failed" · red mark · Restart
+ *   `inReview`     `63:399` "Verification complete!" · bare title
+ *   `notCompleted` "DemoApp: End Screens" › `Processnotcompleted` · red mark · Restart
+ *
+ * One component for the four because they are one screen with one axis: the
+ * host learns the session status and passes it through. `DemoScreensEndScreen`
+ * stays exported as the `inReview` case under its original name.
+ */
+export const DemoScreensResultScreen = forwardRef(({ strings, status, showRestart = RESTART_BY_DEFAULT[status], screenId = `demo-screens-result-${status}`, overrides, onAction, ...shell }, ref) => {
+    const copy = status === 'approved'
+        ? strings.result.approved
+        : status === 'rejected'
+            ? strings.result.rejected
+            : status === 'inReview'
+                ? strings.end
+                : strings.notCompleted;
+    return (_jsx(PrizmaResultScreen, { ref: ref, status: MARK[status], title: copy.title, subtitle: copy.subtitle, ctaLabel: showRestart ? strings.result.restartLabel : undefined, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+});
+DemoScreensResultScreen.displayName = 'DemoScreensResultScreen';
+export default DemoScreensResultScreen;

package/dist/DemoScreensRunningScreen.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import './ScreenLayout.css';
+export interface DemoScreensRunningScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
+    /** Family copy — this screen reads the `running` slice. */
+    strings: DemoScreensStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Demo screens — "Hold on a sec…", `demo_6` (2010:6180): the wait while the
+ * session is scored, between the last module and the verdict.
+ *
+ * Archetype C (`PrizmaProcessingScreen`, GUIDELINES §6-C) in its pure form:
+ * spinner, title, one line under it, the tag. No CTA — there is nothing for
+ * the prospect to do but wait, and the frame draws no button.
+ */
+export declare const DemoScreensRunningScreen: React.ForwardRefExoticComponent<DemoScreensRunningScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DemoScreensRunningScreen;

package/dist/DemoScreensRunningScreen.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * Demo screens — "Hold on a sec…", `demo_6` (2010:6180): the wait while the
+ * session is scored, between the last module and the verdict.
+ *
+ * Archetype C (`PrizmaProcessingScreen`, GUIDELINES §6-C) in its pure form:
+ * spinner, title, one line under it, the tag. No CTA — there is nothing for
+ * the prospect to do but wait, and the frame draws no button.
+ */
+export const DemoScreensRunningScreen = forwardRef(({ strings, screenId = 'demo-screens-running', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, status: "loading", title: strings.running.title, subtitle: strings.running.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+DemoScreensRunningScreen.displayName = 'DemoScreensRunningScreen';
+export default DemoScreensRunningScreen;

package/dist/DemoScreensSettingsScreen.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+export interface DemoScreensSettingsScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+    /** Family copy — this screen reads the `settings` slice. */
+    strings: DemoScreensStrings;
+    /** The selected language, by `DemoScreensLanguage.value`. Defaults to the
+     *  first one listed. */
+    value?: string;
+    /** Documentation-only: render the language menu open (`demo_4`). */
+    menuOpen?: boolean;
+    screenId?: string;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Demo screens — the settings sheet, `demo_3` (2010:6002) closed and `demo_4`
+ * (2010:6060) with the language menu open, in `Demo App - Latest Design`.
+ *
+ * Core's Navigation with the logo off and the close X on, a left-aligned H2,
+ * one searchable Dropdown, one CTA. No verified tag — the frame draws none on
+ * a settings surface.
+ *
+ * Archetype E (`PrizmaFormScreen`) is the near miss: it insists on the logo nav
+ * (or its reserved row) and has no close affordance, and the frame has neither
+ * a logo nor a back chevron. So the shell is composed here with the same
+ * layout classes E uses; the Spacing/32 between the title and the field is the
+ * one measure the file adds (`DemoScreensLayout.css`).
+ *
+ * Flags: the option rows draw the canonical raster where the bank has one
+ * (`US`, `RS`); rows without one draw the label alone rather than an emoji
+ * (DEVIATIONS #GEN-8 — Mexico and Spain are missing from the bank).
+ */
+export declare const DemoScreensSettingsScreen: React.ForwardRefExoticComponent<DemoScreensSettingsScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DemoScreensSettingsScreen;

package/dist/DemoScreensSettingsScreen.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } 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 { PrizmaCountryFlag } from '@incodetech/prizma-core-web/combined';
+import { PrizmaScreenShell } from './ScreenShell';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+/**
+ * Demo screens — the settings sheet, `demo_3` (2010:6002) closed and `demo_4`
+ * (2010:6060) with the language menu open, in `Demo App - Latest Design`.
+ *
+ * Core's Navigation with the logo off and the close X on, a left-aligned H2,
+ * one searchable Dropdown, one CTA. No verified tag — the frame draws none on
+ * a settings surface.
+ *
+ * Archetype E (`PrizmaFormScreen`) is the near miss: it insists on the logo nav
+ * (or its reserved row) and has no close affordance, and the frame has neither
+ * a logo nor a back chevron. So the shell is composed here with the same
+ * layout classes E uses; the Spacing/32 between the title and the field is the
+ * one measure the file adds (`DemoScreensLayout.css`).
+ *
+ * Flags: the option rows draw the canonical raster where the bank has one
+ * (`US`, `RS`); rows without one draw the label alone rather than an emoji
+ * (DEVIATIONS #GEN-8 — Mexico and Spain are missing from the bank).
+ */
+export const DemoScreensSettingsScreen = forwardRef(({ strings, value, menuOpen = false, screenId = 'demo-screens-settings', onAction, ...shell }, ref) => {
+    const { settings } = strings;
+    const options = settings.languages.map(l => ({ value: l.value, label: l.label }));
+    const flagFor = (option) => {
+        const lang = settings.languages.find(l => l.value === option.value);
+        return lang?.countryCode ? (_jsx(PrizmaCountryFlag, { country: { code: lang.countryCode, name: lang.label, dialCode: '', flag: '' } })) : null;
+    };
+    return (_jsxs(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, ...shell, children: [_jsx("div", { className: "demo-screens-settings__nav", children: _jsx(PrizmaNavigation, { showIncodeLogo: false, showRightIcon: true, closeLabel: settings.closeLabel, onRightIconClick: () => onAction?.({ type: 'help', screenId }), "aria-label": strings.navLabel }) }), _jsxs("div", { className: "prizma-screen-layout__content", children: [_jsx(PrizmaTitle, { variant: "left", title: settings.title }), _jsx("div", { className: "demo-screens-settings__fields", children: _jsx(PrizmaDropdown, { label: settings.languageLabel, options: options, defaultValue: value ?? settings.languages[0]?.value ?? null, showRequiredMarker: false, searchable: true, searchPlaceholder: settings.searchPlaceholder, clearSearchLabel: settings.clearSearchLabel, renderLeading: flagFor, forceOpen: menuOpen }) })] }), _jsx("div", { className: "prizma-screen-layout__band prizma-screen-layout__band--bare demo-screens-band", children: _jsx("div", { className: "prizma-screen-layout__band__ctas", children: _jsx(PrizmaButton, { variant: "primary", size: "L", onClick: () => onAction?.({ type: 'cta', screenId }), children: settings.ctaLabel }) }) })] }));
+});
+DemoScreensSettingsScreen.displayName = 'DemoScreensSettingsScreen';
+export default DemoScreensSettingsScreen;

package/dist/DemoScreensSplashScreen.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+export interface DemoScreensSplashScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+    /** Family copy — this screen reads `appName`. */
+    strings: DemoScreensStrings;
+    screenId?: string;
+}
+/**
+ * Demo screens — the splash, `demo_1` (2010:5868) in `Demo App - Latest Design`.
+ *
+ * The brand moment before the front door: the whole stage is Surface/Brand/500,
+ * the wordmark and the app name sit white in the middle. No nav, no CTA, no
+ * verified tag — the frame draws none, and there is nothing to verify yet.
+ *
+ * Not an archetype (GUIDELINES §6 has no "stage" template), so the shell gets
+ * one modifier class and the wordmark block is the same one the start screen
+ * draws. The colour goes through the shell's background and Core's two opt-in
+ * hooks (`--prizma-logo-fill`, Text/Body/0 static); no hex, no new palette.
+ *
+ * The desktop frame (2010:6362) is this same stage filling a 1440 browser
+ * window; the column does not centre, the colour does.
+ */
+export declare const DemoScreensSplashScreen: React.ForwardRefExoticComponent<DemoScreensSplashScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DemoScreensSplashScreen;

package/dist/DemoScreensSplashScreen.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaLogo } from '@incodetech/prizma-core-web/logo';
+import { PrizmaScreenShell } from './ScreenShell';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+/**
+ * Demo screens — the splash, `demo_1` (2010:5868) in `Demo App - Latest Design`.
+ *
+ * The brand moment before the front door: the whole stage is Surface/Brand/500,
+ * the wordmark and the app name sit white in the middle. No nav, no CTA, no
+ * verified tag — the frame draws none, and there is nothing to verify yet.
+ *
+ * Not an archetype (GUIDELINES §6 has no "stage" template), so the shell gets
+ * one modifier class and the wordmark block is the same one the start screen
+ * draws. The colour goes through the shell's background and Core's two opt-in
+ * hooks (`--prizma-logo-fill`, Text/Body/0 static); no hex, no new palette.
+ *
+ * The desktop frame (2010:6362) is this same stage filling a 1440 browser
+ * window; the column does not centre, the colour does.
+ */
+export const DemoScreensSplashScreen = forwardRef(({ strings, screenId = 'demo-screens-splash', className, ...shell }, ref) => (_jsx(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, className: ['demo-screens-splash', className ?? ''].filter(Boolean).join(' '), ...shell, children: _jsxs("div", { className: "demo-screens-wordmark", children: [_jsx(PrizmaLogo, { variant: "incode" }), _jsx("p", { className: "demo-screens-wordmark__caption", children: strings.appName })] }) })));
+DemoScreensSplashScreen.displayName = 'DemoScreensSplashScreen';
+export default DemoScreensSplashScreen;

package/dist/DemoScreensStartScreen.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+export interface DemoScreensStartScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+    /** Family copy — this screen reads `appName`, `start` and `settings.languages`. */
+    strings: DemoScreensStrings;
+    /** The CTA is pressed and the session is being created (`2082:8743`). */
+    loading?: boolean;
+    screenId?: string;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Demo screens — the front door, `demo_2` (2010:5925) in `Demo App - Latest
+ * Design`, and its loading twin `2082:8743`.
+ *
+ * Header row: the current language (label over value, the flag from the
+ * canonical bank) on the left and the menu affordance on the right. Middle: the
+ * wordmark block the splash also draws. Bottom: one primary CTA. No verified
+ * tag — the frame draws none; nothing has been verified yet.
+ *
+ * Not an archetype: §6 has no template with a two-slot header and a centred
+ * wordmark, so the row is composed here from the nav row's own measures
+ * (`DemoScreensLayout.css`). The menu glyph is drawn locally — the frame's
+ * three-dot "Info menu" is not in the canonical bank yet, and the owner asked
+ * for the dots rather than a stand-in (Elena, 2026-09-24). It sits in
+ * Navigation's own icon button so size, colour and focus are Core's; the
+ * geometry is the only new thing, named as such in DEVIATIONS #GEN-10.
+ *
+ * `onAction`: `cta` when the CTA is pressed, `help` for the menu (the
+ * settings sheet is what it opens in the app).
+ */
+/** The three-dot menu glyph, 24 box, currentColor — pending its bank entry. */
+export declare const MenuDotsGlyph: React.FC;
+export declare const DemoScreensStartScreen: React.ForwardRefExoticComponent<DemoScreensStartScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DemoScreensStartScreen;

package/dist/DemoScreensStartScreen.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaLogo } from '@incodetech/prizma-core-web/logo';
+import { PrizmaCountryFlag } from '@incodetech/prizma-core-web/combined';
+import { PrizmaScreenShell } from './ScreenShell';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+/**
+ * Demo screens — the front door, `demo_2` (2010:5925) in `Demo App - Latest
+ * Design`, and its loading twin `2082:8743`.
+ *
+ * Header row: the current language (label over value, the flag from the
+ * canonical bank) on the left and the menu affordance on the right. Middle: the
+ * wordmark block the splash also draws. Bottom: one primary CTA. No verified
+ * tag — the frame draws none; nothing has been verified yet.
+ *
+ * Not an archetype: §6 has no template with a two-slot header and a centred
+ * wordmark, so the row is composed here from the nav row's own measures
+ * (`DemoScreensLayout.css`). The menu glyph is drawn locally — the frame's
+ * three-dot "Info menu" is not in the canonical bank yet, and the owner asked
+ * for the dots rather than a stand-in (Elena, 2026-09-24). It sits in
+ * Navigation's own icon button so size, colour and focus are Core's; the
+ * geometry is the only new thing, named as such in DEVIATIONS #GEN-10.
+ *
+ * `onAction`: `cta` when the CTA is pressed, `help` for the menu (the
+ * settings sheet is what it opens in the app).
+ */
+/** The three-dot menu glyph, 24 box, currentColor — pending its bank entry. */
+export const MenuDotsGlyph = () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "5", cy: "12", r: "2", fill: "currentColor" }), _jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }), _jsx("circle", { cx: "19", cy: "12", r: "2", fill: "currentColor" })] }));
+export const DemoScreensStartScreen = forwardRef(({ strings, loading = false, screenId = 'demo-screens-start', onAction, ...shell }, ref) => {
+    const current = strings.settings.languages.find(l => l.label === strings.start.languageValue);
+    return (_jsxs(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, ...shell, children: [_jsxs("header", { className: "demo-screens-start__header", "aria-label": strings.navLabel, children: [_jsxs("div", { className: "demo-screens-start__language", children: [_jsx("span", { className: "demo-screens-start__language-label", children: strings.start.languageLabel }), _jsxs("span", { className: "demo-screens-start__language-value", children: [current?.countryCode ? (_jsx(PrizmaCountryFlag, { country: { code: current.countryCode, name: current.label, dialCode: '', flag: '' } })) : null, strings.start.languageValue] })] }), _jsx("button", { type: "button", className: "prizma-nav__icon demo-screens-start__menu", "aria-label": strings.start.menuLabel, onClick: () => onAction?.({ type: 'help', screenId }), children: _jsx(MenuDotsGlyph, {}) })] }), _jsx("div", { className: "prizma-screen-layout__content", children: _jsx("div", { className: "demo-screens-start__middle", children: _jsxs("div", { className: "demo-screens-wordmark", children: [_jsx(PrizmaLogo, { variant: "incode" }), _jsx("p", { className: "demo-screens-wordmark__caption", children: strings.appName })] }) }) }), _jsx("div", { className: "prizma-screen-layout__band prizma-screen-layout__band--bare demo-screens-band", children: _jsx("div", { className: "prizma-screen-layout__band__ctas", children: _jsx(PrizmaButton, { variant: "primary", size: "L", loading: loading, onClick: () => onAction?.({ type: 'cta', screenId }), children: strings.start.ctaLabel }) }) })] }));
+});
+DemoScreensStartScreen.displayName = 'DemoScreensStartScreen';
+export default DemoScreensStartScreen;

package/dist/DemoScreensStrings.d.ts

@@ -1,11 +1,203 @@
+export interface DemoScreensLanguage {
+    /** The dropdown option value — a BCP 47 tag (`en-US`, `es-MX`). */
+    value: string;
+    /** The row label, exactly as the app lists it ("English (US)"). */
+    label: string;
+    /** ISO 3166-1 alpha-2 code for the canonical flag bank (`US`, `RS`). Absent
+     *  when the bank has no raster for that country yet — the row then draws
+     *  no flag rather than an emoji. */
+    countryCode?: string;
+}
+/** One row of a picker: an environment, a flow. */
+export interface DemoScreensOption {
+    value: string;
+    label: string;
+}
 export interface DemoScreensStrings {
     /** Accessible name for the logo nav region (i18n — no baked-in English). */
     navLabel?: string;
     /** "verified by" attribution copy for the footer tag. */
     verifiedLabel: string;
+    /** The caption under the wordmark on the splash and the start screen. */
+    appName: string;
+    /** NATIVE · `Configuration` (2010:4704) — Client ID + Environment before the
+     *  app knows who you are. `demo_2` empty, `demo_4` filled, `demo_3` custom
+     *  URL, `Error Client ID` (2116:10697). */
+    config: {
+        clientIdLabel: string;
+        clientIdPlaceholder: string;
+        /** The value the filled states show. */
+        clientIdValue: string;
+        /** Error line under a Client ID the backend rejected. */
+        clientIdError: string;
+        environmentLabel: string;
+        environmentPlaceholder: string;
+        environments: DemoScreensOption[];
+        /** The environment whose choice reveals the URL field. */
+        customEnvironment: string;
+        urlLabel: string;
+        urlValue: string;
+        ctaLabel: string;
+    };
+    /** NATIVE · `Accept Terms` (2010:4923 · 4012:8731) — two documents, each
+     *  with its consent checkbox. */
+    terms: {
+        /** "Last Modified: August 5, 2024" — the line under the logo. */
+        lastModified: string;
+        documents: Record<'terms' | 'privacy', {
+            consentLabel: string;
+            body: string;
+        }>;
+        ctaLabel: string;
+    };
+    /** NATIVE · `Launch screen` (2010:5024) · `Loading` (2082:8004) — the app
+     *  is configured; one CTA runs the flow. */
+    launch: {
+        /** "Flow: Digital ID Flow" — the header's left text. */
+        flowLabel: string;
+        menuLabel: string;
+        ctaLabel: string;
+        /** "Environment:" — the caption under the CTA … */
+        environmentCaption: string;
+        /** … and its highlighted value ("Stage"). */
+        environmentValue: string;
+        /** Snackbar after the configuration sheet saved ("Flow saved"). */
+        savedSnackbar: string;
+    };
+    /** NATIVE · `Configuration › Demo config screen` (2118:20999) — the sheet
+     *  the menu opens: pick a flow, or go edit Client ID / Environment. */
+    configSheet: {
+        title: string;
+        subtitle: string;
+        closeLabel: string;
+        flowLabel: string;
+        /** The flow shown before any change ("Build Predefined"). */
+        flowValue: string;
+        /** The flow the `selected` state shows ("uxv2"). */
+        flowSelected: string;
+        flows: DemoScreensOption[];
+        searchPlaceholder: string;
+        clearSearchLabel: string;
+        /** The two read-only lines under the picker. */
+        clientIdLine: string;
+        environmentLine: string;
+        saveLabel: string;
+        editLinkLabel: string;
+        /** "Build: 2020" — the caption at the foot of both sheets. */
+        buildLabel: string;
+        savedSnackbar: string;
+    };
+    /** NATIVE · `Edit Client ID or Environment` (2118:21000 …) — the second
+     *  sheet, reached from the first. */
+    editSheet: {
+        title: string;
+        subtitle: string;
+        backLabel: string;
+        closeLabel: string;
+        clientIdLabel: string;
+        clientIdValue: string;
+        clientIdError: string;
+        environmentLabel: string;
+        /** The environment shown before any change ("Kubernetes Stage"). */
+        environmentValue: string;
+        /** The environment the `filled` state shows ("Demo"). */
+        environmentSelected: string;
+        environments: DemoScreensOption[];
+        ctaLabel: string;
+        buildLabel: string;
+    };
+    /** DESKTOP · `Redirect` (4272:11166) — the browser page that hands the
+     *  session to a phone: a QR, or a link by SMS, or carry on right here. */
+    redirect: {
+        title: string;
+        /** Under the title when both QR and SMS are offered. */
+        subtitle: string;
+        /** Under the title when only the QR is offered, with the desktop option … */
+        subtitleQrDesktop: string;
+        /** … and without it. */
+        subtitleQrOnly: string;
+        tabs: {
+            qr: string;
+            sms: string;
+        };
+        /** "Scan the QR code to verify on your mobile device." */
+        qrHint: string;
+        /** "Enter your phone number to receive a link to verify via SMS" */
+        smsHint: string;
+        phoneLabel: string;
+        phonePlaceholder: string;
+        /** The typed number the filled state shows. */
+        phoneValue: string;
+        /** ISO code of the country the picker opens on (`RS`). */
+        countryCode: string;
+        sendLabel: string;
+        /** "or" — between the phone leg and the desktop option. */
+        orLabel: string;
+        desktopLabel: string;
+        sent: {
+            title: string;
+            /** "To" — followed by the dial code and number. */
+            toPrefix: string;
+            /** "Resend in 30s" — the countdown state. */
+            resendIn: string;
+            /** "Resend" — once the countdown is over. */
+            resend: string;
+            changeLabel: string;
+            resentSnackbar: string;
+        };
+        tooMany: {
+            title: string;
+            subtitle: string;
+            changeLabel: string;
+        };
+    };
+    /** WEB · `demo_2` — the front door: language, the wordmark, one CTA. */
+    start: {
+        /** Small label over the current language, top left. */
+        languageLabel: string;
+        /** The current language as the front door shows it ("English (US)"). */
+        languageValue: string;
+        /** Accessible name for the menu affordance, top right. */
+        menuLabel: string;
+        ctaLabel: string;
+    };
+    /** `demo_3` … `demo_5` — the settings sheet: one dropdown, Done. */
+    settings: {
+        title: string;
+        closeLabel: string;
+        languageLabel: string;
+        languages: DemoScreensLanguage[];
+        searchPlaceholder: string;
+        clearSearchLabel: string;
+        ctaLabel: string;
+    };
+    /** `demo_6` — the wait while the session is scored. */
+    running: {
+        title: string;
+        subtitle?: string;
+    };
+    /** `demo_7` / `demo_8` — the two verdicts the production app renders. */
+    result: {
+        approved: {
+            title: string;
+            subtitle?: string;
+        };
+        rejected: {
+            title: string;
+            subtitle?: string;
+        };
+        /** The CTA under a verdict ("Restart onboarding"). */
+        restartLabel: string;
+    };
     /** `63:399` — the demo is over and the result is with a human. */
     end: {
         title: string;
         subtitle?: string;
     };
+    /** "DemoApp: End Screens" · `Processnotcompleted` — the flow broke before a
+     *  verdict; the app currently shows this title over the error's message. */
+    notCompleted: {
+        title: string;
+        subtitle?: string;
+    };
 }

package/dist/DemoScreensStrings.js

@@ -1,19 +1,19 @@
 // Demo screens — copy contract for the GENERIC family.
 //
-// Figma: `Module Generic Screens` (qGJjfL4O0JSjz1x4tOjJn8), frame `63:399`.
+// Figma, two sources:
+//   · `Demo App - Latest Design` (FA4ZXKH3meKQnFmDsBsMdk), page "Full flow map",
+//     section `Web` (2010:5731) — the flow the Demo App runs in production on
+//     the web, phone and desktop: splash → start → (settings) → running →
+//     approved / rejected. Traced 2026-09-24.
+//   · `Module Generic Screens` (qGJjfL4O0JSjz1x4tOjJn8), frame `63:399`, and the
+//     same file's "DemoApp: End Screens" thread — the two end screens that are
+//     not a verdict: the result is with a human (`end`), or the flow broke
+//     before it reached one (`notCompleted`).
 //
 // The screens that bracket a DEMO session rather than a real one — what a
-// prospect sees at the two ends of a sample flow. They are generic by
-// definition: the demo does not belong to any module, it strings several of
+// prospect sees before the first module and after the last. They are generic
+// by definition: the demo does not belong to any module, it strings several of
 // them together.
 //
-// ONLY the end screen exists so far. The owner is supplying the start screen
-// separately (Camila 2026-09-03: "that's the end screen but we need the start
-// too, I will add it some other time"), so `start` is deliberately absent from
-// this contract rather than guessed — an invented start screen would be a
-// second source of truth for a frame that already exists in someone's file.
-//
-// The family has no flow of its own. Core Lab lists it as a library of states.
-//
 // No hardcoded English anywhere in a screen: every visible string arrives here.
 export {};

package/dist/DemoScreensTermsScreen.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+export interface DemoScreensTermsScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+    /** Family copy — this screen reads the `terms` slice. */
+    strings: DemoScreensStrings;
+    /** Which document is on screen. Default `terms`. */
+    document?: 'terms' | 'privacy';
+    /** The consent box is ticked and Continue is live. */
+    accepted?: boolean;
+    screenId?: string;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Demo screens · NATIVE — `Accept Terms` (2010:4923 · 4012:8731): the logo on
+ * the left, the "Last Modified" line, the document scrolling in the middle,
+ * and the consent checkbox over the CTA. Two documents, Terms of Use then
+ * Privacy Policy, each in an unchecked and a checked state.
+ *
+ * No archetype has a left-aligned logo or a scrolling document body, so the
+ * screen composes Core's Logo, Checkbox and Button over the layout classes.
+ * The document text arrives through `strings`, as every other string does.
+ */
+export declare const DemoScreensTermsScreen: React.ForwardRefExoticComponent<DemoScreensTermsScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DemoScreensTermsScreen;

package/dist/DemoScreensTermsScreen.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaCheckbox } from '@incodetech/prizma-core-web/checkbox';
+import { PrizmaLogo } from '@incodetech/prizma-core-web/logo';
+import { PrizmaScreenShell } from './ScreenShell';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+/**
+ * Demo screens · NATIVE — `Accept Terms` (2010:4923 · 4012:8731): the logo on
+ * the left, the "Last Modified" line, the document scrolling in the middle,
+ * and the consent checkbox over the CTA. Two documents, Terms of Use then
+ * Privacy Policy, each in an unchecked and a checked state.
+ *
+ * No archetype has a left-aligned logo or a scrolling document body, so the
+ * screen composes Core's Logo, Checkbox and Button over the layout classes.
+ * The document text arrives through `strings`, as every other string does.
+ */
+export const DemoScreensTermsScreen = forwardRef(({ strings, document = 'terms', accepted = false, screenId = `demo-screens-${document}${accepted ? '-accepted' : ''}`, onAction, ...shell }, ref) => {
+    const t = strings.terms;
+    const doc = t.documents[document];
+    return (_jsxs(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, ...shell, children: [_jsx("header", { className: "demo-screens-terms__header", "aria-label": strings.navLabel, children: _jsx(PrizmaLogo, { variant: "incode" }) }), _jsxs("div", { className: "prizma-screen-layout__content", children: [_jsx("p", { className: "demo-screens-terms__meta", children: t.lastModified }), _jsx("div", { className: "demo-screens-terms__body", children: doc.body })] }), _jsxs("div", { className: "prizma-screen-layout__band prizma-screen-layout__band--bare demo-screens-band", children: [_jsx("div", { className: "demo-screens-terms__consent", children: _jsx(PrizmaCheckbox, { size: "M", checked: accepted, label: doc.consentLabel, onCheckedChange: () => onAction?.({ type: 'secondary', screenId }) }) }), _jsx("div", { className: "prizma-screen-layout__band__ctas", children: _jsx(PrizmaButton, { variant: "primary", size: "L", disabled: !accepted, onClick: () => onAction?.({ type: 'cta', screenId }), children: t.ctaLabel }) })] })] }));
+});
+DemoScreensTermsScreen.displayName = 'DemoScreensTermsScreen';
+export default DemoScreensTermsScreen;

package/dist/EkybAddressDetailsScreen.js

@@ -5,7 +5,7 @@ import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
 import { PrizmaButton } from '@incodetech/prizma-core-web/button';
 import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
-import { PrizmaFormScreen } from './FormScreen';
+import { PrizmaFormScreen, PrizmaFormRow } from './FormScreen';
 import './ScreenLayout.css';
 /**
  * eKYB — step 2 of the wizard, the registered address, built on the Form
@@ -54,10 +54,14 @@ export const EkybAddressDetailsScreen = forwardRef(({ strings, state = 'empty',
            548 tall against a middle that cannot be. No module CSS. */
         scrollFields: true, 
         /* Step 2 of 3. `showIcons={false}`: the eKYB bar is a bare 5px rail. */
-        progress: _jsx(PrizmaStepper, { steps: 3, currentState: 2, showIcons: false, "aria-label": strings.stepperLabel }), title: copy.title, subtitle: copy.subtitle, ctaLabel: copy.ctaLabel, linkContent: _jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: strings.backLabel }), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, ...shell, children: [_jsx(PrizmaTextField, { label: copy.street.label, placeholder: copy.street.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.street ?? '' }), _jsx(PrizmaTextField, { label: copy.houseNumber.label, placeholder: copy.houseNumber.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.houseNumber ?? '' }), _jsx(PrizmaTextField, { label: copy.addressLine2.label, placeholder: copy.addressLine2.placeholder, autoComplete: "off", defaultValue: values?.addressLine2 ?? '' }), _jsx(PrizmaTextField, { label: copy.city.label, placeholder: copy.city.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.city ?? '' }), _jsx(PrizmaDropdown, { label: copy.state.label, placeholder: copy.state.placeholder, required: true, requiredHint: strings.requiredHint, options: states, 
-                /* Both sections draw the placeholder unless the host supplies a
-                   value — see the docstring note on 6340:38197. */
-                defaultValue: values?.state ?? null }), _jsx(PrizmaTextField, { label: copy.postalCode.label, placeholder: copy.postalCode.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.postalCode ?? '' })] }));
+        progress: _jsx(PrizmaStepper, { steps: 3, currentState: 2, showIcons: false, "aria-label": strings.stepperLabel }), title: copy.title, subtitle: copy.subtitle, ctaLabel: copy.ctaLabel, linkContent: _jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: strings.backLabel }), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, 
+        /* Exploration ekyb-desktop: on a wide frame only State + Postal code
+           share a row (Figma 6407:43637); the four text fields above span the
+           column. On the phone nothing changes. */
+        responsive: true, ...shell, children: [_jsx(PrizmaTextField, { label: copy.street.label, placeholder: copy.street.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.street ?? '' }), _jsx(PrizmaTextField, { label: copy.houseNumber.label, placeholder: copy.houseNumber.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.houseNumber ?? '' }), _jsx(PrizmaTextField, { label: copy.addressLine2.label, placeholder: copy.addressLine2.placeholder, autoComplete: "off", defaultValue: values?.addressLine2 ?? '' }), _jsx(PrizmaTextField, { label: copy.city.label, placeholder: copy.city.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.city ?? '' }), _jsxs(PrizmaFormRow, { children: [_jsx(PrizmaDropdown, { label: copy.state.label, placeholder: copy.state.placeholder, required: true, requiredHint: strings.requiredHint, options: states, 
+                        /* Both sections draw the placeholder unless the host supplies a
+                           value — see the docstring note on 6340:38197. */
+                        defaultValue: values?.state ?? null }), _jsx(PrizmaTextField, { label: copy.postalCode.label, placeholder: copy.postalCode.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.postalCode ?? '' })] })] }));
 });
 EkybAddressDetailsScreen.displayName = 'EkybAddressDetailsScreen';
 export default EkybAddressDetailsScreen;