js-cloudimage-360-view 4.5.0 → 4.5.1

package/dist/react/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const we=require("react/jsx-runtime"),n=require("react");let I=null;function C(p,t){const[w,f]=n.useState(!1),a=n.useRef(null),l=n.useRef(null),m=n.useId();n.useEffect(()=>{if(typeof window>"u"||!p.current||t.autoInit===!1)return;let u=!0;const s=p.current;return(async()=>{try{if(I||(I=(await Promise.resolve().then(()=>require("./ci360-CorwG9ly.js"))).default),!s||!u)return;s.id||(s.id=`ci360-${m.replace(/:/g,"")}`);const i={...t,onReady:c=>{var d;u&&(f(!0),(d=t.onReady)==null||d.call(t,c))}};l.current=new I,a.current=l.current.init(s,i)}catch(i){console.error("Failed to initialize CI360 viewer:",i)}})(),()=>{if(u=!1,a.current){try{a.current.destroy()}catch{}a.current=null}l.current=null,f(!1)}},[t.folder,t.filenameX,t.filenameY,t.imageListX,t.imageListY,t.amountX,t.amountY,t.hotspots,t.theme,m]);const y=n.useCallback(()=>a.current,[]);return{viewer:a.current,isReady:w,getViewer:y}}const ve=(p,t)=>{const{id:w,className:f,style:a,folder:l,apiVersion:m,filenameX:y,filenameY:u,imageListX:s,imageListY:v,indexZeroBase:i,amountX:c,amountY:d,draggable:h,swipeable:g,keys:V,keysReverse:S,autoplay:T,autoplayBehavior:L,playOnce:b,speed:O,autoplayReverse:Z,dragSpeed:F,dragReverse:X,stopAtEdges:Y,inertia:k,fullscreen:q,magnifier:z,pointerZoom:A,pinchZoom:B,bottomCircle:D,bottomCircleOffset:E,initialIconShown:j,hide360Logo:x,logoSrc:M,imageInfo:P,hints:N,theme:H,ciToken:$,ciFilters:G,ciTransformation:J,lazyload:K,hotspots:Q,hotspotTrigger:U,hotspotTimelineOnClick:W,aspectRatio:_,onReady:ee,onLoad:te,onSpin:oe,onAutoplayStart:re,onAutoplayStop:ne,onFullscreenOpen:ae,onFullscreenClose:se,onZoomIn:ie,onZoomOut:le,onDragStart:ue,onDragEnd:me,onError:ce,...fe}=p,de=n.useRef(null),ye=n.useMemo(()=>({folder:l,apiVersion:m,filenameX:y,filenameY:u,imageListX:s,imageListY:v,indexZeroBase:i,amountX:c,amountY:d,draggable:h,swipeable:g,keys:V,keysReverse:S,autoplay:T,autoplayBehavior:L,playOnce:b,speed:O,autoplayReverse:Z,dragSpeed:F,dragReverse:X,stopAtEdges:Y,inertia:k,fullscreen:q,magnifier:z,pointerZoom:A,pinchZoom:B,bottomCircle:D,bottomCircleOffset:E,initialIconShown:j,hide360Logo:x,logoSrc:M,imageInfo:P,hints:N,theme:H,ciToken:$,ciFilters:G,ciTransformation:J,lazyload:K,hotspots:Q,hotspotTrigger:U,hotspotTimelineOnClick:W,aspectRatio:_,onReady:ee,onLoad:te,onSpin:oe,onAutoplayStart:re,onAutoplayStop:ne,onFullscreenOpen:ae,onFullscreenClose:se,onZoomIn:ie,onZoomOut:le,onDragStart:ue,onDragEnd:me,onError:ce}),[l,m,y,u,s,v,i,c,d,h,g,V,S,T,L,b,O,Z,F,X,Y,k,q,z,A,B,D,E,j,x,M,P,N,H,$,G,J,K,Q,U,W,_,ee,te,oe,re,ne,ae,se,ie,le,ue,me,ce]),{getViewer:r}=C(de,ye);return n.useImperativeHandle(t,()=>({moveLeft:(e=1)=>{var o;return(o=r())==null?void 0:o.moveLeft(!1,e)},moveRight:(e=1)=>{var o;return(o=r())==null?void 0:o.moveRight(!1,e)},moveTop:(e=1)=>{var o;return(o=r())==null?void 0:o.moveTop(!1,e)},moveBottom:(e=1)=>{var o;return(o=r())==null?void 0:o.moveBottom(!1,e)},play:()=>{var e;return(e=r())==null?void 0:e.play()},stop:()=>{var e;return(e=r())==null?void 0:e.stopAutoplay()},zoomIn:()=>{var e;return(e=r())==null?void 0:e.toggleZoom()},zoomOut:()=>{var e;return(e=r())==null?void 0:e.removeZoom()},goToFrame:(e,o)=>{var pe;return(pe=r())==null?void 0:pe.animateToFrame(e,o)},getViewer:()=>r()}),[r]),we.jsx("div",{ref:de,id:w,className:f,style:a,...fe})},R=n.forwardRef(ve);R.displayName="CI360Viewer";exports.CI360Viewer=R;exports.CI360ViewerDefault=R;exports.useCI360=C;exports.useCI360Default=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ce=require("react/jsx-runtime"),n=require("react");let C=null;function I(d,t){const[w,f]=n.useState(!1),a=n.useRef(null),l=n.useRef(null),m=n.useId();n.useEffect(()=>{if(typeof window>"u"||!d.current||t.autoInit===!1)return;let u=!0;const s=d.current;return(async()=>{try{if(C||(C=(await Promise.resolve().then(()=>require("./ci360-Bku3atpv.js"))).default),!s||!u)return;s.id||(s.id=`ci360-${m.replace(/:/g,"")}`);const i={...t,onReady:c=>{var p;u&&(f(!0),(p=t.onReady)==null||p.call(t,c))}};l.current=new C,a.current=l.current.init(s,i)}catch(i){console.error("Failed to initialize CI360 viewer:",i)}})(),()=>{if(u=!1,a.current){try{a.current.destroy()}catch{}a.current=null}l.current=null,f(!1)}},[t.folder,t.filenameX,t.filenameY,t.imageListX,t.imageListY,t.amountX,t.amountY,t.hotspots,t.theme,t.aspectRatio,m]);const y=n.useCallback(()=>a.current,[]);return{viewer:a.current,isReady:w,getViewer:y}}const Ie=(d,t)=>{const{id:w,className:f,style:a,folder:l,apiVersion:m,filenameX:y,filenameY:u,imageListX:s,imageListY:v,indexZeroBase:i,amountX:c,amountY:p,draggable:h,swipeable:g,keys:V,keysReverse:S,autoplay:T,autoplayBehavior:L,playOnce:O,speed:b,autoplayReverse:Z,dragSpeed:F,dragReverse:X,stopAtEdges:Y,inertia:k,fullscreen:q,magnifier:z,pointerZoom:A,pinchZoom:B,bottomCircle:D,bottomCircleOffset:E,initialIconShown:j,hide360Logo:x,logoSrc:H,imageInfo:M,hints:P,theme:N,ciToken:$,ciFilters:G,ciTransformation:J,lazyload:K,hotspots:Q,hotspotTrigger:U,hotspotTimelineOnClick:W,aspectRatio:_,onReady:ee,onLoad:te,onSpin:oe,onAutoplayStart:re,onAutoplayStop:ne,onFullscreenOpen:ae,onFullscreenClose:se,onZoomIn:ie,onZoomOut:le,onDragStart:ue,onDragEnd:me,onHotspotOpen:ce,onHotspotClose:pe,onError:de,...we}=d,fe=n.useRef(null),ve=n.useMemo(()=>({folder:l,apiVersion:m,filenameX:y,filenameY:u,imageListX:s,imageListY:v,indexZeroBase:i,amountX:c,amountY:p,draggable:h,swipeable:g,keys:V,keysReverse:S,autoplay:T,autoplayBehavior:L,playOnce:O,speed:b,autoplayReverse:Z,dragSpeed:F,dragReverse:X,stopAtEdges:Y,inertia:k,fullscreen:q,magnifier:z,pointerZoom:A,pinchZoom:B,bottomCircle:D,bottomCircleOffset:E,initialIconShown:j,hide360Logo:x,logoSrc:H,imageInfo:M,hints:P,theme:N,ciToken:$,ciFilters:G,ciTransformation:J,lazyload:K,hotspots:Q,hotspotTrigger:U,hotspotTimelineOnClick:W,aspectRatio:_,onReady:ee,onLoad:te,onSpin:oe,onAutoplayStart:re,onAutoplayStop:ne,onFullscreenOpen:ae,onFullscreenClose:se,onZoomIn:ie,onZoomOut:le,onDragStart:ue,onDragEnd:me,onHotspotOpen:ce,onHotspotClose:pe,onError:de}),[l,m,y,u,s,v,i,c,p,h,g,V,S,T,L,O,b,Z,F,X,Y,k,q,z,A,B,D,E,j,x,H,M,P,N,$,G,J,K,Q,U,W,_,ee,te,oe,re,ne,ae,se,ie,le,ue,me,ce,pe,de]),{getViewer:r}=I(fe,ve);return n.useImperativeHandle(t,()=>({moveLeft:(e=1)=>{var o;return(o=r())==null?void 0:o.moveLeft(!1,e)},moveRight:(e=1)=>{var o;return(o=r())==null?void 0:o.moveRight(!1,e)},moveTop:(e=1)=>{var o;return(o=r())==null?void 0:o.moveTop(!1,e)},moveBottom:(e=1)=>{var o;return(o=r())==null?void 0:o.moveBottom(!1,e)},play:()=>{var e;return(e=r())==null?void 0:e.play()},stop:()=>{var e;return(e=r())==null?void 0:e.stopAutoplay()},zoomIn:()=>{var e;return(e=r())==null?void 0:e.toggleZoom()},zoomOut:()=>{var e;return(e=r())==null?void 0:e.removeZoom()},goToFrame:(e,o)=>{var ye;return(ye=r())==null?void 0:ye.animateToFrame(e,o)},getViewer:()=>r()}),[r]),Ce.jsx("div",{ref:fe,id:w,className:f,style:a,...we})},R=n.forwardRef(Ie);R.displayName="CI360Viewer";exports.CI360Viewer=R;exports.CI360ViewerDefault=R;exports.useCI360=I;exports.useCI360Default=I;
 //# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/react/useCI360.ts","../../src/react/CI360Viewer.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useId, useCallback, type RefObject } from 'react';\nimport type {\n  CI360Config,\n  CI360ViewerInstance,\n  UseCI360Return,\n  UseCI360Options,\n} from './types';\n\n// Import CI360 class dynamically to avoid SSR issues\nlet CI360Class: any = null;\n\n/**\n * Custom hook for integrating CI360 viewer with React\n *\n * @param containerRef - React ref to the container element\n * @param config - CI360 configuration options\n * @returns Object containing viewer instance and ready state\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   const { viewer, isReady } = useCI360(containerRef, {\n *     folder: 'https://example.com/images/',\n *     filenameX: 'image-{index}.jpg',\n *     amountX: 36,\n *   });\n *\n *   return <div ref={containerRef} />;\n * }\n * ```\n */\nexport function useCI360(\n  containerRef: RefObject<HTMLDivElement | null>,\n  config: UseCI360Options\n): UseCI360Return {\n  const [isReady, setIsReady] = useState(false);\n  const viewerRef = useRef<CI360ViewerInstance | null>(null);\n  const ci360Ref = useRef<any>(null);\n  const uniqueId = useId();\n\n  // Initialize viewer\n  useEffect(() => {\n    // SSR guard\n    if (typeof window === 'undefined') return;\n    if (!containerRef.current) return;\n    if (config.autoInit === false) return;\n\n    let isMounted = true;\n    const container = containerRef.current;\n\n    const initViewer = async () => {\n      try {\n        // Dynamically import CI360 to avoid SSR issues\n        if (!CI360Class) {\n          const module = await import('../ci360');\n          CI360Class = module.default;\n        }\n\n        if (!container || !isMounted) return;\n\n        // Set a unique ID on the container if not present\n        if (!container.id) {\n          container.id = `ci360-${uniqueId.replace(/:/g, '')}`;\n        }\n\n        // Wrap user callbacks to update React state\n        const wrappedConfig: CI360Config = {\n          ...config,\n          onReady: (data) => {\n            if (isMounted) {\n              setIsReady(true);\n              config.onReady?.(data);\n            }\n          },\n        };\n\n        // Create CI360 instance and initialize viewer\n        ci360Ref.current = new CI360Class();\n        viewerRef.current = ci360Ref.current.init(container, wrappedConfig);\n      } catch (error) {\n        console.error('Failed to initialize CI360 viewer:', error);\n      }\n    };\n\n    initViewer();\n\n    // Cleanup on unmount or when dependencies change\n    return () => {\n      isMounted = false;\n      if (viewerRef.current) {\n        try {\n          viewerRef.current.destroy();\n        } catch (e) {\n          // Ignore errors during cleanup - element may already be detached\n        }\n        viewerRef.current = null;\n      }\n      ci360Ref.current = null;\n      setIsReady(false);\n    };\n  }, [\n    config.folder,\n    config.filenameX,\n    config.filenameY,\n    config.imageListX,\n    config.imageListY,\n    config.amountX,\n    config.amountY,\n    config.hotspots,\n    config.theme,\n    uniqueId,\n  ]);\n\n  // Stable getter to always return current viewer (avoids stale closures)\n  const getViewer = useCallback(() => viewerRef.current, []);\n\n  return {\n    viewer: viewerRef.current,\n    isReady,\n    getViewer,\n  };\n}\n\nexport default useCI360;\n","import {\n  useRef,\n  useImperativeHandle,\n  forwardRef,\n  useMemo,\n  type ForwardRefRenderFunction,\n} from 'react';\nimport { useCI360 } from './useCI360';\nimport type {\n  CI360ViewerProps,\n  CI360ViewerRef,\n  CI360Config,\n} from './types';\n\n/**\n * CI360Viewer React Component\n *\n * A declarative React wrapper for the CI360 360-degree image viewer.\n *\n * @example\n * ```tsx\n * import { CI360Viewer } from 'js-cloudimage-360-view/react';\n * import 'js-cloudimage-360-view/css';\n *\n * function ProductView() {\n *   return (\n *     <CI360Viewer\n *       folder=\"https://example.com/images/\"\n *       filenameX=\"product-{index}.jpg\"\n *       amountX={36}\n *       autoplay\n *       fullscreen\n *     />\n *   );\n * }\n * ```\n *\n * @example With ref for imperative control\n * ```tsx\n * import { useRef } from 'react';\n * import { CI360Viewer, CI360ViewerRef } from 'js-cloudimage-360-view/react';\n *\n * function ProductView() {\n *   const viewerRef = useRef<CI360ViewerRef>(null);\n *\n *   return (\n *     <>\n *       <CI360Viewer\n *         ref={viewerRef}\n *         folder=\"https://example.com/images/\"\n *         filenameX=\"{index}.jpg\"\n *         amountX={36}\n *         onSpin={(e) => console.log(`Frame: ${e.activeImageX}`)}\n *       />\n *       <button onClick={() => viewerRef.current?.play()}>Play</button>\n *       <button onClick={() => viewerRef.current?.stop()}>Stop</button>\n *     </>\n *   );\n * }\n * ```\n */\nconst CI360ViewerComponent: ForwardRefRenderFunction<\n  CI360ViewerRef,\n  CI360ViewerProps\n> = (props, ref) => {\n  const {\n    // Container props\n    id,\n    className,\n    style,\n\n    // Image source\n    folder,\n    apiVersion,\n    filenameX,\n    filenameY,\n    imageListX,\n    imageListY,\n    indexZeroBase,\n    amountX,\n    amountY,\n\n    // Behavior\n    draggable,\n    swipeable,\n    keys,\n    keysReverse,\n    autoplay,\n    autoplayBehavior,\n    playOnce,\n    speed,\n    autoplayReverse,\n    dragSpeed,\n    dragReverse,\n    stopAtEdges,\n    inertia,\n\n    // UI Features\n    fullscreen,\n    magnifier,\n    pointerZoom,\n    pinchZoom,\n    bottomCircle,\n    bottomCircleOffset,\n    initialIconShown,\n    hide360Logo,\n    logoSrc,\n    imageInfo,\n    hints,\n    theme,\n\n    // Cloudimage CDN\n    ciToken,\n    ciFilters,\n    ciTransformation,\n\n    // Loading\n    lazyload,\n\n    // Hotspots\n    hotspots,\n    hotspotTrigger,\n    hotspotTimelineOnClick,\n\n    // Container\n    aspectRatio,\n\n    // Event callbacks\n    onReady,\n    onLoad,\n    onSpin,\n    onAutoplayStart,\n    onAutoplayStop,\n    onFullscreenOpen,\n    onFullscreenClose,\n    onZoomIn,\n    onZoomOut,\n    onDragStart,\n    onDragEnd,\n    onError,\n\n    ...restProps\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Memoize config to prevent unnecessary re-initializations\n  const config = useMemo<CI360Config>(\n    () => ({\n      // Image source\n      folder,\n      apiVersion,\n      filenameX,\n      filenameY,\n      imageListX,\n      imageListY,\n      indexZeroBase,\n      amountX,\n      amountY,\n\n      // Behavior\n      draggable,\n      swipeable,\n      keys,\n      keysReverse,\n      autoplay,\n      autoplayBehavior,\n      playOnce,\n      speed,\n      autoplayReverse,\n      dragSpeed,\n      dragReverse,\n      stopAtEdges,\n      inertia,\n\n      // UI Features\n      fullscreen,\n      magnifier,\n      pointerZoom,\n      pinchZoom,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n\n      // Loading\n      lazyload,\n\n      // Hotspots\n      hotspots,\n      hotspotTrigger,\n      hotspotTimelineOnClick,\n\n      // Container\n      aspectRatio,\n\n      // Event callbacks\n      onReady,\n      onLoad,\n      onSpin,\n      onAutoplayStart,\n      onAutoplayStop,\n      onFullscreenOpen,\n      onFullscreenClose,\n      onZoomIn,\n      onZoomOut,\n      onDragStart,\n      onDragEnd,\n      onError,\n    }),\n    [\n      // Image source\n      folder,\n      apiVersion,\n      filenameX,\n      filenameY,\n      imageListX,\n      imageListY,\n      indexZeroBase,\n      amountX,\n      amountY,\n\n      // Behavior\n      draggable,\n      swipeable,\n      keys,\n      keysReverse,\n      autoplay,\n      autoplayBehavior,\n      playOnce,\n      speed,\n      autoplayReverse,\n      dragSpeed,\n      dragReverse,\n      stopAtEdges,\n      inertia,\n\n      // UI Features\n      fullscreen,\n      magnifier,\n      pointerZoom,\n      pinchZoom,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n\n      // Loading\n      lazyload,\n\n      // Hotspots\n      hotspots,\n      hotspotTrigger,\n      hotspotTimelineOnClick,\n\n      // Container\n      aspectRatio,\n\n      // Event callbacks\n      onReady,\n      onLoad,\n      onSpin,\n      onAutoplayStart,\n      onAutoplayStop,\n      onFullscreenOpen,\n      onFullscreenClose,\n      onZoomIn,\n      onZoomOut,\n      onDragStart,\n      onDragEnd,\n      onError,\n    ]\n  );\n\n  const { getViewer } = useCI360(containerRef, config);\n\n  // Expose imperative methods via ref\n  // Use getViewer() inside methods to always get the current viewer instance,\n  // avoiding stale closure issues when the viewer initializes after first render\n  useImperativeHandle(\n    ref,\n    () => ({\n      moveLeft: (steps = 1) => getViewer()?.moveLeft(false, steps),\n      moveRight: (steps = 1) => getViewer()?.moveRight(false, steps),\n      moveTop: (steps = 1) => getViewer()?.moveTop(false, steps),\n      moveBottom: (steps = 1) => getViewer()?.moveBottom(false, steps),\n      play: () => getViewer()?.play(),\n      stop: () => getViewer()?.stopAutoplay(),\n      zoomIn: () => getViewer()?.toggleZoom(),\n      zoomOut: () => getViewer()?.removeZoom(),\n      goToFrame: (frame: number, hotspotId?: string) =>\n        getViewer()?.animateToFrame(frame, hotspotId),\n      getViewer: () => getViewer(),\n    }),\n    [getViewer]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      id={id}\n      className={className}\n      style={style}\n      {...restProps}\n    />\n  );\n};\n\nexport const CI360Viewer = forwardRef(CI360ViewerComponent);\nCI360Viewer.displayName = 'CI360Viewer';\n\nexport default CI360Viewer;\n"],"names":["CI360Class","useCI360","containerRef","config","isReady","setIsReady","useState","viewerRef","useRef","ci360Ref","uniqueId","useId","useEffect","isMounted","container","wrappedConfig","data","_a","error","getViewer","useCallback","CI360ViewerComponent","props","ref","id","className","style","folder","apiVersion","filenameX","filenameY","imageListX","imageListY","indexZeroBase","amountX","amountY","draggable","swipeable","keys","keysReverse","autoplay","autoplayBehavior","playOnce","speed","autoplayReverse","dragSpeed","dragReverse","stopAtEdges","inertia","fullscreen","magnifier","pointerZoom","pinchZoom","bottomCircle","bottomCircleOffset","initialIconShown","hide360Logo","logoSrc","imageInfo","hints","theme","ciToken","ciFilters","ciTransformation","lazyload","hotspots","hotspotTrigger","hotspotTimelineOnClick","aspectRatio","onReady","onLoad","onSpin","onAutoplayStart","onAutoplayStop","onFullscreenOpen","onFullscreenClose","onZoomIn","onZoomOut","onDragStart","onDragEnd","onError","restProps","useMemo","useImperativeHandle","steps","frame","hotspotId","jsx","CI360Viewer","forwardRef"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/react/useCI360.ts","../../src/react/CI360Viewer.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useId, useCallback, type RefObject } from 'react';\nimport type {\n  CI360Config,\n  CI360ViewerInstance,\n  UseCI360Return,\n  UseCI360Options,\n} from './types';\n\n// Import CI360 class dynamically to avoid SSR issues\nlet CI360Class: any = null;\n\n/**\n * Custom hook for integrating CI360 viewer with React\n *\n * @param containerRef - React ref to the container element\n * @param config - CI360 configuration options\n * @returns Object containing viewer instance and ready state\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   const { viewer, isReady } = useCI360(containerRef, {\n *     folder: 'https://example.com/images/',\n *     filenameX: 'image-{index}.jpg',\n *     amountX: 36,\n *   });\n *\n *   return <div ref={containerRef} />;\n * }\n * ```\n */\nexport function useCI360(\n  containerRef: RefObject<HTMLDivElement | null>,\n  config: UseCI360Options\n): UseCI360Return {\n  const [isReady, setIsReady] = useState(false);\n  const viewerRef = useRef<CI360ViewerInstance | null>(null);\n  const ci360Ref = useRef<any>(null);\n  const uniqueId = useId();\n\n  // Initialize viewer\n  useEffect(() => {\n    // SSR guard\n    if (typeof window === 'undefined') return;\n    if (!containerRef.current) return;\n    if (config.autoInit === false) return;\n\n    let isMounted = true;\n    const container = containerRef.current;\n\n    const initViewer = async () => {\n      try {\n        // Dynamically import CI360 to avoid SSR issues\n        if (!CI360Class) {\n          const module = await import('../ci360');\n          CI360Class = module.default;\n        }\n\n        if (!container || !isMounted) return;\n\n        // Set a unique ID on the container if not present\n        if (!container.id) {\n          container.id = `ci360-${uniqueId.replace(/:/g, '')}`;\n        }\n\n        // Wrap user callbacks to update React state\n        const wrappedConfig: CI360Config = {\n          ...config,\n          onReady: (data) => {\n            if (isMounted) {\n              setIsReady(true);\n              config.onReady?.(data);\n            }\n          },\n        };\n\n        // Create CI360 instance and initialize viewer\n        ci360Ref.current = new CI360Class();\n        viewerRef.current = ci360Ref.current.init(container, wrappedConfig);\n      } catch (error) {\n        console.error('Failed to initialize CI360 viewer:', error);\n      }\n    };\n\n    initViewer();\n\n    // Cleanup on unmount or when dependencies change\n    return () => {\n      isMounted = false;\n      if (viewerRef.current) {\n        try {\n          viewerRef.current.destroy();\n        } catch (e) {\n          // Ignore errors during cleanup - element may already be detached\n        }\n        viewerRef.current = null;\n      }\n      ci360Ref.current = null;\n      setIsReady(false);\n    };\n  }, [\n    config.folder,\n    config.filenameX,\n    config.filenameY,\n    config.imageListX,\n    config.imageListY,\n    config.amountX,\n    config.amountY,\n    config.hotspots,\n    config.theme,\n    config.aspectRatio,\n    uniqueId,\n  ]);\n\n  // Stable getter to always return current viewer (avoids stale closures)\n  const getViewer = useCallback(() => viewerRef.current, []);\n\n  return {\n    viewer: viewerRef.current,\n    isReady,\n    getViewer,\n  };\n}\n\nexport default useCI360;\n","import {\n  useRef,\n  useImperativeHandle,\n  forwardRef,\n  useMemo,\n  type ForwardRefRenderFunction,\n} from 'react';\nimport { useCI360 } from './useCI360';\nimport type {\n  CI360ViewerProps,\n  CI360ViewerRef,\n  CI360Config,\n} from './types';\n\n/**\n * CI360Viewer React Component\n *\n * A declarative React wrapper for the CI360 360-degree image viewer.\n *\n * @example\n * ```tsx\n * import { CI360Viewer } from 'js-cloudimage-360-view/react';\n * import 'js-cloudimage-360-view/css';\n *\n * function ProductView() {\n *   return (\n *     <CI360Viewer\n *       folder=\"https://example.com/images/\"\n *       filenameX=\"product-{index}.jpg\"\n *       amountX={36}\n *       autoplay\n *       fullscreen\n *     />\n *   );\n * }\n * ```\n *\n * @example With ref for imperative control\n * ```tsx\n * import { useRef } from 'react';\n * import { CI360Viewer, CI360ViewerRef } from 'js-cloudimage-360-view/react';\n *\n * function ProductView() {\n *   const viewerRef = useRef<CI360ViewerRef>(null);\n *\n *   return (\n *     <>\n *       <CI360Viewer\n *         ref={viewerRef}\n *         folder=\"https://example.com/images/\"\n *         filenameX=\"{index}.jpg\"\n *         amountX={36}\n *         onSpin={(e) => console.log(`Frame: ${e.activeImageX}`)}\n *       />\n *       <button onClick={() => viewerRef.current?.play()}>Play</button>\n *       <button onClick={() => viewerRef.current?.stop()}>Stop</button>\n *     </>\n *   );\n * }\n * ```\n */\nconst CI360ViewerComponent: ForwardRefRenderFunction<\n  CI360ViewerRef,\n  CI360ViewerProps\n> = (props, ref) => {\n  const {\n    // Container props\n    id,\n    className,\n    style,\n\n    // Image source\n    folder,\n    apiVersion,\n    filenameX,\n    filenameY,\n    imageListX,\n    imageListY,\n    indexZeroBase,\n    amountX,\n    amountY,\n\n    // Behavior\n    draggable,\n    swipeable,\n    keys,\n    keysReverse,\n    autoplay,\n    autoplayBehavior,\n    playOnce,\n    speed,\n    autoplayReverse,\n    dragSpeed,\n    dragReverse,\n    stopAtEdges,\n    inertia,\n\n    // UI Features\n    fullscreen,\n    magnifier,\n    pointerZoom,\n    pinchZoom,\n    bottomCircle,\n    bottomCircleOffset,\n    initialIconShown,\n    hide360Logo,\n    logoSrc,\n    imageInfo,\n    hints,\n    theme,\n\n    // Cloudimage CDN\n    ciToken,\n    ciFilters,\n    ciTransformation,\n\n    // Loading\n    lazyload,\n\n    // Hotspots\n    hotspots,\n    hotspotTrigger,\n    hotspotTimelineOnClick,\n\n    // Container\n    aspectRatio,\n\n    // Event callbacks\n    onReady,\n    onLoad,\n    onSpin,\n    onAutoplayStart,\n    onAutoplayStop,\n    onFullscreenOpen,\n    onFullscreenClose,\n    onZoomIn,\n    onZoomOut,\n    onDragStart,\n    onDragEnd,\n    onHotspotOpen,\n    onHotspotClose,\n    onError,\n\n    ...restProps\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Memoize config to prevent unnecessary re-initializations\n  const config = useMemo<CI360Config>(\n    () => ({\n      // Image source\n      folder,\n      apiVersion,\n      filenameX,\n      filenameY,\n      imageListX,\n      imageListY,\n      indexZeroBase,\n      amountX,\n      amountY,\n\n      // Behavior\n      draggable,\n      swipeable,\n      keys,\n      keysReverse,\n      autoplay,\n      autoplayBehavior,\n      playOnce,\n      speed,\n      autoplayReverse,\n      dragSpeed,\n      dragReverse,\n      stopAtEdges,\n      inertia,\n\n      // UI Features\n      fullscreen,\n      magnifier,\n      pointerZoom,\n      pinchZoom,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n\n      // Loading\n      lazyload,\n\n      // Hotspots\n      hotspots,\n      hotspotTrigger,\n      hotspotTimelineOnClick,\n\n      // Container\n      aspectRatio,\n\n      // Event callbacks\n      onReady,\n      onLoad,\n      onSpin,\n      onAutoplayStart,\n      onAutoplayStop,\n      onFullscreenOpen,\n      onFullscreenClose,\n      onZoomIn,\n      onZoomOut,\n      onDragStart,\n      onDragEnd,\n      onHotspotOpen,\n      onHotspotClose,\n      onError,\n    }),\n    [\n      // Image source\n      folder,\n      apiVersion,\n      filenameX,\n      filenameY,\n      imageListX,\n      imageListY,\n      indexZeroBase,\n      amountX,\n      amountY,\n\n      // Behavior\n      draggable,\n      swipeable,\n      keys,\n      keysReverse,\n      autoplay,\n      autoplayBehavior,\n      playOnce,\n      speed,\n      autoplayReverse,\n      dragSpeed,\n      dragReverse,\n      stopAtEdges,\n      inertia,\n\n      // UI Features\n      fullscreen,\n      magnifier,\n      pointerZoom,\n      pinchZoom,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n\n      // Loading\n      lazyload,\n\n      // Hotspots\n      hotspots,\n      hotspotTrigger,\n      hotspotTimelineOnClick,\n\n      // Container\n      aspectRatio,\n\n      // Event callbacks\n      onReady,\n      onLoad,\n      onSpin,\n      onAutoplayStart,\n      onAutoplayStop,\n      onFullscreenOpen,\n      onFullscreenClose,\n      onZoomIn,\n      onZoomOut,\n      onDragStart,\n      onDragEnd,\n      onHotspotOpen,\n      onHotspotClose,\n      onError,\n    ]\n  );\n\n  const { getViewer } = useCI360(containerRef, config);\n\n  // Expose imperative methods via ref\n  // Use getViewer() inside methods to always get the current viewer instance,\n  // avoiding stale closure issues when the viewer initializes after first render\n  useImperativeHandle(\n    ref,\n    () => ({\n      moveLeft: (steps = 1) => getViewer()?.moveLeft(false, steps),\n      moveRight: (steps = 1) => getViewer()?.moveRight(false, steps),\n      moveTop: (steps = 1) => getViewer()?.moveTop(false, steps),\n      moveBottom: (steps = 1) => getViewer()?.moveBottom(false, steps),\n      play: () => getViewer()?.play(),\n      stop: () => getViewer()?.stopAutoplay(),\n      zoomIn: () => getViewer()?.toggleZoom(),\n      zoomOut: () => getViewer()?.removeZoom(),\n      goToFrame: (frame: number, hotspotId?: string) =>\n        getViewer()?.animateToFrame(frame, hotspotId),\n      getViewer: () => getViewer(),\n    }),\n    [getViewer]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      id={id}\n      className={className}\n      style={style}\n      {...restProps}\n    />\n  );\n};\n\nexport const CI360Viewer = forwardRef(CI360ViewerComponent);\nCI360Viewer.displayName = 'CI360Viewer';\n\nexport default CI360Viewer;\n"],"names":["CI360Class","useCI360","containerRef","config","isReady","setIsReady","useState","viewerRef","useRef","ci360Ref","uniqueId","useId","useEffect","isMounted","container","wrappedConfig","data","_a","error","getViewer","useCallback","CI360ViewerComponent","props","ref","id","className","style","folder","apiVersion","filenameX","filenameY","imageListX","imageListY","indexZeroBase","amountX","amountY","draggable","swipeable","keys","keysReverse","autoplay","autoplayBehavior","playOnce","speed","autoplayReverse","dragSpeed","dragReverse","stopAtEdges","inertia","fullscreen","magnifier","pointerZoom","pinchZoom","bottomCircle","bottomCircleOffset","initialIconShown","hide360Logo","logoSrc","imageInfo","hints","theme","ciToken","ciFilters","ciTransformation","lazyload","hotspots","hotspotTrigger","hotspotTimelineOnClick","aspectRatio","onReady","onLoad","onSpin","onAutoplayStart","onAutoplayStop","onFullscreenOpen","onFullscreenClose","onZoomIn","onZoomOut","onDragStart","onDragEnd","onHotspotOpen","onHotspotClose","onError","restProps","useMemo","useImperativeHandle","steps","frame","hotspotId","jsx","CI360Viewer","forwardRef"],"mappings":"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"}

package/dist/react/index.js

@@ -1,26 +1,26 @@
-import { jsx as fe } from "react/jsx-runtime";
-import { useState as ye, useRef as I, useId as we, useEffect as ve, useCallback as Ie, forwardRef as Ce, useMemo as he, useImperativeHandle as Re } from "react";
+import { jsx as we } from "react/jsx-runtime";
+import { useState as ve, useRef as C, useId as Ce, useEffect as Ie, useCallback as Re, forwardRef as he, useMemo as ge, useImperativeHandle as Ve } from "react";
 let v = null;
-function ge(p, t) {
-  const [y, d] = ye(!1), n = I(null), s = I(null), u = we();
-  ve(() => {
-    if (typeof window > "u" || !p.current || t.autoInit === !1) return;
+function Le(c, t) {
+  const [y, d] = ve(!1), n = C(null), i = C(null), u = Ce();
+  Ie(() => {
+    if (typeof window > "u" || !c.current || t.autoInit === !1) return;
     let l = !0;
-    const a = p.current;
+    const a = c.current;
     return (async () => {
       try {
-        if (v || (v = (await import("./ci360-BkPK8jTy.mjs")).default), !a || !l) return;
+        if (v || (v = (await import("./ci360-DwbrNm7H.mjs")).default), !a || !l) return;
         a.id || (a.id = `ci360-${u.replace(/:/g, "")}`);
-        const i = {
+        const s = {
           ...t,
           onReady: (m) => {
-            var c;
-            l && (d(!0), (c = t.onReady) == null || c.call(t, m));
+            var p;
+            l && (d(!0), (p = t.onReady) == null || p.call(t, m));
           }
         };
-        s.current = new v(), n.current = s.current.init(a, i);
-      } catch (i) {
-        console.error("Failed to initialize CI360 viewer:", i);
+        i.current = new v(), n.current = i.current.init(a, s);
+      } catch (s) {
+        console.error("Failed to initialize CI360 viewer:", s);
       }
     })(), () => {
       if (l = !1, n.current) {
@@ -30,7 +30,7 @@ function ge(p, t) {
         }
         n.current = null;
       }
-      s.current = null, d(!1);
+      i.current = null, d(!1);
     };
   }, [
     t.folder,
@@ -42,43 +42,44 @@ function ge(p, t) {
     t.amountY,
     t.hotspots,
     t.theme,
+    t.aspectRatio,
     u
   ]);
-  const f = Ie(() => n.current, []);
+  const f = Re(() => n.current, []);
   return {
     viewer: n.current,
     isReady: y,
     getViewer: f
   };
 }
-const Ve = (p, t) => {
+const Se = (c, t) => {
   const {
     // Container props
     id: y,
     className: d,
     style: n,
     // Image source
-    folder: s,
+    folder: i,
     apiVersion: u,
     filenameX: f,
     filenameY: l,
     imageListX: a,
     imageListY: w,
-    indexZeroBase: i,
+    indexZeroBase: s,
     amountX: m,
-    amountY: c,
+    amountY: p,
     // Behavior
-    draggable: C,
-    swipeable: h,
-    keys: R,
+    draggable: I,
+    swipeable: R,
+    keys: h,
     keysReverse: g,
     autoplay: V,
     autoplayBehavior: L,
     playOnce: S,
     speed: T,
-    autoplayReverse: Z,
-    dragSpeed: F,
-    dragReverse: O,
+    autoplayReverse: O,
+    dragSpeed: Z,
+    dragReverse: F,
     stopAtEdges: X,
     inertia: Y,
     // UI Features
@@ -90,12 +91,12 @@ const Ve = (p, t) => {
     bottomCircleOffset: D,
     initialIconShown: E,
     hide360Logo: x,
-    logoSrc: M,
-    imageInfo: N,
-    hints: j,
-    theme: q,
+    logoSrc: H,
+    imageInfo: M,
+    hints: N,
+    theme: j,
     // Cloudimage CDN
-    ciToken: H,
+    ciToken: q,
     ciFilters: P,
     ciTransformation: $,
     // Loading
@@ -115,35 +116,37 @@ const Ve = (p, t) => {
     onFullscreenOpen: re,
     onFullscreenClose: ne,
     onZoomIn: ae,
-    onZoomOut: ie,
-    onDragStart: se,
+    onZoomOut: se,
+    onDragStart: ie,
     onDragEnd: le,
-    onError: ue,
-    ...pe
-  } = p, me = I(null), de = he(
+    onHotspotOpen: ue,
+    onHotspotClose: me,
+    onError: pe,
+    ...fe
+  } = c, ce = C(null), ye = ge(
     () => ({
       // Image source
-      folder: s,
+      folder: i,
       apiVersion: u,
       filenameX: f,
       filenameY: l,
       imageListX: a,
       imageListY: w,
-      indexZeroBase: i,
+      indexZeroBase: s,
       amountX: m,
-      amountY: c,
+      amountY: p,
       // Behavior
-      draggable: C,
-      swipeable: h,
-      keys: R,
+      draggable: I,
+      swipeable: R,
+      keys: h,
       keysReverse: g,
       autoplay: V,
       autoplayBehavior: L,
       playOnce: S,
       speed: T,
-      autoplayReverse: Z,
-      dragSpeed: F,
-      dragReverse: O,
+      autoplayReverse: O,
+      dragSpeed: Z,
+      dragReverse: F,
       stopAtEdges: X,
       inertia: Y,
       // UI Features
@@ -155,12 +158,12 @@ const Ve = (p, t) => {
       bottomCircleOffset: D,
       initialIconShown: E,
       hide360Logo: x,
-      logoSrc: M,
-      imageInfo: N,
-      hints: j,
-      theme: q,
+      logoSrc: H,
+      imageInfo: M,
+      hints: N,
+      theme: j,
       // Cloudimage CDN
-      ciToken: H,
+      ciToken: q,
       ciFilters: P,
       ciTransformation: $,
       // Loading
@@ -180,34 +183,36 @@ const Ve = (p, t) => {
       onFullscreenOpen: re,
       onFullscreenClose: ne,
       onZoomIn: ae,
-      onZoomOut: ie,
-      onDragStart: se,
+      onZoomOut: se,
+      onDragStart: ie,
       onDragEnd: le,
-      onError: ue
+      onHotspotOpen: ue,
+      onHotspotClose: me,
+      onError: pe
     }),
     [
       // Image source
-      s,
+      i,
       u,
       f,
       l,
       a,
       w,
-      i,
+      s,
       m,
-      c,
+      p,
       // Behavior
-      C,
-      h,
+      I,
       R,
+      h,
       g,
       V,
       L,
       S,
       T,
+      O,
       Z,
       F,
-      O,
       X,
       Y,
       // UI Features
@@ -219,12 +224,12 @@ const Ve = (p, t) => {
       D,
       E,
       x,
+      H,
       M,
       N,
       j,
-      q,
       // Cloudimage CDN
-      H,
+      q,
       P,
       $,
       // Loading
@@ -244,13 +249,15 @@ const Ve = (p, t) => {
       re,
       ne,
       ae,
-      ie,
       se,
+      ie,
       le,
-      ue
+      ue,
+      me,
+      pe
     ]
-  ), { getViewer: r } = ge(me, de);
-  return Re(
+  ), { getViewer: r } = Le(ce, ye);
+  return Ve(
     t,
     () => ({
       moveLeft: (e = 1) => {
@@ -286,28 +293,28 @@ const Ve = (p, t) => {
         return (e = r()) == null ? void 0 : e.removeZoom();
       },
       goToFrame: (e, o) => {
-        var ce;
-        return (ce = r()) == null ? void 0 : ce.animateToFrame(e, o);
+        var de;
+        return (de = r()) == null ? void 0 : de.animateToFrame(e, o);
       },
       getViewer: () => r()
     }),
     [r]
-  ), /* @__PURE__ */ fe(
+  ), /* @__PURE__ */ we(
     "div",
     {
-      ref: me,
+      ref: ce,
       id: y,
       className: d,
       style: n,
-      ...pe
+      ...fe
     }
   );
-}, Le = Ce(Ve);
-Le.displayName = "CI360Viewer";
+}, Te = he(Se);
+Te.displayName = "CI360Viewer";
 export {
-  Le as CI360Viewer,
-  Le as CI360ViewerDefault,
-  ge as useCI360,
-  ge as useCI360Default
+  Te as CI360Viewer,
+  Te as CI360ViewerDefault,
+  Le as useCI360,
+  Le as useCI360Default
 };
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/react/useCI360.ts","../../src/react/CI360Viewer.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useId, useCallback, type RefObject } from 'react';\nimport type {\n  CI360Config,\n  CI360ViewerInstance,\n  UseCI360Return,\n  UseCI360Options,\n} from './types';\n\n// Import CI360 class dynamically to avoid SSR issues\nlet CI360Class: any = null;\n\n/**\n * Custom hook for integrating CI360 viewer with React\n *\n * @param containerRef - React ref to the container element\n * @param config - CI360 configuration options\n * @returns Object containing viewer instance and ready state\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   const { viewer, isReady } = useCI360(containerRef, {\n *     folder: 'https://example.com/images/',\n *     filenameX: 'image-{index}.jpg',\n *     amountX: 36,\n *   });\n *\n *   return <div ref={containerRef} />;\n * }\n * ```\n */\nexport function useCI360(\n  containerRef: RefObject<HTMLDivElement | null>,\n  config: UseCI360Options\n): UseCI360Return {\n  const [isReady, setIsReady] = useState(false);\n  const viewerRef = useRef<CI360ViewerInstance | null>(null);\n  const ci360Ref = useRef<any>(null);\n  const uniqueId = useId();\n\n  // Initialize viewer\n  useEffect(() => {\n    // SSR guard\n    if (typeof window === 'undefined') return;\n    if (!containerRef.current) return;\n    if (config.autoInit === false) return;\n\n    let isMounted = true;\n    const container = containerRef.current;\n\n    const initViewer = async () => {\n      try {\n        // Dynamically import CI360 to avoid SSR issues\n        if (!CI360Class) {\n          const module = await import('../ci360');\n          CI360Class = module.default;\n        }\n\n        if (!container || !isMounted) return;\n\n        // Set a unique ID on the container if not present\n        if (!container.id) {\n          container.id = `ci360-${uniqueId.replace(/:/g, '')}`;\n        }\n\n        // Wrap user callbacks to update React state\n        const wrappedConfig: CI360Config = {\n          ...config,\n          onReady: (data) => {\n            if (isMounted) {\n              setIsReady(true);\n              config.onReady?.(data);\n            }\n          },\n        };\n\n        // Create CI360 instance and initialize viewer\n        ci360Ref.current = new CI360Class();\n        viewerRef.current = ci360Ref.current.init(container, wrappedConfig);\n      } catch (error) {\n        console.error('Failed to initialize CI360 viewer:', error);\n      }\n    };\n\n    initViewer();\n\n    // Cleanup on unmount or when dependencies change\n    return () => {\n      isMounted = false;\n      if (viewerRef.current) {\n        try {\n          viewerRef.current.destroy();\n        } catch (e) {\n          // Ignore errors during cleanup - element may already be detached\n        }\n        viewerRef.current = null;\n      }\n      ci360Ref.current = null;\n      setIsReady(false);\n    };\n  }, [\n    config.folder,\n    config.filenameX,\n    config.filenameY,\n    config.imageListX,\n    config.imageListY,\n    config.amountX,\n    config.amountY,\n    config.hotspots,\n    config.theme,\n    uniqueId,\n  ]);\n\n  // Stable getter to always return current viewer (avoids stale closures)\n  const getViewer = useCallback(() => viewerRef.current, []);\n\n  return {\n    viewer: viewerRef.current,\n    isReady,\n    getViewer,\n  };\n}\n\nexport default useCI360;\n","import {\n  useRef,\n  useImperativeHandle,\n  forwardRef,\n  useMemo,\n  type ForwardRefRenderFunction,\n} from 'react';\nimport { useCI360 } from './useCI360';\nimport type {\n  CI360ViewerProps,\n  CI360ViewerRef,\n  CI360Config,\n} from './types';\n\n/**\n * CI360Viewer React Component\n *\n * A declarative React wrapper for the CI360 360-degree image viewer.\n *\n * @example\n * ```tsx\n * import { CI360Viewer } from 'js-cloudimage-360-view/react';\n * import 'js-cloudimage-360-view/css';\n *\n * function ProductView() {\n *   return (\n *     <CI360Viewer\n *       folder=\"https://example.com/images/\"\n *       filenameX=\"product-{index}.jpg\"\n *       amountX={36}\n *       autoplay\n *       fullscreen\n *     />\n *   );\n * }\n * ```\n *\n * @example With ref for imperative control\n * ```tsx\n * import { useRef } from 'react';\n * import { CI360Viewer, CI360ViewerRef } from 'js-cloudimage-360-view/react';\n *\n * function ProductView() {\n *   const viewerRef = useRef<CI360ViewerRef>(null);\n *\n *   return (\n *     <>\n *       <CI360Viewer\n *         ref={viewerRef}\n *         folder=\"https://example.com/images/\"\n *         filenameX=\"{index}.jpg\"\n *         amountX={36}\n *         onSpin={(e) => console.log(`Frame: ${e.activeImageX}`)}\n *       />\n *       <button onClick={() => viewerRef.current?.play()}>Play</button>\n *       <button onClick={() => viewerRef.current?.stop()}>Stop</button>\n *     </>\n *   );\n * }\n * ```\n */\nconst CI360ViewerComponent: ForwardRefRenderFunction<\n  CI360ViewerRef,\n  CI360ViewerProps\n> = (props, ref) => {\n  const {\n    // Container props\n    id,\n    className,\n    style,\n\n    // Image source\n    folder,\n    apiVersion,\n    filenameX,\n    filenameY,\n    imageListX,\n    imageListY,\n    indexZeroBase,\n    amountX,\n    amountY,\n\n    // Behavior\n    draggable,\n    swipeable,\n    keys,\n    keysReverse,\n    autoplay,\n    autoplayBehavior,\n    playOnce,\n    speed,\n    autoplayReverse,\n    dragSpeed,\n    dragReverse,\n    stopAtEdges,\n    inertia,\n\n    // UI Features\n    fullscreen,\n    magnifier,\n    pointerZoom,\n    pinchZoom,\n    bottomCircle,\n    bottomCircleOffset,\n    initialIconShown,\n    hide360Logo,\n    logoSrc,\n    imageInfo,\n    hints,\n    theme,\n\n    // Cloudimage CDN\n    ciToken,\n    ciFilters,\n    ciTransformation,\n\n    // Loading\n    lazyload,\n\n    // Hotspots\n    hotspots,\n    hotspotTrigger,\n    hotspotTimelineOnClick,\n\n    // Container\n    aspectRatio,\n\n    // Event callbacks\n    onReady,\n    onLoad,\n    onSpin,\n    onAutoplayStart,\n    onAutoplayStop,\n    onFullscreenOpen,\n    onFullscreenClose,\n    onZoomIn,\n    onZoomOut,\n    onDragStart,\n    onDragEnd,\n    onError,\n\n    ...restProps\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Memoize config to prevent unnecessary re-initializations\n  const config = useMemo<CI360Config>(\n    () => ({\n      // Image source\n      folder,\n      apiVersion,\n      filenameX,\n      filenameY,\n      imageListX,\n      imageListY,\n      indexZeroBase,\n      amountX,\n      amountY,\n\n      // Behavior\n      draggable,\n      swipeable,\n      keys,\n      keysReverse,\n      autoplay,\n      autoplayBehavior,\n      playOnce,\n      speed,\n      autoplayReverse,\n      dragSpeed,\n      dragReverse,\n      stopAtEdges,\n      inertia,\n\n      // UI Features\n      fullscreen,\n      magnifier,\n      pointerZoom,\n      pinchZoom,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n\n      // Loading\n      lazyload,\n\n      // Hotspots\n      hotspots,\n      hotspotTrigger,\n      hotspotTimelineOnClick,\n\n      // Container\n      aspectRatio,\n\n      // Event callbacks\n      onReady,\n      onLoad,\n      onSpin,\n      onAutoplayStart,\n      onAutoplayStop,\n      onFullscreenOpen,\n      onFullscreenClose,\n      onZoomIn,\n      onZoomOut,\n      onDragStart,\n      onDragEnd,\n      onError,\n    }),\n    [\n      // Image source\n      folder,\n      apiVersion,\n      filenameX,\n      filenameY,\n      imageListX,\n      imageListY,\n      indexZeroBase,\n      amountX,\n      amountY,\n\n      // Behavior\n      draggable,\n      swipeable,\n      keys,\n      keysReverse,\n      autoplay,\n      autoplayBehavior,\n      playOnce,\n      speed,\n      autoplayReverse,\n      dragSpeed,\n      dragReverse,\n      stopAtEdges,\n      inertia,\n\n      // UI Features\n      fullscreen,\n      magnifier,\n      pointerZoom,\n      pinchZoom,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n\n      // Loading\n      lazyload,\n\n      // Hotspots\n      hotspots,\n      hotspotTrigger,\n      hotspotTimelineOnClick,\n\n      // Container\n      aspectRatio,\n\n      // Event callbacks\n      onReady,\n      onLoad,\n      onSpin,\n      onAutoplayStart,\n      onAutoplayStop,\n      onFullscreenOpen,\n      onFullscreenClose,\n      onZoomIn,\n      onZoomOut,\n      onDragStart,\n      onDragEnd,\n      onError,\n    ]\n  );\n\n  const { getViewer } = useCI360(containerRef, config);\n\n  // Expose imperative methods via ref\n  // Use getViewer() inside methods to always get the current viewer instance,\n  // avoiding stale closure issues when the viewer initializes after first render\n  useImperativeHandle(\n    ref,\n    () => ({\n      moveLeft: (steps = 1) => getViewer()?.moveLeft(false, steps),\n      moveRight: (steps = 1) => getViewer()?.moveRight(false, steps),\n      moveTop: (steps = 1) => getViewer()?.moveTop(false, steps),\n      moveBottom: (steps = 1) => getViewer()?.moveBottom(false, steps),\n      play: () => getViewer()?.play(),\n      stop: () => getViewer()?.stopAutoplay(),\n      zoomIn: () => getViewer()?.toggleZoom(),\n      zoomOut: () => getViewer()?.removeZoom(),\n      goToFrame: (frame: number, hotspotId?: string) =>\n        getViewer()?.animateToFrame(frame, hotspotId),\n      getViewer: () => getViewer(),\n    }),\n    [getViewer]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      id={id}\n      className={className}\n      style={style}\n      {...restProps}\n    />\n  );\n};\n\nexport const CI360Viewer = forwardRef(CI360ViewerComponent);\nCI360Viewer.displayName = 'CI360Viewer';\n\nexport default CI360Viewer;\n"],"names":["CI360Class","useCI360","containerRef","config","isReady","setIsReady","useState","viewerRef","useRef","ci360Ref","uniqueId","useId","useEffect","isMounted","container","wrappedConfig","data","_a","error","getViewer","useCallback","CI360ViewerComponent","props","ref","id","className","style","folder","apiVersion","filenameX","filenameY","imageListX","imageListY","indexZeroBase","amountX","amountY","draggable","swipeable","keys","keysReverse","autoplay","autoplayBehavior","playOnce","speed","autoplayReverse","dragSpeed","dragReverse","stopAtEdges","inertia","fullscreen","magnifier","pointerZoom","pinchZoom","bottomCircle","bottomCircleOffset","initialIconShown","hide360Logo","logoSrc","imageInfo","hints","theme","ciToken","ciFilters","ciTransformation","lazyload","hotspots","hotspotTrigger","hotspotTimelineOnClick","aspectRatio","onReady","onLoad","onSpin","onAutoplayStart","onAutoplayStop","onFullscreenOpen","onFullscreenClose","onZoomIn","onZoomOut","onDragStart","onDragEnd","onError","restProps","useMemo","useImperativeHandle","steps","frame","hotspotId","jsx","CI360Viewer","forwardRef"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/react/useCI360.ts","../../src/react/CI360Viewer.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useId, useCallback, type RefObject } from 'react';\nimport type {\n  CI360Config,\n  CI360ViewerInstance,\n  UseCI360Return,\n  UseCI360Options,\n} from './types';\n\n// Import CI360 class dynamically to avoid SSR issues\nlet CI360Class: any = null;\n\n/**\n * Custom hook for integrating CI360 viewer with React\n *\n * @param containerRef - React ref to the container element\n * @param config - CI360 configuration options\n * @returns Object containing viewer instance and ready state\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const containerRef = useRef<HTMLDivElement>(null);\n *   const { viewer, isReady } = useCI360(containerRef, {\n *     folder: 'https://example.com/images/',\n *     filenameX: 'image-{index}.jpg',\n *     amountX: 36,\n *   });\n *\n *   return <div ref={containerRef} />;\n * }\n * ```\n */\nexport function useCI360(\n  containerRef: RefObject<HTMLDivElement | null>,\n  config: UseCI360Options\n): UseCI360Return {\n  const [isReady, setIsReady] = useState(false);\n  const viewerRef = useRef<CI360ViewerInstance | null>(null);\n  const ci360Ref = useRef<any>(null);\n  const uniqueId = useId();\n\n  // Initialize viewer\n  useEffect(() => {\n    // SSR guard\n    if (typeof window === 'undefined') return;\n    if (!containerRef.current) return;\n    if (config.autoInit === false) return;\n\n    let isMounted = true;\n    const container = containerRef.current;\n\n    const initViewer = async () => {\n      try {\n        // Dynamically import CI360 to avoid SSR issues\n        if (!CI360Class) {\n          const module = await import('../ci360');\n          CI360Class = module.default;\n        }\n\n        if (!container || !isMounted) return;\n\n        // Set a unique ID on the container if not present\n        if (!container.id) {\n          container.id = `ci360-${uniqueId.replace(/:/g, '')}`;\n        }\n\n        // Wrap user callbacks to update React state\n        const wrappedConfig: CI360Config = {\n          ...config,\n          onReady: (data) => {\n            if (isMounted) {\n              setIsReady(true);\n              config.onReady?.(data);\n            }\n          },\n        };\n\n        // Create CI360 instance and initialize viewer\n        ci360Ref.current = new CI360Class();\n        viewerRef.current = ci360Ref.current.init(container, wrappedConfig);\n      } catch (error) {\n        console.error('Failed to initialize CI360 viewer:', error);\n      }\n    };\n\n    initViewer();\n\n    // Cleanup on unmount or when dependencies change\n    return () => {\n      isMounted = false;\n      if (viewerRef.current) {\n        try {\n          viewerRef.current.destroy();\n        } catch (e) {\n          // Ignore errors during cleanup - element may already be detached\n        }\n        viewerRef.current = null;\n      }\n      ci360Ref.current = null;\n      setIsReady(false);\n    };\n  }, [\n    config.folder,\n    config.filenameX,\n    config.filenameY,\n    config.imageListX,\n    config.imageListY,\n    config.amountX,\n    config.amountY,\n    config.hotspots,\n    config.theme,\n    config.aspectRatio,\n    uniqueId,\n  ]);\n\n  // Stable getter to always return current viewer (avoids stale closures)\n  const getViewer = useCallback(() => viewerRef.current, []);\n\n  return {\n    viewer: viewerRef.current,\n    isReady,\n    getViewer,\n  };\n}\n\nexport default useCI360;\n","import {\n  useRef,\n  useImperativeHandle,\n  forwardRef,\n  useMemo,\n  type ForwardRefRenderFunction,\n} from 'react';\nimport { useCI360 } from './useCI360';\nimport type {\n  CI360ViewerProps,\n  CI360ViewerRef,\n  CI360Config,\n} from './types';\n\n/**\n * CI360Viewer React Component\n *\n * A declarative React wrapper for the CI360 360-degree image viewer.\n *\n * @example\n * ```tsx\n * import { CI360Viewer } from 'js-cloudimage-360-view/react';\n * import 'js-cloudimage-360-view/css';\n *\n * function ProductView() {\n *   return (\n *     <CI360Viewer\n *       folder=\"https://example.com/images/\"\n *       filenameX=\"product-{index}.jpg\"\n *       amountX={36}\n *       autoplay\n *       fullscreen\n *     />\n *   );\n * }\n * ```\n *\n * @example With ref for imperative control\n * ```tsx\n * import { useRef } from 'react';\n * import { CI360Viewer, CI360ViewerRef } from 'js-cloudimage-360-view/react';\n *\n * function ProductView() {\n *   const viewerRef = useRef<CI360ViewerRef>(null);\n *\n *   return (\n *     <>\n *       <CI360Viewer\n *         ref={viewerRef}\n *         folder=\"https://example.com/images/\"\n *         filenameX=\"{index}.jpg\"\n *         amountX={36}\n *         onSpin={(e) => console.log(`Frame: ${e.activeImageX}`)}\n *       />\n *       <button onClick={() => viewerRef.current?.play()}>Play</button>\n *       <button onClick={() => viewerRef.current?.stop()}>Stop</button>\n *     </>\n *   );\n * }\n * ```\n */\nconst CI360ViewerComponent: ForwardRefRenderFunction<\n  CI360ViewerRef,\n  CI360ViewerProps\n> = (props, ref) => {\n  const {\n    // Container props\n    id,\n    className,\n    style,\n\n    // Image source\n    folder,\n    apiVersion,\n    filenameX,\n    filenameY,\n    imageListX,\n    imageListY,\n    indexZeroBase,\n    amountX,\n    amountY,\n\n    // Behavior\n    draggable,\n    swipeable,\n    keys,\n    keysReverse,\n    autoplay,\n    autoplayBehavior,\n    playOnce,\n    speed,\n    autoplayReverse,\n    dragSpeed,\n    dragReverse,\n    stopAtEdges,\n    inertia,\n\n    // UI Features\n    fullscreen,\n    magnifier,\n    pointerZoom,\n    pinchZoom,\n    bottomCircle,\n    bottomCircleOffset,\n    initialIconShown,\n    hide360Logo,\n    logoSrc,\n    imageInfo,\n    hints,\n    theme,\n\n    // Cloudimage CDN\n    ciToken,\n    ciFilters,\n    ciTransformation,\n\n    // Loading\n    lazyload,\n\n    // Hotspots\n    hotspots,\n    hotspotTrigger,\n    hotspotTimelineOnClick,\n\n    // Container\n    aspectRatio,\n\n    // Event callbacks\n    onReady,\n    onLoad,\n    onSpin,\n    onAutoplayStart,\n    onAutoplayStop,\n    onFullscreenOpen,\n    onFullscreenClose,\n    onZoomIn,\n    onZoomOut,\n    onDragStart,\n    onDragEnd,\n    onHotspotOpen,\n    onHotspotClose,\n    onError,\n\n    ...restProps\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Memoize config to prevent unnecessary re-initializations\n  const config = useMemo<CI360Config>(\n    () => ({\n      // Image source\n      folder,\n      apiVersion,\n      filenameX,\n      filenameY,\n      imageListX,\n      imageListY,\n      indexZeroBase,\n      amountX,\n      amountY,\n\n      // Behavior\n      draggable,\n      swipeable,\n      keys,\n      keysReverse,\n      autoplay,\n      autoplayBehavior,\n      playOnce,\n      speed,\n      autoplayReverse,\n      dragSpeed,\n      dragReverse,\n      stopAtEdges,\n      inertia,\n\n      // UI Features\n      fullscreen,\n      magnifier,\n      pointerZoom,\n      pinchZoom,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n\n      // Loading\n      lazyload,\n\n      // Hotspots\n      hotspots,\n      hotspotTrigger,\n      hotspotTimelineOnClick,\n\n      // Container\n      aspectRatio,\n\n      // Event callbacks\n      onReady,\n      onLoad,\n      onSpin,\n      onAutoplayStart,\n      onAutoplayStop,\n      onFullscreenOpen,\n      onFullscreenClose,\n      onZoomIn,\n      onZoomOut,\n      onDragStart,\n      onDragEnd,\n      onHotspotOpen,\n      onHotspotClose,\n      onError,\n    }),\n    [\n      // Image source\n      folder,\n      apiVersion,\n      filenameX,\n      filenameY,\n      imageListX,\n      imageListY,\n      indexZeroBase,\n      amountX,\n      amountY,\n\n      // Behavior\n      draggable,\n      swipeable,\n      keys,\n      keysReverse,\n      autoplay,\n      autoplayBehavior,\n      playOnce,\n      speed,\n      autoplayReverse,\n      dragSpeed,\n      dragReverse,\n      stopAtEdges,\n      inertia,\n\n      // UI Features\n      fullscreen,\n      magnifier,\n      pointerZoom,\n      pinchZoom,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n\n      // Loading\n      lazyload,\n\n      // Hotspots\n      hotspots,\n      hotspotTrigger,\n      hotspotTimelineOnClick,\n\n      // Container\n      aspectRatio,\n\n      // Event callbacks\n      onReady,\n      onLoad,\n      onSpin,\n      onAutoplayStart,\n      onAutoplayStop,\n      onFullscreenOpen,\n      onFullscreenClose,\n      onZoomIn,\n      onZoomOut,\n      onDragStart,\n      onDragEnd,\n      onHotspotOpen,\n      onHotspotClose,\n      onError,\n    ]\n  );\n\n  const { getViewer } = useCI360(containerRef, config);\n\n  // Expose imperative methods via ref\n  // Use getViewer() inside methods to always get the current viewer instance,\n  // avoiding stale closure issues when the viewer initializes after first render\n  useImperativeHandle(\n    ref,\n    () => ({\n      moveLeft: (steps = 1) => getViewer()?.moveLeft(false, steps),\n      moveRight: (steps = 1) => getViewer()?.moveRight(false, steps),\n      moveTop: (steps = 1) => getViewer()?.moveTop(false, steps),\n      moveBottom: (steps = 1) => getViewer()?.moveBottom(false, steps),\n      play: () => getViewer()?.play(),\n      stop: () => getViewer()?.stopAutoplay(),\n      zoomIn: () => getViewer()?.toggleZoom(),\n      zoomOut: () => getViewer()?.removeZoom(),\n      goToFrame: (frame: number, hotspotId?: string) =>\n        getViewer()?.animateToFrame(frame, hotspotId),\n      getViewer: () => getViewer(),\n    }),\n    [getViewer]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      id={id}\n      className={className}\n      style={style}\n      {...restProps}\n    />\n  );\n};\n\nexport const CI360Viewer = forwardRef(CI360ViewerComponent);\nCI360Viewer.displayName = 'CI360Viewer';\n\nexport default CI360Viewer;\n"],"names":["CI360Class","useCI360","containerRef","config","isReady","setIsReady","useState","viewerRef","useRef","ci360Ref","uniqueId","useId","useEffect","isMounted","container","wrappedConfig","data","_a","error","getViewer","useCallback","CI360ViewerComponent","props","ref","id","className","style","folder","apiVersion","filenameX","filenameY","imageListX","imageListY","indexZeroBase","amountX","amountY","draggable","swipeable","keys","keysReverse","autoplay","autoplayBehavior","playOnce","speed","autoplayReverse","dragSpeed","dragReverse","stopAtEdges","inertia","fullscreen","magnifier","pointerZoom","pinchZoom","bottomCircle","bottomCircleOffset","initialIconShown","hide360Logo","logoSrc","imageInfo","hints","theme","ciToken","ciFilters","ciTransformation","lazyload","hotspots","hotspotTrigger","hotspotTimelineOnClick","aspectRatio","onReady","onLoad","onSpin","onAutoplayStart","onAutoplayStop","onFullscreenOpen","onFullscreenClose","onZoomIn","onZoomOut","onDragStart","onDragEnd","onHotspotOpen","onHotspotClose","onError","restProps","useMemo","useImperativeHandle","steps","frame","hotspotId","jsx","CI360Viewer","forwardRef"],"mappings":";;AASA,IAAIA,IAAkB;AAuBf,SAASC,GACdC,GACAC,GACgB;AAChB,QAAM,CAACC,GAASC,CAAU,IAAIC,GAAS,EAAK,GACtCC,IAAYC,EAAmC,IAAI,GACnDC,IAAWD,EAAY,IAAI,GAC3BE,IAAWC,GAAA;AAGjB,EAAAC,GAAU,MAAM;AAId,QAFI,OAAO,SAAW,OAClB,CAACV,EAAa,WACdC,EAAO,aAAa,GAAO;AAE/B,QAAIU,IAAY;AAChB,UAAMC,IAAYZ,EAAa;AAoC/B,YAlCmB,YAAY;AAC7B,UAAI;AAOF,YALKF,MAEHA,KADe,MAAM,OAAO,sBAAU,GAClB,UAGlB,CAACc,KAAa,CAACD,EAAW;AAG9B,QAAKC,EAAU,OACbA,EAAU,KAAK,SAASJ,EAAS,QAAQ,MAAM,EAAE,CAAC;AAIpD,cAAMK,IAA6B;AAAA,UACjC,GAAGZ;AAAA,UACH,SAAS,CAACa,MAAS;;AACjB,YAAIH,MACFR,EAAW,EAAI,IACfY,IAAAd,EAAO,YAAP,QAAAc,EAAA,KAAAd,GAAiBa;AAAA,UAErB;AAAA,QAAA;AAIF,QAAAP,EAAS,UAAU,IAAIT,EAAA,GACvBO,EAAU,UAAUE,EAAS,QAAQ,KAAKK,GAAWC,CAAa;AAAA,MACpE,SAASG,GAAO;AACd,gBAAQ,MAAM,sCAAsCA,CAAK;AAAA,MAC3D;AAAA,IACF,GAEA,GAGO,MAAM;AAEX,UADAL,IAAY,IACRN,EAAU,SAAS;AACrB,YAAI;AACF,UAAAA,EAAU,QAAQ,QAAA;AAAA,QACpB,QAAY;AAAA,QAEZ;AACA,QAAAA,EAAU,UAAU;AAAA,MACtB;AACA,MAAAE,EAAS,UAAU,MACnBJ,EAAW,EAAK;AAAA,IAClB;AAAA,EACF,GAAG;AAAA,IACDF,EAAO;AAAA,IACPA,EAAO;AAAA,IACPA,EAAO;AAAA,IACPA,EAAO;AAAA,IACPA,EAAO;AAAA,IACPA,EAAO;AAAA,IACPA,EAAO;AAAA,IACPA,EAAO;AAAA,IACPA,EAAO;AAAA,IACPA,EAAO;AAAA,IACPO;AAAA,EAAA,CACD;AAGD,QAAMS,IAAYC,GAAY,MAAMb,EAAU,SAAS,CAAA,CAAE;AAEzD,SAAO;AAAA,IACL,QAAQA,EAAU;AAAA,IAClB,SAAAH;AAAA,IACA,WAAAe;AAAA,EAAA;AAEJ;AC9DA,MAAME,KAGF,CAACC,GAAOC,MAAQ;AAClB,QAAM;AAAA;AAAA,IAEJ,IAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA;AAAA,IAGA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA;AAAA,IAGA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA;AAAA,IAGA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA;AAAA,IAGA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,kBAAAC;AAAA;AAAA,IAGA,UAAAC;AAAA;AAAA,IAGA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,wBAAAC;AAAA;AAAA,IAGA,aAAAC;AAAA;AAAA,IAGA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,IAEA,GAAGC;AAAA,EAAA,IACD7D,GAEEpB,KAAeM,EAAuB,IAAI,GAG1CL,KAASiF;AAAA,IACb,OAAO;AAAA;AAAA,MAEL,QAAAzD;AAAA,MACA,YAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,eAAAC;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA;AAAA,MAGA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,SAAAC;AAAA;AAAA,MAGA,YAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAAC;AAAA,MACA,cAAAC;AAAA,MACA,oBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,aAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA;AAAA,MAGA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,kBAAAC;AAAA;AAAA,MAGA,UAAAC;AAAA;AAAA,MAGA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,wBAAAC;AAAA;AAAA,MAGA,aAAAC;AAAA;AAAA,MAGA,SAAAC;AAAA,MACA,QAAAC;AAAA,MACA,QAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,SAAAC;AAAA,IAAA;AAAA,IAEF;AAAA;AAAA,MAEEvD;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA;AAAA,MAGAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA;AAAA,MAGAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA;AAAA,MAGAC;AAAA,MACAC;AAAA,MACAC;AAAA;AAAA,MAGAC;AAAA;AAAA,MAGAC;AAAA,MACAC;AAAA,MACAC;AAAA;AAAA,MAGAC;AAAA;AAAA,MAGAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACF,GAGI,EAAE,WAAA/D,EAAA,IAAclB,GAASC,IAAcC,EAAM;AAKnD,SAAAkF;AAAA,IACE9D;AAAA,IACA,OAAO;AAAA,MACL,UAAU,CAAC+D,IAAQ,MAAA;;AAAM,gBAAArE,IAAAE,QAAA,gBAAAF,EAAa,SAAS,IAAOqE;AAAA;AAAA,MACtD,WAAW,CAACA,IAAQ,MAAA;;AAAM,gBAAArE,IAAAE,QAAA,gBAAAF,EAAa,UAAU,IAAOqE;AAAA;AAAA,MACxD,SAAS,CAACA,IAAQ,MAAA;;AAAM,gBAAArE,IAAAE,QAAA,gBAAAF,EAAa,QAAQ,IAAOqE;AAAA;AAAA,MACpD,YAAY,CAACA,IAAQ,MAAA;;AAAM,gBAAArE,IAAAE,QAAA,gBAAAF,EAAa,WAAW,IAAOqE;AAAA;AAAA,MAC1D,MAAM,MAAA;;AAAM,gBAAArE,IAAAE,EAAA,MAAA,gBAAAF,EAAa;AAAA;AAAA,MACzB,MAAM,MAAA;;AAAM,gBAAAA,IAAAE,EAAA,MAAA,gBAAAF,EAAa;AAAA;AAAA,MACzB,QAAQ,MAAA;;AAAM,gBAAAA,IAAAE,EAAA,MAAA,gBAAAF,EAAa;AAAA;AAAA,MAC3B,SAAS,MAAA;;AAAM,gBAAAA,IAAAE,EAAA,MAAA,gBAAAF,EAAa;AAAA;AAAA,MAC5B,WAAW,CAACsE,GAAeC,MAAA;;AACzB,gBAAAvE,KAAAE,QAAA,gBAAAF,GAAa,eAAesE,GAAOC;AAAA;AAAA,MACrC,WAAW,MAAMrE,EAAA;AAAA,IAAU;AAAA,IAE7B,CAACA,CAAS;AAAA,EAAA,GAIV,gBAAAsE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKvF;AAAA,MACL,IAAAsB;AAAA,MACA,WAAAC;AAAA,MACA,OAAAC;AAAA,MACC,GAAGyD;AAAA,IAAA;AAAA,EAAA;AAGV,GAEaO,KAAcC,GAAWtE,EAAoB;AAC1DqE,GAAY,cAAc;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "main": "dist/js-cloudimage-360-view.min.js",
   "types": "src/types/ci360.d.ts",
   "files": [

package/src/types/ci360.d.ts

@@ -33,6 +33,8 @@ declare module CI360 {
     bottomCircle?: boolean; // Default: true
     hotspots?: any; // Default: null (type adjusted as needed)
     hotspotTrigger?: 'hover' | 'click'; // Default: 'hover'
+    onHotspotOpen?: (hotspotId: string) => void;
+    onHotspotClose?: (hotspotId: string) => void;
     dragReverse?: boolean; // Default: false
     hide360Logo?: boolean; // Default: false (not documented)
     logoSrc?: string; // Default: Scaleflex 360 logo URL