@vincentt-xr/sdk 2.0.0-alpha.7 → 2.0.0-alpha.8

package/dist/product/useProductAr.d.ts

@@ -0,0 +1,37 @@
+import { XRCapabilities } from '../capabilities/types';
+import { SessionFacade } from '../hooks/useXRSession';
+import { ProductArMode, ProductArState, ProductArStatus, ProductViewerElement } from './types';
+/** Modes the device supports, in the viewer's preference order. */
+export declare const supportedProductArModes: (placement: XRCapabilities["placement"] | null, preference: ProductArMode[]) => ProductArMode[];
+/**
+ * The camera handoff. Only WebXR runs in the page and needs the camera the
+ * tracking session holds; Scene Viewer and Quick Look open a native activity
+ * and never touch the page's stream. So: for `webxr`, stop a running or
+ * paused webcam session before AR and bring the same camera back in the
+ * same lifecycle (a paused session returns paused) when AR ends; for every
+ * other mode do nothing. Pure over the facade; returns the resume function
+ * (a no-op when nothing was stopped).
+ */
+export declare const releaseSessionForAr: (session: SessionFacade | null, mode?: ProductArMode | null) => Promise<() => Promise<void>>;
+export type UseProductArOptions = {
+    /** Preference order; default `["webxr", "scene-viewer", "quick-look"]`. */
+    modes?: ProductArMode[];
+    /** Release a running tracking session's camera before AR and restore it after. Default `true`. */
+    handoffCamera?: boolean;
+    onStatus?: (status: ProductArStatus) => void;
+};
+export type UseProductArResult = ProductArState & {
+    /** Attach to `<ProductViewer onReady>` (or pass the element). */
+    bind: (element: ProductViewerElement | null) => void;
+    /** Launch AR. Must run from a user gesture. Resolves when the native session starts or fails. */
+    activate: () => Promise<void>;
+    /** The `onArStatus` callback for `<ProductViewer>`; `bind` already listens, this is for apps that wire manually. */
+    handleStatus: (status: ProductArStatus) => void;
+};
+/**
+ * Observe and drive placement AR for a `<ProductViewer>`: supported modes
+ * from the capability check, `canActivate` from the element, the live
+ * `ar-status`, and `activate()` with the camera handoff when an
+ * `<XRProvider>` session is running on the same page.
+ */
+export declare const useProductAr: (options?: UseProductArOptions) => UseProductArResult;

package/dist/product/useProductDetails.d.ts

@@ -0,0 +1,60 @@
+import { DimensionLine, ProductDimensions, ProductHotspotData } from './details';
+import { ProductViewerElement } from './types';
+type Vector3D = {
+    x: number;
+    y: number;
+    z: number;
+};
+/**
+ * The model-viewer members these hooks read, all optional: a
+ * `ProductViewerElement` (what `onReady` / the ref hand back) is assignable
+ * as is, no cast needed.
+ */
+export type ProductDetailsElement = ProductViewerElement & {
+    availableVariants?: string[];
+    variantName?: string | null;
+    getDimensions?: () => Vector3D;
+    getBoundingBoxCenter?: () => Vector3D;
+    positionAndNormalFromPoint?: (x: number, y: number) => {
+        position: Vector3D;
+        normal: Vector3D;
+    } | null;
+};
+/**
+ * `KHR_materials_variants` on the loaded model: the names, the active one,
+ * and a setter. Variants change materials only, so they carry into AR
+ * wherever the platform renders the glTF (WebXR, Scene Viewer); Quick Look
+ * shows the USDZ as exported.
+ */
+export declare const useProductVariants: (element: ProductViewerElement | null) => {
+    variants: string[];
+    variant: string | null;
+    setVariant: (name: string | null) => void;
+};
+/** Bounding-box size and centre (model metres) once the model is loaded; `null` before. */
+export declare const useProductDimensions: (element: ProductDetailsElement | null) => ProductDimensions | null;
+export type UseProductHotspotsOptions = {
+    /** Starting list (authoring data from storage or the CMS). A new array identity replaces the list, so async data is adopted when it arrives. */
+    initial?: ProductHotspotData[];
+    onChange?: (hotspots: ProductHotspotData[]) => void;
+};
+export type UseProductHotspotsResult = {
+    hotspots: ProductHotspotData[];
+    /** Place a hotspot where the pointer hit the model (client coordinates); `null` when the ray missed. */
+    placeFromPointer: (clientX: number, clientY: number, label?: string) => ProductHotspotData | null;
+    add: (hotspot: Omit<ProductHotspotData, "id"> & {
+        id?: string;
+    }) => ProductHotspotData;
+    update: (id: string, patch: Partial<Omit<ProductHotspotData, "id">>) => void;
+    remove: (id: string) => void;
+    clear: () => void;
+    /** JSON for storage / the CMS. */
+    json: string;
+    /** Replace from JSON; invalid entries are dropped. */
+    importJson: (json: string) => void;
+};
+/** Authoring + runtime state for hotspots; render them with `<ProductHotspot>` inside `<ProductViewer>`. */
+export declare const useProductHotspots: (element: ProductDetailsElement | null, options?: UseProductHotspotsOptions) => UseProductHotspotsResult;
+/** Dimension lines for `<ProductDimensions>`; `[]` until the model is loaded. */
+export declare const useDimensionLines: (dimensions: ProductDimensions | null) => DimensionLine[];
+export {};

package/dist/product.cjs

@@ -0,0 +1 @@
+"use strict";var ae=Object.create;var X=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,le=Object.prototype.hasOwnProperty;var de=(e,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of ce(r))!le.call(e,s)&&s!==t&&X(e,s,{get:()=>r[s],enumerable:!(a=ie(r,s))||a.enumerable});return e};var fe=(e,r,t)=>(t=e!=null?ae(ue(e)):{},de(r||!e||!e.__esModule?X(t,"default",{value:e,enumerable:!0}):t,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),o=require("react"),N=require("./index-CeVkgsag.cjs"),pe=require("./useXRCapabilities-B1R2ghy-.cjs");let j=null;const B=()=>typeof customElements<"u"&&customElements.get("model-viewer")!==void 0,U=()=>B()?Promise.resolve():(j||(j=import("@google/model-viewer").then(()=>{}).catch(e=>{throw j=null,new Error(`@google/model-viewer could not be loaded (install it as a dependency to use <ProductViewer>): ${e instanceof Error?e.message:String(e)}`)})),j),O=["webxr","scene-viewer","quick-look"],W=o.forwardRef(({src:e,iosSrc:r,alt:t="3D product",poster:a,arModes:s=O,ar:n=!0,placement:i="floor",scale:d="auto",cameraControls:f=!0,autoRotate:A=!1,loading:v="auto",environmentImage:x,shadowIntensity:l=1,exposure:c,attributes:p,className:m,style:y,children:h,onLoad:g,onError:P,onArStatus:F,onReady:M},u)=>{const E=o.useRef(null),[R,re]=o.useState(!1),L=o.useRef({onLoad:g,onError:P,onArStatus:F,onReady:M});L.current={onLoad:g,onError:P,onArStatus:F,onReady:M};const ne=o.useCallback(b=>{E.current=b,typeof u=="function"?u(b):u&&(u.current=b)},[u]);o.useEffect(()=>{let b=!0;return U().then(()=>{b&&re(!0)}).catch($=>{var D,z;b&&((z=(D=L.current).onError)==null||z.call(D,$))}),()=>{b=!1}},[]),o.useEffect(()=>{var q,I;const b=E.current;if(!R||!b)return;const $=()=>{var k,w;return(w=(k=L.current).onLoad)==null?void 0:w.call(k)},D=k=>{var V,T;const w=k.detail;(T=(V=L.current).onError)==null||T.call(V,(w==null?void 0:w.sourceError)??new Error(`model-viewer ${(w==null?void 0:w.type)??"error"} for ${e}`))},z=k=>{var w,V;return(V=(w=L.current).onArStatus)==null?void 0:V.call(w,k.detail.status)};return b.addEventListener("load",$),b.addEventListener("error",D),b.addEventListener("ar-status",z),(I=(q=L.current).onReady)==null||I.call(q,b),()=>{b.removeEventListener("load",$),b.removeEventListener("error",D),b.removeEventListener("ar-status",z)}},[R,e]);const oe={src:e,alt:t,...r?{"ios-src":r}:{},...a?{poster:a}:{},...n?{ar:"","ar-modes":s.join(" "),"ar-placement":i,"ar-scale":d}:{},...f?{"camera-controls":""}:{},...A?{"auto-rotate":""}:{},loading:v,...x?{"environment-image":x}:{},"shadow-intensity":String(l),...c!==void 0?{exposure:String(c)}:{},...p??{},class:m,style:y,ref:ne};return o.createElement("model-viewer",oe,h)});W.displayName="ProductViewer";const J=(e,r)=>{if(!e)return[];const t={webxr:e.webxr,"scene-viewer":e.sceneViewer,"quick-look":e.quickLook};return r.filter(a=>t[a])},G=async(e,r="webxr")=>{if(!e||r!=="webxr")return async()=>{};const t=e.store.getSnapshot(),a=t.lifecycle==="paused";if(t.lifecycle!=="running"&&!a)return async()=>{};if(t.source!==N.XRMediaSource.WEBCAM)return async()=>{};const s=t.cameraFacing??"user";return await e.stop(),async()=>{await e.switchCamera({facingMode:s}),a&&e.pause()}},me=(e={})=>{var M;const{handoffCamera:r=!0}=e,t=(e.modes??O).join(","),a=o.useMemo(()=>t.split(","),[t]),s=pe.useXRCapabilities({queryPermission:!1}),n=N.useOptionalXRContext(),[i,d]=o.useState(null),[f,A]=o.useState("not-presenting"),[v,x]=o.useState(!1),[l,c]=o.useState(null),p=o.useRef(null),m=o.useRef(e.onStatus);m.current=e.onStatus;const y=o.useMemo(()=>{var u;return J(((u=s.capabilities)==null?void 0:u.placement)??null,a)},[s.capabilities,a]),h=s.status==="ready"&&y.length===0?((M=s.capabilities)==null?void 0:M.placement.reason)??N.createFallbackReason("placement-unsupported"):null,g=o.useCallback(u=>{var E;if(A(u),(E=m.current)==null||E.call(m,u),u==="not-presenting"||u==="failed"){const R=p.current;p.current=null,R&&R().catch(()=>{})}},[]),P=o.useCallback(u=>{d(u)},[]);o.useEffect(()=>{if(!i)return;const u=R=>g(R.detail.status),E=()=>x(!!i.canActivateAR);return i.addEventListener("ar-status",u),i.addEventListener("load",E),x(!!i.canActivateAR),()=>{i.removeEventListener("ar-status",u),i.removeEventListener("load",E)}},[i,g]);const F=o.useCallback(async()=>{if(!i)throw new Error("useProductAr: bind the <ProductViewer> first");c(null);try{r&&(p.current=await G((n==null?void 0:n.session)??null,y[0]??null)),await i.activateAR()}catch(u){const E=u instanceof Error?u:new Error(String(u));throw c(E),g("failed"),E}},[i,r,n,g,y]);return o.useMemo(()=>({status:h?"unavailable":f,supportedModes:y,canActivate:v,reason:h,loading:s.status==="checking"||s.status==="idle",error:l,bind:P,activate:F,handleStatus:g}),[h,f,y,v,s.status,l,P,F,g])},H=(e,r=4)=>e.map(t=>Number(t.toFixed(r))).join(" "),K=e=>({slot:`hotspot-${e.id}`,"data-position":H(e.position),"data-normal":H(e.normal)}),be=/[^a-z0-9-]+/g,Q=(e,r)=>{let t=(r??"").toLowerCase().replace(be,"-").replace(/^-+|-+$/g,"")||"hotspot";t.startsWith("__")&&(t=t.replace(/^_+/,"")||"hotspot");const a=new Set(e.map(n=>n.id));if(!a.has(t))return t;let s=2;for(;a.has(`${t}-${s}`);)s+=1;return`${t}-${s}`},_=e=>{if(!Array.isArray(e))return[];const r=[],t=new Set;for(const a of e){if(!a||typeof a!="object")continue;const s=a,n=Array.isArray(s.position)?s.position:null,i=Array.isArray(s.normal)?s.normal:[0,0,1];typeof s.id!="string"||!s.id||t.has(s.id)||s.id.startsWith("__")||!n||n.length!==3||n.some(d=>typeof d!="number"||!Number.isFinite(d))||i.length!==3||i.some(d=>typeof d!="number"||!Number.isFinite(d))||(t.add(s.id),r.push({id:s.id,position:[n[0],n[1],n[2]],normal:[i[0],i[1],i[2]],...typeof s.label=="string"?{label:s.label}:{},...typeof s.description=="string"?{description:s.description}:{}}))}return r},Y=e=>JSON.stringify(_(e),null,2),Z=(e,r="metric")=>{if(!Number.isFinite(e))return"–";if(r==="imperial"){const t=e/.0254;return t>=12?`${(t/12).toFixed(2)} ft`:`${t.toFixed(1)} in`}return e>=1?`${e.toFixed(2)} m`:`${(e*100).toFixed(1)} cm`},ee=({size:e,center:r})=>{const[t,a,s]=e,[n,i,d]=r,f=n-t/2,A=n+t/2,v=i-a/2,x=i+a/2,l=d-s/2,c=d+s/2,p=(m,y,h,g)=>({axis:m,start:y,end:h,mid:[(y[0]+h[0])/2,(y[1]+h[1])/2,(y[2]+h[2])/2],length:g});return[p("x",[f,v,c],[A,v,c],t),p("y",[f,v,c],[f,x,c],a),p("z",[f,v,l],[f,v,c],s)]},C=e=>e,te=(e,r)=>(e.loaded&&r(),e.addEventListener("load",r),()=>e.removeEventListener("load",r)),ye=e=>{const[r,t]=o.useState([]),[a,s]=o.useState(null);o.useEffect(()=>{if(e)return te(e,()=>{t([...C(e).availableVariants??[]]),s(C(e).variantName??null)})},[e]);const n=o.useCallback(i=>{e&&(C(e).variantName=i,s(i))},[e]);return o.useMemo(()=>({variants:r,variant:a,setVariant:n}),[r,a,n])},ge=e=>{const[r,t]=o.useState(null);return o.useEffect(()=>{if(e)return te(e,()=>{var n,i,d,f;const a=(i=(n=C(e)).getDimensions)==null?void 0:i.call(n),s=(f=(d=C(e)).getBoundingBoxCenter)==null?void 0:f.call(d);!a||!s||t({size:[a.x,a.y,a.z],center:[s.x,s.y,s.z]})})},[e]),r},ve=(e,r={})=>{const[t,a]=o.useState(()=>_(r.initial??[])),s=o.useRef(r.initial);o.useEffect(()=>{r.initial!==s.current&&(s.current=r.initial,a(_(r.initial??[])))},[r.initial]);const n=o.useCallback(l=>{var c;a(l),(c=r.onChange)==null||c.call(r,l)},[r.onChange]),i=o.useCallback(l=>{const c={...l,id:l.id??Q(t,l.label)};return n([...t,c]),c},[t,n]),d=o.useCallback((l,c,p)=>{var g,P;const m=e?(P=(g=C(e)).positionAndNormalFromPoint)==null?void 0:P.call(g,l,c):null;if(!m)return null;const y=[m.position.x,m.position.y,m.position.z],h=[m.normal.x,m.normal.y,m.normal.z];return i({position:y,normal:h,...p?{label:p}:{}})},[e,i]),f=o.useCallback((l,c)=>n(t.map(p=>p.id===l?{...p,...c}:p)),[t,n]),A=o.useCallback(l=>n(t.filter(c=>c.id!==l)),[t,n]),v=o.useCallback(()=>n([]),[n]),x=o.useCallback(l=>{try{n(_(JSON.parse(l)))}catch{}},[n]);return o.useMemo(()=>({hotspots:t,placeFromPointer:d,add:i,update:f,remove:A,clear:v,json:Y(t),importJson:x}),[t,d,i,f,A,v,x])},se=e=>o.useMemo(()=>e?ee(e):[],[e]),he={display:"flex",alignItems:"center",gap:6,padding:"4px 8px",borderRadius:999,background:"rgba(8, 15, 28, 0.85)",color:"#f8fafc",border:"1px solid rgba(255,255,255,0.3)",fontSize:12,fontFamily:"system-ui, sans-serif",whiteSpace:"nowrap",cursor:"pointer"},we={display:"inline-flex",alignItems:"center",gap:6,transform:"translate(-50%, -50%)"},Ee={background:"none",border:0,padding:0,margin:0},xe=({hotspot:e,children:r,onClick:t,style:a,className:s})=>S.jsx("button",{type:"button",...K(e),className:s,style:Ee,onClick:n=>{n.stopPropagation(),t==null||t(e)},"aria-label":e.label??e.id,"data-visibility-attribute":"visible",children:S.jsx("span",{style:{...he,...we,...a},children:r??S.jsxs(S.Fragment,{children:[S.jsx("span",{style:{width:8,height:8,borderRadius:4,background:"#22d3ee"}}),e.label]})})}),Se={padding:"2px 6px",borderRadius:4,background:"rgba(8, 15, 28, 0.85)",color:"#f8fafc",border:"1px solid rgba(255,255,255,0.3)",fontSize:11,fontFamily:"ui-monospace, monospace",whiteSpace:"nowrap",transform:"translate(-50%, -50%)"},Ae="hotspot-__dim-",Pe={x:"W",y:"H",z:"D"},Re=({dimensions:e,unit:r="metric",axes:t=["x","y","z"],style:a})=>{const s=se(e);return S.jsx(S.Fragment,{children:s.filter(n=>t.includes(n.axis)).map(n=>S.jsx("div",{slot:`${Ae}${n.axis}`,"data-position":H(n.mid),"data-normal":n.axis==="y"?"-1 0 0":"0 0 1",children:S.jsxs("span",{style:{...Se,...a},children:[Pe[n.axis]," ",Z(n.length,r)]})},n.axis))})};exports.DEFAULT_PRODUCT_AR_MODES=O;exports.ProductDimensions=Re;exports.ProductHotspot=xe;exports.ProductViewer=W;exports.dimensionLines=ee;exports.formatLength=Z;exports.hotspotAttributes=K;exports.isModelViewerDefined=B;exports.loadModelViewer=U;exports.nextHotspotId=Q;exports.parseHotspots=_;exports.releaseSessionForAr=G;exports.serializeHotspots=Y;exports.supportedProductArModes=J;exports.useDimensionLines=se;exports.useProductAr=me;exports.useProductDimensions=ge;exports.useProductHotspots=ve;exports.useProductVariants=ye;

package/dist/product.js

@@ -0,0 +1,414 @@
+import { jsx as C, jsxs as J, Fragment as T } from "react/jsx-runtime";
+import { forwardRef as Z, useRef as j, useState as S, useCallback as w, useEffect as N, createElement as tt, useMemo as z } from "react";
+import { g as et, h as rt, j as nt } from "./index-CnGox6Xr.js";
+import { u as ot } from "./useXRCapabilities-C68v__wB.js";
+let O = null;
+const st = () => typeof customElements < "u" && customElements.get("model-viewer") !== void 0, it = () => st() ? Promise.resolve() : (O || (O = import("@google/model-viewer").then(() => {
+}).catch((t) => {
+  throw O = null, new Error(
+    `@google/model-viewer could not be loaded (install it as a dependency to use <ProductViewer>): ${t instanceof Error ? t.message : String(t)}`
+  );
+})), O), U = [
+  "webxr",
+  "scene-viewer",
+  "quick-look"
+], at = Z(
+  ({
+    src: t,
+    iosSrc: o,
+    alt: e = "3D product",
+    poster: s,
+    arModes: r = U,
+    ar: n = !0,
+    placement: i = "floor",
+    scale: l = "auto",
+    cameraControls: d = !0,
+    autoRotate: A = !1,
+    loading: g = "auto",
+    environmentImage: x,
+    shadowIntensity: u = 1,
+    exposure: a,
+    attributes: f,
+    className: p,
+    style: y,
+    children: v,
+    onLoad: b,
+    onError: L,
+    onArStatus: V,
+    onReady: _
+  }, c) => {
+    const E = j(null), [P, K] = S(!1), R = j({ onLoad: b, onError: L, onArStatus: V, onReady: _ });
+    R.current = { onLoad: b, onError: L, onArStatus: V, onReady: _ };
+    const Q = w(
+      (m) => {
+        E.current = m, typeof c == "function" ? c(m) : c && (c.current = m);
+      },
+      [c]
+    );
+    N(() => {
+      let m = !0;
+      return it().then(() => {
+        m && K(!0);
+      }).catch((H) => {
+        var k, D;
+        m && ((D = (k = R.current).onError) == null || D.call(k, H));
+      }), () => {
+        m = !1;
+      };
+    }, []), N(() => {
+      var X, q;
+      const m = E.current;
+      if (!P || !m) return;
+      const H = () => {
+        var F, h;
+        return (h = (F = R.current).onLoad) == null ? void 0 : h.call(F);
+      }, k = (F) => {
+        var M, W;
+        const h = F.detail;
+        (W = (M = R.current).onError) == null || W.call(
+          M,
+          (h == null ? void 0 : h.sourceError) ?? new Error(`model-viewer ${(h == null ? void 0 : h.type) ?? "error"} for ${t}`)
+        );
+      }, D = (F) => {
+        var h, M;
+        return (M = (h = R.current).onArStatus) == null ? void 0 : M.call(
+          h,
+          F.detail.status
+        );
+      };
+      return m.addEventListener("load", H), m.addEventListener("error", k), m.addEventListener("ar-status", D), (q = (X = R.current).onReady) == null || q.call(X, m), () => {
+        m.removeEventListener("load", H), m.removeEventListener("error", k), m.removeEventListener("ar-status", D);
+      };
+    }, [P, t]);
+    const Y = {
+      src: t,
+      alt: e,
+      ...o ? { "ios-src": o } : {},
+      ...s ? { poster: s } : {},
+      ...n ? { ar: "", "ar-modes": r.join(" "), "ar-placement": i, "ar-scale": l } : {},
+      ...d ? { "camera-controls": "" } : {},
+      ...A ? { "auto-rotate": "" } : {},
+      loading: g,
+      ...x ? { "environment-image": x } : {},
+      "shadow-intensity": String(u),
+      ...a !== void 0 ? { exposure: String(a) } : {},
+      ...f ?? {},
+      class: p,
+      style: y,
+      ref: Q
+    };
+    return tt("model-viewer", Y, v);
+  }
+);
+at.displayName = "ProductViewer";
+const ct = (t, o) => {
+  if (!t) return [];
+  const e = {
+    webxr: t.webxr,
+    "scene-viewer": t.sceneViewer,
+    "quick-look": t.quickLook
+  };
+  return o.filter((s) => e[s]);
+}, ut = async (t, o = "webxr") => {
+  if (!t || o !== "webxr") return async () => {
+  };
+  const e = t.store.getSnapshot(), s = e.lifecycle === "paused";
+  if (e.lifecycle !== "running" && !s) return async () => {
+  };
+  if (e.source !== et.WEBCAM) return async () => {
+  };
+  const r = e.cameraFacing ?? "user";
+  return await t.stop(), async () => {
+    await t.switchCamera({ facingMode: r }), s && t.pause();
+  };
+}, Rt = (t = {}) => {
+  var _;
+  const { handoffCamera: o = !0 } = t, e = (t.modes ?? U).join(","), s = z(() => e.split(","), [e]), r = ot({ queryPermission: !1 }), n = rt(), [i, l] = S(null), [d, A] = S("not-presenting"), [g, x] = S(!1), [u, a] = S(null), f = j(null), p = j(t.onStatus);
+  p.current = t.onStatus;
+  const y = z(
+    () => {
+      var c;
+      return ct(((c = r.capabilities) == null ? void 0 : c.placement) ?? null, s);
+    },
+    [r.capabilities, s]
+  ), v = r.status === "ready" && y.length === 0 ? ((_ = r.capabilities) == null ? void 0 : _.placement.reason) ?? nt("placement-unsupported") : null, b = w((c) => {
+    var E;
+    if (A(c), (E = p.current) == null || E.call(p, c), c === "not-presenting" || c === "failed") {
+      const P = f.current;
+      f.current = null, P && P().catch(() => {
+      });
+    }
+  }, []), L = w((c) => {
+    l(c);
+  }, []);
+  N(() => {
+    if (!i) return;
+    const c = (P) => b(P.detail.status), E = () => x(!!i.canActivateAR);
+    return i.addEventListener("ar-status", c), i.addEventListener("load", E), x(!!i.canActivateAR), () => {
+      i.removeEventListener("ar-status", c), i.removeEventListener("load", E);
+    };
+  }, [i, b]);
+  const V = w(async () => {
+    if (!i) throw new Error("useProductAr: bind the <ProductViewer> first");
+    a(null);
+    try {
+      o && (f.current = await ut(
+        (n == null ? void 0 : n.session) ?? null,
+        y[0] ?? null
+      )), await i.activateAR();
+    } catch (c) {
+      const E = c instanceof Error ? c : new Error(String(c));
+      throw a(E), b("failed"), E;
+    }
+  }, [i, o, n, b, y]);
+  return z(
+    () => ({
+      status: v ? "unavailable" : d,
+      supportedModes: y,
+      canActivate: g,
+      reason: v,
+      loading: r.status === "checking" || r.status === "idle",
+      error: u,
+      bind: L,
+      activate: V,
+      handleStatus: b
+    }),
+    [
+      v,
+      d,
+      y,
+      g,
+      r.status,
+      u,
+      L,
+      V,
+      b
+    ]
+  );
+}, B = (t, o = 4) => t.map((e) => Number(e.toFixed(o))).join(" "), lt = (t) => ({
+  slot: `hotspot-${t.id}`,
+  "data-position": B(t.position),
+  "data-normal": B(t.normal)
+}), dt = /[^a-z0-9-]+/g, ft = (t, o) => {
+  let e = (o ?? "").toLowerCase().replace(dt, "-").replace(/^-+|-+$/g, "") || "hotspot";
+  e.startsWith("__") && (e = e.replace(/^_+/, "") || "hotspot");
+  const s = new Set(t.map((n) => n.id));
+  if (!s.has(e)) return e;
+  let r = 2;
+  for (; s.has(`${e}-${r}`); ) r += 1;
+  return `${e}-${r}`;
+}, I = (t) => {
+  if (!Array.isArray(t)) return [];
+  const o = [], e = /* @__PURE__ */ new Set();
+  for (const s of t) {
+    if (!s || typeof s != "object") continue;
+    const r = s, n = Array.isArray(r.position) ? r.position : null, i = Array.isArray(r.normal) ? r.normal : [0, 0, 1];
+    typeof r.id != "string" || !r.id || e.has(r.id) || r.id.startsWith("__") || !n || n.length !== 3 || n.some((l) => typeof l != "number" || !Number.isFinite(l)) || i.length !== 3 || i.some((l) => typeof l != "number" || !Number.isFinite(l)) || (e.add(r.id), o.push({
+      id: r.id,
+      position: [n[0], n[1], n[2]],
+      normal: [i[0], i[1], i[2]],
+      ...typeof r.label == "string" ? { label: r.label } : {},
+      ...typeof r.description == "string" ? { description: r.description } : {}
+    }));
+  }
+  return o;
+}, pt = (t) => JSON.stringify(I(t), null, 2), mt = (t, o = "metric") => {
+  if (!Number.isFinite(t)) return "–";
+  if (o === "imperial") {
+    const e = t / 0.0254;
+    return e >= 12 ? `${(e / 12).toFixed(2)} ft` : `${e.toFixed(1)} in`;
+  }
+  return t >= 1 ? `${t.toFixed(2)} m` : `${(t * 100).toFixed(1)} cm`;
+}, yt = ({ size: t, center: o }) => {
+  const [e, s, r] = t, [n, i, l] = o, d = n - e / 2, A = n + e / 2, g = i - s / 2, x = i + s / 2, u = l - r / 2, a = l + r / 2, f = (p, y, v, b) => ({
+    axis: p,
+    start: y,
+    end: v,
+    mid: [(y[0] + v[0]) / 2, (y[1] + v[1]) / 2, (y[2] + v[2]) / 2],
+    length: b
+  });
+  return [
+    f("x", [d, g, a], [A, g, a], e),
+    f("y", [d, g, a], [d, x, a], s),
+    f("z", [d, g, u], [d, g, a], r)
+  ];
+}, $ = (t) => t, G = (t, o) => (t.loaded && o(), t.addEventListener("load", o), () => t.removeEventListener("load", o)), Ft = (t) => {
+  const [o, e] = S([]), [s, r] = S(null);
+  N(() => {
+    if (t)
+      return G(t, () => {
+        e([...$(t).availableVariants ?? []]), r($(t).variantName ?? null);
+      });
+  }, [t]);
+  const n = w(
+    (i) => {
+      t && ($(t).variantName = i, r(i));
+    },
+    [t]
+  );
+  return z(() => ({ variants: o, variant: s, setVariant: n }), [o, s, n]);
+}, zt = (t) => {
+  const [o, e] = S(null);
+  return N(() => {
+    if (t)
+      return G(t, () => {
+        var n, i, l, d;
+        const s = (i = (n = $(t)).getDimensions) == null ? void 0 : i.call(n), r = (d = (l = $(t)).getBoundingBoxCenter) == null ? void 0 : d.call(l);
+        !s || !r || e({ size: [s.x, s.y, s.z], center: [r.x, r.y, r.z] });
+      });
+  }, [t]), o;
+}, $t = (t, o = {}) => {
+  const [e, s] = S(
+    () => I(o.initial ?? [])
+  ), r = j(o.initial);
+  N(() => {
+    o.initial !== r.current && (r.current = o.initial, s(I(o.initial ?? [])));
+  }, [o.initial]);
+  const n = w(
+    (u) => {
+      var a;
+      s(u), (a = o.onChange) == null || a.call(o, u);
+    },
+    // onChange identity is the caller's business.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [o.onChange]
+  ), i = w(
+    (u) => {
+      const a = {
+        ...u,
+        id: u.id ?? ft(e, u.label)
+      };
+      return n([...e, a]), a;
+    },
+    [e, n]
+  ), l = w(
+    (u, a, f) => {
+      var b, L;
+      const p = t ? (L = (b = $(t)).positionAndNormalFromPoint) == null ? void 0 : L.call(b, u, a) : null;
+      if (!p) return null;
+      const y = [p.position.x, p.position.y, p.position.z], v = [p.normal.x, p.normal.y, p.normal.z];
+      return i({ position: y, normal: v, ...f ? { label: f } : {} });
+    },
+    [t, i]
+  ), d = w(
+    (u, a) => n(e.map((f) => f.id === u ? { ...f, ...a } : f)),
+    [e, n]
+  ), A = w(
+    (u) => n(e.filter((a) => a.id !== u)),
+    [e, n]
+  ), g = w(() => n([]), [n]), x = w(
+    (u) => {
+      try {
+        n(I(JSON.parse(u)));
+      } catch {
+      }
+    },
+    [n]
+  );
+  return z(
+    () => ({
+      hotspots: e,
+      placeFromPointer: l,
+      add: i,
+      update: d,
+      remove: A,
+      clear: g,
+      json: pt(e),
+      importJson: x
+    }),
+    [e, l, i, d, A, g, x]
+  );
+}, bt = (t) => z(() => t ? yt(t) : [], [t]), gt = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  padding: "4px 8px",
+  borderRadius: 999,
+  background: "rgba(8, 15, 28, 0.85)",
+  color: "#f8fafc",
+  border: "1px solid rgba(255,255,255,0.3)",
+  fontSize: 12,
+  fontFamily: "system-ui, sans-serif",
+  whiteSpace: "nowrap",
+  cursor: "pointer"
+}, vt = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6,
+  transform: "translate(-50%, -50%)"
+}, ht = { background: "none", border: 0, padding: 0, margin: 0 }, Nt = ({
+  hotspot: t,
+  children: o,
+  onClick: e,
+  style: s,
+  className: r
+}) => /* @__PURE__ */ C(
+  "button",
+  {
+    type: "button",
+    ...lt(t),
+    className: r,
+    style: ht,
+    onClick: (n) => {
+      n.stopPropagation(), e == null || e(t);
+    },
+    "aria-label": t.label ?? t.id,
+    "data-visibility-attribute": "visible",
+    children: /* @__PURE__ */ C("span", { style: { ...gt, ...vt, ...s }, children: o ?? /* @__PURE__ */ J(T, { children: [
+      /* @__PURE__ */ C("span", { style: { width: 8, height: 8, borderRadius: 4, background: "#22d3ee" } }),
+      t.label
+    ] }) })
+  }
+), wt = {
+  padding: "2px 6px",
+  borderRadius: 4,
+  background: "rgba(8, 15, 28, 0.85)",
+  color: "#f8fafc",
+  border: "1px solid rgba(255,255,255,0.3)",
+  fontSize: 11,
+  fontFamily: "ui-monospace, monospace",
+  whiteSpace: "nowrap",
+  transform: "translate(-50%, -50%)"
+}, Et = "hotspot-__dim-", xt = { x: "W", y: "H", z: "D" }, Vt = ({
+  dimensions: t,
+  unit: o = "metric",
+  axes: e = ["x", "y", "z"],
+  style: s
+}) => {
+  const r = bt(t);
+  return /* @__PURE__ */ C(T, { children: r.filter((n) => e.includes(n.axis)).map((n) => /* @__PURE__ */ C(
+    "div",
+    {
+      slot: `${Et}${n.axis}`,
+      "data-position": B(n.mid),
+      "data-normal": n.axis === "y" ? "-1 0 0" : "0 0 1",
+      children: /* @__PURE__ */ J("span", { style: { ...wt, ...s }, children: [
+        xt[n.axis],
+        " ",
+        mt(n.length, o)
+      ] })
+    },
+    n.axis
+  )) });
+};
+export {
+  U as DEFAULT_PRODUCT_AR_MODES,
+  Vt as ProductDimensions,
+  Nt as ProductHotspot,
+  at as ProductViewer,
+  yt as dimensionLines,
+  mt as formatLength,
+  lt as hotspotAttributes,
+  st as isModelViewerDefined,
+  it as loadModelViewer,
+  ft as nextHotspotId,
+  I as parseHotspots,
+  ut as releaseSessionForAr,
+  pt as serializeHotspots,
+  ct as supportedProductArModes,
+  bt as useDimensionLines,
+  Rt as useProductAr,
+  zt as useProductDimensions,
+  $t as useProductHotspots,
+  Ft as useProductVariants
+};