@smileid/web-components 11.4.4 → 11.4.5

package/dist/types/main.d.ts

@@ -242,8 +242,10 @@ export declare class SelfieCaptureScreens extends HTMLElement {
     }[] | null | undefined;
     setUpEventListeners(): void;
     forceWrapperRemount(): Promise<any>;
+    restartSelfieCapture(): void;
     setActiveScreen(screen: any): void;
     setupSelfieWrapperEventListeners(): void;
+    _selfieWrapperPublishHandler: ((event: any) => Promise<void>) | undefined;
     _publishSelectedImages(): void;
     get hideInstructions(): boolean;
     get hideAttribution(): "" | "hide-attribution=\"\"";

package/lib/components/selfie/src/SelfieCaptureScreens.js

@@ -1,6 +1,7 @@
 import './selfie-capture-instructions';
 import './selfie-capture-review';
 import './selfie-capture-wrapper/index.ts';
+import { getMediapipeInstance } from './smartselfie-capture/utils/mediapipeManager.ts';
 import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import styles from '../../../styles/src/styles';
 import packageJson from '../../../../package.json';
@@ -108,6 +109,37 @@ class SelfieCaptureScreens extends HTMLElement {
     }
 
     this.setUpEventListeners();
+
+    // Pre-warm MediaPipe as soon as the selfie flow starts so the heavy WASM +
+    // model download (and on-device init) happens while the user reads the
+    // instructions — not behind a blocking spinner on the capture screen. This
+    // is fire-and-forget and idempotent: getMediapipeInstance() caches a single
+    // in-flight promise / instance, so the wrapper (and any remount) reuses the
+    // same load instead of starting a new one. Errors are handled by the
+    // wrapper's own retry/fallback path, so swallow them here.
+    //
+    // Skipped under Cypress to match `SelfieCaptureWrapper`'s existing test
+    // seam (`skipMediapipeForTests`). Specs rely on the wrapper short-circuiting
+    // to the legacy `selfie-capture` fallback; pre-warming here would race with
+    // that seam and (intermittently) flip the wrapper into the SmartSelfie path
+    // by populating `window.__smileIdentityMediapipe` before the wrapper mounts.
+    //
+    // The parent check covers the embed Cypress context where this element runs
+    // inside an iframe and window.Cypress is only set on the parent frame.
+    const isCypress =
+      !!window.Cypress ||
+      (() => {
+        try {
+          return !!window.parent.Cypress;
+        } catch {
+          return false;
+        }
+      })() ||
+      (window.navigator.userAgent.includes('Electron') && window.__Cypress);
+    const forceMediapipeLoad = !!window.__SMILE_ID_TEST_FORCE_MEDIAPIPE_LOAD__;
+    if (!isCypress || forceMediapipeLoad) {
+      getMediapipeInstance().catch(() => {});
+    }
   }
 
   getAgentMode() {
@@ -230,6 +262,45 @@ class SelfieCaptureScreens extends HTMLElement {
     });
   }
 
+  // Return to a clean selfie capture screen. Used when navigating back from the
+  // document flow. Previously this was driven by toggling the `initial-screen`
+  // attribute on this element, which re-fired a full `connectedCallback()`
+  // rebuild every time (even when the value was unchanged). We now swap in a
+  // fresh `selfie-capture-wrapper` synchronously and navigate explicitly, so we
+  // land on a clean capture screen — not the stale review — without rebuilding
+  // the whole screen tree or depending on timers.
+  restartSelfieCapture() {
+    SmartCamera.stopMedia();
+
+    const container = this.querySelector('div');
+    const oldWrapper = this.selfieCapture;
+
+    if (oldWrapper && container) {
+      this._remountKey++;
+
+      const newWrapper = document.createElement('selfie-capture-wrapper');
+      Array.from(oldWrapper.attributes).forEach((attr) => {
+        newWrapper.setAttribute(attr.name, attr.value);
+      });
+      newWrapper.setAttribute('key', this._remountKey.toString());
+      newWrapper.setAttribute('start-countdown', 'false');
+      newWrapper.setAttribute('hidden', '');
+
+      const reviewElement = container.querySelector('selfie-capture-review');
+      oldWrapper.remove();
+      if (reviewElement) {
+        container.insertBefore(newWrapper, reviewElement);
+      } else {
+        container.appendChild(newWrapper);
+      }
+
+      this.selfieCapture = newWrapper;
+      this.setupSelfieWrapperEventListeners();
+    }
+
+    this.setActiveScreen(this.selfieCapture);
+  }
+
   // Override setActiveScreen to enable countdown when selfie-capture is active
   setActiveScreen(screen) {
     if (this.activeScreen === screen) {
@@ -256,6 +327,17 @@ class SelfieCaptureScreens extends HTMLElement {
         window.removeEventListener(event, handler);
       });
     }
+    // Also remove the previously-attached element-level publish handler so we
+    // don't accumulate duplicates across remounts (each call to
+    // setupSelfieWrapperEventListeners would otherwise add another listener,
+    // causing multiple transitions to review / multiple metadata events on
+    // navigating back from document capture).
+    if (this._selfieWrapperPublishHandler) {
+      this.removeEventListener(
+        'selfie-capture.publish',
+        this._selfieWrapperPublishHandler,
+      );
+    }
 
     // Create new event handlers
     const cancelledHandler = async () => {
@@ -313,6 +395,7 @@ class SelfieCaptureScreens extends HTMLElement {
 
     // Also listen for the publish event on the parent SelfieCaptureScreens element
     // in case smartselfie-capture dispatches it there
+    this._selfieWrapperPublishHandler = publishHandler;
     this.addEventListener('selfie-capture.publish', publishHandler);
   }
 

package/lib/components/selfie/src/selfie-capture-wrapper/SelfieCaptureWrapper.tsx

@@ -60,6 +60,11 @@ const DEFAULT_WAIT_MS = 20 * 1000;
 // exponential backoff (base * 2^(attempt-1)) so we don't hammer the CDN.
 const MAX_MEDIAPIPE_INIT_ATTEMPTS = 3;
 const MEDIAPIPE_RETRY_BASE_DELAY_MS = 500;
+// Cap user-initiated retries from the failure screen. Each tap resets the
+// per-attempt counter (granting another `MAX_MEDIAPIPE_INIT_ATTEMPTS` round of
+// internal retries), so without this cap a frustrated or malicious user could
+// hammer Retry indefinitely and generate unbounded requests to the model CDN.
+const MAX_USER_RETRIES = 3;
 
 // Wrapper component that decides whether to use the modern
 // SmartSelfieCapture (Mediapipe-based) or fallback to the legacy `selfie-capture`
@@ -89,6 +94,16 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     (window.navigator.userAgent.includes('Electron') &&
       (window as any).__Cypress);
 
+  // Test-only seam: the `isCypress` short-circuit below skips the whole
+  // MediaPipe load path (so most specs run fast against the legacy fallback).
+  // A spec that wants to exercise the real load/spinner/error/Retry path sets
+  // `window.__SMILE_ID_TEST_FORCE_MEDIAPIPE_LOAD__ = true` to opt out of that
+  // short-circuit. When the flag is unset, `skipMediapipeForTests === isCypress`,
+  // so production and existing-test behaviour are unchanged.
+  const forceMediapipeLoad = !!(window as any)
+    .__SMILE_ID_TEST_FORCE_MEDIAPIPE_LOAD__;
+  const skipMediapipeForTests = isCypress && !forceMediapipeLoad;
+
   const hidden = getBoolProp(hiddenProp);
   const startCountdown = getBoolProp(startCountdownProp);
   const allowLegacySelfieFallback = getBoolProp(allowLegacySelfieFallbackProp);
@@ -122,11 +137,37 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
   // - initialSessionCompleted: set when the legacy component emits publish/cancel/close
   // - mediapipeLoading: true while attempting to load mediapipe
   // - usingSelfieCapture: whether we've mounted the legacy `selfie-capture` element
-  const [mediapipeReady, setMediapipeReady] = useState(false);
-  const [loadingProgress, setLoadingProgress] = useState(isCypress ? 100 : 0);
-  const [loadDeadlineExceeded, setLoadDeadlineExceeded] = useState(isCypress);
+  // If MediaPipe already loaded earlier in this session (e.g. we're remounting
+  // after returning from document capture), reuse the cached singleton instance
+  // immediately instead of showing the loading spinner again. The model and
+  // WASM are already in memory, so no network call is needed.
+  const mediapipeAlreadyLoaded = !!(
+    window.__smileIdentityMediapipe?.loaded &&
+    window.__smileIdentityMediapipe?.instance
+  );
+
+  const [mediapipeReady, setMediapipeReady] = useState(mediapipeAlreadyLoaded);
+  const [loadingProgress, setLoadingProgress] = useState(
+    skipMediapipeForTests || mediapipeAlreadyLoaded ? 100 : 0,
+  );
+  const [loadDeadlineExceeded, setLoadDeadlineExceeded] = useState(
+    skipMediapipeForTests,
+  );
   const [initialSessionCompleted, setInitialSessionCompleted] = useState(false);
   const [mediapipeLoading, setMediapipeLoading] = useState(false);
+  // Concurrency guard for the load effect. Kept in a ref — NOT in
+  // `mediapipeLoading` state — so the effect's guard does not depend on a value
+  // the effect itself sets. If it did (as it used to), calling
+  // `setMediapipeLoading(true)` would re-run the effect, whose cleanup flips
+  // `cancelled` true, and a slow `getMediapipeInstance()` would then resolve
+  // into a cancelled closure — never calling `setMediapipeReady(true)`. That
+  // left the UI stuck on the loading spinner even though MediaPipe loaded
+  // successfully (intermittent: only when the load lost the race to the
+  // re-render).
+  const mediapipeLoadingRef = useRef(false);
+  // Bumped to re-trigger the load effect for a bounded retry after a transient
+  // failure (replaces re-using `mediapipeLoading` as the re-trigger signal).
+  const [mediapipeRetryTick, setMediapipeRetryTick] = useState(0);
   // `unsupportedEnvironment` is a permanent, one-shot signal: we know
   // MediaPipe cannot run here, so stop trying.
   const [unsupportedEnvironment, setUnsupportedEnvironment] = useState(false);
@@ -137,6 +178,9 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
   // Dedup flag so we only report a given init failure to Sentry once per
   // wrapper instance, even if we end up retrying. Ref for the same reason.
   const mediapipeInitReportedRef = useRef(false);
+  // User-initiated Retry presses are also bounded — see `MAX_USER_RETRIES`.
+  const userRetryCountRef = useRef(0);
+  const [retriesExhausted, setRetriesExhausted] = useState(false);
   const [usingSelfieCapture, setUsingSelfieCapture] = useState(false);
 
   // Attempt to load Mediapipe (with a small bounded retry budget). If
@@ -147,27 +191,33 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
   useEffect(() => {
     if (
       mediapipeReady ||
-      mediapipeLoading ||
+      mediapipeLoadingRef.current ||
       unsupportedEnvironment ||
       mediapipeInitAttemptsRef.current >= MAX_MEDIAPIPE_INIT_ATTEMPTS ||
-      isCypress
+      skipMediapipeForTests
     )
       return undefined;
 
     let cancelled = false;
     let retryTimeoutId: ReturnType<typeof setTimeout> | null = null;
 
+    // Mark loading via the ref (effect guard) and the state (UI). The state is
+    // intentionally NOT in this effect's deps — see `mediapipeLoadingRef`.
+    mediapipeLoadingRef.current = true;
+    setMediapipeLoading(true);
+
     const loadMediapipe = async () => {
-      setMediapipeLoading(true);
       const attemptNumber = mediapipeInitAttemptsRef.current + 1;
       mediapipeInitAttemptsRef.current = attemptNumber;
       try {
         await getMediapipeInstance();
         if (cancelled) return;
+        mediapipeLoadingRef.current = false;
         setMediapipeReady(true);
         setMediapipeLoading(false);
       } catch (error) {
         if (cancelled) return;
+        mediapipeLoadingRef.current = false;
         // Loading failed; we'll fall back to the legacy selfie-capture component
         // after the loadingProgress reaches 100% (or sooner for definitively
         // unsupported environments — see below).
@@ -215,6 +265,9 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
           retryTimeoutId = null;
           if (cancelled) return;
           setMediapipeLoading(false);
+          // Re-trigger the effect for the next attempt via a dedicated counter
+          // rather than toggling `mediapipeLoading` (which is no longer a dep).
+          setMediapipeRetryTick((tick) => tick + 1);
         }, backoffMs);
       }
     };
@@ -223,11 +276,14 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
 
     return () => {
       cancelled = true;
+      mediapipeLoadingRef.current = false;
       if (retryTimeoutId !== null) {
         clearTimeout(retryTimeoutId);
       }
     };
-  }, [mediapipeReady, mediapipeLoading, unsupportedEnvironment]);
+    // `mediapipeLoading` is deliberately excluded: it is set inside this effect,
+    // so depending on it would re-run the effect and cancel the in-flight load.
+  }, [mediapipeReady, unsupportedEnvironment, mediapipeRetryTick]);
 
   // Cosmetic loading progress: ticks 0→100 over `loadingTime` so the UI can
   // show "slow connection" copy past the SLOW_CONNECTION_THRESHOLD. This is
@@ -249,14 +305,21 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     return () => {
       clearInterval(timer);
     };
-  }, [hidden, startCountdown, loadingTime, mediapipeReady]);
+    // `mediapipeRetryTick` restarts the cosmetic progress when the user taps
+    // Retry (which resets `loadingProgress` to 0).
+  }, [hidden, startCountdown, loadingTime, mediapipeReady, mediapipeRetryTick]);
 
   // Hard deadline: a single setTimeout that flips `loadDeadlineExceeded`
   // exactly once. This is the signal the render path uses to commit to the
   // fallback. Skipped when hidden, when Mediapipe is already ready, or under
   // Cypress (where the flag is pre-seeded to true).
   useEffect(() => {
-    if (hidden || mediapipeReady || loadDeadlineExceeded || isCypress)
+    if (
+      hidden ||
+      mediapipeReady ||
+      loadDeadlineExceeded ||
+      skipMediapipeForTests
+    )
       return undefined;
 
     const id = setTimeout(() => {
@@ -264,7 +327,13 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     }, loadingTime);
 
     return () => clearTimeout(id);
-  }, [hidden, mediapipeReady, loadDeadlineExceeded, loadingTime, isCypress]);
+  }, [
+    hidden,
+    mediapipeReady,
+    loadDeadlineExceeded,
+    loadingTime,
+    skipMediapipeForTests,
+  ]);
 
   // Latch the legacy fallback decision in an effect rather than during
   // render. Effects only run after commit, so by the time this runs, any
@@ -274,7 +343,8 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
   useEffect(() => {
     if (hidden || usingSelfieCapture || mediapipeReady) return;
     if (!loadDeadlineExceeded) return;
-    const legacyFallbackAllowed = allowLegacySelfieFallback || isCypress;
+    const legacyFallbackAllowed =
+      allowLegacySelfieFallback || skipMediapipeForTests;
     if (!legacyFallbackAllowed) return;
     setUsingSelfieCapture(true);
   }, [
@@ -283,7 +353,7 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     mediapipeReady,
     loadDeadlineExceeded,
     allowLegacySelfieFallback,
-    isCypress,
+    skipMediapipeForTests,
   ]);
 
   useEffect(() => {
@@ -367,6 +437,28 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     );
   }, [usingSelfieCapture, hidden, mediapipeLoading]);
 
+  // Retry from the failure screen: clear the give-up state and re-arm the load
+  // effect, deadline, and cosmetic progress so we make a fresh attempt. We reset
+  // `unsupportedEnvironment` so a genuinely unsupported device fails fast again
+  // (rather than spinning for the full deadline) instead of being permanently
+  // latched off. User taps are capped by `MAX_USER_RETRIES` so a frustrated or
+  // malicious user can't hammer Retry indefinitely and generate unbounded
+  // requests to the model CDN.
+  const handleRetry = () => {
+    if (userRetryCountRef.current >= MAX_USER_RETRIES) {
+      setRetriesExhausted(true);
+      return;
+    }
+    userRetryCountRef.current += 1;
+    mediapipeInitAttemptsRef.current = 0;
+    mediapipeInitReportedRef.current = false;
+    mediapipeLoadingRef.current = false;
+    setUnsupportedEnvironment(false);
+    setLoadDeadlineExceeded(false);
+    setLoadingProgress(0);
+    setMediapipeRetryTick((tick) => tick + 1);
+  };
+
   if (hidden) {
     return null;
   }
@@ -427,14 +519,45 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     );
   }
 
-  // Hard deadline elapsed and legacy fallback isn't allowed: show the
-  // connection error.
-  if (loadDeadlineExceeded && !(allowLegacySelfieFallback || isCypress)) {
+  // Hard deadline elapsed and legacy fallback isn't allowed: show an actionable
+  // error. The network is usually fine here (the hold-up is on-device setup), so
+  // only blame the connection when the browser actually reports being offline —
+  // otherwise frame it as a setup problem. Always offer a Retry control.
+  if (
+    loadDeadlineExceeded &&
+    !(allowLegacySelfieFallback || skipMediapipeForTests)
+  ) {
+    const isOffline =
+      typeof navigator !== 'undefined' && navigator.onLine === false;
+    const errorKey = isOffline
+      ? 'selfie.capture.loading.offlineError'
+      : 'selfie.capture.loading.setupError';
+    const themeColor = (props as Record<string, string>)['theme-color'];
+
     return (
       <div style={{ textAlign: 'center', marginTop: '20%', padding: '0 20px' }}>
         <p style={{ fontSize: '1.2rem', color: '#333' }}>
-          {translate('selfie.capture.loading.connectionError')}
+          {translate(errorKey)}
         </p>
+        <button
+          type="button"
+          onClick={handleRetry}
+          disabled={retriesExhausted}
+          style={{
+            marginTop: '16px',
+            padding: '0.75rem 1.5rem',
+            borderRadius: '2.5rem',
+            border: 'none',
+            backgroundColor: themeColor || '#001096',
+            color: '#fff',
+            fontSize: '1rem',
+            fontWeight: 600,
+            cursor: retriesExhausted ? 'not-allowed' : 'pointer',
+            opacity: retriesExhausted ? 0.6 : 1,
+          }}
+        >
+          {translate('selfie.capture.loading.retry')}
+        </button>
       </div>
     );
   }

package/lib/components/selfie/src/smartselfie-capture/utils/mediapipeManager.ts

@@ -122,6 +122,62 @@ export class UnsupportedMediapipeEnvironmentError extends Error {
   }
 }
 
+/**
+ * @description Thrown when `FaceLandmarker.createFromOptions` does not settle
+ * within {@link MEDIAPIPE_INIT_TIMEOUT_MS}. The WASM and model assets download
+ * over the network, but the subsequent WASM compile + GPU/CPU graph
+ * initialization runs on-device and can stall indefinitely on some drivers.
+ * Without a timeout the cached `loading` promise never resolves nor rejects,
+ * which (a) keeps the loading UI spinning until the wrapper's hard deadline and
+ * (b) poisons the singleton so retries/remounts await the same stuck promise.
+ * Treated as a transient failure by callers so the bounded retry can re-run.
+ */
+export class MediapipeInitTimeoutError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'MediapipeInitTimeoutError';
+  }
+}
+
+// Last-resort hang guard for `createFromOptions`. This call also downloads the
+// ~3MB model, so the budget must cover a slow/uncached fetch as well as the
+// on-device init — hence it is deliberately generous. It exists only so a truly
+// wedged init eventually rejects (letting the wrapper's bounded retry / hard
+// deadline take over) rather than hanging forever; it is NOT used to decide the
+// GPU→CPU fallback (that keys off real init errors — see getMediapipeInstance).
+const MEDIAPIPE_INIT_TIMEOUT_MS = 45000;
+
+/**
+ * @description Races a promise against a timeout. On timeout, rejects with a
+ * {@link MediapipeInitTimeoutError}. The underlying promise is not (and cannot
+ * be) aborted — we just stop awaiting it so callers can recover.
+ * @param {Promise<T>} promise The work to bound.
+ * @param {number} ms Timeout in milliseconds.
+ * @param {string} message Message for the timeout error.
+ * @returns {Promise<T>} Resolves/rejects with the promise, or rejects on timeout.
+ */
+const withTimeout = <T>(
+  promise: Promise<T>,
+  ms: number,
+  message: string,
+): Promise<T> =>
+  new Promise<T>((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      reject(new MediapipeInitTimeoutError(message));
+    }, ms);
+
+    promise.then(
+      (value) => {
+        clearTimeout(timeoutId);
+        resolve(value);
+      },
+      (error) => {
+        clearTimeout(timeoutId);
+        reject(error);
+      },
+    );
+  });
+
 /**
  * @description Reads system architecture hints from User-Agent Client Hints.
  * @returns {Promise<string | null>} Lower-cased hint string or null when hints are unavailable.
@@ -207,6 +263,28 @@ const hasFP16Support = () => {
   return !!(hasHalfFloatExt && hasColorBufferHalfFloat && hasHalfFloatLinear);
 };
 
+/**
+ * @description Creates a FaceLandmarker with the given compute delegate.
+ * Extracted so the init can be retried with a different delegate without
+ * duplicating the options.
+ * @param {Awaited<ReturnType<typeof FilesetResolver.forVisionTasks>>} vision Resolved WASM fileset.
+ * @param {'CPU' | 'GPU'} delegate Compute delegate to use.
+ * @returns {Promise<FaceLandmarker>} The created FaceLandmarker.
+ */
+const createLandmarker = (
+  vision: Awaited<ReturnType<typeof FilesetResolver.forVisionTasks>>,
+  delegate: 'CPU' | 'GPU',
+): Promise<FaceLandmarker> =>
+  FaceLandmarker.createFromOptions(vision, {
+    baseOptions: {
+      modelAssetPath: `https://web-models.smileidentity.com/face_landmarker/face_landmarker.task`,
+      delegate,
+    },
+    outputFaceBlendshapes: true,
+    runningMode: 'VIDEO',
+    numFaces: 2,
+  });
+
 export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
   if (!window.__smileIdentityMediapipe) {
     window.__smileIdentityMediapipe = {
@@ -249,15 +327,69 @@ export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
       const delegate =
         gpuDelegate === 'CPU' || !hasFP16Support() ? 'CPU' : 'GPU';
 
-      const faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
-        baseOptions: {
-          modelAssetPath: `https://web-models.smileidentity.com/face_landmarker/face_landmarker.task`,
-          delegate,
-        },
-        outputFaceBlendshapes: true,
-        runningMode: 'VIDEO',
-        numFaces: 2,
-      });
+      // A GPU-delegate init can throw on some drivers (WebGL context/shader
+      // failures) even though the model already downloaded; on a genuine GPU
+      // *error* we retry once on CPU before giving up. We deliberately do NOT
+      // fall back on a timeout: the timeout also covers the model download, so
+      // a slow fetch could trip it while a healthy GPU init is still in
+      // progress — abandoning it to start a redundant CPU init only makes
+      // things worse. A timeout therefore propagates as a transient failure for
+      // the wrapper's bounded retry / hard deadline to handle.
+      //
+      // Orphan handling: when `withTimeout` fires, the underlying
+      // `createLandmarker` promise is still in flight (it cannot be aborted).
+      // If it eventually resolves, the resulting `FaceLandmarker` would leak a
+      // GPU/WebGL context, so we attach a best-effort `.close()` cleanup to the
+      // original promise reference for both the GPU and CPU init paths.
+      const closeOrphan = (orphan: FaceLandmarker) => {
+        try {
+          orphan.close();
+        } catch {
+          /* best effort */
+        }
+      };
+
+      let faceLandmarker: FaceLandmarker;
+      const initPromise = createLandmarker(vision, delegate);
+      try {
+        faceLandmarker = await withTimeout(
+          initPromise,
+          MEDIAPIPE_INIT_TIMEOUT_MS,
+          `MediaPipe initialization timed out after ${MEDIAPIPE_INIT_TIMEOUT_MS}ms (delegate: ${delegate}).`,
+        );
+      } catch (error) {
+        const isTimeout = error instanceof MediapipeInitTimeoutError;
+        if (isTimeout) {
+          // Stop awaiting the in-flight init, but if it eventually resolves,
+          // close the orphaned instance to avoid leaking a GPU/WebGL context.
+          initPromise.then(closeOrphan, () => {
+            /* already failed; nothing to clean up */
+          });
+        }
+        if (delegate === 'GPU' && !isTimeout) {
+          console.warn(
+            '[SmileID] GPU MediaPipe init failed; retrying with CPU delegate.',
+            error,
+          );
+          const cpuInitPromise = createLandmarker(vision, 'CPU');
+          try {
+            faceLandmarker = await withTimeout(
+              cpuInitPromise,
+              MEDIAPIPE_INIT_TIMEOUT_MS,
+              `MediaPipe CPU initialization timed out after ${MEDIAPIPE_INIT_TIMEOUT_MS}ms.`,
+            );
+          } catch (cpuError) {
+            if (cpuError instanceof MediapipeInitTimeoutError) {
+              cpuInitPromise.then(closeOrphan, () => {
+                /* already failed; nothing to clean up */
+              });
+            }
+            throw cpuError;
+          }
+        } else {
+          throw error;
+        }
+      }
 
       mediapipeGlobal.instance = faceLandmarker;
       mediapipeGlobal.loaded = true;
@@ -265,6 +397,8 @@ export const getMediapipeInstance = async (): Promise<FaceLandmarker> => {
 
       return faceLandmarker;
     } catch (error) {
+      // Always clear the poisoned promise so the wrapper's bounded retry — and
+      // any later remount — can re-attempt instead of awaiting a dead promise.
       mediapipeGlobal.loading = null;
       throw error;
     }
@@ -277,4 +411,6 @@ export const __testUtils = {
   matchesExcludedGpu,
   getDelegateFromGpuDetection,
   supportsWasmReftypes,
+  withTimeout,
+  MEDIAPIPE_INIT_TIMEOUT_MS,
 };

package/lib/components/signature-pad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.4.4",
+  "version": "11.4.5",
   "private": true,
   "exports": {
     ".": "./index.js"

package/lib/components/smart-camera-web/src/SmartCameraWeb.js

@@ -166,11 +166,13 @@ class SmartCameraWeb extends HTMLElement {
     this.documentCapture.addEventListener(
       'document-capture-screens.cancelled',
       () => {
-        this.SelfieCaptureScreens.setAttribute(
-          'initial-screen',
-          'selfie-capture',
-        );
         this.setActiveScreen(this.SelfieCaptureScreens);
+        // Land on a clean selfie capture screen by driving the navigation
+        // explicitly. Previously this set `initial-screen="selfie-capture"`,
+        // whose side effect was a full SelfieCaptureScreens rebuild — re-fired
+        // on every back-navigation (setAttribute invokes attributeChangedCallback
+        // even when the value is unchanged).
+        this.SelfieCaptureScreens.restartSelfieCapture();
         this.SelfieCaptureScreens.removeAttribute('data-camera-error');
         this.SelfieCaptureScreens.setAttribute('data-camera-ready', true);
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "11.4.4",
+  "version": "11.4.5",
   "private": false,
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
@@ -105,7 +105,7 @@
     "@typescript-eslint/eslint-plugin": "^8.49.0",
     "@typescript-eslint/parser": "^8.49.0",
     "cross-env": "^7.0.3",
-    "cypress": "^13.15.0",
+    "cypress": "^13.17.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",