@incodetech/prizma-core-screens 0.1.2 → 0.2.3

package/src/DemoScreensRedirectScreen.tsx

@@ -0,0 +1,190 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaDisclaimer } from '@incodetech/prizma-core-web/disclaimer';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
+import { PrizmaCombined, type PrizmaCountry } from '@incodetech/prizma-core-web/combined';
+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';
+
+/**
+ * Where the redirect page is in its life:
+ *  - `qr`        the QR tab (or the QR-only page)
+ *  - `sms`       the SMS tab, number not typed yet
+ *  - `smsFilled` the SMS tab, number typed, Send live
+ *  - `sent`      "Link sent!", resend counting down
+ *  - `resend`    "Link sent!", resend available
+ *  - `resent`    "Link sent!" with the "resent" snackbar
+ *  - `tooMany`   "Too many attempts"
+ */
+export type DemoScreensRedirectStage = 'qr' | 'sms' | 'smsFilled' | 'sent' | 'resend' | 'resent' | 'tooMany';
+
+export interface DemoScreensRedirectScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Family copy — this screen reads the `redirect` slice. */
+  strings: DemoScreensStrings;
+  stage?: DemoScreensRedirectStage;
+  /** Offer the SMS tab. Off: the `QR Only` section (4272:11388). Default on. */
+  sms?: boolean;
+  /** Offer "or · Continue on desktop" under the leg. Default on. */
+  desktop?: boolean;
+  /**
+   * The QR image — a host slot, like every photo on a mock. The screens
+   * package draws no QR of its own (it has no encoder and no URL to encode);
+   * the hub passes a real one for its sample link.
+   */
+  qr?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Demo screens · DESKTOP — the redirect page, `Redirect` (4272:11166) in
+ * `Demo App - Latest Design`: a desktop browser opened the link, and the page
+ * offers to move the session to a phone. One card centred in the window: the
+ * logo nav, a title block, two tabs (Scan QR · Send SMS), the leg's own
+ * content, then "or" and a secondary "Continue on desktop", and the tag.
+ *
+ * Authored at the card's width — 800 on the frame, the content column 752 —
+ * so it is the one screen in the family that is not a 390 column; Core Lab
+ * lays it on the desktop panel with `adapt.column`. Archetype F's band and
+ * footer supply the CTA rhythm; the card, the tabs and the QR well are the
+ * page's own (DEVIATIONS #GEN-15 for the tabs — Core has no Tabs yet).
+ */
+export const DemoScreensRedirectScreen = forwardRef<HTMLDivElement, DemoScreensRedirectScreenProps>(
+  (
+    {
+      strings,
+      stage = 'qr',
+      sms = true,
+      desktop = true,
+      qr,
+      screenId = `demo-screens-redirect-${stage}${sms ? '' : '-qr-only'}${desktop ? '' : '-no-desktop'}`,
+      overrides,
+      onAction,
+      className,
+      ...shell
+    },
+    ref,
+  ) => {
+    const r = strings.redirect;
+    const onSms = stage !== 'qr';
+    const country: PrizmaCountry | undefined = [
+      { code: 'RS', name: 'Serbia', dialCode: '+381', flag: '' },
+    ].find(c => c.code === r.countryCode);
+    const subtitle = sms ? r.subtitle : desktop ? r.subtitleQrDesktop : r.subtitleQrOnly;
+    const verdict = stage === 'sent' || stage === 'resend' || stage === 'resent' || stage === 'tooMany';
+
+    return (
+      <PrizmaScreenShell
+        ref={ref}
+        data-screen-id={screenId}
+        className={['demo-screens-redirect', className ?? ''].filter(Boolean).join(' ')}
+        {...shell}
+      >
+        {stage === 'resent' ? (
+          <div className="demo-screens-toast demo-screens-toast--desktop">
+            <PrizmaSnackbar state="success">{r.sent.resentSnackbar}</PrizmaSnackbar>
+          </div>
+        ) : null}
+        <div className="demo-screens-redirect__card">
+          <PrizmaScreenNav logo={overrides?.logo} navLabel={strings.navLabel} />
+          <div className="prizma-screen-layout__content demo-screens-redirect__content">
+            <PrizmaTitle variant="centered" title={r.title} showSubtitle subtitle={subtitle} />
+            {sms ? (
+              <div className="demo-screens-tabs" role="tablist">
+                <button type="button" role="tab" aria-selected={!onSms} className={['demo-screens-tabs__tab', !onSms ? 'demo-screens-tabs__tab--active' : ''].join(' ')} onClick={() => onAction?.({ type: 'secondary', screenId })}>
+                  {r.tabs.qr}
+                </button>
+                <button type="button" role="tab" aria-selected={onSms} className={['demo-screens-tabs__tab', onSms ? 'demo-screens-tabs__tab--active' : ''].join(' ')} onClick={() => onAction?.({ type: 'tertiary', screenId })}>
+                  {r.tabs.sms}
+                </button>
+              </div>
+            ) : null}
+
+            {stage === 'qr' ? (
+              <div className="demo-screens-redirect__leg">
+                {sms ? <p className="demo-screens-redirect__hint">{r.qrHint}</p> : null}
+                <div className="demo-screens-redirect__qr" aria-label={r.tabs.qr}>{qr}</div>
+              </div>
+            ) : null}
+
+            {stage === 'sms' || stage === 'smsFilled' ? (
+              <div className="demo-screens-redirect__leg demo-screens-redirect__leg--form">
+                <p className="demo-screens-redirect__hint">{r.smsHint}</p>
+                {/* `defaultValue`, not `readOnly`: Core paints a read-only field
+                    on the disabled surface (owner definition 2026-07-12), and
+                    the frame shows a live, empty field — Elena caught the grey
+                    selector on 2026-09-24. */}
+                <PrizmaCombined
+                  key={stage}
+                  aria-label={r.phoneLabel}
+                  placeholder={r.phonePlaceholder}
+                  defaultValue={stage === 'smsFilled' ? r.phoneValue : ''}
+                  defaultCountry={country}
+                  showRequiredMarker={false}
+                />
+                <PrizmaButton variant="primary" size="L" disabled={stage !== 'smsFilled'} onClick={() => onAction?.({ type: 'cta', screenId })}>
+                  {r.sendLabel}
+                </PrizmaButton>
+              </div>
+            ) : null}
+
+            {verdict ? (
+              <div className="demo-screens-redirect__leg demo-screens-redirect__leg--verdict">
+                {stage === 'tooMany' ? (
+                  <PrizmaTitle variant="centered" title={r.tooMany.title} showSubtitle subtitle={r.tooMany.subtitle} icon={{ type: 'status', status: 'error' }} />
+                ) : (
+                  <PrizmaTitle
+                    variant="centered"
+                    title={r.sent.title}
+                    showSubtitle
+                    subtitle={`${r.sent.toPrefix} ${country?.dialCode ?? ''} ${r.phoneValue}`.trim()}
+                    icon={{ type: 'status', status: 'success' }}
+                  />
+                )}
+                {stage === 'tooMany' ? (
+                  <PrizmaButton variant="tertiary-link" size="L" onClick={() => onAction?.({ type: 'tertiary', screenId })}>
+                    {r.tooMany.changeLabel}
+                  </PrizmaButton>
+                ) : stage === 'sent' || stage === 'resent' ? (
+                  <PrizmaButton variant="tertiary-link" size="L" disabled>
+                    {r.sent.resendIn}
+                  </PrizmaButton>
+                ) : (
+                  <PrizmaButton variant="tertiary-link" size="L" onClick={() => onAction?.({ type: 'cta', screenId })}>
+                    {r.sent.resend}
+                  </PrizmaButton>
+                )}
+              </div>
+            ) : null}
+          </div>
+          <div className="prizma-screen-layout__band demo-screens-redirect__band">
+            {desktop && !verdict ? (
+              <>
+                <PrizmaDisclaimer text={r.orLabel} />
+                <div className="prizma-screen-layout__band__ctas">
+                  <PrizmaButton variant="secondary" size="L" onClick={() => onAction?.({ type: 'secondary', screenId })}>
+                    {r.desktopLabel}
+                  </PrizmaButton>
+                </div>
+              </>
+            ) : null}
+            <div className="prizma-screen-layout__band__tag">
+              <PrizmaTag label={strings.verifiedLabel} />
+            </div>
+          </div>
+        </div>
+      </PrizmaScreenShell>
+    );
+  },
+);
+DemoScreensRedirectScreen.displayName = 'DemoScreensRedirectScreen';
+
+export default DemoScreensRedirectScreen;

package/src/DemoScreensResultScreen.tsx

@@ -0,0 +1,115 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import './ScreenLayout.css';
+
+/**
+ * The four ways a demo session ends. Named after what the BACKEND says, not
+ * after the colour the screen shows, so a host maps its session status straight
+ * onto this prop:
+ *
+ *  - `approved`      the session passed            → green mark, no CTA
+ *  - `rejected`      it did not pass verification   → red mark, restart CTA
+ *  - `inReview`      a human still has to decide    → no mark, no CTA
+ *  - `notCompleted`  the flow broke before a verdict → red mark, restart CTA
+ *
+ * Marks and CTAs follow the Demo App dev's spec (2026-09-24, via Elena): a
+ * passed session has nowhere to go, so no Restart; a rejection and a broken
+ * flow both offer one; a pending review shows neither. The production frames
+ * differ in two places (Restart on approved; no mark on not completed) and
+ * are superseded by that spec — DEVIATIONS #GEN-14.
+ */
+export type DemoScreensResultStatus = 'approved' | 'rejected' | 'inReview' | 'notCompleted';
+
+export interface DemoScreensResultScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Family copy — this screen reads `result`, `end` and `notCompleted`. */
+  strings: DemoScreensStrings;
+  status: DemoScreensResultStatus;
+  /**
+   * Draw the restart CTA. Defaults per status (the verdicts have it, the two
+   * end screens do not); a host that wants a way out of an in-review screen,
+   * or none out of a rejection, says so here.
+   */
+  showRestart?: boolean;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+const MARK: Record<DemoScreensResultStatus, PrizmaResultScreenProps['status']> = {
+  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: Record<DemoScreensResultStatus, boolean> = {
+  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<HTMLDivElement, DemoScreensResultScreenProps>(
+  (
+    {
+      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 (
+      <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/src/DemoScreensRunningScreen.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef } from 'react';
+import { PrizmaProcessingScreen, 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 const DemoScreensRunningScreen = forwardRef<HTMLDivElement, DemoScreensRunningScreenProps>(
+  ({ strings, screenId = 'demo-screens-running', overrides, onAction, ...shell }, ref) => (
+    <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/src/DemoScreensSettingsScreen.tsx

@@ -0,0 +1,101 @@
+import React, { 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, type PrizmaDropdownOption } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaCountryFlag } from '@incodetech/prizma-core-web/combined';
+import { PrizmaScreenShell, 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 const DemoScreensSettingsScreen = forwardRef<HTMLDivElement, DemoScreensSettingsScreenProps>(
+  (
+    { strings, value, menuOpen = false, screenId = 'demo-screens-settings', onAction, ...shell },
+    ref,
+  ) => {
+    const { settings } = strings;
+    const options: PrizmaDropdownOption[] = settings.languages.map(l => ({ value: l.value, label: l.label }));
+    const flagFor = (option: PrizmaDropdownOption) => {
+      const lang = settings.languages.find(l => l.value === option.value);
+      return lang?.countryCode ? (
+        <PrizmaCountryFlag
+          country={{ code: lang.countryCode, name: lang.label, dialCode: '', flag: '' }}
+        />
+      ) : null;
+    };
+    return (
+      <PrizmaScreenShell ref={ref} data-screen-id={screenId} {...shell}>
+        <div className="demo-screens-settings__nav">
+          <PrizmaNavigation
+            showIncodeLogo={false}
+            showRightIcon
+            closeLabel={settings.closeLabel}
+            onRightIconClick={() => onAction?.({ type: 'help', screenId })}
+            aria-label={strings.navLabel}
+          />
+        </div>
+        <div className="prizma-screen-layout__content">
+          <PrizmaTitle variant="left" title={settings.title} />
+          <div className="demo-screens-settings__fields">
+            <PrizmaDropdown
+              label={settings.languageLabel}
+              options={options}
+              defaultValue={value ?? settings.languages[0]?.value ?? null}
+              showRequiredMarker={false}
+              searchable
+              searchPlaceholder={settings.searchPlaceholder}
+              clearSearchLabel={settings.clearSearchLabel}
+              renderLeading={flagFor}
+              forceOpen={menuOpen}
+            />
+          </div>
+        </div>
+        {/* Archetype F's CTA band in its `--bare` form — no tag on a settings
+            sheet, so the button sits Spacing/24 off the bottom. */}
+        <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" onClick={() => onAction?.({ type: 'cta', screenId })}>
+              {settings.ctaLabel}
+            </PrizmaButton>
+          </div>
+        </div>
+      </PrizmaScreenShell>
+    );
+  },
+);
+DemoScreensSettingsScreen.displayName = 'DemoScreensSettingsScreen';
+
+export default DemoScreensSettingsScreen;

package/src/DemoScreensSplashScreen.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+import { PrizmaLogo } from '@incodetech/prizma-core-web/logo';
+import { PrizmaScreenShell, 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 const DemoScreensSplashScreen = forwardRef<HTMLDivElement, DemoScreensSplashScreenProps>(
+  ({ strings, screenId = 'demo-screens-splash', className, ...shell }, ref) => (
+    <PrizmaScreenShell
+      ref={ref}
+      data-screen-id={screenId}
+      className={['demo-screens-splash', className ?? ''].filter(Boolean).join(' ')}
+      {...shell}
+    >
+      <div className="demo-screens-wordmark">
+        <PrizmaLogo variant="incode" />
+        <p className="demo-screens-wordmark__caption">{strings.appName}</p>
+      </div>
+    </PrizmaScreenShell>
+  ),
+);
+DemoScreensSplashScreen.displayName = 'DemoScreensSplashScreen';
+
+export default DemoScreensSplashScreen;

package/src/DemoScreensStartScreen.tsx

@@ -0,0 +1,105 @@
+import React, { 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, 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 const MenuDotsGlyph: React.FC = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <circle cx="5" cy="12" r="2" fill="currentColor" />
+    <circle cx="12" cy="12" r="2" fill="currentColor" />
+    <circle cx="19" cy="12" r="2" fill="currentColor" />
+  </svg>
+);
+
+export const DemoScreensStartScreen = forwardRef<HTMLDivElement, DemoScreensStartScreenProps>(
+  ({ strings, loading = false, screenId = 'demo-screens-start', onAction, ...shell }, ref) => {
+    const current = strings.settings.languages.find(l => l.label === strings.start.languageValue);
+    return (
+      <PrizmaScreenShell ref={ref} data-screen-id={screenId} {...shell}>
+        <header className="demo-screens-start__header" aria-label={strings.navLabel}>
+          <div className="demo-screens-start__language">
+            <span className="demo-screens-start__language-label">{strings.start.languageLabel}</span>
+            <span className="demo-screens-start__language-value">
+              {current?.countryCode ? (
+                <PrizmaCountryFlag
+                  country={{ code: current.countryCode, name: current.label, dialCode: '', flag: '' }}
+                />
+              ) : null}
+              {strings.start.languageValue}
+            </span>
+          </div>
+          <button
+            type="button"
+            className="prizma-nav__icon demo-screens-start__menu"
+            aria-label={strings.start.menuLabel}
+            onClick={() => onAction?.({ type: 'help', screenId })}
+          >
+            <MenuDotsGlyph />
+          </button>
+        </header>
+        <div className="prizma-screen-layout__content">
+          <div className="demo-screens-start__middle">
+            <div className="demo-screens-wordmark">
+              <PrizmaLogo variant="incode" />
+              <p className="demo-screens-wordmark__caption">{strings.appName}</p>
+            </div>
+          </div>
+        </div>
+        {/* Archetype F's CTA band in its `--bare` form: this screen carries no
+            verified tag, so the button sits Spacing/24 off the bottom, where
+            the other modules' tag-less CTAs sit, not up at the tag's height. */}
+        <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"
+              loading={loading}
+              onClick={() => onAction?.({ type: 'cta', screenId })}
+            >
+              {strings.start.ctaLabel}
+            </PrizmaButton>
+          </div>
+        </div>
+      </PrizmaScreenShell>
+    );
+  },
+);
+DemoScreensStartScreen.displayName = 'DemoScreensStartScreen';
+
+export default DemoScreensStartScreen;