@neurodyn/react-model-viewer 0.1.1 → 0.2.1

package/dist/index.d.ts

@@ -3,15 +3,50 @@ import { JSX } from 'react/jsx-runtime';
 import type { default as React_2 } from 'react';
 import * as React_3 from 'react';
 
+/**
+ * How long a tap may wait on a host's own AR before the native launch goes
+ * ahead instead.
+ *
+ * Chrome lets a page navigate on behalf of a tap for about five seconds, and
+ * the Scene Viewer intent is such a navigation: sent any later, the browser
+ * drops it as one nobody asked for. A host that loads its AR on the tap races
+ * the load against this, so a slow connection gets Scene Viewer for this tap
+ * and the host's AR for the next, the download having gone on meanwhile.
+ */
+export declare const AR_TAP_WINDOW_MS = 3000;
+
 /** What the host needs to open its own AR experience for the shown model. */
 export declare interface ArLaunchTarget {
+    /**
+     * The API the viewer's widget session was issued by, when the host set one.
+     * A host continuing that session has to refresh it there.
+     */
+    apiBaseUrl?: string;
+    /**
+     * The public key the viewer runs on — including one a QR handoff code
+     * resolved, which the host page never saw.
+     */
+    apiKey?: string;
     /** Material collection currently shown, which may differ from the entry url. */
     hid?: string;
+    /** The viewer's UI language, so the host's AR speaks the same one. */
+    lang?: 'en' | 'ru';
+    /** The object's display name, for the host AR's accessible label. */
+    name?: string;
     tinuuid: string;
+    /**
+     * A live token of the viewer's widget session, so the host's AR continues
+     * that session instead of activating a second one.
+     */
+    widgetSessionToken?: string;
 }
 
 declare type DialogProps = React_3.ComponentProps<typeof DialogPrimitive.Root>
 
+export declare function isIOSDevice(): boolean;
+
+export declare function isMobileArDevice(): boolean;
+
 /**
  * Lets the host open its own AR experience instead of the native one.
  *
@@ -27,9 +62,9 @@ export declare type ModelViewerArExperience = 'advanced' | 'standard';
 
 declare type ModelViewerBackground = 'default' | 'transparent';
 
-export declare function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initialWidgetSessionToken, handoffUrl, hid, lang, mode, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, ...props }: ModelViewerDialogProps): JSX.Element;
+export declare function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initialWidgetSessionToken, handoffUrl, hid, lang, launchAr, mode, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, ...props }: ModelViewerDialogProps): JSX.Element;
 
-export declare interface ModelViewerDialogProps extends Pick<ModelViewerRootProps, 'apiBaseUrl' | 'apiKey' | 'appClipBundleId' | 'cameraOrbit' | 'dimensionAxes' | 'handoffUrl' | 'hid' | 'initialWidgetSessionToken' | 'lang' | 'maxCameraOrbit' | 'minCameraOrbit' | 'mode' | 'sizeType' | 'tinuuid'>, Omit<DialogProps, 'children' | 'open' | 'defaultOpen' | 'onOpenChange' | 'modal'> {
+export declare interface ModelViewerDialogProps extends Pick<ModelViewerRootProps, 'apiBaseUrl' | 'apiKey' | 'appClipBundleId' | 'cameraOrbit' | 'dimensionAxes' | 'handoffUrl' | 'hid' | 'initialWidgetSessionToken' | 'lang' | 'launchAr' | 'maxCameraOrbit' | 'minCameraOrbit' | 'mode' | 'sizeType' | 'tinuuid'>, Omit<DialogProps, 'children' | 'open' | 'defaultOpen' | 'onOpenChange' | 'modal'> {
     /** The controlled open state of the dialog. Use with `onOpenChange`. */
     open?: DialogProps['open'];
     /** The initial open state when the dialog is uncontrolled. */
@@ -99,4 +134,7 @@ export declare type SizeAxis = 'x' | 'y' | 'z';
 
 export declare type SizeType = 'cm' | 'inch';
 
+/** The value, or `null` once the tap's window has passed; a rejection still rejects. */
+export declare function withinTapWindow<T>(promise: Promise<T>, windowMs?: number): Promise<T | null>;
+
 export { }

package/dist/index.js

@@ -494,6 +494,18 @@ var __webpack_modules__ = {
     inset-block: calc(var(--spacing) * 0);
   }
 
+  .start-2 {
+    inset-inline-start: calc(var(--spacing) * 2);
+  }
+
+  .end-2 {
+    inset-inline-end: calc(var(--spacing) * 2);
+  }
+
+  .end-4 {
+    inset-inline-end: calc(var(--spacing) * 4);
+  }
+
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -542,10 +554,6 @@ var __webpack_modules__ = {
     right: calc(var(--spacing) * 3);
   }
 
-  .right-4 {
-    right: calc(var(--spacing) * 4);
-  }
-
   .right-6 {
     right: calc(var(--spacing) * 6);
   }
@@ -558,15 +566,7 @@ var __webpack_modules__ = {
     left: calc(var(--spacing) * 0);
   }
 
-  .left-1\\/2 {
-    left: 50%;
-  }
-
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
-
-  .left-\\[50\\%\\] {
+  .left-1\\/2, .left-\\[50\\%\\] {
     left: 50%;
   }
 
@@ -680,6 +680,14 @@ var __webpack_modules__ = {
     margin-inline-start: -1px;
   }
 
+  .ms-4 {
+    margin-inline-start: calc(var(--spacing) * 4);
+  }
+
+  .ms-auto {
+    margin-inline-start: auto;
+  }
+
   .mt-1\\.5 {
     margin-top: calc(var(--spacing) * 1.5);
   }
@@ -708,14 +716,6 @@ var __webpack_modules__ = {
     margin-left: calc(var(--spacing) * 1);
   }
 
-  .ml-4 {
-    margin-left: calc(var(--spacing) * 4);
-  }
-
-  .ml-auto {
-    margin-left: auto;
-  }
-
   .box-border {
     box-sizing: border-box;
   }
@@ -1854,6 +1854,26 @@ var __webpack_modules__ = {
     padding-block: calc(var(--spacing) * 14);
   }
 
+  .ps-2 {
+    padding-inline-start: calc(var(--spacing) * 2);
+  }
+
+  .ps-3 {
+    padding-inline-start: calc(var(--spacing) * 3);
+  }
+
+  .ps-8 {
+    padding-inline-start: calc(var(--spacing) * 8);
+  }
+
+  .pe-2 {
+    padding-inline-end: calc(var(--spacing) * 2);
+  }
+
+  .pe-8 {
+    padding-inline-end: calc(var(--spacing) * 8);
+  }
+
   .pt-1\\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -1870,10 +1890,6 @@ var __webpack_modules__ = {
     padding-right: calc(var(--spacing) * 1);
   }
 
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
-  }
-
   .pr-2\\.5 {
     padding-right: calc(var(--spacing) * 2.5);
   }
@@ -1886,26 +1902,14 @@ var __webpack_modules__ = {
     padding-right: calc(var(--spacing) * 5);
   }
 
-  .pr-8 {
-    padding-right: calc(var(--spacing) * 8);
-  }
-
   .pb-\\[0\\.3125rem\\] {
     padding-bottom: 5px;
   }
 
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
-  }
-
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
 
-  .pl-8 {
-    padding-left: calc(var(--spacing) * 8);
-  }
-
   .text-center {
     text-align: center;
   }
@@ -1914,6 +1918,10 @@ var __webpack_modules__ = {
     text-align: left;
   }
 
+  .text-start {
+    text-align: start;
+  }
+
   .align-middle {
     vertical-align: middle;
   }
@@ -4155,6 +4163,10 @@ var __webpack_modules__ = {
     }
   }
 
+  .rtl\\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    rotate: 180deg;
+  }
+
   .dark\\:bg-input\\/30:is(.dark *) {
     background-color: var(--input);
   }
@@ -4734,8 +4746,17 @@ var __webpack_modules__ = {
   font-display: swap;
 }
 
+@font-face {
+  font-family: __tw4_shd_noto_arabic_7x4q2;
+  src: url("https://fonts.gstatic.com/s/notosansarabic/v33/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4r4xA.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+6??, U+750-77F, U+870-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
+}
+
 :root {
-  --v-font-family: "__tw4_shd_inter_7x4q2", sans-serif;
+  --v-font-family: "__tw4_shd_inter_7x4q2", "__tw4_shd_noto_arabic_7x4q2", sans-serif;
   font-family: var(--v-font-family);
   font-feature-settings: "liga" 1, "calt" 1;
   -webkit-font-smoothing: antialiased;
@@ -5374,6 +5395,15 @@ var __webpack_modules__ = {
   font-style: normal;
   font-display: swap;
 }
+
+@font-face {
+  font-family: __tw4_shd_noto_arabic_7x4q2;
+  src: url("https://fonts.gstatic.com/s/notosansarabic/v33/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4r4xA.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+6??, U+750-77F, U+870-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
+}
 `,
             ""
         ]);
@@ -5831,7 +5861,7 @@ function DialogContent({ className, children, contentInsideOverlay = false, show
             children,
             showCloseButton && /*#__PURE__*/ jsxs(react_dialog_Close, {
                 "data-slot": "dialog-close",
-                className: "focus-visible:ring-ring/30 absolute top-4 right-4 inline-flex size-6 cursor-pointer items-center justify-center rounded-full text-icons-light transition-colors hover:text-icons-normal focus-visible:text-icons-dark focus-visible:ring-2 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+                className: "focus-visible:ring-ring/30 absolute top-4 end-4 inline-flex size-6 cursor-pointer items-center justify-center rounded-full text-icons-light transition-colors hover:text-icons-normal focus-visible:text-icons-dark focus-visible:ring-2 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
                 children: [
                     /*#__PURE__*/ jsx(XIcon, {
                         className: "size-6"
@@ -6369,12 +6399,18 @@ function shouldRetryViewerQuery(failureCount, error) {
     return failureCount < 2;
 }
 const WIDGET_SESSION_TOKEN_HEADER = 'x-widget-session-token';
+const APP_TYPE_HEADER = 'x-app-type';
 const DEFAULT_REFRESH_THRESHOLD_MS = 30000;
 const ALLOWED_PRODUCT_TYPES = new Set([
     'core-ar',
     'core-ar-shopify'
 ]);
 const ASSUMED_HANDOFF_SESSION_TTL_SECONDS = 900;
+function getAppTypeHeaders(appType) {
+    return appType ? {
+        [APP_TYPE_HEADER]: appType
+    } : {};
+}
 async function activateCoreArWidgetSession(mode, requestConfig) {
     const activation = await publicApiControllerActivateCoreAR({
         mode
@@ -6385,6 +6421,7 @@ async function activateCoreArWidgetSession(mode, requestConfig) {
 class ModelViewerWidgetSession {
     apiBaseUrl;
     apiKey;
+    appTypeHeaders;
     issueWidgetToken;
     mode;
     now;
@@ -6394,6 +6431,7 @@ class ModelViewerWidgetSession {
     constructor(activationData, options){
         this.apiBaseUrl = options.apiBaseUrl;
         this.apiKey = options.apiKey;
+        this.appTypeHeaders = getAppTypeHeaders(options.appType);
         this.issueWidgetToken = options.issueWidgetToken ?? publicApiControllerIssueWidgetToken;
         this.mode = options.mode;
         this.now = options.now ?? Date.now;
@@ -6419,6 +6457,7 @@ class ModelViewerWidgetSession {
         return {
             baseURL: this.apiBaseUrl,
             headers: {
+                ...this.appTypeHeaders,
                 [WIDGET_SESSION_TOKEN_HEADER]: await this.getTokenForRequest()
             },
             signal
@@ -6427,10 +6466,12 @@ class ModelViewerWidgetSession {
     async recoverFromExpiry(signal) {
         try {
             await this.refresh();
-        } catch  {
+        } catch (error) {
+            if (!this.apiKey) throw error;
             this.session = this.toSnapshot(await activateCoreArWidgetSession(this.mode, {
                 baseURL: this.apiBaseUrl,
                 headers: {
+                    ...this.appTypeHeaders,
                     'x-api-key': this.apiKey
                 },
                 signal
@@ -6445,7 +6486,12 @@ class ModelViewerWidgetSession {
         }, {
             baseURL: this.apiBaseUrl,
             headers: {
-                'x-api-key': this.apiKey
+                ...this.appTypeHeaders,
+                ...this.apiKey ? {
+                    'x-api-key': this.apiKey
+                } : {
+                    [WIDGET_SESSION_TOKEN_HEADER]: this.session.token
+                }
             }
         }).then((data)=>this.toSnapshot(parseWidgetSession(data))).then((session)=>{
             this.session = session;
@@ -6462,7 +6508,28 @@ class ModelViewerWidgetSession {
         };
     }
 }
-async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, initialWidgetSessionToken, mode, signal }) {
+async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, appType, initialWidgetSessionToken, mode, signal }) {
+    if (initialWidgetSessionToken && !apiKey) try {
+        const exchanged = await publicApiControllerIssueWidgetToken({
+            mode,
+            token: initialWidgetSessionToken
+        }, {
+            baseURL: apiBaseUrl,
+            headers: {
+                ...getAppTypeHeaders(appType),
+                [WIDGET_SESSION_TOKEN_HEADER]: initialWidgetSessionToken
+            },
+            signal
+        });
+        return new ModelViewerWidgetSession(parseWidgetSession(exchanged), {
+            apiBaseUrl,
+            apiKey,
+            appType,
+            mode
+        });
+    } catch (error) {
+        if (signal?.aborted) throw error;
+    }
     if (initialWidgetSessionToken) return new ModelViewerWidgetSession({
         expiresIn: ASSUMED_HANDOFF_SESSION_TTL_SECONDS,
         sid: initialWidgetSessionToken,
@@ -6470,11 +6537,13 @@ async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, initialWidge
     }, {
         apiBaseUrl,
         apiKey,
+        appType,
         mode
     });
     const activationData = await activateCoreArWidgetSession(mode, {
         baseURL: apiBaseUrl,
         headers: {
+            ...getAppTypeHeaders(appType),
             'x-api-key': apiKey
         },
         signal
@@ -6482,6 +6551,7 @@ async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, initialWidge
     return new ModelViewerWidgetSession(activationData, {
         apiBaseUrl,
         apiKey,
+        appType,
         mode
     });
 }
@@ -6511,6 +6581,7 @@ async function sendModelViewerWidgetEvent(session, event, options = {}) {
             body: JSON.stringify({
                 event,
                 objectId: options.objectId ?? void 0,
+                page_path: currentPagePath(),
                 timestamp: new Date().toISOString(),
                 variantId: options.variantId ?? void 0
             }),
@@ -6537,12 +6608,13 @@ async function issueWidgetHandoffCode(session, params) {
         expiresIn: data.expiresIn
     };
 }
-async function resolveWidgetHandoffCode(apiBaseUrl, code) {
+async function resolveWidgetHandoffCode(apiBaseUrl, code, appType) {
     try {
         const data = await widgetHandoffControllerResolveHandoff({
             code
         }, {
-            baseURL: apiBaseUrl
+            baseURL: apiBaseUrl,
+            headers: getAppTypeHeaders(appType)
         });
         if (!data?.apiKey || !data.token) return null;
         return {
@@ -6558,6 +6630,10 @@ function parseWidgetSession(value) {
     if (!session || 'object' != typeof session || 'string' != typeof session.token || !session.token.trim() || 'string' != typeof session.sid || !session.sid.trim() || 'number' != typeof session.expiresIn || !Number.isFinite(session.expiresIn) || session.expiresIn <= 0) throw new TypeError('Invalid widget session response');
     return session;
 }
+function currentPagePath(locationRef = globalThis.location) {
+    const path = locationRef?.pathname;
+    return 'string' == typeof path && path.startsWith('/') ? path : void 0;
+}
 const MODEL_VIEWER_URL = "https://integrations.vizbl.com/model-viewer";
 const AR_DEVICE_REQUIREMENTS_DISCLAIMER = {
     en: '*Requires AR-supported device and browser. We recommend iOS 18 or later with Safari, or Android 7.0 or later with Chrome.',
@@ -6597,6 +6673,7 @@ function useObjectData(tinuuid, initialHid, options) {
             {
                 apiBaseUrl: options.apiBaseUrl ?? null,
                 apiKey: options.apiKey,
+                appType: options.appType ?? null,
                 handoffCode: options.handoffCode ?? null,
                 initialHid: initialHid ?? null,
                 initialWidgetSessionToken: options.initialWidgetSessionToken ?? null,
@@ -6609,12 +6686,13 @@ function useObjectData(tinuuid, initialHid, options) {
         refetchOnMount: 'always',
         queryFn: async ({ signal })=>{
             if (options.handoffCode) {
-                const resolved = readHandoffResolution(options.handoffCode) ?? await resolveWidgetHandoffCode(options.apiBaseUrl ?? window.location.origin, options.handoffCode);
+                const resolved = readHandoffResolution(options.handoffCode) ?? await resolveWidgetHandoffCode(options.apiBaseUrl ?? window.location.origin, options.handoffCode, options.appType);
                 if (!resolved) throw new WidgetHandoffExpiredError();
                 rememberHandoffResolution(options.handoffCode, resolved);
                 const widgetSession = await createModelViewerWidgetSession({
                     apiBaseUrl: options.apiBaseUrl,
                     apiKey: resolved.apiKey,
+                    appType: options.appType,
                     initialWidgetSessionToken: resolved.token,
                     mode: options.mode,
                     signal
@@ -6625,30 +6703,38 @@ function useObjectData(tinuuid, initialHid, options) {
                     widgetSession
                 };
             }
-            if (!options.apiKey) {
+            const readAnonymously = async ()=>{
                 const object = await readObject({
                     tinuuid
                 }, {
                     baseURL: options.apiBaseUrl,
+                    headers: getAppTypeHeaders(options.appType),
                     signal
                 });
                 return {
                     object,
                     widgetSession: null
                 };
-            }
-            const widgetSession = await createModelViewerWidgetSession({
-                apiBaseUrl: options.apiBaseUrl,
-                apiKey: options.apiKey,
-                initialWidgetSessionToken: options.initialWidgetSessionToken,
-                mode: options.mode,
-                signal
-            });
-            const object = await fetchModelViewerObject(tinuuid, initialHid, widgetSession, signal);
-            return {
-                object,
-                widgetSession
             };
+            if (!options.apiKey && !options.initialWidgetSessionToken) return readAnonymously();
+            try {
+                const widgetSession = await createModelViewerWidgetSession({
+                    apiBaseUrl: options.apiBaseUrl,
+                    apiKey: options.apiKey,
+                    appType: options.appType,
+                    initialWidgetSessionToken: options.initialWidgetSessionToken,
+                    mode: options.mode,
+                    signal
+                });
+                const object = await fetchModelViewerObject(tinuuid, initialHid, widgetSession, signal);
+                return {
+                    object,
+                    widgetSession
+                };
+            } catch (error) {
+                if (options.apiKey || signal.aborted || 401 !== getErrorResponseStatus(error)) throw error;
+                return readAnonymously();
+            }
         }
     });
     const object = data?.object ?? null;
@@ -6716,6 +6802,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
     const { object, material, error, isLoading, setMaterialHid: setObjectMaterialHid, widgetSession } = useObjectData(tinuuid, hid, {
         apiBaseUrl,
         apiKey,
+        appType: 'ru' === lang ? 'arizo' : 'vizbl',
         handoffCode,
         initialWidgetSessionToken,
         mode
@@ -6834,6 +6921,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
         widgetSession
     ]);
     const contextValue = external_react_useMemo(()=>({
+            apiBaseUrl,
             apiKey,
             appClipBundleId,
             arExperience,
@@ -6865,6 +6953,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
             setModelViewerEl,
             trackEvent
         }), [
+        apiBaseUrl,
         apiKey,
         appClipBundleId,
         arExperience,
@@ -6978,7 +7067,20 @@ async function launchArOverride(launchAr, target) {
         return false;
     }
 }
-function buildModelViewerHandoffUrl({ apiKey, arExperience, baseUrl, hid, mode, tinuuid, widgetSessionToken }) {
+const AR_TAP_WINDOW_MS = 3000;
+function withinTapWindow(promise, windowMs = AR_TAP_WINDOW_MS) {
+    return new Promise((resolve, reject)=>{
+        const timer = setTimeout(()=>resolve(null), windowMs);
+        promise.then((value)=>{
+            clearTimeout(timer);
+            resolve(value);
+        }, (error)=>{
+            clearTimeout(timer);
+            reject(error);
+        });
+    });
+}
+function buildModelViewerHandoffUrl({ apiKey, arExperience, baseUrl, hid, lang, mode, tinuuid, widgetSessionToken }) {
     if (!baseUrl || !tinuuid) return null;
     let url;
     try {
@@ -6992,6 +7094,7 @@ function buildModelViewerHandoffUrl({ apiKey, arExperience, baseUrl, hid, mode,
     else url.searchParams.delete('ar-experience');
     if (hid) url.searchParams.set('hid', hid);
     else url.searchParams.delete('hid');
+    setLang(url, lang);
     const fragment = new URLSearchParams(url.hash.slice(1));
     if (apiKey) fragment.set('api-key', apiKey);
     else fragment.delete('api-key');
@@ -7000,7 +7103,7 @@ function buildModelViewerHandoffUrl({ apiKey, arExperience, baseUrl, hid, mode,
     url.hash = fragment.toString();
     return url.toString();
 }
-function buildModelViewerHandoffCodeUrl({ arExperience, baseUrl, code, hid, mode, tinuuid }) {
+function buildModelViewerHandoffCodeUrl({ arExperience, baseUrl, code, hid, lang, mode, tinuuid }) {
     if (!baseUrl || !tinuuid) return null;
     let url;
     try {
@@ -7014,6 +7117,7 @@ function buildModelViewerHandoffCodeUrl({ arExperience, baseUrl, code, hid, mode
     else url.searchParams.delete('ar-experience');
     if (hid) url.searchParams.set('hid', hid);
     else url.searchParams.delete('hid');
+    setLang(url, lang);
     const fragment = new URLSearchParams(url.hash.slice(1));
     if (code) fragment.set('code', code);
     else fragment.delete('code');
@@ -7023,9 +7127,14 @@ function buildModelViewerHandoffCodeUrl({ arExperience, baseUrl, code, hid, mode
 function handoffCodeReissueDelayMs(expiresInSeconds) {
     return Math.round(1000 * expiresInSeconds * 2 / 3);
 }
+function setLang(url, lang) {
+    if (lang) url.searchParams.set('lang', lang);
+    else url.searchParams.delete('lang');
+}
 const EVENT_FLUSH_TIMEOUT_MS = 300;
+const LAUNCH_TOKEN_TIMEOUT_MS = 800;
 const HANDOFF_CODE_RETRY_MS = 15000;
-async function issueHandoffQrCode(widgetSession, { arExperience, baseUrl, hid, mode, tinuuid }) {
+async function issueHandoffQrCode(widgetSession, { arExperience, baseUrl, hid, lang, mode, tinuuid }) {
     const { code, expiresIn } = await issueWidgetHandoffCode(widgetSession, {
         arExperience,
         hid,
@@ -7036,6 +7145,7 @@ async function issueHandoffQrCode(widgetSession, { arExperience, baseUrl, hid, m
         baseUrl,
         code,
         hid,
+        lang,
         mode,
         tinuuid
     });
@@ -7054,7 +7164,7 @@ async function flushWidgetEvent(eventRequest) {
     });
 }
 function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
-    const { apiKey, appClipBundleId, arExperience, containerEl, handoffUrl, isLoading, isModelLoading, lang, launchAr, material, mode, modelViewerEl, object, tinuuid, trackEvent, widgetSession } = useModelViewer();
+    const { apiBaseUrl, apiKey, appClipBundleId, arExperience, containerEl, handoffUrl, isLoading, isModelLoading, lang, launchAr, material, mode, modelViewerEl, object, tinuuid, trackEvent, widgetSession } = useModelViewer();
     const [open, setOpen] = useState(false);
     const [qrState, setQrState] = useState({
         status: 'loading'
@@ -7063,12 +7173,33 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
     const widgetSessionSid = widgetSession?.sid;
     const isDisabled = isLoading || isModelLoading || null === material;
     const arTarget = external_react_useMemo(()=>({
+            apiBaseUrl,
+            apiKey: widgetSession?.apiKey || apiKey || void 0,
             hid: material?.hid,
+            lang,
+            name: object?.name ?? void 0,
             tinuuid: object?.tinuuid ?? tinuuid
         }), [
+        apiBaseUrl,
+        apiKey,
+        lang,
         material?.hid,
+        object?.name,
         object?.tinuuid,
-        tinuuid
+        tinuuid,
+        widgetSession
+    ]);
+    const launchHostAr = useCallback(async ()=>{
+        if (!launchAr) return false;
+        const widgetSessionToken = widgetSession ? await withinTapWindow(widgetSession.getTokenForRequest(), LAUNCH_TOKEN_TIMEOUT_MS).catch(()=>null) ?? widgetSession.token : void 0;
+        return launchArOverride(launchAr, {
+            ...arTarget,
+            widgetSessionToken
+        });
+    }, [
+        arTarget,
+        launchAr,
+        widgetSession
     ]);
     const directArExperience = resolveDirectArExperience(mode, arExperience);
     const directArLaunchOptions = external_react_useMemo(()=>{
@@ -7116,7 +7247,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
         const timer = window.setTimeout(()=>{
             (async ()=>{
                 if (autoLaunchKeyRef.current !== launchKey) return;
-                if (await launchArOverride(launchAr, arTarget)) return;
+                if (await launchHostAr()) return;
                 await flushWidgetEvent(trackEvent('ar_launched'));
                 if (autoLaunchKeyRef.current === launchKey) launchDirectAr(directArLaunchOptions);
             })();
@@ -7126,10 +7257,9 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
             if (autoLaunchKeyRef.current === launchKey) autoLaunchKeyRef.current = null;
         };
     }, [
-        arTarget,
         directArLaunchOptions,
         isLoading,
-        launchAr,
+        launchHostAr,
         material?.hid,
         mode,
         trackEvent,
@@ -7149,6 +7279,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
                 arExperience,
                 baseUrl,
                 hid: material?.hid,
+                lang,
                 mode,
                 tinuuid: resolvedTinuuid
             });
@@ -7165,6 +7296,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
                 arExperience,
                 baseUrl,
                 hid: material?.hid,
+                lang,
                 mode,
                 tinuuid: resolvedTinuuid
             });
@@ -7179,6 +7311,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
             arExperience,
             baseUrl,
             hid: material?.hid,
+            lang,
             mode,
             tinuuid: resolvedTinuuid,
             widgetSessionToken: sessionToken
@@ -7202,6 +7335,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
                         arExperience,
                         baseUrl: handoffUrl || MODEL_VIEWER_URL,
                         hid: material?.hid,
+                        lang,
                         mode,
                         tinuuid: object?.tinuuid ?? tinuuid
                     });
@@ -7223,6 +7357,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
     }, [
         arExperience,
         handoffUrl,
+        lang,
         material?.hid,
         mode,
         object?.tinuuid,
@@ -7233,7 +7368,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
     ]);
     const handleClick = async ()=>{
         if (!modelViewerEl || isDisabled) return;
-        if (await launchArOverride(launchAr, arTarget)) return void onBeforeActivateAr?.();
+        if (await launchHostAr()) return void onBeforeActivateAr?.();
         if (directArLaunchOptions && isMobileArDevice()) {
             onBeforeActivateAr?.();
             await flushWidgetEvent(trackEvent('ar_launched'));
@@ -8070,7 +8205,7 @@ function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip
         })
     });
 }
-function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initialWidgetSessionToken, handoffUrl, hid, lang = 'en', mode = 'ar-viewer', sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, ...props }) {
+function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initialWidgetSessionToken, handoffUrl, hid, lang = 'en', launchAr, mode = 'ar-viewer', sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, ...props }) {
     const [container, setContainer] = useState(null);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -8111,6 +8246,7 @@ function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initi
                                 lang: lang,
                                 handoffUrl: handoffUrl,
                                 hid: hid,
+                                launchAr: launchAr,
                                 sizeType: sizeType,
                                 dimensionAxes: dimensionAxes,
                                 cameraOrbit: cameraOrbit,
@@ -8202,4 +8338,5 @@ function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiB
         ]
     });
 }
-export { ModelViewer, ModelViewerDialog };
+var __webpack_exports__AR_TAP_WINDOW_MS = 3000;
+export { ModelViewer, ModelViewerDialog, isIOSDevice, isMobileArDevice, withinTapWindow, __webpack_exports__AR_TAP_WINDOW_MS as AR_TAP_WINDOW_MS };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/react-model-viewer",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "publishConfig": {
     "access": "public"
   },