@tn3w/openage 1.0.5 → 1.0.6

package/README.md

@@ -16,11 +16,11 @@ button binding.
 
 ## At a Glance
 
-| Browser-side            | Server-backed              | UI                         |
-| ----------------------- | -------------------------- | -------------------------- |
-| On-device face analysis | Optional WASM verification | Embedded widget + popup    |
-| No raw camera upload    | Signed sessions and tokens | Normal, compact, invisible |
-| Serverless soft gates   | Hosted or custom backend   | Auto, light, dark          |
+| Browser-side            | Server-backed              | UI                               |
+| ----------------------- | -------------------------- | -------------------------------- |
+| On-device face analysis | Optional WASM verification | Widget popup, inline embed, bind |
+| No raw camera upload    | Signed sessions and tokens | Normal, compact, invisible       |
+| Serverless soft gates   | Hosted or custom backend   | Auto, light, dark                |
 
 ## Install
 
@@ -54,12 +54,27 @@ import OpenAge from '@tn3w/openage';
 
 OpenAge.render('#gate', {
     mode: 'serverless',
+    layout: 'inline',
     minAge: 18,
     callback: (token) => console.log(token),
     errorCallback: (error) => console.error(error),
 });
 ```
 
+### Inline Embed
+
+```js
+OpenAge.render('#gate', {
+    mode: 'serverless',
+    layout: 'inline',
+    minAge: 18,
+});
+```
+
+`layout: 'inline'` removes the checkbox shell and renders the verification
+panel directly in the container. The first verification step starts
+immediately after loading.
+
 ### Bound Flow
 
 ```js
@@ -104,6 +119,7 @@ the popup automatically after 5 seconds.
 | Param     | Values                            |
 | --------- | --------------------------------- |
 | `mode`    | `serverless`, `sitekey`, `custom` |
+| `layout`  | `widget`, `inline`                |
 | `theme`   | `light`, `dark`, `auto`           |
 | `size`    | `normal`, `compact`, `invisible`  |
 | `minAge`  | number, default `18`              |
@@ -122,7 +138,7 @@ python server.py
 ```
 
 The repository also includes `demo/`, a minimal GitHub Pages build that loads
-the jsDelivr bundle for `@tn3w/openage` in embedded `serverless` mode.
+the jsDelivr bundle for `@tn3w/openage` in inline embedded `serverless` mode.
 
 ## Development
 

package/dist/openage.esm.js

@@ -541,6 +541,20 @@ 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;
@@ -1108,8 +1122,7 @@ const MEDIAPIPE_MODEL =
     'face_landmarker/face_landmarker/float16/1/' +
     'face_landmarker.task';
 
-const FACEAPI_CDN =
-    'https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js';
+const FACEAPI_CDN = 'https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js';
 
 const FACEAPI_MODEL_CDN =
     'https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@master/weights';
@@ -1146,6 +1159,7 @@ class Widget {
         this.popup = null;
         this.shadow = null;
         this.elements = {};
+        this.popupElements = null;
         this.onChallenge = null;
         this.onStartClick = null;
         this.popupFrame = 0;
@@ -1158,6 +1172,7 @@ 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;
@@ -1170,7 +1185,12 @@ 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;
         }
 
@@ -1206,7 +1226,32 @@ 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() {
@@ -1239,6 +1284,14 @@ class Widget {
     }
 
     openPopup() {
+        if (this.isInlineLayout()) {
+            if (!this.popup) {
+                this.renderInlineShell();
+            }
+
+            return this.getVideo();
+        }
+
         if (this.popup) return this.getVideo();
 
         const anchor = this.getPopupAnchor();
@@ -1416,7 +1469,7 @@ class Widget {
         this.popup.root.style.pointerEvents = 'auto';
     }
 
-    buildPopupContent() {
+    buildPopupContent({ closeable = true } = {}) {
         return `
       <div class="oa-header">
         <div class="oa-title">
@@ -1427,10 +1480,14 @@ 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…')}
@@ -1443,7 +1500,7 @@ class Widget {
     `;
     }
 
-    bindPopupEvents(root, shadow) {
+    bindPopupEvents(root) {
         const closeBtn = root.querySelector('.oa-close-btn');
         if (closeBtn) {
             closeBtn.addEventListener('click', () => {
@@ -1561,6 +1618,22 @@ 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');
@@ -1600,8 +1673,9 @@ class Widget {
         if (!this.popupElements?.body) return;
 
         this.popupElements.body.innerHTML = errorStepTemplate(message);
-        this.popupElements.errorCountdown =
-            this.popupElements.body.querySelector('.oa-error-step-countdown');
+        this.popupElements.errorCountdown = this.popupElements.body.querySelector(
+            '.oa-error-step-countdown'
+        );
         this.hideActions();
     }
 
@@ -1620,6 +1694,22 @@ 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();
@@ -2819,9 +2909,18 @@ function resolveChallengeErrorMessage(error) {
     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?.();
     }
@@ -2874,10 +2973,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);
 
@@ -2966,10 +3069,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);
@@ -3272,8 +3381,19 @@ 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',
@@ -3282,6 +3402,7 @@ function normalizeParams(params) {
         minAge: 18,
         ...globalConfig,
         ...params,
+        layout,
     };
 }
 
@@ -3290,6 +3411,10 @@ function startWidget(widget) {
         emitter.emit('opened', widget.id);
         runChallenge(widget, emitter);
     };
+
+    if (widget.params.layout === 'inline') {
+        widget.startChallenge();
+    }
 }
 
 function render(container, params = {}) {
@@ -3438,6 +3563,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,
         };