@incodetech/prizma-core-screens 0.1.2 → 0.2.3

package/dist/DemoScreensLayout.css

@@ -0,0 +1,542 @@
+/* Demo screens — module layout additions.
+ *
+ * Two of the five Demo App screens are not an archetype: the SPLASH (a brand
+ * stage with the wordmark on it, no nav, no tag) and the START screen (a
+ * language block and a menu affordance in the header row, the wordmark in the
+ * middle, one CTA). Everything else in the family is archetype C or F and
+ * declares nothing here. Every value below is a Core token, or a literal
+ * measured off the Figma frame and named as such — the same idiom as
+ * `ScreenNav.css`'s 44px row.
+ *
+ * Figma: `Demo App - Latest Design` (FA4ZXKH3meKQnFmDsBsMdk) · `Web › Mobile`
+ * `demo_1` (2010:5868) and `demo_2` (2010:5925); the desktop pair draws the
+ * same column centred in a 1440 browser window.
+ */
+
+/* ── Splash — `demo_1` ───────────────────────────────────────────────────────
+ * The whole stage is Surface/Brand/500 (Figma: #006AFF, the brand blue at the
+ * time of the frame; the token is what the app ships). The wordmark and the
+ * caption go white through the two opt-in hooks Core already exposes:
+ * `--prizma-logo-fill` on Logo, Text/Body/0 static on the caption.
+ * Doubled selector on purpose: `.prizma-screen-shell` paints Surface/Neutral/0
+ * at (0,1,0) and the sheets load in whatever order the bundler picks, so the
+ * stage colour has to outrank it rather than out-order it. */
+.prizma-screen-shell.demo-screens-splash {
+  background: var(--prizma-surface-brand-500);
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-screens-splash .demo-screens-wordmark {
+  --prizma-logo-fill: var(--prizma-text-body-0-static);
+}
+
+.demo-screens-splash .demo-screens-wordmark__caption {
+  color: var(--prizma-text-body-0-static);
+}
+
+/* On a device panel wider than the phone (Core Lab's `screenOnDevice`, the
+ * Demo App's desktop) the splash is the whole window, not a blue column on
+ * white — `demo_1`'s desktop twin (2010:6362) fills the 1440 frame. The panel
+ * paints itself and the column lets go of its 390 (Elena, 2026-09-24: "aquí
+ * tiene que ser todo azul"). `:has()` because the panel is the host's element
+ * and the screen can only reach it from below; `!important` because the host
+ * sizes the column inline. */
+[data-pcs-device-area]:has(> [data-pcs-device-content] > .demo-screens-splash) {
+  background: var(--prizma-surface-brand-500) !important;
+}
+
+[data-pcs-device-content]:has(> .demo-screens-splash) {
+  left: 0 !important;
+  width: 100% !important;
+}
+
+/* ── The wordmark block — splash and start ──────────────────────────────────
+ * Logo 187 × 51 on the frame, caption H4 (18 / 500) at Spacing/4 beneath it
+ * (Figma: logo box 60 tall, caption at +65). Core's Logo is authored at 88 × 24
+ * and scales with its box, so the width is the ONE literal: 187 is the frame's
+ * measure, not a token, and it is written once. */
+.demo-screens-wordmark {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prizma-spacing-4);
+}
+
+.demo-screens-wordmark .prizma-logo > svg {
+  width: 187px; /* measured — Figma `Logo / Incode` 187 × 51 on demo_1 / demo_2 */
+  height: auto;
+}
+
+.demo-screens-wordmark__caption {
+  margin: 0;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-headline-h4-font-size);
+  font-weight: var(--prizma-headline-h4-font-weight);
+  line-height: var(--prizma-headline-h4-line-height);
+  letter-spacing: var(--prizma-headline-h4-letter-spacing);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+/* ── Start — `demo_2` header row ─────────────────────────────────────────────
+ * Sits where every other screen puts its logo nav (same status-bar offset,
+ * same 44 row, same gutters), but carries the language block on the left and
+ * the menu affordance on the right instead of a centred wordmark. */
+.demo-screens-start__header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-12));
+  min-height: 44px; /* the nav row — GUIDELINES §3, same literal as ScreenNav.css */
+  padding-inline: var(--prizma-spacing-24);
+}
+
+.demo-screens-start__language {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-2);
+  font-family: var(--prizma-body-family);
+}
+
+.demo-screens-start__language-label {
+  font-size: var(--prizma-label-m-font-size);
+  font-weight: var(--prizma-label-m-font-weight);
+  line-height: var(--prizma-label-m-line-height);
+  letter-spacing: var(--prizma-label-m-letter-spacing);
+  color: var(--prizma-text-body-800-primary);
+}
+
+.demo-screens-start__language-value {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prizma-spacing-4);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  letter-spacing: var(--prizma-label-m-regular-letter-spacing);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+.demo-screens-start__language-value img {
+  height: 12px; /* the flag raster at the label's cap height — measured, demo_2 */
+  width: auto;
+}
+
+/* The menu affordance: Core's nav icon button, reused by class so the hit
+ * area, the colour and the focus ring are Navigation's own — nothing new. */
+.demo-screens-start__menu {
+  margin-inline-end: calc(-1 * var(--prizma-spacing-8));
+}
+
+/* The wordmark block fills the flexible middle, centred. */
+.demo-screens-start__middle {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Settings — `demo_3` header row ─────────────────────────────────────────
+ * Core's Navigation with the logo off and the close X on: the bar keeps the
+ * nav row's offset so the title lands where every other screen's first block
+ * lands. */
+.demo-screens-settings__nav {
+  flex-shrink: 0;
+  margin-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-12));
+  height: 44px; /* the nav row — GUIDELINES §3 */
+  padding-inline: var(--prizma-spacing-24);
+  display: flex;
+  align-items: center;
+}
+
+.demo-screens-settings__nav .prizma-nav {
+  position: static;
+  width: 100%;
+}
+
+/* Title → dropdown Spacing/32: Figma puts the field 31 under the H2 (113 → 172). */
+.demo-screens-settings__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  padding-top: var(--prizma-spacing-32);
+  flex: 1;
+  min-height: 0;
+}
+
+/* The language rows carry the flag raster at the label's cap height. */
+.demo-screens-settings__flag {
+  height: 12px; /* measured, demo_4 rows */
+  width: auto;
+  display: inline-block;
+}
+
+/* ── The tag-less CTA band — Start and Settings ──────────────────────────────
+ * `__band--bare` gives the Spacing/24 to the bottom; as a shell child the band
+ * still needs the column's gutters, which `--result` carries and `--bare` does
+ * not. Nothing else: the button is Core's, the gap is the band's. */
+.demo-screens-band {
+  padding-inline: var(--prizma-spacing-24);
+}
+
+/* ── Native flow ─────────────────────────────────────────────────────────────
+ * Figma: `Demo App - Latest Design` › `iOS` (2010:4692). Android draws the same
+ * screens; the reference is iOS (Elena, 2026-09-24). */
+
+/* Configuration — a field stack under the logo nav, archetype E's own
+ * measures: Spacing/16 between fields, the CTA in the bare band. Figma puts
+ * the first field 44 under the nav row (62+44 → 148); the content column's
+ * 24 plus this 20 reach it. */
+.demo-screens-config__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  padding-top: var(--prizma-spacing-20);
+  flex: 1;
+  min-height: 0;
+}
+
+/* Terms — the logo sits LEFT (Figma 32 / 85), the document scrolls, and the
+ * consent row + CTA ride the bare band. */
+.demo-screens-terms__header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-12));
+  min-height: 44px; /* the nav row — GUIDELINES §3 */
+  padding-inline: var(--prizma-spacing-24);
+}
+
+.demo-screens-terms__meta {
+  margin: 0;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+.demo-screens-terms__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  margin-top: var(--prizma-spacing-16);
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-body-m-regular-font-size);
+  font-weight: var(--prizma-body-m-regular-font-weight);
+  line-height: var(--prizma-body-m-regular-line-height);
+  letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+  color: var(--prizma-text-body-800-primary);
+  white-space: pre-line;
+}
+
+/* The consent row above the CTA takes the band's own Spacing/16. */
+.demo-screens-terms__consent {
+  display: flex;
+}
+
+/* Launch — the caption under the CTA: "Environment: Stage", value in brand. */
+.demo-screens-launch__env {
+  margin: 0;
+  text-align: center;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  color: var(--prizma-text-body-800-primary);
+}
+
+.demo-screens-launch__env b {
+  font-weight: inherit;
+  color: var(--prizma-text-accent-brand);
+}
+
+/* The header's left text on Launch ("Flow: Digital ID Flow"). */
+.demo-screens-start__flow {
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  color: var(--prizma-text-body-800-primary);
+}
+
+/* A snackbar over the top of a screen (Launch "Flow saved", the sheet's
+ * "settings saved"): Core's Snackbar, anchored where the frame draws it — the
+ * nav row, full gutter width. */
+.demo-screens-toast {
+  position: absolute;
+  z-index: 3;
+  left: var(--prizma-spacing-24);
+  right: var(--prizma-spacing-24);
+  top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+  display: flex;
+}
+
+.demo-screens-toast .prizma-snackbar {
+  width: 100%;
+}
+
+/* ── The two sheets ──────────────────────────────────────────────────────────
+ * Same idiom as Document Capture's method sheet (DEVIATIONS #DC-30): the
+ * screen owns the scrim, Core's `PrizmaBottomSheetContent` owns the panel. The
+ * frame draws the sheet from 74 down (grabber at 79), so the panel starts at
+ * the status bar plus Spacing/24 and fills to the bottom. */
+.demo-screens-sheet-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: var(--prizma-surface-overlay);
+}
+
+.demo-screens-sheet-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-24));
+  z-index: 2;
+  display: flex;
+}
+
+.demo-screens-sheet-panel .prizma-bottom-sheet {
+  flex: 1;
+  min-height: 0;
+}
+
+.demo-screens-sheet-panel .prizma-bottom-sheet__content,
+.demo-screens-sheet-panel .prizma-bottom-sheet__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo-screens-sheet__nav {
+  flex-shrink: 0;
+  height: 44px; /* the nav row — GUIDELINES §3 */
+  display: flex;
+  align-items: center;
+}
+
+.demo-screens-sheet__nav .prizma-nav {
+  position: static;
+  width: 100%;
+}
+
+/* Title 16 under the nav row (Figma 152 → 168); fields Spacing/32 under the
+ * title block, as archetype E. */
+.demo-screens-sheet__title {
+  padding-top: var(--prizma-spacing-16);
+}
+
+.demo-screens-sheet__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  padding-top: var(--prizma-spacing-32);
+  flex: 1;
+  min-height: 0;
+}
+
+/* The two read-only lines under the flow picker. */
+.demo-screens-sheet__line {
+  margin: 0;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  color: var(--prizma-text-body-800-primary);
+}
+
+.demo-screens-sheet__lines {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-8);
+}
+
+/* CTA band at the foot of the sheet: primary → tertiary link → build caption,
+ * at the band's flat Spacing/16, then Spacing/24 to the bottom (bare). */
+.demo-screens-sheet__band {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  padding-bottom: var(--prizma-spacing-24);
+}
+
+.demo-screens-sheet__band .prizma-button {
+  width: 100%;
+}
+
+.demo-screens-build {
+  margin: 0;
+  text-align: center;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+/* ── Redirect — the desktop page (4272:11166) ────────────────────────────────
+ * One card, 800 wide on the frame with a 752 content column (24 gutters),
+ * centred in the window on a Surface/Neutral/50 page. The shell IS the page;
+ * the card is the only thing on it. Inside, archetype F's skeleton: nav →
+ * centred title block → the leg → CTA band → tag. */
+.prizma-screen-shell.demo-screens-redirect {
+  background: var(--prizma-surface-neutral-50);
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-screens-redirect__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 800px; /* measured — the frame's card */
+  background: var(--prizma-surface-neutral-0);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-medium); /* Figma `Content`: r16 */
+}
+
+/* The card's nav row has no status bar above it: the offset collapses to the
+ * frame's 24 (logo at 212, card at 188). */
+.demo-screens-redirect__card .prizma-screen-nav {
+  margin-top: var(--prizma-spacing-24);
+}
+
+/* Doubled selector: the foundation reserves the anchored footer's space on
+ * every content column (`:has(.__band__tag)` → 88px of padding-bottom) and
+ * flexes it to fill the shell. Here nothing is anchored — the card hugs its
+ * content and the tag rides in the band — so the column keeps only its own
+ * height and the band's Spacing/24 is the whole gap to the CTA (Elena,
+ * 2026-09-24: "hay un spacing innecesario"). */
+.demo-screens-redirect .demo-screens-redirect__content {
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--prizma-spacing-32);
+  padding-top: var(--prizma-spacing-8);
+  padding-bottom: 0;
+}
+
+/* Tabs — Core has no Tabs primitive yet (DEVIATIONS #GEN-15). Two text
+ * buttons over a hairline; the active one carries the brand underline. Type is
+ * the H5 ramp the frame uses (16 / 500), colours the body tokens. */
+.demo-screens-tabs {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 676px; /* measured — the frame's `tabs` row inside the 752 column */
+  border-bottom: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+}
+
+.demo-screens-tabs__tab {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  margin: 0;
+  padding: var(--prizma-spacing-8) var(--prizma-spacing-12);
+  margin-bottom: calc(-1 * var(--prizma-border-width-regular));
+  border-bottom: var(--prizma-border-width-bold) solid transparent;
+  cursor: pointer;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-headline-h5-font-size);
+  font-weight: var(--prizma-headline-h5-font-weight);
+  line-height: var(--prizma-headline-h5-line-height);
+  letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+.demo-screens-tabs__tab--active {
+  color: var(--prizma-text-body-800-primary);
+  border-bottom-color: var(--prizma-border-brand-500);
+}
+
+.demo-screens-redirect__leg {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prizma-spacing-16);
+  width: 100%;
+}
+
+/* The phone leg lines up with the CTA band below it: one 352 column for the
+ * field, the Send button and "Continue on desktop" (Figma draws the form at
+ * 326 and the CTAs at 352; Elena, 2026-09-24: keep the longer one, but make
+ * everything match). */
+.demo-screens-redirect__leg--form {
+  max-width: 352px; /* the CTAs group on the frame — the form joins it */
+}
+
+.demo-screens-redirect__leg--form .prizma-button {
+  width: 100%;
+}
+
+.demo-screens-redirect__hint {
+  margin: 0;
+  text-align: center;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-headline-h5-font-size);
+  font-weight: var(--prizma-headline-h5-font-weight);
+  line-height: var(--prizma-headline-h5-line-height);
+  letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+/* The QR well: 200 square, a hairline, radius small (Figma 312 → 512). The
+ * image inside is the host's. */
+.demo-screens-redirect__qr {
+  width: 200px; /* measured — the frame's QR well */
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--prizma-spacing-12);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-small);
+  background: var(--prizma-surface-neutral-0);
+}
+
+.demo-screens-redirect__qr > * {
+  width: 100%;
+  height: 100%;
+}
+
+/* The CTA band inside the card: F's own band, static (the card hugs its
+ * content, nothing is anchored), at the field's 352 (Figma 544 → 896) and
+ * Spacing/24 to the card's bottom. The tag rides in the band, as on F. */
+.demo-screens-redirect__band {
+  align-self: stretch;
+  align-items: center;
+  /* The band carries the column's 24 gutters itself (it is a shell child, not
+   * inside the content column), so on the phone its 352 clips to the same 342
+   * the form gets — the button and the field share one edge (Elena,
+   * 2026-09-24: "el botón está más alargado que el resto"). */
+  padding: var(--prizma-spacing-24) var(--prizma-spacing-24) var(--prizma-spacing-24);
+}
+
+.demo-screens-redirect__band > * {
+  width: 100%;
+  max-width: 352px; /* measured — the CTAs group on the frame */
+}
+
+.demo-screens-redirect__band .prizma-screen-layout__band__tag {
+  position: static;
+  display: flex;
+  justify-content: center;
+}
+
+/* The snackbar on a desktop page: hugging, centred, 32 from the top (Figma). */
+.demo-screens-toast--desktop {
+  left: 0;
+  right: 0;
+  top: var(--prizma-spacing-32);
+  justify-content: center;
+}
+
+.demo-screens-toast--desktop .prizma-snackbar {
+  width: auto;
+}

package/dist/DemoScreensRedirectScreen.d.ts

@@ -0,0 +1,50 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaScreenShellProps } from './ScreenShell';
+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 declare const DemoScreensRedirectScreen: React.ForwardRefExoticComponent<DemoScreensRedirectScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DemoScreensRedirectScreen;

package/dist/DemoScreensRedirectScreen.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { 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 } from '@incodetech/prizma-core-web/combined';
+import { PrizmaScreenShell } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+/**
+ * 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(({ 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 = [
+        { 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 (_jsxs(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, className: ['demo-screens-redirect', className ?? ''].filter(Boolean).join(' '), ...shell, children: [stage === 'resent' ? (_jsx("div", { className: "demo-screens-toast demo-screens-toast--desktop", children: _jsx(PrizmaSnackbar, { state: "success", children: r.sent.resentSnackbar }) })) : null, _jsxs("div", { className: "demo-screens-redirect__card", children: [_jsx(PrizmaScreenNav, { logo: overrides?.logo, navLabel: strings.navLabel }), _jsxs("div", { className: "prizma-screen-layout__content demo-screens-redirect__content", children: [_jsx(PrizmaTitle, { variant: "centered", title: r.title, showSubtitle: true, subtitle: subtitle }), sms ? (_jsxs("div", { className: "demo-screens-tabs", role: "tablist", children: [_jsx("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 }), children: r.tabs.qr }), _jsx("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 }), children: r.tabs.sms })] })) : null, stage === 'qr' ? (_jsxs("div", { className: "demo-screens-redirect__leg", children: [sms ? _jsx("p", { className: "demo-screens-redirect__hint", children: r.qrHint }) : null, _jsx("div", { className: "demo-screens-redirect__qr", "aria-label": r.tabs.qr, children: qr })] })) : null, stage === 'sms' || stage === 'smsFilled' ? (_jsxs("div", { className: "demo-screens-redirect__leg demo-screens-redirect__leg--form", children: [_jsx("p", { className: "demo-screens-redirect__hint", children: r.smsHint }), _jsx(PrizmaCombined, { "aria-label": r.phoneLabel, placeholder: r.phonePlaceholder, defaultValue: stage === 'smsFilled' ? r.phoneValue : '', defaultCountry: country, showRequiredMarker: false }, stage), _jsx(PrizmaButton, { variant: "primary", size: "L", disabled: stage !== 'smsFilled', onClick: () => onAction?.({ type: 'cta', screenId }), children: r.sendLabel })] })) : null, verdict ? (_jsxs("div", { className: "demo-screens-redirect__leg demo-screens-redirect__leg--verdict", children: [stage === 'tooMany' ? (_jsx(PrizmaTitle, { variant: "centered", title: r.tooMany.title, showSubtitle: true, subtitle: r.tooMany.subtitle, icon: { type: 'status', status: 'error' } })) : (_jsx(PrizmaTitle, { variant: "centered", title: r.sent.title, showSubtitle: true, subtitle: `${r.sent.toPrefix} ${country?.dialCode ?? ''} ${r.phoneValue}`.trim(), icon: { type: 'status', status: 'success' } })), stage === 'tooMany' ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: r.tooMany.changeLabel })) : stage === 'sent' || stage === 'resent' ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", disabled: true, children: r.sent.resendIn })) : (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'cta', screenId }), children: r.sent.resend }))] })) : null] }), _jsxs("div", { className: "prizma-screen-layout__band demo-screens-redirect__band", children: [desktop && !verdict ? (_jsxs(_Fragment, { children: [_jsx(PrizmaDisclaimer, { text: r.orLabel }), _jsx("div", { className: "prizma-screen-layout__band__ctas", children: _jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: r.desktopLabel }) })] })) : null, _jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] })] })] }));
+});
+DemoScreensRedirectScreen.displayName = 'DemoScreensRedirectScreen';
+export default DemoScreensRedirectScreen;

package/dist/DemoScreensResultScreen.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { 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;
+}
+/**
+ * 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 declare const DemoScreensResultScreen: React.ForwardRefExoticComponent<DemoScreensResultScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DemoScreensResultScreen;