js-cloudimage-360-view 4.1.1 → 4.1.3

package/dist/react/index.cjs

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

package/dist/react/index.js

@@ -1,21 +1,21 @@
-import { jsx as ce } from "react/jsx-runtime";
-import { useState as de, useRef as I, useId as pe, useEffect as fe, forwardRef as ye, useMemo as Ie, useImperativeHandle as Ce } from "react";
+import { jsx as pe } from "react/jsx-runtime";
+import { useState as de, useRef as I, useId as fe, useEffect as ye, forwardRef as Ie, useMemo as Ce, useImperativeHandle as Re } from "react";
 let y = null;
-function Re(c, t) {
-  const [p, d] = de(!1), n = I(null), s = I(null), i = pe();
-  return fe(() => {
+function he(c, t) {
+  const [d, p] = de(!1), n = I(null), s = I(null), i = fe();
+  return ye(() => {
     if (typeof window > "u" || !c.current || t.autoInit === !1) return;
     let l = !0;
     const a = c.current;
     return (async () => {
       try {
-        if (y || (y = (await import("./ci360-CbNlMnNZ.mjs")).default), !a || !l) return;
+        if (y || (y = (await import("./ci360-CJCqgguJ.mjs")).default), !a || !l) return;
         a.id || (a.id = `ci360-${i.replace(/:/g, "")}`);
         const r = {
           ...t,
           onReady: (u) => {
             var m;
-            l && (d(!0), (m = t.onReady) == null || m.call(t, u));
+            l && (p(!0), (m = t.onReady) == null || m.call(t, u));
           }
         };
         s.current = new y(), n.current = s.current.init(a, r);
@@ -30,7 +30,7 @@ function Re(c, t) {
         }
         n.current = null;
       }
-      s.current = null, d(!1);
+      s.current = null, p(!1);
     };
   }, [
     t.folder,
@@ -44,14 +44,14 @@ function Re(c, t) {
     i
   ]), {
     viewer: n.current,
-    isReady: p
+    isReady: d
   };
 }
-const he = (c, t) => {
+const ge = (c, t) => {
   const {
     // Container props
-    id: p,
-    className: d,
+    id: d,
+    className: p,
     style: n,
     // Image source
     folder: s,
@@ -99,21 +99,23 @@ const he = (c, t) => {
     // Hotspots
     hotspots: G,
     hotspotTimelineOnClick: J,
+    // Container
+    aspectRatio: K,
     // Event callbacks
-    onReady: K,
-    onLoad: Q,
-    onSpin: U,
-    onAutoplayStart: W,
-    onAutoplayStop: _,
-    onFullscreenOpen: ee,
-    onFullscreenClose: te,
-    onZoomIn: oe,
-    onZoomOut: ne,
-    onDragStart: ae,
-    onDragEnd: re,
-    onError: se,
-    ...ie
-  } = c, le = I(null), ue = Ie(
+    onReady: Q,
+    onLoad: U,
+    onSpin: W,
+    onAutoplayStart: _,
+    onAutoplayStop: ee,
+    onFullscreenOpen: te,
+    onFullscreenClose: oe,
+    onZoomIn: ne,
+    onZoomOut: ae,
+    onDragStart: re,
+    onDragEnd: se,
+    onError: le,
+    ...ue
+  } = c, ie = I(null), me = Ce(
     () => ({
       // Image source
       folder: s,
@@ -161,19 +163,21 @@ const he = (c, t) => {
       // Hotspots
       hotspots: G,
       hotspotTimelineOnClick: J,
+      // Container
+      aspectRatio: K,
       // Event callbacks
-      onReady: K,
-      onLoad: Q,
-      onSpin: U,
-      onAutoplayStart: W,
-      onAutoplayStop: _,
-      onFullscreenOpen: ee,
-      onFullscreenClose: te,
-      onZoomIn: oe,
-      onZoomOut: ne,
-      onDragStart: ae,
-      onDragEnd: re,
-      onError: se
+      onReady: Q,
+      onLoad: U,
+      onSpin: W,
+      onAutoplayStart: _,
+      onAutoplayStop: ee,
+      onFullscreenOpen: te,
+      onFullscreenClose: oe,
+      onZoomIn: ne,
+      onZoomOut: ae,
+      onDragStart: re,
+      onDragEnd: se,
+      onError: le
     }),
     [
       // Image source
@@ -222,8 +226,9 @@ const he = (c, t) => {
       // Hotspots
       G,
       J,
-      // Event callbacks
+      // Container
       K,
+      // Event callbacks
       Q,
       U,
       W,
@@ -234,10 +239,11 @@ const he = (c, t) => {
       ne,
       ae,
       re,
-      se
+      se,
+      le
     ]
-  ), { viewer: e } = Re(le, ue);
-  return Ce(
+  ), { viewer: e } = he(ie, me);
+  return Re(
     t,
     () => ({
       moveLeft: (o = 1) => e == null ? void 0 : e.moveLeft(!1, o),
@@ -248,26 +254,26 @@ const he = (c, t) => {
       stop: () => e == null ? void 0 : e.stopAutoplay(),
       zoomIn: () => e == null ? void 0 : e.toggleZoom(),
       zoomOut: () => e == null ? void 0 : e.removeZoom(),
-      goToFrame: (o, me) => e == null ? void 0 : e.animateToFrame(o, me),
+      goToFrame: (o, ce) => e == null ? void 0 : e.animateToFrame(o, ce),
       getViewer: () => e
     }),
     [e]
-  ), /* @__PURE__ */ ce(
+  ), /* @__PURE__ */ pe(
     "div",
     {
-      ref: le,
-      id: p,
-      className: d,
+      ref: ie,
+      id: d,
+      className: p,
       style: n,
-      ...ie
+      ...ue
     }
   );
-}, ge = ye(he);
-ge.displayName = "CI360Viewer";
+}, Le = Ie(ge);
+Le.displayName = "CI360Viewer";
 export {
-  ge as CI360Viewer,
-  ge as CI360ViewerDefault,
-  Re as useCI360,
-  Re as useCI360Default
+  Le as CI360Viewer,
+  Le as CI360ViewerDefault,
+  he as useCI360,
+  he 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, 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.theme,\n    uniqueId,\n  ]);\n\n  return {\n    viewer: viewerRef.current,\n    isReady,\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    hotspotTimelineOnClick,\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      hotspotTimelineOnClick,\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      hotspotTimelineOnClick,\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 { viewer } = useCI360(containerRef, config);\n\n  // Expose imperative methods via ref\n  useImperativeHandle(\n    ref,\n    () => ({\n      moveLeft: (steps = 1) => viewer?.moveLeft(false, steps),\n      moveRight: (steps = 1) => viewer?.moveRight(false, steps),\n      moveTop: (steps = 1) => viewer?.moveTop(false, steps),\n      moveBottom: (steps = 1) => viewer?.moveBottom(false, steps),\n      play: () => viewer?.play(),\n      stop: () => viewer?.stopAutoplay(),\n      zoomIn: () => viewer?.toggleZoom(),\n      zoomOut: () => viewer?.removeZoom(),\n      goToFrame: (frame: number, hotspotId?: string) =>\n        viewer?.animateToFrame(frame, hotspotId),\n      getViewer: () => viewer,\n    }),\n    [viewer]\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","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","hotspotTimelineOnClick","onReady","onLoad","onSpin","onAutoplayStart","onAutoplayStop","onFullscreenOpen","onFullscreenClose","onZoomIn","onZoomOut","onDragStart","onDragEnd","onError","restProps","useMemo","viewer","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, 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.theme,\n    uniqueId,\n  ]);\n\n  return {\n    viewer: viewerRef.current,\n    isReady,\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    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      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      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 { viewer } = useCI360(containerRef, config);\n\n  // Expose imperative methods via ref\n  useImperativeHandle(\n    ref,\n    () => ({\n      moveLeft: (steps = 1) => viewer?.moveLeft(false, steps),\n      moveRight: (steps = 1) => viewer?.moveRight(false, steps),\n      moveTop: (steps = 1) => viewer?.moveTop(false, steps),\n      moveBottom: (steps = 1) => viewer?.moveBottom(false, steps),\n      play: () => viewer?.play(),\n      stop: () => viewer?.stopAutoplay(),\n      zoomIn: () => viewer?.toggleZoom(),\n      zoomOut: () => viewer?.removeZoom(),\n      goToFrame: (frame: number, hotspotId?: string) =>\n        viewer?.animateToFrame(frame, hotspotId),\n      getViewer: () => viewer,\n    }),\n    [viewer]\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","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","hotspotTimelineOnClick","aspectRatio","onReady","onLoad","onSpin","onAutoplayStart","onAutoplayStop","onFullscreenOpen","onFullscreenClose","onZoomIn","onZoomOut","onDragStart","onDragEnd","onError","restProps","useMemo","viewer","useImperativeHandle","steps","frame","hotspotId","jsx","CI360Viewer","forwardRef"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "main": "dist/js-cloudimage-360-view.min.js",
   "types": "src/types/ci360.d.ts",
   "files": [
@@ -44,7 +44,7 @@
     "360 product view"
   ],
   "scripts": {
-    "dev": "vite serve demo --host",
+    "dev": "vite serve demo --host --port 5175",
     "dev:react": "npm --prefix demo/react-demo run dev",
     "clean:build": "rm -rf dist",
     "build:bundle": "npm run clean:build && vite build",