@incodetech/prizma-core-screens 0.2.22 → 0.2.26

package/src/DocumentSignatureReviewScreen.tsx

@@ -0,0 +1,517 @@
+// from the `read-and-sign-in-one-screen` exploration
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} 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,
+  type PrizmaStepperState,
+  type PrizmaStepperSteps,
+} from '@incodetech/prizma-core-web/stepper';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaFormScreen, 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;
+}
+
+type Sheet = null | 'draw' | 'type';
+
+const POSE: Record<DocumentSignatureState, { at: 'start' | 'second' | 'end'; sheet: Sheet }> = {
+  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: string, current: number, total: number) =>
+  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<
+  HTMLDivElement,
+  DocumentSignatureReviewScreenProps
+>(
+  (
+    {
+      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<Sheet>(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: 'enter' | 'exit') => {
+      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<'draw' | 'type'>(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<HTMLDivElement | null>(null);
+    const panel = useRef<HTMLDivElement | null>(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<HTMLElement>('[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<HTMLElement>('[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: 'draw' | 'type') => {
+      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: PrizmaStepperState = read
+      ? 'Completed'
+      : current <= 1
+        ? 'Start'
+        : (Math.min(current, MAX_STEPS) as PrizmaStepperState);
+
+    const pad = (ghost: boolean) => (
+      <PrizmaSignaturePad
+        key={ghost ? 'ghost' : padKey}
+        isFilled={ghost ? false : inked}
+        isInitials={false}
+        placeholder={sign.placeholder}
+        canvasLabel={sign.canvasLabel}
+        clearLabel={sign.clearLabel}
+        onClear={ghost ? undefined : clear}
+        onCanvasReady={ghost ? undefined : onCanvasReady}
+      />
+    );
+
+    // 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.
+        <div
+          id={panelId}
+          role="tabpanel"
+          aria-label={sign.drawLabel}
+          className="document-signature-sheet-mode"
+          onPointerDown={interactive ? () => setInked(true) : undefined}
+        >
+          {pad(false)}
+        </div>
+      ) : (
+        <div
+          id={panelId}
+          role="tabpanel"
+          aria-label={sign.typeLabel}
+          className="document-signature-sheet-mode document-signature-sheet-mode--type"
+        >
+          {/* `inert`: the copy only holds the Draw height. Hidden is not
+              enough: its Clear canvas button was still picked up by Core
+              Lab's focus highlight and drawn over Confirm (Elena's bug,
+              2026-11-13). Inert takes it out of focus and hit-testing. */}
+          <div className="document-signature-sheet-mode__floor" aria-hidden="true" {...{ inert: '' }}>
+            {pad(true)}
+          </div>
+          <div className="document-signature-sheet-mode__type">
+            {/* Set up for a name: the phone offers the person's own, capitalises
+                each word, does not autocorrect it, and Return confirms.
+                Static states pass `defaultValue`, never `readOnly`: Core paints
+                a read-only field on the disabled grey surface, and the canvas
+                showed the Type sheet's field grey (Elena, 2026-11-13). Same
+                rule as CurpGenerateScreen and DemoScreensRedirectScreen. The
+                key re-mounts it when a state changes the name. */}
+            <PrizmaTextField
+              key={interactive ? 'live' : `static-${name}`}
+              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();
+                }
+              }}
+            />
+            {/* The typed name shown back as the signature, the exploration's
+                "tabs with cursive" page. Core's preview truncates a long name
+                with an ellipsis on its own. */}
+            <PrizmaSignaturePreview
+              label={sign.previewLabel}
+              name={name}
+              placeholder={sign.previewPlaceholder}
+            />
+          </div>
+        </div>
+      );
+
+    // 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 = (
+      <div className="document-signature-sheet-body">
+        <PrizmaSegmentedControl
+          aria-label={sign.methodLabel}
+          value={mode}
+          onValueChange={(v: string) => 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}
+      </div>
+    );
+
+    const overlay = sheet ? (
+      <>
+        <div
+          className={`prizma-screen-layout__sheet-scrim${interactive ? ' document-signature-sheet-scrim--moving' : ''}${closing ? ' is-closing' : ''}`}
+          aria-hidden="true"
+          onClick={dismiss}
+        />
+        <div className={`prizma-screen-layout__sheet-panel${interactive ? ' document-signature-sheet-panel--moving' : ''}${closing ? ' is-closing' : ''}`}>
+          <PrizmaBottomSheetContent
+            ref={panel}
+            variant="dialog"
+            title={sign.title}
+            subtitle={sign.consent}
+            body={body}
+            showBottomBar
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') dismiss();
+            }}
+            buttonGroupProps={{
+              orientation: 'vertical-v1',
+              showPrimary: true,
+              showSecondary: false,
+              showTertiary: false,
+              primaryLabel: sign.confirmLabel,
+              primaryDisabled: !ready,
+              onPrimaryClick: confirm,
+            }}
+          />
+        </div>
+      </>
+    ) : undefined;
+
+    return (
+      <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}
+      >
+        {many ? (
+          <PrizmaStepper
+            steps={Math.min(total, MAX_STEPS) as PrizmaStepperSteps}
+            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}
+        <div
+          ref={viewer}
+          onScroll={interactive ? measure : undefined}
+          className="electronic-signature-document document-signature-viewer"
+          role="region"
+          aria-label={review.documentsLabel}
+          tabIndex={0}
+        >
+          {documents.map((d, i) => (
+            <section key={`${i}-${d.title}`} data-doc={i + 1} className="document-signature-doc">
+              <h4 className="document-signature-doc__title">{d.title}</h4>
+              {d.content}
+            </section>
+          ))}
+          {/* Last child of the scroll area, Core's placement contract: sticky
+              at the bottom, only the pill takes pointer events. Gone once the
+              end is reached, so it never covers the last line. */}
+          {read ? null : (
+            <PrizmaScrollPillDock>
+              <PrizmaScrollPill label={review.scrollLabel} onClick={scrollOn} />
+            </PrizmaScrollPillDock>
+          )}
+        </div>
+      </PrizmaFormScreen>
+    );
+  },
+);
+DocumentSignatureReviewScreen.displayName = 'DocumentSignatureReviewScreen';
+
+export default DocumentSignatureReviewScreen;

package/src/DocumentSignatureStrings.ts

@@ -0,0 +1,122 @@
+// 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.
+
+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 function documentSignatureResultStrings(
+  strings: DocumentSignatureStrings,
+): ElectronicSignatureStrings {
+  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,
+  };
+}