@neurodyn/react-model-viewer 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -3,15 +3,33 @@ import { JSX } from 'react/jsx-runtime';
 import type { default as React_2 } from 'react';
 import * as React_3 from 'react';
 
+/** What the host needs to open its own AR experience for the shown model. */
+export declare interface ArLaunchTarget {
+    /** Material collection currently shown, which may differ from the entry url. */
+    hid?: string;
+    tinuuid: string;
+}
+
 declare type DialogProps = React_3.ComponentProps<typeof DialogPrimitive.Root>
 
-export declare function ModelViewer({ tinuuid, apiKey, hid, layout, background, className, ...props }: ModelViewerProps & React_2.ComponentProps<'div'>): JSX.Element;
+/**
+ * Lets the host open its own AR experience instead of the native one.
+ *
+ * Returning `true` means the host took the launch over: the viewer then skips
+ * both the native handoff and its own `ar_launched`, so one tap stays one
+ * event. Anything else falls through to the usual behaviour.
+ */
+export declare type LaunchArOverride = (target: ArLaunchTarget) => boolean | Promise<boolean>;
+
+export declare function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, launchAr, sizeType, layout, background, viewerSurface, className, ...props }: ModelViewerProps & React_2.ComponentProps<'div'>): JSX.Element;
+
+export declare type ModelViewerArExperience = 'advanced' | 'standard';
 
 declare type ModelViewerBackground = 'default' | 'transparent';
 
-export declare function ModelViewerDialog({ tinuuid, apiKey, hid, ...props }: ModelViewerDialogProps): JSX.Element;
+export declare function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, initialWidgetSessionToken, handoffUrl, hid, sizeType, ...props }: ModelViewerDialogProps): JSX.Element;
 
-declare interface ModelViewerDialogProps extends Pick<ModelViewerRootProps, 'tinuuid' | 'apiKey' | 'hid'>, Omit<DialogProps, 'children'> {
+declare interface ModelViewerDialogProps extends Pick<ModelViewerRootProps, 'apiBaseUrl' | 'apiKey' | 'handoffUrl' | 'hid' | 'initialWidgetSessionToken' | 'legacyApiBaseUrl' | 'sizeType' | 'tinuuid'>, Omit<DialogProps, 'children'> {
 }
 
 declare type ModelViewerLayout = 'default' | 'model';
@@ -22,16 +40,42 @@ export declare interface ModelViewerProps extends Omit<ModelViewerRootProps, 'sh
 declare interface ModelViewerRootProps {
     /** The unique identifier of a Vizbl object. */
     tinuuid: string;
-    /** Public API key. */
-    apiKey: string;
+    /** Public API key. Without it, the viewer uses the legacy `/obj/Fetch` API. */
+    apiKey?: string | null;
+    /** App Clip bundle used by automatic Advanced AR handoffs. */
+    appClipBundleId?: string;
+    /** Standard or Advanced launch behavior for the shared QR backend mode. */
+    arExperience?: ModelViewerArExperience;
     /** The identifier of a material variant. */
     hid?: string | null;
+    /** Node Public API base URL. */
+    apiBaseUrl?: string;
+    /** Legacy Go API base URL used only when `apiKey` is missing. */
+    legacyApiBaseUrl?: string;
+    /** Widget integration mode recorded by the backend session. */
+    mode?: ModelViewerWidgetMode;
+    /** Existing token used to preserve the same widget session across a handoff. */
+    initialWidgetSessionToken?: string;
+    /** Hosted viewer URL encoded into the desktop-to-mobile QR handoff. */
+    handoffUrl?: string;
+    /** Lets the host open its own AR experience instead of the native handoff. */
+    launchAr?: LaunchArOverride;
+    /** Display unit for model dimensions. */
+    sizeType?: SizeType;
     /** Controls which viewer UI elements are shown. */
     layout?: ModelViewerLayout;
     /** Controls the viewer container background. */
     background?: ModelViewerBackground;
     /** Enables dialog-only close controls. */
     showDialogCloseButton?: boolean;
+    /** Controls open-event semantics for inline, dialog, and hosted-page viewers. */
+    viewerSurface?: ModelViewerSurface;
 }
 
+declare type ModelViewerSurface = 'dialog' | 'inline' | 'page';
+
+export declare type ModelViewerWidgetMode = 'advanced-ar-view' | 'ar-view' | 'embedded-3d-viewer' | 'ar-viewer' | 'qr-code';
+
+declare type SizeType = 'cm' | 'inch';
+
 export { }

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, memo, use as external_react_use, useCallback, useEffect, useMemo as external_react_useMemo, useState } from "react";
+import { createContext, memo, use as external_react_use, useCallback, useEffect, useMemo as external_react_useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import react_shadow from "react-shadow";
 import { QueryClient, QueryClientProvider, useQuery as react_query_useQuery } from "@tanstack/react-query";
@@ -919,6 +919,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   height: auto;
 }
 
+.h-dvh {
+  height: 100dvh;
+}
+
 .h-full {
   height: 100%;
 }
@@ -927,10 +931,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   height: 1px;
 }
 
-.h-svh {
-  height: 100svh;
-}
-
 .max-h-\\(--radix-select-content-available-height\\) {
   max-height: var(--radix-select-content-available-height);
 }
@@ -5724,18 +5724,28 @@ function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'v-them
 }
 var fontsinline = __webpack_require__("../ui/src/styles/fonts.css?inline");
 const PROPERTY_BLOCK_RE = /@property\s+(--[^{\s]+)\s*\{([^}]*)\}/g;
-const INITIAL_VALUE_RE = /initial-value:([^;\n]+);/i;
+const INITIAL_VALUE_RE = /initial-value:([^;}]+)/i;
+const NON_INHERITING_RE = /inherits:\s*false(?:\s*;|\s*$)/i;
 const ROOT_TO_HOST_SELECTOR_RE = /:root\s*,\s*:host|:root/g;
 function createShadowRootCssText(cssText) {
     const cssForHost = cssText.replace(ROOT_TO_HOST_SELECTOR_RE, ':host');
     const propertyBlocks = Array.from(cssText.matchAll(PROPERTY_BLOCK_RE));
     const propertyDefaults = propertyBlocks.map(([, name, body])=>{
-        const match = body.match(INITIAL_VALUE_RE);
-        if (!match) return null;
-        const initialValue = match[1].trim();
-        return `  ${name}: ${initialValue};`;
+        if (!NON_INHERITING_RE.test(body)) return null;
+        const initialValue = body.match(INITIAL_VALUE_RE)?.[1].trim() ?? 'initial';
+        return `    ${name}: ${initialValue};`;
     }).filter((value)=>null !== value).join('\n');
-    return propertyDefaults ? `:host {\n${propertyDefaults}\n}\n\n${cssForHost}` : cssForHost;
+    if (!propertyDefaults) return cssForHost;
+    return `${cssForHost}\n\n@layer base {
+  :host,
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+${propertyDefaults}
+  }
+}`;
 }
 var styleinline = __webpack_require__("./src/style.css?inline");
 const shadowRootCssText = createShadowRootCssText(styleinline.A);
@@ -6475,7 +6485,7 @@ const runtime = createApiClientRuntime({
     configureFunctionName: 'configureNodeApiClient',
     defaultBaseURL: "https://api.vizbl.com"
 });
-const configureNodeApiClientRuntime = runtime.configureClientRuntime;
+runtime.configureClientRuntime;
 runtime.configureAccessTokenResolverRuntime;
 runtime.configureHeadersResolverRuntime;
 runtime.configureUnauthorizedHandlerRuntime;
@@ -6485,12 +6495,30 @@ runtime.resetClientForTestsRuntime;
 const requestNodeRuntime = runtime.requestRuntime;
 runtime.requestWithoutUnauthorizedRecovery;
 runtime.addResponseInterceptorRuntime;
-function configureNodeApiClient(config) {
-    configureNodeApiClientRuntime(config);
-}
 async function node_client_node_client(config) {
     return requestNodeRuntime(config);
 }
+async function publicApiControllerActivateCoreAR(params, config = {}) {
+    const { client: request = node_client_node_client, ...requestConfig } = config;
+    const res = await request({
+        method: "POST",
+        url: "/public/widget/activate-core",
+        params,
+        ...requestConfig
+    });
+    return res.data;
+}
+async function publicApiControllerIssueWidgetToken(data, config = {}) {
+    const { client: request = node_client_node_client, ...requestConfig } = config;
+    const requestData = data;
+    const res = await request({
+        method: "POST",
+        url: "/public/widget/token",
+        data: requestData,
+        ...requestConfig
+    });
+    return res.data;
+}
 async function publicApiControllerReadObjectByTinuuid({ tinuuid }, params, config = {}) {
     const { client: request = node_client_node_client, ...requestConfig } = config;
     const res = await request({
@@ -6501,33 +6529,227 @@ async function publicApiControllerReadObjectByTinuuid({ tinuuid }, params, confi
     });
     return res.data;
 }
+const WIDGET_SESSION_TOKEN_HEADER = 'x-widget-session-token';
+const DEFAULT_REFRESH_THRESHOLD_MS = 30000;
+const ALLOWED_PRODUCT_TYPES = new Set([
+    'core-ar',
+    'core-ar-shopify'
+]);
+class ModelViewerWidgetSession {
+    apiBaseUrl;
+    apiKey;
+    issueWidgetToken;
+    mode;
+    now;
+    refreshThresholdMs;
+    refreshPromise = null;
+    session;
+    constructor(activationData, options){
+        this.apiBaseUrl = options.apiBaseUrl;
+        this.apiKey = options.apiKey;
+        this.issueWidgetToken = options.issueWidgetToken ?? publicApiControllerIssueWidgetToken;
+        this.mode = options.mode;
+        this.now = options.now ?? Date.now;
+        this.refreshThresholdMs = options.refreshThresholdMs ?? DEFAULT_REFRESH_THRESHOLD_MS;
+        this.session = this.toSnapshot(activationData);
+    }
+    get token() {
+        return this.session.token;
+    }
+    get sid() {
+        return this.session.sid;
+    }
+    get snapshot() {
+        return {
+            ...this.session
+        };
+    }
+    async getTokenForRequest() {
+        if (this.session.expiresAt - this.now() > this.refreshThresholdMs) return this.session.token;
+        return (await this.refresh()).token;
+    }
+    async getRequestConfig(signal) {
+        return {
+            baseURL: this.apiBaseUrl,
+            headers: {
+                [WIDGET_SESSION_TOKEN_HEADER]: await this.getTokenForRequest()
+            },
+            signal
+        };
+    }
+    refresh() {
+        if (this.refreshPromise) return this.refreshPromise;
+        this.refreshPromise = this.issueWidgetToken({
+            mode: this.mode,
+            token: this.session.token
+        }, {
+            baseURL: this.apiBaseUrl,
+            headers: {
+                'x-api-key': this.apiKey
+            }
+        }).then((data)=>this.toSnapshot(parseWidgetSession(data))).then((session)=>{
+            this.session = session;
+            return this.snapshot;
+        }).finally(()=>{
+            this.refreshPromise = null;
+        });
+        return this.refreshPromise;
+    }
+    toSnapshot(data) {
+        return {
+            ...data,
+            expiresAt: this.now() + 1000 * data.expiresIn
+        };
+    }
+}
+async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, initialWidgetSessionToken, mode, signal }) {
+    const requestConfig = {
+        baseURL: apiBaseUrl,
+        headers: {
+            'x-api-key': apiKey
+        },
+        signal
+    };
+    if (initialWidgetSessionToken) try {
+        const refreshed = await publicApiControllerIssueWidgetToken({
+            mode,
+            token: initialWidgetSessionToken
+        }, requestConfig);
+        return new ModelViewerWidgetSession(parseWidgetSession(refreshed), {
+            apiBaseUrl,
+            apiKey,
+            mode
+        });
+    } catch (error) {
+        if (signal?.aborted) throw error;
+    }
+    const activation = await publicApiControllerActivateCoreAR({
+        mode
+    }, requestConfig);
+    if ('string' != typeof activation.productType || !ALLOWED_PRODUCT_TYPES.has(activation.productType)) throw new TypeError('The API key is not enabled for Core AR');
+    return new ModelViewerWidgetSession(parseWidgetSession(activation.widgetSession), {
+        apiBaseUrl,
+        apiKey,
+        mode
+    });
+}
+async function fetchModelViewerObject(tinuuid, variantId, session, signal) {
+    return publicApiControllerReadObjectByTinuuid({
+        tinuuid
+    }, {
+        productType: 'core-ar',
+        variantId: variantId ?? void 0
+    }, await session.getRequestConfig(signal));
+}
+async function sendModelViewerWidgetEvent(session, event, options = {}) {
+    if (!session) return;
+    try {
+        const config = await session.getRequestConfig();
+        const url = new URL('/public/widget/events', config.baseURL ?? window.location.origin);
+        const response = await fetch(url, {
+            body: JSON.stringify({
+                event,
+                objectId: options.objectId ?? void 0,
+                timestamp: new Date().toISOString(),
+                variantId: options.variantId ?? void 0
+            }),
+            headers: {
+                'Content-Type': 'application/json',
+                ...config.headers
+            },
+            keepalive: true,
+            method: 'POST'
+        });
+        if (!response.ok) throw new Error(`Widget event request failed with ${response.status}`);
+    } catch  {}
+}
+function parseWidgetSession(value) {
+    const session = 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;
+}
+const client_runtime_runtime = createApiClientRuntime({
+    clientName: 'API client',
+    configureFunctionName: 'configureApiClient',
+    defaultBaseURL: "https://api.vizbl.com/v1"
+});
+client_runtime_runtime.configureClientRuntime;
+client_runtime_runtime.configureAccessTokenResolverRuntime;
+client_runtime_runtime.configureHeadersResolverRuntime;
+client_runtime_runtime.configureUnauthorizedHandlerRuntime;
+client_runtime_runtime.isClientConfiguredRuntime;
+client_runtime_runtime.assertClientConfiguredRuntime;
+client_runtime_runtime.resetClientForTestsRuntime;
+const client_runtime_requestRuntime = client_runtime_runtime.requestRuntime;
+client_runtime_runtime.requestWithoutUnauthorizedRecovery;
+client_runtime_runtime.addResponseInterceptorRuntime;
+async function client_client(config) {
+    return client_runtime_requestRuntime(config);
+}
+async function objFetch(data, config = {}) {
+    const { client: request = client_client, ...requestConfig } = config;
+    const requestData = data;
+    const res = await request({
+        method: "POST",
+        url: "/obj/Fetch",
+        data: requestData,
+        ...requestConfig
+    });
+    return res.data;
+}
 function useObjectData(tinuuid, initialHid, options) {
     const [materialHid, setMaterialHid] = useState(initialHid ?? null);
     const { data = null, error, isLoading } = react_query_useQuery({
         queryKey: [
             'modelViewer',
             'object',
-            tinuuid,
-            options.apiKey
-        ],
-        enabled: Boolean(tinuuid) && options.apiKey.length > 0,
-        queryFn: ({ signal })=>publicApiControllerReadObjectByTinuuid({
+            {
+                apiBaseUrl: options.apiBaseUrl ?? null,
+                apiKey: options.apiKey,
+                initialHid: initialHid ?? null,
+                initialWidgetSessionToken: options.initialWidgetSessionToken ?? null,
+                legacyApiBaseUrl: options.legacyApiBaseUrl ?? null,
+                mode: options.mode,
                 tinuuid
-            }, {
-                productType: 'core-ar'
-            }, {
-                headers: {
-                    'x-api-key': options.apiKey
-                },
+            }
+        ],
+        enabled: Boolean(tinuuid),
+        gcTime: 0,
+        refetchOnMount: 'always',
+        queryFn: async ({ signal })=>{
+            if (!options.apiKey) {
+                const object = await objFetch({
+                    tinuuid
+                }, {
+                    baseURL: options.legacyApiBaseUrl,
+                    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
+            };
+        }
     });
+    const object = data?.object ?? null;
     const material = external_react_useMemo(()=>{
-        if (!data?.materials?.length) return null;
-        return materialHid ? data.materials.find((m)=>m.hid === materialHid) || data.materials[0] : data.materials?.[0] ?? null;
+        if (!object?.materials?.length) return null;
+        return materialHid ? object.materials.find((m)=>m.hid === materialHid) || object.materials[0] : object.materials?.[0] ?? null;
     }, [
-        data,
-        materialHid
+        materialHid,
+        object
     ]);
     useEffect(()=>{
         setMaterialHid(initialHid ?? null);
@@ -6536,11 +6758,12 @@ function useObjectData(tinuuid, initialHid, options) {
         tinuuid
     ]);
     return {
-        object: data,
+        object,
         material,
         error,
         isLoading,
-        setMaterialHid
+        setMaterialHid,
+        widgetSession: data?.widgetSession ?? null
     };
 }
 function getErrorResponseStatus(error) {
@@ -6551,36 +6774,119 @@ function getModelViewerApiError(error) {
     if (!isAxiosError(error)) return null;
     const status = error.response?.status;
     if (401 === status) return 'unauthorized';
+    if (403 === status) return 'forbidden';
     if (402 === status) return 'payment-required';
     return null;
 }
+const RECOVERY_STORAGE_KEY = 'vizbl-model-viewer-blank-canvas-recovery';
+const RENDER_CHECK_DELAY_MS = 2000;
+const SAMPLE_SIZE = 64;
+const NON_ZERO_CHANNEL_THRESHOLD = 8;
+function scheduleBlankCanvasRecovery(modelViewerEl) {
+    window.setTimeout(()=>{
+        if (isCanvasBlank(modelViewerEl) && !hasAlreadyRecovered()) {
+            markRecovered();
+            window.location.reload();
+        }
+    }, RENDER_CHECK_DELAY_MS);
+}
+function hasAlreadyRecovered() {
+    try {
+        return '1' === window.sessionStorage.getItem(RECOVERY_STORAGE_KEY);
+    } catch  {
+        return false;
+    }
+}
+function markRecovered() {
+    try {
+        window.sessionStorage.setItem(RECOVERY_STORAGE_KEY, '1');
+    } catch  {}
+}
+function isCanvasBlank(modelViewerEl) {
+    const canvas = modelViewerEl.shadowRoot?.querySelector('canvas.show');
+    if (!canvas || 0 === canvas.width || 0 === canvas.height) return false;
+    const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl');
+    if (!gl) return false;
+    const size = Math.min(SAMPLE_SIZE, canvas.width, canvas.height);
+    const x = Math.max(0, Math.floor((canvas.width - size) / 2));
+    const y = Math.max(0, Math.floor((canvas.height - size) / 2));
+    const pixels = new Uint8Array(size * size * 4);
+    gl.readPixels(x, y, size, size, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+    for(let i = 0; i < pixels.length; i += 4)if (pixels[i] > NON_ZERO_CHANNEL_THRESHOLD || pixels[i + 1] > NON_ZERO_CHANNEL_THRESHOLD || pixels[i + 2] > NON_ZERO_CHANNEL_THRESHOLD || pixels[i + 3] > NON_ZERO_CHANNEL_THRESHOLD) return false;
+    return true;
+}
 const ModelViewerContext = /*#__PURE__*/ createContext(null);
-function ModelViewerProvider({ children, tinuuid, apiKey, hid, layout, background }) {
-    const { object, material, error, isLoading, setMaterialHid } = useObjectData(tinuuid, hid, {
-        apiKey
+function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExperience, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, hid, launchAr, layout, background, sizeType, viewerSurface }) {
+    const { object, material, error, isLoading, setMaterialHid: setObjectMaterialHid, widgetSession } = useObjectData(tinuuid, hid, {
+        apiBaseUrl,
+        apiKey,
+        initialWidgetSessionToken,
+        legacyApiBaseUrl,
+        mode
     });
     const [isModelLoading, setIsModelLoading] = useState(true);
     const [containerEl, setContainerEl] = useState(null);
     const [modelViewerEl, setModelViewerEl] = useState(null);
-    const hasNonEmptyApiKey = apiKey.length > 0;
+    const trackedCameraInteractionSidRef = useRef(null);
+    const trackedOpenSidRef = useRef(null);
     const glbUrl = material?.native?.glbUrl ?? null;
     const usdzUrl = material?.native?.usdzUrl ?? null;
     const previewUrl = material?.previews?.[0]?.url ?? null;
     const state = external_react_useMemo(()=>{
-        if (!hasNonEmptyApiKey) return 'unauthorized';
         if (isLoading) return 'loading';
         const accessError = getModelViewerApiError(error);
         if (accessError) return accessError;
+        const instantArExperience = 'ar-view' === mode || 'qr-code' === mode && 'standard' === arExperience;
+        const advancedArExperience = 'advanced-ar-view' === mode || 'qr-code' === mode && 'advanced' === arExperience;
+        if (instantArExperience && object?.policy?.instantArView === false) return 'forbidden';
+        if ((advancedArExperience || 'ar-viewer' === mode) && object?.policy?.appClip === false) return 'forbidden';
         if (null != error || !object || !material || !glbUrl) return 'not-found';
         return 'ready';
     }, [
+        arExperience,
         error,
         glbUrl,
-        hasNonEmptyApiKey,
         isLoading,
         material,
+        mode,
         object
     ]);
+    const trackEvent = useCallback((event)=>sendModelViewerWidgetEvent(widgetSession, event, {
+            objectId: object?.uuid,
+            variantId: material?.hid
+        }), [
+        material?.hid,
+        object?.uuid,
+        widgetSession
+    ]);
+    const setMaterialHid = useCallback((nextHid)=>{
+        if (nextHid === material?.hid) return;
+        setObjectMaterialHid(nextHid);
+        sendModelViewerWidgetEvent(widgetSession, 'interacted', {
+            objectId: object?.uuid,
+            variantId: nextHid
+        });
+    }, [
+        material?.hid,
+        object?.uuid,
+        setObjectMaterialHid,
+        widgetSession
+    ]);
+    useEffect(()=>{
+        if ('inline' === viewerSurface || 'ready' !== state || !widgetSession || trackedOpenSidRef.current === widgetSession.sid) return;
+        trackEvent('widget_opened');
+        trackedOpenSidRef.current = widgetSession.sid;
+    }, [
+        state,
+        trackEvent,
+        viewerSurface,
+        widgetSession
+    ]);
+    useEffect(()=>{
+        trackedCameraInteractionSidRef.current = null;
+    }, [
+        widgetSession?.sid
+    ]);
     useEffect(()=>{
         setIsModelLoading('ready' === state && Boolean(glbUrl));
     }, [
@@ -6596,53 +6902,82 @@ function ModelViewerProvider({ children, tinuuid, apiKey, hid, layout, backgroun
         };
         const handleLoad = ()=>{
             setIsModelLoading(false);
+            scheduleBlankCanvasRecovery(modelViewerEl);
         };
         const handleError = ()=>{
             setIsModelLoading(false);
         };
+        const handleCameraChange = (event)=>{
+            const source = event.detail?.source;
+            if ('user-interaction' !== source || !widgetSession || trackedCameraInteractionSidRef.current === widgetSession.sid) return;
+            trackEvent('interacted');
+            trackedCameraInteractionSidRef.current = widgetSession.sid;
+        };
         modelViewerEl.addEventListener('progress', handleProgress);
         modelViewerEl.addEventListener('load', handleLoad);
         modelViewerEl.addEventListener('error', handleError);
+        modelViewerEl.addEventListener('camera-change', handleCameraChange);
         return ()=>{
             modelViewerEl.removeEventListener('progress', handleProgress);
             modelViewerEl.removeEventListener('load', handleLoad);
             modelViewerEl.removeEventListener('error', handleError);
+            modelViewerEl.removeEventListener('camera-change', handleCameraChange);
         };
     }, [
-        modelViewerEl
+        modelViewerEl,
+        trackEvent,
+        widgetSession
     ]);
     const contextValue = external_react_useMemo(()=>({
+            apiKey,
+            appClipBundleId,
+            arExperience,
             tinuuid,
             object,
             material,
             glbUrl,
             usdzUrl,
             previewUrl,
+            handoffUrl,
+            launchAr,
             layout,
             background,
+            mode,
+            sizeType,
             isLoading,
             isModelLoading,
             state,
             modelViewerEl,
             containerEl,
+            widgetSession,
             setMaterialHid,
             setContainerEl,
-            setModelViewerEl
+            setModelViewerEl,
+            trackEvent
         }), [
+        apiKey,
+        appClipBundleId,
+        arExperience,
         tinuuid,
         object,
         material,
         glbUrl,
         usdzUrl,
         previewUrl,
+        handoffUrl,
+        launchAr,
         layout,
         background,
+        mode,
+        sizeType,
         isLoading,
         isModelLoading,
         state,
         modelViewerEl,
         containerEl,
-        setMaterialHid
+        widgetSession,
+        setMaterialHid,
+        trackEvent
     ]);
     return /*#__PURE__*/ jsx(ModelViewerContext, {
         value: contextValue,
@@ -6654,27 +6989,204 @@ function useModelViewer() {
     if (!context) throw new Error('useModelViewer must be used within a ModelViewerProvider');
     return context;
 }
+function getUserAgent() {
+    if ("u" < typeof navigator) return '';
+    return navigator.userAgent || navigator.vendor || '';
+}
+function isIOSDevice() {
+    if ("u" < typeof window || "u" < typeof navigator) return false;
+    const isIPadOS = 'MacIntel' === navigator.platform && navigator.maxTouchPoints > 1;
+    return (/iPad|iPhone|iPod/.test(getUserAgent()) || isIPadOS) && !('MSStream' in window);
+}
+function isMobileArDevice() {
+    if ("u" < typeof window || "u" < typeof navigator) return false;
+    const mobileUserAgent = /Android|iPhone|iPad|iPod|webOS|BlackBerry|Windows Phone|Opera Mini|IEMobile|Mobile/i.test(getUserAgent());
+    const coarsePointer = window.matchMedia?.('(pointer: coarse)').matches ?? false;
+    return navigator.maxTouchPoints > 1 && coarsePointer && (mobileUserAgent || isIOSDevice());
+}
+function isSupportedAppClipDevice() {
+    if (!isIOSDevice()) return false;
+    const versionText = getUserAgent().match(/\bOS (\d+)/)?.[1] ?? getUserAgent().match(/Version\/(\d+)/)?.[1];
+    if (!versionText) return false;
+    return Number.parseInt(versionText, 10) >= 17;
+}
+function buildAppClipUrl(bundleId, tinuuid, hostname, hid) {
+    const url = new URL('https://appclip.apple.com/id');
+    url.searchParams.set('p', bundleId);
+    url.searchParams.set('tinuuid', tinuuid);
+    if (hid) url.searchParams.set('hid', hid);
+    url.searchParams.set('region', hostname.endsWith('arizo.ru') ? 'ru' : 'en');
+    return url.toString();
+}
+function buildNativeArUrl(glbUrl, usdzUrl, objectType, ios = isIOSDevice()) {
+    if (ios) return `${new URL(usdzUrl).toString()}#allowsContentScaling=0`;
+    const verticalPlacement = 'wall' === objectType || 'ceiling' === objectType ? '&enable_vertical_placement=true' : '';
+    return `intent://arvr.google.com/scene-viewer/1.0?file=${encodeURIComponent(new URL(glbUrl).toString())}&resizable=false${verticalPlacement}&mode=ar_preferred#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;end;`;
+}
+function launchDirectAr(options) {
+    if ('advanced' === options.experience && isSupportedAppClipDevice()) return void window.location.assign(buildAppClipUrl(options.appClipBundleId, options.tinuuid, options.hostname, options.hid));
+    const link = document.createElement('a');
+    const image = document.createElement('img');
+    link.rel = 'ar';
+    link.href = buildNativeArUrl(options.glbUrl, options.usdzUrl, options.objectType);
+    link.hidden = true;
+    image.alt = '';
+    image.hidden = true;
+    link.appendChild(image);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+}
+async function launchArOverride(launchAr, target) {
+    if (!launchAr || !target.tinuuid) return false;
+    try {
+        return await launchAr(target);
+    } catch  {
+        return false;
+    }
+}
+function buildModelViewerHandoffUrl({ apiKey, arExperience, baseUrl, hid, mode, tinuuid, widgetSessionToken }) {
+    if (!baseUrl || !tinuuid) return null;
+    let url;
+    try {
+        url = new URL(baseUrl);
+    } catch  {
+        return null;
+    }
+    url.searchParams.set('tinuuid', tinuuid);
+    url.searchParams.set('mode', mode);
+    if (arExperience) url.searchParams.set('ar-experience', arExperience);
+    else url.searchParams.delete('ar-experience');
+    if (hid) url.searchParams.set('hid', hid);
+    else url.searchParams.delete('hid');
+    const fragment = new URLSearchParams(url.hash.slice(1));
+    if (apiKey) fragment.set('api-key', apiKey);
+    else fragment.delete('api-key');
+    if (widgetSessionToken) fragment.set('widget-session-token', widgetSessionToken);
+    else fragment.delete('widget-session-token');
+    url.hash = fragment.toString();
+    return url.toString();
+}
+const EVENT_FLUSH_TIMEOUT_MS = 300;
+async function flushWidgetEvent(eventRequest) {
+    await new Promise((resolve)=>{
+        const timeout = window.setTimeout(resolve, EVENT_FLUSH_TIMEOUT_MS);
+        eventRequest.finally(()=>{
+            window.clearTimeout(timeout);
+            resolve();
+        });
+    });
+}
 function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
-    const { containerEl, isLoading, isModelLoading, material, modelViewerEl, object, tinuuid } = useModelViewer();
+    const { apiKey, appClipBundleId, arExperience, containerEl, handoffUrl, isLoading, isModelLoading, launchAr, material, mode, modelViewerEl, object, tinuuid, trackEvent, widgetSession } = useModelViewer();
+    const [handoffSession, setHandoffSession] = useState(null);
     const [open, setOpen] = useState(false);
+    const autoLaunchKeyRef = useRef(null);
+    const widgetSessionSid = widgetSession?.sid;
+    const widgetSessionToken = widgetSession?.token;
     const isDisabled = isLoading || isModelLoading || null === material;
-    const url = external_react_useMemo(()=>{
-        if (!MODEL_VIEWER_URL) return null;
-        const url = new URL(MODEL_VIEWER_URL);
-        url.searchParams.set('tinuuid', object?.tinuuid ?? tinuuid);
-        if (material?.hid) url.searchParams.set('hid', material.hid);
-        return url.toString();
-    }, [
+    const arTarget = external_react_useMemo(()=>({
+            hid: material?.hid,
+            tinuuid: object?.tinuuid ?? tinuuid
+        }), [
         material?.hid,
         object?.tinuuid,
         tinuuid
     ]);
+    const directArExperience = 'ar-view' === mode ? 'standard' : 'advanced-ar-view' === mode ? 'advanced' : 'qr-code' === mode ? arExperience : void 0;
+    const directArLaunchOptions = external_react_useMemo(()=>{
+        const native = material?.native;
+        if (!directArExperience || !object || !native?.glbUrl || !native.usdzUrl || "u" < typeof window) return null;
+        return {
+            appClipBundleId,
+            experience: directArExperience,
+            glbUrl: native.glbUrl,
+            hid: material?.hid,
+            hostname: window.location.hostname,
+            objectType: object.type,
+            tinuuid: object.tinuuid ?? tinuuid,
+            usdzUrl: native.usdzUrl
+        };
+    }, [
+        appClipBundleId,
+        directArExperience,
+        material?.hid,
+        material?.native,
+        object,
+        tinuuid
+    ]);
+    const url = external_react_useMemo(()=>buildModelViewerHandoffUrl({
+            apiKey,
+            arExperience,
+            baseUrl: handoffUrl || MODEL_VIEWER_URL,
+            hid: material?.hid,
+            mode,
+            tinuuid: object?.tinuuid ?? tinuuid,
+            widgetSessionToken: handoffSession && handoffSession.sid === widgetSessionSid ? handoffSession.token : widgetSessionToken
+        }), [
+        apiKey,
+        arExperience,
+        handoffSession,
+        handoffUrl,
+        material?.hid,
+        mode,
+        object?.tinuuid,
+        tinuuid,
+        widgetSessionSid,
+        widgetSessionToken
+    ]);
+    useEffect(()=>{
+        if (!directArLaunchOptions || isLoading || !isMobileArDevice()) return;
+        const launchKey = [
+            widgetSessionSid ?? 'legacy',
+            directArLaunchOptions.tinuuid,
+            material?.hid,
+            directArLaunchOptions.experience
+        ].join(':');
+        if (autoLaunchKeyRef.current === launchKey) return;
+        autoLaunchKeyRef.current = launchKey;
+        const timer = window.setTimeout(()=>{
+            (async ()=>{
+                if (autoLaunchKeyRef.current !== launchKey) return;
+                if (await launchArOverride(launchAr, arTarget)) return;
+                await flushWidgetEvent(trackEvent('ar_launched'));
+                if (autoLaunchKeyRef.current === launchKey) launchDirectAr(directArLaunchOptions);
+            })();
+        }, 0);
+        return ()=>{
+            window.clearTimeout(timer);
+            if (autoLaunchKeyRef.current === launchKey) autoLaunchKeyRef.current = null;
+        };
+    }, [
+        arTarget,
+        directArLaunchOptions,
+        isLoading,
+        launchAr,
+        material?.hid,
+        trackEvent,
+        widgetSessionSid
+    ]);
     const handleClick = async ()=>{
         if (!modelViewerEl || isDisabled) return;
-        if (modelViewerEl.canActivateAR) {
+        if (await launchArOverride(launchAr, arTarget)) return void onBeforeActivateAr?.();
+        if (directArLaunchOptions && isMobileArDevice()) {
             onBeforeActivateAr?.();
+            await flushWidgetEvent(trackEvent('ar_launched'));
+            launchDirectAr(directArLaunchOptions);
+        } else if (modelViewerEl.canActivateAR) {
+            onBeforeActivateAr?.();
+            await flushWidgetEvent(trackEvent('ar_launched'));
             await modelViewerEl.activateAR();
-        } else if (url) setOpen(true);
+        } else if (url) {
+            const activeSession = widgetSession;
+            const sessionToken = await activeSession?.getTokenForRequest().catch(()=>activeSession.token);
+            setHandoffSession(activeSession && sessionToken ? {
+                sid: activeSession.sid,
+                token: sessionToken
+            } : null);
+            trackEvent('interacted');
+            setOpen(true);
+        }
     };
     const handleButtonClick = async (event)=>{
         onClick?.(event);
@@ -7097,6 +7609,7 @@ function MaterialVariants() {
     });
 }
 const viewerErrorTitle = {
+    forbidden: 'Viewer unavailable for this domain',
     'not-found': 'Object not found',
     unauthorized: 'Invalid API key',
     'payment-required': 'Viewer temporarily unavailable'
@@ -7164,14 +7677,14 @@ function getHotspotConfig(slot) {
     if (!config) throw new Error(`Missing hotspot config for slot "${slot}"`);
     return config;
 }
-function createDimensionLabels(modelViewerEl) {
+function createDimensionLabels(modelViewerEl, sizeType) {
     const info = calculateBoundingBoxInfo(modelViewerEl);
     return DIMENSION_LABEL_CONFIGS.map(({ slot, sizeAxis, offsetMultiplier })=>{
         const hotspotConfig = getHotspotConfig(slot);
         return {
             name: slot,
             position: calculateDimensionLabelPosition(info, hotspotConfig, offsetMultiplier),
-            text: formatSize(info.size[sizeAxis], 'cm')
+            text: formatSize(info.size[sizeAxis], sizeType)
         };
     });
 }
@@ -7184,7 +7697,7 @@ function syncLabelHotspots(modelViewerEl, labels) {
     });
 }
 function useDimensions({ isVisible }) {
-    const { glbUrl, isModelLoading, modelViewerEl } = useModelViewer();
+    const { glbUrl, isModelLoading, modelViewerEl, sizeType } = useModelViewer();
     const [lines, setLines] = useState([]);
     const [labels, setLabels] = useState([]);
     const [hiddenHotspots, setHiddenHotspots] = useState(()=>new Set());
@@ -7201,7 +7714,7 @@ function useDimensions({ isVisible }) {
     ]);
     const calculateLabels = useCallback(()=>{
         if (!modelViewerEl) return [];
-        const dimensionLabels = createDimensionLabels(modelViewerEl);
+        const dimensionLabels = createDimensionLabels(modelViewerEl, sizeType);
         syncLabelHotspots(modelViewerEl, dimensionLabels);
         return dimensionLabels.map((label)=>({
                 slot: label.name,
@@ -7209,7 +7722,8 @@ function useDimensions({ isVisible }) {
                 position: label.position
             }));
     }, [
-        modelViewerEl
+        modelViewerEl,
+        sizeType
     ]);
     const updateLines = useCallback(()=>{
         if (!modelViewerEl) return;
@@ -7282,7 +7796,7 @@ function useDimensions({ isVisible }) {
     };
 }
 function ModelViewerContainer({ showDialogCloseButton = false }) {
-    const { glbUrl, isModelLoading, object, previewUrl, state, setContainerEl, setModelViewerEl, usdzUrl, layout, background } = useModelViewer();
+    const { glbUrl, isModelLoading, object, previewUrl, state, setContainerEl, setModelViewerEl, usdzUrl, layout, background, trackEvent } = useModelViewer();
     const [isDimensionsVisible, setDimensionsVisible] = useState(false);
     const isModelLayout = 'model' === layout;
     const showViewerLoader = 'loading' === state || 'ready' === state && isModelLoading;
@@ -7293,7 +7807,7 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
     const { lines, labels, hiddenHotspots } = useDimensions({
         isVisible: isDimensionsActive
     });
-    const errorState = 'not-found' === state || 'unauthorized' === state || 'payment-required' === state ? state : null;
+    const errorState = 'forbidden' === state || 'not-found' === state || 'unauthorized' === state || 'payment-required' === state ? state : null;
     if (errorState) return /*#__PURE__*/ jsx("div", {
         ref: setContainerEl,
         className: utils_cn('relative size-full overflow-hidden text-foreground', 'default' === background && 'bg-background-layout'),
@@ -7323,6 +7837,7 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
                     arScale: "fixed",
                     shadowIntensity: 1,
                     interactionPromptThreshold: 100,
+                    loading: "eager",
                     children: [
                         /*#__PURE__*/ jsx("div", {
                             slot: "progress-bar"
@@ -7366,7 +7881,10 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
                                 disabled: !canToggleDimensions,
                                 "aria-label": "Toggle dimensions",
                                 "aria-pressed": isDimensionsVisible,
-                                onClick: ()=>setDimensionsVisible((current)=>!current),
+                                onClick: ()=>{
+                                    setDimensionsVisible((current)=>!current);
+                                    trackEvent('interacted');
+                                },
                                 children: [
                                     isDimensionsVisible ? /*#__PURE__*/ jsx(Eye, {
                                         className: "size-6"
@@ -7391,7 +7909,7 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
     });
 }
 function normalizeApiKey(apiKey) {
-    return apiKey.trim();
+    return apiKey?.trim() ?? '';
 }
 const root_queryClient = new QueryClient({
     defaultOptions: {
@@ -7408,26 +7926,33 @@ const root_queryClient = new QueryClient({
         }
     }
 });
-function ModelViewerRoot({ tinuuid, apiKey, hid, layout = 'default', background = 'default', showDialogCloseButton = false }) {
+function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip', arExperience, hid, apiBaseUrl = "https://api.vizbl.com", legacyApiBaseUrl = "https://api.vizbl.com/v1", mode = 'embedded-3d-viewer', initialWidgetSessionToken, handoffUrl = "https://integrations.vizbl.com/model-viewer", launchAr, sizeType = 'cm', layout = 'default', background = 'default', showDialogCloseButton = false, viewerSurface = 'inline' }) {
     const normalizedApiKey = normalizeApiKey(apiKey);
     return /*#__PURE__*/ jsx(QueryClientProvider, {
         client: root_queryClient,
         children: /*#__PURE__*/ jsx(ModelViewerProvider, {
             tinuuid: tinuuid,
             apiKey: normalizedApiKey,
+            appClipBundleId: appClipBundleId,
+            arExperience: arExperience,
+            apiBaseUrl: apiBaseUrl,
+            legacyApiBaseUrl: legacyApiBaseUrl,
+            mode: mode,
+            initialWidgetSessionToken: initialWidgetSessionToken,
+            handoffUrl: handoffUrl,
             hid: hid,
+            launchAr: launchAr,
             layout: layout,
             background: background,
+            sizeType: sizeType,
+            viewerSurface: viewerSurface,
             children: /*#__PURE__*/ jsx(ModelViewerContainer, {
                 showDialogCloseButton: showDialogCloseButton
             })
         })
     });
 }
-configureNodeApiClient({
-    baseURL: "https://api.vizbl.com"
-});
-function ModelViewerDialog({ tinuuid, apiKey, hid, ...props }) {
+function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, initialWidgetSessionToken, handoffUrl, hid, sizeType, ...props }) {
     const [container, setContainer] = useState(null);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -7440,7 +7965,7 @@ function ModelViewerDialog({ tinuuid, apiKey, hid, ...props }) {
                 children: /*#__PURE__*/ jsx(Dialog, {
                     ...props,
                     children: /*#__PURE__*/ jsxs(DialogContent, {
-                        className: "min-w-full h-svh p-0 rounded-none sm:p-0",
+                        className: "min-w-full h-dvh p-0 rounded-none sm:p-0",
                         portalContainer: container,
                         showCloseButton: false,
                         onInteractOutside: (e)=>{
@@ -7461,8 +7986,15 @@ function ModelViewerDialog({ tinuuid, apiKey, hid, ...props }) {
                             /*#__PURE__*/ jsx(ModelViewerRoot, {
                                 tinuuid: tinuuid,
                                 apiKey: apiKey,
+                                apiBaseUrl: apiBaseUrl,
+                                legacyApiBaseUrl: legacyApiBaseUrl,
+                                mode: "ar-viewer",
+                                initialWidgetSessionToken: initialWidgetSessionToken,
+                                handoffUrl: handoffUrl,
                                 hid: hid,
-                                showDialogCloseButton: true
+                                sizeType: sizeType,
+                                showDialogCloseButton: true,
+                                viewerSurface: "dialog"
                             })
                         ]
                     })
@@ -7486,7 +8018,7 @@ function ModelViewerDialog({ tinuuid, apiKey, hid, ...props }) {
         ]
     });
 }
-function ModelViewer({ tinuuid, apiKey, hid, layout, background, className, ...props }) {
+function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, launchAr, sizeType, layout, background, viewerSurface, className, ...props }) {
     const [container, setContainer] = useState(null);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -7517,9 +8049,19 @@ function ModelViewer({ tinuuid, apiKey, hid, layout, background, className, ...p
                             children: /*#__PURE__*/ jsx(ModelViewerRoot, {
                                 tinuuid: tinuuid,
                                 apiKey: apiKey,
+                                appClipBundleId: appClipBundleId,
+                                arExperience: arExperience,
+                                apiBaseUrl: apiBaseUrl,
+                                legacyApiBaseUrl: legacyApiBaseUrl,
+                                mode: mode,
+                                initialWidgetSessionToken: initialWidgetSessionToken,
+                                handoffUrl: handoffUrl,
                                 hid: hid,
+                                launchAr: launchAr,
+                                sizeType: sizeType,
                                 layout: layout,
-                                background: background
+                                background: background,
+                                viewerSurface: viewerSurface
                             })
                         })
                     })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/react-model-viewer",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "publishConfig": {
     "access": "public"
   },
@@ -36,7 +36,7 @@
     "radix-ui": "1.4.3",
     "react-shadow": "^20.6.0",
     "tailwind-merge": "3.4.0",
-    "three": "^0.182.0"
+    "three": "0.182.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.58.0",