@incodetech/prizma-core-screens 0.2.14 → 0.2.20

package/dist/RotateToPortraitScreen.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconMobile, IconRotatePhone } from '@incodetech/prizma-core-icons';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaScreenShell } from './ScreenShell';
+import './ScreenLayout.css';
+import './RotateToPortraitScreen.css';
+/**
+ * Rotate to portrait — the prompt a capture screen shows on a phone held
+ * sideways. Shared by every capture module; Face Capture is the first consumer.
+ *
+ * Capture screens ALWAYS stay portrait (Camila, 2026-11-03). While the person
+ * is on one (every `capturing-*` state, the extend-time offer, manual) and the
+ * phone is held sideways, the SDK closes the camera and shows this screen in
+ * its place; the camera reopens on its own when the phone is upright again.
+ * This is the "essential" exception of WCAG 2.1 SC 1.3.4 Orientation the
+ * accessibility auditors agreed to on 2026-10-26 (precedent: Bicycle Health
+ * accepted portrait-only capture). The sideways capture layout in
+ * `FaceCaptureLayout.css` (#F-39) stays as the longer-term full-compliance
+ * track and is never reached while this screen is shown.
+ *
+ * Anatomy: archetype C (Processing, GUIDELINES.md §6-C) under the landscape
+ * rules of `LANDSCAPE.md`: no logo nav, no verified tag, the status-bar
+ * reserve kept, the Title centred in what is left of the height, Core's own
+ * 420 max. Camera closed, so it is an ordinary screen on the app theme, like
+ * uploading (the 2026-08-18 rule): no theme pin. The screen is only ever shown
+ * in a landscape shell, but it renders the same centred stack in the portrait
+ * reference frame, which is how Latest designs shows every screen in its grid,
+ * so nothing here hides outside the landscape query.
+ *
+ * The glyph is variant A of the playground
+ * (`artefactos/playgrounds/2026-10-29__rotate-to-portrait-prompt`): Core's
+ * `mobile` bank icon turning about its centre from the way the phone is held
+ * to upright, with the arc its top edge travels drawn beside it and the
+ * arrowhead landing where the top ends up, at Title/Icon/Size (40, the status
+ * mark's box), Icon/Neutral/800, on Core's loop duration and standard easing.
+ * It rides the foundation's `__glyph` slot above the Title, the same seat the
+ * Wi-Fi mark takes on every noConnection screen (DEVIATIONS #10), because
+ * Core's `PrizmaTitle.icon` allowlist is `status | spinner | none`. Under
+ * `prefers-reduced-motion: reduce` it is Core's static `rotate-phone` icon
+ * (variant C). The glyph is decorative; the Title is a polite live region so
+ * a screen reader hears the headline when the prompt appears.
+ *
+ * No button: turning the phone is the action. DEVIATIONS #F-42.
+ */
+export const RotateToPortraitScreen = forwardRef(({ strings, topEdge = 'left', screenId = 'rotate-to-portrait', overrides, 
+// No CTA here, so nothing ever fires it; destructured so it stays off
+// the shell's DOM node, like `screenId`.
+onAction, className, ...shell }, ref) => {
+    void screenId;
+    void onAction;
+    const left = overrides?.align === 'left';
+    return (_jsx(PrizmaScreenShell, { ref: ref, className: ['prizma-rotate-to-portrait', className].filter(Boolean).join(' '), ...shell, children: _jsxs("div", { className: "prizma-screen-layout__content prizma-screen-layout__content--centered prizma-screen-layout__content--no-nav prizma-rotate-to-portrait__content", children: [_jsx("span", { className: [
+                        'prizma-screen-layout__glyph',
+                        'prizma-screen-layout__glyph--neutral',
+                        left ? 'prizma-screen-layout__glyph--left' : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' '), "aria-hidden": "true", children: _jsxs("span", { className: [
+                            'prizma-rotate-to-portrait__mark',
+                            topEdge === 'right' ? 'prizma-rotate-to-portrait__mark--top-right' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), children: [_jsxs("span", { className: "prizma-rotate-to-portrait__turn", children: [_jsxs("svg", { className: "prizma-rotate-to-portrait__arc", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { className: "prizma-rotate-to-portrait__arc-path", pathLength: 100, d: "M -2.5 12 A 14.5 14.5 0 0 1 12 -2.5" }), _jsx("path", { className: "prizma-rotate-to-portrait__arc-head", d: "M 9.7 -4.9 L 12 -2.5 L 9.7 -0.1" })] }), _jsx(IconMobile, { className: "prizma-rotate-to-portrait__phone" })] }), _jsx(IconRotatePhone, { className: "prizma-rotate-to-portrait__static" })] }) }), _jsx("div", { className: "prizma-rotate-to-portrait__status", role: "status", "aria-live": "polite", children: _jsx(PrizmaTitle, { variant: left ? 'left' : 'centered', title: strings.title, showSubtitle: Boolean(strings.subtitle), subtitle: strings.subtitle, icon: { type: 'none' } }) })] }) }));
+});
+RotateToPortraitScreen.displayName = 'RotateToPortraitScreen';
+export default RotateToPortraitScreen;

package/dist/RotateToPortraitStrings.d.ts

@@ -0,0 +1,8 @@
+export interface RotateToPortraitStrings {
+    /** H2 — "Turn your phone upright". */
+    title: string;
+    /** H5 — "Hold it vertically to continue with your verification."
+     *  Optional: a host that only wants the headline omits it and the Title
+     *  renders alone, Core's own `showSubtitle` toggle. */
+    subtitle?: string;
+}

package/dist/RotateToPortraitStrings.js

@@ -0,0 +1,20 @@
+// Rotate to portrait — copy contract.
+//
+// NOT a module. The one prompt every capture module shows while the phone is
+// held sideways (Face Capture today; ID Capture, Document Capture and Video
+// Selfie as they adopt it). Capture screens stay portrait: this screen is one
+// step before them, shown while the phone is sideways, and the camera opens
+// once the phone is upright, so there is no button and no action in the contract
+// (Camila, 2026-11-03; the auditors' WCAG 2.1 SC 1.3.4 reading of 2026-10-26,
+// "essential" exception for the capture screens).
+//
+// The copy is module-agnostic on purpose: one sentence pair serves every
+// capture module, so a host writes it once. Same rule as every other contract
+// here: all copy via props, no hardcoded English (GUIDELINES.md §9).
+//
+// ⚠️ The English below the type is PROPOSED copy from the playground
+// (artefactos/playgrounds/2026-10-29__rotate-to-portrait-prompt). Before this
+// screen ships in the SDK the two strings must come from the SDK's own
+// localization tables; nothing here is hand-translated, and no language is
+// added to this file.
+export {};

package/dist/ScreenLayout.css

@@ -829,6 +829,206 @@
   }
 }
 
+/* ── Landscape phones: the stack keeps its order, the ring changes axis ──────
+ * WCAG 2.1 SC 1.3.4 Orientation (AA) asks every screen to work held sideways,
+ * and a phone held sideways is 375 to 440 tall (the phone catalog rotated:
+ * iPhone SE 667 x 375, the 844 x 390 reference, Large Android 915 x 412,
+ * Pro Max 956 x 440). Measured against the stacks the short-panel rules fit
+ * into 626: a capture screen needs ~557, a tutorial ~700. So two things give
+ * ground that no short panel asked for: the tutorial loses its illustration,
+ * and the capture screen turns its ring and its instruction side by side
+ * (FaceCaptureLayout.css). Everything else keeps the portrait order, title
+ * over copy over button, compacted (Camila, 2026-10-21: top-down, not side by
+ * side; the tag always centred; the button closer to the bottom).
+ *
+ * THE LINE is the shell's own shape, never the browser viewport (a 390 shell
+ * in a 1400 window is portrait): `orientation: landscape` with a 500 height
+ * cap. The cap keeps the rules off tablets, desktop windows and the iPhone
+ * Duo open full screen (626), which already have their own answers (#21,
+ * #VS-32, #F-37) and are wider than they are tall. 500 has slack above the
+ * 440 ceiling and under the 626 floor. Every rule below lives inside the one
+ * query, so outside it not one declaration exists and the portrait render is
+ * byte-identical. Exploration `face-capture-landscape` (Camila, 2026-10-20);
+ * the developer-facing list is LANDSCAPE.md. DEVIATIONS #F-39.
+ *
+ * What never changes, in either orientation: the H2, the CTA, the live
+ * instruction and where it lives (#12/#14), the status and verdict copy, and
+ * the tag's seat: bottom centre, Spacing/16 up, on every screen that has one. */
+@container pcs-screen ((orientation: landscape) and (max-height: 500px)) {
+  /* The status-bar reserve STAYS (`--pcs-status-bar`, 47 by default, the
+   * host's own value otherwise). Round 2 had zeroed it on the argument that an
+   * iPhone draws no status bar in landscape; Camila's QA of the canvas
+   * (2026-10-21) found the result screens' status mark sitting in the system
+   * bar's row (the Lab's pills at 25 to 35, Elena's landscape reference keeps
+   * a 54 bar), which no device would allow. The reserve is the one line every
+   * screen already respects in portrait, so it is kept rather than replaced
+   * by a landscape-only offset. The capture screens are unaffected: their nav
+   * is hidden below and the ring is placed on the panel's height. */
+
+  /* Capture screens drop the nav row entirely. It is already reserved and
+   * empty on a feed-open capture screen (the 2026-08-18 header rule), and a
+   * 335 ring plus the 56 row does not fit in 375. A client logo opt-in goes
+   * with it in landscape: there is no row to hold it. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__content--capture) > .prizma-screen-nav {
+    display: none;
+  }
+
+  /* …and the capture column stops reserving the footer under the ring: with
+   * the reserve the ring had 328 to sit in. (0,3,0), the reserve's own
+   * specificity, later in the file. FaceCaptureLayout.css says what happens
+   * to the tag there. */
+  .prizma-screen-shell .prizma-screen-layout__content.prizma-screen-layout__content--capture {
+    padding-bottom: 0;
+  }
+
+  /* ARCHETYPE A (tutorial). The illustration goes: it is the one element that
+   * carries no task information (step 1 of the order), and in landscape it is
+   * also the only one that cannot fit above a title block and a CTA at any
+   * size that still reads (Camila, 2026-10-21: "remove it to have more space,
+   * it's not adding essential information"). Its slot stays as the flexible
+   * middle, so the band keeps sitting at the bottom of the column, above the
+   * tag, where the portrait has it; the title block stays under the logo nav.
+   * Measured on the SE (375): nav 56, title block 77, disclaimer and CTA 105,
+   * the tag's reserve 62, Spacing/16 twice: 316. The disclaimer fit, and
+   * stayed until 2026-11-03, when Camila took it off the landscape tutorial
+   * as well (below): with the art gone the line between the subtitle and the
+   * CTA read as a second subtitle, and the task is in the title block.
+   * Addressed by the archetype's own `--tutorial` class (TutorialScreen.tsx),
+   * not by `:has()` on the illustration slot: Core Lab's converter drops
+   * hidden subtrees before the scene is laid out, so a rule that needed the
+   * hidden art to match would vanish on the canvas. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial {
+    /* The logo nav is gone in landscape (below), so the column reserves the
+     * status bar itself, Spacing/8 under it like the result screens. */
+    padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+    /* The column centres its children (the band below is the one that is
+     * narrower than the column). `align-items` on the parent rather than
+     * `align-self` or `margin-inline: auto` on the band: Core Lab's converter
+     * reads a flex container's alignment and ignores per-child margins and
+     * `align-self`, so the first take drew the 420 band at the left edge on
+     * the canvas while the browser centred it (Camila, 2026-10-21). */
+    align-items: center;
+  }
+
+  /* Every other child keeps the full column: `align-items: center` would
+   * otherwise shrink the title block to its content. */
+  .prizma-screen-layout__content--tutorial > :not(.prizma-screen-layout__band) {
+    width: 100%;
+  }
+
+  .prizma-screen-layout__content--tutorial > .prizma-screen-layout__flex > [class*='prizma-illustration-'] {
+    display: none;
+  }
+
+  /* The disclaimer goes with the art (Camila, 2026-11-03): title, subtitle,
+   * CTA. Portrait keeps it; outside the query this rule does not exist. */
+  .prizma-screen-layout__content--tutorial > .prizma-screen-layout__band > .prizma-disclaimer {
+    display: none;
+  }
+
+  /* The slot that held the art keeps only its flexible height, not its
+   * Spacing/16 padding above and below: with the illustration gone those 32
+   * are empty, and on the SE they were what pushed the CTA onto the tag once
+   * the status bar came back (QA 2026-10-21). SE budget: nav 91, Spacing/16,
+   * title block 76, band 109, the tag's reserve 62: 354 of 375. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial > .prizma-screen-layout__flex {
+    padding-block: 0;
+  }
+
+  /* The actions take Elena's landscape column: 420, centred (Core Lab
+   * recipes, landscape, read off the Document Capture reference 6701:8042).
+   * A CTA stretched across 796 reads as a bar, not a button; 420 is the
+   * Title's own max width, so the axis is one. The band's tag is anchored to
+   * the shell and already centres. */
+  /* (0,3,0) on purpose: Core Lab's device CSS caps `.prizma-screen-layout__band`
+   * at the panel's column with a (0,2,0) rule declared later, and at 844 that
+   * read as "no cap" on the canvas while the browser kept 420. */
+  .prizma-screen-shell .prizma-screen-layout__content--tutorial > .prizma-screen-layout__band {
+    width: 100%;
+    max-width: 420px; /* hardcoded — the actions column of Elena's landscape reference, equal to Core's Title max width */
+    gap: var(--prizma-spacing-8); /* Elena's first concession, the same rhythm as the result band below */
+  }
+
+  /* ARCHETYPE F (result with a CTA band). The logo nav goes instead of the
+   * status mark: the mark is the one thing that tells a warning from a
+   * failure, the logo is the client's presence and comes back on the next
+   * screen (Camila, 2026-10-21: remove the logo or the icon, keep the text,
+   * bring the button down). The title block centres in what is left above the
+   * band; the band keeps its portrait seat at the bottom, above the tag, with
+   * #F-37's compact rhythm already in force under 720. Measured on the SE:
+   * title block with its mark 153, band 101, the tag's reserve 62, Spacing/16:
+   * 332 in 375. The genericErrors family has no nav to begin with. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-nav {
+    display: none;
+  }
+
+  /* The title block sits at a FIXED offset under the status bar and the band
+   * at the bottom: Spacing/8 under the reserve clears the bar on both frames
+   * (mark at 55 with 47; Elena's bar ends at 54). Not `safe center`: the
+   * portrait column centres the title block in the free height, which on the
+   * SE left the mark 2.9 px inside the bar and 12.1 when the subtitle wrapped,
+   * and Core Lab's converter does not centre a column's children at all, so
+   * the canvas and the browser disagreed about where the mark was. A fixed
+   * seat is the same on both. SE budget, worst case (two-line subtitle):
+   * 55 + 132 + 16 + 109 + 62 = 374 of 375, with the band's gap conceded
+   * below. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__content {
+    padding-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+    justify-content: flex-start;
+  }
+
+  /* Same 420 column for the result band, centred. The band stays full width
+   * and centres its own rows (disclaimer, CTAs, extra content), each capped
+   * at 420: `align-items` on a flex column is what Core Lab's converter reads,
+   * while `margin-inline: auto` on the band, or `align-items` on the shell
+   * (whose anchored footer and tag it lays out by hand), centred in the
+   * browser and pinned the band left on the canvas (Camila, 2026-10-21).
+   * (0,3,0) for the same reason as the tutorial band above. */
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result {
+    width: 100%;
+    align-items: center;
+    box-sizing: border-box;
+    /* Elena's first concession (Core Lab recipes, landscape): gaps 16 to 8
+     * before anything else goes. It is what keeps the two-line result stack
+     * inside the 375 SE under the restored status bar. */
+    gap: var(--prizma-spacing-8);
+  }
+
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result > * {
+    width: 100%;
+    max-width: 420px; /* hardcoded — Elena's actions column, equal to Core's Title max width */
+  }
+
+  /* NO LOGO, NO TAG on any landscape screen (Camila, 2026-10-23: "they take
+   * up space that could be used by the content"). The nav row (the client
+   * logo's seat) and the verified tag go on every family; the capture screens
+   * had already dropped both. The columns that reserved the tag's 62 at the
+   * bottom keep Spacing/16 instead, and the result band sits Spacing/16 off
+   * the bottom; the capture column keeps its 0 so the ring's centre does not
+   * move. The status bar stays reserved by the columns themselves. */
+  .prizma-screen-shell > .prizma-screen-nav,
+  .prizma-screen-shell .prizma-screen-layout__footer,
+  .prizma-screen-shell .prizma-screen-layout__band__tag {
+    display: none;
+  }
+
+  .prizma-screen-shell:has(.prizma-screen-layout__band__tag) .prizma-screen-layout__content:not(.prizma-screen-layout__content--capture) {
+    padding-bottom: var(--prizma-spacing-16);
+  }
+
+  .prizma-screen-shell:has(> .prizma-screen-layout__band--result) > .prizma-screen-layout__band--result {
+    margin-bottom: var(--prizma-spacing-16);
+  }
+
+  /* The band's disclaimer ("2 attempts remaining", "Stay still…") stays on
+   * one line: in the 420 column every disclaimer the module ships fits, and
+   * Core Lab's converter wrapped it to its first word otherwise (Camila,
+   * 2026-10-23: "remaining attempts should always be in one line"). */
+  .prizma-screen-layout__band .prizma-disclaimer__text {
+    white-space: nowrap;
+  }
+}
+
 /* ── Anchored-chrome layering ─────────────────────────────────────────────────
  * The camera HUD bands lift themselves to `z-index: 1` so their copy paints
  * above `PrizmaIdCapture`'s scrim (an absolutely positioned box-shadow that

package/dist/ScreenShell.css

@@ -25,6 +25,19 @@
    * layout paint` does both without forcing a composited layer the way
    * `transform` would. */
   contain: layout paint;
+  /* And it is the WINDOW Core's presenters size their overlays to. The Modal
+   * and Bottom sheet presenters draw their scrim `position: fixed` with
+   * `height: var(--prizma-overlay-height, 100dvh)` and pin the panel to the
+   * scrim's bottom, so a host whose fixed children land inside a box smaller
+   * than the viewport has to say so. Unsaid, the scrim inside this shell was
+   * the browser's height and the sheet sat at the browser's bottom edge, below
+   * the frame: on the closed iPhone Duo (678) Qualified Signature's certificate
+   * popups showed only the sheet's title peeking in at the bottom, on the open
+   * panel (626) nothing but scrim (measured 2026-10-29). 100% of the shell is
+   * the window, whatever the panel; on a real device the shell IS the viewport
+   * and the value reads the same. DEVIATIONS #F-41. */
+  --prizma-overlay-top: 0px;
+  --prizma-overlay-height: 100%;
 }
 
 /* Camera viewfinder screens — always a dark stage regardless of theme.

package/dist/TutorialScreen.js

@@ -19,6 +19,6 @@ import './ScreenLayout.css';
  * `PrizmaButtonGroup` would put 12 between the slots but cannot forward
  * `loadingLabel`, which the loading tutorials need — DEVIATIONS #F-32.
  */
-export const PrizmaTutorialScreen = forwardRef(({ progress, title, subtitle, disclaimer, ctaLabel, ctaLoading = false, ctaLoadingLabel, secondaryCtaLabel, linkLabel, verifiedLabel, illustration, overlay, navLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel }), progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsxs("div", { className: "prizma-screen-layout__content", children: [_jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle }), _jsx("div", { className: "prizma-screen-layout__flex", children: illustration }), _jsxs("div", { className: "prizma-screen-layout__band", children: [disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, secondaryCtaLabel ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: secondaryCtaLabel })) : null, ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", loading: ctaLoading, loadingLabel: ctaLoadingLabel, onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] }), overlay] })));
+export const PrizmaTutorialScreen = forwardRef(({ progress, title, subtitle, disclaimer, ctaLabel, ctaLoading = false, ctaLoadingLabel, secondaryCtaLabel, linkLabel, verifiedLabel, illustration, overlay, navLabel, screenId, showHeader = true, showFooter = true, overrides, onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, ...shell, children: [_jsx(PrizmaScreenNav, { reserved: !showHeader, logo: overrides?.logo, navLabel: navLabel }), progress ? (_jsx("div", { className: "prizma-screen-layout__progress", children: progress })) : null, _jsxs("div", { className: "prizma-screen-layout__content prizma-screen-layout__content--tutorial", children: [_jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle }), _jsx("div", { className: "prizma-screen-layout__flex", children: illustration }), _jsxs("div", { className: "prizma-screen-layout__band", children: [disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, secondaryCtaLabel ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: secondaryCtaLabel })) : null, ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", loading: ctaLoading, loadingLabel: ctaLoadingLabel, onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: linkLabel })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__band__tag", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })] }), overlay] })));
 PrizmaTutorialScreen.displayName = 'PrizmaTutorialScreen';
 export default PrizmaTutorialScreen;

package/dist/index.d.ts

@@ -166,6 +166,8 @@ export { type LoadersStrings, type LoadersVariant, type LoadersCopy } from './Lo
 export { LoaderScreen, type LoaderScreenProps } from './LoaderScreen';
 export { type ErrorScreensStrings, type ErrorScreensVariant, type ErrorScreensCopy, } from './ErrorScreensStrings';
 export { ErrorScreensScreen, type ErrorScreensScreenProps } from './ErrorScreensScreen';
+export { type RotateToPortraitStrings } from './RotateToPortraitStrings';
+export { RotateToPortraitScreen, type RotateToPortraitScreenProps, type RotateToPortraitTopEdge, } from './RotateToPortraitScreen';
 export { type DemoScreensStrings, type DemoScreensLanguage, type DemoScreensOption, } from './DemoScreensStrings';
 export { DemoScreensConfigScreen, type DemoScreensConfigScreenProps, type DemoScreensConfigState, } from './DemoScreensConfigScreen';
 export { DemoScreensTermsScreen, type DemoScreensTermsScreenProps, } from './DemoScreensTermsScreen';

package/dist/index.js

@@ -145,6 +145,7 @@ export { PermissionsAllowScreen, } from './PermissionsAllowScreen';
 export { PermissionsBrowserStepsScreen, } from './PermissionsBrowserStepsScreen';
 export { LoaderScreen } from './LoaderScreen';
 export { ErrorScreensScreen } from './ErrorScreensScreen';
+export { RotateToPortraitScreen, } from './RotateToPortraitScreen';
 export { DemoScreensConfigScreen, } from './DemoScreensConfigScreen';
 export { DemoScreensTermsScreen, } from './DemoScreensTermsScreen';
 export { DemoScreensLaunchScreen, } from './DemoScreensLaunchScreen';

package/dist/styles.css

@@ -31,6 +31,7 @@
 @import './PhoneInputLayout.css';
 @import './QualifiedSignatureLayout.css';
 @import './ReusabilityLayout.css';
+@import './RotateToPortraitScreen.css';
 @import './ScreenLayout.css';
 @import './ScreenNav.css';
 @import './ScreenShell.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/prizma-core-screens",
-  "version": "0.2.14",
+  "version": "0.2.20",
   "description": "Prizma Design System — SDK module screens: composed, responsive, brand-themeable React screens built from @incodetech/prizma-core-web.",
   "license": "UNLICENSED",
   "type": "module",
@@ -665,6 +665,11 @@
       "types": "./dist/ReviewScreen.d.ts",
       "import": "./dist/ReviewScreen.js"
     },
+    "./rotate-to-portrait-screen": {
+      "source": "./src/RotateToPortraitScreen.tsx",
+      "types": "./dist/RotateToPortraitScreen.d.ts",
+      "import": "./dist/RotateToPortraitScreen.js"
+    },
     "./screen-nav": {
       "source": "./src/ScreenNav.tsx",
       "types": "./dist/ScreenNav.d.ts",
@@ -795,6 +800,7 @@
     "./phone-input-layout.css": "./dist/PhoneInputLayout.css",
     "./qualified-signature-layout.css": "./dist/QualifiedSignatureLayout.css",
     "./reusability-layout.css": "./dist/ReusabilityLayout.css",
+    "./rotate-to-portrait-screen.css": "./dist/RotateToPortraitScreen.css",
     "./screen-layout.css": "./dist/ScreenLayout.css",
     "./screen-nav.css": "./dist/ScreenNav.css",
     "./screen-shell.css": "./dist/ScreenShell.css",
@@ -841,8 +847,8 @@
   },
   "dependencies": {
     "@incodetech/prizma-core-icons": "^0.4.0",
-    "@incodetech/prizma-core-tokens": "^0.16.0",
-    "@incodetech/prizma-core-web": "^0.16.0"
+    "@incodetech/prizma-core-tokens": "^0.18.0",
+    "@incodetech/prizma-core-web": "^0.18.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

package/src/DigitalIdProvidersDocumentSelectionScreen.tsx

@@ -33,9 +33,9 @@ export interface DigitalIdProvidersDocumentSelectionScreenProps
  * Figma: `Document Chooser` (27753:8099) and the full list (27703:4895).
  *
  * Two of Core's card lists, each under a section label, after a "Viewing
- * options for" country line with Core's flag. Every row is Core's; the
- * providers carry Core's generic `digital-id-web` card icon until their logos
- * arrive from the backend catalog (DEVIATIONS #DIP-1), and the Identity Card
+ * options for" country line with Core's flag. Every row is Core's; a
+ * provider leads with its logo from the backend catalog, or Core's generic
+ * `digital-id-web` card icon when it has none (DEVIATIONS #DIP-1), and the Identity Card
  * row has no second line, which Core's row cannot draw (#DIP-3).
  */
 export const DigitalIdProvidersDocumentSelectionScreen = forwardRef<
@@ -97,6 +97,7 @@ export const DigitalIdProvidersDocumentSelectionScreen = forwardRef<
             <PrizmaCardListVerificationOptions
               items={providers.map(provider => ({
                 icon: 'digital-id-web' as const,
+                logo: provider.logo,
                 title: provider.label,
                 onClick: () => choose({ kind: 'provider', providerId: provider.id }),
               }))}

package/src/DigitalIdProvidersLayout.css

@@ -45,15 +45,3 @@
   line-height: var(--prizma-body-m-regular-line-height);
   letter-spacing: var(--prizma-body-m-regular-letter-spacing);
 }
-
-/* Redirecting — the spinner and its copy sit at the middle of the screen.
- * With the header hidden, archetype C still reserves the nav row above the
- * content and centres the column in what is left, so the block lands ~63px
- * low. Mirroring that reserve below — status bar, the nav's gap and height,
- * the column's own top padding (ScreenNav.css, ScreenLayout.css) — balances
- * it on the shell's midline. */
-.digital-id-providers-redirect .prizma-screen-layout__content--centered {
-  padding-bottom: calc(
-    var(--pcs-status-bar, 47px) + var(--prizma-spacing-12) + 44px + var(--prizma-spacing-24)
-  );
-}

package/src/DigitalIdProvidersRedirectScreen.tsx

@@ -3,7 +3,6 @@ import { PrizmaProcessingScreen, type PrizmaProcessingScreenProps } from './Proc
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type { DigitalIdProvidersStrings } from './DigitalIdProvidersStrings';
 import './ScreenLayout.css';
-import './DigitalIdProvidersLayout.css';
 
 export interface DigitalIdProvidersRedirectScreenProps
   extends Omit<
@@ -23,8 +22,8 @@ export interface DigitalIdProvidersRedirectScreenProps
  * archetype (GUIDELINES.md §6-C). Figma: the `1-18-1-id-hold-on` instance in
  * the web full flow (27707:9281), with the module's own copy. The Web SDK's
  * `digitalIdRedirect` phases `loading` and `redirecting` both look like this.
- * The block is centred on the whole screen, not below the hidden nav's
- * reserved row (DigitalIdProvidersLayout.css).
+ * Built like Core's other processing screens: the archetype as-is, with the
+ * logo nav and the footer tag (DEVIATIONS #DIP-9).
  */
 export const DigitalIdProvidersRedirectScreen = forwardRef<
   HTMLDivElement,
@@ -34,11 +33,8 @@ export const DigitalIdProvidersRedirectScreen = forwardRef<
     {
       strings,
       screenId = 'digital-id-providers-redirecting',
-      showHeader = false,
-      showFooter = false,
       overrides,
       onAction,
-      className,
       ...shell
     },
     ref,
@@ -50,12 +46,9 @@ export const DigitalIdProvidersRedirectScreen = forwardRef<
       subtitle={strings.redirecting.subtitle}
       verifiedLabel={strings.verifiedLabel}
       navLabel={strings.navLabel}
-      showHeader={showHeader}
-      showFooter={showFooter}
       screenId={screenId}
       overrides={overrides}
       onAction={onAction}
-      className={['digital-id-providers-redirect', className].filter(Boolean).join(' ')}
       {...shell}
     />
   ),

package/src/DigitalIdProvidersStrings.ts

@@ -26,6 +26,10 @@ export interface DigitalIdProvidersOption {
   id: string;
   /** "iDIN", "itsme", "CA DMV Wallet"… */
   label: string;
+  /** The provider's logo tile (an image URL), from the backend catalog.
+   *  Absent → Core's generic `digital-id-web` card icon. Samples ship under
+   *  `samples/digital-id-providers/`. */
+  logo?: string;
 }
 
 /** What the person picked: a physical document, or a provider by its id. */