js-cloudimage-360-view 4.3.0 → 4.3.2

package/dist/react/index.cjs

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

package/dist/react/index.js

@@ -9,7 +9,7 @@ function he(p, t) {
     const a = p.current;
     return (async () => {
       try {
-        if (v || (v = (await import("./ci360-85fPJbOD.mjs")).default), !a || !l) return;
+        if (v || (v = (await import("./ci360-CX3RAC_t.mjs")).default), !a || !l) return;
         a.id || (a.id = `ci360-${u.replace(/:/g, "")}`);
         const i = {
           ...t,

package/dist/react/style.css

@@ -1 +1 @@
-:root{--ci360-button-bg: rgba(255, 255, 255, .9);--ci360-button-bg-hover: rgba(255, 255, 255, 1);--ci360-button-size: 40px;--ci360-button-border-radius: 6px;--ci360-button-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ci360-icon-color: #505050;--ci360-icon-color-hover: #333333;--ci360-icon-size: 20px;--ci360-initial-icon-bg: rgba(255, 255, 255, .9);--ci360-initial-icon-color: #505050;--ci360-initial-icon-size: 80px;--ci360-initial-icon-shadow: 0 4px 20px rgba(0, 0, 0, .15);--ci360-spinner-color: rgba(0, 0, 0, .2);--ci360-spinner-accent: #505050;--ci360-spinner-size: 30px;--ci360-fullscreen-bg: #ffffff;--ci360-magnifier-size: 250px;--ci360-magnifier-border: 2px solid rgba(0, 0, 0, .2);--ci360-magnifier-shadow: 0 8px 16px rgba(0, 0, 0, .3);--ci360-focus-color: #0066cc;--ci360-overlay-bg: rgba(255, 255, 255, 1);--ci360-hotspot-color: #00aaff;--ci360-hotspot-border: 2px solid #fff;--ci360-hotspot-size: 18px;--ci360-popper-bg: rgba(255, 255, 255, .95);--ci360-popper-color: #333;--ci360-popper-shadow: 0px 4px 16px rgba(0, 0, 0, .15);--ci360-popper-border-radius: 8px;--ci360-hints-bg: rgba(255, 255, 255, .9);--ci360-hints-color: #333333;--ci360-hints-font-size: 13px;--ci360-hints-border-radius: 20px;--ci360-hints-shadow: 0 2px 12px rgba(0, 0, 0, .1);--ci360-circle-color: #888888;--ci360-timeline-height: 6px;--ci360-timeline-track-bg: rgba(0, 0, 0, .12);--ci360-timeline-dot-size: 18px;--ci360-timeline-dot-color: var(--ci360-hotspot-color);--ci360-timeline-dot-border: 2px solid #fff;--ci360-timeline-indicator-size: 12px;--ci360-timeline-indicator-color: #333333;--ci360-timeline-tooltip-bg: rgba(255, 255, 255, .95);--ci360-timeline-tooltip-color: #333333}.ci360-theme-dark{--ci360-button-bg: rgba(40, 40, 45, .9);--ci360-button-bg-hover: rgba(55, 55, 60, .95);--ci360-button-shadow: 0 2px 8px rgba(0, 0, 0, .4);--ci360-icon-color: #e0e0e0;--ci360-icon-color-hover: #ffffff;--ci360-initial-icon-bg: rgba(40, 40, 45, .9);--ci360-initial-icon-color: #f5f5f5;--ci360-initial-icon-shadow: 0 4px 20px rgba(0, 0, 0, .4);--ci360-spinner-color: rgba(255, 255, 255, .2);--ci360-spinner-accent: #e0e0e0;--ci360-fullscreen-bg: #1a1a1f;--ci360-overlay-bg: rgba(26, 26, 31, 1);--ci360-magnifier-border: 2px solid rgba(255, 255, 255, .2);--ci360-magnifier-shadow: 0 8px 16px rgba(0, 0, 0, .5);--ci360-popper-bg: rgba(40, 40, 45, .95);--ci360-popper-color: #e0e0e0;--ci360-popper-shadow: 0px 4px 16px rgba(0, 0, 0, .4);--ci360-hints-bg: rgba(40, 40, 45, .9);--ci360-hints-color: #e0e0e0;--ci360-hints-shadow: 0 2px 12px rgba(0, 0, 0, .3);--ci360-circle-color: #b0b0b0;--ci360-timeline-track-bg: rgba(255, 255, 255, .15);--ci360-timeline-dot-border: 2px solid rgba(255, 255, 255, .9);--ci360-timeline-indicator-color: #e0e0e0;--ci360-timeline-tooltip-bg: rgba(40, 40, 45, .95);--ci360-timeline-tooltip-color: #e0e0e0}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cloudimage-360{width:100%;position:relative}.cloudimage-360-inner-box{width:100%;height:100%;position:relative}.cloudimage-360-icons-container{position:absolute;display:flex;top:15px;right:10px;height:100%;flex-direction:column;align-items:center;z-index:100;gap:8px}.cloudimage-360-transition-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ci360-overlay-bg);opacity:0;transition:all 1s ease-out;z-index:10}.cloudimage-360-button{width:var(--ci360-button-size);height:var(--ci360-button-size);cursor:pointer;transition:transform .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out;display:flex;align-items:center;justify-content:center;border-radius:var(--ci360-button-border-radius);border:none;background-color:var(--ci360-button-bg);box-shadow:var(--ci360-button-shadow);padding:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cloudimage-360-button:hover{transform:scale(1.05);background-color:var(--ci360-button-bg-hover)}.cloudimage-360-button:focus{outline:none}.cloudimage-360-button:focus-visible{outline:2px solid var(--ci360-focus-color);outline-offset:2px}.cloudimage-360-button svg{width:var(--ci360-icon-size);height:var(--ci360-icon-size);stroke:var(--ci360-icon-color);transition:stroke .15s ease-out}.cloudimage-360-button:hover svg{stroke:var(--ci360-icon-color-hover)}.cloudimage-initial-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--ci360-initial-icon-size);height:var(--ci360-initial-icon-size);border-radius:50%;background-color:var(--ci360-initial-icon-bg);box-shadow:var(--ci360-initial-icon-shadow);transition:all .3s ease;color:var(--ci360-initial-icon-color);display:flex;align-items:center;justify-content:center;z-index:2;-webkit-user-select:none;-moz-user-select:none;user-select:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cloudimage-initial-icon svg{width:70%;height:70%;color:var(--ci360-initial-icon-color);fill:var(--ci360-initial-icon-color);stroke:var(--ci360-initial-icon-color)}.cloudimage-initial-icon svg path{stroke:var(--ci360-initial-icon-color)}.cloudimage-initial-icon svg text{fill:var(--ci360-initial-icon-color)}.cloudimage-initial-icon:hover{transform:translate(-50%,-50%) scale(1.08)}.cloudimage-loading-spinner{width:var(--ci360-spinner-size);height:var(--ci360-spinner-size);transform:translate(-50%,-50%);border:3px solid var(--ci360-spinner-color);position:absolute;top:15px;left:15px;border-bottom-color:var(--ci360-spinner-accent);border-radius:50%;display:inline-block;box-sizing:border-box;opacity:0;animation:rotation .7s linear infinite}.cloudimage-360-view-360-circle{position:absolute;left:0;bottom:0;width:100%;height:auto;margin:auto;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:.2s all;z-index:2;color:var(--ci360-circle-color)}.cloudimage-360-view-360-circle svg{display:block;width:100%;height:auto}.cloudimage-360-fullscreen-modal{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:999;background-color:var(--ci360-fullscreen-bg)}.cloudimage-360-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cloudimage-360-hints-overlay{position:absolute;bottom:0;left:0;width:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;z-index:50;pointer-events:none;opacity:0;transition:opacity .3s ease}.cloudimage-360-hints-overlay.visible{opacity:1}.cloudimage-360-hints-overlay.hiding{opacity:0}.cloudimage-360-hints-container{display:flex;flex-direction:row;gap:20px;padding:10px 20px;background:var(--ci360-hints-bg);border-radius:var(--ci360-hints-border-radius);box-shadow:var(--ci360-hints-shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cloudimage-360-hint-item{display:flex;align-items:center;gap:8px;color:var(--ci360-hints-color);font-size:var(--ci360-hints-font-size);font-family:system-ui,-apple-system,sans-serif;white-space:nowrap}.cloudimage-360-hint-item svg{width:16px;height:16px;flex-shrink:0;stroke:var(--ci360-hints-color)}.cloudimage-360-hint-item span{opacity:.9}@media (max-width: 480px){.cloudimage-360-hints-container{flex-direction:column;gap:8px;padding:12px 16px;border-radius:12px}.cloudimage-360-hint-item{font-size:12px}.cloudimage-360-hint-item svg{width:14px;height:14px}.cloudimage-360-initial-icon{width:calc(var(--ci360-initial-icon-size) * .8);height:calc(var(--ci360-initial-icon-size) * .8)}}.cloudimage-360-img-magnifier-glass{background-color:#fff;background-image:radial-gradient(circle at center,#fffc,#f0f0f0e6);background-repeat:no-repeat;position:absolute;border:var(--ci360-magnifier-border);border-radius:50%;line-height:200px;text-align:center;z-index:1000;width:var(--ci360-magnifier-size);height:var(--ci360-magnifier-size);top:-75px;right:-85px;box-shadow:var(--ci360-magnifier-shadow);transition:box-shadow .2s ease;overflow:hidden;pointer-events:none}.cloudimage-360-hotspot-timeline{width:100%;max-width:500px;margin:16px auto 8px;padding:12px 20px;opacity:0;transition:opacity .3s ease;pointer-events:none}.cloudimage-360-hotspot-timeline.visible{opacity:1;pointer-events:auto}.cloudimage-360-hotspot-timeline-track{position:relative;width:100%;height:var(--ci360-timeline-height);background:var(--ci360-timeline-track-bg);border-radius:calc(var(--ci360-timeline-height) / 2)}.cloudimage-360-hotspot-timeline-indicator{position:absolute;top:50%;left:0;width:var(--ci360-timeline-indicator-size);height:var(--ci360-timeline-indicator-size);background:var(--ci360-timeline-indicator-color);border-radius:50%;transform:translate(-50%,-50%);transition:left .1s ease-out;pointer-events:none;box-shadow:0 2px 4px #0003}.cloudimage-360-hotspot-timeline-dot{position:absolute;top:50%;width:var(--ci360-timeline-dot-size);height:var(--ci360-timeline-dot-size);background:var(--ci360-timeline-dot-color);border:var(--ci360-timeline-dot-border);border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 2px 6px #00000040;padding:0;font:inherit;outline:none}.cloudimage-360-hotspot-timeline-dot:hover{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 3px 10px #0000004d}.cloudimage-360-hotspot-timeline-dot:focus-visible{outline:2px solid var(--ci360-focus-color);outline-offset:2px}.cloudimage-360-hotspot-timeline-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:var(--ci360-timeline-tooltip-bg);color:var(--ci360-timeline-tooltip-color);padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none;box-shadow:0 2px 8px #00000026;z-index:10}.cloudimage-360-hotspot-timeline-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--ci360-timeline-tooltip-bg)}.cloudimage-360-hotspot-timeline-tooltip.visible{opacity:1;visibility:visible}@media (max-width: 480px){.cloudimage-360-hotspot-timeline{max-width:none;padding:10px 16px;margin:12px auto 6px}}.cloudimage-360-fullscreen-modal .cloudimage-360-hotspot-timeline{position:absolute;bottom:0;left:0;right:0;max-width:none;margin:0;padding:24px 40px 20px;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 60%,transparent 100%);z-index:200}.cloudimage-360-fullscreen-modal .cloudimage-360-hotspot-timeline-track{max-width:600px;margin:0 auto;background:#ffffff4d}.cloudimage-360-fullscreen-modal .cloudimage-360-hotspot-timeline-indicator{background:#fff;box-shadow:0 2px 6px #0006}.cloudimage-360-fullscreen-modal .cloudimage-360-hotspot-timeline-dot{border-color:#fff;box-shadow:0 2px 8px #0006}.cloudimage-360-fullscreen-modal .cloudimage-360-hotspot-timeline-tooltip{bottom:calc(100% + 20px)}.cloudimage-360-fullscreen-modal .cloudimage-360-hints-overlay{padding-bottom:42px}.cloudimage-360-hotspot-container{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:20}.cloudimage-360-popper{opacity:1;transition:opacity .2s ease-in-out}.cloudimage-360-hotspot{display:inline-block;position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-50%,-50%);background:var(--ci360-hotspot-color);border:var(--ci360-hotspot-border);border-radius:50%;height:var(--ci360-hotspot-size);width:var(--ci360-hotspot-size);box-shadow:0 0 #0af9,0 2px 6px #0003;opacity:0;animation:pulse 2s infinite;transition:transform .2s ease,box-shadow .2s ease;padding:0;cursor:pointer;font:inherit;outline:none}.cloudimage-360-hotspot:focus-visible{outline:2px solid var(--ci360-focus-color, #0066cc);outline-offset:2px;animation:none}.cloudimage-360-hotspot.visible{opacity:1}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #0af9,0 0 0 10px #0af6,0 0 0 20px #0af3}50%{transform:scale(1.1);box-shadow:0 0 0 10px #0af0,0 0 0 20px #00aaff1a,0 0 0 30px #0af0}to{transform:scale(1);box-shadow:0 0 #0af0,0 0 0 10px #0af0,0 0 0 20px #0af0}}.cloudimage-360-hotspot:hover{transform:scale(1.2);box-shadow:0 0 0 5px #00aaff80,0 4px 12px #0000004d}.cloudimage-360-popper{background-color:var(--ci360-popper-bg);color:var(--ci360-popper-color);padding:10px 15px;border-radius:var(--ci360-popper-border-radius);box-shadow:var(--ci360-popper-shadow);font-size:14px;max-width:220px;z-index:9999;text-align:center;transition:opacity .2s ease,translate .2s ease;opacity:0;translate:0 -10px}.cloudimage-360-popper[data-show]{opacity:1;translate:0}
+:root{--ci360-button-bg: rgba(255, 255, 255, .9);--ci360-button-bg-hover: rgba(255, 255, 255, 1);--ci360-button-size: 40px;--ci360-button-border-radius: 6px;--ci360-button-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ci360-icon-color: #505050;--ci360-icon-color-hover: #333333;--ci360-icon-size: 20px;--ci360-initial-icon-bg: transparent;--ci360-initial-icon-color: #ffffff;--ci360-initial-icon-size: 100px;--ci360-initial-icon-shadow: none;--ci360-spinner-color: rgba(0, 0, 0, .2);--ci360-spinner-accent: #505050;--ci360-spinner-size: 30px;--ci360-fullscreen-bg: #ffffff;--ci360-magnifier-size: 250px;--ci360-magnifier-border: 2px solid rgba(0, 0, 0, .2);--ci360-magnifier-shadow: 0 8px 16px rgba(0, 0, 0, .3);--ci360-focus-color: #0066cc;--ci360-overlay-bg: rgba(255, 255, 255, 1);--ci360-hotspot-color: #00aaff;--ci360-hotspot-border: 2px solid #fff;--ci360-hotspot-size: 18px;--ci360-popper-bg: rgba(255, 255, 255, .95);--ci360-popper-color: #333;--ci360-popper-shadow: 0px 4px 16px rgba(0, 0, 0, .15);--ci360-popper-border-radius: 8px;--ci360-hints-bg: rgba(255, 255, 255, .9);--ci360-hints-color: #333333;--ci360-hints-font-size: 13px;--ci360-hints-border-radius: 20px;--ci360-hints-shadow: 0 2px 12px rgba(0, 0, 0, .1);--ci360-circle-color: #888888;--ci360-timeline-height: 6px;--ci360-timeline-track-bg: rgba(0, 0, 0, .12);--ci360-timeline-dot-size: 18px;--ci360-timeline-dot-color: var(--ci360-hotspot-color);--ci360-timeline-dot-border: 2px solid #fff;--ci360-timeline-indicator-size: 12px;--ci360-timeline-indicator-color: #333333;--ci360-timeline-tooltip-bg: rgba(255, 255, 255, .95);--ci360-timeline-tooltip-color: #333333}.ci360-theme-dark{--ci360-button-bg: rgba(40, 40, 45, .9);--ci360-button-bg-hover: rgba(55, 55, 60, .95);--ci360-button-shadow: 0 2px 8px rgba(0, 0, 0, .4);--ci360-icon-color: #e0e0e0;--ci360-icon-color-hover: #ffffff;--ci360-initial-icon-bg: transparent;--ci360-initial-icon-color: #ffffff;--ci360-initial-icon-shadow: none;--ci360-spinner-color: rgba(255, 255, 255, .2);--ci360-spinner-accent: #e0e0e0;--ci360-fullscreen-bg: #1a1a1f;--ci360-overlay-bg: rgba(26, 26, 31, 1);--ci360-magnifier-border: 2px solid rgba(255, 255, 255, .2);--ci360-magnifier-shadow: 0 8px 16px rgba(0, 0, 0, .5);--ci360-popper-bg: rgba(40, 40, 45, .95);--ci360-popper-color: #e0e0e0;--ci360-popper-shadow: 0px 4px 16px rgba(0, 0, 0, .4);--ci360-hints-bg: rgba(40, 40, 45, .9);--ci360-hints-color: #e0e0e0;--ci360-hints-shadow: 0 2px 12px rgba(0, 0, 0, .3);--ci360-circle-color: #b0b0b0;--ci360-timeline-track-bg: rgba(255, 255, 255, .15);--ci360-timeline-dot-border: 2px solid rgba(255, 255, 255, .9);--ci360-timeline-indicator-color: #e0e0e0;--ci360-timeline-tooltip-bg: rgba(40, 40, 45, .95);--ci360-timeline-tooltip-color: #e0e0e0;--ci360-loader-bg: rgba(40, 40, 45, .9);--ci360-loader-color: #e0e0e0;--ci360-loader-shadow: 0 4px 20px rgba(0, 0, 0, .4)}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cloudimage-360{width:100%;position:relative}.cloudimage-360-inner-box{width:100%;height:100%;position:relative}.cloudimage-360-icons-container{position:absolute;display:flex;top:15px;right:10px;height:100%;flex-direction:column;align-items:center;z-index:100;gap:8px}.cloudimage-360-transition-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ci360-overlay-bg);opacity:0;transition:all 1s ease-out;z-index:10}.cloudimage-360-button{width:var(--ci360-button-size);height:var(--ci360-button-size);cursor:pointer;transition:transform .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out;display:flex;align-items:center;justify-content:center;border-radius:var(--ci360-button-border-radius);border:none;background-color:var(--ci360-button-bg);box-shadow:var(--ci360-button-shadow);padding:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cloudimage-360-button:hover{transform:scale(1.05);background-color:var(--ci360-button-bg-hover)}.cloudimage-360-button:focus{outline:none}.cloudimage-360-button:focus-visible{outline:2px solid var(--ci360-focus-color);outline-offset:2px}.cloudimage-360-button svg{width:var(--ci360-icon-size);height:var(--ci360-icon-size);stroke:var(--ci360-icon-color);transition:stroke .15s ease-out}.cloudimage-360-button:hover svg{stroke:var(--ci360-icon-color-hover)}.cloudimage-initial-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--ci360-initial-icon-size);aspect-ratio:150 / 87;border-radius:var(--ci360-initial-icon-border-radius, 0);background-color:var(--ci360-initial-icon-bg);box-shadow:var(--ci360-initial-icon-shadow);transition:all .3s ease;color:var(--ci360-initial-icon-color);display:flex;align-items:center;justify-content:center;z-index:2;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cloudimage-initial-icon svg{width:100%;height:auto;color:var(--ci360-initial-icon-color);fill:var(--ci360-initial-icon-color);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.cloudimage-initial-icon:hover{transform:translate(-50%,-50%) scale(1.08)}.cloudimage-360-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--ci360-loader-size, 70px);height:var(--ci360-loader-size, 70px);border-radius:50%;background-color:var(--ci360-loader-bg, rgba(255, 255, 255, .9));box-shadow:var(--ci360-loader-shadow, 0 4px 20px rgba(0, 0, 0, .15));transition:all .3s ease;color:var(--ci360-loader-color, #505050);display:flex;align-items:center;justify-content:center;z-index:2;-webkit-user-select:none;-moz-user-select:none;user-select:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:system-ui,-apple-system,sans-serif;font-size:14px;font-weight:600}.cloudimage-loading-spinner{width:var(--ci360-spinner-size);height:var(--ci360-spinner-size);transform:translate(-50%,-50%);border:3px solid var(--ci360-spinner-color);position:absolute;top:15px;left:15px;border-bottom-color:var(--ci360-spinner-accent);border-radius:50%;display:inline-block;box-sizing:border-box;opacity:0;animation:rotation .7s linear infinite}.cloudimage-360-view-360-circle{position:absolute;left:0;bottom:0;width:100%;height:auto;margin:auto;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:.2s all;z-index:2;color:var(--ci360-circle-color)}.cloudimage-360-view-360-circle svg{display:block;width:100%;height:auto}.cloudimage-360-fullscreen-modal{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:999;background-color:var(--ci360-fullscreen-bg)}.cloudimage-360-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cloudimage-360-hints-overlay{position:absolute;bottom:0;left:0;width:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;z-index:50;pointer-events:none;opacity:0;transition:opacity .3s ease}.cloudimage-360-hints-overlay.visible{opacity:1}.cloudimage-360-hints-overlay.hiding{opacity:0}.cloudimage-360-hints-container{display:flex;flex-direction:row;gap:20px;padding:10px 20px;background:var(--ci360-hints-bg);border-radius:var(--ci360-hints-border-radius);box-shadow:var(--ci360-hints-shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cloudimage-360-hint-item{display:flex;align-items:center;gap:8px;color:var(--ci360-hints-color);font-size:var(--ci360-hints-font-size);font-family:system-ui,-apple-system,sans-serif;white-space:nowrap}.cloudimage-360-hint-item svg{width:16px;height:16px;flex-shrink:0;stroke:var(--ci360-hints-color)}.cloudimage-360-hint-item span{opacity:.9}@media (max-width: 480px){.cloudimage-360-hints-container{flex-direction:column;gap:8px;padding:12px 16px;border-radius:12px}.cloudimage-360-hint-item{font-size:12px}.cloudimage-360-hint-item svg{width:14px;height:14px}.cloudimage-360-initial-icon{width:calc(var(--ci360-initial-icon-size) * .8);height:calc(var(--ci360-initial-icon-size) * .8)}}.cloudimage-360-img-magnifier-glass{background-color:#fff;background-image:radial-gradient(circle at center,#fffc,#f0f0f0e6);background-repeat:no-repeat;position:absolute;border:var(--ci360-magnifier-border);border-radius:50%;line-height:200px;text-align:center;z-index:1000;width:var(--ci360-magnifier-size);height:var(--ci360-magnifier-size);top:-75px;right:-85px;box-shadow:var(--ci360-magnifier-shadow);transition:box-shadow .2s ease;overflow:hidden;pointer-events:none}.cloudimage-360-hotspot-timeline{width:100%;max-width:500px;margin:16px auto 8px;padding:12px 20px;opacity:0;transition:opacity .3s ease;pointer-events:none}.cloudimage-360-hotspot-timeline.visible{opacity:1;pointer-events:auto}.cloudimage-360-hotspot-timeline-track{position:relative;width:100%;height:var(--ci360-timeline-height);background:var(--ci360-timeline-track-bg);border-radius:calc(var(--ci360-timeline-height) / 2)}.cloudimage-360-hotspot-timeline-indicator{position:absolute;top:50%;left:0;width:var(--ci360-timeline-indicator-size);height:var(--ci360-timeline-indicator-size);background:var(--ci360-timeline-indicator-color);border-radius:50%;transform:translate(-50%,-50%);transition:left .1s ease-out;pointer-events:none;box-shadow:0 2px 4px #0003}.cloudimage-360-hotspot-timeline-dot{position:absolute;top:50%;width:var(--ci360-timeline-dot-size);height:var(--ci360-timeline-dot-size);background:var(--ci360-timeline-dot-color);border:var(--ci360-timeline-dot-border);border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 2px 6px #00000040;padding:0;font:inherit;outline:none}.cloudimage-360-hotspot-timeline-dot:hover{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 3px 10px #0000004d}.cloudimage-360-hotspot-timeline-dot:focus-visible{outline:2px solid var(--ci360-focus-color);outline-offset:2px}.cloudimage-360-hotspot-timeline-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:var(--ci360-timeline-tooltip-bg);color:var(--ci360-timeline-tooltip-color);padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none;box-shadow:0 2px 8px #00000026;z-index:10}.cloudimage-360-hotspot-timeline-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--ci360-timeline-tooltip-bg)}.cloudimage-360-hotspot-timeline-tooltip.visible{opacity:1;visibility:visible}@media (max-width: 480px){.cloudimage-360-hotspot-timeline{max-width:none;padding:10px 16px;margin:12px auto 6px}}.cloudimage-360-fullscreen-modal .cloudimage-360-hotspot-timeline{position:absolute;bottom:0;left:0;right:0;max-width:none;margin:0;padding:24px 40px 20px;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 60%,transparent 100%);z-index:200}.cloudimage-360-fullscreen-modal .cloudimage-360-hotspot-timeline-track{max-width:600px;margin:0 auto;background:#ffffff4d}.cloudimage-360-fullscreen-modal .cloudimage-360-hotspot-timeline-indicator{background:#fff;box-shadow:0 2px 6px #0006}.cloudimage-360-fullscreen-modal .cloudimage-360-hotspot-timeline-dot{border-color:#fff;box-shadow:0 2px 8px #0006}.cloudimage-360-fullscreen-modal .cloudimage-360-hotspot-timeline-tooltip{bottom:calc(100% + 20px)}.cloudimage-360-fullscreen-modal .cloudimage-360-hints-overlay{padding-bottom:42px}.cloudimage-360-hotspot-container{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:20}.cloudimage-360-popper{opacity:1;transition:opacity .2s ease-in-out}.cloudimage-360-hotspot{display:inline-block;position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-50%,-50%);background:var(--ci360-hotspot-color);border:var(--ci360-hotspot-border);border-radius:50%;height:var(--ci360-hotspot-size);width:var(--ci360-hotspot-size);box-shadow:0 0 #0af9,0 2px 6px #0003;opacity:0;animation:pulse 2s infinite;transition:transform .2s ease,box-shadow .2s ease;padding:0;cursor:pointer;font:inherit;outline:none}.cloudimage-360-hotspot:focus-visible{outline:2px solid var(--ci360-focus-color, #0066cc);outline-offset:2px;animation:none}.cloudimage-360-hotspot.visible{opacity:1}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #0af9,0 0 0 10px #0af6,0 0 0 20px #0af3}50%{transform:scale(1.1);box-shadow:0 0 0 10px #0af0,0 0 0 20px #00aaff1a,0 0 0 30px #0af0}to{transform:scale(1);box-shadow:0 0 #0af0,0 0 0 10px #0af0,0 0 0 20px #0af0}}.cloudimage-360-hotspot:hover{transform:scale(1.2);box-shadow:0 0 0 5px #00aaff80,0 4px 12px #0000004d}.cloudimage-360-popper{background-color:var(--ci360-popper-bg);color:var(--ci360-popper-color);padding:10px 15px;border-radius:var(--ci360-popper-border-radius);box-shadow:var(--ci360-popper-shadow);font-size:14px;max-width:220px;z-index:9999;text-align:center;transition:opacity .2s ease,translate .2s ease;opacity:0;translate:0 -10px}.cloudimage-360-popper[data-show]{opacity:1;translate:0}

package/package.json

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