@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/dist/QualifiedSignatureDocumentScreen.js

@@ -19,16 +19,21 @@ import './QualifiedSignatureLayout.css';
  *
  * Archetype G is the fit: its `__list` middle is "content filling the space
  * between the title block and the CTA band", which is exactly what a document
- * page is, and both sections carry no CTA at all so the band never renders. The
+ * page is, and the band carries only the "Back" secondary (delta 1). The
  * body is allowed to scroll inside that middle — one module rule RELEASING an
  * overflow constraint, declaring no spacing or size, the same idiom as CURP's
  * taller-than-844 form (DEVIATIONS #CURP-1).
  *
- * THREE deltas from the frames, all reported rather than worked around:
- * 1. Both sections draw a back chevron at the nav's left (and `terms` replaces
- *    the logo row with a chevron + heading bar). GUIDELINES §3 stands: SDK
- *    screens carry no dismiss or back affordance — the standing ruling of
- *    DEVIATIONS #PI-9, which is not re-litigated per module.
+ * THREE deltas from the frames:
+ * 1. Both sections draw a back chevron at the nav's left. These are viewers
+ *    the user opened from the accept screen, so they need a way back (owner
+ *    call 2026-09-29). It ships as a full-width SECONDARY "Back" button in the
+ *    CTA band instead, emitting `secondary` (owner call 2026-10-08): the person
+ *    reads and returns to sign, and a real button at the thumb is easier to
+ *    find than a chevron. "Back" over "Done" because nothing is finished here;
+ *    the signature still waits on the accept screen. The nav stays logo-only.
+ *    `terms` replacing the logo row with a chevron + heading bar is still not
+ *    followed — the title stays the archetype's H2 below the nav.
  * 2. `viewdoc` draws NO heading. GUIDELINES §4 is explicit that every screen has
  *    exactly one H2, and archetype G has no title-less path, so the screen
  *    carries one and the Figma frame is the side to change. (An archetype
@@ -37,20 +42,20 @@ import './QualifiedSignatureLayout.css';
  *    for attribution chrome (#PI-8, #F-30, #F-34), so both variants keep the
  *    header and the footer and nothing shifts between states.
  *
- * `terms` is LEFT-aligned, as Figma draws it: a centred heading over a
- * left-aligned wall of legal text reads as a mistake. The alignment rides the
- * sanctioned `overrides.align` path (types.ts) — nothing is re-styled here — and
- * an explicit host override still wins. The #GEO-2 precedent.
+ * Both variants frame the page in the box Electronic Signature's review screen
+ * uses, so the title is CENTRED on both, like that screen (owner call
+ * 2026-09-29, "take reference from other screens"). Figma's `QSign.T&C` draws
+ * the title left over an unframed wall of text; once the text sits in its own
+ * left-aligned frame the centred title no longer reads as a mistake. An
+ * explicit `overrides.align` from the host still wins.
  */
 export const QualifiedSignatureDocumentScreen = forwardRef(({ strings, variant = 'document', body, screenId = `qualified-signature-document-${variant}`, overrides, onAction, ...shell }, ref) => {
     const copy = variant === 'terms' ? strings.document.terms : strings.document.document;
-    // The legal wall is left-aligned in Figma; the contract page keeps the
-    // archetype's centred default. An explicit `overrides.align` still wins.
-    const alignedOverrides = {
-        ...overrides,
-        align: overrides?.align ?? (variant === 'terms' ? 'left' : 'centered'),
-    };
-    return (_jsx(PrizmaListScreen, { ref: ref, title: copy.title, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: alignedOverrides, onAction: onAction, ...shell, children: _jsx("div", { className: "qualified-signature-document", children: body }) }));
+    return (_jsx(PrizmaListScreen, { ref: ref, title: copy.title, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, secondaryCtaLabel: strings.document.backLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx("div", { className: [
+                'qualified-signature-document',
+                'qualified-signature-document--framed',
+                `qualified-signature-document--${variant}`,
+            ].join(' '), role: "region", "aria-label": copy.title, tabIndex: 0, children: body }) }));
 });
 QualifiedSignatureDocumentScreen.displayName = 'QualifiedSignatureDocumentScreen';
 export default QualifiedSignatureDocumentScreen;

package/dist/QualifiedSignatureLayout.css

@@ -57,6 +57,26 @@
   display: flex;
   flex-direction: column;
   gap: var(--prizma-spacing-4);
+  /* The clauses sit at the BOTTOM of the column, on the primary button, not
+   * under the document row (Elena, 2026-09-30). The fields are a flex column,
+   * so the auto margin takes the free space; when the clauses outgrow the frame
+   * (the five-clause reading) there is none and the stack scrolls as before. */
+  margin-top: auto;
+}
+
+/* The required legend leading the group. Core ships no caption block outside a
+ * field, so the line binds the clause copy's own Size-S tokens in the secondary
+ * ink — no new size, no new colour. Spacing/8 more below it than the clauses
+ * keep between themselves, so it reads as the group's header. */
+.qualified-signature-terms__legend {
+  margin: 0 0 var(--prizma-spacing-8);
+  font-family: var(--prizma-checkbox-radio-family);
+  font-weight: var(--prizma-checkbox-radio-s-font-weight);
+  font-size: var(--prizma-checkbox-radio-s-font-size);
+  line-height: var(--prizma-checkbox-radio-s-line-height);
+  letter-spacing: var(--prizma-checkbox-radio-s-letter-spacing);
+  color: var(--prizma-text-body-500-secondary);
+  text-align: left;
 }
 
 /* ── (c) Uploaded-file preview card ──────────────────────────────────────────
@@ -181,6 +201,62 @@
   overscroll-behavior: contain;
 }
 
+/* The document FRAME — the two full-surface document screens draw the page
+ * inside the same box Electronic Signature's review screen uses
+ * (`.electronic-signature-document`): `Border/Neutral/100` hairline,
+ * `Border/Radius/small`, `Surface/Neutral/0`, clipped so the page scrolls INSIDE
+ * it. Without it the contract image floated loose on the screen and the legal
+ * text ran edge to edge as one grey wall (owner-reported 2026-09-29: "take
+ * reference from other screens"). A modifier, not the base class, because the
+ * gated-form exploration reuses `.qualified-signature-document` inside its own
+ * popup, which already carries a frame.
+ *
+ * Spacing/16 bottom margin: the gap Electronic Signature's frame keeps above the
+ * CTA band, here kept above the anchored tag so the frame never touches it.
+ */
+.qualified-signature-document--framed {
+  box-sizing: border-box;
+  background-color: var(--prizma-surface-neutral-0);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-small);
+  margin-bottom: var(--prizma-spacing-16);
+}
+
+/* `terms` — a TEXT agreement needs a gutter inside the frame (Spacing/16) and
+ * the paragraph rhythm Electronic Signature uses (Spacing/12 between blocks). */
+.qualified-signature-document--terms {
+  padding: var(--prizma-spacing-16);
+  text-align: start;
+}
+
+.qualified-signature-document--terms > * {
+  margin: 0;
+}
+
+.qualified-signature-document.qualified-signature-document--terms > * + * {
+  /* Doubled class: `__prose` resets `margin: 0` later in this file at the
+     same specificity, which would otherwise swallow the rhythm. */
+  margin-top: var(--prizma-spacing-12);
+}
+
+/* Section headings inside the form — Headline/H5 on Text/Body/800, the same
+ * pair as `.electronic-signature-document h4`. */
+.qualified-signature-document--terms h4 {
+  font-family: var(--prizma-headline-family);
+  font-weight: var(--prizma-headline-h5-font-weight);
+  font-size: var(--prizma-headline-h5-font-size);
+  line-height: var(--prizma-headline-h5-line-height);
+  letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  color: var(--prizma-text-body-800-primary);
+}
+
+/* Inside the frame the prose drops to Text/Body/500, the secondary ink every
+ * block of Core prose uses (`CardList.css`, `Card.css`) — the heading carries
+ * the hierarchy, as in Electronic Signature. */
+.qualified-signature-document--terms .qualified-signature-document__prose {
+  color: var(--prizma-text-body-500-secondary);
+}
+
 /* The contract page is host-supplied media (an <img> / <canvas> of the rendered
  * PDF, GUIDELINES §10's `cameraSurface` idiom) — it fills the column width and
  * keeps its own aspect. */

package/dist/QualifiedSignatureResultScreen.d.ts

@@ -3,11 +3,16 @@ import { type PrizmaResultScreenProps } from './ResultScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type { QualifiedSignatureResultVariant, QualifiedSignatureStrings } from './QualifiedSignatureStrings';
 import './ScreenLayout.css';
-export interface QualifiedSignatureResultScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'bandContent' | 'disclaimer' | 'ctaLabel' | 'secondaryCtaLabel' | 'verifiedLabel' | 'navLabel'> {
+export interface QualifiedSignatureResultScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'bandContent' | 'disclaimer' | 'ctaLabel' | 'secondaryCtaLabel' | 'progress' | 'verifiedLabel' | 'navLabel'> {
     /** Module copy — this screen reads the `result` slice its `variant` names. */
     strings: QualifiedSignatureStrings;
     /** Which verdict section to render. Default `signed`. */
     variant?: QualifiedSignatureResultVariant;
+    /** `signed` · `signedPartner` only — draw the "document downloaded" Snackbar,
+     *  the state after the person pressed the download control. HOST state, like
+     *  Error screens' `copied`: the host sets it on the `secondary` action and
+     *  clears it when its own timer runs out. Default `false`. */
+    downloaded?: boolean;
     screenId?: string;
     overrides?: PrizmaScreenOverrides;
     onAction?: PrizmaScreenActionHandler;
@@ -20,8 +25,10 @@ export interface QualifiedSignatureResultScreenProps extends Omit<PrizmaResultSc
  * nav → centred status mark + title block → CTA band → anchored tag — and differ
  * in status, copy and which actions exist:
  * - `signed`        — `QSign.success` (10196:67485): the positive mark over a
- *   `Button group` 124 tall = the "Continue" primary plus the "Download PDF"
- *   underlined link.
+ *   STACKED pair — "Continue" primary above a "Download PDF" OUTLINED
+ *   secondary. Figma draws the download as an underlined link; it ships as the
+ *   partner's secondary Button instead (owner call 2026-10-08, "make the
+ *   generic one look like Namirial"), so both success endings read alike.
  * - `signedPlain`   — `QSign.success` (10196:67494): the SAME mark and line
  *   with no actions at all, so the band never renders and the screen reads as
  *   the pure §6-C verdict.
@@ -50,16 +57,12 @@ export interface QualifiedSignatureResultScreenProps extends Omit<PrizmaResultSc
  * The owner rule settles the split in favour of keeping it (#PI-8, #F-30) so
  * nothing shifts between states.
  *
- * ONE reported delta: on `signed`, Figma puts "Download PDF" BELOW the primary,
- * at Core's `PrizmaButtonGroup` Spacing/12. Archetype F has no tertiary-link
- * slot — its only band opening above the buttons is `bandContent` — so Core's
- * own `tertiary-link` Button is composed there and lands ABOVE the primary at
- * the band's Spacing/32 (16 + 16). Ink, semantics and the distinct `secondary`
- * action are all correct (#PI-10); only the position moves. #GEO-1 fixes the
- * tertiary link's position PER ARCHETYPE and F has never declared one — the
- * archetype request is logged instead of a local override. `signedPartner` is
- * unaffected: its download control is a real outlined secondary Button, which
- * the archetype already places correctly.
+ * The download confirmation. Pressing "Download PDF" / "Download document"
+ * emits `secondary`; the host then sets `downloaded` and the screen raises a
+ * success Snackbar ("Document downloaded") in the archetype's `progress` slot,
+ * between the nav and the content, the same slot and component Error screens
+ * use for "link copied" (owner call 2026-10-08). Dismissal is the host's: the
+ * Snackbar is presentational (snackbar.md §9 item 6).
  */
 export declare const QualifiedSignatureResultScreen: React.ForwardRefExoticComponent<QualifiedSignatureResultScreenProps & React.RefAttributes<HTMLDivElement>>;
 export default QualifiedSignatureResultScreen;

package/dist/QualifiedSignatureResultScreen.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
 import { PrizmaResultScreen } from './ResultScreen';
 import './ScreenLayout.css';
 /**
@@ -12,8 +12,10 @@ import './ScreenLayout.css';
  * nav → centred status mark + title block → CTA band → anchored tag — and differ
  * in status, copy and which actions exist:
  * - `signed`        — `QSign.success` (10196:67485): the positive mark over a
- *   `Button group` 124 tall = the "Continue" primary plus the "Download PDF"
- *   underlined link.
+ *   STACKED pair — "Continue" primary above a "Download PDF" OUTLINED
+ *   secondary. Figma draws the download as an underlined link; it ships as the
+ *   partner's secondary Button instead (owner call 2026-10-08, "make the
+ *   generic one look like Namirial"), so both success endings read alike.
  * - `signedPlain`   — `QSign.success` (10196:67494): the SAME mark and line
  *   with no actions at all, so the band never renders and the screen reads as
  *   the pure §6-C verdict.
@@ -42,18 +44,14 @@ import './ScreenLayout.css';
  * The owner rule settles the split in favour of keeping it (#PI-8, #F-30) so
  * nothing shifts between states.
  *
- * ONE reported delta: on `signed`, Figma puts "Download PDF" BELOW the primary,
- * at Core's `PrizmaButtonGroup` Spacing/12. Archetype F has no tertiary-link
- * slot — its only band opening above the buttons is `bandContent` — so Core's
- * own `tertiary-link` Button is composed there and lands ABOVE the primary at
- * the band's Spacing/32 (16 + 16). Ink, semantics and the distinct `secondary`
- * action are all correct (#PI-10); only the position moves. #GEO-1 fixes the
- * tertiary link's position PER ARCHETYPE and F has never declared one — the
- * archetype request is logged instead of a local override. `signedPartner` is
- * unaffected: its download control is a real outlined secondary Button, which
- * the archetype already places correctly.
+ * The download confirmation. Pressing "Download PDF" / "Download document"
+ * emits `secondary`; the host then sets `downloaded` and the screen raises a
+ * success Snackbar ("Document downloaded") in the archetype's `progress` slot,
+ * between the nav and the content, the same slot and component Error screens
+ * use for "link copied" (owner call 2026-10-08). Dismissal is the host's: the
+ * Snackbar is presentational (snackbar.md §9 item 6).
  */
-export const QualifiedSignatureResultScreen = forwardRef(({ strings, variant = 'signed', screenId = `qualified-signature-result-${variant}`, overrides, onAction, ...shell }, ref) => {
+export const QualifiedSignatureResultScreen = forwardRef(({ strings, variant = 'signed', downloaded = false, screenId = `qualified-signature-result-${variant}`, overrides, onAction, ...shell }, ref) => {
     // One slice per frame — nothing is shared between variants, so the frames
     // can never collapse into each other visually.
     const signedCopy = variant === 'signed' ? strings.result.signed : undefined;
@@ -63,14 +61,15 @@ export const QualifiedSignatureResultScreen = forwardRef(({ strings, variant = '
         partnerCopy ??
         retryCopy ??
         (variant === 'error' ? strings.result.error : strings.result.signedPlain);
-    return (_jsx(PrizmaResultScreen, { ref: ref, status: variant === 'error' || variant === 'errorRetry' ? 'warning' : 'success', title: copy.title, subtitle: copy.subtitle, 
+    return (_jsx(PrizmaResultScreen, { ref: ref, status: variant === 'error' || variant === 'errorRetry' ? 'warning' : 'success', title: copy.title, subtitle: copy.subtitle, progress: downloaded && (signedCopy?.downloadLabel || partnerCopy) ? (_jsx(PrizmaSnackbar, { state: "success", contentResizing: "fill", children: strings.result.downloadedLabel })) : undefined, 
         /* "Continue" · "Done" · "Try again" — the archetype's own primary. */
         ctaLabel: signedCopy?.ctaLabel ?? partnerCopy?.ctaLabel ?? retryCopy?.ctaLabel, 
-        /* The partner's outlined "Download document", below the primary. */
-        secondaryCtaLabel: partnerCopy?.secondaryCtaLabel, 
+        /* The outlined download, below the primary: "Download PDF" on the
+           generic ending, "Download document" on the partner's. */
+        secondaryCtaLabel: signedCopy?.downloadLabel ?? partnerCopy?.secondaryCtaLabel, 
         /* The partner's "Signed by …" row — the band's centred text slot, which
            puts it above the button pair exactly as Figma draws it. */
-        disclaimer: partnerCopy?.signedByLabel, bandContent: signedCopy?.downloadLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: signedCopy.downloadLabel })) : undefined, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+        disclaimer: partnerCopy?.signedByLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
 });
 QualifiedSignatureResultScreen.displayName = 'QualifiedSignatureResultScreen';
 export default QualifiedSignatureResultScreen;

package/dist/QualifiedSignatureStrings.d.ts

@@ -33,7 +33,8 @@ export type QualifiedSignatureDocumentVariant = 'document' | 'terms';
  * The FIVE verdict frames. Both purple parents draw success twice and error
  * twice, and each pair differs in what the signer can do next:
  * - `signed`        — `QSign.success` (10196:67485): the positive mark with
- *   "Continue" and a "Download PDF" underlined link
+ *   "Continue" primary above a "Download PDF" outlined secondary (was an
+ *   underlined link in Figma; owner call 2026-10-08, matches the partner)
  * - `signedPlain`   — `QSign.success` (10196:67494): the same mark and line
  *   with NO actions at all
  * - `signedPartner` — the `x Namirial` parent's own success frame (6086:40135),
@@ -128,6 +129,12 @@ export interface QualifiedSignatureStrings {
         viewLabel: string;
         /** Accessible name for the consent stack. */
         termsLabel?: string;
+        /** Suffix appended to every clause, all of them required ("*"). Localizable,
+         *  never baked into the clause copy — Data Sharing Consent's `requiredHint`. */
+        requiredHint?: string;
+        /** The line that leads the clause group and explains the marker ("All terms
+         *  marked with * are required."). Only drawn alongside `requiredHint`. */
+        requiredLegend?: string;
         /** The generic five-clause reading. */
         accept: QualifiedSignatureAcceptCopy;
         /** The partner two-clause reading. */
@@ -148,6 +155,12 @@ export interface QualifiedSignatureStrings {
         terms: {
             title: string;
         };
+        /** The way back on both document screens
+         *  ("Back") — they are opened from the accept screen, so they carry a way
+         *  back to it. It is the label of a full-width SECONDARY button in the CTA
+         *  band (owner call 2026-10-08, was the nav chevron) and emits
+         *  `secondary`. Omit it and no way back renders. */
+        backLabel?: string;
     };
     /** The two in-flight screens. */
     processing: {
@@ -181,7 +194,8 @@ export interface QualifiedSignatureStrings {
             subtitle?: string;
             /** Primary CTA ("Continue"). */
             ctaLabel: string;
-            /** Underlined tertiary link ("Download PDF"). Emits `secondary`. */
+            /** OUTLINED secondary below the primary ("Download PDF"), the same
+             *  control as the partner's "Download document". Emits `secondary`. */
             downloadLabel?: string;
         };
         /** QSign.success drawn with no actions. */
@@ -206,6 +220,9 @@ export interface QualifiedSignatureStrings {
              *  `secondary`. A real Button, not `signed`'s underlined link. */
             secondaryCtaLabel: string;
         };
+        /** The success Snackbar raised after either download control was pressed
+         *  ("Document downloaded"). Shared by `signed` and `signedPartner`. */
+        downloadedLabel: string;
         /** QSign.AcceptSign.error ("Something went wrong"). Figma draws no button. */
         error: {
             title: string;

package/dist/ResultScreen.d.ts

@@ -64,6 +64,14 @@ export interface PrizmaResultScreenProps extends Omit<PrizmaScreenShellProps, 'd
      * job (Face Match's verdict Snackbar). DEVIATIONS #VS-17.
      */
     linkLabel?: string;
+    /**
+     * Where the tertiary link sits in the stack. `below` (default) is archetype
+     * A's position; `above` puts it over the primary CTA, which is what the
+     * permission frames draw ("Quit process" over "Allow permission",
+     * DEVIATIONS #GEN-3, #VS-17). The slot those rows escalated: the archetype
+     * still owns both positions, a screen only picks one of them.
+     */
+    linkPosition?: 'below' | 'above';
     /** "verified by" attribution copy for the footer tag. */
     verifiedLabel: string;
     navLabel?: string;

package/dist/ResultScreen.js

@@ -26,12 +26,23 @@ import './ScreenLayout.css';
  * `ProcessingScreen` stays the pure spinner/no-CTA case; reach for this one as
  * soon as a result screen needs a button.
  */
-export const PrizmaResultScreen = forwardRef(({ progress, status = 'none', title, subtitle, glyph, children, bandContent, disclaimer, ctaOrientation = 'stacked', ctaLabel, secondaryCtaLabel, linkLabel, verifiedLabel, 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--centered", children: [glyph, _jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle, icon: status === 'loading'
+export const PrizmaResultScreen = forwardRef(({ progress, status = 'none', title, subtitle, glyph, children, bandContent, disclaimer, ctaOrientation = 'stacked', ctaLabel, secondaryCtaLabel, linkLabel, linkPosition = 'below', verifiedLabel, 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--centered", children: [glyph, _jsx(PrizmaTitle, { variant: overrides?.align === 'left' ? 'left' : 'centered', title: title, showSubtitle: Boolean(subtitle), subtitle: subtitle, icon: status === 'loading'
                         ? { type: 'spinner' }
                         : status === 'none'
                             ? { type: 'none' }
-                            : { type: 'status', status } }), children] }), ctaLabel || secondaryCtaLabel || linkLabel || disclaimer || bandContent ? (_jsxs("div", { className: "prizma-screen-layout__band prizma-screen-layout__band--result", children: [bandContent ? (_jsx("div", { className: "prizma-screen-layout__band__content", children: bandContent })) : null, disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, _jsxs("div", { className: ctaOrientation === 'row'
+                            : { type: 'status', status } }), children] }), ctaLabel || secondaryCtaLabel || linkLabel || disclaimer || bandContent ? (_jsxs("div", { className: [
+                'prizma-screen-layout__band',
+                'prizma-screen-layout__band--result',
+                // No footer tag to reserve `--pcs-footer-space` for — same gap the
+                // Review archetype's `--bare` fallback exists for (ScreenLayout.css).
+                // Every existing F consumer always shows the tag, so this has never
+                // fired before; without it the CTA sits ~40px further from the
+                // bottom than Figma's flat Spacing/24 draws.
+                !showFooter ? 'prizma-screen-layout__band--bare' : '',
+            ]
+                .filter(Boolean)
+                .join(' '), children: [bandContent ? (_jsx("div", { className: "prizma-screen-layout__band__content", children: bandContent })) : null, disclaimer ? _jsx(PrizmaDisclaimer, { text: disclaimer }) : null, _jsxs("div", { className: ctaOrientation === 'row'
                         ? 'prizma-screen-layout__band__ctas prizma-screen-layout__band__ctas--row'
-                        : 'prizma-screen-layout__band__ctas', children: [ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, secondaryCtaLabel ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: secondaryCtaLabel })) : null, linkLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: linkLabel })) : null] })] })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })));
+                        : 'prizma-screen-layout__band__ctas', children: [linkLabel && linkPosition === 'above' ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: linkLabel })) : null, ctaLabel ? (_jsx(PrizmaButton, { variant: "primary", size: "L", onClick: () => onAction?.({ type: 'cta', screenId }), children: ctaLabel })) : null, secondaryCtaLabel ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: secondaryCtaLabel })) : null, linkLabel && linkPosition === 'below' ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: linkLabel })) : null] })] })) : null, showFooter ? (_jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: verifiedLabel }) })) : null] })));
 PrizmaResultScreen.displayName = 'PrizmaResultScreen';
 export default PrizmaResultScreen;

package/dist/ReusabilityCredentialSelectionScreen.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import { type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { ReusableCredential, ReusabilityStrings } from './ReusabilityStrings';
+import './ScreenLayout.css';
+import './ReusabilityLayout.css';
+/** The sentinel the SDK submits for the capture row (`SCAN_NEW_DOCUMENT`,
+ *  `identityReuseStateMachine.ts`): `{ accepted: false }`, then ID Capture. */
+export declare const REUSABILITY_SCAN_NEW: "scanNew";
+export type ReusabilitySelection = string | typeof REUSABILITY_SCAN_NEW;
+export interface ReusabilityCredentialSelectionScreenProps extends Omit<PrizmaListScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'children' | 'listAlign' | 'scrollList' | 'disclaimer' | 'ctaLabel' | 'secondaryCtaLabel' | 'linkLabel' | 'secondaryLinkLabel' | 'overlay' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `selection` and `sharedDetails` slices. */
+    strings: ReusabilityStrings;
+    /**
+     * The documents the network found for this person, best match FIRST — the
+     * backend orders them and the first row wears the "Recommended" pill (SDK
+     * `recommended={index === 0}`). One or more; the frame draws two
+     * (`Multiple documents`) and one (`Single document`).
+     */
+    credentials: ReusableCredential[];
+    /**
+     * "What data will be shared?" was pressed: Core's bottom sheet listing the
+     * recipient's data request is presented over the dimmed selection
+     * (`shared info`, 7877:68927). Its one button emits `cta` and closes it.
+     */
+    sharedDetails?: boolean;
+    /**
+     * Fired with the chosen credential's id, or `REUSABILITY_SCAN_NEW` for the
+     * capture row; `onAction` still reports the tap as `cta`. Named like ID
+     * Capture's `onDocumentSelect` — `onSelect` is a native <div> event the shell
+     * already passes through.
+     */
+    onCredentialSelect?: (selection: ReusabilitySelection) => void;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Reusability (Incode Bridge) — choose the document to reuse, built on the
+ * List archetype (GUIDELINES.md §6-G, `PrizmaListScreen`).
+ *
+ * ONE screen for three of the section's four frames: `Multiple documents`
+ * (7877:68816) and `Single document` (7877:68875) are the same skeleton — nav →
+ * Title (H2 + H5) → the credential list → "Scan a new document" → two tertiary
+ * links → tag — differing only in how many rows the network returned; and
+ * `Shared data` (7877:68927) is that screen with Core's bottom sheet presented
+ * over it (`sharedDetails`).
+ *
+ * WHY ARCHETYPE G. The rows ARE the actions — tapping a document advances the
+ * session with no confirm step (consent review 2026-09-16: "remove the confirm
+ * button: selecting a document advances the user immediately"; the Web SDK's
+ * ENG-57939 built exactly that) — so there is no primary CTA, and G is the one
+ * archetype whose band may carry links alone. ID Capture's document chooser is
+ * the same shape on the same archetype.
+ *
+ * Six things are deliberate:
+ *
+ * 1. The rows are composed here from Core's tokens, not from Core's
+ *    `PrizmaCardListVerificationOptions`. The frame calls them "Verification
+ *    options card list", but a reusable credential has a different anatomy —
+ *    type label + status pill, flag + masked number, verified date — and the
+ *    capture row is one line with a pill. Core ships neither that row nor a
+ *    plain status pill; both are proposed (DEVIATIONS #RU-1, #RU-2) and the
+ *    rules live once in `ReusabilityLayout.css`.
+ * 2. Every row is a real `<button>` that emits `cta` and names its credential
+ *    through `onCredentialSelect` — the one-click rule. No radio, no selected
+ *    state: the frame draws none and the decision was to drop them. The SDK's
+ *    shipped `role="radio"` + confirm is the generation BEFORE this frame.
+ * 3. The first row wears "Recommended", because the backend sorts best match
+ *    first; the capture row wears "Slowest". The pills are the frame's own
+ *    fills on Core tokens; their 12px type is the one value Core's scale
+ *    cannot express (#RU-2).
+ * 4. The flag is Core's raster bank (`PrizmaCountryFlag`, 24×18), never the
+ *    frame's emoji glyph (owner decision 2026-07-12). A country outside the
+ *    bank falls back to the emoji the host supplies — Core's own fallback rule
+ *    (#RU-3).
+ * 5. The two links ride the archetype's band: "What data will be shared?" in
+ *    `linkLabel` (emits `secondary`) and "Incode’s Privacy Policy" in the new
+ *    `secondaryLinkLabel` slot (emits `tertiary`) — two non-primary actions a
+ *    host must tell apart (#PI-10), so each has its own action. The band's
+ *    flat Spacing/16 stands between them where the frame's Button group
+ *    tightens the pair by 8 (#RU-4).
+ * 6. The sheet rides the archetype's new `overlay` slot — the same contract E
+ *    gained for Biometric Consent (#BC-8): the screen owns the scrim and the
+ *    anchoring (the foundation's `__sheet-scrim` / `__sheet-panel`), Core owns
+ *    the panel — `PrizmaBottomSheetContent variant="dialog"` with its H1
+ *    title, H5 subtitle, the bullet list in `body`, and its own Button Group
+ *    reduced to "Understood". With the sheet up the rows and links are under
+ *    the scrim and do not report (#RU-5).
+ *
+ * The nav keeps the logo and draws no close: the frame's top-right ✕ is the
+ * SDK page chrome, not a Prizma screen control (GUIDELINES §3; #RU-6).
+ */
+export declare const ReusabilityCredentialSelectionScreen: React.ForwardRefExoticComponent<ReusabilityCredentialSelectionScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default ReusabilityCredentialSelectionScreen;

package/dist/ReusabilityCredentialSelectionScreen.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaBottomSheetContent } from '@incodetech/prizma-core-web/bottom-sheet';
+import { PrizmaCountryFlag } from '@incodetech/prizma-core-web/combined';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+import './ReusabilityLayout.css';
+/** The sentinel the SDK submits for the capture row (`SCAN_NEW_DOCUMENT`,
+ *  `identityReuseStateMachine.ts`): `{ accepted: false }`, then ID Capture. */
+export const REUSABILITY_SCAN_NEW = 'scanNew';
+/**
+ * Reusability (Incode Bridge) — choose the document to reuse, built on the
+ * List archetype (GUIDELINES.md §6-G, `PrizmaListScreen`).
+ *
+ * ONE screen for three of the section's four frames: `Multiple documents`
+ * (7877:68816) and `Single document` (7877:68875) are the same skeleton — nav →
+ * Title (H2 + H5) → the credential list → "Scan a new document" → two tertiary
+ * links → tag — differing only in how many rows the network returned; and
+ * `Shared data` (7877:68927) is that screen with Core's bottom sheet presented
+ * over it (`sharedDetails`).
+ *
+ * WHY ARCHETYPE G. The rows ARE the actions — tapping a document advances the
+ * session with no confirm step (consent review 2026-09-16: "remove the confirm
+ * button: selecting a document advances the user immediately"; the Web SDK's
+ * ENG-57939 built exactly that) — so there is no primary CTA, and G is the one
+ * archetype whose band may carry links alone. ID Capture's document chooser is
+ * the same shape on the same archetype.
+ *
+ * Six things are deliberate:
+ *
+ * 1. The rows are composed here from Core's tokens, not from Core's
+ *    `PrizmaCardListVerificationOptions`. The frame calls them "Verification
+ *    options card list", but a reusable credential has a different anatomy —
+ *    type label + status pill, flag + masked number, verified date — and the
+ *    capture row is one line with a pill. Core ships neither that row nor a
+ *    plain status pill; both are proposed (DEVIATIONS #RU-1, #RU-2) and the
+ *    rules live once in `ReusabilityLayout.css`.
+ * 2. Every row is a real `<button>` that emits `cta` and names its credential
+ *    through `onCredentialSelect` — the one-click rule. No radio, no selected
+ *    state: the frame draws none and the decision was to drop them. The SDK's
+ *    shipped `role="radio"` + confirm is the generation BEFORE this frame.
+ * 3. The first row wears "Recommended", because the backend sorts best match
+ *    first; the capture row wears "Slowest". The pills are the frame's own
+ *    fills on Core tokens; their 12px type is the one value Core's scale
+ *    cannot express (#RU-2).
+ * 4. The flag is Core's raster bank (`PrizmaCountryFlag`, 24×18), never the
+ *    frame's emoji glyph (owner decision 2026-07-12). A country outside the
+ *    bank falls back to the emoji the host supplies — Core's own fallback rule
+ *    (#RU-3).
+ * 5. The two links ride the archetype's band: "What data will be shared?" in
+ *    `linkLabel` (emits `secondary`) and "Incode’s Privacy Policy" in the new
+ *    `secondaryLinkLabel` slot (emits `tertiary`) — two non-primary actions a
+ *    host must tell apart (#PI-10), so each has its own action. The band's
+ *    flat Spacing/16 stands between them where the frame's Button group
+ *    tightens the pair by 8 (#RU-4).
+ * 6. The sheet rides the archetype's new `overlay` slot — the same contract E
+ *    gained for Biometric Consent (#BC-8): the screen owns the scrim and the
+ *    anchoring (the foundation's `__sheet-scrim` / `__sheet-panel`), Core owns
+ *    the panel — `PrizmaBottomSheetContent variant="dialog"` with its H1
+ *    title, H5 subtitle, the bullet list in `body`, and its own Button Group
+ *    reduced to "Understood". With the sheet up the rows and links are under
+ *    the scrim and do not report (#RU-5).
+ *
+ * The nav keeps the logo and draws no close: the frame's top-right ✕ is the
+ * SDK page chrome, not a Prizma screen control (GUIDELINES §3; #RU-6).
+ */
+export const ReusabilityCredentialSelectionScreen = forwardRef(({ strings, credentials, sharedDetails = false, onCredentialSelect, screenId = sharedDetails
+    ? 'reusability-shared-details'
+    : `reusability-selection-${credentials.length > 1 ? 'multiple' : 'single'}`, overrides, onAction, ...shell }, ref) => {
+    const { selection, sharedDetails: shared } = strings;
+    const choose = (choice) => {
+        if (sharedDetails)
+            return;
+        onCredentialSelect?.(choice);
+        onAction?.({ type: 'cta', screenId });
+    };
+    const sheet = sharedDetails ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "prizma-screen-layout__sheet-scrim", "aria-hidden": "true" }), _jsx("div", { className: "prizma-screen-layout__sheet-panel", children: _jsx(PrizmaBottomSheetContent, { variant: "dialog", title: shared.title, subtitle: shared.subtitle, body: _jsx("ul", { className: "reusability-shared-list", children: shared.items.map((item) => (_jsx("li", { children: item }, item))) }), buttonGroupProps: {
+                        primaryLabel: shared.ctaLabel,
+                        showSecondary: false,
+                        onPrimaryClick: () => onAction?.({ type: 'cta', screenId }),
+                    } }) })] })) : undefined;
+    return (_jsx(PrizmaListScreen, { ref: ref, title: selection.title, subtitle: selection.subtitle, linkLabel: selection.sharedDataLink, secondaryLinkLabel: selection.privacyPolicyLink, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, 
+        /* With the sheet up, the links are under the scrim and must not
+           report: the sheet's "Understood" is the only action. */
+        onAction: sharedDetails ? undefined : onAction, overlay: sheet, ...shell, children: _jsxs("div", { className: "reusability-credentials", role: "group", "aria-label": selection.listLabel, children: [_jsx("div", { className: "reusability-credentials__group", children: credentials.map((credential, index) => (_jsxs("button", { type: "button", className: "reusability-credential", onClick: () => choose(credential.id), tabIndex: sharedDetails ? -1 : undefined, children: [_jsxs("span", { className: "reusability-credential__head", children: [_jsx("span", { className: "reusability-credential__type", children: selection.documentType[credential.documentType] }), index === 0 ? (_jsx("span", { className: "reusability-pill reusability-pill--recommended", children: selection.recommendedTag })) : null] }), _jsxs("span", { className: "reusability-credential__number", children: [_jsx("span", { className: "reusability-credential__flag", "aria-hidden": "true", children: _jsx(PrizmaCountryFlag, { country: {
+                                                code: credential.countryCode,
+                                                name: credential.countryCode,
+                                                dialCode: '',
+                                                flag: credential.countryFlag ?? '',
+                                            } }) }), _jsx("span", { children: credential.maskedNumber })] }), _jsxs("span", { className: "reusability-credential__verified", children: [_jsx("span", { children: selection.verifiedPrefix }), " ", _jsx("span", { children: credential.verifiedOn })] })] }, credential.id))) }), _jsx("div", { className: "reusability-credentials__group", children: _jsx("button", { type: "button", className: "reusability-credential", onClick: () => choose(REUSABILITY_SCAN_NEW), tabIndex: sharedDetails ? -1 : undefined, children: _jsxs("span", { className: "reusability-credential__head", children: [_jsx("span", { className: "reusability-credential__type", children: selection.scanNewLabel }), _jsx("span", { className: "reusability-pill reusability-pill--neutral", children: selection.slowestTag })] }) }) })] }) }));
+});
+ReusabilityCredentialSelectionScreen.displayName = 'ReusabilityCredentialSelectionScreen';
+export default ReusabilityCredentialSelectionScreen;