@incodetech/prizma-core-screens 0.2.24 → 0.2.26

package/dist/ElectronicSignatureDrawScreen.d.ts

@@ -1,13 +1,28 @@
 import React from 'react';
 import { type PrizmaFormScreenProps } from './FormScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
-import type { ElectronicSignatureDrawState, ElectronicSignatureStrings } from './ElectronicSignatureStrings';
+import type { ElectronicSignatureDrawState, ElectronicSignatureMethod, ElectronicSignatureStrings } from './ElectronicSignatureStrings';
 import './ScreenLayout.css';
+import './ElectronicSignatureLayout.css';
 export interface ElectronicSignatureDrawScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'ctaDisabled' | 'verifiedLabel' | 'children' | 'navLabel' | 'linkLabel' | 'linkContent'> {
     /** Module copy — this screen reads the `draw` slice. */
     strings: ElectronicSignatureStrings;
-    /** Which purple section to render: `draw` (empty) or `signed`. Default `draw`. */
+    /**
+     * Which pose to render: `draw` (empty pad), `signed` (ink on the pad) or
+     * `type` (type mode, `typedName` in the field). Default `draw`.
+     */
     state?: ElectronicSignatureDrawState;
+    /**
+     * Draw or Type, when the host owns it. Left out, the screen keeps its own,
+     * starting from `state`. Only read when `strings.type` is supplied.
+     */
+    method?: ElectronicSignatureMethod;
+    /** Called when the person switches between Draw and Type. */
+    onMethodChange?: (method: ElectronicSignatureMethod) => void;
+    /** The typed name, when the host owns it. Left out, the screen keeps its own. */
+    typedName?: string;
+    /** Called on every change to the typed name. */
+    onTypedNameChange?: (name: string) => void;
     /**
      * Core's own extension point for the drawing engine
      * (`PrizmaSignaturePad.onCanvasReady`: "consumers wire their drawing engine

package/dist/ElectronicSignatureDrawScreen.js

@@ -1,9 +1,13 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useState } from 'react';
+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 { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaFormScreen } from './FormScreen';
 import './ScreenLayout.css';
+import './ElectronicSignatureLayout.css';
 /**
  * Electronic Signature — the signature-pad screen, built on the Form archetype
  * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
@@ -36,18 +40,62 @@ import './ScreenLayout.css';
  * in-flight treatment, if this module ever gains one, rides the CTA rather than
  * the field (#PI-5) — Core explicitly ships no Loading state for the pad.
  */
-export const ElectronicSignatureDrawScreen = forwardRef(({ strings, state = 'draw', onCanvasReady, screenId = `electronic-signature-${state}`, overrides, onAction, ...shell }, ref) => {
+export const ElectronicSignatureDrawScreen = forwardRef(({ strings, state = 'draw', method: methodProp, onMethodChange, typedName: typedNameProp, onTypedNameChange, onCanvasReady, screenId = `electronic-signature-${state}`, overrides, onAction, ...shell }, ref) => {
     const signed = state === 'signed';
-    return (_jsx(PrizmaFormScreen, { ref: ref, title: strings.draw.title, subtitle: strings.draw.subtitle, ctaLabel: strings.draw.ctaLabel, 
+    const alt = strings.type;
+    // Draw / Type: controlled when the host passes `method` / `typedName`,
+    // otherwise the screen holds them, starting from the pose.
+    const [ownMethod, setOwnMethod] = useState(state === 'type' ? 'type' : 'draw');
+    const [ownName, setOwnName] = useState(state === 'type' ? typedNameProp ?? '' : '');
+    useEffect(() => {
+        setOwnMethod(state === 'type' ? 'type' : 'draw');
+    }, [state]);
+    const method = alt ? methodProp ?? ownMethod : 'draw';
+    const name = typedNameProp ?? ownName;
+    const typing = method === 'type';
+    const [padKey, setPadKey] = useState(0);
+    const panelId = useId();
+    const setName = (next) => {
+        if (typedNameProp === undefined)
+            setOwnName(next);
+        onTypedNameChange?.(next);
+    };
+    // Switching clears what the other mode held, the Document Electronic
+    // Signature rule (Elena, 2026-11-12), so Done only turns on for the
+    // signature on screen. A fresh pad is a remount of Core's pad.
+    const switchMethod = (next) => {
+        if (next === method)
+            return;
+        setPadKey((k) => k + 1);
+        setName('');
+        if (methodProp === undefined)
+            setOwnMethod(next);
+        onMethodChange?.(next);
+    };
+    const ready = typing ? name.trim().length > 1 : signed;
+    const title = typing && alt ? alt.title : strings.draw.title;
+    const subtitle = typing && alt ? alt.subtitle : strings.draw.subtitle;
+    const pad = (ghost) => (_jsx(PrizmaSignaturePad, { isFilled: ghost ? false : signed, 
+        /* Full-signature sub-type, not the initials one. */
+        isInitials: false, placeholder: strings.draw.placeholder, canvasLabel: strings.draw.canvasLabel, clearLabel: strings.draw.clearLabel, 
+        /* Clearing the canvas is a different flow from submitting it, so it
+           emits its own event rather than collapsing into the CTA
+           (DEVIATIONS #PI-10). */
+        onClear: ghost ? undefined : () => onAction?.({ type: 'secondary', screenId }), onCanvasReady: ghost ? undefined : onCanvasReady }, ghost ? 'ghost' : padKey));
+    // No `type` copy: the pad-only screen the module shipped with.
+    const middle = !alt ? (pad(false)) : (_jsxs("div", { className: "electronic-signature-method", children: [_jsx(PrizmaSegmentedControl, { "aria-label": alt.methodLabel, value: method, onValueChange: (v) => switchMethod(v === 'type' ? 'type' : 'draw'), options: [
+                    { value: 'draw', label: alt.drawLabel, controls: !typing ? panelId : undefined },
+                    { value: 'type', label: alt.typeLabel, controls: typing ? panelId : undefined },
+                ] }), !typing ? (_jsx("div", { id: panelId, role: "tabpanel", "aria-label": alt.drawLabel, className: "electronic-signature-method__body", children: pad(false) })) : (_jsxs("div", { id: panelId, role: "tabpanel", "aria-label": alt.typeLabel, className: "electronic-signature-method__body electronic-signature-method__body--type", children: [_jsx("div", { className: "electronic-signature-method__floor", "aria-hidden": "true", inert: '', children: pad(true) }), _jsxs("div", { className: "electronic-signature-method__type", children: [_jsx(PrizmaTextField, { label: alt.nameLabel, value: name, onValueChange: setName, autoComplete: "name", autoCapitalize: "words", autoCorrect: "off", spellCheck: false, enterKeyHint: "done", onKeyDown: (e) => {
+                                    if (e.key === 'Enter' && ready) {
+                                        e.preventDefault();
+                                        onAction?.({ type: 'cta', screenId });
+                                    }
+                                } }), _jsx(PrizmaSignaturePreview, { label: alt.previewLabel, name: name, placeholder: alt.previewPlaceholder })] })] }))] }));
+    return (_jsx(PrizmaFormScreen, { ref: ref, title: title, subtitle: subtitle, ctaLabel: strings.draw.ctaLabel, 
         /* `eSign.draw` draws `Done` on Button/Primary/Surface/Disabled — there
-           is nothing to submit until the canvas has ink. */
-        ctaDisabled: !signed, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaSignaturePad, { isFilled: signed, 
-            /* Full-signature sub-type, not the initials one. */
-            isInitials: false, placeholder: strings.draw.placeholder, canvasLabel: strings.draw.canvasLabel, clearLabel: strings.draw.clearLabel, 
-            /* Clearing the canvas is a different flow from submitting it, so it
-               emits its own event rather than collapsing into the CTA
-               (DEVIATIONS #PI-10). */
-            onClear: () => onAction?.({ type: 'secondary', screenId }), onCanvasReady: onCanvasReady }) }));
+           is nothing to submit until the canvas has ink, or a name is typed. */
+        ctaDisabled: !ready, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: middle }));
 });
 ElectronicSignatureDrawScreen.displayName = 'ElectronicSignatureDrawScreen';
 export default ElectronicSignatureDrawScreen;

package/dist/ElectronicSignatureLayout.css

@@ -84,3 +84,35 @@
   letter-spacing: var(--prizma-headline-h5-letter-spacing);
   color: var(--prizma-text-body-800-primary);
 }
+
+/* ── Draw / Type (`strings.type` supplied) ───────────────────────────────────
+ * Core's Segmented control over the mode's body, the same composition as
+ * Document Electronic Signature's sheet (`.document-signature-sheet-body`):
+ * Spacing/8 between the control and the body, and between field and preview.
+ * Type mode keeps the Draw body's height: an inert copy of Core's pad shares
+ * the grid cell with the field + preview, so the CTA does not jump. */
+.electronic-signature-method,
+.electronic-signature-method__body,
+.electronic-signature-method__type {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-8);
+}
+
+.electronic-signature-method__body--type {
+  display: grid;
+}
+
+.electronic-signature-method__body--type > * {
+  grid-area: 1 / 1;
+  min-width: 0;
+}
+
+.electronic-signature-method__floor {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.electronic-signature-method__type {
+  align-self: start;
+}

package/dist/ElectronicSignatureStrings.d.ts

@@ -3,7 +3,9 @@
  * placeholder visible, both actions inert) and `eSign.signed` (ink on the
  * canvas, Clear live, Done live). One screen, one Figma-drawn axis.
  */
-export type ElectronicSignatureDrawState = 'draw' | 'signed';
+export type ElectronicSignatureDrawState = 'draw' | 'signed' | 'type';
+/** How the person signs: drawing on the pad, or typing their name. */
+export type ElectronicSignatureMethod = 'draw' | 'type';
 export interface ElectronicSignatureStrings {
     /** "verified by" attribution copy for the footer tag. */
     verifiedLabel: string;
@@ -33,6 +35,29 @@ export interface ElectronicSignatureStrings {
         /** Primary CTA — "Done". */
         ctaLabel: string;
     };
+    /**
+     * Draw / Type — the accessible alternative to the pad (Elena, 2026-11-13,
+     * the same switch as Document Electronic Signature's sheet). Optional: a
+     * host that leaves it out keeps the pad-only screen it shipped with.
+     */
+    type?: {
+        /** 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;
+        /** H2 in type mode — "Type your name". */
+        title: string;
+        /** H5 in type mode — "Use your full name". */
+        subtitle: string;
+        /** 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;
+    };
     /** `eSign.success` — the verdict, reported with no action. */
     success: {
         /** H2 — "Signed successfully!". */

package/dist/FaceCaptureCapturingScreen.js

@@ -103,7 +103,7 @@ export const FaceCaptureCapturingScreen = forwardRef(({ strings, state = 'initia
     const offer = strings.extendTime;
     // No copy, no notice: a host that has not localized this must not get
     // English, and the flag alone is not permission to invent it.
-    const notice = extendTime && offer ? (_jsxs(PrizmaSnackbar, { state: "neutral", isMultiline: true, 
+    const notice = extendTime && offer ? (_jsxs(PrizmaSnackbar, { state: "neutral", 
         // Assertive on purpose — see the live-region note in this file's
         // header. The component default here would be `status`.
         role: "alert", linkLabel: offer.linkLabel, onLinkClick: onExtendTime, children: [_jsx("strong", { children: offer.title }), _jsx("br", {}), offer.description] })) : undefined;

package/dist/IdCaptureStageScreen.js

@@ -121,7 +121,7 @@ export const IdCaptureStageScreen = forwardRef(({ strings, documentType = 'id',
     // No copy, no notice: a host that has not localized this must not get
     // English, and the flag alone is not permission to invent it.
     const band = notice ??
-        (extendTime && offer ? (_jsxs(PrizmaSnackbar, { state: "neutral", isMultiline: true, 
+        (extendTime && offer ? (_jsxs(PrizmaSnackbar, { state: "neutral", 
             // Assertive on purpose — a polite region can queue behind the
             // stage's own state announcements and be read out after the 20 s
             // has already run out. FaceCaptureCapturingScreen's header has the

package/dist/index.d.ts

@@ -81,11 +81,13 @@ export { CurpGenerateScreen, type CurpGenerateScreenProps } from './CurpGenerate
 export { CurpConfirmScreen, type CurpConfirmScreenProps } from './CurpConfirmScreen';
 export { CurpProcessingScreen, type CurpProcessingScreenProps } from './CurpProcessingScreen';
 export { CurpResultScreen, type CurpResultScreenProps } from './CurpResultScreen';
-export { type ElectronicSignatureDrawState, type ElectronicSignatureStrings } from './ElectronicSignatureStrings';
+export { type ElectronicSignatureDrawState, type ElectronicSignatureMethod, type ElectronicSignatureStrings, } from './ElectronicSignatureStrings';
 export { ElectronicSignatureDrawScreen, type ElectronicSignatureDrawScreenProps } from './ElectronicSignatureDrawScreen';
 export { ElectronicSignatureErrorScreen, type ElectronicSignatureErrorScreenProps } from './ElectronicSignatureErrorScreen';
 export { ElectronicSignatureReviewScreen, type ElectronicSignatureReviewScreenProps } from './ElectronicSignatureReviewScreen';
 export { ElectronicSignatureSuccessScreen, type ElectronicSignatureSuccessScreenProps } from './ElectronicSignatureSuccessScreen';
+export { documentSignatureResultStrings, type DocumentSignatureState, type DocumentSignatureStrings, } from './DocumentSignatureStrings';
+export { DocumentSignatureReviewScreen, type DocumentSignatureDocument, type DocumentSignatureReviewScreenProps, type DocumentSignatureSignature, } from './DocumentSignatureReviewScreen';
 export { type QualifiedSignatureAcceptVariant, type QualifiedSignatureAcceptState, type QualifiedSignatureDocumentVariant, type QualifiedSignatureResultVariant, type QualifiedSignatureProcessingVariant, type QualifiedSignatureTerm, type QualifiedSignatureAcceptCopy, type QualifiedSignatureStrings, } from './QualifiedSignatureStrings';
 export { QualifiedSignatureAcceptScreen, type QualifiedSignatureAcceptScreenProps } from './QualifiedSignatureAcceptScreen';
 export { QualifiedSignatureDocumentScreen, type QualifiedSignatureDocumentScreenProps } from './QualifiedSignatureDocumentScreen';

package/dist/index.js

@@ -1,3 +1,4 @@
+// from the `read-and-sign-in-one-screen` exploration
 // @incodetech/prizma-core-screens — barrel.
 //
 // Foundation: shell, nav, capture overlay, and the seven screen archetypes
@@ -79,6 +80,9 @@ export { ElectronicSignatureDrawScreen } from './ElectronicSignatureDrawScreen';
 export { ElectronicSignatureErrorScreen } from './ElectronicSignatureErrorScreen';
 export { ElectronicSignatureReviewScreen } from './ElectronicSignatureReviewScreen';
 export { ElectronicSignatureSuccessScreen } from './ElectronicSignatureSuccessScreen';
+// Document Electronic Signature: from the `read-and-sign-in-one-screen` exploration.
+export { documentSignatureResultStrings, } from './DocumentSignatureStrings';
+export { DocumentSignatureReviewScreen, } from './DocumentSignatureReviewScreen';
 export { QualifiedSignatureAcceptScreen } from './QualifiedSignatureAcceptScreen';
 export { QualifiedSignatureDocumentScreen } from './QualifiedSignatureDocumentScreen';
 export { QualifiedSignatureProcessingScreen } from './QualifiedSignatureProcessingScreen';

package/dist/styles.css

@@ -18,6 +18,7 @@
 @import './DemoScreensLayout.css';
 @import './DigitalIdProvidersLayout.css';
 @import './DocumentCaptureLayout.css';
+@import './DocumentSignatureLayout.css';
 @import './EkycLayout.css';
 @import './ElectronicSignatureLayout.css';
 @import './FaceCaptureLayout.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/prizma-core-screens",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "description": "Prizma Design System — SDK module screens: composed, responsive, brand-themeable React screens built from @incodetech/prizma-core-web.",
   "license": "UNLICENSED",
   "type": "module",
@@ -215,6 +215,11 @@
       "types": "./dist/DocumentCaptureTutorialScreen.d.ts",
       "import": "./dist/DocumentCaptureTutorialScreen.js"
     },
+    "./document-signature-review-screen": {
+      "source": "./src/DocumentSignatureReviewScreen.tsx",
+      "types": "./dist/DocumentSignatureReviewScreen.d.ts",
+      "import": "./dist/DocumentSignatureReviewScreen.js"
+    },
     "./ekyb-address-details-screen": {
       "source": "./src/EkybAddressDetailsScreen.tsx",
       "types": "./dist/EkybAddressDetailsScreen.d.ts",
@@ -787,6 +792,7 @@
     "./demo-screens-layout.css": "./dist/DemoScreensLayout.css",
     "./digital-id-providers-layout.css": "./dist/DigitalIdProvidersLayout.css",
     "./document-capture-layout.css": "./dist/DocumentCaptureLayout.css",
+    "./document-signature-layout.css": "./dist/DocumentSignatureLayout.css",
     "./ekyc-layout.css": "./dist/EkycLayout.css",
     "./electronic-signature-layout.css": "./dist/ElectronicSignatureLayout.css",
     "./face-capture-layout.css": "./dist/FaceCaptureLayout.css",
@@ -847,8 +853,8 @@
   },
   "dependencies": {
     "@incodetech/prizma-core-icons": "^0.4.0",
-    "@incodetech/prizma-core-tokens": "^0.20.0",
-    "@incodetech/prizma-core-web": "^0.20.0"
+    "@incodetech/prizma-core-tokens": "^0.21.0",
+    "@incodetech/prizma-core-web": "^0.21.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

package/src/DemoScreensConfigSheetScreen.tsx

@@ -62,7 +62,7 @@ export const DemoScreensConfigSheetScreen = forwardRef<HTMLDivElement, DemoScree
       <PrizmaScreenShell ref={ref} data-screen-id={screenId} {...shell}>
         {state === 'saved' ? (
           <div className="demo-screens-toast">
-            <PrizmaSnackbar state="success" contentResizing="fill" isMultiline>
+            <PrizmaSnackbar state="success" contentResizing="fill">
               {s.savedSnackbar}
             </PrizmaSnackbar>
           </div>

package/src/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; }
+}