@smileid/web-components 11.4.5 → 11.6.0

package/lib/components/document/src/document-auto-capture/index.ts

@@ -0,0 +1,4 @@
+import DocumentAutoCapture from './DocumentAutoCapture';
+
+export default DocumentAutoCapture;
+export { DocumentAutoCapture };

package/lib/components/document/src/document-auto-capture/theme.ts

@@ -0,0 +1,40 @@
+// Local theme palette/tokens used by the auto-capture screen.
+export const theme = {
+  colors: {
+    background: '#F8FAFC',
+    surface: '#FFFFFF',
+    text: '#1A1A1A',
+    textSecondary: '#667085',
+    primary: '#151F72',
+    primaryText: '#FFFFFF',
+    secondary: '#F2F4F7',
+    secondaryText: '#344054',
+    success: '#2CC05C',
+    warning: '#F79009',
+    error: '#F04438',
+    border: '#E4E7EC',
+    overlay: 'rgba(0, 0, 0, 0.55)',
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+    xxl: '48px',
+  },
+  radii: {
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+    xl: '24px',
+  },
+  fonts: {
+    base: "'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+  },
+  shadows: {
+    sm: '0 1px 2px rgba(16, 24, 40, 0.05)',
+    md: '0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06)',
+    lg: '0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03)',
+  },
+};

package/lib/components/document/src/document-auto-capture/utils/debug.ts

@@ -0,0 +1,25 @@
+// Debug switch for the document auto-capture tooling (TuningPanel, ROI overlay,
+// verbose console logs). Two conditions must BOTH hold:
+//
+// 1. Build-time gate `__SMILE_DEBUG__` — injected by the web-components Vite
+//    `define` (see vite.config.ts): true for dev + preview builds, false for
+//    production / npm-publish builds. This makes debug impossible to enable in
+//    production no matter what.
+// 2. Runtime `?debug` URL param — the explicit per-session opt-in. The embed
+//    forwards the host page's `?debug` into the capture iframe
+//    (embed/src/js/script.js), so it reaches the component there too.
+//
+// Result: `?debug` toggles the tooling in dev + preview, and is inert in prod.
+//
+// `__SMILE_DEBUG__` is declared globally (lib/types.d.ts); the `typeof` guard
+// avoids a ReferenceError under any bundler/test runner that doesn't inject the
+// define (→ disabled).
+export const isDebugEnabled = (): boolean => {
+  if (typeof __SMILE_DEBUG__ === 'undefined' || __SMILE_DEBUG__ !== true) {
+    return false;
+  }
+  return (
+    typeof window !== 'undefined' &&
+    new URLSearchParams(window.location.search).has('debug')
+  );
+};

package/lib/components/document/src/document-auto-capture/utils/opencvLoader.ts

@@ -0,0 +1,86 @@
+/**
+ * Lazy-load the OpenCV.js runtime exactly once. Resolves when `cv.Mat` is
+ * available (the runtime initialises asynchronously after the script loads).
+ *
+ * Hosts that already include opencv.js via a <script> tag will short-circuit
+ * — calling this function is a no-op once `window.cv.Mat` is defined.
+ */
+const OPENCV_SRC =
+  'https://web-models.smileidentity.com/open-cv/4.8.0-opencv.min.js';
+
+declare global {
+  interface Window {
+    cv?: { Mat?: unknown } & Record<string, unknown>;
+  }
+}
+
+let inflight: Promise<void> | null = null;
+
+// `typeof window === 'undefined'` covers server-side rendering hosts
+// (React + Next.js, Remix, Astro, etc.) that import the bundle on the
+// server during page generation. There's nothing to load there — the
+// browser will run this again on hydration.
+function isReady(): boolean {
+  return typeof window !== 'undefined' && !!window.cv && !!window.cv.Mat;
+}
+
+export function ensureOpenCv(): Promise<void> {
+  // SSR no-op (see isReady above).
+  if (typeof window === 'undefined') return Promise.resolve();
+  if (isReady()) return Promise.resolve();
+  if (inflight) return inflight;
+
+  const pending = new Promise<void>((resolve, reject) => {
+    const existing = document.querySelector(
+      `script[data-opencv-loader], script[src="${OPENCV_SRC}"]`,
+    );
+
+    const waitForRuntime = () => {
+      if (isReady()) {
+        resolve();
+        return;
+      }
+      // opencv.js sets a `Module.onRuntimeInitialized` hook; fall back to polling
+      // because some hosts replace the global Module object before we can patch it.
+      const start = Date.now();
+      const poll = () => {
+        if (isReady()) {
+          resolve();
+          return;
+        }
+        // Matches the 20s readiness window in useCardDetection (cvLoadFailed)
+        // and the documented behaviour — past this point the component has
+        // already surfaced the manual-capture fallback, so waiting longer is
+        // pointless.
+        if (Date.now() - start > 20_000) {
+          reject(new Error('OpenCV runtime did not initialise within 20s'));
+          return;
+        }
+        setTimeout(poll, 100);
+      };
+      poll();
+    };
+
+    if (existing) {
+      waitForRuntime();
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = OPENCV_SRC;
+    script.async = true;
+    script.dataset.opencvLoader = 'document-auto-capture';
+    script.onload = waitForRuntime;
+    script.onerror = () => reject(new Error('Failed to load opencv.js'));
+    document.head.appendChild(script);
+  });
+
+  // Clear the cached promise on failure (load error / init timeout) so a later
+  // call can retry instead of getting the same rejected promise forever.
+  pending.catch(() => {
+    if (inflight === pending) inflight = null;
+  });
+
+  inflight = pending;
+  return pending;
+}