@incodetech/prizma-core-screens 0.2.22 → 0.2.26

package/dist/DemoScreensConfigSheetScreen.js

@@ -27,7 +27,7 @@ export const DemoScreensConfigSheetScreen = forwardRef(({ strings, state = 'defa
     const s = strings.configSheet;
     const options = [{ value: s.flowValue, label: s.flowValue }, ...s.flows];
     const value = state === 'selected' ? s.flowSelected : s.flowValue;
-    return (_jsxs(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, ...shell, children: [state === 'saved' ? (_jsx("div", { className: "demo-screens-toast", children: _jsx(PrizmaSnackbar, { state: "success", contentResizing: "fill", isMultiline: true, children: s.savedSnackbar }) })) : null, _jsxs(DemoScreensSheet, { ariaLabel: s.title, children: [_jsx("div", { className: "demo-screens-sheet__nav", children: _jsx(PrizmaNavigation, { showIncodeLogo: false, showRightIcon: true, closeLabel: s.closeLabel, onRightIconClick: () => onAction?.({ type: 'help', screenId }), "aria-label": s.title }) }), _jsx("div", { className: "demo-screens-sheet__title", children: _jsx(PrizmaTitle, { variant: "left", title: s.title, showSubtitle: true, subtitle: s.subtitle }) }), _jsxs("div", { className: "demo-screens-sheet__fields", children: [_jsx(PrizmaDropdown, { label: s.flowLabel, options: options, value: value, showRequiredMarker: false, searchable: true, searchPlaceholder: s.searchPlaceholder, clearSearchLabel: s.clearSearchLabel, forceOpen: state === 'flowOpen' }), _jsxs("div", { className: "demo-screens-sheet__lines", children: [_jsx("p", { className: "demo-screens-sheet__line", children: s.clientIdLine }), _jsx("p", { className: "demo-screens-sheet__line", children: s.environmentLine })] })] }), _jsxs("div", { className: "demo-screens-sheet__band", children: [_jsx(PrizmaButton, { variant: "primary", size: "L", disabled: state !== 'selected', onClick: () => onAction?.({ type: 'cta', screenId }), children: s.saveLabel }), _jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: s.editLinkLabel }), _jsx("p", { className: "demo-screens-build", children: s.buildLabel })] })] })] }));
+    return (_jsxs(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, ...shell, children: [state === 'saved' ? (_jsx("div", { className: "demo-screens-toast", children: _jsx(PrizmaSnackbar, { state: "success", contentResizing: "fill", children: s.savedSnackbar }) })) : null, _jsxs(DemoScreensSheet, { ariaLabel: s.title, children: [_jsx("div", { className: "demo-screens-sheet__nav", children: _jsx(PrizmaNavigation, { showIncodeLogo: false, showRightIcon: true, closeLabel: s.closeLabel, onRightIconClick: () => onAction?.({ type: 'help', screenId }), "aria-label": s.title }) }), _jsx("div", { className: "demo-screens-sheet__title", children: _jsx(PrizmaTitle, { variant: "left", title: s.title, showSubtitle: true, subtitle: s.subtitle }) }), _jsxs("div", { className: "demo-screens-sheet__fields", children: [_jsx(PrizmaDropdown, { label: s.flowLabel, options: options, value: value, showRequiredMarker: false, searchable: true, searchPlaceholder: s.searchPlaceholder, clearSearchLabel: s.clearSearchLabel, forceOpen: state === 'flowOpen' }), _jsxs("div", { className: "demo-screens-sheet__lines", children: [_jsx("p", { className: "demo-screens-sheet__line", children: s.clientIdLine }), _jsx("p", { className: "demo-screens-sheet__line", children: s.environmentLine })] })] }), _jsxs("div", { className: "demo-screens-sheet__band", children: [_jsx(PrizmaButton, { variant: "primary", size: "L", disabled: state !== 'selected', onClick: () => onAction?.({ type: 'cta', screenId }), children: s.saveLabel }), _jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: s.editLinkLabel }), _jsx("p", { className: "demo-screens-build", children: s.buildLabel })] })] })] }));
 });
 DemoScreensConfigSheetScreen.displayName = 'DemoScreensConfigSheetScreen';
 export default DemoScreensConfigSheetScreen;

package/dist/DocumentSignatureLayout.css

@@ -0,0 +1,160 @@
+/* from the `read-and-sign-in-one-screen` exploration
+ *
+ * Document Electronic Signature — layout glue only. No archetype value is
+ * redeclared (the gutters, the title block, the CTA band and the tag stay the
+ * foundation's) and nothing here draws a component: the viewer frame is
+ * Electronic Signature's `.electronic-signature-document`, the Stepper,
+ * Scroll pill, Segmented control, pad, field, Signature preview and sheet are
+ * Core's. Every value is a --prizma-*
+ * token. Ported from Option B (`read-and-sign.css`) of the exploration.
+ */
+
+/* The viewer fills what the Stepper leaves. Electronic Signature's frame
+   carries a Spacing/16 bottom margin for its List screen; in the Form
+   archetype the field stack closes at Spacing/16 instead, so it is released
+   here and the stack takes it (the same gap, the same token). */
+.document-signature-screen .prizma-form-screen__fields {
+  margin-bottom: var(--prizma-spacing-16);
+}
+
+.document-signature-screen .prizma-form-screen__fields > :not(.document-signature-viewer) {
+  flex-shrink: 0;
+}
+
+.document-signature-viewer.electronic-signature-document {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin-bottom: 0;
+  /* The sections' offset parent, so the screen reads where each document is
+     in layout pixels, whatever transform a spec card scales the frame with. */
+  position: relative;
+}
+
+/* One document: its title, then the host's prose. No divider between
+   documents: the count is the Stepper's caption. Electronic Signature's frame already spaces its direct
+   children; a section spaces its own. */
+.document-signature-doc {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-12);
+}
+
+.document-signature-doc + .document-signature-doc {
+  margin-top: var(--prizma-spacing-24);
+}
+
+.document-signature-doc > * {
+  margin: 0;
+}
+
+/* A document's title is a step above its section headings: Headline/H4 on the
+   frame's own Text/Body/800. */
+.electronic-signature-document .document-signature-doc__title {
+  font-size: var(--prizma-headline-h4-font-size);
+  line-height: var(--prizma-headline-h4-line-height);
+  font-weight: var(--prizma-headline-h4-font-weight);
+  letter-spacing: var(--prizma-headline-h4-letter-spacing);
+}
+
+/* The sheet body: Core's Segmented control (Draw / Type), then the mode's
+   body. Spacing/8 between them, and between the field and the preview, the
+   exploration's own gap (`.rs-b-sheet`). */
+.document-signature-sheet-body,
+.document-signature-sheet-mode,
+.document-signature-sheet-mode__type {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-8);
+}
+
+/* Type mode keeps the Draw body's height: an invisible copy of Core's pad and
+   the field + preview share one grid cell, so the cell is as tall as the taller
+   of the two and the sheet does not jump when the mode switches. */
+.document-signature-sheet-mode--type {
+  display: grid;
+}
+
+.document-signature-sheet-mode--type > * {
+  grid-area: 1 / 1;
+  min-width: 0;
+}
+
+.document-signature-sheet-mode__floor {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.document-signature-sheet-mode__type {
+  align-self: start;
+}
+
+/* ── Short panels: the sheet stops under the status bar ──────────────────────
+ * The signing sheet is 652 tall (Draw, and Type keeps that height). On the
+ * Galaxy Z Fold 8 cover (416 x 657) it rose to 5px from the top, over the
+ * status bar (measured 2026-11-13); on every other frame Core Lab offers it
+ * clears with room (iPhone Duo closed 26, open 17, Fold main 164, the 844
+ * reference 192). Under the 720 short-panel line the panel stops at the status
+ * bar plus Spacing/24, the Demo screens sheet's own top, and the one element
+ * that gives ground is the pad's drawing area (step 1 of the order of
+ * concessions: it is space, not task information), 256 to 190 on the Fold
+ * cover. The title, the consent, Draw / Type, Clear canvas, Confirm and
+ * continue and Core's 34 safe area keep their size. Type keeps the field and
+ * the preview whole: only the invisible Draw floor gives way. Outside the
+ * query not one declaration exists, so the reference is untouched. */
+@container pcs-screen (max-height: 720px) {
+  .document-signature-screen .prizma-screen-layout__sheet-panel {
+    max-height: calc(100% - var(--pcs-status-bar, 47px) - var(--prizma-spacing-24));
+    display: flex;
+    flex-direction: column;
+  }
+
+  .document-signature-screen .prizma-screen-layout__sheet-panel .prizma-bottom-sheet,
+  .document-signature-screen .prizma-screen-layout__sheet-panel .prizma-bottom-sheet__content,
+  .document-signature-screen .prizma-screen-layout__sheet-panel .prizma-bottom-sheet__body,
+  .document-signature-screen .document-signature-sheet-body,
+  .document-signature-screen .document-signature-sheet-mode,
+  .document-signature-screen .document-signature-sheet-mode .prizma-signature-pad,
+  .document-signature-screen .document-signature-sheet-mode .prizma-signature-pad__canvas-wrapper {
+    flex: 0 1 auto;
+    min-height: 0;
+  }
+
+  .document-signature-screen .prizma-screen-layout__sheet-panel .prizma-bottom-sheet__body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .document-signature-screen .prizma-bottom-sheet__content > :not(.prizma-bottom-sheet__body),
+  .document-signature-screen .document-signature-sheet-body > :not(.document-signature-sheet-mode) {
+    flex-shrink: 0;
+  }
+
+  /* The grid cell may be shorter than the invisible Draw copy it holds. */
+  .document-signature-screen .document-signature-sheet-mode--type {
+    grid-template-rows: minmax(0, auto);
+  }
+}
+
+/* ── The sheet's motion (2026-11-13) ─────────────────────────────────────────
+   Interactive only (`--moving` is set when the screen is live; static spec
+   cards stay still, as ScreenLayout's sheet rules intend). Core's Sheet/Motion
+   tokens and Core's own keyframes (`prizma-sheet-scrim-in/out`,
+   `prizma-sheet-slide-in/out` in bottom-sheet.css), as Core's presenter does: the scrim fades
+   in and the panel rises on Enter + Decelerate, and both leave on Exit +
+   Accelerate. Nothing moves under reduced motion. */
+.document-signature-sheet-scrim--moving {
+  animation: prizma-sheet-scrim-in var(--prizma-sheet-motion-enter-duration) var(--prizma-sheet-motion-enter-easing) both;
+}
+.document-signature-sheet-panel--moving {
+  animation: prizma-sheet-slide-in var(--prizma-sheet-motion-enter-duration) var(--prizma-sheet-motion-enter-easing) both;
+}
+.document-signature-sheet-scrim--moving.is-closing {
+  animation: prizma-sheet-scrim-out var(--prizma-sheet-motion-exit-duration) var(--prizma-sheet-motion-exit-easing) both;
+}
+.document-signature-sheet-panel--moving.is-closing {
+  animation: prizma-sheet-slide-out var(--prizma-sheet-motion-exit-duration) var(--prizma-sheet-motion-exit-easing) both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .document-signature-sheet-scrim--moving,
+  .document-signature-sheet-panel--moving { animation: none; }
+}

package/dist/DocumentSignatureReviewScreen.d.ts

@@ -0,0 +1,88 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DocumentSignatureState, DocumentSignatureStrings } from './DocumentSignatureStrings';
+import './ScreenLayout.css';
+import './ElectronicSignatureLayout.css';
+import './DocumentSignatureLayout.css';
+/** One document to read and sign. Runtime DATA the host supplies, never copy
+ *  the design system owns (the same slot contract as Electronic Signature's
+ *  `document`). `content` is plain `<h4>` / `<p>` markup: the viewer's frame
+ *  supplies the typography. */
+export interface DocumentSignatureDocument {
+    title: string;
+    content: ReactNode;
+}
+/** What the person signed with, reported on Confirm and continue. */
+export type DocumentSignatureSignature = {
+    method: 'draw';
+} | {
+    method: 'type';
+    name: string;
+};
+export interface DocumentSignatureReviewScreenProps extends Omit<PrizmaFormScreenProps, 'progress' | 'title' | 'subtitle' | 'ctaLabel' | 'ctaDisabled' | 'ctaLoading' | 'ctaLoadingLabel' | 'linkLabel' | 'linkDisabled' | 'linkContent' | 'verifiedLabel' | 'navLabel' | 'children' | 'fieldsOffset' | 'fieldsGap' | 'scrollFields' | 'fieldsAlign' | 'overlay'> {
+    /** Module copy. */
+    strings: DocumentSignatureStrings;
+    /** Every document to sign, in reading order. One or more. */
+    documents: DocumentSignatureDocument[];
+    /** The pose to draw (and, when `interactive`, the pose to start from). */
+    state?: DocumentSignatureState;
+    /** The name in the field for `state="type"`. */
+    typedName?: string;
+    /**
+     * Run the screen: the Stepper follows the scroll, the Scroll pill moves the
+     * viewer on, reaching the end of the last document turns Sign on AND opens
+     * the sheet (once), Sign reopens it after a dismiss, the Draw / Type switch
+     * clears the other mode, and Confirm and continue reports the signature. Off (the default), every pose is fixed by
+     * `state`, so a spec card always renders the same frame.
+     */
+    interactive?: boolean;
+    /**
+     * `PrizmaSignaturePad.onCanvasReady`: the host's drawing engine, Core's
+     * documented division of labour (the pad ships the chrome, not the ink). For
+     * `state="drawn"` a spec host paints a specimen stroke here.
+     */
+    onCanvasReady?: (canvas: HTMLCanvasElement) => void;
+    /** Confirm and continue was pressed with a signature on the sheet. */
+    onSignatureConfirm?: (signature: DocumentSignatureSignature) => void;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    /** Emits `cta` on Confirm and continue. Sign is handled inside the screen. */
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Document Electronic Signature — read every document and sign them once, on
+ * ONE screen. Option B of the `read-and-sign-in-one-screen` exploration,
+ * decided with the owner (Elena, 2026-11-12), built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * Core only, used as shipped:
+ *
+ *  - `PrizmaFormScreen`: logo nav, "Review and sign", the Sign CTA (disabled
+ *    until the reader reaches the end of the last document: consent needs
+ *    proof the documents were read) and the verified tag.
+ *  - `PrizmaStepper`, one segment per document, following the one being read,
+ *    `Completed` once everything is read, with its `caption` ("Document 1 of
+ *    2", then "All documents read") naming the bar.
+ *  - Every document in ONE scrolling viewer, Electronic Signature's own frame
+ *    (`.electronic-signature-document`), one after the other with no divider:
+ *    the count lives on the Stepper. One document: no Stepper.
+ *  - `PrizmaScrollPill` ("Scroll to sign") in its `PrizmaScrollPillDock`, the
+ *    viewer's last child, while there is reading left. A tap scrolls about 80%
+ *    of the viewer; it unmounts once the end is reached.
+ *  - `PrizmaBottomSheetContent` (dialog), "Add your signature": the consent as
+ *    its subtitle; the body opens with `PrizmaSegmentedControl` (Draw / Type),
+ *    then `PrizmaSignaturePad`, or `PrizmaTextField` with
+ *    `PrizmaSignaturePreview` under it; its Button group holds only Confirm
+ *    and continue, bottom bar on.
+ *
+ * The sheet rides the archetype's `overlay` slot (scrim + panel from
+ * `ScreenLayout.css`, the Reusability / Biometric Consent contract), not
+ * `PrizmaBottomSheet`'s presenter: the presenter portals to `document.body`,
+ * which escapes the 390 x 844 frame a spec card and a prototype draw in.
+ *
+ * Nothing new: the only module CSS is layout glue on Core tokens
+ * (`DocumentSignatureLayout.css`).
+ */
+export declare const DocumentSignatureReviewScreen: React.ForwardRefExoticComponent<DocumentSignatureReviewScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DocumentSignatureReviewScreen;

package/dist/DocumentSignatureReviewScreen.js

@@ -0,0 +1,274 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// from the `read-and-sign-in-one-screen` exploration
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { PrizmaBottomSheetContent } from '@incodetech/prizma-core-web/bottom-sheet';
+import { PrizmaScrollPill, PrizmaScrollPillDock } from '@incodetech/prizma-core-web/scroll-pill';
+import { PrizmaSegmentedControl } from '@incodetech/prizma-core-web/segmented-control';
+import { PrizmaSignaturePad } from '@incodetech/prizma-core-web/signature-pad';
+import { PrizmaSignaturePreview } from '@incodetech/prizma-core-web/signature-preview';
+import { PrizmaStepper, } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+import './ElectronicSignatureLayout.css';
+import './DocumentSignatureLayout.css';
+const POSE = {
+    start: { at: 'start', sheet: null },
+    second: { at: 'second', sheet: null },
+    end: { at: 'end', sheet: null },
+    draw: { at: 'end', sheet: 'draw' },
+    drawn: { at: 'end', sheet: 'draw' },
+    type: { at: 'end', sheet: 'type' },
+};
+/** Core's Stepper is authored for 2 to 7 segments. */
+const MAX_STEPS = 7;
+/** One tap on the Scroll pill: about a page, never straight to the end
+ *  (Core's documented action for the pill, `ScrollPill.tsx`). */
+const PILL_STEP = 0.8;
+const count = (template, current, total) => template.replace('{{current}}', String(current)).replace('{{total}}', String(total));
+/**
+ * Document Electronic Signature — read every document and sign them once, on
+ * ONE screen. Option B of the `read-and-sign-in-one-screen` exploration,
+ * decided with the owner (Elena, 2026-11-12), built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * Core only, used as shipped:
+ *
+ *  - `PrizmaFormScreen`: logo nav, "Review and sign", the Sign CTA (disabled
+ *    until the reader reaches the end of the last document: consent needs
+ *    proof the documents were read) and the verified tag.
+ *  - `PrizmaStepper`, one segment per document, following the one being read,
+ *    `Completed` once everything is read, with its `caption` ("Document 1 of
+ *    2", then "All documents read") naming the bar.
+ *  - Every document in ONE scrolling viewer, Electronic Signature's own frame
+ *    (`.electronic-signature-document`), one after the other with no divider:
+ *    the count lives on the Stepper. One document: no Stepper.
+ *  - `PrizmaScrollPill` ("Scroll to sign") in its `PrizmaScrollPillDock`, the
+ *    viewer's last child, while there is reading left. A tap scrolls about 80%
+ *    of the viewer; it unmounts once the end is reached.
+ *  - `PrizmaBottomSheetContent` (dialog), "Add your signature": the consent as
+ *    its subtitle; the body opens with `PrizmaSegmentedControl` (Draw / Type),
+ *    then `PrizmaSignaturePad`, or `PrizmaTextField` with
+ *    `PrizmaSignaturePreview` under it; its Button group holds only Confirm
+ *    and continue, bottom bar on.
+ *
+ * The sheet rides the archetype's `overlay` slot (scrim + panel from
+ * `ScreenLayout.css`, the Reusability / Biometric Consent contract), not
+ * `PrizmaBottomSheet`'s presenter: the presenter portals to `document.body`,
+ * which escapes the 390 x 844 frame a spec card and a prototype draw in.
+ *
+ * Nothing new: the only module CSS is layout glue on Core tokens
+ * (`DocumentSignatureLayout.css`).
+ */
+export const DocumentSignatureReviewScreen = forwardRef(({ strings, documents, state = 'start', typedName = '', interactive = false, onCanvasReady, onSignatureConfirm, screenId = 'document-electronic-signature-review', overrides, onAction, className, ...shell }, ref) => {
+    const pose = POSE[state];
+    const total = documents.length;
+    const many = total > 1;
+    const { review, sign } = strings;
+    const [read, setRead] = useState(pose.at === 'end');
+    const [current, setCurrent] = useState(pose.at === 'start' ? 1 : Math.min(2, total));
+    const [sheet, setSheet] = useState(pose.sheet);
+    // Motion (Elena, 2026-11-13: "refinar el motion cuando llego abajo y
+    // aparece el pop up"). Interactive only; a static spec card never moves.
+    // `closing` keeps the sheet mounted while it slides out. Every duration is
+    // read from Core's Sheet/Motion tokens, never typed here.
+    const [closing, setClosing] = useState(false);
+    const sheetMs = (which) => {
+        if (typeof window === 'undefined')
+            return 0;
+        if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
+            return 0;
+        const v = getComputedStyle(document.documentElement).getPropertyValue(`--prizma-sheet-motion-${which}-duration`).trim();
+        const n = parseFloat(v);
+        return Number.isFinite(n) ? (v.endsWith('ms') ? n : n * 1000) : 0;
+    };
+    const [mode, setMode] = useState(pose.sheet === 'type' ? 'type' : 'draw');
+    const [inked, setInked] = useState(state === 'drawn');
+    const [name, setName] = useState(state === 'type' ? typedName : '');
+    const [padKey, setPadKey] = useState(0);
+    const viewer = useRef(null);
+    const panel = useRef(null);
+    const panelId = useId();
+    // A new pose from the host restarts the screen from it.
+    useEffect(() => {
+        setRead(pose.at === 'end');
+        setCurrent(pose.at === 'start' ? 1 : pose.at === 'second' ? Math.min(2, total) : total);
+        setSheet(pose.sheet);
+        setMode(pose.sheet === 'type' ? 'type' : 'draw');
+        setInked(state === 'drawn');
+        setName(state === 'type' ? typedName : '');
+    }, [state, typedName, total, pose.at, pose.sheet]);
+    // Which document is being read (the one crossing the top third of the
+    // viewer), and whether the end of the last one was reached. Offsets, not
+    // bounding boxes: a spec card scales the frame with a CSS transform, and
+    // the viewer is the sections' offset parent (DocumentSignatureLayout.css).
+    const measure = useCallback(() => {
+        const v = viewer.current;
+        // A viewer that has not laid out yet reads as "already at the end" and
+        // would unlock Sign before anything was read.
+        if (!v || !interactive || v.clientHeight < 40)
+            return;
+        let at = 1;
+        v.querySelectorAll('[data-doc]').forEach((d, i) => {
+            if (d.offsetTop - v.scrollTop <= v.clientHeight * 0.3)
+                at = i + 1;
+        });
+        setCurrent(at);
+        if (v.scrollTop + v.clientHeight >= v.scrollHeight - 2) {
+            // Reaching the end opens the sheet by itself, once (Elena,
+            // 2026-11-12); Sign reopens it after a dismiss.
+            // A beat first, one Sheet/Motion/Enter long: the scroll settles and
+            // the Stepper's "All documents read" lands before the sheet rises, so
+            // the two changes read one after the other instead of at once.
+            setRead((was) => {
+                if (!was)
+                    window.setTimeout(() => setSheet((cur) => cur ?? mode), sheetMs('enter'));
+                return true;
+            });
+        }
+    }, [interactive, mode]);
+    // Place the viewer for the pose: the top, the start of document 2, or the end.
+    useLayoutEffect(() => {
+        const v = viewer.current;
+        if (!v)
+            return;
+        if (pose.at === 'end')
+            v.scrollTop = v.scrollHeight;
+        else if (pose.at === 'second') {
+            const d2 = v.querySelector('[data-doc="2"]');
+            v.scrollTop = d2 ? d2.offsetTop : 0;
+        }
+        else
+            v.scrollTop = 0;
+    }, [pose.at, total]);
+    // Measure again once the viewer has its real height.
+    useEffect(() => {
+        const v = viewer.current;
+        if (!v || !interactive || typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(() => measure());
+        ro.observe(v);
+        return () => ro.disconnect();
+    }, [interactive, measure]);
+    // Focus moves into the sheet when it opens (it is a modal dialog).
+    useEffect(() => {
+        if (interactive && sheet)
+            panel.current?.focus();
+    }, [interactive, sheet]);
+    const ready = mode === 'draw' ? inked : name.trim().length > 1;
+    // Sign reopens it the same way the end of the documents opens it (Elena,
+    // 2026-11-13): the same Sheet/Motion/Enter beat, then the same rise.
+    const openSheet = () => {
+        if (!interactive || !read)
+            return;
+        window.setTimeout(() => setSheet((cur) => cur ?? mode), sheetMs('enter'));
+    };
+    // Close with Core's exit curve: the sheet slides down, then unmounts.
+    const close = () => {
+        const ms = sheetMs('exit');
+        if (!ms) {
+            setSheet(null);
+            return;
+        }
+        setClosing(true);
+        window.setTimeout(() => {
+            setSheet(null);
+            setClosing(false);
+        }, ms);
+    };
+    const dismiss = () => {
+        if (!interactive)
+            return;
+        close();
+        viewer.current?.focus();
+    };
+    const confirm = () => {
+        if (!ready)
+            return;
+        onSignatureConfirm?.(mode === 'draw' ? { method: 'draw' } : { method: 'type', name: name.trim() });
+        onAction?.({ type: 'cta', screenId });
+        if (interactive)
+            close();
+    };
+    // Switching modes clears what the other mode held (Elena, 2026-11-12:
+    // "clear on switch"), so Confirm only turns on for the signature on screen.
+    const switchMode = (next) => {
+        if (!interactive || next === mode)
+            return;
+        setPadKey((k) => k + 1);
+        setInked(false);
+        setName('');
+        setMode(next);
+        setSheet(next);
+    };
+    const clear = () => {
+        if (!interactive)
+            return;
+        setPadKey((k) => k + 1);
+        setInked(false);
+    };
+    // The pill moves the reader on by about a page. Reaching the end stays a
+    // scroll, so the viewer's own onScroll unlocks Sign, not the pill.
+    const scrollOn = () => {
+        const v = viewer.current;
+        if (!interactive || !v)
+            return;
+        const still = typeof window !== 'undefined' &&
+            window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+        v.scrollBy({ top: v.clientHeight * PILL_STEP, behavior: still ? 'auto' : 'smooth' });
+    };
+    const stepperState = read
+        ? 'Completed'
+        : current <= 1
+            ? 'Start'
+            : Math.min(current, MAX_STEPS);
+    const pad = (ghost) => (_jsx(PrizmaSignaturePad, { isFilled: ghost ? false : inked, isInitials: false, placeholder: sign.placeholder, canvasLabel: sign.canvasLabel, clearLabel: sign.clearLabel, onClear: ghost ? undefined : clear, onCanvasReady: ghost ? undefined : onCanvasReady }, ghost ? 'ghost' : padKey));
+    // The Type body keeps at least the Draw body's height, so the sheet does
+    // not jump when the mode switches (Elena, 2026-11-12). The exploration
+    // measured the Draw body in JS; here an invisible copy of the pad shares the
+    // Type body's grid cell, so the floor holds on a static spec card too.
+    // Layout glue, not a component: `visibility: hidden` keeps it out of the
+    // tab order and the accessibility tree.
+    const modeBody = mode === 'draw' ? (
+    // The first pointerdown on the canvas is ink: Core's pad flips its own
+    // Clear on it but reports nothing, so the screen hears it bubble up.
+    _jsx("div", { id: panelId, role: "tabpanel", "aria-label": sign.drawLabel, className: "document-signature-sheet-mode", onPointerDown: interactive ? () => setInked(true) : undefined, children: pad(false) })) : (_jsxs("div", { id: panelId, role: "tabpanel", "aria-label": sign.typeLabel, className: "document-signature-sheet-mode document-signature-sheet-mode--type", children: [_jsx("div", { className: "document-signature-sheet-mode__floor", "aria-hidden": "true", inert: '', children: pad(true) }), _jsxs("div", { className: "document-signature-sheet-mode__type", children: [_jsx(PrizmaTextField, { label: sign.nameLabel, ...(interactive ? { value: name, onValueChange: setName } : { defaultValue: name }), autoComplete: "name", autoCapitalize: "words", autoCorrect: "off", spellCheck: false, enterKeyHint: "done", onKeyDown: (e) => {
+                            if (e.key === 'Enter' && ready) {
+                                e.preventDefault();
+                                confirm();
+                            }
+                        } }, interactive ? 'live' : `static-${name}`), _jsx(PrizmaSignaturePreview, { label: sign.previewLabel, name: name, placeholder: sign.previewPlaceholder })] })] }));
+    // Draw / Type sits right under the consent, at the top of the body, where
+    // the exploration's final Option B put it (it replaced the Secondary
+    // "Type your name instead / Draw instead" button).
+    const body = (_jsxs("div", { className: "document-signature-sheet-body", children: [_jsx(PrizmaSegmentedControl, { "aria-label": sign.methodLabel, value: mode, onValueChange: (v) => switchMode(v === 'type' ? 'type' : 'draw'), options: [
+                    { value: 'draw', label: sign.drawLabel, controls: mode === 'draw' ? panelId : undefined },
+                    { value: 'type', label: sign.typeLabel, controls: mode === 'type' ? panelId : undefined },
+                ] }), modeBody] }));
+    const overlay = sheet ? (_jsxs(_Fragment, { children: [_jsx("div", { className: `prizma-screen-layout__sheet-scrim${interactive ? ' document-signature-sheet-scrim--moving' : ''}${closing ? ' is-closing' : ''}`, "aria-hidden": "true", onClick: dismiss }), _jsx("div", { className: `prizma-screen-layout__sheet-panel${interactive ? ' document-signature-sheet-panel--moving' : ''}${closing ? ' is-closing' : ''}`, children: _jsx(PrizmaBottomSheetContent, { ref: panel, variant: "dialog", title: sign.title, subtitle: sign.consent, body: body, showBottomBar: true, onKeyDown: (e) => {
+                        if (e.key === 'Escape')
+                            dismiss();
+                    }, buttonGroupProps: {
+                        orientation: 'vertical-v1',
+                        showPrimary: true,
+                        showSecondary: false,
+                        showTertiary: false,
+                        primaryLabel: sign.confirmLabel,
+                        primaryDisabled: !ready,
+                        onPrimaryClick: confirm,
+                    } }) })] })) : undefined;
+    return (_jsxs(PrizmaFormScreen, { ref: ref, ...shell, className: ['document-signature-screen', className].filter(Boolean).join(' '), title: review.title, fieldsOffset: "12", ctaLabel: review.ctaLabel, ctaDisabled: !read, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, 
+        // Sign is a step inside this screen, not the module's result: it opens
+        // the sheet and reports nothing. Under the sheet's scrim it is inert.
+        onAction: (a) => {
+            if (a.type === 'cta' && !sheet)
+                openSheet();
+        }, overlay: overlay, children: [many ? (_jsx(PrizmaStepper, { steps: Math.min(total, MAX_STEPS), currentState: stepperState, showIcons: false, 
+                // The caption also names the progressbar (Core wires
+                // aria-labelledby when there is no aria-label), so the count is
+                // announced once.
+                caption: read ? review.completedLabel : count(review.documentCount, current, total), completedValueText: review.completedLabel })) : null, _jsxs("div", { ref: viewer, onScroll: interactive ? measure : undefined, className: "electronic-signature-document document-signature-viewer", role: "region", "aria-label": review.documentsLabel, tabIndex: 0, children: [documents.map((d, i) => (_jsxs("section", { "data-doc": i + 1, className: "document-signature-doc", children: [_jsx("h4", { className: "document-signature-doc__title", children: d.title }), d.content] }, `${i}-${d.title}`))), read ? null : (_jsx(PrizmaScrollPillDock, { children: _jsx(PrizmaScrollPill, { label: review.scrollLabel, onClick: scrollOn }) }))] })] }));
+});
+DocumentSignatureReviewScreen.displayName = 'DocumentSignatureReviewScreen';
+export default DocumentSignatureReviewScreen;

package/dist/DocumentSignatureStrings.d.ts

@@ -0,0 +1,82 @@
+import type { ElectronicSignatureStrings } from './ElectronicSignatureStrings';
+/**
+ * The poses the review screen draws, deterministic from props:
+ *
+ *  - `start`  reading document 1, Sign disabled.
+ *  - `second` document 2 reached in the same scroll, Stepper on 2.
+ *  - `end`    every document read, Stepper `Completed`, Sign live.
+ *  - `draw`   the sheet over the read screen, empty pad, Confirm disabled.
+ *  - `drawn`  the sheet with a signature on the pad, Confirm live.
+ *  - `type`   the sheet in type mode; `typedName` fills the field.
+ */
+export type DocumentSignatureState = 'start' | 'second' | 'end' | 'draw' | 'drawn' | 'type';
+export interface DocumentSignatureStrings {
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    /** Accessible name for the logo row. */
+    navLabel: string;
+    /** The review screen: every document in one scrolling viewer. */
+    review: {
+        /** H2 — "Review and sign". */
+        title: string;
+        /** Accessible name for the scrolling viewer — "Documents to sign". */
+        documentsLabel: string;
+        /**
+         * The Stepper's caption while reading, which also names its progressbar —
+         * "Document {{current}} of {{total}}". Both placeholders are replaced by
+         * the screen.
+         */
+        documentCount: string;
+        /**
+         * The Stepper's caption and `aria-valuetext` once every document is read —
+         * "All documents read".
+         */
+        completedLabel: string;
+        /**
+         * Core's Scroll pill over the viewer while there is reading left —
+         * "Scroll to sign". A tap scrolls about 80% of the viewer.
+         */
+        scrollLabel: string;
+        /** Primary CTA — "Sign". Disabled until the end of the last document. */
+        ctaLabel: string;
+    };
+    /** The signing sheet (Core's Bottom sheet, dialog variant). */
+    sign: {
+        /** Sheet title, the same in both modes — "Add your signature". */
+        title: string;
+        /** Accessible name for the Draw / Type Segmented control — "Signature method". */
+        methodLabel: string;
+        /** Segmented control, the draw option — "Draw". */
+        drawLabel: string;
+        /** Segmented control, the type option — "Type". */
+        typeLabel: string;
+        /** Sheet subtitle, the consent — "By confirming, you accept and sign the documents electronically." */
+        consent: string;
+        /** Pad placeholder — "Sign here". */
+        placeholder: string;
+        /** Accessible name for the drawing canvas — "Signature capture area". */
+        canvasLabel: string;
+        /** Core's Clear-canvas link — "Clear canvas". */
+        clearLabel: string;
+        /** Type mode field label — "Full name". */
+        nameLabel: string;
+        /** Core's Signature preview label, under the field — "Preview". */
+        previewLabel: string;
+        /** Signature preview while the field is empty — "Your signature". */
+        previewPlaceholder: string;
+        /** The only button — "Confirm and continue". */
+        confirmLabel: string;
+    };
+    /** The signed verdict, drawn by the shipped `ElectronicSignatureSuccessScreen`. */
+    success: ElectronicSignatureStrings['success'];
+    /** The failure verdict, drawn by the shipped `ElectronicSignatureErrorScreen`. */
+    error: ElectronicSignatureStrings['error'];
+}
+/**
+ * The verdict screens are Electronic Signature's own, reused as shipped
+ * (`ElectronicSignatureSuccessScreen`, `ElectronicSignatureErrorScreen`). They
+ * take that module's strings object and read only its `success` / `error`
+ * slices plus the two chrome labels; this maps the rest from this module's copy
+ * so nothing is left blank and no second copy of a sentence is kept.
+ */
+export declare function documentSignatureResultStrings(strings: DocumentSignatureStrings): ElectronicSignatureStrings;

package/dist/DocumentSignatureStrings.js

@@ -0,0 +1,39 @@
+// from the `read-and-sign-in-one-screen` exploration
+//
+// Document Electronic Signature — the module's whole copy surface.
+//
+// Every string the review-and-sign screen renders lives here, so the screen
+// carries no hardcoded English and a host translates the module by supplying
+// one object (README rule 3, the same contract as `ElectronicSignatureStrings`).
+//
+// Source: the `read-and-sign-in-one-screen` exploration, Option B, decided with
+// the owner (Elena, 2026-11-12). No Figma file yet and no SDK release, so no
+// i18n namespace either: the demo passes the English.
+/**
+ * The verdict screens are Electronic Signature's own, reused as shipped
+ * (`ElectronicSignatureSuccessScreen`, `ElectronicSignatureErrorScreen`). They
+ * take that module's strings object and read only its `success` / `error`
+ * slices plus the two chrome labels; this maps the rest from this module's copy
+ * so nothing is left blank and no second copy of a sentence is kept.
+ */
+export function documentSignatureResultStrings(strings) {
+    return {
+        verifiedLabel: strings.verifiedLabel,
+        navLabel: strings.navLabel,
+        review: {
+            title: strings.review.title,
+            documentLabel: strings.review.documentsLabel,
+            ctaLabel: strings.review.ctaLabel,
+        },
+        draw: {
+            title: strings.sign.title,
+            subtitle: strings.sign.consent,
+            placeholder: strings.sign.placeholder,
+            canvasLabel: strings.sign.canvasLabel,
+            clearLabel: strings.sign.clearLabel,
+            ctaLabel: strings.sign.confirmLabel,
+        },
+        success: strings.success,
+        error: strings.error,
+    };
+}