js-cloudimage-360-view 4.8.0 → 4.9.2

package/dist/react/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Pe=require("react/jsx-runtime"),n=require("react");let R=null;function I(f,t){const[v,y]=n.useState(!1),a=n.useRef(null),l=n.useRef(null),m=n.useId();n.useEffect(()=>{if(typeof window>"u"||!f.current||t.autoInit===!1)return;let u=!0;const s=f.current;return(async()=>{try{if(R||(R=(await Promise.resolve().then(()=>require("./ci360-DdSVW_xW.js"))).default),!s||!u)return;s.id||(s.id=`ci360-${m.replace(/:/g,"")}`);const i={...t,onReady:c=>{var p;u&&(y(!0),(p=t.onReady)==null||p.call(t,c))}};l.current=new R,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,y(!1)}},[t.folder,t.filenameX,t.filenameY,t.imageListX,t.imageListY,t.amountX,t.amountY,t.hotspots,t.theme,t.aspectRatio,t.cropAspectRatio,t.cropGravity,m]);const C=n.useCallback(()=>a.current,[]);return{viewer:a.current,isReady:v,getViewer:C}}const Ze=(f,t)=>{const{id:v,className:y,style:a,folder:l,apiVersion:m,filenameX:C,filenameY:u,imageListX:s,imageListY:w,indexZeroBase:i,amountX:c,amountY:p,draggable:z,swipeable:S,keys:V,keysReverse:g,autoplay:T,autoplayBehavior:O,playOnce:P,speed:Z,autoplayReverse:b,dragSpeed:L,dragReverse:k,stopAtEdges:A,inertia:F,fullscreen:X,magnifier:Y,pointerZoom:q,pinchZoom:x,zoomMax:B,zoomStep:D,zoomControls:E,zoomControlsPosition:H,scrollHint:M,bottomCircle:j,bottomCircleOffset:G,initialIconShown:N,hide360Logo:$,logoSrc:J,imageInfo:K,hints:Q,theme:U,markerTheme:W,brandColor:_,ciToken:ee,ciFilters:oe,ciTransformation:te,cropAspectRatio:re,cropGravity:ne,lazyload:ae,hotspots:se,hotspotTrigger:ie,hotspotTimelineOnClick:le,aspectRatio:ue,onReady:me,onLoad:ce,onSpin:pe,onAutoplayStart:de,onAutoplayStop:fe,onFullscreenOpen:ye,onFullscreenClose:Ce,onZoomIn:ve,onZoomOut:we,onDragStart:Re,onDragEnd:Ie,onHotspotOpen:he,onHotspotClose:ze,onProductClick:Se,onError:Ve,...Te}=f,ge=n.useRef(null),Oe=n.useMemo(()=>({folder:l,apiVersion:m,filenameX:C,filenameY:u,imageListX:s,imageListY:w,indexZeroBase:i,amountX:c,amountY:p,draggable:z,swipeable:S,keys:V,keysReverse:g,autoplay:T,autoplayBehavior:O,playOnce:P,speed:Z,autoplayReverse:b,dragSpeed:L,dragReverse:k,stopAtEdges:A,inertia:F,fullscreen:X,magnifier:Y,pointerZoom:q,pinchZoom:x,zoomMax:B,zoomStep:D,zoomControls:E,zoomControlsPosition:H,scrollHint:M,bottomCircle:j,bottomCircleOffset:G,initialIconShown:N,hide360Logo:$,logoSrc:J,imageInfo:K,hints:Q,theme:U,markerTheme:W,brandColor:_,ciToken:ee,ciFilters:oe,ciTransformation:te,cropAspectRatio:re,cropGravity:ne,lazyload:ae,hotspots:se,hotspotTrigger:ie,hotspotTimelineOnClick:le,aspectRatio:ue,onReady:me,onLoad:ce,onSpin:pe,onAutoplayStart:de,onAutoplayStop:fe,onFullscreenOpen:ye,onFullscreenClose:Ce,onZoomIn:ve,onZoomOut:we,onDragStart:Re,onDragEnd:Ie,onHotspotOpen:he,onHotspotClose:ze,onProductClick:Se,onError:Ve}),[l,m,C,u,s,w,i,c,p,z,S,V,g,T,O,P,Z,b,L,k,A,F,X,Y,q,x,B,D,E,H,M,j,G,N,$,J,K,Q,U,W,_,ee,oe,te,re,ne,ae,se,ie,le,ue,me,ce,pe,de,fe,ye,Ce,ve,we,Re,Ie,he,ze,Se,Ve]),{getViewer:r}=I(ge,Oe);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,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.zoomIn()},zoomOut:()=>{var e,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.zoomOut()},resetZoom:()=>{var e,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.resetZoom()},setZoom:e=>{var o,d;return(d=(o=r())==null?void 0:o.zoomPan)==null?void 0:d.setZoom(e)},goToFrame:(e,o)=>{var d;return(d=r())==null?void 0:d.animateToFrame(e,o)},getViewer:()=>r()}),[r]),Pe.jsx("div",{ref:ge,id:v,className:y,style:a,...Te})},h=n.forwardRef(Ze);h.displayName="CI360Viewer";exports.CI360Viewer=h;exports.CI360ViewerDefault=h;exports.useCI360=I;exports.useCI360Default=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ke=require("react/jsx-runtime"),n=require("react");let R=null;function I(f,t){const[v,y]=n.useState(!1),a=n.useRef(null),l=n.useRef(null),m=n.useId();n.useEffect(()=>{if(typeof window>"u"||!f.current||t.autoInit===!1)return;let u=!0;const s=f.current;return(async()=>{try{if(R||(R=(await Promise.resolve().then(()=>require("./ci360-B2r9u7br.js"))).default),!s||!u)return;s.id||(s.id=`ci360-${m.replace(/:/g,"")}`);const i={...t,onReady:c=>{var p;u&&(y(!0),(p=t.onReady)==null||p.call(t,c))}};l.current=new R,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,y(!1)}},[t.folder,t.filenameX,t.filenameY,t.filenameGrid,t.imageListX,t.imageListY,t.imageListGrid,t.amountX,t.amountY,t.hotspots,t.theme,t.aspectRatio,t.cropAspectRatio,t.cropGravity,m]);const C=n.useCallback(()=>a.current,[]);return{viewer:a.current,isReady:v,getViewer:C}}const Xe=(f,t)=>{const{id:v,className:y,style:a,folder:l,apiVersion:m,filenameX:C,filenameY:u,filenameGrid:s,imageListX:w,imageListY:i,imageListGrid:c,indexZeroBase:p,amountX:z,amountY:g,draggable:S,swipeable:V,keys:L,keysReverse:T,autoplay:O,autoplayBehavior:P,playOnce:Z,speed:b,autoplayReverse:A,dragSpeed:k,dragReverse:X,stopAtEdges:Y,stopAtEdgesX:E,stopAtEdgesY:F,inertia:G,fullscreen:q,magnifier:x,pointerZoom:B,pinchZoom:D,zoomMax:H,zoomStep:M,zoomControls:j,zoomControlsPosition:N,scrollHint:$,bottomCircle:J,bottomCircleOffset:K,initialIconShown:Q,hide360Logo:U,logoSrc:W,imageInfo:_,hints:ee,theme:oe,markerTheme:te,brandColor:re,ciToken:ne,ciFilters:ae,ciTransformation:se,cropAspectRatio:ie,cropGravity:le,lazyload:ue,hotspots:me,hotspotTrigger:ce,hotspotTimelineOnClick:pe,aspectRatio:de,onReady:fe,onLoad:ye,onSpin:Ce,onAutoplayStart:ve,onAutoplayStop:we,onFullscreenOpen:Re,onFullscreenClose:Ie,onZoomIn:he,onZoomOut:ze,onDragStart:ge,onDragEnd:Se,onHotspotOpen:Ve,onHotspotClose:Le,onProductClick:Te,onNavigate:Oe,onError:Pe,...be}=f,Ze=n.useRef(null),Ae=n.useMemo(()=>({folder:l,apiVersion:m,filenameX:C,filenameY:u,filenameGrid:s,imageListX:w,imageListY:i,imageListGrid:c,indexZeroBase:p,amountX:z,amountY:g,draggable:S,swipeable:V,keys:L,keysReverse:T,autoplay:O,autoplayBehavior:P,playOnce:Z,speed:b,autoplayReverse:A,dragSpeed:k,dragReverse:X,stopAtEdges:Y,stopAtEdgesX:E,stopAtEdgesY:F,inertia:G,fullscreen:q,magnifier:x,pointerZoom:B,pinchZoom:D,zoomMax:H,zoomStep:M,zoomControls:j,zoomControlsPosition:N,scrollHint:$,bottomCircle:J,bottomCircleOffset:K,initialIconShown:Q,hide360Logo:U,logoSrc:W,imageInfo:_,hints:ee,theme:oe,markerTheme:te,brandColor:re,ciToken:ne,ciFilters:ae,ciTransformation:se,cropAspectRatio:ie,cropGravity:le,lazyload:ue,hotspots:me,hotspotTrigger:ce,hotspotTimelineOnClick:pe,aspectRatio:de,onReady:fe,onLoad:ye,onSpin:Ce,onAutoplayStart:ve,onAutoplayStop:we,onFullscreenOpen:Re,onFullscreenClose:Ie,onZoomIn:he,onZoomOut:ze,onDragStart:ge,onDragEnd:Se,onHotspotOpen:Ve,onHotspotClose:Le,onProductClick:Te,onNavigate:Oe,onError:Pe}),[l,m,C,u,s,w,i,c,p,z,g,S,V,L,T,O,P,Z,b,A,k,X,Y,E,F,G,q,x,B,D,H,M,j,N,$,J,K,Q,U,W,_,ee,oe,te,re,ne,ae,se,ie,le,ue,me,ce,pe,de,fe,ye,Ce,ve,we,Re,Ie,he,ze,ge,Se,Ve,Le,Te,Oe,Pe]),{getViewer:r}=I(Ze,Ae);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,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.zoomIn()},zoomOut:()=>{var e,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.zoomOut()},resetZoom:()=>{var e,o;return(o=(e=r())==null?void 0:e.zoomPan)==null?void 0:o.resetZoom()},setZoom:e=>{var o,d;return(d=(o=r())==null?void 0:o.zoomPan)==null?void 0:d.setZoom(e)},goToFrame:(e,o)=>{var d;return(d=r())==null?void 0:d.animateToFrame(e,o)},getViewer:()=>r()}),[r]),ke.jsx("div",{ref:Ze,id:v,className:y,style:a,...be})},h=n.forwardRef(Xe);h.displayName="CI360Viewer";exports.CI360Viewer=h;exports.CI360ViewerDefault=h;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    config.aspectRatio,\n    config.cropAspectRatio,\n    config.cropGravity,\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    zoomMax,\n    zoomStep,\n    zoomControls,\n    zoomControlsPosition,\n    scrollHint,\n    bottomCircle,\n    bottomCircleOffset,\n    initialIconShown,\n    hide360Logo,\n    logoSrc,\n    imageInfo,\n    hints,\n    theme,\n    markerTheme,\n    brandColor,\n\n    // Cloudimage CDN\n    ciToken,\n    ciFilters,\n    ciTransformation,\n    cropAspectRatio,\n    cropGravity,\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    onProductClick,\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      zoomMax,\n      zoomStep,\n      zoomControls,\n      zoomControlsPosition,\n      scrollHint,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n      markerTheme,\n      brandColor,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n      cropAspectRatio,\n      cropGravity,\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      onProductClick,\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      zoomMax,\n      zoomStep,\n      zoomControls,\n      zoomControlsPosition,\n      scrollHint,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n      markerTheme,\n      brandColor,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n      cropAspectRatio,\n      cropGravity,\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      onProductClick,\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()?.zoomPan?.zoomIn(),\n      zoomOut: () => getViewer()?.zoomPan?.zoomOut(),\n      resetZoom: () => getViewer()?.zoomPan?.resetZoom(),\n      setZoom: (level: number) => getViewer()?.zoomPan?.setZoom(level),\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","zoomMax","zoomStep","zoomControls","zoomControlsPosition","scrollHint","bottomCircle","bottomCircleOffset","initialIconShown","hide360Logo","logoSrc","imageInfo","hints","theme","markerTheme","brandColor","ciToken","ciFilters","ciTransformation","cropAspectRatio","cropGravity","lazyload","hotspots","hotspotTrigger","hotspotTimelineOnClick","aspectRatio","onReady","onLoad","onSpin","onAutoplayStart","onAutoplayStop","onFullscreenOpen","onFullscreenClose","onZoomIn","onZoomOut","onDragStart","onDragEnd","onHotspotOpen","onHotspotClose","onProductClick","onError","restProps","useMemo","useImperativeHandle","steps","_b","level","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.filenameGrid,\n    config.imageListX,\n    config.imageListY,\n    config.imageListGrid,\n    config.amountX,\n    config.amountY,\n    config.hotspots,\n    config.theme,\n    config.aspectRatio,\n    config.cropAspectRatio,\n    config.cropGravity,\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    filenameGrid,\n    imageListX,\n    imageListY,\n    imageListGrid,\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    stopAtEdgesX,\n    stopAtEdgesY,\n    inertia,\n\n    // UI Features\n    fullscreen,\n    magnifier,\n    pointerZoom,\n    pinchZoom,\n    zoomMax,\n    zoomStep,\n    zoomControls,\n    zoomControlsPosition,\n    scrollHint,\n    bottomCircle,\n    bottomCircleOffset,\n    initialIconShown,\n    hide360Logo,\n    logoSrc,\n    imageInfo,\n    hints,\n    theme,\n    markerTheme,\n    brandColor,\n\n    // Cloudimage CDN\n    ciToken,\n    ciFilters,\n    ciTransformation,\n    cropAspectRatio,\n    cropGravity,\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    onProductClick,\n    onNavigate,\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      filenameGrid,\n      imageListX,\n      imageListY,\n      imageListGrid,\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    stopAtEdgesX,\n    stopAtEdgesY,\n      inertia,\n\n      // UI Features\n      fullscreen,\n      magnifier,\n      pointerZoom,\n      pinchZoom,\n      zoomMax,\n      zoomStep,\n      zoomControls,\n      zoomControlsPosition,\n      scrollHint,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n      markerTheme,\n      brandColor,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n      cropAspectRatio,\n      cropGravity,\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      onProductClick,\n      onNavigate,\n      onError,\n    }),\n    [\n      // Image source\n      folder,\n      apiVersion,\n      filenameX,\n      filenameY,\n      filenameGrid,\n      imageListX,\n      imageListY,\n      imageListGrid,\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    stopAtEdgesX,\n    stopAtEdgesY,\n      inertia,\n\n      // UI Features\n      fullscreen,\n      magnifier,\n      pointerZoom,\n      pinchZoom,\n      zoomMax,\n      zoomStep,\n      zoomControls,\n      zoomControlsPosition,\n      scrollHint,\n      bottomCircle,\n      bottomCircleOffset,\n      initialIconShown,\n      hide360Logo,\n      logoSrc,\n      imageInfo,\n      hints,\n      theme,\n      markerTheme,\n      brandColor,\n\n      // Cloudimage CDN\n      ciToken,\n      ciFilters,\n      ciTransformation,\n      cropAspectRatio,\n      cropGravity,\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      onProductClick,\n      onNavigate,\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()?.zoomPan?.zoomIn(),\n      zoomOut: () => getViewer()?.zoomPan?.zoomOut(),\n      resetZoom: () => getViewer()?.zoomPan?.resetZoom(),\n      setZoom: (level: number) => getViewer()?.zoomPan?.setZoom(level),\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","filenameGrid","imageListX","imageListY","imageListGrid","indexZeroBase","amountX","amountY","draggable","swipeable","keys","keysReverse","autoplay","autoplayBehavior","playOnce","speed","autoplayReverse","dragSpeed","dragReverse","stopAtEdges","stopAtEdgesX","stopAtEdgesY","inertia","fullscreen","magnifier","pointerZoom","pinchZoom","zoomMax","zoomStep","zoomControls","zoomControlsPosition","scrollHint","bottomCircle","bottomCircleOffset","initialIconShown","hide360Logo","logoSrc","imageInfo","hints","theme","markerTheme","brandColor","ciToken","ciFilters","ciTransformation","cropAspectRatio","cropGravity","lazyload","hotspots","hotspotTrigger","hotspotTimelineOnClick","aspectRatio","onReady","onLoad","onSpin","onAutoplayStart","onAutoplayStop","onFullscreenOpen","onFullscreenClose","onZoomIn","onZoomOut","onDragStart","onDragEnd","onHotspotOpen","onHotspotClose","onProductClick","onNavigate","onError","restProps","useMemo","useImperativeHandle","steps","_b","level","frame","hotspotId","jsx","CI360Viewer","forwardRef"],"mappings":"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,EACF,aAAAC,EACA,aAAAC,EACE,QAAAC,EAGA,WAAAC,EACA,UAAAC,EACA,YAAAC,EACA,UAAAC,EACA,QAAAC,EACA,SAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,WAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,GACA,MAAAC,GACA,YAAAC,GACA,WAAAC,GAGA,QAAAC,GACA,UAAAC,GACA,iBAAAC,GACA,gBAAAC,GACA,YAAAC,GAGA,SAAAC,GAGA,SAAAC,GACA,eAAAC,GACA,uBAAAC,GAGA,YAAAC,GAGA,QAAAC,GACA,OAAAC,GACA,OAAAC,GACA,gBAAAC,GACA,eAAAC,GACA,iBAAAC,GACA,kBAAAC,GACA,SAAAC,GACA,UAAAC,GACA,YAAAC,GACA,UAAAC,GACA,cAAAC,GACA,eAAAC,GACA,eAAAC,GACA,WAAAC,GACA,QAAAC,EAAA,GAEF,CAEEtE,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EAGAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACFC,EACAC,EACEC,EAGAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,GACAC,GACAC,GACAC,GAGAC,GACAC,GACAC,GACAC,GACAC,GAGAC,GAGAC,GACAC,GACAC,GAGAC,GAGAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,GACAC,EAAA,CACF,EAGI,CAAE,UAAA9E,CAAA,EAAclB,EAASC,GAAcC,EAAM,EAKnDiG,OAAAA,EAAAA,oBACE7E,EACA,KAAO,CACL,SAAU,CAAC8E,EAAQ,IAAA,OAAM,OAAApF,EAAAE,MAAA,YAAAF,EAAa,SAAS,GAAOoF,IACtD,UAAW,CAACA,EAAQ,IAAA,OAAM,OAAApF,EAAAE,MAAA,YAAAF,EAAa,UAAU,GAAOoF,IACxD,QAAS,CAACA,EAAQ,IAAA,OAAM,OAAApF,EAAAE,MAAA,YAAAF,EAAa,QAAQ,GAAOoF,IACpD,WAAY,CAACA,EAAQ,IAAA,OAAM,OAAApF,EAAAE,MAAA,YAAAF,EAAa,WAAW,GAAOoF,IAC1D,KAAM,IAAA,OAAM,OAAApF,EAAAE,EAAA,IAAA,YAAAF,EAAa,QACzB,KAAM,IAAA,OAAM,OAAAA,EAAAE,EAAA,IAAA,YAAAF,EAAa,gBACzB,OAAQ,IAAA,SAAM,OAAAqF,GAAArF,EAAAE,MAAA,YAAAF,EAAa,UAAb,YAAAqF,EAAsB,UACpC,QAAS,IAAA,SAAM,OAAAA,GAAArF,EAAAE,MAAA,YAAAF,EAAa,UAAb,YAAAqF,EAAsB,WACrC,UAAW,IAAA,SAAM,OAAAA,GAAArF,EAAAE,MAAA,YAAAF,EAAa,UAAb,YAAAqF,EAAsB,aACvC,QAAUC,GAAA,SAAkB,OAAAD,GAAArF,EAAAE,MAAA,YAAAF,EAAa,UAAb,YAAAqF,EAAsB,QAAQC,IAC1D,UAAW,CAACC,EAAeC,IAAA,OACzB,OAAAxF,EAAAE,MAAA,YAAAF,EAAa,eAAeuF,EAAOC,IACrC,UAAW,IAAMtF,EAAA,CAAU,GAE7B,CAACA,CAAS,CAAA,EAIVuF,GAAAA,IAAC,MAAA,CACC,IAAKxG,GACL,GAAAsB,EACA,UAAAC,EACA,MAAAC,EACC,GAAGwE,EAAA,CAAA,CAGV,EAEaS,EAAcC,EAAAA,WAAWvF,EAAoB,EAC1DsF,EAAY,YAAc"}

package/dist/react/index.d.ts

@@ -76,6 +76,8 @@ export interface Hotspot {
   content?: string;
   data?: PopoverData;
   className?: string;
+  /** Scene ID to navigate to when this hotspot is clicked. */
+  navigateTo?: string;
 }
 
 /**
@@ -93,6 +95,7 @@ export interface SpinEventData {
   activeImageY: number;
   amountX: number;
   amountY: number;
+  isGridMode: boolean;
 }
 
 /**
@@ -102,6 +105,7 @@ export interface LoadEventData {
   viewerId: string;
   imagesX: number;
   imagesY: number;
+  imagesGrid?: number;
 }
 
 /**
@@ -140,6 +144,8 @@ export interface CI360Config {
   filenameY?: string | null;
   imageListX?: string | string[] | null;
   imageListY?: string | string[] | null;
+  filenameGrid?: string | null;
+  imageListGrid?: string | string[] | string[][] | null;
   indexZeroBase?: number;
   amountX?: number;
   amountY?: number;
@@ -155,6 +161,8 @@ export interface CI360Config {
   dragSpeed?: number;
   dragReverse?: boolean;
   stopAtEdges?: boolean;
+  stopAtEdgesX?: boolean | null;
+  stopAtEdgesY?: boolean | null;
   inertia?: boolean;
   fullscreen?: boolean;
   /** @deprecated Use zoomMax instead. Will be ignored. */
@@ -201,6 +209,7 @@ export interface CI360Config {
   onHotspotOpen?: (hotspotId: string) => void;
   onHotspotClose?: (hotspotId: string) => void;
   onProductClick?: (productId: string, hotspotId: string) => void;
+  onNavigate?: (targetSceneId: string) => void;
   onError?: (data: ErrorEventData) => void;
 }
 
@@ -234,6 +243,7 @@ export interface CI360ViewerInstance {
   amountX: number;
   amountY: number;
   isZoomed: boolean;
+  isGridMode: boolean;
   viewerConfig: CI360Config;
 }
 

package/dist/react/index.js

@@ -1,16 +1,16 @@
-import { jsx as Ze } from "react/jsx-runtime";
-import { useState as ge, useRef as I, useId as Le, useEffect as Oe, useCallback as ke, forwardRef as Pe, useMemo as be, useImperativeHandle as Ae } from "react";
-let v = null;
-function Fe(d, t) {
-  const [C, f] = ge(!1), n = I(null), i = I(null), m = Le();
-  Oe(() => {
+import { jsx as ke } from "react/jsx-runtime";
+import { useState as Pe, useRef as I, useId as Xe, useEffect as Ye, useCallback as be, forwardRef as Ee, useMemo as Fe, useImperativeHandle as Ge } from "react";
+let w = null;
+function xe(d, t) {
+  const [C, f] = Pe(!1), a = I(null), i = I(null), m = Xe();
+  Ye(() => {
     if (typeof window > "u" || !d.current || t.autoInit === !1) return;
     let l = !0;
-    const a = d.current;
+    const n = d.current;
     return (async () => {
       try {
-        if (v || (v = (await import("./ci360-BJ_JCEiA.mjs")).default), !a || !l) return;
-        a.id || (a.id = `ci360-${m.replace(/:/g, "")}`);
+        if (w || (w = (await import("./ci360-BFobl9uu.mjs")).default), !n || !l) return;
+        n.id || (n.id = `ci360-${m.replace(/:/g, "")}`);
         const s = {
           ...t,
           onReady: (u) => {
@@ -18,17 +18,17 @@ function Fe(d, t) {
             l && (f(!0), (p = t.onReady) == null || p.call(t, u));
           }
         };
-        i.current = new v(), n.current = i.current.init(a, s);
+        i.current = new w(), a.current = i.current.init(n, s);
       } catch (s) {
         console.error("Failed to initialize CI360 viewer:", s);
       }
     })(), () => {
-      if (l = !1, n.current) {
+      if (l = !1, a.current) {
         try {
-          n.current.destroy();
+          a.current.destroy();
         } catch {
         }
-        n.current = null;
+        a.current = null;
       }
       i.current = null, f(!1);
     };
@@ -36,8 +36,10 @@ function Fe(d, t) {
     t.folder,
     t.filenameX,
     t.filenameY,
+    t.filenameGrid,
     t.imageListX,
     t.imageListY,
+    t.imageListGrid,
     t.amountX,
     t.amountY,
     t.hotspots,
@@ -47,170 +49,180 @@ function Fe(d, t) {
     t.cropGravity,
     m
   ]);
-  const y = ke(() => n.current, []);
+  const y = be(() => a.current, []);
   return {
-    viewer: n.current,
+    viewer: a.current,
     isReady: C,
     getViewer: y
   };
 }
-const Xe = (d, t) => {
+const Be = (d, t) => {
   const {
     // Container props
     id: C,
     className: f,
-    style: n,
+    style: a,
     // Image source
     folder: i,
     apiVersion: m,
     filenameX: y,
     filenameY: l,
-    imageListX: a,
-    imageListY: w,
-    indexZeroBase: s,
-    amountX: u,
-    amountY: p,
+    filenameGrid: n,
+    imageListX: v,
+    imageListY: s,
+    imageListGrid: u,
+    indexZeroBase: p,
+    amountX: R,
+    amountY: h,
     // Behavior
-    draggable: R,
-    swipeable: h,
-    keys: z,
+    draggable: z,
+    swipeable: g,
+    keys: L,
     keysReverse: V,
     autoplay: S,
     autoplayBehavior: T,
     playOnce: Z,
-    speed: g,
-    autoplayReverse: L,
-    dragSpeed: O,
-    dragReverse: k,
-    stopAtEdges: P,
-    inertia: b,
+    speed: A,
+    autoplayReverse: O,
+    dragSpeed: k,
+    dragReverse: P,
+    stopAtEdges: X,
+    stopAtEdgesX: Y,
+    stopAtEdgesY: b,
+    inertia: E,
     // UI Features
-    fullscreen: A,
-    magnifier: F,
-    pointerZoom: X,
-    pinchZoom: Y,
-    zoomMax: x,
-    zoomStep: B,
-    zoomControls: D,
-    zoomControlsPosition: E,
-    scrollHint: H,
-    bottomCircle: M,
-    bottomCircleOffset: G,
-    initialIconShown: N,
-    hide360Logo: j,
-    logoSrc: q,
-    imageInfo: $,
-    hints: J,
-    theme: K,
-    markerTheme: Q,
-    brandColor: U,
+    fullscreen: F,
+    magnifier: G,
+    pointerZoom: x,
+    pinchZoom: B,
+    zoomMax: D,
+    zoomStep: H,
+    zoomControls: M,
+    zoomControlsPosition: N,
+    scrollHint: j,
+    bottomCircle: q,
+    bottomCircleOffset: $,
+    initialIconShown: J,
+    hide360Logo: K,
+    logoSrc: Q,
+    imageInfo: U,
+    hints: W,
+    theme: _,
+    markerTheme: ee,
+    brandColor: oe,
     // Cloudimage CDN
-    ciToken: W,
-    ciFilters: _,
-    ciTransformation: ee,
-    cropAspectRatio: oe,
-    cropGravity: te,
+    ciToken: te,
+    ciFilters: re,
+    ciTransformation: ae,
+    cropAspectRatio: ne,
+    cropGravity: se,
     // Loading
-    lazyload: re,
+    lazyload: ie,
     // Hotspots
-    hotspots: ne,
-    hotspotTrigger: ae,
-    hotspotTimelineOnClick: se,
+    hotspots: le,
+    hotspotTrigger: me,
+    hotspotTimelineOnClick: ue,
     // Container
-    aspectRatio: ie,
+    aspectRatio: pe,
     // Event callbacks
-    onReady: le,
-    onLoad: me,
-    onSpin: ue,
-    onAutoplayStart: pe,
-    onAutoplayStop: ce,
-    onFullscreenOpen: de,
-    onFullscreenClose: fe,
-    onZoomIn: ye,
-    onZoomOut: Ce,
-    onDragStart: we,
-    onDragEnd: ve,
-    onHotspotOpen: Ie,
-    onHotspotClose: Re,
-    onProductClick: he,
-    onError: ze,
-    ...Se
-  } = d, Ve = I(null), Te = be(
+    onReady: ce,
+    onLoad: de,
+    onSpin: fe,
+    onAutoplayStart: ye,
+    onAutoplayStop: Ce,
+    onFullscreenOpen: ve,
+    onFullscreenClose: we,
+    onZoomIn: Ie,
+    onZoomOut: Re,
+    onDragStart: he,
+    onDragEnd: ze,
+    onHotspotOpen: ge,
+    onHotspotClose: Le,
+    onProductClick: Ve,
+    onNavigate: Se,
+    onError: Te,
+    ...Ae
+  } = d, Ze = I(null), Oe = Fe(
     () => ({
       // Image source
       folder: i,
       apiVersion: m,
       filenameX: y,
       filenameY: l,
-      imageListX: a,
-      imageListY: w,
-      indexZeroBase: s,
-      amountX: u,
-      amountY: p,
+      filenameGrid: n,
+      imageListX: v,
+      imageListY: s,
+      imageListGrid: u,
+      indexZeroBase: p,
+      amountX: R,
+      amountY: h,
       // Behavior
-      draggable: R,
-      swipeable: h,
-      keys: z,
+      draggable: z,
+      swipeable: g,
+      keys: L,
       keysReverse: V,
       autoplay: S,
       autoplayBehavior: T,
       playOnce: Z,
-      speed: g,
-      autoplayReverse: L,
-      dragSpeed: O,
-      dragReverse: k,
-      stopAtEdges: P,
-      inertia: b,
+      speed: A,
+      autoplayReverse: O,
+      dragSpeed: k,
+      dragReverse: P,
+      stopAtEdges: X,
+      stopAtEdgesX: Y,
+      stopAtEdgesY: b,
+      inertia: E,
       // UI Features
-      fullscreen: A,
-      magnifier: F,
-      pointerZoom: X,
-      pinchZoom: Y,
-      zoomMax: x,
-      zoomStep: B,
-      zoomControls: D,
-      zoomControlsPosition: E,
-      scrollHint: H,
-      bottomCircle: M,
-      bottomCircleOffset: G,
-      initialIconShown: N,
-      hide360Logo: j,
-      logoSrc: q,
-      imageInfo: $,
-      hints: J,
-      theme: K,
-      markerTheme: Q,
-      brandColor: U,
+      fullscreen: F,
+      magnifier: G,
+      pointerZoom: x,
+      pinchZoom: B,
+      zoomMax: D,
+      zoomStep: H,
+      zoomControls: M,
+      zoomControlsPosition: N,
+      scrollHint: j,
+      bottomCircle: q,
+      bottomCircleOffset: $,
+      initialIconShown: J,
+      hide360Logo: K,
+      logoSrc: Q,
+      imageInfo: U,
+      hints: W,
+      theme: _,
+      markerTheme: ee,
+      brandColor: oe,
       // Cloudimage CDN
-      ciToken: W,
-      ciFilters: _,
-      ciTransformation: ee,
-      cropAspectRatio: oe,
-      cropGravity: te,
+      ciToken: te,
+      ciFilters: re,
+      ciTransformation: ae,
+      cropAspectRatio: ne,
+      cropGravity: se,
       // Loading
-      lazyload: re,
+      lazyload: ie,
       // Hotspots
-      hotspots: ne,
-      hotspotTrigger: ae,
-      hotspotTimelineOnClick: se,
+      hotspots: le,
+      hotspotTrigger: me,
+      hotspotTimelineOnClick: ue,
       // Container
-      aspectRatio: ie,
+      aspectRatio: pe,
       // Event callbacks
-      onReady: le,
-      onLoad: me,
-      onSpin: ue,
-      onAutoplayStart: pe,
-      onAutoplayStop: ce,
-      onFullscreenOpen: de,
-      onFullscreenClose: fe,
-      onZoomIn: ye,
-      onZoomOut: Ce,
-      onDragStart: we,
-      onDragEnd: ve,
-      onHotspotOpen: Ie,
-      onHotspotClose: Re,
-      onProductClick: he,
-      onError: ze
+      onReady: ce,
+      onLoad: de,
+      onSpin: fe,
+      onAutoplayStart: ye,
+      onAutoplayStop: Ce,
+      onFullscreenOpen: ve,
+      onFullscreenClose: we,
+      onZoomIn: Ie,
+      onZoomOut: Re,
+      onDragStart: he,
+      onDragEnd: ze,
+      onHotspotOpen: ge,
+      onHotspotClose: Le,
+      onProductClick: Ve,
+      onNavigate: Se,
+      onError: Te
     }),
     [
       // Image source
@@ -218,37 +230,37 @@ const Xe = (d, t) => {
       m,
       y,
       l,
-      a,
-      w,
+      n,
+      v,
       s,
       u,
       p,
-      // Behavior
       R,
       h,
+      // Behavior
       z,
+      g,
+      L,
       V,
       S,
       T,
       Z,
-      g,
-      L,
+      A,
       O,
       k,
       P,
+      X,
+      Y,
       b,
+      E,
       // UI Features
-      A,
       F,
-      X,
-      Y,
+      G,
       x,
       B,
       D,
-      E,
       H,
       M,
-      G,
       N,
       j,
       q,
@@ -257,39 +269,44 @@ const Xe = (d, t) => {
       K,
       Q,
       U,
-      // Cloudimage CDN
       W,
       _,
       ee,
       oe,
+      // Cloudimage CDN
       te,
-      // Loading
       re,
-      // Hotspots
-      ne,
       ae,
+      ne,
       se,
-      // Container
+      // Loading
       ie,
-      // Event callbacks
+      // Hotspots
       le,
       me,
       ue,
+      // Container
       pe,
+      // Event callbacks
       ce,
       de,
       fe,
       ye,
       Ce,
-      we,
       ve,
+      we,
       Ie,
       Re,
       he,
-      ze
+      ze,
+      ge,
+      Le,
+      Ve,
+      Se,
+      Te
     ]
-  ), { getViewer: r } = Fe(Ve, Te);
-  return Ae(
+  ), { getViewer: r } = xe(Ze, Oe);
+  return Ge(
     t,
     () => ({
       moveLeft: (e = 1) => {
@@ -339,22 +356,22 @@ const Xe = (d, t) => {
       getViewer: () => r()
     }),
     [r]
-  ), /* @__PURE__ */ Ze(
+  ), /* @__PURE__ */ ke(
     "div",
     {
-      ref: Ve,
+      ref: Ze,
       id: C,
       className: f,
-      style: n,
-      ...Se
+      style: a,
+      ...Ae
     }
   );
-}, Ye = Pe(Xe);
-Ye.displayName = "CI360Viewer";
+}, De = Ee(Be);
+De.displayName = "CI360Viewer";
 export {
-  Ye as CI360Viewer,
-  Ye as CI360ViewerDefault,
-  Fe as useCI360,
-  Fe as useCI360Default
+  De as CI360Viewer,
+  De as CI360ViewerDefault,
+  xe as useCI360,
+  xe as useCI360Default
 };
 //# sourceMappingURL=index.js.map