@smileid/web-components 11.4.2 → 11.4.4

package/dist/types/main.d.ts

@@ -38,6 +38,8 @@ declare class ComboboxRoot extends HTMLElement {
 declare class ComboboxTrigger extends HTMLElement {
     handleKeyUp(event: any): void;
     handleKeyDown(event: any): void;
+    handleInput(event: any): void;
+    handleChange(event: any): void;
     handleSelection(event: any): void;
     toggleExpansionState(): void;
     get type(): string;
@@ -87,14 +89,13 @@ export declare class DocumentCaptureScreens extends HTMLElement {
     setUpEventListeners(): void;
     _publishSelectedImages(): void;
     get hideInstructions(): boolean;
-    get autoCapture(): boolean;
-    get autoCaptureMode(): string;
     get hideBackOfId(): boolean;
     get showNavigation(): "" | "show-navigation";
     get title(): string;
     get documentCaptureModes(): string;
     get documentType(): string;
     get hideAttribution(): "" | "hide-attribution";
+    get newInstructions(): boolean;
     get themeColor(): string;
     handleBackEvents(): void;
     handleCloseEvents(): void;
@@ -330,14 +331,13 @@ export declare class SmartCameraWeb extends HTMLElement {
     get isPortraitCaptureView(): boolean;
     get hideInstructions(): "" | "hide-instructions";
     get hideBackOfId(): "" | "hide-back-of-id";
+    get newInstructions(): "" | "new-instructions";
     get showNavigation(): "" | "show-navigation";
     get hideBackToHost(): "" | "hide-back";
     get allowAgentMode(): string;
     get allowAgentModeTests(): "" | "show-agent-mode-for-tests";
     get title(): string;
     get documentCaptureModes(): string;
-    get autoCapture(): string;
-    get autoCaptureMode(): string;
     get disableImageTests(): "" | "disable-image-tests";
     get allowLegacySelfieFallback(): string;
     get hideAttribution(): "" | "hide-attribution";

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useRef } from 'preact/hooks';
 import { IconLoader2 } from '@tabler/icons-preact';
 import register from 'preact-custom-element';
 import type { FunctionComponent } from 'preact';
@@ -30,7 +30,7 @@ declare global {
 }
 
 interface Props {
-  timeout?: number;
+  timeout?: string | number;
   interval?: number;
   duration?: number;
   'theme-color'?: string;
@@ -45,8 +45,15 @@ interface Props {
   hidden?: string | boolean;
 }
 
-const DEFAULT_MEDIAPIPE_WAIT_MS = 90 * 1000; // For when legacy fallback is NOT allowed, we wait the full 90s for mediapipe to load before showing an error.
-const DEFAULT_WAIT_MS = 20 * 1000; // default for when legacy fallback is allowed we wait for 20s
+// Default deadlines for the Mediapipe load attempt. These are used when the
+// host did NOT provide an explicit `timeout` prop; an explicit `timeout`
+// always wins regardless of the legacy-fallback flag.
+//   - With legacy fallback allowed: 20s, so users on broken networks get a
+//     usable capture quickly.
+//   - Without legacy fallback: 90s, so we keep waiting before giving up to
+//     the error UI.
+const DEFAULT_MEDIAPIPE_WAIT_MS = 90 * 1000;
+const DEFAULT_WAIT_MS = 20 * 1000;
 // Cap retries on transient init failures so we don't spin forever, while still
 // allowing recovery from short-lived issues (e.g. CDN hiccups while the
 // wrapper is preloading in a hidden state). Retries are spaced with
@@ -58,7 +65,7 @@ const MEDIAPIPE_RETRY_BASE_DELAY_MS = 500;
 // SmartSelfieCapture (Mediapipe-based) or fallback to the legacy `selfie-capture`
 // web component after a timeout (default 90 seconds).
 const SelfieCaptureWrapper: FunctionComponent<Props> = ({
-  timeout = DEFAULT_MEDIAPIPE_WAIT_MS,
+  timeout,
   'start-countdown': startCountdownProp = false,
   'allow-legacy-selfie-fallback': allowLegacySelfieFallbackProp = false,
   hidden: hiddenProp = false,
@@ -85,26 +92,51 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
   const hidden = getBoolProp(hiddenProp);
   const startCountdown = getBoolProp(startCountdownProp);
   const allowLegacySelfieFallback = getBoolProp(allowLegacySelfieFallbackProp);
-  const loadingTime = allowLegacySelfieFallback ? DEFAULT_WAIT_MS : timeout;
+
+  // Resolve how long we'll wait for Mediapipe before the hard deadline fires.
+  // Precedence:
+  //   1. Explicit `timeout` prop (parsed defensively because web component
+  //      attributes arrive as strings).
+  //   2. With legacy fallback allowed: DEFAULT_WAIT_MS (20s).
+  //   3. Otherwise: DEFAULT_MEDIAPIPE_WAIT_MS (90s).
+  const parsedTimeout = typeof timeout === 'string' ? Number(timeout) : timeout;
+  const hasExplicitTimeout =
+    typeof parsedTimeout === 'number' &&
+    Number.isFinite(parsedTimeout) &&
+    parsedTimeout > 0;
+  const defaultLoadingTime = allowLegacySelfieFallback
+    ? DEFAULT_WAIT_MS
+    : DEFAULT_MEDIAPIPE_WAIT_MS;
+  const loadingTime = hasExplicitTimeout
+    ? (parsedTimeout as number)
+    : defaultLoadingTime;
 
   // Component state:
   // - mediapipeReady: whether the mediapipe instance has successfully loaded
-  // - loadingProgress: percentage used for the visible loading UI
+  // - loadingProgress: percentage used for the visible loading UI (cosmetic)
+  // - loadDeadlineExceeded: hard cap signal — once true, we stop waiting for
+  //   Mediapipe and commit to the legacy fallback (or error UI). Kept
+  //   separate from `loadingProgress` so the decision is driven by a single
+  //   setTimeout firing once, not by a 200ms ticking interval that can race
+  //   with the Mediapipe promise resolution.
   // - 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);
   const [initialSessionCompleted, setInitialSessionCompleted] = useState(false);
   const [mediapipeLoading, setMediapipeLoading] = useState(false);
   // `unsupportedEnvironment` is a permanent, one-shot signal: we know
   // MediaPipe cannot run here, so stop trying.
   const [unsupportedEnvironment, setUnsupportedEnvironment] = useState(false);
-  // Bounded retry counter for transient init failures.
-  const [mediapipeInitAttempts, setMediapipeInitAttempts] = useState(0);
+  // Bounded retry counter for transient init failures. Stored in a ref so
+  // incrementing it does not trigger a re-render — it's only read inside the
+  // load effect.
+  const mediapipeInitAttemptsRef = useRef(0);
   // Dedup flag so we only report a given init failure to Sentry once per
-  // wrapper instance, even if we end up retrying.
-  const [mediapipeInitReported, setMediapipeInitReported] = useState(false);
+  // wrapper instance, even if we end up retrying. Ref for the same reason.
+  const mediapipeInitReportedRef = useRef(false);
   const [usingSelfieCapture, setUsingSelfieCapture] = useState(false);
 
   // Attempt to load Mediapipe (with a small bounded retry budget). If
@@ -117,7 +149,7 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
       mediapipeReady ||
       mediapipeLoading ||
       unsupportedEnvironment ||
-      mediapipeInitAttempts >= MAX_MEDIAPIPE_INIT_ATTEMPTS ||
+      mediapipeInitAttemptsRef.current >= MAX_MEDIAPIPE_INIT_ATTEMPTS ||
       isCypress
     )
       return undefined;
@@ -127,8 +159,8 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
 
     const loadMediapipe = async () => {
       setMediapipeLoading(true);
-      const attemptNumber = mediapipeInitAttempts + 1;
-      setMediapipeInitAttempts(attemptNumber);
+      const attemptNumber = mediapipeInitAttemptsRef.current + 1;
+      mediapipeInitAttemptsRef.current = attemptNumber;
       try {
         await getMediapipeInstance();
         if (cancelled) return;
@@ -145,8 +177,8 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
         // Report to Sentry (when the host page has exposed it on window) so we
         // can observe how often users land on the fallback path and which
         // environments are affected. Dedup so retries don't flood Sentry.
-        if (!mediapipeInitReported) {
-          setMediapipeInitReported(true);
+        if (!mediapipeInitReportedRef.current) {
+          mediapipeInitReportedRef.current = true;
           window.Sentry?.captureException(error, {
             tags: {
               area: 'mediapipe_init',
@@ -164,6 +196,7 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
         if (isUnsupportedEnvironment) {
           setUnsupportedEnvironment(true);
           setLoadingProgress(100);
+          setLoadDeadlineExceeded(true);
           setMediapipeLoading(false);
           return;
         }
@@ -194,22 +227,23 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
         clearTimeout(retryTimeoutId);
       }
     };
-  }, [
-    mediapipeReady,
-    mediapipeLoading,
-    unsupportedEnvironment,
-    mediapipeInitAttempts,
-    mediapipeInitReported,
-  ]);
+  }, [mediapipeReady, mediapipeLoading, unsupportedEnvironment]);
 
-  // When using the loading countdown (startCountdown), increment the
-  // visible loading progress. This is only used while mediapipe hasn't
-  // reported ready; once mediapipeReady becomes true we stop the timer.
+  // Cosmetic loading progress: ticks 0→100 over `loadingTime` so the UI can
+  // show "slow connection" copy past the SLOW_CONNECTION_THRESHOLD. This is
+  // purely visual — it does NOT decide when we fall back. The decision is
+  // driven by `loadDeadlineExceeded` below.
   useEffect(() => {
     if (hidden || !startCountdown || mediapipeReady) return undefined;
 
     const timer = setInterval(() => {
-      setLoadingProgress((prev: number) => Math.min(prev + 1, 100));
+      setLoadingProgress((prev: number) => {
+        if (prev >= 100) {
+          clearInterval(timer);
+          return 100;
+        }
+        return prev + 1;
+      });
     }, loadingTime / 100);
 
     return () => {
@@ -217,8 +251,43 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     };
   }, [hidden, startCountdown, loadingTime, mediapipeReady]);
 
+  // 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)
+      return undefined;
+
+    const id = setTimeout(() => {
+      setLoadDeadlineExceeded(true);
+    }, loadingTime);
+
+    return () => clearTimeout(id);
+  }, [hidden, mediapipeReady, loadDeadlineExceeded, loadingTime, isCypress]);
+
+  // Latch the legacy fallback decision in an effect rather than during
+  // render. Effects only run after commit, so by the time this runs, any
+  // Mediapipe-ready update scheduled in the same batch as the deadline tick
+  // will already be visible — closing the race where `setLoadDeadlineExceeded`
+  // and `setMediapipeReady` fire in adjacent microtasks.
+  useEffect(() => {
+    if (hidden || usingSelfieCapture || mediapipeReady) return;
+    if (!loadDeadlineExceeded) return;
+    const legacyFallbackAllowed = allowLegacySelfieFallback || isCypress;
+    if (!legacyFallbackAllowed) return;
+    setUsingSelfieCapture(true);
+  }, [
+    hidden,
+    usingSelfieCapture,
+    mediapipeReady,
+    loadDeadlineExceeded,
+    allowLegacySelfieFallback,
+    isCypress,
+  ]);
+
   useEffect(() => {
-    if (hidden || mediapipeReady || loadingProgress < 100) return undefined;
+    if (hidden || mediapipeReady || !loadDeadlineExceeded) return undefined;
 
     const setupEventForwarding = () => {
       const selfieCapture = document.querySelector('selfie-capture');
@@ -267,7 +336,7 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     return () => {
       clearTimeout(timeoutId);
     };
-  }, [hidden, mediapipeReady, loadingProgress]);
+  }, [hidden, mediapipeReady, loadDeadlineExceeded]);
 
   // Dispatch allow_legacy_selfie_fallback config for observability
   useEffect(() => {
@@ -312,60 +381,55 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     return <SmartSelfieCapture {...props} />;
   }
 
-  if (loadingProgress >= 100) {
-    // When loading completes without Mediapipe becoming ready, check if legacy
-    // fallback is allowed. Legacy is allowed if:
-    // 1. allow-legacy-selfie-fallback attribute is set to true, OR
-    // 2. Running under Cypress (to keep existing test behavior)
-    const legacyFallbackAllowed = allowLegacySelfieFallback || isCypress;
+  // Legacy capture is mounted only once the latch effect has set
+  // `usingSelfieCapture`. The effect re-checks `mediapipeReady` after commit,
+  // so if Mediapipe became ready in the same batch as the deadline tick, the
+  // latch is skipped and the SmartSelfie branch above wins. While we're
+  // waiting for the effect to fire (a single microtask), keep showing the
+  // spinner instead of flashing legacy.
+  if (usingSelfieCapture) {
+    const propsWithoutHidden = { ...props };
+    delete (propsWithoutHidden as any).hidden;
 
-    if (legacyFallbackAllowed) {
-      // Mount the legacy `selfie-capture` web component. We also set
-      // `usingSelfieCapture` so other effects can react (e.g. metadata dispatch).
-      if (!usingSelfieCapture) {
-        setUsingSelfieCapture(true);
-      }
-
-      const propsWithoutHidden = { ...props };
-      delete (propsWithoutHidden as any).hidden;
-
-      return (
-        // @ts-expect-error --- preact-custom-element doesn't have proper types for refs
-        <selfie-capture
-          {...propsWithoutHidden}
-          ref={(el: HTMLElement) => {
-            if (el && !el.hasAttribute('data-events-setup')) {
-              el.setAttribute('data-events-setup', 'true');
-
-              const forwardEvent = (event: Event) => {
-                const customEvent = event as CustomEvent;
-
-                if (
-                  customEvent.type === 'selfie-capture.publish' ||
-                  customEvent.type === 'selfie-capture.cancelled' ||
-                  customEvent.type === 'selfie-capture.close'
-                ) {
-                  setInitialSessionCompleted(true);
-                }
-
-                window.dispatchEvent(
-                  new CustomEvent(customEvent.type, {
-                    detail: customEvent.detail,
-                    bubbles: true,
-                  }),
-                );
-              };
-
-              el.addEventListener('selfie-capture.publish', forwardEvent);
-              el.addEventListener('selfie-capture.cancelled', forwardEvent);
-              el.addEventListener('selfie-capture.close', forwardEvent);
-            }
-          }}
-        />
-      );
-    }
+    return (
+      // @ts-expect-error --- preact-custom-element doesn't have proper types for refs
+      <selfie-capture
+        {...propsWithoutHidden}
+        ref={(el: HTMLElement) => {
+          if (el && !el.hasAttribute('data-events-setup')) {
+            el.setAttribute('data-events-setup', 'true');
+
+            const forwardEvent = (event: Event) => {
+              const customEvent = event as CustomEvent;
+
+              if (
+                customEvent.type === 'selfie-capture.publish' ||
+                customEvent.type === 'selfie-capture.cancelled' ||
+                customEvent.type === 'selfie-capture.close'
+              ) {
+                setInitialSessionCompleted(true);
+              }
+
+              window.dispatchEvent(
+                new CustomEvent(customEvent.type, {
+                  detail: customEvent.detail,
+                  bubbles: true,
+                }),
+              );
+            };
+
+            el.addEventListener('selfie-capture.publish', forwardEvent);
+            el.addEventListener('selfie-capture.cancelled', forwardEvent);
+            el.addEventListener('selfie-capture.close', forwardEvent);
+          }
+        }}
+      />
+    );
+  }
 
-    // Legacy fallback is NOT allowed: show error message
+  // Hard deadline elapsed and legacy fallback isn't allowed: show the
+  // connection error.
+  if (loadDeadlineExceeded && !(allowLegacySelfieFallback || isCypress)) {
     return (
       <div style={{ textAlign: 'center', marginTop: '20%', padding: '0 20px' }}>
         <p style={{ fontSize: '1.2rem', color: '#333' }}>

package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.tsx

@@ -3,6 +3,7 @@ import register from 'preact-custom-element';
 import type { FunctionComponent } from 'preact';
 
 import { getBoolProp } from '../../../../utils/props';
+import { translate } from '../../../../domain/localisation';
 import { useFaceCapture, useCamera } from './hooks';
 import { CameraPreview } from './components/CameraPreview';
 import { AlertDisplay } from './components/AlertDisplay';
@@ -61,8 +62,8 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
     getFacingMode: () => camera.facingMode,
   });
 
-  useEffect(() => {
-    const initializeCamera = async () => {
+  const initializeCamera = async () => {
+    try {
       await camera.startCamera(initialFacingMode, (cameraName) => {
         const smartCameraWeb = document.querySelector('smart-camera-web');
         smartCameraWeb?.dispatchEvent(
@@ -71,15 +72,20 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
           }),
         );
       });
-      await camera.checkAgentSupport();
-      await faceCapture.initializeFaceLandmarker();
+    } catch {
+      // startCamera already set cameraError; surface UI and skip downstream init
+      return;
+    }
+    await camera.checkAgentSupport();
+    await faceCapture.initializeFaceLandmarker();
 
-      setTimeout(() => {
-        faceCapture.setupCanvas();
-        faceCapture.startDetectionLoop();
-      }, 500);
-    };
+    setTimeout(() => {
+      faceCapture.setupCanvas();
+      faceCapture.startDetectionLoop();
+    }, 500);
+  };
 
+  useEffect(() => {
     camera.registerCameraSwitchCallback(() => {
       try {
         faceCapture.resetFaceDetectionState();
@@ -142,39 +148,57 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
         <smileid-navigation ref={navigationRef} theme-color={themeColor} />
       )}
 
-      <CameraPreview
-        videoRef={camera.videoRef}
-        canvasRef={canvasRef}
-        facingMode={camera.facingMode}
-        progress={
-          faceCapture.capturesTaken.value > 0
-            ? faceCapture.capturesTaken.value / faceCapture.totalCaptures.value
-            : 0
-        }
-        interval={interval}
-        themeColor={themeColor}
-      />
-
-      <AlertDisplay alertTitle={faceCapture.alertTitle.value} />
-
-      {!faceCapture.isCapturing.value &&
-        !faceCapture.hasFinishedCapture.value && (
-          <CaptureControls
-            isCapturing={faceCapture.isCapturing.value}
-            hasFinishedCapture={faceCapture.hasFinishedCapture.value}
-            isReadyToCapture={faceCapture.isReadyToCapture.value}
-            captureButtonFallbackEnabled={
-              faceCapture.captureButtonFallbackEnabled.value
-            }
-            allowAgentMode={allowAgentMode}
-            agentSupported={camera.agentSupported}
-            showAgentModeForTests={showAgentModeForTests}
+      {camera.cameraError ? (
+        <div className="camera-error" role="alert">
+          <p>{camera.cameraError}</p>
+          <button
+            type="button"
+            className="btn-primary"
+            onClick={() => {
+              initializeCamera();
+            }}
+          >
+            {translate('camera.error.retry')}
+          </button>
+        </div>
+      ) : (
+        <>
+          <CameraPreview
+            videoRef={camera.videoRef}
+            canvasRef={canvasRef}
             facingMode={camera.facingMode}
+            progress={
+              faceCapture.capturesTaken.value > 0
+                ? faceCapture.capturesTaken.value /
+                  faceCapture.totalCaptures.value
+                : 0
+            }
+            interval={interval}
             themeColor={themeColor}
-            onStartCapture={faceCapture.startCapture}
-            onSwitchCamera={camera.switchCamera}
           />
-        )}
+
+          <AlertDisplay alertTitle={faceCapture.alertTitle.value} />
+
+          {!faceCapture.isCapturing.value &&
+            !faceCapture.hasFinishedCapture.value && (
+              <CaptureControls
+                isCapturing={faceCapture.isCapturing.value}
+                hasFinishedCapture={faceCapture.hasFinishedCapture.value}
+                isReadyToCapture={faceCapture.isReadyToCapture.value}
+                captureButtonFallbackEnabled={
+                  faceCapture.captureButtonFallbackEnabled.value
+                }
+                allowAgentMode={allowAgentMode}
+                agentSupported={camera.agentSupported}
+                showAgentModeForTests={showAgentModeForTests}
+                facingMode={camera.facingMode}
+                themeColor={themeColor}
+                onStartCapture={faceCapture.startCapture}
+                onSwitchCamera={camera.switchCamera}
+              />
+            )}
+        </>
+      )}
 
       {/* @ts-expect-error -- preact-custom-element doesn't have proper types for refs */}
       {!hideAttribution && <powered-by-smile-id />}
@@ -227,6 +251,15 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
           padding: 1rem;
           font-family: sans-serif;
         }
+
+        .camera-error {
+          margin-top: 1.5rem;
+          padding: 1rem 1.5rem;
+          color: #b00020;
+          text-align: center;
+          font-size: 1rem;
+          font-weight: 500;
+        }
       `}</style>
     </div>
   );

package/lib/components/selfie/src/smartselfie-capture/hooks/useCamera.ts

@@ -1,10 +1,12 @@
 import { useRef, useState, useEffect } from 'preact/hooks';
+import SmartCamera from '../../../../../domain/camera/src/SmartCamera';
 
 export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const [facingMode, setFacingMode] = useState(initialFacingMode);
   const [agentSupported, setAgentSupported] = useState(false);
+  const [cameraError, setCameraError] = useState<string | null>(null);
   const onCameraSwitchCallbackRef = useRef<(() => void) | null>(null);
   const isSwitchingCameraRef = useRef(false);
   const timeoutIdsRef = useRef<Set<NodeJS.Timeout>>(new Set());
@@ -63,6 +65,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
         video: { facingMode: targetFacingMode || facingMode },
       });
       streamRef.current = stream;
+      setCameraError(null);
 
       const track = stream.getVideoTracks()[0];
       const settings = track.getSettings();
@@ -94,9 +97,15 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
       }
     } catch (error) {
       console.error('Failed to start camera:', error);
+      setCameraError(SmartCamera.handleCameraError(error as Error));
+      throw error;
     }
   };
 
+  const retryCamera = async () => {
+    await startCamera(facingMode);
+  };
+
   const switchCamera = async () => {
     const newFacingMode = facingMode === 'user' ? 'environment' : 'user';
     isSwitchingCameraRef.current = true;
@@ -118,6 +127,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
         await startCamera(previousFacingMode);
       } catch (restoreError) {
         console.error('Failed to restore previous camera:', restoreError);
+        setCameraError(SmartCamera.handleCameraError(restoreError as Error));
       }
     }
   };
@@ -229,7 +239,9 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
     streamRef,
     facingMode,
     agentSupported,
+    cameraError,
     startCamera,
+    retryCamera,
     switchCamera,
     checkAgentSupport,
     stopCamera,

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "11.4.2",
+  "version": "11.4.4",
   "private": false,
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
@@ -76,6 +76,15 @@
   ],
   "type": "module",
   "author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smileidentity/web-client.git",
+    "directory": "packages/web-components"
+  },
+  "bugs": {
+    "url": "https://github.com/smileidentity/web-client/issues"
+  },
+  "homepage": "https://github.com/smileidentity/web-client#readme",
   "dependencies": {
     "@lottiefiles/dotlottie-web": "^0.71.0",
     "@mediapipe/tasks-vision": "^0.10.22-rc.20250304",