@tn3w/openage 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tn3w/openage",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "description": "Privacy-first age verification widget. On-device face analysis with liveness detection.",
     "type": "module",
     "main": "dist/openage.umd.js",

package/src/challenge.js

@@ -27,6 +27,7 @@ import {
 import {
     BURST_FRAMES,
     BURST_INTERVAL_MS,
+    ERROR_STEP_SECONDS,
     MAX_RETRIES,
     MOTION_CAPTURE_MS,
     MOTION_SAMPLE_MS,
@@ -110,6 +111,73 @@ function sleep(ms) {
     return new Promise((r) => setTimeout(r, ms));
 }
 
+function resolveChallengeErrorMessage(error) {
+    const name = typeof error?.name === 'string' ? error.name : '';
+    const message = typeof error?.message === 'string' ? error.message : String(error || '');
+    const normalized = `${name} ${message}`.toLowerCase();
+
+    if (
+        name === 'NotFoundError' ||
+        /request is not allowed by the user agent or the platform in the current context/.test(
+            normalized
+        ) ||
+        /requested device not found|device not found|no camera|could not start video source/.test(
+            normalized
+        )
+    ) {
+        return 'No camera available. Plug in a camera and try again.';
+    }
+
+    if (
+        name === 'NotAllowedError' ||
+        name === 'PermissionDeniedError' ||
+        /permission|camera access|access denied/.test(normalized)
+    ) {
+        return 'Camera access was blocked. Allow camera access and try again.';
+    }
+
+    if (/positioning timeout/.test(normalized)) {
+        return 'Face positioning timed out. Reopen the check and try again.';
+    }
+
+    return 'Verification failed. Please try again.';
+}
+
+function isInlineLayout(widget) {
+    return widget?.params?.layout === 'inline';
+}
+
+async function showErrorStep(widget, error) {
+    const message = resolveChallengeErrorMessage(error);
+
+    if (isInlineLayout(widget)) {
+        widget.showResult?.('retry', message);
+        return;
+    }
+
+    if (!widget.popup) {
+        widget.openPopup?.();
+    }
+
+    widget.showError?.(message);
+
+    for (let seconds = ERROR_STEP_SECONDS; seconds > 0; seconds--) {
+        if (!widget.popup) break;
+        widget.setErrorCountdown?.(seconds);
+        await sleep(1000);
+    }
+
+    widget.closePopup?.();
+    widget.setState?.('retry');
+}
+
+async function handleChallengeError(widget, emitter, error) {
+    console.log('Error during challenge:', error);
+    await showErrorStep(widget, error);
+    emitter.emit('error', error, widget.id);
+    widget.params.errorCallback?.(error);
+}
+
 export async function runChallenge(widget, emitter) {
     const mode = widget.params.mode || 'serverless';
 
@@ -139,10 +207,14 @@ async function runServerless(widget, emitter) {
         await Promise.all([loadVision(), initAgeEstimator()]);
 
         modelBuffer = await loadModel();
-        widget.showReady();
 
-        await waitForStart(widget);
-        await startCameraFlow(widget, modelBuffer);
+        if (isInlineLayout(widget)) {
+            await startCameraFlow(widget, modelBuffer);
+        } else {
+            widget.showReady();
+            await waitForStart(widget);
+            await startCameraFlow(widget, modelBuffer);
+        }
 
         const transport = createTransport('serverless', params);
 
@@ -190,10 +262,7 @@ async function runServerless(widget, emitter) {
         emitResult(widget, emitter, result);
     } catch (error) {
         cleanupLocal();
-        console.log('Error during challenge:', error);
-        widget.showResult('fail', 'Verification failed');
-        emitter.emit('error', error, widget.id);
-        params.errorCallback?.(error);
+        await handleChallengeError(widget, emitter, error);
     }
 }
 
@@ -234,10 +303,16 @@ async function runServer(widget, emitter) {
             captureFrame: () => (captureFrame() ? 'true' : 'null'),
         });
 
-        widget.showReady();
-        await waitForStart(widget);
+        let video;
+
+        if (isInlineLayout(widget)) {
+            video = widget.showCamera();
+        } else {
+            widget.showReady();
+            await waitForStart(widget);
+            video = widget.showCamera();
+        }
 
-        const video = widget.showCamera();
         widget.setVideoStatus('Requesting camera…');
         await startCamera(video);
         exposeMirrorVideo(video);
@@ -324,11 +399,8 @@ async function runServer(widget, emitter) {
 
         cleanupVM(transport);
     } catch (error) {
-        console.log('Error during challenge:', error);
         cleanupVM();
-        widget.showResult('fail', 'Verification failed');
-        emitter.emit('error', error, widget.id);
-        params.errorCallback?.(error);
+        await handleChallengeError(widget, emitter, error);
     }
 }
 

package/src/constants.d.ts

@@ -8,6 +8,7 @@ export declare const FACEAPI_MODEL_CDN: string;
 export declare const DEFAULT_MIN_AGE: number;
 export declare const FAIL_FLOOR: number;
 export declare const MAX_RETRIES: number;
+export declare const ERROR_STEP_SECONDS: number;
 export declare const BURST_FRAMES: number;
 export declare const BURST_INTERVAL_MS: number;
 export declare const POSITION_CHECK_MS: number;

package/src/constants.js

@@ -1,6 +1,6 @@
 export const VERSION = '1.0.0';
 
-export const MEDIAPIPE_CDN = 'https://cdn.jsdelivr.net/npm/' + '@mediapipe/tasks-vision@0.10.17';
+export const MEDIAPIPE_CDN = 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17';
 
 export const MEDIAPIPE_WASM = `${MEDIAPIPE_CDN}/wasm`;
 
@@ -11,13 +11,13 @@ export const MEDIAPIPE_MODEL =
     'face_landmarker/face_landmarker/float16/1/' +
     'face_landmarker.task';
 
-export const FACEAPI_CDN =
-    'https://cdn.jsdelivr.net/npm/' + 'face-api.js@0.22.2/dist/face-api.min.js';
+export const FACEAPI_CDN = 'https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js';
 
 export const FACEAPI_MODEL_CDN =
-    'https://cdn.jsdelivr.net/gh/' + 'justadudewhohacks/face-api.js@master/weights';
+    'https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@master/weights';
 
 export const MAX_RETRIES = 3;
+export const ERROR_STEP_SECONDS = 5;
 export const BURST_FRAMES = 5;
 export const BURST_INTERVAL_MS = 200;
 export const POSITION_CHECK_MS = 100;

package/src/index.d.ts

@@ -82,6 +82,7 @@ declare global {
       sitekey?: string;
       server?: string;
       mode?: "serverless" | "sitekey" | "custom";
+      layout?: "widget" | "inline" | "embed" | "embedded";
       locale?: string;
       theme?: "light" | "dark" | "auto";
       render?: "explicit";

package/src/index.js

@@ -52,8 +52,19 @@ export class EventEmitter {
 const emitter = new EventEmitter();
 const widgets = new Map();
 
+function normalizeLayout(layout) {
+    if (layout === 'inline' || layout === 'embed' || layout === 'embedded') {
+        return 'inline';
+    }
+
+    return 'widget';
+}
+
 function normalizeParams(params) {
     const globalConfig = typeof window !== 'undefined' ? window.openage || {} : {};
+    const layout = normalizeLayout(
+        params.layout ?? params.display ?? globalConfig.layout ?? globalConfig.display
+    );
 
     return {
         mode: 'serverless',
@@ -62,6 +73,7 @@ function normalizeParams(params) {
         minAge: 18,
         ...globalConfig,
         ...params,
+        layout,
     };
 }
 
@@ -70,6 +82,10 @@ function startWidget(widget) {
         emitter.emit('opened', widget.id);
         runChallenge(widget, emitter);
     };
+
+    if (widget.params.layout === 'inline') {
+        widget.startChallenge();
+    }
 }
 
 function render(container, params = {}) {
@@ -218,6 +234,7 @@ function autoRender() {
             size: element.dataset.size,
             action: element.dataset.action,
             mode: element.dataset.mode,
+            layout: element.dataset.layout || element.dataset.display,
             server: element.dataset.server,
         };
 

package/src/ui.d.ts

@@ -17,6 +17,10 @@ export declare function heroTemplate(
 
 export declare function challengeTemplate(): string;
 
+export declare function errorStepTemplate(
+  message: string
+): string;
+
 export declare function resultTemplate(
   outcome: "fail" | "retry",
   message: string

package/src/ui.js

@@ -541,6 +541,20 @@ export const STYLES = `
   flex-direction: column;
 }
 
+.oa-inline-shell {
+  background: var(--oa-bg);
+  border: 1px solid var(--oa-border);
+  border-radius: var(--oa-radius);
+  box-shadow: 0 20px 60px rgba(0,0,0,0.18),
+    0 0 0 1px rgba(0,0,0,0.06);
+  width: min(100%, 360px);
+  max-width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+}
+
 .oa-modal-overlay {
   position: fixed;
   inset: 0;
@@ -893,6 +907,52 @@ export const STYLES = `
 .oa-result-fail { color: var(--oa-danger); }
 .oa-result-retry { color: var(--oa-warn); }
 
+.oa-error-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 2rem 1.2rem;
+  background: var(--oa-surface);
+  border: 1px solid var(--oa-border);
+  border-radius: var(--oa-radius);
+  margin: 10px;
+  animation: oa-fade-in 0.4s ease;
+  text-align: center;
+}
+
+.oa-error-step-icon {
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(239, 68, 68, 0.12);
+  color: var(--oa-danger);
+  font-size: 1.7rem;
+  line-height: 1;
+}
+
+.oa-error-step-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--oa-text);
+}
+
+.oa-error-step-message {
+  font-size: 0.84rem;
+  line-height: 1.5;
+  color: var(--oa-text-muted);
+  max-width: 260px;
+}
+
+.oa-error-step-countdown {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--oa-danger);
+}
+
 .oa-hidden { display: none !important; }
 
 /* ── Animations ──────────────────────────────── */
@@ -1019,6 +1079,17 @@ export function challengeTemplate() {
   `;
 }
 
+export function errorStepTemplate(message) {
+    return `
+    <div class="oa-error-step">
+      <div class="oa-error-step-icon">✕</div>
+      <div class="oa-error-step-title">Verification stopped</div>
+      <div class="oa-error-step-message">${message}</div>
+      <div class="oa-error-step-countdown"></div>
+    </div>
+  `;
+}
+
 export function resultTemplate(outcome, message) {
     const icons = {
         fail: '✕',

package/src/widget.d.ts

@@ -2,6 +2,7 @@ export interface WidgetParams {
   sitekey?: string;
   server?: string;
   mode?: "serverless" | "sitekey" | "custom";
+  layout?: "widget" | "inline" | "embed" | "embedded";
   theme?: "light" | "dark" | "auto";
   size?: "compact" | "normal" | "invisible";
   action?: string;
@@ -46,6 +47,7 @@ export declare class Widget {
     message: string
   ): void;
   showError(message: string): void;
+  setErrorCountdown(seconds: number): void;
   clearError(): void;
   setState(state: string): void;
   getToken(): string | null;

package/src/widget.js

@@ -3,6 +3,7 @@ import {
     checkboxTemplate,
     heroTemplate,
     challengeTemplate,
+    errorStepTemplate,
     resultTemplate,
     resolveTheme,
     watchTheme,
@@ -26,6 +27,7 @@ export class Widget {
         this.popup = null;
         this.shadow = null;
         this.elements = {};
+        this.popupElements = null;
         this.onChallenge = null;
         this.onStartClick = null;
         this.popupFrame = 0;
@@ -38,6 +40,7 @@ export class Widget {
         const host = document.createElement('div');
         host.id = this.id;
         this.shadow = host.attachShadow({ mode: 'open' });
+        this.host = host;
 
         const style = document.createElement('style');
         style.textContent = STYLES;
@@ -50,7 +53,12 @@ export class Widget {
         if (this.params.size === 'invisible') {
             host.style.display = 'none';
             this.container.appendChild(host);
-            this.host = host;
+            return;
+        }
+
+        if (this.isInlineLayout()) {
+            this.renderInlineShell();
+            this.container.appendChild(host);
             return;
         }
 
@@ -86,7 +94,32 @@ export class Widget {
         this.elements.errorSlot = this.shadow.querySelector('.oa-error-slot');
 
         this.container.appendChild(host);
-        this.host = host;
+    }
+
+    isInlineLayout() {
+        return this.params.layout === 'inline';
+    }
+
+    renderInlineShell() {
+        const inlineShell = document.createElement('div');
+        inlineShell.className = 'oa-inline-shell';
+        inlineShell.innerHTML = this.buildPopupContent({ closeable: false });
+        this.shadow.appendChild(inlineShell);
+
+        this.popup = {
+            host: this.host,
+            root: inlineShell,
+            inline: true,
+        };
+
+        this.bindPopupEvents(inlineShell);
+    }
+
+    resetInlineShell() {
+        if (!this.popup?.root) return;
+
+        this.popup.root.innerHTML = this.buildPopupContent({ closeable: false });
+        this.bindPopupEvents(this.popup.root);
     }
 
     startChallenge() {
@@ -119,6 +152,14 @@ export class Widget {
     }
 
     openPopup() {
+        if (this.isInlineLayout()) {
+            if (!this.popup) {
+                this.renderInlineShell();
+            }
+
+            return this.getVideo();
+        }
+
         if (this.popup) return this.getVideo();
 
         const anchor = this.getPopupAnchor();
@@ -296,7 +337,7 @@ export class Widget {
         this.popup.root.style.pointerEvents = 'auto';
     }
 
-    buildPopupContent() {
+    buildPopupContent({ closeable = true } = {}) {
         return `
       <div class="oa-header">
         <div class="oa-title">
@@ -307,10 +348,14 @@ export class Widget {
           </a>
           <span class="oa-badge">on-device</span>
         </div>
-        <button class="oa-close-btn"
-          aria-label="Close">
-          ${CLOSE_SVG}
-        </button>
+                ${
+                    closeable
+                        ? `<button class="oa-close-btn"
+                    aria-label="Close">
+                    ${CLOSE_SVG}
+                </button>`
+                        : ''
+                }
       </div>
       <div class="oa-body">
         ${heroTemplate('Initializing…')}
@@ -323,7 +368,7 @@ export class Widget {
     `;
     }
 
-    bindPopupEvents(root, shadow) {
+    bindPopupEvents(root) {
         const closeBtn = root.querySelector('.oa-close-btn');
         if (closeBtn) {
             closeBtn.addEventListener('click', () => {
@@ -441,6 +486,22 @@ export class Widget {
     }
 
     showResult(outcome, message) {
+        if (this.isInlineLayout()) {
+            if (!this.popupElements?.body) return;
+
+            this.popupElements.body.innerHTML = resultTemplate(outcome, message);
+            this.hideActions();
+
+            if (outcome === 'pass') {
+                this.setState('verified');
+                return;
+            }
+
+            this.setState(outcome === 'fail' ? 'failed' : 'retry');
+            this.showActions('Try Again');
+            return;
+        }
+
         if (outcome === 'pass') {
             this.closePopup();
             this.setState('verified');
@@ -476,8 +537,21 @@ export class Widget {
         }
     }
 
-    showError() {
-        this.setState('retry');
+    showError(message) {
+        if (!this.popupElements?.body) return;
+
+        this.popupElements.body.innerHTML = errorStepTemplate(message);
+        this.popupElements.errorCountdown = this.popupElements.body.querySelector(
+            '.oa-error-step-countdown'
+        );
+        this.hideActions();
+    }
+
+    setErrorCountdown(seconds) {
+        if (!this.popupElements?.errorCountdown) return;
+
+        const unit = seconds === 1 ? 'second' : 'seconds';
+        this.popupElements.errorCountdown.textContent = `Closing in ${seconds} ${unit}…`;
     }
 
     clearError() {
@@ -488,6 +562,22 @@ export class Widget {
 
     closePopup() {
         if (!this.popup) return;
+
+        if (this.popup.inline) {
+            this.popup.cleanup?.();
+            if (this.popupFrame) {
+                cancelAnimationFrame(this.popupFrame);
+                this.popupFrame = 0;
+            }
+            this.resetInlineShell();
+
+            if (this.state === 'loading') {
+                this.setState('idle');
+            }
+
+            return;
+        }
+
         this.popup.cleanup?.();
         this.popup.themeCleanup?.();
         this.popup.host.remove();