@myazahq/kyc-sdk-react-native 2.4.0 → 2.5.0

package/src/components/MultiIdProgress.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { resolveIdTypeDefinition } from '../config/idTypes';
+import type { MultiIdPlan } from '../lib/multi-id';
+import type { MultiIdSlot } from '../store/state';
+import { useEffectiveCountry, useKyc, useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { Icon } from './Icon';
+
+// The multi-ID run's position strip: one chip per check, filling in with the
+// picked ID's name as each check commits, the current one highlighted.
+//
+// A PORT of the web SDK's MultiIdProgress. Rendered above the picker, the
+// evidence steps and liveness so a reader always knows which of the run's IDs
+// the screen is about and how many remain — without it a three-ID run is three
+// visits to the same-looking screen with nothing saying which is which.
+
+export function MultiIdProgress({ plan }: { plan: MultiIdPlan }): React.ReactElement {
+  const { colors } = useTheme();
+  const country = useEffectiveCountry();
+  const serverConfig = useKyc((s) => s.serverConfig);
+  const slots: MultiIdSlot[] = useKyc((s) => s.multiIdSlots);
+
+  const labelFor = (idType: string): string => {
+    const row = serverConfig.idTypes.find(
+      (r) => r.country === country && r.idType === idType,
+    );
+    return resolveIdTypeDefinition(country, idType, {
+      label: row?.label,
+      requiresDocumentCapture: row?.requiresDocumentCapture,
+      scanSides: row?.scanSides,
+      supportsNfc: row?.supportsNfc,
+    }).label;
+  };
+
+  return (
+    <View
+      accessibilityLabel={`ID ${Math.min(plan.index + 1, plan.count)} of ${plan.count}`}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.sm,
+        marginBottom: spacing.md,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.backgroundSecondary,
+      }}
+    >
+      {Array.from({ length: plan.count }, (_, i) => {
+        const committed = slots[i];
+        const active = i === plan.index;
+        return (
+          <View
+            key={i}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.sm, minWidth: 0 }}
+          >
+            {i > 0 && (
+              <View
+                style={{
+                  height: 1,
+                  width: 16,
+                  backgroundColor: committed || active ? colors.primary : colors.border,
+                  opacity: committed || active ? 0.5 : 1,
+                }}
+              />
+            )}
+            <View
+              style={{
+                height: 20,
+                width: 20,
+                borderRadius: 10,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: committed ? colors.primary : 'transparent',
+                borderWidth: committed ? 0 : active ? 2 : 1,
+                borderColor: active ? colors.primary : colors.border,
+              }}
+            >
+              {committed ? (
+                <Icon name="check" size={12} color={colors.onPrimary} />
+              ) : (
+                <MyazaText
+                  variant="bodySmall"
+                  color={active ? colors.primary : colors.textMuted}
+                >
+                  {String(i + 1)}
+                </MyazaText>
+              )}
+            </View>
+            <MyazaText
+              variant="bodySmall"
+              color={active ? colors.textDark : colors.textMuted}
+              numberOfLines={1}
+            >
+              {committed ? labelFor(committed.idType) : `ID ${i + 1}`}
+            </MyazaText>
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/MyazaInput.tsx

@@ -39,6 +39,18 @@ export interface MyazaInputProps {
   /** Rendered inside the field, after the text — a unit like "%". Same
    *  bordered-row treatment as `prefix`. */
   suffix?: React.ReactNode;
+  /** Field height override — the results filter runs at 40 where every other
+   *  input is 48, matching the web SDK's h-10 filter beside h-12 inputs. */
+  height?: number;
+  /** Text size override, for the compact filter (web: text-sm = 14). */
+  fontSize?: number;
+  /**
+   * Off for proper-noun fields (company names, registration numbers): iOS
+   * autocorrect rewrites them right before the person submits, so a search
+   * for the company they typed silently becomes a search for a word the
+   * keyboard preferred. Defaults on, like the platform.
+   */
+  autoCorrect?: boolean;
   onFocus?: FocusHandler;
   onBlur?: BlurHandler;
 }
@@ -57,6 +69,9 @@ export function MyazaInput({
   autoFocus = false,
   prefix,
   suffix,
+  height,
+  fontSize,
+  autoCorrect = true,
   onFocus,
   onBlur,
 }: MyazaInputProps): React.ReactElement {
@@ -95,7 +110,7 @@ export function MyazaInput({
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            height: sizing.inputHeight,
+            height: height ?? sizing.inputHeight,
             borderWidth,
             borderColor,
             borderRadius: radius.sm,
@@ -112,12 +127,14 @@ export function MyazaInput({
             placeholderTextColor={colors.textMuted}
             keyboardType={keyboardType}
             autoCapitalize={autoCapitalize}
+            autoCorrect={autoCorrect}
+            spellCheck={autoCorrect}
             maxLength={maxLength}
             editable={editable}
             autoFocus={autoFocus}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: 16, fontFamily }}
+            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: fontSize ?? 16, fontFamily }}
           />
           {suffix ? <View style={{ width: spacing.sm }} /> : null}
           {suffix}
@@ -130,13 +147,15 @@ export function MyazaInput({
           placeholderTextColor={colors.textMuted}
           keyboardType={keyboardType}
           autoCapitalize={autoCapitalize}
+          autoCorrect={autoCorrect}
+          spellCheck={autoCorrect}
           maxLength={maxLength}
           editable={editable}
           autoFocus={autoFocus}
           onFocus={handleFocus}
           onBlur={handleBlur}
           style={{
-            height: sizing.inputHeight,
+            height: height ?? sizing.inputHeight,
             borderWidth,
             borderColor,
             borderRadius: radius.sm,
@@ -145,7 +164,7 @@ export function MyazaInput({
             paddingHorizontal: spacing.md + (2 - borderWidth),
             color: colors.textDark,
             backgroundColor: colors.background,
-            fontSize: 16,
+            fontSize: fontSize ?? 16,
             fontFamily,
           }}
         />

package/src/components/MyazaSelect.tsx

@@ -147,7 +147,8 @@ export function MyazaSelect<T extends string | number>({
               style={{
                 fontWeight: '700',
                 paddingHorizontal: spacing.md,
-                paddingTop: spacing.md,
+                // Tight under the handle, the way the system sheet titles sit.
+                paddingTop: spacing.xs,
                 paddingBottom: spacing.sm,
               }}
             >

package/src/components/OwnershipSlider.tsx

@@ -0,0 +1,102 @@
+import React, { useRef, useState } from 'react';
+import { PanResponder, View } from 'react-native';
+
+import { useTheme } from './runtime';
+
+// ─── A 0–100 slider for the ownership field ──────────────────────────────────
+//
+// The fast coarse gesture beside the exact box: dragging writes whole numbers
+// into the same field, and a register stake like 48.42 is still typed (no
+// thumb lands on it). Dependency-free — a track, a fill and a thumb under one
+// PanResponder — because a native slider module is a heavy import for one
+// field. Mirrors the web SDK's range input under the same box.
+
+const THUMB = 22;
+const TRACK = 5;
+
+export function OwnershipSlider({
+  value,
+  onChange,
+}: {
+  /** The current stake 0–100; an undeclared one rests the thumb at 0. */
+  value: number;
+  onChange: (next: number) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [width, setWidth] = useState(0);
+  const widthRef = useRef(0);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const setFromX = (x: number): void => {
+    const usable = widthRef.current - THUMB;
+    if (usable <= 0) return;
+    const ratio = (x - THUMB / 2) / usable;
+    const next = Math.round(Math.min(1, Math.max(0, ratio)) * 100);
+    onChangeRef.current(next);
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (e) => setFromX(e.nativeEvent.locationX),
+      onPanResponderMove: (e) => setFromX(e.nativeEvent.locationX),
+    }),
+  ).current;
+
+  const clamped = Math.min(100, Math.max(0, value));
+  const left = width > 0 ? (clamped / 100) * (width - THUMB) : 0;
+
+  return (
+    <View
+      {...pan.panHandlers}
+      onLayout={(e) => {
+        widthRef.current = e.nativeEvent.layout.width;
+        setWidth(e.nativeEvent.layout.width);
+      }}
+      accessibilityRole="adjustable"
+      accessibilityLabel="Ownership percentage"
+      accessibilityValue={{ min: 0, max: 100, now: clamped }}
+      // Tall hit area; the visible track stays thin.
+      style={{ height: 32, justifyContent: 'center' }}
+    >
+      <View
+        style={{
+          height: TRACK,
+          borderRadius: TRACK / 2,
+          backgroundColor: colors.border,
+        }}
+      />
+      <View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          left: 0,
+          width: left + THUMB / 2,
+          height: TRACK,
+          borderRadius: TRACK / 2,
+          backgroundColor: colors.primary,
+        }}
+      />
+      <View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          left,
+          width: THUMB,
+          height: THUMB,
+          borderRadius: THUMB / 2,
+          backgroundColor: colors.primary,
+          borderWidth: 3,
+          borderColor: colors.background,
+          shadowColor: '#000',
+          shadowOpacity: 0.15,
+          shadowRadius: 3,
+          shadowOffset: { width: 0, height: 1 },
+          elevation: 2,
+        }}
+      />
+    </View>
+  );
+}

package/src/components/PhoneNumberInput.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
 import {
@@ -34,13 +34,25 @@ import { COUNTRY_NAMES } from '../config/countryNames.g';
 // ---------------------------------------------------------------------------
 
 export function PhoneNumberInput({
+  value,
   defaultCountry,
   disabled,
+  autoFocus = false,
   onChange,
 }: {
+  /**
+   * E.164 seed. The field itself stays uncontrolled (the formatter owns the
+   * text), but a value arriving after mount — the register's, prefilled a
+   * moment later — has to reach the field, or we hold a number the applicant
+   * can neither see nor correct and submit it as though they gave it.
+   */
+  value?: string;
   /** Seeds the picker (ISO-2). Falls back to NG. */
   defaultCountry?: string;
   disabled?: boolean;
+  /** Focus + keyboard on mount. Opt-in: right for a single-field OTP screen,
+   *  wrong for a row in a company-profile form. */
+  autoFocus?: boolean;
   /** Fires on every edit with the E.164 value ('' until parseable) + validity. */
   onChange: (value: { e164: string; isValid: boolean; country: string }) => void;
 }): React.ReactElement {
@@ -64,11 +76,32 @@ export function PhoneNumberInput({
     [],
   );
 
-  const seed = (defaultCountry?.toUpperCase() ?? 'NG') as CountryCode;
+  // A supplied number decides its OWN dial code — it is a fact, where the
+  // country prop is a guess. Falls through to the guess when there is no
+  // number or it cannot be parsed.
+  const supplied = value ? parsePhoneNumberFromString(value) : null;
+  const seed = (supplied?.country ??
+    defaultCountry?.toUpperCase() ??
+    'NG') as CountryCode;
   const [country, setCountry] = useState<CountryCode>(
     options.some((o) => o.code === seed) ? seed : ('NG' as CountryCode),
   );
-  const [national, setNational] = useState('');
+  const [national, setNational] = useState(() =>
+    supplied ? formatNationalNumber(supplied.nationalNumber, seed) : '',
+  );
+  // A number that arrives AFTER mount — the register's, prefilled a moment
+  // later — has to reach the field. Seeding is one-way and keyed on the value,
+  // so the applicant's own edits are never fought.
+  const seededRef = useRef(value ?? '');
+  useEffect(() => {
+    if (!value || value === seededRef.current) return;
+    seededRef.current = value;
+    const parsed = parsePhoneNumberFromString(value);
+    if (!parsed) return;
+    const next = (parsed.country ?? country) as CountryCode;
+    setCountry(next);
+    setNational(formatNationalNumber(parsed.nationalNumber, next));
+  }, [value, country]);
   const [open, setOpen] = useState(false);
 
   const selected = options.find((o) => o.code === country);
@@ -132,7 +165,7 @@ export function PhoneNumberInput({
             placeholder="803 123 4567"
             keyboardType="phone-pad"
             editable={!disabled}
-            autoFocus
+            autoFocus={autoFocus}
           />
         </View>
       </View>

package/src/components/StaggerIn.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated } from 'react-native';
+
+/**
+ * Whether the OS asks for reduced motion. Shared by the entrance/skeleton
+ * animations so a system-level preference silences all of them at once.
+ */
+export function useReduceMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    void AccessibilityInfo.isReduceMotionEnabled().then((r) => {
+      if (!cancelled) setReduced(r);
+    });
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduced);
+    return () => {
+      cancelled = true;
+      sub.remove();
+    };
+  }, []);
+  return reduced;
+}
+
+/**
+ * Rise-and-fade entrance for list items, mirroring the web SDK's staggered
+ * `animate-slide-up`: each card enters in reading order, ~45ms apart, so a
+ * resolved list reads as the skeleton before it settling into place rather
+ * than a screen swap. Reduced motion renders children statically.
+ */
+export function StaggerIn({
+  delayMs = 0,
+  children,
+}: {
+  delayMs?: number;
+  children: React.ReactNode;
+}): React.ReactElement {
+  const reduceMotion = useReduceMotion();
+  const progress = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: 300,
+      delay: delayMs,
+      useNativeDriver: true,
+    }).start();
+  }, [progress, delayMs]);
+
+  if (reduceMotion) return <>{children}</>;
+
+  return (
+    <Animated.View
+      style={{
+        opacity: progress,
+        transform: [
+          { translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [16, 0] }) },
+        ],
+      }}
+    >
+      {children}
+    </Animated.View>
+  );
+}

package/src/components/StepView.tsx

@@ -18,6 +18,8 @@ import { BusinessKeyPeopleStep } from '../screens/BusinessKeyPeopleStep';
 import { BusinessDocumentsStep } from '../screens/BusinessDocumentsStep';
 import { ApplicantRoleStep } from '../screens/ApplicantRoleStep';
 import { NfcStep } from '../screens/NfcStep';
+import { MultiIdProgress } from './MultiIdProgress';
+import { useMultiIdPlan } from '../lib/use-multi-id-plan';
 
 // ---------------------------------------------------------------------------
 // The step router — which screen a step renders.
@@ -26,7 +28,31 @@ import { NfcStep } from '../screens/NfcStep';
 // and the step order, and nothing else.
 // ---------------------------------------------------------------------------
 
+/** The steps a multi-ID run walks once PER ID — the ones whose screen is about
+ *  one particular check and therefore needs the position strip above it. */
+const MULTI_ID_STEPS: readonly KYCStep[] = [
+  'id-type',
+  'id-input',
+  'document-capture',
+  'nfc',
+  'liveness',
+];
+
+/** Wraps a step's screen with the multi-ID position strip when a run is active. */
 export function StepView({ step, onClose }: { step: KYCStep; onClose: () => void }): React.ReactElement {
+  const plan = useMultiIdPlan();
+  if (plan && MULTI_ID_STEPS.includes(step)) {
+    return (
+      <View style={{ flex: 1 }}>
+        <MultiIdProgress plan={plan} />
+        <View style={{ flex: 1 }}>{stepScreen(step, onClose)}</View>
+      </View>
+    );
+  }
+  return stepScreen(step, onClose);
+}
+
+function stepScreen(step: KYCStep, onClose: () => void): React.ReactElement {
   switch (step) {
     case 'consent':
       return <ConsentStep />;

package/src/components/glass/FloatingSheet.tsx

@@ -8,9 +8,8 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import { initialWindowMetrics } from 'react-native-safe-area-context';
-
-import { radius, spacing } from '../../config/theme';
+import { spacing } from '../../config/theme';
+import { displayCornerRadius } from '../../lib/screen-corners';
 import { useTheme } from '../runtime';
 import { GlassIconButton } from '../GlassIconButton';
 import { GlassSheet } from './GlassSheet';
@@ -18,10 +17,12 @@ import { GlassSheet } from './GlassSheet';
 // ---------------------------------------------------------------------------
 // FloatingSheet — the shell every bottom sheet in the SDK sits in.
 //
-// It floats: inset from all three edges and rounded on every corner, rather
-// than welded to the bottom of the screen. That is what the glass is for. A
-// panel flush to the edge reads as part of the screen, so seeing through it
-// says nothing; a detached one reads as a layer that has risen above the flow.
+// A floating card: detached from the screen's edges by a TIGHT gap (8px), all
+// four corners rounded, a grab handle centred under a whisper of padding. The
+// gap is deliberately small — the earlier float swam in margin and spent
+// screen height a phone does not have, while welding it flush read as a
+// different surface from the SDK's glass language. The 8px is what says
+// "card above the page" without costing content room.
 //
 // It offers three ways out, because a sheet that can only be dismissed one way
 // is a trap for whichever user does not find that way:
@@ -34,6 +35,28 @@ import { GlassSheet } from './GlassSheet';
 // apart on handle size, dismiss threshold and safe-area maths.
 // ---------------------------------------------------------------------------
 
+/** Detached from the screen edges by a tight, even gap. */
+const FLOAT_GAP = spacing.sm;
+
+/**
+ * The float's corner radius is PRESENTATION GRAMMAR, not branding — and it is
+ * computed the way Apple computes nested corners: CONCENTRIC with the display,
+ * i.e. the device's own corner radius minus the gap, so the sheet's curve runs
+ * parallel to the phone's. Square-cornered screens have no curve to be
+ * concentric with, so they keep the share-sheet look instead. Never the
+ * brand-scaled `radius` tokens: an org whose buttons are 4px square should not
+ * get a squared-off bottom sheet.
+ */
+const screenRadius = displayCornerRadius();
+const SHEET_RADIUS = screenRadius > 0 ? Math.max(screenRadius - FLOAT_GAP, 16) : 38;
+
+/**
+ * The corner curve eats into the header, so the close button's inset SCALES
+ * with the radius — ~0.42·R is where the system sheet sits its own X. A fixed
+ * inset that cleared 38pt corners sat ON the curve at a 16-class phone's 47.
+ */
+const CLOSE_INSET = Math.max(14, Math.round(SHEET_RADIUS * 0.42));
+
 /** How far down a drag must travel before release dismisses instead of springing back. */
 const DISMISS_DISTANCE = 90;
 /** A flick dismisses at any distance — velocity is intent, distance is only evidence of it. */
@@ -121,14 +144,16 @@ export function FloatingSheet({
     }),
   ).current;
 
-  // Read once at module init like the rest of the SDK: these sheets are modal,
-  // so there is no provider above them to read live insets from.
-  const safeBottom = initialWindowMetrics?.insets?.bottom ?? 0;
-
+  // A TIGHT float: detached from the edges by a whisper (8px), not welded to
+  // them and not swimming in margin. The gap is what says "card above the
+  // page" — any more of it and the sheet loses height it needs for content.
   const panel: ViewStyle = {
-    marginHorizontal: spacing.md,
-    // Clear the home indicator, and never sit flush even where there is none.
-    marginBottom: bottomOffset + Math.max(safeBottom, spacing.md),
+    marginHorizontal: FLOAT_GAP,
+    // The CARD sits low, like the system share sheet: a tight 8px off the
+    // screen edge, with the home indicator riding ON the card. Reserving the
+    // whole safe-area under it left the sheet hovering mid-air. The CONTENT
+    // still clears the indicator — that inset moves INSIDE the card (below).
+    marginBottom: bottomOffset > 0 ? bottomOffset + FLOAT_GAP : FLOAT_GAP,
   };
 
   return (
@@ -147,7 +172,18 @@ export function FloatingSheet({
         <Animated.View style={[panel, { transform: [{ translateY }] }]}>
           {/* Swallows taps so only the backdrop dismisses. */}
           <Pressable onPress={() => undefined}>
-            <GlassSheet style={{ borderRadius: radius.xl, maxHeight, overflow: 'hidden' }}>
+            <GlassSheet
+              style={{
+                // Floating card: all four corners round, not just the top
+                // pair — at the SYSTEM sheet's radius, never the brand scale.
+                borderRadius: SHEET_RADIUS,
+                maxHeight,
+                // No bottom padding, deliberately: a scrolling body runs all
+                // the way to the lip and is CLIPPED by the curve — content
+                // sliding under the rounded edge, the way the system does it.
+                overflow: 'hidden',
+              }}
+            >
               {/* The drag lives on the header, NOT the whole panel: bodies here
                   scroll, and a panel-wide responder fights the list for every
                   downward swipe. */}
@@ -155,9 +191,15 @@ export function FloatingSheet({
                 {...pan.panHandlers}
                 style={{
                   flexDirection: 'row',
-                  alignItems: 'center',
-                  paddingTop: spacing.sm,
-                  paddingHorizontal: spacing.sm,
+                  // TOP, not centre. Centred, the handle sits against the
+                  // tallest child, so the close button's height decided how far
+                  // down the panel the grabber sat. Each now hangs off the top
+                  // with its own offset, which is what puts the handle at the
+                  // lip where a grabber belongs. Matches the Flutter sheet.
+                  alignItems: 'flex-start',
+                  // Radius-proportional (CLOSE_INSET): deep concentric corners
+                  // need the button further from the edges than shallow ones.
+                  paddingHorizontal: CLOSE_INSET,
                 }}
               >
                 <View style={{ flex: 1 }} />
@@ -165,12 +207,22 @@ export function FloatingSheet({
                 <View
                   style={{
                     width: 36,
-                    height: 4,
-                    borderRadius: 2,
+                    height: 5,
+                    borderRadius: 2.5,
+                    marginTop: 8,
                     backgroundColor: colors.border,
                   }}
                 />
-                <View style={{ flex: 1, alignItems: 'flex-end' }}>
+                {/* Pushed down as well as in: the button's own box already
+                    holds the icon off its edges, so set flush to the top it
+                    hung off the corner instead of tucking into it. */}
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: 'flex-end',
+                    marginTop: Math.min(16, Math.max(6, CLOSE_INSET - 6)),
+                  }}
+                >
                   <GlassIconButton
                     icon="close"
                     onPress={onClose}

package/src/components/glass/GlassSheet.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../runtime';
 import { GlassSurface } from './GlassSurface';
@@ -29,9 +29,21 @@ export interface GlassSheetProps {
 }
 
 export function GlassSheet({ children, style }: GlassSheetProps): React.ReactElement {
-  const { colors } = useTheme();
+  const { colors, mode } = useTheme();
   return (
     <GlassSurface glassStyle="regular" fallbackColor={colors.background} style={style}>
+      {/* A WHISPER of scrim between the glass and the content — the sheet
+          must stay glass (the flow showing through is the point). This only
+          takes the edge off a strongly tinted flow so body text keeps
+          contrast; anything critical sits on its own alert panel besides.
+          Slightly heavier in light mode, where the wash was worst. */}
+      <View
+        pointerEvents="none"
+        style={[
+          StyleSheet.absoluteFill,
+          { backgroundColor: colors.background, opacity: mode === 'light' ? 0.35 : 0.18 },
+        ]}
+      />
       {children}
     </GlassSurface>
   );

package/src/components/stepHeaderMeta.tsx

@@ -47,7 +47,9 @@ export function stepHeaderMeta(
       case 'id-type':
         return { title: 'Select ID Type', description: "Choose the type of identification document you'd like to use." };
       case 'id-input':
-        return { title: 'Enter Your Details', description: `Provide your ${label} for verification.` };
+        // The number is all this step asks for. The name comes from the
+        // integrator (mount props / the session), never the applicant.
+        return { title: `Enter your ${label}`, description: 'We’ll check this against the official record.' };
       case 'document-capture':
         // Phase-aware title/description live in the header (synced from the
         // capture screen via `documentCapturePhase`) — mirrors Flutter.