@incodetech/prizma-core-screens 0.2.7 → 0.2.12

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;

package/dist/ReusabilityLayout.css

@@ -0,0 +1,241 @@
+/* Reusability (Incode Bridge) — module layout additions.
+ *
+ * Three recipes, every value a Prizma token: the credential rows the selection
+ * screen lists, the bullet list inside the shared-details sheet, and the framed
+ * reader the privacy policy scrolls in. The content column, the 24px gutters,
+ * the title → list offset, the CTA band, the sheet scrim and panel and the
+ * anchored footer are all the foundation's (`ScreenLayout.css`); the sheet
+ * itself, the buttons, the title and the flag raster are Core's.
+ *
+ * WHY THE ROWS ARE COMPOSED HERE. The frame names the list "Verification
+ * options card list", but it is not Core's `Card / Verification options item`
+ * (60px card icon + title + chevron): each row is a document-type label with a
+ * status pill, the masked number behind a flag, and the date it was verified —
+ * and the last row is a single line with a pill. Core ships no card with that
+ * anatomy and no plain status pill (its `PrizmaCardTag` is the ⚡ Instant pill,
+ * with the glyph baked in). Both are built below from Core's own tokens — no
+ * palette, no radius, no spacing invented — and both are logged as component
+ * proposals (DEVIATIONS #RU-1, #RU-2). The moment Core ships them, these rules
+ * go and the screen imports the component.
+ */
+
+/* ── The credential list ─────────────────────────────────────────────────────
+ * Two bordered containers, Spacing/16 apart (`options`, 7877:68823): the
+ * reusable documents in the first, "Scan a new document" alone in the second.
+ * Rows inside a container touch, each drawing a top hairline the way Core's
+ * verification-options rows do (`Card.css`); the container clips the corners. */
+.reusability-credentials {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  width: 100%;
+}
+
+.reusability-credentials__group {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  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-medium);
+}
+
+/* The row IS the action — a real <button>, one tap advances (consent review
+ * 2026-09-16: "remove the confirm button"). Button reset, then the frame's
+ * Spacing/16 padding and Spacing/8 between its lines. */
+.reusability-credential {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--prizma-spacing-8);
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: var(--prizma-spacing-16);
+  background-color: var(--prizma-surface-neutral-0);
+  border: none;
+  border-top: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  color: var(--prizma-text-body-800-primary);
+  font-family: var(--prizma-body-family);
+  text-align: left;
+  cursor: pointer;
+  -webkit-font-smoothing: antialiased;
+}
+
+.reusability-credentials__group > .reusability-credential:first-child {
+  border-top: none;
+}
+
+/* Keyboard focus: Core's Button ring, so a row and the links below it light
+ * up the same way. Inset, because the group clips its corners. */
+.reusability-credential:focus-visible {
+  outline: var(--prizma-button-focus-ring-width) solid var(--prizma-border-status-focus);
+  outline-offset: calc(-1 * var(--prizma-button-focus-ring-width));
+}
+
+/* Line 1: the document-type label, the pill at the far right. */
+.reusability-credential__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prizma-spacing-8);
+  width: 100%;
+}
+
+.reusability-credential__type {
+  margin: 0;
+  color: var(--prizma-text-body-800-primary);
+  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);
+}
+
+/* Line 2: the flag and the masked number, Headline/H5. */
+.reusability-credential__number {
+  display: flex;
+  align-items: center;
+  gap: var(--prizma-spacing-4);
+  margin: 0;
+  color: var(--prizma-text-body-800-primary);
+  font-family: var(--prizma-headline-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);
+}
+
+/* Core's flag raster is 24×18; the frame draws an emoji glyph at the text
+ * size. The raster wins (owner decision 2026-07-12: flags are images, never
+ * emoji) and keeps its own geometry — DEVIATIONS #RU-3. */
+.reusability-credential__flag {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+/* Line 3: "Verified Apr 2023", Body/M in the secondary ink. */
+.reusability-credential__verified {
+  margin: 0;
+  color: var(--prizma-text-body-500-secondary);
+  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);
+}
+
+/* ── The status pill ─────────────────────────────────────────────────────────
+ * "Recommended" on the best match, "Slowest" on the capture row. Surface/Brand/50
+ * for the first, inked with Card/Tag/Text — the mode-aware AA pair Core's own
+ * ⚡ pill uses (Brand.600 light · Focus.400 dark; owner call 2026-07-14), because
+ * the frame's Text/Accent/Brand on Brand/50 is blue on blue in dark mode;
+ * Surface/Neutral/50 with a Border/Neutral/200 hairline for the second — the
+ * frame's own fills. Radius x-small (4) and Spacing/2 × Spacing/4 padding, as
+ * drawn.
+ *
+ * TYPE: the frame sets the label in Body/S Regular (12px). Core's generated
+ * scale has no 12px text step — Body/M and Label/M are 14 — so the pill takes
+ * Label/M Regular, the smallest token the scale has. DEVIATIONS #RU-2. */
+.reusability-pill {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: var(--prizma-spacing-2) var(--prizma-spacing-4);
+  border-radius: var(--prizma-border-radius-x-small);
+  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);
+  letter-spacing: var(--prizma-label-m-regular-letter-spacing);
+  white-space: nowrap;
+}
+
+.reusability-pill--recommended {
+  background-color: var(--prizma-surface-brand-50);
+  color: var(--prizma-card-tag-text);
+}
+
+.reusability-pill--neutral {
+  background-color: var(--prizma-surface-neutral-50);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-200);
+  color: var(--prizma-text-body-800-primary);
+}
+
+/* ── The shared-details list ─────────────────────────────────────────────────
+ * Inside Core's dialog sheet (`__body` slot): the recipient's data request as
+ * bullets, Headline/H5 in the primary ink, Spacing/8 apart, the browser's own
+ * disc marker on a Spacing/24 indent (`Documents list`, 7877:68985). Core's
+ * sheet supplies the Spacing/24 above it. */
+.reusability-shared-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-8);
+  margin: 0;
+  padding: 0 0 0 var(--prizma-spacing-24);
+  color: var(--prizma-text-body-800-primary);
+  font-family: var(--prizma-headline-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);
+  text-align: left;
+}
+
+.reusability-shared-list > li {
+  margin: 0;
+  padding: 0;
+}
+
+/* ── The privacy-policy reader ───────────────────────────────────────────────
+ * The framed, scrolling document Qualified Signature's viewers draw
+ * (`.qualified-signature-document--framed`, DEVIATIONS #QS-n): a hairline
+ * frame on radius-small, Spacing/16 inside, Body/M prose with Spacing/12
+ * between paragraphs, the dateline first. The frame's `demo_5` draws the text
+ * unframed on a 32px gutter; the framed reader is what every document viewer
+ * in this package draws (owner call 2026-09-29, "take reference from other
+ * screens"), so it is followed here — DEVIATIONS #RU-7.
+ *
+ * FOUNDATION REQUEST: this is the SECOND module drawing the framed reader.
+ * Promote it to `ScreenLayout.css` as `__document` (the #DC-29 / #BC-8 idiom:
+ * the third consumer moves the recipe), and both module copies go. */
+.reusability-document {
+  flex: 1 1 auto;
+  min-height: 0;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--prizma-spacing-16);
+  margin-bottom: var(--prizma-spacing-16);
+  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);
+  text-align: start;
+}
+
+.reusability-document > * {
+  margin: 0;
+}
+
+.reusability-document > * + * {
+  margin-top: var(--prizma-spacing-12);
+}
+
+.reusability-document__meta,
+.reusability-document__prose {
+  color: var(--prizma-text-body-800-primary);
+  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);
+  text-align: left;
+}
+
+.reusability-document__meta {
+  color: var(--prizma-text-body-500-secondary);
+}

package/dist/ReusabilityPrivacyPolicyScreen.d.ts

@@ -0,0 +1,55 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { ReusabilityStrings } from './ReusabilityStrings';
+import './ScreenLayout.css';
+import './ReusabilityLayout.css';
+export interface ReusabilityPrivacyPolicyScreenProps extends Omit<PrizmaListScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'children' | 'listAlign' | 'scrollList' | 'disclaimer' | 'ctaLabel' | 'secondaryCtaLabel' | 'linkLabel' | 'secondaryLinkLabel' | 'overlay' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `privacyPolicy` slice. */
+    strings: ReusabilityStrings;
+    /**
+     * The policy itself. HOST-supplied content, never module copy — the same
+     * slot contract Qualified Signature's document viewers use for the contract
+     * page (GUIDELINES §10): paragraphs in `.reusability-document__prose`, the
+     * dateline in `.reusability-document__meta`. The host supplies it in the
+     * session's language; it is legal text and is never machine translated.
+     */
+    body?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Reusability (Incode Bridge) — Incode's privacy policy, read inside the flow.
+ * Built on the List archetype (GUIDELINES.md §6-G), the way Qualified
+ * Signature's document viewers are: the `__list` middle is "content filling the
+ * space between the title block and the CTA band", which is what a document is,
+ * and the band carries one full-width button.
+ *
+ * Figma: `demo_5` (7877:68997), the frame the "Incode’s Privacy Policy" link
+ * opens — the Demo App's terms layout re-used: the Incode logo top-LEFT on a
+ * 32px gutter, "Last Modified: August 5, 2024", the policy as an unframed wall
+ * of Body/M text, and a raised white band with "Done".
+ *
+ * Three deltas from that frame, all the system's (DEVIATIONS #RU-7):
+ * 1. The nav is the archetype's — logo centred, no close — and the document
+ *    sits on the column's 24px gutter like every screen in this package
+ *    (GUIDELINES §3, §5). The frame's left logo and 32 gutter are the Demo
+ *    App's chrome, not a module's.
+ * 2. The frame draws no heading. GUIDELINES §4 gives every screen exactly one
+ *    H2 and G has no title-less path (the same delta QS's `viewdoc` records),
+ *    so the screen carries the link's own label as its title.
+ * 3. The policy scrolls inside the framed reader every document viewer here
+ *    draws (`.reusability-document`, the QS recipe), not unframed to the
+ *    frame's edge; the title, the button and the tag hold still while it pans.
+ *
+ * The policy is the host's (`body`), like QS's contract page: the SDK owns no
+ * legal text and translates none — the host supplies the document in the
+ * session's language. "Done" is the frame's primary and emits `cta`: it
+ * closes the policy and returns to the selection, where nothing has changed. On the Web SDK this
+ * link opens the policy in a NEW TAB instead (`identityReuse.opensInNewTab`);
+ * this screen is the in-flow reading the frame draws, which is what a native
+ * host presents.
+ */
+export declare const ReusabilityPrivacyPolicyScreen: React.ForwardRefExoticComponent<ReusabilityPrivacyPolicyScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default ReusabilityPrivacyPolicyScreen;

package/dist/ReusabilityPrivacyPolicyScreen.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+import './ReusabilityLayout.css';
+/**
+ * Reusability (Incode Bridge) — Incode's privacy policy, read inside the flow.
+ * Built on the List archetype (GUIDELINES.md §6-G), the way Qualified
+ * Signature's document viewers are: the `__list` middle is "content filling the
+ * space between the title block and the CTA band", which is what a document is,
+ * and the band carries one full-width button.
+ *
+ * Figma: `demo_5` (7877:68997), the frame the "Incode’s Privacy Policy" link
+ * opens — the Demo App's terms layout re-used: the Incode logo top-LEFT on a
+ * 32px gutter, "Last Modified: August 5, 2024", the policy as an unframed wall
+ * of Body/M text, and a raised white band with "Done".
+ *
+ * Three deltas from that frame, all the system's (DEVIATIONS #RU-7):
+ * 1. The nav is the archetype's — logo centred, no close — and the document
+ *    sits on the column's 24px gutter like every screen in this package
+ *    (GUIDELINES §3, §5). The frame's left logo and 32 gutter are the Demo
+ *    App's chrome, not a module's.
+ * 2. The frame draws no heading. GUIDELINES §4 gives every screen exactly one
+ *    H2 and G has no title-less path (the same delta QS's `viewdoc` records),
+ *    so the screen carries the link's own label as its title.
+ * 3. The policy scrolls inside the framed reader every document viewer here
+ *    draws (`.reusability-document`, the QS recipe), not unframed to the
+ *    frame's edge; the title, the button and the tag hold still while it pans.
+ *
+ * The policy is the host's (`body`), like QS's contract page: the SDK owns no
+ * legal text and translates none — the host supplies the document in the
+ * session's language. "Done" is the frame's primary and emits `cta`: it
+ * closes the policy and returns to the selection, where nothing has changed. On the Web SDK this
+ * link opens the policy in a NEW TAB instead (`identityReuse.opensInNewTab`);
+ * this screen is the in-flow reading the frame draws, which is what a native
+ * host presents.
+ */
+export const ReusabilityPrivacyPolicyScreen = forwardRef(({ strings, body, screenId = 'reusability-privacy-policy', overrides, onAction, ...shell }, ref) => {
+    const { privacyPolicy } = strings;
+    return (_jsx(PrizmaListScreen, { ref: ref, title: privacyPolicy.title, ctaLabel: privacyPolicy.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx("div", { className: "reusability-document", role: "region", "aria-label": privacyPolicy.title, tabIndex: 0, children: body }) }));
+});
+ReusabilityPrivacyPolicyScreen.displayName = 'ReusabilityPrivacyPolicyScreen';
+export default ReusabilityPrivacyPolicyScreen;