@smileid/usesmileid 12.0.0-beta01

package/src/presentation/screen/use_smile_id_capture_screen.tsx

@@ -0,0 +1,635 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { StatusBar, StyleSheet, View } from "react-native";
+import {
+  Camera,
+  useCameraDevice,
+  useCameraFormat,
+  useCameraPermission,
+  useFrameProcessor,
+  VisionCameraProxy,
+} from "react-native-vision-camera";
+import { Worklets } from "react-native-worklets-core";
+import * as ImagePicker from "expo-image-picker";
+import { FrameProcessorPluginNotRegisteredException } from "@smileid/usesmileid_bridge";
+import type {
+  DocumentAnalyzer,
+  FaceAnalyzer,
+} from "@smileid/usesmileid_platform_interface";
+import type { CaptureReadyEvent, ScanState } from "@smileid/usesmileid_bridge";
+import {
+  CaptureReadyEventKind,
+  DocumentSide,
+  ScanStateType,
+} from "@smileid/usesmileid_bridge";
+import { CaptureType } from "../../core/models/ml_config";
+import type { DocumentCaptureMode } from "../../core/models/document_capture_mode";
+import { resampleImportedDocument } from "../../camera/document_image_pipeline";
+import { defaultLightTheme, type UseSmileIDTheme } from "../theme/theme";
+import {
+  UseSmileIDCaptureContent,
+  type UseSmileIDCaptureContentState,
+} from "../components/use_smile_id_capture_content";
+import { UseSmileIDCrashReporting } from "@smileid/usesmileid_bridge";
+import { ForceMaxBrightness } from "../utils/force_max_brightness";
+import { CameraDefaults } from "../../camera/camera_defaults";
+import type { SiKey } from "../../l10n/strings_en";
+import { DocumentImageOrigin } from "../../metadata/document_image_origin";
+import { useSmileIDFrameStream } from "../../camera/use_smile_id_frame_stream";
+import { orientationToDegrees } from "../../camera/orientation_degrees";
+import {
+  isSessionBoundary,
+  mapCaptureUiState,
+  preCaptureUiState,
+  type UseSmileIDCaptureUiState,
+} from "./helpers/capture_ui_state";
+import { useDebouncedFeedbackKey } from "./helpers/use_debounced_feedback_key";
+import {
+  essTurnHaptic,
+  triggerEssTurnHaptic,
+} from "./helpers/ess_turn_haptics";
+
+export type UseSmileIDCaptureScreenProps = {
+  readonly captureType: CaptureType;
+
+  /**
+   * Per-frame analyzer driving the state machine. Lifecycle is the
+   * partner's responsibility (the orchestrated wrapper handles
+   * configure/close for DSL-built flows).
+   */
+  readonly analyzer: FaceAnalyzer | DocumentAnalyzer;
+
+  /** Fires on Start tap; frames begin streaming to the analyzer after. */
+  readonly onStartCapture?: () => void;
+
+  /**
+   * Fires when the state machine reaches `finished` and `flush()` has
+   * settled, with every `CaptureReadyEvent` of the session (one
+   * `"selfie"` + N `"liveness"` for face, one `"document"` for document).
+   */
+  readonly onCaptureComplete?: (events: readonly CaptureReadyEvent[]) => void;
+  /** Records how a document side was produced (auto/manual/gallery), fired just before delivery. */
+  readonly onDocumentOrigin?: (origin: DocumentImageOrigin) => void;
+
+  /** Fires when the state machine reaches `"timeout"`; the screen stops streaming. */
+  readonly onCaptureTimeout?: (state: ScanState) => void;
+
+  readonly onBack?: () => void;
+  readonly showAttribution?: boolean;
+
+  /** Keeps the oval rim neutral through CAPTURING/PROCESSING — ESS has no green oval treatment. */
+  readonly enableEnhancedLiveness?: boolean;
+
+  /**
+   * Document aspect ratio (width / height) for the document capture
+   * guide cutout. Ignored for selfie capture. Omitted ⇒ the overlay's
+   * default ID-1 ratio.
+   */
+  readonly knownIdAspectRatio?: number;
+
+  /**
+   * Document capture mode. `manualCapture` surfaces the shutter immediately;
+   * `autoCaptureWithManualFallback` surfaces it after `activateManualAfterMs`;
+   * `autoCapture` never surfaces it. Ignored for selfie capture.
+   */
+  readonly captureMode?: DocumentCaptureMode;
+  /** Show the gallery-upload control (document capture). Ignored for selfie. */
+  readonly allowGalleryUpload?: boolean;
+  /**
+   * Active document side — names the imported (manual / gallery) artifact
+   * `document_front.jpg` / `document_back.jpg`. Ignored for selfie capture.
+   */
+  readonly documentSide?: DocumentSide;
+  /** Close/cancel the whole flow (document capture chrome — top-right X). */
+  readonly onClose?: () => void;
+
+  readonly startButton?: (props: {
+    onClick: () => void;
+    enabled: boolean;
+  }) => ReactNode;
+  readonly theme?: UseSmileIDTheme;
+};
+
+/**
+ * Capture route — owns the camera session, frame streaming, analyzer
+ * results, and effects; derives an immutable `UseSmileIDCaptureContentState`
+ * per scan-state update and delegates rendering to the stateless
+ * `UseSmileIDCaptureContent` (camera preview injected through its slot).
+ *
+ * Flow: Start → frame processor runs the native plugin per frame
+ * (`useSmileIDFrameStream` validates results) → on `finished`, `flush()`
+ * then `onCaptureComplete`; on `timeout`, `onCaptureTimeout`.
+ */
+export function UseSmileIDCaptureScreen(props: UseSmileIDCaptureScreenProps) {
+  const theme = props.theme ?? defaultLightTheme;
+  const showAttribution = props.showAttribution ?? true;
+  const enableEnhancedLiveness = props.enableEnhancedLiveness ?? false;
+  // Literal union — useCameraDevice takes the lowercase string directly.
+  const cameraFacing: "front" | "back" =
+    props.captureType === CaptureType.selfie ? "front" : "back";
+
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const device = useCameraDevice(cameraFacing);
+  // Still-capture handle for the document manual shutter (`takePhoto()`).
+  const cameraRef = useRef<Camera>(null);
+  // Pin an explicit format: the "highest supported" heuristic can pick 4K,
+  // stalling the frame-processor thread and stuttering the pipeline.
+  const format = useCameraFormat(device, [
+    // 4:3 first: geometry checks + smile heuristic are calibrated on 4:3;
+    // 16:9 skews normalized landmark ratios and shifts every threshold.
+    { videoAspectRatio: 4 / 3 },
+    {
+      videoResolution: {
+        width: CameraDefaults.analysisTargetResolution.width,
+        height: CameraDefaults.analysisTargetResolution.height,
+      },
+    },
+    { fps: CameraDefaults.analysisTargetFps },
+  ]);
+  const requestedRef = useRef(false);
+  useEffect(() => {
+    if (!hasPermission && !requestedRef.current) {
+      requestedRef.current = true;
+      void requestPermission();
+    }
+  }, [hasPermission, requestPermission]);
+
+  // Per-frame scan state drives the overlay + feedback bubble.
+  const [scanState, setScanState] = useState<ScanState>({
+    type: ScanStateType.Initial,
+  });
+  const [streaming, setStreaming] = useState<boolean>(false);
+  // Bumped on every Start tap to reset the feedback debouncer.
+  const [sessionEpoch, setSessionEpoch] = useState<number>(0);
+  // Overlay stays IDLE (gray) until the first analyzed frame — eagerly
+  // forcing INSTRUCTION here causes a green flash.
+  const [hasAnalyzedFrame, setHasAnalyzedFrame] = useState<boolean>(false);
+  // Fallback shutter, revealed after activateManualAfterMs. Resets per mount.
+  const [manualShutterRevealed, setManualShutterRevealed] = useState(false);
+  // True while a manual/gallery delivery is in flight — disables the controls.
+  const [deliveringDocument, setDeliveringDocument] = useState(false);
+  // Transient gallery-import error; overrides the live chip, self-clears so the user can re-pick.
+  const [galleryErrorKey, setGalleryErrorKey] = useState<SiKey | null>(null);
+  useEffect(() => {
+    if (galleryErrorKey === null) return;
+    const timer = setTimeout(() => setGalleryErrorKey(null), 3000);
+    return () => clearTimeout(timer);
+  }, [galleryErrorKey]);
+
+  // Accumulate events across frames in a ref (not state) so an event
+  // arrival never triggers a re-render; the final onCaptureComplete
+  // payload then carries every event the session emitted.
+  const capturedEventsRef = useRef<CaptureReadyEvent[]>([]);
+  // Exactly-once latch: a frame can land while flush() is in flight, so
+  // this keeps flush()/onCaptureComplete from firing twice per session.
+  const completedRef = useRef<boolean>(false);
+  // Raw (not committed) frame state for the session-boundary check, so
+  // transitions the 1% bucketing skips committing are still seen.
+  const previousScanStateRef = useRef<ScanState | null>(null);
+
+  const onStartCapture = props.onStartCapture;
+  const handleStart = useCallback(() => {
+    if (streaming || completedRef.current) return;
+    onStartCapture?.();
+    setSessionEpoch((epoch) => epoch + 1);
+    // A new session must not compare against the old session's last state.
+    previousScanStateRef.current = null;
+    setStreaming(true);
+  }, [streaming, onStartCapture]);
+
+  const analyzer = props.analyzer;
+  const onCaptureComplete = props.onCaptureComplete;
+  const onDocumentOrigin = props.onDocumentOrigin;
+  const onCaptureTimeout = props.onCaptureTimeout;
+
+  const captureMode = props.captureMode;
+  const allowGalleryUpload = props.allowGalleryUpload ?? false;
+  const documentSide = props.documentSide ?? DocumentSide.Front;
+  const isDocumentCapture = props.captureType === CaptureType.document;
+
+  // Reveal the fallback shutter after the delay once streaming begins.
+  // Bound to `streaming`: any capture clears it, tearing this effect down
+  // and clearing the timer, so it can't fire post-capture or leak.
+  const fallbackDelayMs =
+    captureMode?.kind === "autoCaptureWithManualFallback"
+      ? captureMode.activateManualAfterMs
+      : null;
+  useEffect(() => {
+    if (!streaming || fallbackDelayMs === null) return;
+    const timer = setTimeout(() => {
+      setManualShutterRevealed(true);
+    }, fallbackDelayMs);
+    return () => clearTimeout(timer);
+  }, [streaming, fallbackDelayMs]);
+
+  // Manual shutter: capture a still and deliver via the SAME
+  // onCaptureComplete path as auto-capture. completedRef is claimed before
+  // the async work so a concurrent auto-capture is dropped — exactly one delivery.
+  const handleManualShutter = useCallback(() => {
+    if (completedRef.current) return;
+    const camera = cameraRef.current;
+    if (camera === null) return;
+    completedRef.current = true;
+    setStreaming(false);
+    setDeliveringDocument(true);
+    void (async () => {
+      try {
+        const photo = await camera.takePhoto();
+        const sourceUri = photo.path.startsWith("file://")
+          ? photo.path
+          : `file://${photo.path}`;
+        const processedUri = await resampleImportedDocument(
+          { uri: sourceUri, width: photo.width, height: photo.height },
+          documentSide,
+        );
+        onDocumentOrigin?.(DocumentImageOrigin.CameraManualCapture);
+        onCaptureComplete?.([
+          {
+            kind: CaptureReadyEventKind.Document,
+            captureIndex: 0,
+            url: processedUri,
+          },
+        ]);
+      } catch (error) {
+        UseSmileIDCrashReporting.captureException(
+          error instanceof Error ? error : new Error(String(error)),
+        );
+        // Release the gate so the user can retry, and resume auto-capture.
+        completedRef.current = false;
+        setDeliveringDocument(false);
+        setStreaming(true);
+      }
+    })();
+  }, [onCaptureComplete, onDocumentOrigin, documentSide]);
+
+  // Gallery upload: pause auto-capture while the picker is open (so it can't
+  // settle behind the modal), import via the same resample + delivery path.
+  // Cancel / permission-denial resumes auto-capture.
+  const handleGalleryPick = useCallback(() => {
+    if (completedRef.current) return;
+    setStreaming(false);
+    setDeliveringDocument(true);
+    void (async () => {
+      try {
+        const permission =
+          await ImagePicker.requestMediaLibraryPermissionsAsync();
+        if (!permission.granted) {
+          setDeliveringDocument(false);
+          // Don't resume if a concurrent auto-capture already claimed delivery.
+          if (!completedRef.current) setStreaming(true);
+          return;
+        }
+        const result = await ImagePicker.launchImageLibraryAsync({
+          mediaTypes: ["images"],
+          allowsMultipleSelection: false,
+          quality: 1,
+        });
+        const asset = result.canceled ? undefined : result.assets[0];
+        if (asset === undefined) {
+          setDeliveringDocument(false);
+          // Don't resume if a concurrent auto-capture already claimed delivery.
+          if (!completedRef.current) setStreaming(true);
+          return;
+        }
+        // Reject too-small images before claiming the latch — upscaling them
+        // yields unreadable documents. Show a chip and resume auto-capture.
+        if (
+          asset.width !== undefined &&
+          asset.height !== undefined &&
+          Math.min(asset.width, asset.height) <
+            CameraDefaults.minGalleryDocumentDimensionPx
+        ) {
+          setGalleryErrorKey("si_document_gallery_image_too_small");
+          setDeliveringDocument(false);
+          // Don't resume if a concurrent auto-capture already claimed delivery.
+          if (!completedRef.current) setStreaming(true);
+          return;
+        }
+        if (completedRef.current) return; // auto-capture won the race
+        completedRef.current = true;
+        const processedUri = await resampleImportedDocument(
+          { uri: asset.uri, width: asset.width, height: asset.height },
+          documentSide,
+        );
+        onDocumentOrigin?.(DocumentImageOrigin.Gallery);
+        onCaptureComplete?.([
+          {
+            kind: CaptureReadyEventKind.Document,
+            captureIndex: 0,
+            url: processedUri,
+          },
+        ]);
+      } catch (error) {
+        UseSmileIDCrashReporting.captureException(
+          error instanceof Error ? error : new Error(String(error)),
+        );
+        setGalleryErrorKey("si_document_gallery_image_failed");
+        completedRef.current = false;
+        setDeliveringDocument(false);
+        setStreaming(true);
+      }
+    })();
+  }, [onCaptureComplete, onDocumentOrigin, documentSide]);
+
+  // Auto-start document capture (document idle has no Start button; selfie
+  // keeps its). Fires once per mount, so each side / retake auto-starts.
+  const autoStartedRef = useRef(false);
+  // Latest-ref so a new `handleStart` identity (it depends on `streaming`)
+  // doesn't re-run this effect; auto-start fires once per mount.
+  const handleStartRef = useRef(handleStart);
+  handleStartRef.current = handleStart;
+  useEffect(() => {
+    if (!isDocumentCapture || autoStartedRef.current || completedRef.current) {
+      return;
+    }
+    autoStartedRef.current = true;
+    handleStartRef.current();
+  }, [isDocumentCapture]);
+
+  // useSmileIDFrameStream overloads on FaceAnalyzer vs DocumentAnalyzer;
+  // the cast routes through the FaceAnalyzer overload — sound because the
+  // DocumentAnalyzer shape produces an identical wire surface, and the
+  // runtime pairing is guaranteed by captureType.
+  const frameStream = useSmileIDFrameStream(
+    (streaming ? analyzer : null) as FaceAnalyzer | null,
+    (result) => {
+      // A session boundary resets the debouncer so suppressed guidance can re-surface.
+      const previousScanState = previousScanStateRef.current;
+      if (
+        previousScanState !== null &&
+        isSessionBoundary(previousScanState, result.state)
+      ) {
+        setSessionEpoch((epoch) => epoch + 1);
+      }
+      // Haptic on a completed head turn (light between, success on the
+      // final, never on reset). Driven off the raw per-frame transition
+      // so 1% bucketing can't drop it; fired imperatively (no re-render).
+      if (previousScanState !== null) {
+        const haptic = essTurnHaptic(previousScanState, result.state);
+        if (haptic !== null) triggerEssTurnHaptic(haptic);
+      }
+      previousScanStateRef.current = result.state;
+
+      // Unsatisfied = native session reset; drop accumulated events so it
+      // can't leak stale liveness frames. `else` so a reset frame can't
+      // re-add its own stale events on the same pass.
+      if (result.state.type === ScanStateType.Unsatisfied) {
+        capturedEventsRef.current = [];
+      } else if (result.capturedEvents.length > 0) {
+        capturedEventsRef.current = [
+          ...capturedEventsRef.current,
+          ...result.capturedEvents,
+        ];
+      }
+      // Camera-rate results are mostly identical — commit only
+      // render-relevant changes, progress bucketed to 1% for smooth fill.
+      setScanState((previous) =>
+        previous.type === result.state.type &&
+        previous.feedback === result.state.feedback &&
+        previous.reason === result.state.reason &&
+        previous.currentDirection === result.state.currentDirection &&
+        (previous.poseMatched ?? false) ===
+          (result.state.poseMatched ?? false) &&
+        Math.round((previous.captureProgress ?? 0) * 100) ===
+          Math.round((result.state.captureProgress ?? 0) * 100)
+          ? previous
+          : result.state,
+      );
+      setHasAnalyzedFrame(true);
+
+      // Terminal states: finished → flush + complete; timeout → failure
+      // without flushing (no captured artifacts to wait on).
+      if (result.state.type === ScanStateType.Finished) {
+        if (completedRef.current) return;
+        completedRef.current = true;
+        setStreaming(false);
+        // flush() waits for every emitted JPG to land on disk before we
+        // hand URLs to the partner, so onCaptureComplete never returns a
+        // partial-write path.
+        void analyzer
+          .flush()
+          .catch((error) => {
+            UseSmileIDCrashReporting.captureException(error);
+          })
+          .finally(() => {
+            // No-op for selfie (callback unset).
+            onDocumentOrigin?.(DocumentImageOrigin.CameraAutoCapture);
+            onCaptureComplete?.(capturedEventsRef.current);
+          });
+      } else if (result.state.type === ScanStateType.Timeout) {
+        if (completedRef.current) return;
+        completedRef.current = true;
+        setStreaming(false);
+        onCaptureTimeout?.(result.state);
+      }
+    },
+    {
+      onError: (error) => {
+        // Native analyzer errors (model load, decode). Reported, but not
+        // terminal — the next frame is still attempted.
+        UseSmileIDCrashReporting.captureException(error);
+      },
+    },
+  );
+
+  const uiState: UseSmileIDCaptureUiState = hasAnalyzedFrame
+    ? mapCaptureUiState(scanState, props.captureType, enableEnhancedLiveness)
+    : preCaptureUiState(props.captureType, enableEnhancedLiveness);
+  // Only the guidance copy is debounced; rim, fill, and direction stay real-time.
+  const settledFeedbackKey = useDebouncedFeedbackKey(
+    uiState.feedbackKey,
+    sessionEpoch,
+  );
+  const isInstructionState =
+    scanState.type === ScanStateType.Initial && !streaming;
+  const canStart = !streaming && !completedRef.current;
+
+  const previewReady = hasPermission && device != null;
+
+  // Resolve the native frame processor plugin once per name.
+  const plugin = useMemo(
+    () =>
+      VisionCameraProxy.initFrameProcessorPlugin(
+        analyzer.frameProcessorPluginName,
+        {},
+      ) ?? null,
+    [analyzer.frameProcessorPluginName],
+  );
+
+  // A missing plugin means no frame ever produces a result — report once
+  // on capture start rather than sitting silently on the initial state.
+  const pluginErrorReportedRef = useRef(false);
+  useEffect(() => {
+    if (!streaming || plugin !== null || pluginErrorReportedRef.current) {
+      return;
+    }
+    pluginErrorReportedRef.current = true;
+    UseSmileIDCrashReporting.captureException(
+      new FrameProcessorPluginNotRegisteredException({
+        pluginName: analyzer.frameProcessorPluginName,
+      }),
+    );
+  }, [streaming, plugin, analyzer.frameProcessorPluginName]);
+
+  // Posts results to JS without blocking the worklet. Backpressure is
+  // native: the plugin blocks the frame-processor thread per scan, so
+  // mid-scan frames are dropped before reaching JS.
+  const onFrameResult = frameStream.onFrameResult;
+  const onFrameResultRunOnJS = useMemo(() => {
+    return Worklets.createRunOnJS((rawResult: unknown) => {
+      onFrameResult(rawResult);
+    });
+  }, [onFrameResult]);
+
+  // Physical device tilt (0 = upright portrait) for the native
+  // session's upright validator and head-pose math; gravity-sourced,
+  // never derived from `frame.orientation` (fixed sensor mounting).
+  const [deviceOrientationDegrees, setDeviceOrientationDegrees] = useState(0);
+
+  const frameProcessor = useFrameProcessor(
+    (frame) => {
+      "worklet";
+      if (!plugin) return;
+      const rawResult = plugin.call(frame, {
+        rotation: deviceOrientationDegrees,
+      });
+      onFrameResultRunOnJS(rawResult);
+    },
+    [plugin, onFrameResultRunOnJS, deviceOrientationDegrees],
+  );
+
+  // Document controls — live capture only (after Start). Manual shutter
+  // follows the capture mode + fallback timer; gallery follows
+  // allowGalleryUpload. Renderer also hides both during CAPTURING/PROCESSING.
+  const manualShutterAvailable =
+    isDocumentCapture &&
+    streaming &&
+    (captureMode?.kind === "manualCapture" ||
+      (captureMode?.kind === "autoCaptureWithManualFallback" &&
+        manualShutterRevealed));
+  const galleryAvailable = isDocumentCapture && streaming && allowGalleryUpload;
+
+  // Deps are scalar fields (mapCaptureUiState returns a fresh object per
+  // render). captureProgress intentionally stays a separate per-frame prop.
+  const contentState: UseSmileIDCaptureContentState = useMemo(
+    () => ({
+      captureType: props.captureType,
+      overlayState: uiState.overlayState,
+      enableEnhancedLiveness,
+      animationDirection: uiState.animationDirection,
+      poseMatched: uiState.poseMatched,
+      // A transient gallery-import error preempts the live feedback chip.
+      feedbackKey: galleryErrorKey ?? settledFeedbackKey,
+      // Documents auto-start (no Start button); selfie keeps its.
+      showCaptureButton: isInstructionState && !isDocumentCapture,
+      showManualShutter: manualShutterAvailable,
+      showGalleryUpload: galleryAvailable,
+      ...(props.knownIdAspectRatio !== undefined
+        ? { knownIdAspectRatio: props.knownIdAspectRatio }
+        : {}),
+    }),
+    [
+      props.captureType,
+      uiState.overlayState,
+      enableEnhancedLiveness,
+      uiState.animationDirection,
+      uiState.poseMatched,
+      settledFeedbackKey,
+      galleryErrorKey,
+      isInstructionState,
+      isDocumentCapture,
+      manualShutterAvailable,
+      galleryAvailable,
+      props.knownIdAspectRatio,
+    ],
+  );
+
+  // Stable element so the camera tree survives unrelated state updates.
+  const cameraPreview = useMemo(
+    () => (
+      <>
+        {/* Selfie uses the front camera with the screen as fill light, so
+            force max brightness on selfie only; document uses the rear
+            camera, where screen brightness doesn't help. */}
+        <ForceMaxBrightness
+          enabled={props.captureType === CaptureType.selfie}
+        />
+        {previewReady ? (
+          <Camera
+            ref={cameraRef}
+            style={StyleSheet.absoluteFill}
+            device={device}
+            isActive={true}
+            {...(format ? { format } : {})}
+            // Photo output only for document capture (manual shutter's takePhoto()).
+            {...(props.captureType === CaptureType.document
+              ? { photo: true }
+              : {})}
+            // Gravity-based — keeps reporting tilt even when UI orientation is locked to portrait.
+            outputOrientation="device"
+            onOutputOrientationChanged={(orientation) => {
+              setDeviceOrientationDegrees(orientationToDegrees(orientation));
+            }}
+            // Attach the frame processor only while streaming (skip pre-Start
+            // preview). Spread idiom because exactOptionalPropertyTypes rejects
+            // passing `undefined` to an optional prop directly.
+            {...(streaming ? { frameProcessor } : {})}
+            testID="si_capture_camera_preview"
+          />
+        ) : (
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              { backgroundColor: theme.colors.offBlack },
+            ]}
+            testID="si_capture_camera_placeholder"
+          />
+        )}
+      </>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- setDeviceOrientationDegrees is a state setter (stable)
+    [
+      props.captureType,
+      previewReady,
+      device,
+      format,
+      streaming,
+      frameProcessor,
+      theme.colors.offBlack,
+    ],
+  );
+
+  return (
+    <>
+      {/* Translucent status bar → full-bleed window so the oval's reference
+          frame is the full screen (no-op on iOS). On-device-pending: residual
+          inset also depends on the host SafeAreaProvider config. */}
+      <StatusBar translucent backgroundColor="transparent" />
+      <UseSmileIDCaptureContent
+        state={contentState}
+        captureProgress={uiState.captureProgress}
+        cameraPreview={cameraPreview}
+        onStartCapture={handleStart}
+        startCaptureEnabled={canStart}
+        onBack={props.onBack}
+        showAttribution={showAttribution}
+        startButton={props.startButton}
+        {...(isDocumentCapture
+          ? {
+              onManualShutter: handleManualShutter,
+              onGalleryUpload: handleGalleryPick,
+              documentControlsEnabled: !deliveringDocument,
+              ...(props.onClose ? { onClose: props.onClose } : {}),
+            }
+          : {})}
+        theme={theme}
+      />
+    </>
+  );
+}