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

package/dist/product/ProductDimensions.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { DimensionLine, ProductDimensions as Dimensions } from './details';
+export type ProductDimensionsProps = {
+    dimensions: Dimensions | null;
+    unit?: "metric" | "imperial";
+    /** Which axes to label. Default all three. */
+    axes?: Array<DimensionLine["axis"]>;
+    style?: CSSProperties;
+};
+export declare const DIMENSION_SLOT_PREFIX = "hotspot-__dim-";
+/**
+ * True-size labels on the model's bounding box (width / height / depth),
+ * anchored as hotspots so they track the model. Child of `<ProductViewer>`.
+ * Pair with `scale="fixed"` so AR shows the same size.
+ */
+export declare const ProductDimensions: ({ dimensions, unit, axes, style, }: ProductDimensionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/product/ProductHotspot.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ProductHotspotData } from './details';
+export type ProductHotspotProps = {
+    hotspot: ProductHotspotData;
+    /** Custom content; default a dot with the label. */
+    children?: ReactNode;
+    onClick?: (hotspot: ProductHotspotData) => void;
+    style?: CSSProperties;
+    className?: string;
+};
+/**
+ * A surface-anchored callout. Must be a child of `<ProductViewer>`: model-viewer
+ * slots it as `hotspot-{id}` and keeps it over `position` as the camera
+ * orbits, fading it when the surface faces away.
+ */
+export declare const ProductHotspot: ({ hotspot, children, onClick, style, className, }: ProductHotspotProps) => import("react/jsx-runtime").JSX.Element;

package/dist/product/ProductViewer.d.ts

@@ -0,0 +1,9 @@
+import { ProductViewerElement, ProductViewerProps } from './types';
+/**
+ * Surface-placement product viewer: a typed React wrapper over Google's
+ * `<model-viewer>`, loaded lazily. Renders the GLB with camera controls and
+ * hands off to WebXR, Scene Viewer or Quick Look from a user gesture. This
+ * is not the SDK's camera session; see `useProductAr` for the camera
+ * handoff when both exist on one page.
+ */
+export declare const ProductViewer: import('react').ForwardRefExoticComponent<ProductViewerProps & import('react').RefAttributes<ProductViewerElement | null>>;

package/dist/product/details.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Pure helpers for product details: variants, hotspots and dimensions.
+ * model-viewer expresses positions as "x y z" strings in model metres; the
+ * SDK keeps them as numeric tuples so they are serializable and testable.
+ */
+export type Vec3 = [number, number, number];
+/** A surface-anchored annotation, serializable authoring data. */
+export type ProductHotspotData = {
+    /** Unique within the product; becomes `slot="hotspot-{id}"`. */
+    id: string;
+    /** Model-space position in metres. */
+    position: Vec3;
+    /** Surface normal at the position (unit vector). */
+    normal: Vec3;
+    /** Short label shown in the callout. */
+    label?: string;
+    /** Longer text, free-form. */
+    description?: string;
+};
+export type ProductDimensions = {
+    /** Size along x / y / z in metres. */
+    size: Vec3;
+    center: Vec3;
+};
+export declare const formatVec3: (v: Vec3, digits?: number) => string;
+export declare const parseVec3: (text: string) => Vec3 | null;
+/** `data-position` / `data-normal` attribute pair for a hotspot. */
+export declare const hotspotAttributes: (hotspot: ProductHotspotData) => {
+    slot: string;
+    "data-position": string;
+    "data-normal": string;
+};
+/** A stable id from a label (or a counter when the label is empty / taken). */
+export declare const nextHotspotId: (existing: ReadonlyArray<ProductHotspotData>, label?: string) => string;
+/** Validate a hotspot list from storage / import; invalid entries are dropped. */
+export declare const parseHotspots: (raw: unknown) => ProductHotspotData[];
+export declare const serializeHotspots: (hotspots: ReadonlyArray<ProductHotspotData>) => string;
+/** Human size string: metres under 1 m become centimetres. */
+export declare const formatLength: (metres: number, unit?: "metric" | "imperial") => string;
+export type DimensionLine = {
+    axis: "x" | "y" | "z";
+    /** Hotspot anchors at both ends and the label midpoint (model metres). */
+    start: Vec3;
+    end: Vec3;
+    mid: Vec3;
+    length: number;
+};
+/**
+ * Three edge lines of the bounding box (width along x at the front-bottom
+ * edge, height along y at the front-left edge, depth along z at the
+ * bottom-left edge), each anchored as hotspots so they track the model.
+ */
+export declare const dimensionLines: ({ size, center }: ProductDimensions) => DimensionLine[];

package/dist/product/index.d.ts

@@ -0,0 +1,14 @@
+export { ProductViewer } from './ProductViewer';
+export { useProductAr, releaseSessionForAr, supportedProductArModes } from './useProductAr';
+export type { UseProductArOptions, UseProductArResult } from './useProductAr';
+export { isModelViewerDefined, loadModelViewer } from './loadModelViewer';
+export { DEFAULT_PRODUCT_AR_MODES } from './types';
+export { dimensionLines, formatLength, formatVec3, hotspotAttributes, nextHotspotId, parseHotspots, parseVec3, serializeHotspots, } from './details';
+export type { DimensionLine, ProductDimensions as ProductDimensionsData, ProductHotspotData, Vec3, } from './details';
+export { useDimensionLines, useProductDimensions, useProductHotspots, useProductVariants, } from './useProductDetails';
+export type { ProductDetailsElement, UseProductHotspotsOptions, UseProductHotspotsResult, } from './useProductDetails';
+export { ProductHotspot } from './ProductHotspot';
+export type { ProductHotspotProps } from './ProductHotspot';
+export { ProductDimensions } from './ProductDimensions';
+export type { ProductDimensionsProps } from './ProductDimensions';
+export type { ProductArMode, ProductArState, ProductArStatus, ProductViewerElement, ProductViewerPlacement, ProductViewerProps, ProductViewerScale, } from './types';

package/dist/product/loadModelViewer.d.ts

@@ -0,0 +1,4 @@
+export declare const isModelViewerDefined: () => boolean;
+export declare const loadModelViewer: () => Promise<void>;
+/** Test seam. */
+export declare const _resetModelViewerLoader: () => void;

package/dist/product/types.d.ts

@@ -0,0 +1,71 @@
+import { XRFallbackReason } from '../capabilities/types';
+/** The native path a device takes for surface placement. */
+export type ProductArMode = "webxr" | "scene-viewer" | "quick-look";
+/** Preference order shared by `<ProductViewer arModes>` and `useProductAr({ modes })`. */
+export declare const DEFAULT_PRODUCT_AR_MODES: readonly ProductArMode[];
+/**
+ * model-viewer's `ar-status` values, plus the SDK's `unavailable` when no
+ * mode is supported on the device.
+ */
+export type ProductArStatus = "unavailable" | "not-presenting" | "session-started" | "object-placed" | "failed";
+export type ProductViewerPlacement = "floor" | "wall";
+export type ProductViewerScale = "auto" | "fixed";
+export type ProductViewerProps = {
+    /** glTF / GLB URL (the model every platform renders). */
+    src: string;
+    /** USDZ URL for iOS Quick Look. Without it iOS falls back to model-viewer's own USDZ export (slower, lower fidelity). */
+    iosSrc?: string;
+    /** Accessible description. */
+    alt?: string;
+    /** Poster image shown until the model loads. */
+    poster?: string;
+    /** Native paths to offer, in preference order. Default `["webxr", "scene-viewer", "quick-look"]`. */
+    arModes?: ProductArMode[];
+    /** Enable the AR button / `activateAR()`. Default `true`. */
+    ar?: boolean;
+    /** Where the object lands. Default `floor`. */
+    placement?: ProductViewerPlacement;
+    /** `fixed` keeps real-world size (no pinch-to-resize). Default `auto`. */
+    scale?: ProductViewerScale;
+    cameraControls?: boolean;
+    autoRotate?: boolean;
+    /** `auto` | `eager` | `lazy`; default `auto`. */
+    loading?: "auto" | "eager" | "lazy";
+    /** Environment image URL or `neutral`. */
+    environmentImage?: string;
+    shadowIntensity?: number;
+    exposure?: number;
+    /** Extra attributes passed straight to `<model-viewer>` (anything not wrapped). */
+    attributes?: Record<string, string | number | boolean>;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    onLoad?: () => void;
+    onError?: (error: Error) => void;
+    /** Fires on every `ar-status` change. */
+    onArStatus?: (status: ProductArStatus) => void;
+    /** The custom element, once model-viewer is loaded and mounted. */
+    onReady?: (element: ProductViewerElement) => void;
+};
+/** The subset of `ModelViewerElement` the SDK relies on (typed loosely so the peer stays optional). */
+export type ProductViewerElement = HTMLElement & {
+    src: string;
+    canActivateAR: boolean;
+    activateAR: () => Promise<void>;
+    loaded: boolean;
+    modelIsVisible: boolean;
+    addEventListener: HTMLElement["addEventListener"];
+    removeEventListener: HTMLElement["removeEventListener"];
+};
+export type ProductArState = {
+    status: ProductArStatus;
+    /** Modes the device supports (from the capability check), in the viewer's preference order. */
+    supportedModes: ProductArMode[];
+    /** `canActivateAR` from the element once it is ready. */
+    canActivate: boolean;
+    /** Why AR is unavailable, when it is. */
+    reason: XRFallbackReason | null;
+    /** True while the viewer library is still loading. */
+    loading: boolean;
+    error: Error | null;
+};

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-CfSF8LXa.cjs"),pe=require("./useXRCapabilities-Cr3RzuAW.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;