@kaktos/flipbook-react 1.0.1 → 1.0.2

package/dist/react-flipbook.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("react/jsx-runtime"),e=require("react");function he(c){if(c&&c.constructor===Array){var o=c.filter(function(b){return typeof b=="number"}).filter(function(b){return!isNaN(b)});if(c.length===6&&o.length===6){var s=$t();return s[0]=o[0],s[1]=o[1],s[4]=o[2],s[5]=o[3],s[12]=o[4],s[13]=o[5],s}else if(c.length===16&&o.length===16)return c}throw new TypeError("Expected a `number[]` with length 6 or 16.")}function $t(){for(var c=[],o=0;o<16;o++)o%5==0?c.push(1):c.push(0);return c}function _n(c,o){for(var s=he(c),b=he(o),x=[],v=0;v<4;v++)for(var j=[s[v],s[v+4],s[v+8],s[v+12]],L=0;L<4;L++){var I=L*4,F=[b[I],b[I+1],b[I+2],b[I+3]],C=j[0]*F[0]+j[1]*F[1]+j[2]*F[2]+j[3]*F[3];x[v+I]=C}return x}function Tn(c){var o=$t();return o[11]=-1/c,o}function Fn(c){var o=Math.PI/180*c,s=$t();return s[0]=s[10]=Math.cos(o),s[2]=s[8]=Math.sin(o),s[2]*=-1,s}function En(c){return"matrix3d("+he(c).join(", ")+")"}function Ye(c,o,s){var b=$t();return c!==void 0&&o!==void 0&&s!==void 0&&(b[12]=c,b[13]=o,b[14]=s),b}class ee{constructor(o){o?o instanceof ee?this.m=[...o.m]:this.m=[...o]:this.m=$t()}clone(){return new ee(this)}multiply(o){this.m=_n(this.m,o)}perspective(o){this.multiply(Tn(o))}transformX(o){return(o*this.m[0]+this.m[12])/(o*this.m[3]+this.m[15])}translate(o,s){this.multiply(Ye(o,s??0,0))}translate3d(o,s,b){this.multiply(Ye(o,s,b))}rotateY(o){this.multiply(Fn(o))}toString(){return En(this.m)}}function Dn(c,o,s){const[b,x]=e.useState(0),[v,j]=e.useState(0),[L,I]=e.useState(1),[F,C]=e.useState(0);return e.useEffect(()=>{const S=()=>{const $=c.current;if(!$)return;x($.clientWidth),j($.clientHeight);const g=$.clientWidth>$.clientHeight&&!o?2:1;I(g),g===2&&C(Q=>Q+1)};return window.addEventListener("resize",S,{passive:!0}),S(),()=>window.removeEventListener("resize",S)},[o,c]),{viewWidth:b,viewHeight:v,rawDisplayedPages:L,pageAlignmentTick:F}}function jn(c,o,s,b,x,v,j){const[L,I]=e.useState(null),[F,C]=e.useState(null),[S,$]=e.useState({}),g=e.useRef({}),Q=e.useRef({count:0,target:0,cb:null}),rt=e.useRef(new Set),ot=e.useCallback((f,d=!1)=>{if(d&&x>1&&!v){const i=o[f];if(i)return i}return c[f]??null},[c,o,x,v]),U=e.useCallback(f=>L===null||S[f]?f:(g.current[f]||(g.current[f]=null,rt.current.add(f)),j),[L,S,j]);e.useEffect(()=>{const f=rt.current;f.size!==0&&(f.forEach(d=>{if(g.current[d])return;const i=new Image;g.current[d]=i,i.onload=()=>{$(_=>({..._,[d]:!0}))},i.src=d}),f.clear())});const X=e.useCallback((f,d=!1)=>{const i=ot(f,d);return d&&x>1&&!v?i:i?U(i):null},[ot,U,x,v]),st=e.useCallback((f=!1)=>{for(let d=s-3;d<=s+3;d++)X(d);if(f)for(let d=s;d<s+b;d++){const i=o[d];if(i&&!g.current[i]){const _=new Image;g.current[i]=_,_.src=i}}},[s,b,o,X]),J=e.useCallback(f=>{const d=f.target;L===null&&(I(d.naturalWidth),C(d.naturalHeight));const i=Q.current;i.cb&&(i.count++,i.count>=i.target&&(i.cb(),i.cb=null))},[L]),tt=e.useCallback((f,d)=>{Q.current={count:0,target:f,cb:d}},[]);return{imageWidth:L,imageHeight:F,loadedImages:S,pageUrl:ot,loadImage:U,pageUrlLoading:X,preloadImages:st,onImageLoad:J,setImageLoadCallback:tt}}const zn="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%20viewBox='0%200%20500%20500'%20fill='transparent'%20style='background-color:%20%23fff'%3e%3ccircle%20cx='250'%20cy='250'%20r='48'%20stroke='%23333'%20stroke-width='2'%20stroke-dasharray='271%2030'%20%3e%3canimateTransform%20attributeName='transform'%20attributeType='XML'%20type='rotate'%20from='0%20250%20250'%20to='360%20250%20250'%20dur='1s'%20repeatCount='indefinite'%20/%3e%3c/circle%3e%3c/svg%3e",On="_root_1ydjt_1",Zn="_viewport_1ydjt_8",Wn="_viewportZoom_1ydjt_14 _viewport_1ydjt_8",Nn="_viewportZoomDragToScroll_1ydjt_19 _viewportZoom_1ydjt_14 _viewport_1ydjt_8",$n="_container_1ydjt_24",Xn="_clickLeft_1ydjt_40 _clickToFlip_1ydjt_32",Hn="_clickRight_1ydjt_45 _clickToFlip_1ydjt_32",Bn="_boundingBox_1ydjt_50",Un="_page_1ydjt_55",Yn="_polygon_1ydjt_60",An="_polygonBlank_1ydjt_69 _polygon_1ydjt_60",Gn="_lighting_1ydjt_74",Kn="_srOnly_1ydjt_79",T={root:On,viewport:Zn,viewportZoom:Wn,viewportZoomDragToScroll:Nn,container:$n,clickLeft:Xn,clickRight:Hn,boundingBox:Bn,page:Un,polygon:Yn,polygonBlank:An,lighting:Gn,srOnly:Kn};function Ge(c){return c*c}function qn(c){return 1-Ge(1-c)}function Ae(c){return c<.5?Ge(c*2)/2:.5+qn((c-.5)*2)/2}const Nt={progress:0,direction:null,frontImage:null,backImage:null,auto:!1};function Vn(c,o){const{pages:s,pagesHiRes:b=[],flipDuration:x=1e3,zoomDuration:v=500,zooms:j=[1,2,4],perspective:L=2400,nPolygons:I=10,ambient:F=.4,gloss:C=.6,swipeMin:S=3,singlePage:$=!1,forwardDirection:g="right",centering:Q=!0,startPage:rt=null,loadingImage:ot=zn,clickToZoom:U=!0,dragToFlip:X=!0,wheel:st="scroll",page:J,onPageChange:tt}=c,f=j??[1],d=s[0]===null,{viewWidth:i,viewHeight:_,rawDisplayedPages:pt,pageAlignmentTick:ne}=Dn(o,$),[re,Xt]=e.useState(0),Mt=J!==void 0,E=Mt?J:re,H=e.useCallback(t=>{if(Mt){const r=typeof t=="function"?t(J):t;tt?.(r)}else Xt(t)},[Mt,J,tt]),[Ht,n]=e.useState(0),[wt,xt]=e.useState(1),[l,oe]=e.useState(f[0]),[Bt,se]=e.useState(0),[Lt,pe]=e.useState(!1),[M,B]=e.useState(Nt),[Ut,ae]=e.useState(null),[,me]=e.useState(0),h=pt===2&&(d&&(E===0||E===1))?1:pt,Ke=jn(s,b,E,h,l,Lt,ot),{imageWidth:mt,imageHeight:Yt,pageUrl:Ct,loadImage:qe,pageUrlLoading:Ve,preloadImages:At,onImageLoad:Qe,setImageLoadCallback:Gt}=Ke,St=e.useRef(null),be=e.useRef(null),bt=e.useRef(0),yt=e.useRef(null),Y=e.useRef(!1),Kt=e.useRef(!1),at=e.useRef(1/0),ct=e.useRef(-1/0),ye=e.useRef(0),ke=e.useRef(0),_t=e.useRef(0),Tt=e.useRef(0),Ft=e.useRef(!1),q=e.useRef(M);q.current=M;const kt=e.useRef(E);kt.current=E;const qt=e.useRef(h);qt.current=h;const Et=e.useRef(l);Et.current=l;const Vt=e.useRef(Bt);Vt.current=Bt;const Re=e.useRef(c.onFlipLeftStart);Re.current=c.onFlipLeftStart;const ve=e.useRef(c.onFlipLeftEnd);ve.current=c.onFlipLeftEnd;const Pe=e.useRef(c.onFlipRightStart);Pe.current=c.onFlipRightStart;const Ie=e.useRef(c.onFlipRightEnd);Ie.current=c.onFlipRightEnd;const Me=e.useRef(c.onZoomStart);Me.current=c.onZoomStart;const we=e.useRef(c.onZoomEnd);we.current=c.onZoomEnd;const Je=e.useRef(tt);Je.current=tt;const xe=e.useRef(H);xe.current=H;const ce=e.useRef(new Set),D=e.useCallback(t=>{const r=requestAnimationFrame(a=>{ce.current.delete(r),t(a)});return ce.current.add(r),r},[]),Le=d?s.length-1:s.length,Qt=d?Math.max(1,E):E+1,Ce=e.useRef({canFlipLeft:!1,canFlipRight:!1,canZoomIn:!1,canZoomOut:!1,page:0,numPages:0}),Se=e.useCallback(()=>{H(t=>h===1&&t===0&&s.length>0&&!s[0]?1:t)},[h,s,H]),_e=!M.direction&&E<s.length-h,Te=!M.direction&&E>=h&&!(h===1&&!Ct(Ht-1)),et=g==="left"?_e:Te,nt=g==="right"?_e:Te,it=!Lt&&Bt<f.length-1,lt=!Lt&&Bt>0;Ce.current={canFlipLeft:et,canFlipRight:nt,canZoomIn:it,canZoomOut:lt,page:Qt,numPages:Le};const ie=g==="right"||h===1?Ht:wt,le=g==="left"?Ht:wt,tn=!!Ct(ie),en=!!Ct(le)&&h===2,Fe=mt&&Yt?Math.min(i/h/mt,_/Yt,1):1,P=mt?Math.round(mt*Fe):0,ut=Yt?Math.round(Yt*Fe):0,A=(i-P*h)/2,ft=(_-ut)/2,nn=Math.ceil(P/I+1/l)+"px",rn=ut+"px",on=`${P}px ${ut}px`,sn=e.useMemo(()=>{if(!M.direction||h!==1)return 1;let t=M.progress;return M.direction!==g&&(t=1-t),t>.7?1-(t-.7)/.3:1},[M.direction,M.progress,h,g]),gt=(()=>{if(h===1)return A;const t=Ct(ie)?A:i/2;return M.direction?t<at.current?t:at.current:t})(),Dt=(()=>{if(h===1)return i-A;const t=Ct(le)?i-A:i/2;return M.direction?t>ct.current?t:ct.current:t})(),dt=Q?Math.round(i/2-(gt+Dt)/2):0,Ee=e.useRef(dt);Ee.current=dt;const De=e.useRef(h);e.useEffect(()=>{Ut===null&&mt!==null&&ae(dt)},[Ut,mt,dt]),e.useEffect(()=>{De.current!==h&&(De.current=h,ae(dt),Ft.current=!1)},[h,dt]);const jt=Math.round(Ut??0),an=yt.current?yt.current:U&&it?"zoom-in":U&&lt?"zoom-out":X?"grab":"auto",cn=!Y.current,ln=(Lt||l>1)&&cn?T.viewportZoomDragToScroll:Lt||l>1?T.viewportZoom:T.viewport,un=(()=>{const t=(Dt-gt)*l;return t<i?(gt+jt)*l-(i-t)/2:(gt+jt)*l})(),fn=(()=>{const t=(Dt-gt)*l;return t<i?(gt+jt)*l-(i-t)/2:(Dt+jt)*l-i})(),gn=(()=>{const t=ut*l;return t<_?ft*l-(_-t)/2:ft*l})(),dn=(()=>{const t=ut*l;return t<_?ft*l-(_-t)/2:(ft+ut)*l-_})(),je=Math.min(fn,Math.max(un,_t.current)),ze=Math.min(dn,Math.max(gn,Tt.current)),Oe=e.useCallback((t,r)=>{const a=[],u=[-.5,-.25,0,.25,.5];if(F<1){const p=1-F,m=u.map(y=>(1-Math.cos((t-r*y)/180*Math.PI))*p);a.push(`linear-gradient(to right,rgba(0,0,0,${m[0]}),rgba(0,0,0,${m[1]}) 25%,rgba(0,0,0,${m[2]}) 50%,rgba(0,0,0,${m[3]}) 75%,rgba(0,0,0,${m[4]}))`)}if(C>0){const y=u.map(k=>Math.max(Math.pow(Math.cos((t+30-r*k)/180*Math.PI),200),Math.pow(Math.cos((t-30-r*k)/180*Math.PI),200)));a.push(`linear-gradient(to right,rgba(255,255,255,${y[0]*C}),rgba(255,255,255,${y[1]*C}) 25%,rgba(255,255,255,${y[2]*C}) 50%,rgba(255,255,255,${y[3]*C}) 75%,rgba(255,255,255,${y[4]*C}))`)}return a.join(",")},[F,C]),ue=e.useCallback(t=>{const r=q.current;if(!r.direction)return[];if(!Number.isFinite(P)||P<=0||I<=0)return[];let a=r.progress,u=r.direction;if(!Number.isFinite(a))return[];a<0&&(a=0),a>1&&(a=1),h===1&&u!==g&&(a=1-a,u=g);const p=t==="front"?r.frontImage:r.backImage,m=P/I;let y=A,k=!1;h===1?g==="right"?t==="back"&&(k=!0,y=A-P):u==="left"?t==="back"?y=P-A:k=!0:t==="front"?y=P-A:k=!0:u==="left"?t==="back"?y=i/2:k=!0:t==="front"?y=i/2:k=!0;const R=new ee;R.translate(i/2),R.perspective(L),R.translate(-i/2),R.translate(y,ft);let z=0;a>.5&&(z=-(a-.5)*2*180),u==="left"&&(z=-z),t==="back"&&(z+=180),z&&(k&&R.translate(P),R.rotateY(z),k&&R.translate(-P));let w;a<.5?w=a*2*Math.PI:w=(1-(a-.5)*2)*Math.PI,w===0&&(w=1e-9);const ht=P/w;let W=0;const O=w/I;let N=O/2/Math.PI*180;const V=O/Math.PI*180;k&&(N=-w/Math.PI*180+V/2),t==="back"&&(N=-N);const Zt=t==="back"?-V:V;at.current=1/0,ct.current=-1/0;const K=[];for(let Jt=0;Jt<I;Jt++){const Cn=`${Jt/(I-1)*100}% 0px`,Wt=R.clone(),He=k?w-W:W;let de=Math.sin(He)*ht;k&&(de=P-de);let te=(1-Math.cos(He))*ht;t==="back"&&(te=-te),Wt.translate3d(de,0,te),Wt.rotateY(-N);const Be=Wt.transformX(0),Ue=Wt.transformX(m);ct.current=Math.max(Math.max(Be,Ue),ct.current),at.current=Math.min(Math.min(Be,Ue),at.current);const Sn=Oe(z-N,Zt);W+=O,N+=Zt,K.push({key:t+Jt,bgImage:p,lighting:Sn,bgPos:Cn,transform:Wt.toString(),z:Math.abs(Math.round(te))})}return K},[h,g,P,A,ft,i,L,I,Oe]),hn=e.useMemo(()=>M.direction?[...ue("front"),...ue("back")]:[],[M.direction,M.progress,M.frontImage,M.backImage,ue]),G=e.useCallback((t,r)=>{const a=kt.current,u=qt.current;let p=null,m=null;t!==g?u===1?(p=s[a-1]??null,m=null):(p=s[g==="right"||u===1?a:a+1]??null,m=s[a-u+1]??null):u===1?(p=s[a]??null,m=null):(p=s[g==="left"?a:a+1]??null,m=s[a+u]??null),B({progress:0,direction:t,frontImage:p,backImage:m,auto:!1}),D(()=>{D(()=>{t!==g?u===2&&n(a-u):u===1?n(a+u):xt(a+1+u),r&&fe(t)})})},[g,s,D]),fe=e.useCallback(t=>{const r=q.current,a=x*(1-r.progress),u=r.progress;B(R=>({...R,auto:!0}));const p=kt.current,m=s[0]!==null?p+1:Math.max(1,p);t==="left"?Re.current?.(m):Pe.current?.(m);let y=null;const k=R=>{y===null&&(y=R);const z=R-y;let w=u+z/a;w>1&&(w=1);const ht=Ae(w);if(B(W=>({...W,progress:ht})),w<1)D(k);else{const W=qt.current;let O;t!==g?O=kt.current-W:O=kt.current+W,xe.current(O);const N=s[0]!==null?O+1:Math.max(1,O);t==="left"?ve.current?.(N):Ie.current?.(N),W===1&&t===g?B(Nt):Gt(1,()=>{B(Nt)})}};D(k)},[x,g,s,Gt,D]),Ze=e.useCallback(()=>{const t=q.current,r=x*t.progress,a=t.progress;B(m=>({...m,auto:!0}));let u=null;const p=m=>{u===null&&(u=m);const y=m-u;let k=a-a*y/r;if(k<0&&(k=0),B(R=>({...R,progress:k})),k>0)D(p);else{const R=kt.current;n(R),xt(R+1);const z=qt.current,w=q.current.direction;z===1&&w!==g?B(Nt):Gt(1,()=>{B(Nt)})}};D(p)},[x,g,Gt,D]),pn=e.useCallback(()=>{et&&G("left",!0)},[et,G]),mn=e.useCallback(()=>{nt&&G("right",!0)},[nt,G]),Rt=e.useCallback((t,r)=>{const a=o.current;if(!a)return;let u,p;if(r){const V=a.getBoundingClientRect();u=r.pageX-V.left,p=r.pageY-V.top}else u=a.clientWidth/2,p=a.clientHeight/2;const m=Et.current,y=t,k=a.scrollLeft,R=a.scrollTop,z=u+k,w=p+R,ht=z/m*y-u,W=w/m*y-p;pe(!0),Me.current?.(t);let O=null;const N=V=>{O===null&&(O=V);const Zt=V-O;let K=Zt/v;K>1&&(K=1),K=Ae(K),oe(m+(y-m)*K),_t.current=k+(ht-k)*K,Tt.current=R+(W-R)*K,Zt<v?D(N):(we.current?.(t),pe(!1),oe(t),_t.current=ht,Tt.current=W)};D(N),y>1&&At(!0)},[v,o,At,D]),zt=e.useCallback(t=>{if(!it)return;const r=Vt.current+1;se(r),Rt(f[r],t)},[it,f,Rt]),Ot=e.useCallback(t=>{if(!lt)return;const r=Vt.current-1;se(r),Rt(f[r],t)},[lt,f,Rt]),We=e.useCallback(t=>{const r=(Vt.current+1)%f.length;se(r),Rt(f[r],t)},[f,Rt]),ge=e.useCallback(t=>{if(t===null||t===Qt)return;let r;s[0]===null?h===2&&t===1?r=0:r=t:r=t-1,(h===2&&r>0&&s[0]===null||h===2&&s[0]!==null)&&(r=r&-2),H(r),at.current=1/0,ct.current=-1/0},[Qt,s,h,H]),Ne=e.useRef(ge);Ne.current=ge;const $e=e.useCallback((t,r)=>{const a=o.current;a&&(a.scrollLeft=ye.current-t,a.scrollTop=ke.current-r,_t.current=a.scrollLeft,Tt.current=a.scrollTop)},[o]),vt=e.useCallback(t=>{if(St.current=t.pageX,be.current=t.pageY,bt.current=0,Et.current<=1)X&&(yt.current="grab");else{const r=o.current;r&&(ye.current=r.scrollLeft,ke.current=r.scrollTop),yt.current="all-scroll"}},[X,o]),Pt=e.useCallback(t=>{if(St.current===null)return!1;const r=t.pageX-St.current,a=t.pageY-be.current;if(bt.current=Math.max(bt.current,Math.abs(r)),bt.current=Math.max(bt.current,Math.abs(a)),Et.current>1)return Y.current||$e(r,a),!1;if(!X||Math.abs(a)>Math.abs(r)||!Number.isFinite(P)||P<=0)return!1;yt.current="grabbing",me(p=>p+1);const u=q.current;return r>0?(u.direction===null&&et&&r>=S&&G("left",!1),q.current.direction==="left"&&B(p=>({...p,progress:Math.min(r/P,1)}))):(u.direction===null&&nt&&r<=-S&&G("right",!1),q.current.direction==="right"&&B(p=>({...p,progress:Math.min(-r/P,1)}))),!0},[X,et,nt,S,G,P,$e]),It=e.useCallback(t=>{if(St.current===null)return;U&&bt.current<S&&We(t);const r=q.current;r.direction!==null&&!r.auto&&(r.progress>1/4?fe(r.direction):Ze()),St.current=null,yt.current=null,me(a=>a+1)},[U,S,We,fe,Ze]),bn=e.useCallback(t=>{Y.current=!0,vt(t.changedTouches[0])},[vt]),yn=e.useCallback(t=>{Pt(t.changedTouches[0])&&t.cancelable&&t.preventDefault()},[Pt]),kn=e.useCallback(t=>{It(t.changedTouches[0])},[It]),Rn=e.useCallback(t=>{if(Kt.current=!0,!Y.current&&t.button===0){vt(t);try{t.target.setPointerCapture(t.pointerId)}catch{}}},[vt]),vn=e.useCallback(t=>{Y.current||Pt(t)},[Pt]),Pn=e.useCallback(t=>{if(!Y.current){It(t);try{t.target.releasePointerCapture(t.pointerId)}catch{}}},[It]),In=e.useCallback(t=>{Y.current||Kt.current||t.button===0&&vt(t)},[vt]),Mn=e.useCallback(t=>{Y.current||Kt.current||Pt(t)},[Pt]),wn=e.useCallback(t=>{Y.current||Kt.current||It(t)},[It]),xn=e.useCallback(t=>{if(st==="scroll"&&Et.current>1&&!Y.current){const r=o.current;r&&(r.scrollLeft+=t.deltaX,r.scrollTop+=t.deltaY,_t.current=r.scrollLeft,Tt.current=r.scrollTop),t.cancelable&&t.preventDefault()}st==="zoom"&&(t.deltaY>=100?(Ot(t),t.cancelable&&t.preventDefault()):t.deltaY<=-100&&(zt(t),t.cancelable&&t.preventDefault()))},[st,o,Ot,zt]),Ln=e.useCallback(t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),et&&G("left",!0);break;case"ArrowRight":t.preventDefault(),nt&&G("right",!0);break;case"+":case"=":t.preventDefault(),it&&zt();break;case"-":t.preventDefault(),lt&&Ot();break}},[et,nt,it,lt,G,zt,Ot]);e.useEffect(()=>{pt===2&&H(t=>{const r=t&-2;return r===0&&d?t:r}),at.current=1/0,ct.current=-1/0},[ne,pt,d,H]);const Xe=e.useRef(At);return Xe.current=At,e.useEffect(()=>{n(E),xt(E+1),Xe.current()},[E]),e.useEffect(()=>{if(Ft.current||Ut===null)return;Ft.current=!0;const t=()=>{D(()=>{ae(r=>{const a=Ee.current;if(r===null)return Ft.current=!1,a;const u=a-r;return Math.abs(u)<.5?(Ft.current=!1,a):(t(),r+u*.1)})})};t()},[dt,D]),e.useEffect(()=>{const t=o.current;t&&(t.scrollLeft=je)},[je,o]),e.useEffect(()=>{const t=o.current;t&&(t.scrollTop=ze)},[ze,o]),e.useEffect(()=>{Se()},[s,Se]),e.useEffect(()=>{Ne.current(rt)},[rt]),e.useEffect(()=>{oe(f[0])},[]),e.useEffect(()=>{const t=ce.current;return()=>{t.forEach(cancelAnimationFrame),t.clear()}},[]),{viewWidth:i,viewHeight:_,pageWidth:P,pageHeight:ut,xMargin:A,yMargin:ft,displayedPages:h,zoom:l,centerOffsetSmoothed:jt,page:Qt,numPages:Le,leftPage:ie,rightPage:le,showLeftPage:tn,showRightPage:en,pageUrlLoading:Ve,loadImage:qe,flip:M,flipOpacity:sn,polygonArray:hn,polygonWidth:nn,polygonHeight:rn,polygonBgSize:on,canFlipLeft:et,canFlipRight:nt,canZoomIn:it,canZoomOut:lt,boundingLeft:gt,boundingRight:Dt,cursor:an,viewportClass:ln,flipLeft:pn,flipRight:mn,zoomIn:zt,zoomOut:Ot,goToPage:ge,apiRef:Ce,handlers:{onTouchStart:bn,onTouchMove:yn,onTouchEnd:kn,onPointerDown:Rn,onPointerMove:vn,onPointerUp:Pn,onMouseDown:In,onMouseMove:Mn,onMouseUp:wn,onWheel:xn,onKeyDown:Ln},onImageLoad:Qe}}const Qn=e.forwardRef(function({pages:o,pagesHiRes:s,pageLabels:b,flipDuration:x,zoomDuration:v,zooms:j,perspective:L,nPolygons:I,ambient:F,gloss:C,swipeMin:S,singlePage:$,forwardDirection:g,centering:Q,startPage:rt,loadingImage:ot,clickToZoom:U,dragToFlip:X,wheel:st,page:J,onPageChange:tt,onFlipLeftStart:f,onFlipLeftEnd:d,onFlipRightStart:i,onFlipRightEnd:_,onZoomStart:pt,onZoomEnd:ne,children:re,className:Xt,...Mt},E){const H=e.useRef(null),n=Vn({pages:o,pagesHiRes:s,flipDuration:x,zoomDuration:v,zooms:j,perspective:L,nPolygons:I,ambient:F,gloss:C,swipeMin:S,singlePage:$,forwardDirection:g,centering:Q,startPage:rt,loadingImage:ot,clickToZoom:U,dragToFlip:X,wheel:st,page:J,onPageChange:tt,onFlipLeftStart:f,onFlipLeftEnd:d,onFlipRightStart:i,onFlipRightEnd:_,onZoomStart:pt,onZoomEnd:ne},H);e.useImperativeHandle(E,()=>({get flipLeft(){return n.flipLeft},get flipRight(){return n.flipRight},get zoomIn(){return n.zoomIn},get zoomOut(){return n.zoomOut},get goToPage(){return n.goToPage},get canFlipLeft(){return n.apiRef.current.canFlipLeft},get canFlipRight(){return n.apiRef.current.canFlipRight},get canZoomIn(){return n.apiRef.current.canZoomIn},get canZoomOut(){return n.apiRef.current.canZoomOut},get page(){return n.apiRef.current.page},get numPages(){return n.apiRef.current.numPages}}),[n.flipLeft,n.flipRight,n.zoomIn,n.zoomOut,n.goToPage,n.apiRef]);const wt=l=>b&&b[l]?b[l]:`Page ${l+1}`,xt=Xt?`${T.root} ${Xt}`:T.root;return Z.jsxs("div",{...Mt,className:xt,role:"document","aria-label":`Book viewer, page ${n.page} of ${n.numPages}`,"aria-roledescription":"flipbook",children:[re?.({canFlipLeft:n.canFlipLeft,canFlipRight:n.canFlipRight,canZoomIn:n.canZoomIn,canZoomOut:n.canZoomOut,page:n.page,numPages:n.numPages,flipLeft:n.flipLeft,flipRight:n.flipRight,zoomIn:n.zoomIn,zoomOut:n.zoomOut,goToPage:n.goToPage}),Z.jsx("div",{ref:H,className:n.viewportClass,style:{cursor:n.cursor==="grabbing"?"grabbing":"auto"},tabIndex:0,onKeyDown:n.handlers.onKeyDown,onTouchMove:n.handlers.onTouchMove,onPointerMove:n.handlers.onPointerMove,onMouseMove:n.handlers.onMouseMove,onTouchEnd:n.handlers.onTouchEnd,onTouchCancel:n.handlers.onTouchEnd,onPointerUp:n.handlers.onPointerUp,onPointerCancel:n.handlers.onPointerUp,onMouseUp:n.handlers.onMouseUp,onWheel:n.handlers.onWheel,children:Z.jsxs("div",{className:T.container,style:{transform:`scale(${n.zoom})`},children:[Z.jsx("div",{role:"button",tabIndex:n.canFlipLeft?0:-1,"aria-label":"Previous page","aria-disabled":!n.canFlipLeft,className:T.clickLeft,style:{cursor:n.canFlipLeft?"pointer":"auto"},onClick:n.flipLeft,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),n.flipLeft())}}),Z.jsx("div",{role:"button",tabIndex:n.canFlipRight?0:-1,"aria-label":"Next page","aria-disabled":!n.canFlipRight,className:T.clickRight,style:{cursor:n.canFlipRight?"pointer":"auto"},onClick:n.flipRight,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),n.flipRight())}}),Z.jsxs("div",{style:{transform:`translateX(${n.centerOffsetSmoothed}px)`},children:[n.showLeftPage&&Z.jsx("img",{className:T.page,style:{width:n.pageWidth+"px",height:n.pageHeight+"px",left:n.xMargin+"px",top:n.yMargin+"px"},src:n.pageUrlLoading(n.leftPage,!0)??void 0,alt:wt(n.leftPage),onLoad:n.onImageLoad}),n.showRightPage&&Z.jsx("img",{className:T.page,style:{width:n.pageWidth+"px",height:n.pageHeight+"px",left:n.viewWidth/2+"px",top:n.yMargin+"px"},src:n.pageUrlLoading(n.rightPage,!0)??void 0,alt:wt(n.rightPage),onLoad:n.onImageLoad}),Z.jsx("div",{style:{opacity:n.flipOpacity},children:n.polygonArray.map(l=>Z.jsx("div",{className:l.bgImage?T.polygon:T.polygonBlank,style:{backgroundImage:l.bgImage?`url(${n.loadImage(l.bgImage)})`:void 0,backgroundSize:n.polygonBgSize,backgroundPosition:l.bgPos,width:n.polygonWidth,height:n.polygonHeight,transform:l.transform,zIndex:l.z},children:l.lighting&&Z.jsx("div",{className:T.lighting,style:{backgroundImage:l.lighting}})},l.key))}),Z.jsx("div",{className:T.boundingBox,style:{left:n.boundingLeft+"px",top:n.yMargin+"px",width:n.boundingRight-n.boundingLeft+"px",height:n.pageHeight+"px",cursor:n.cursor},onTouchStart:n.handlers.onTouchStart,onPointerDown:n.handlers.onPointerDown,onMouseDown:n.handlers.onMouseDown})]})]})}),Z.jsxs("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:T.srOnly,children:["Page ",n.page," of ",n.numPages]})]})});exports.Flipbook=Qn;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react/jsx-runtime"),t=require("react");function ht(c){if(c&&c.constructor===Array){var o=c.filter(function(b){return typeof b=="number"}).filter(function(b){return!isNaN(b)});if(c.length===6&&o.length===6){var s=$e();return s[0]=o[0],s[1]=o[1],s[4]=o[2],s[5]=o[3],s[12]=o[4],s[13]=o[5],s}else if(c.length===16&&o.length===16)return c}throw new TypeError("Expected a `number[]` with length 6 or 16.")}function $e(){for(var c=[],o=0;o<16;o++)o%5==0?c.push(1):c.push(0);return c}function _n(c,o){for(var s=ht(c),b=ht(o),w=[],v=0;v<4;v++)for(var D=[s[v],s[v+4],s[v+8],s[v+12]],L=0;L<4;L++){var y=L*4,j=[b[y],b[y+1],b[y+2],b[y+3]],C=D[0]*j[0]+D[1]*j[1]+D[2]*j[2]+D[3]*j[3];w[v+y]=C}return w}function Tn(c){var o=$e();return o[11]=-1/c,o}function jn(c){var o=Math.PI/180*c,s=$e();return s[0]=s[10]=Math.cos(o),s[2]=s[8]=Math.sin(o),s[2]*=-1,s}function Fn(c){return"matrix3d("+ht(c).join(", ")+")"}function Yt(c,o,s){var b=$e();return c!==void 0&&o!==void 0&&s!==void 0&&(b[12]=c,b[13]=o,b[14]=s),b}class tt{constructor(o){o?o instanceof tt?this.m=[...o.m]:this.m=[...o]:this.m=$e()}clone(){return new tt(this)}multiply(o){this.m=_n(this.m,o)}perspective(o){this.multiply(Tn(o))}transformX(o){return(o*this.m[0]+this.m[12])/(o*this.m[3]+this.m[15])}translate(o,s){this.multiply(Yt(o,s??0,0))}translate3d(o,s,b){this.multiply(Yt(o,s,b))}rotateY(o){this.multiply(jn(o))}toString(){return Fn(this.m)}}function En(c,o,s){const[b,w]=t.useState(0),[v,D]=t.useState(0),[L,y]=t.useState(1),[j,C]=t.useState(0);return t.useEffect(()=>{const S=()=>{const X=c.current;if(!X)return;w(X.clientWidth),D(X.clientHeight);const g=X.clientWidth>X.clientHeight&&!o?2:1;y(g),g===2&&C(Q=>Q+1)};return window.addEventListener("resize",S,{passive:!0}),S(),()=>window.removeEventListener("resize",S)},[o,c]),{viewWidth:b,viewHeight:v,rawDisplayedPages:L,pageAlignmentTick:j}}function Dn(c,o,s,b,w,v,D){const[L,y]=t.useState(null),[j,C]=t.useState(null),[S,X]=t.useState({}),g=t.useRef({}),Q=t.useRef({count:0,target:0,cb:null}),re=t.useRef(new Set),oe=t.useCallback((f,d=!1)=>{if(d&&w>1&&!v){const i=o[f];if(i)return i}return c[f]??null},[c,o,w,v]),U=t.useCallback(f=>L===null||S[f]?f:(g.current[f]||(g.current[f]=null,re.current.add(f)),D),[L,S,D]);t.useEffect(()=>{const f=re.current;f.size!==0&&(f.forEach(d=>{if(g.current[d])return;const i=new Image;g.current[d]=i,i.onload=()=>{X(_=>({..._,[d]:!0}))},i.src=d}),f.clear())});const z=t.useCallback((f,d=!1)=>{const i=oe(f,d);return d&&w>1&&!v?i:i?U(i):null},[oe,U,w,v]),se=t.useCallback((f=!1)=>{for(let d=s-3;d<=s+3;d++)z(d);if(f)for(let d=s;d<s+b;d++){const i=o[d];if(i&&!g.current[i]){const _=new Image;g.current[i]=_,_.src=i}}},[s,b,o,z]),J=t.useCallback(f=>{const d=f.target;L===null&&(y(d.naturalWidth),C(d.naturalHeight));const i=Q.current;i.cb&&(i.count++,i.count>=i.target&&(i.cb(),i.cb=null))},[L]),ee=t.useCallback((f,d)=>{Q.current={count:0,target:f,cb:d}},[]);return{imageWidth:L,imageHeight:j,loadedImages:S,pageUrl:oe,loadImage:U,pageUrlLoading:z,preloadImages:se,onImageLoad:J,setImageLoadCallback:ee}}const zn="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%20viewBox='0%200%20500%20500'%20fill='transparent'%20style='background-color:%20%23fff'%3e%3ccircle%20cx='250'%20cy='250'%20r='48'%20stroke='%23333'%20stroke-width='2'%20stroke-dasharray='271%2030'%20%3e%3canimateTransform%20attributeName='transform'%20attributeType='XML'%20type='rotate'%20from='0%20250%20250'%20to='360%20250%20250'%20dur='1s'%20repeatCount='indefinite'%20/%3e%3c/circle%3e%3c/svg%3e",On="_root_jjdx8_1",Zn="_viewport_jjdx8_8",Wn="_viewportZoom_jjdx8_16 _viewport_jjdx8_8",Nn="_viewportZoomDragToScroll_jjdx8_22 _viewportZoom_jjdx8_16 _viewport_jjdx8_8",$n="_container_jjdx8_27",Xn="_clickLeft_jjdx8_43 _clickToFlip_jjdx8_35",Hn="_clickRight_jjdx8_48 _clickToFlip_jjdx8_35",Bn="_boundingBox_jjdx8_53",Un="_page_jjdx8_58",Yn="_polygon_jjdx8_63",An="_polygonBlank_jjdx8_72 _polygon_jjdx8_63",Gn="_lighting_jjdx8_77",Kn="_srOnly_jjdx8_82",T={root:On,viewport:Zn,viewportZoom:Wn,viewportZoomDragToScroll:Nn,container:$n,clickLeft:Xn,clickRight:Hn,boundingBox:Bn,page:Un,polygon:Yn,polygonBlank:An,lighting:Gn,srOnly:Kn};function Gt(c){return c*c}function qn(c){return 1-Gt(1-c)}function At(c){return c<.5?Gt(c*2)/2:.5+qn((c-.5)*2)/2}const Ne={progress:0,direction:null,frontImage:null,backImage:null,auto:!1};function Vn(c,o){const{pages:s,pagesHiRes:b=[],flipDuration:w=1e3,zoomDuration:v=500,zooms:D=[1,2,4],perspective:L=2400,nPolygons:y=10,ambient:j=.4,gloss:C=.6,swipeMin:S=3,singlePage:X=!1,forwardDirection:g="right",centering:Q=!0,startPage:re=null,loadingImage:oe=zn,clickToZoom:U=!0,dragToFlip:z=!0,wheel:se="scroll",page:J,onPageChange:ee}=c,f=D??[1],d=s[0]===null,{viewWidth:i,viewHeight:_,rawDisplayedPages:pe,pageAlignmentTick:nt}=En(o,X),[rt,Xe]=t.useState(0),we=J!==void 0,F=we?J:rt,H=t.useCallback(e=>{if(we){const r=typeof e=="function"?e(J):e;ee?.(r)}else Xe(e)},[we,J,ee]),[He,n]=t.useState(0),[Le,Ce]=t.useState(1),[l,ot]=t.useState(f[0]),[Be,st]=t.useState(0),[Se,pt]=t.useState(!1),[I,B]=t.useState(Ne),[Ue,at]=t.useState(null),[,mt]=t.useState(0),h=pe===2&&(d&&(F===0||F===1))?1:pe,Kt=Dn(s,b,F,h,l,Se,oe),{imageWidth:me,imageHeight:Ye,pageUrl:_e,loadImage:qt,pageUrlLoading:Vt,preloadImages:Ae,onImageLoad:Qt,setImageLoadCallback:Ge}=Kt,be=t.useRef(null),bt=t.useRef(null),ke=t.useRef(0),xe=t.useRef(null),Y=t.useRef(!1),Ke=t.useRef(!1),ae=t.useRef(1/0),ce=t.useRef(-1/0),kt=t.useRef(0),xt=t.useRef(0),Te=t.useRef(0),je=t.useRef(0),Fe=t.useRef(!1),q=t.useRef(I);q.current=I;const Re=t.useRef(F);Re.current=F;const qe=t.useRef(h);qe.current=h;const ve=t.useRef(l);ve.current=l;const Ve=t.useRef(Be);Ve.current=Be;const Rt=t.useRef(c.onFlipLeftStart);Rt.current=c.onFlipLeftStart;const vt=t.useRef(c.onFlipLeftEnd);vt.current=c.onFlipLeftEnd;const Pt=t.useRef(c.onFlipRightStart);Pt.current=c.onFlipRightStart;const yt=t.useRef(c.onFlipRightEnd);yt.current=c.onFlipRightEnd;const It=t.useRef(c.onZoomStart);It.current=c.onZoomStart;const Mt=t.useRef(c.onZoomEnd);Mt.current=c.onZoomEnd;const Jt=t.useRef(ee);Jt.current=ee;const wt=t.useRef(H);wt.current=H;const ct=t.useRef(new Set),E=t.useCallback(e=>{const r=requestAnimationFrame(a=>{ct.current.delete(r),e(a)});return ct.current.add(r),r},[]),Lt=d?s.length-1:s.length,Qe=d?Math.max(1,F):F+1,Ct=t.useRef({canFlipLeft:!1,canFlipRight:!1,canZoomIn:!1,canZoomOut:!1,page:0,numPages:0}),St=t.useCallback(()=>{H(e=>h===1&&e===0&&s.length>0&&!s[0]?1:e)},[h,s,H]),_t=!I.direction&&F<s.length-h,Tt=!I.direction&&F>=h&&!(h===1&&!_e(He-1)),te=g==="left"?_t:Tt,ne=g==="right"?_t:Tt,ie=!Se&&Be<f.length-1,le=!Se&&Be>0;Ct.current={canFlipLeft:te,canFlipRight:ne,canZoomIn:ie,canZoomOut:le,page:Qe,numPages:Lt};const it=g==="right"||h===1?He:Le,lt=g==="left"?He:Le,en=!!_e(it),tn=!!_e(lt)&&h===2,jt=me&&Ye?Math.min(i/h/me,_/Ye,1):1,P=me?Math.round(me*jt):0,ue=Ye?Math.round(Ye*jt):0,A=(i-P*h)/2,fe=(_-ue)/2,nn=Math.ceil(P/y+1/l)+"px",rn=ue+"px",on=`${P}px ${ue}px`,sn=t.useMemo(()=>{if(!I.direction||h!==1)return 1;let e=I.progress;return I.direction!==g&&(e=1-e),e>.7?1-(e-.7)/.3:1},[I.direction,I.progress,h,g]),ge=(()=>{if(h===1)return A;const e=_e(it)?A:i/2;return I.direction?e<ae.current?e:ae.current:e})(),Ee=(()=>{if(h===1)return i-A;const e=_e(lt)?i-A:i/2;return I.direction?e>ce.current?e:ce.current:e})(),de=Q?Math.round(i/2-(ge+Ee)/2):0,Ft=t.useRef(de);Ft.current=de;const Et=t.useRef(h);t.useEffect(()=>{Ue===null&&me!==null&&at(de)},[Ue,me,de]),t.useEffect(()=>{Et.current!==h&&(Et.current=h,at(de),Fe.current=!1)},[h,de]);const De=Math.round(Ue??0),an=xe.current?xe.current:U&&ie?"zoom-in":U&&le?"zoom-out":z?"grab":"auto",cn=!Y.current,ln=(Se||l>1)&&cn?T.viewportZoomDragToScroll:Se||l>1?T.viewportZoom:T.viewport,un=(()=>{const e=(Ee-ge)*l;return e<i?(ge+De)*l-(i-e)/2:(ge+De)*l})(),fn=(()=>{const e=(Ee-ge)*l;return e<i?(ge+De)*l-(i-e)/2:(Ee+De)*l-i})(),gn=(()=>{const e=ue*l;return e<_?fe*l-(_-e)/2:fe*l})(),dn=(()=>{const e=ue*l;return e<_?fe*l-(_-e)/2:(fe+ue)*l-_})(),Dt=Math.min(fn,Math.max(un,Te.current)),zt=Math.min(dn,Math.max(gn,je.current)),Ot=t.useCallback((e,r)=>{const a=[],u=[-.5,-.25,0,.25,.5];if(j<1){const p=1-j,m=u.map(k=>(1-Math.cos((e-r*k)/180*Math.PI))*p);a.push(`linear-gradient(to right,rgba(0,0,0,${m[0]}),rgba(0,0,0,${m[1]}) 25%,rgba(0,0,0,${m[2]}) 50%,rgba(0,0,0,${m[3]}) 75%,rgba(0,0,0,${m[4]}))`)}if(C>0){const k=u.map(x=>Math.max(Math.pow(Math.cos((e+30-r*x)/180*Math.PI),200),Math.pow(Math.cos((e-30-r*x)/180*Math.PI),200)));a.push(`linear-gradient(to right,rgba(255,255,255,${k[0]*C}),rgba(255,255,255,${k[1]*C}) 25%,rgba(255,255,255,${k[2]*C}) 50%,rgba(255,255,255,${k[3]*C}) 75%,rgba(255,255,255,${k[4]*C}))`)}return a.join(",")},[j,C]),ut=t.useCallback(e=>{const r=q.current;if(!r.direction)return[];if(!Number.isFinite(P)||P<=0||y<=0)return[];let a=r.progress,u=r.direction;if(!Number.isFinite(a))return[];a<0&&(a=0),a>1&&(a=1),h===1&&u!==g&&(a=1-a,u=g);const p=e==="front"?r.frontImage:r.backImage,m=P/y;let k=A,x=!1;h===1?g==="right"?e==="back"&&(x=!0,k=A-P):u==="left"?e==="back"?k=P-A:x=!0:e==="front"?k=P-A:x=!0:u==="left"?e==="back"?k=i/2:x=!0:e==="front"?k=i/2:x=!0;const R=new tt;R.translate(i/2),R.perspective(L),R.translate(-i/2),R.translate(k,fe);let O=0;a>.5&&(O=-(a-.5)*2*180),u==="left"&&(O=-O),e==="back"&&(O+=180),O&&(x&&R.translate(P),R.rotateY(O),x&&R.translate(-P));let M;a<.5?M=a*2*Math.PI:M=(1-(a-.5)*2)*Math.PI,M===0&&(M=1e-9);const he=P/M;let N=0;const Z=M/y;let $=Z/2/Math.PI*180;const V=Z/Math.PI*180;x&&($=-M/Math.PI*180+V/2),e==="back"&&($=-$);const Ze=e==="back"?-V:V;ae.current=1/0,ce.current=-1/0;const K=[];for(let Je=0;Je<y;Je++){const Cn=`${Je/(y-1)*100}% 0px`,We=R.clone(),Ht=x?M-N:N;let dt=Math.sin(Ht)*he;x&&(dt=P-dt);let et=(1-Math.cos(Ht))*he;e==="back"&&(et=-et),We.translate3d(dt,0,et),We.rotateY(-$);const Bt=We.transformX(0),Ut=We.transformX(m);ce.current=Math.max(Math.max(Bt,Ut),ce.current),ae.current=Math.min(Math.min(Bt,Ut),ae.current);const Sn=Ot(O-$,Ze);N+=Z,$+=Ze,K.push({key:e+Je,bgImage:p,lighting:Sn,bgPos:Cn,transform:We.toString(),z:Math.abs(Math.round(et))})}return K},[h,g,P,A,fe,i,L,y,Ot]),hn=t.useMemo(()=>I.direction?[...ut("front"),...ut("back")]:[],[I.direction,I.progress,I.frontImage,I.backImage,ut]),G=t.useCallback((e,r)=>{const a=Re.current,u=qe.current;let p=null,m=null;e!==g?u===1?(p=s[a-1]??null,m=null):(p=s[g==="right"||u===1?a:a+1]??null,m=s[a-u+1]??null):u===1?(p=s[a]??null,m=null):(p=s[g==="left"?a:a+1]??null,m=s[a+u]??null),B({progress:0,direction:e,frontImage:p,backImage:m,auto:!1}),E(()=>{E(()=>{e!==g?u===2&&n(a-u):u===1?n(a+u):Ce(a+1+u),r&&ft(e)})})},[g,s,E]),ft=t.useCallback(e=>{const r=q.current,a=w*(1-r.progress),u=r.progress;B(R=>({...R,auto:!0}));const p=Re.current,m=s[0]!==null?p+1:Math.max(1,p);e==="left"?Rt.current?.(m):Pt.current?.(m);let k=null;const x=R=>{k===null&&(k=R);const O=R-k;let M=u+O/a;M>1&&(M=1);const he=At(M);if(B(N=>({...N,progress:he})),M<1)E(x);else{const N=qe.current;let Z;e!==g?Z=Re.current-N:Z=Re.current+N,wt.current(Z);const $=s[0]!==null?Z+1:Math.max(1,Z);e==="left"?vt.current?.($):yt.current?.($),N===1&&e===g?B(Ne):Ge(1,()=>{B(Ne)})}};E(x)},[w,g,s,Ge,E]),Zt=t.useCallback(()=>{const e=q.current,r=w*e.progress,a=e.progress;B(m=>({...m,auto:!0}));let u=null;const p=m=>{u===null&&(u=m);const k=m-u;let x=a-a*k/r;if(x<0&&(x=0),B(R=>({...R,progress:x})),x>0)E(p);else{const R=Re.current;n(R),Ce(R+1);const O=qe.current,M=q.current.direction;O===1&&M!==g?B(Ne):Ge(1,()=>{B(Ne)})}};E(p)},[w,g,Ge,E]),pn=t.useCallback(()=>{te&&G("left",!0)},[te,G]),mn=t.useCallback(()=>{ne&&G("right",!0)},[ne,G]),Pe=t.useCallback((e,r)=>{const a=o.current;if(!a)return;let u,p;if(r){const V=a.getBoundingClientRect();u=r.pageX-V.left,p=r.pageY-V.top}else u=a.clientWidth/2,p=a.clientHeight/2;const m=ve.current,k=e,x=a.scrollLeft,R=a.scrollTop,O=u+x,M=p+R,he=O/m*k-u,N=M/m*k-p;pt(!0),It.current?.(e);let Z=null;const $=V=>{Z===null&&(Z=V);const Ze=V-Z;let K=Ze/v;K>1&&(K=1),K=At(K),ot(m+(k-m)*K),Te.current=x+(he-x)*K,je.current=R+(N-R)*K,Ze<v?E($):(Mt.current?.(e),pt(!1),ot(e),Te.current=he,je.current=N)};E($),k>1&&Ae(!0)},[v,o,Ae,E]),ze=t.useCallback(e=>{if(!ie)return;const r=Ve.current+1;st(r),Pe(f[r],e)},[ie,f,Pe]),Oe=t.useCallback(e=>{if(!le)return;const r=Ve.current-1;st(r),Pe(f[r],e)},[le,f,Pe]),Wt=t.useCallback(e=>{const r=(Ve.current+1)%f.length;st(r),Pe(f[r],e)},[f,Pe]),gt=t.useCallback(e=>{if(e===null||e===Qe)return;let r;s[0]===null?h===2&&e===1?r=0:r=e:r=e-1,(h===2&&r>0&&s[0]===null||h===2&&s[0]!==null)&&(r=r&-2),H(r),ae.current=1/0,ce.current=-1/0},[Qe,s,h,H]),Nt=t.useRef(gt);Nt.current=gt;const $t=t.useCallback((e,r)=>{const a=o.current;a&&(a.scrollLeft=kt.current-e,a.scrollTop=xt.current-r,Te.current=a.scrollLeft,je.current=a.scrollTop)},[o]),ye=t.useCallback(e=>{if(be.current=e.pageX,bt.current=e.pageY,ke.current=0,ve.current<=1)z&&(xe.current="grab");else{const r=o.current;r&&(kt.current=r.scrollLeft,xt.current=r.scrollTop),xe.current="all-scroll"}},[z,o]),Ie=t.useCallback(e=>{if(be.current===null)return!1;const r=e.pageX-be.current,a=e.pageY-bt.current;if(ke.current=Math.max(ke.current,Math.abs(r)),ke.current=Math.max(ke.current,Math.abs(a)),ve.current>1)return Y.current||$t(r,a),!1;if(!z||Math.abs(a)>Math.abs(r)||!Number.isFinite(P)||P<=0)return!1;xe.current="grabbing",mt(p=>p+1);const u=q.current;return r>0?(u.direction===null&&te&&r>=S&&G("left",!1),q.current.direction==="left"&&B(p=>({...p,progress:Math.min(r/P,1)}))):(u.direction===null&&ne&&r<=-S&&G("right",!1),q.current.direction==="right"&&B(p=>({...p,progress:Math.min(-r/P,1)}))),!0},[z,te,ne,S,G,P,$t]),Me=t.useCallback(e=>{if(be.current===null)return;U&&ke.current<S&&Wt(e);const r=q.current;r.direction!==null&&!r.auto&&(r.progress>1/4?ft(r.direction):Zt()),be.current=null,xe.current=null,mt(a=>a+1)},[U,S,Wt,ft,Zt]),bn=t.useCallback(e=>{Y.current=!0,ye(e.changedTouches[0])},[ye]),kn=t.useCallback(e=>{if(Ie(e.changedTouches[0])){e.cancelable&&e.preventDefault();return}z&&ve.current<=1&&be.current!==null&&e.cancelable&&e.preventDefault()},[z,Ie]),xn=t.useCallback(e=>{Me(e.changedTouches[0])},[Me]),Rn=t.useCallback(e=>{if(Ke.current=!0,!Y.current&&e.button===0){ye(e);try{e.target.setPointerCapture(e.pointerId)}catch{}}},[ye]),vn=t.useCallback(e=>{Y.current||Ie(e)},[Ie]),Pn=t.useCallback(e=>{if(!Y.current){Me(e);try{e.target.releasePointerCapture(e.pointerId)}catch{}}},[Me]),yn=t.useCallback(e=>{Y.current||Ke.current||e.button===0&&ye(e)},[ye]),In=t.useCallback(e=>{Y.current||Ke.current||Ie(e)},[Ie]),Mn=t.useCallback(e=>{Y.current||Ke.current||Me(e)},[Me]),wn=t.useCallback(e=>{if(se==="scroll"&&ve.current>1&&!Y.current){const r=o.current;r&&(r.scrollLeft+=e.deltaX,r.scrollTop+=e.deltaY,Te.current=r.scrollLeft,je.current=r.scrollTop),e.cancelable&&e.preventDefault()}se==="zoom"&&(e.deltaY>=100?(Oe(e),e.cancelable&&e.preventDefault()):e.deltaY<=-100&&(ze(e),e.cancelable&&e.preventDefault()))},[se,o,Oe,ze]),Ln=t.useCallback(e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),te&&G("left",!0);break;case"ArrowRight":e.preventDefault(),ne&&G("right",!0);break;case"+":case"=":e.preventDefault(),ie&&ze();break;case"-":e.preventDefault(),le&&Oe();break}},[te,ne,ie,le,G,ze,Oe]);t.useEffect(()=>{pe===2&&H(e=>{const r=e&-2;return r===0&&d?e:r}),ae.current=1/0,ce.current=-1/0},[nt,pe,d,H]);const Xt=t.useRef(Ae);return Xt.current=Ae,t.useEffect(()=>{n(F),Ce(F+1),Xt.current()},[F]),t.useEffect(()=>{if(Fe.current||Ue===null)return;Fe.current=!0;const e=()=>{E(()=>{at(r=>{const a=Ft.current;if(r===null)return Fe.current=!1,a;const u=a-r;return Math.abs(u)<.5?(Fe.current=!1,a):(e(),r+u*.1)})})};e()},[de,E]),t.useEffect(()=>{const e=o.current;e&&(e.scrollLeft=Dt)},[Dt,o]),t.useEffect(()=>{const e=o.current;e&&(e.scrollTop=zt)},[zt,o]),t.useEffect(()=>{St()},[s,St]),t.useEffect(()=>{Nt.current(re)},[re]),t.useEffect(()=>{ot(f[0])},[]),t.useEffect(()=>{const e=ct.current;return()=>{e.forEach(cancelAnimationFrame),e.clear()}},[]),{viewWidth:i,viewHeight:_,pageWidth:P,pageHeight:ue,xMargin:A,yMargin:fe,displayedPages:h,zoom:l,centerOffsetSmoothed:De,page:Qe,numPages:Lt,leftPage:it,rightPage:lt,showLeftPage:en,showRightPage:tn,pageUrlLoading:Vt,loadImage:qt,flip:I,flipOpacity:sn,polygonArray:hn,polygonWidth:nn,polygonHeight:rn,polygonBgSize:on,canFlipLeft:te,canFlipRight:ne,canZoomIn:ie,canZoomOut:le,boundingLeft:ge,boundingRight:Ee,cursor:an,viewportClass:ln,flipLeft:pn,flipRight:mn,zoomIn:ze,zoomOut:Oe,goToPage:gt,apiRef:Ct,handlers:{onTouchStart:bn,onTouchMove:kn,onTouchEnd:xn,onPointerDown:Rn,onPointerMove:vn,onPointerUp:Pn,onMouseDown:yn,onMouseMove:In,onMouseUp:Mn,onWheel:wn,onKeyDown:Ln},onImageLoad:Qt}}const Qn=t.forwardRef(function({pages:o,pagesHiRes:s,pageLabels:b,flipDuration:w,zoomDuration:v,zooms:D,perspective:L,nPolygons:y,ambient:j,gloss:C,swipeMin:S,singlePage:X,forwardDirection:g,centering:Q,startPage:re,loadingImage:oe,clickToZoom:U,dragToFlip:z,wheel:se,page:J,onPageChange:ee,onFlipLeftStart:f,onFlipLeftEnd:d,onFlipRightStart:i,onFlipRightEnd:_,onZoomStart:pe,onZoomEnd:nt,children:rt,className:Xe,...we},F){const H=t.useRef(null),n=Vn({pages:o,pagesHiRes:s,flipDuration:w,zoomDuration:v,zooms:D,perspective:L,nPolygons:y,ambient:j,gloss:C,swipeMin:S,singlePage:X,forwardDirection:g,centering:Q,startPage:re,loadingImage:oe,clickToZoom:U,dragToFlip:z,wheel:se,page:J,onPageChange:ee,onFlipLeftStart:f,onFlipLeftEnd:d,onFlipRightStart:i,onFlipRightEnd:_,onZoomStart:pe,onZoomEnd:nt},H);t.useImperativeHandle(F,()=>({get flipLeft(){return n.flipLeft},get flipRight(){return n.flipRight},get zoomIn(){return n.zoomIn},get zoomOut(){return n.zoomOut},get goToPage(){return n.goToPage},get canFlipLeft(){return n.apiRef.current.canFlipLeft},get canFlipRight(){return n.apiRef.current.canFlipRight},get canZoomIn(){return n.apiRef.current.canZoomIn},get canZoomOut(){return n.apiRef.current.canZoomOut},get page(){return n.apiRef.current.page},get numPages(){return n.apiRef.current.numPages}}),[n.flipLeft,n.flipRight,n.zoomIn,n.zoomOut,n.goToPage,n.apiRef]);const Le=l=>b&&b[l]?b[l]:`Page ${l+1}`,Ce=Xe?`${T.root} ${Xe}`:T.root;return W.jsxs("div",{...we,className:Ce,role:"document","aria-label":`Book viewer, page ${n.page} of ${n.numPages}`,"aria-roledescription":"flipbook",children:[rt?.({canFlipLeft:n.canFlipLeft,canFlipRight:n.canFlipRight,canZoomIn:n.canZoomIn,canZoomOut:n.canZoomOut,page:n.page,numPages:n.numPages,flipLeft:n.flipLeft,flipRight:n.flipRight,zoomIn:n.zoomIn,zoomOut:n.zoomOut,goToPage:n.goToPage}),W.jsx("div",{ref:H,className:n.viewportClass,style:{cursor:n.cursor==="grabbing"?"grabbing":"auto"},tabIndex:0,onKeyDown:n.handlers.onKeyDown,onTouchMove:n.handlers.onTouchMove,onPointerMove:n.handlers.onPointerMove,onMouseMove:n.handlers.onMouseMove,onTouchEnd:n.handlers.onTouchEnd,onTouchCancel:n.handlers.onTouchEnd,onPointerUp:n.handlers.onPointerUp,onPointerCancel:n.handlers.onPointerUp,onMouseUp:n.handlers.onMouseUp,onWheel:n.handlers.onWheel,children:W.jsxs("div",{className:T.container,style:{transform:`scale(${n.zoom})`},children:[W.jsx("div",{role:"button",tabIndex:n.canFlipLeft?0:-1,"aria-label":"Previous page","aria-disabled":!n.canFlipLeft,className:T.clickLeft,style:{cursor:n.canFlipLeft?"pointer":"auto"},onClick:n.flipLeft,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),n.flipLeft())}}),W.jsx("div",{role:"button",tabIndex:n.canFlipRight?0:-1,"aria-label":"Next page","aria-disabled":!n.canFlipRight,className:T.clickRight,style:{cursor:n.canFlipRight?"pointer":"auto"},onClick:n.flipRight,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),n.flipRight())}}),W.jsxs("div",{style:{transform:`translateX(${n.centerOffsetSmoothed}px)`},children:[n.showLeftPage&&W.jsx("img",{className:T.page,style:{width:n.pageWidth+"px",height:n.pageHeight+"px",left:n.xMargin+"px",top:n.yMargin+"px"},src:n.pageUrlLoading(n.leftPage,!0)??void 0,alt:Le(n.leftPage),onLoad:n.onImageLoad}),n.showRightPage&&W.jsx("img",{className:T.page,style:{width:n.pageWidth+"px",height:n.pageHeight+"px",left:n.viewWidth/2+"px",top:n.yMargin+"px"},src:n.pageUrlLoading(n.rightPage,!0)??void 0,alt:Le(n.rightPage),onLoad:n.onImageLoad}),W.jsx("div",{style:{opacity:n.flipOpacity},children:n.polygonArray.map(l=>W.jsx("div",{className:l.bgImage?T.polygon:T.polygonBlank,style:{backgroundImage:l.bgImage?`url(${n.loadImage(l.bgImage)})`:void 0,backgroundSize:n.polygonBgSize,backgroundPosition:l.bgPos,width:n.polygonWidth,height:n.polygonHeight,transform:l.transform,zIndex:l.z},children:l.lighting&&W.jsx("div",{className:T.lighting,style:{backgroundImage:l.lighting}})},l.key))}),W.jsx("div",{className:T.boundingBox,style:{left:n.boundingLeft+"px",top:n.yMargin+"px",width:n.boundingRight-n.boundingLeft+"px",height:n.pageHeight+"px",cursor:n.cursor},onTouchStart:n.handlers.onTouchStart,onPointerDown:n.handlers.onPointerDown,onMouseDown:n.handlers.onMouseDown})]})]})}),W.jsxs("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:T.srOnly,children:["Page ",n.page," of ",n.numPages]})]})});exports.Flipbook=Qn;

package/dist/react-flipbook.css

@@ -1 +1 @@
-._root_1ydjt_1{display:flex;flex-direction:column;width:100%;height:100%}._viewport_1ydjt_8{width:100%;flex:1;min-height:0}._viewportZoom_1ydjt_14{overflow:scroll}._viewportZoomDragToScroll_1ydjt_19{overflow:hidden}._container_1ydjt_24{position:relative;width:100%;height:100%;transform-origin:top left;-webkit-user-select:none;user-select:none}._clickToFlip_1ydjt_32{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;user-select:none}._clickLeft_1ydjt_40{left:0}._clickRight_1ydjt_45{right:0}._boundingBox_1ydjt_50{position:absolute;-webkit-user-select:none;user-select:none}._page_1ydjt_55{position:absolute;backface-visibility:hidden}._polygon_1ydjt_60{position:absolute;top:0;left:0;background-repeat:no-repeat;backface-visibility:hidden;transform-origin:center left}._polygonBlank_1ydjt_69{background-color:var(--flipbook-blank-page-bg, #ddd)}._lighting_1ydjt_74{width:100%;height:100%}._srOnly_1ydjt_79{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
+._root_jjdx8_1{display:flex;flex-direction:column;width:100%;height:100%}._viewport_jjdx8_8{width:100%;flex:1;min-height:0;touch-action:none;overscroll-behavior:contain}._viewportZoom_jjdx8_16{overflow:scroll;touch-action:pan-x pan-y}._viewportZoomDragToScroll_jjdx8_22{overflow:hidden}._container_jjdx8_27{position:relative;width:100%;height:100%;transform-origin:top left;-webkit-user-select:none;user-select:none}._clickToFlip_jjdx8_35{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;user-select:none}._clickLeft_jjdx8_43{left:0}._clickRight_jjdx8_48{right:0}._boundingBox_jjdx8_53{position:absolute;-webkit-user-select:none;user-select:none}._page_jjdx8_58{position:absolute;backface-visibility:hidden}._polygon_jjdx8_63{position:absolute;top:0;left:0;background-repeat:no-repeat;backface-visibility:hidden;transform-origin:center left}._polygonBlank_jjdx8_72{background-color:var(--flipbook-blank-page-bg, #ddd)}._lighting_jjdx8_77{width:100%;height:100%}._srOnly_jjdx8_82{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

package/dist/react-flipbook.js

@@ -1,11 +1,11 @@
 import { jsxs as oe, jsx as tt } from "react/jsx-runtime";
-import { useState as T, useEffect as N, useRef as u, useCallback as f, useMemo as Ve, forwardRef as En, useImperativeHandle as Zn } from "react";
-function be(c) {
+import { useState as T, useEffect as $, useRef as u, useCallback as f, useMemo as Ve, forwardRef as Cn, useImperativeHandle as En } from "react";
+function ve(c) {
   if (c && c.constructor === Array) {
-    var r = c.filter(function(b) {
-      return typeof b == "number";
-    }).filter(function(b) {
-      return !isNaN(b);
+    var r = c.filter(function(v) {
+      return typeof v == "number";
+    }).filter(function(v) {
+      return !isNaN(v);
     });
     if (c.length === 6 && r.length === 6) {
       var o = Bt();
@@ -20,28 +20,28 @@ function Bt() {
     r % 5 == 0 ? c.push(1) : c.push(0);
   return c;
 }
-function On(c, r) {
-  for (var o = be(c), b = be(r), _ = [], M = 0; M < 4; M++)
-    for (var O = [o[M], o[M + 4], o[M + 8], o[M + 12]], R = 0; R < 4; R++) {
-      var L = R * 4, C = [b[L], b[L + 1], b[L + 2], b[L + 3]], F = O[0] * C[0] + O[1] * C[1] + O[2] * C[2] + O[3] * C[3];
-      _[M + L] = F;
+function Zn(c, r) {
+  for (var o = ve(c), v = ve(r), _ = [], y = 0; y < 4; y++)
+    for (var Z = [o[y], o[y + 4], o[y + 8], o[y + 12]], R = 0; R < 4; R++) {
+      var w = R * 4, z = [v[w], v[w + 1], v[w + 2], v[w + 3]], F = Z[0] * z[0] + Z[1] * z[1] + Z[2] * z[2] + Z[3] * z[3];
+      _[y + w] = F;
     }
   return _;
 }
-function Wn(c) {
+function On(c) {
   var r = Bt();
   return r[11] = -1 / c, r;
 }
-function jn(c) {
+function Wn(c) {
   var r = Math.PI / 180 * c, o = Bt();
   return o[0] = o[10] = Math.cos(r), o[2] = o[8] = Math.sin(r), o[2] *= -1, o;
 }
 function Nn(c) {
-  return "matrix3d(" + be(c).join(", ") + ")";
+  return "matrix3d(" + ve(c).join(", ") + ")";
 }
 function qe(c, r, o) {
-  var b = Bt();
-  return c !== void 0 && r !== void 0 && o !== void 0 && (b[12] = c, b[13] = r, b[14] = o), b;
+  var v = Bt();
+  return c !== void 0 && r !== void 0 && o !== void 0 && (v[12] = c, v[13] = r, v[14] = o), v;
 }
 class ie {
   constructor(r) {
@@ -51,10 +51,10 @@ class ie {
     return new ie(this);
   }
   multiply(r) {
-    this.m = On(this.m, r);
+    this.m = Zn(this.m, r);
   }
   perspective(r) {
-    this.multiply(Wn(r));
+    this.multiply(On(r));
   }
   transformX(r) {
     return (r * this.m[0] + this.m[12]) / (r * this.m[3] + this.m[15]);
@@ -62,82 +62,82 @@ class ie {
   translate(r, o) {
     this.multiply(qe(r, o ?? 0, 0));
   }
-  translate3d(r, o, b) {
-    this.multiply(qe(r, o, b));
+  translate3d(r, o, v) {
+    this.multiply(qe(r, o, v));
   }
   rotateY(r) {
-    this.multiply(jn(r));
+    this.multiply(Wn(r));
   }
   toString() {
     return Nn(this.m);
   }
 }
 function $n(c, r, o) {
-  const [b, _] = T(0), [M, O] = T(0), [R, L] = T(1), [C, F] = T(0);
-  return N(() => {
+  const [v, _] = T(0), [y, Z] = T(0), [R, w] = T(1), [z, F] = T(0);
+  return $(() => {
     const S = () => {
-      const H = c.current;
-      if (!H) return;
-      _(H.clientWidth), O(H.clientHeight);
-      const d = H.clientWidth > H.clientHeight && !r ? 2 : 1;
-      L(d), d === 2 && F((et) => et + 1);
+      const B = c.current;
+      if (!B) return;
+      _(B.clientWidth), Z(B.clientHeight);
+      const d = B.clientWidth > B.clientHeight && !r ? 2 : 1;
+      w(d), d === 2 && F((et) => et + 1);
     };
     return window.addEventListener("resize", S, { passive: !0 }), S(), () => window.removeEventListener("resize", S);
   }, [r, c]), {
-    viewWidth: b,
-    viewHeight: M,
+    viewWidth: v,
+    viewHeight: y,
     rawDisplayedPages: R,
-    pageAlignmentTick: C
+    pageAlignmentTick: z
   };
 }
-function Xn(c, r, o, b, _, M, O) {
-  const [R, L] = T(null), [C, F] = T(null), [S, H] = T({}), d = u({}), et = u({ count: 0, target: 0, cb: null }), ct = u(/* @__PURE__ */ new Set()), at = f(
+function Xn(c, r, o, v, _, y, Z) {
+  const [R, w] = T(null), [z, F] = T(null), [S, B] = T({}), d = u({}), et = u({ count: 0, target: 0, cb: null }), ct = u(/* @__PURE__ */ new Set()), at = f(
     (g, h = !1) => {
-      if (h && _ > 1 && !M) {
+      if (h && _ > 1 && !y) {
         const a = r[g];
         if (a) return a;
       }
       return c[g] ?? null;
     },
-    [c, r, _, M]
+    [c, r, _, y]
   ), A = f(
-    (g) => R === null || S[g] ? g : (d.current[g] || (d.current[g] = null, ct.current.add(g)), O),
-    [R, S, O]
+    (g) => R === null || S[g] ? g : (d.current[g] || (d.current[g] = null, ct.current.add(g)), Z),
+    [R, S, Z]
   );
-  N(() => {
+  $(() => {
     const g = ct.current;
     g.size !== 0 && (g.forEach((h) => {
       if (d.current[h]) return;
       const a = new Image();
       d.current[h] = a, a.onload = () => {
-        H((D) => ({ ...D, [h]: !0 }));
+        B((j) => ({ ...j, [h]: !0 }));
       }, a.src = h;
     }), g.clear());
   });
-  const B = f(
+  const O = f(
     (g, h = !1) => {
       const a = at(g, h);
-      return h && _ > 1 && !M ? a : a ? A(a) : null;
+      return h && _ > 1 && !y ? a : a ? A(a) : null;
     },
-    [at, A, _, M]
+    [at, A, _, y]
   ), st = f(
     (g = !1) => {
       for (let h = o - 3; h <= o + 3; h++)
-        B(h);
+        O(h);
       if (g)
-        for (let h = o; h < o + b; h++) {
+        for (let h = o; h < o + v; h++) {
           const a = r[h];
           if (a && !d.current[a]) {
-            const D = new Image();
-            d.current[a] = D, D.src = a;
+            const j = new Image();
+            d.current[a] = j, j.src = a;
           }
         }
     },
-    [o, b, r, B]
+    [o, v, r, O]
   ), nt = f(
     (g) => {
       const h = g.target;
-      R === null && (L(h.naturalWidth), F(h.naturalHeight));
+      R === null && (w(h.naturalWidth), F(h.naturalHeight));
       const a = et.current;
       a.cb && (a.count++, a.count >= a.target && (a.cb(), a.cb = null));
     },
@@ -150,17 +150,17 @@ function Xn(c, r, o, b, _, M, O) {
   );
   return {
     imageWidth: R,
-    imageHeight: C,
+    imageHeight: z,
     loadedImages: S,
     pageUrl: at,
     loadImage: A,
-    pageUrlLoading: B,
+    pageUrlLoading: O,
     preloadImages: st,
     onImageLoad: nt,
     setImageLoadCallback: rt
   };
 }
-const Hn = "data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%20viewBox='0%200%20500%20500'%20fill='transparent'%20style='background-color:%20%23fff'%3e%3ccircle%20cx='250'%20cy='250'%20r='48'%20stroke='%23333'%20stroke-width='2'%20stroke-dasharray='271%2030'%20%3e%3canimateTransform%20attributeName='transform'%20attributeType='XML'%20type='rotate'%20from='0%20250%20250'%20to='360%20250%20250'%20dur='1s'%20repeatCount='indefinite'%20/%3e%3c/circle%3e%3c/svg%3e", Bn = "_root_1ydjt_1", Un = "_viewport_1ydjt_8", Yn = "_viewportZoom_1ydjt_14 _viewport_1ydjt_8", An = "_viewportZoomDragToScroll_1ydjt_19 _viewportZoom_1ydjt_14 _viewport_1ydjt_8", Gn = "_container_1ydjt_24", Kn = "_clickLeft_1ydjt_40 _clickToFlip_1ydjt_32", Vn = "_clickRight_1ydjt_45 _clickToFlip_1ydjt_32", qn = "_boundingBox_1ydjt_50", Qn = "_page_1ydjt_55", Jn = "_polygon_1ydjt_60", tr = "_polygonBlank_1ydjt_69 _polygon_1ydjt_60", er = "_lighting_1ydjt_74", nr = "_srOnly_1ydjt_79", z = {
+const Hn = "data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%20viewBox='0%200%20500%20500'%20fill='transparent'%20style='background-color:%20%23fff'%3e%3ccircle%20cx='250'%20cy='250'%20r='48'%20stroke='%23333'%20stroke-width='2'%20stroke-dasharray='271%2030'%20%3e%3canimateTransform%20attributeName='transform'%20attributeType='XML'%20type='rotate'%20from='0%20250%20250'%20to='360%20250%20250'%20dur='1s'%20repeatCount='indefinite'%20/%3e%3c/circle%3e%3c/svg%3e", Bn = "_root_jjdx8_1", Un = "_viewport_jjdx8_8", Yn = "_viewportZoom_jjdx8_16 _viewport_jjdx8_8", An = "_viewportZoomDragToScroll_jjdx8_22 _viewportZoom_jjdx8_16 _viewport_jjdx8_8", Gn = "_container_jjdx8_27", Kn = "_clickLeft_jjdx8_43 _clickToFlip_jjdx8_35", Vn = "_clickRight_jjdx8_48 _clickToFlip_jjdx8_35", qn = "_boundingBox_jjdx8_53", Qn = "_page_jjdx8_58", Jn = "_polygon_jjdx8_63", tr = "_polygonBlank_jjdx8_72 _polygon_jjdx8_63", er = "_lighting_jjdx8_77", nr = "_srOnly_jjdx8_82", D = {
   root: Bn,
   viewport: Un,
   viewportZoom: Yn,
@@ -194,59 +194,59 @@ const Ht = {
 function or(c, r) {
   const {
     pages: o,
-    pagesHiRes: b = [],
+    pagesHiRes: v = [],
     flipDuration: _ = 1e3,
-    zoomDuration: M = 500,
-    zooms: O = [1, 2, 4],
+    zoomDuration: y = 500,
+    zooms: Z = [1, 2, 4],
     perspective: R = 2400,
-    nPolygons: L = 10,
-    ambient: C = 0.4,
+    nPolygons: w = 10,
+    ambient: z = 0.4,
     gloss: F = 0.6,
     swipeMin: S = 3,
-    singlePage: H = !1,
+    singlePage: B = !1,
     forwardDirection: d = "right",
     centering: et = !0,
     startPage: ct = null,
     loadingImage: at = Hn,
     clickToZoom: A = !0,
-    dragToFlip: B = !0,
+    dragToFlip: O = !0,
     wheel: st = "scroll",
     page: nt,
     onPageChange: rt
-  } = c, g = O ?? [1], h = o[0] === null, { viewWidth: a, viewHeight: D, rawDisplayedPages: bt, pageAlignmentTick: ce } = $n(
+  } = c, g = Z ?? [1], h = o[0] === null, { viewWidth: a, viewHeight: j, rawDisplayedPages: vt, pageAlignmentTick: ce } = $n(
     r,
-    H
-  ), [ae, Ut] = T(0), _t = nt !== void 0, E = _t ? nt : ae, U = f(
+    B
+  ), [ae, Ut] = T(0), Tt = nt !== void 0, C = Tt ? nt : ae, U = f(
     (t) => {
-      if (_t) {
+      if (Tt) {
         const n = typeof t == "function" ? t(nt) : t;
         rt?.(n);
       } else
         Ut(t);
     },
-    [_t, nt, rt]
-  ), [Yt, e] = T(0), [Rt, Tt] = T(1), [s, se] = T(g[0]), [At, le] = T(0), [Ft, ve] = T(!1), [x, Y] = T(Ht), [Gt, ue] = T(null), [, Pe] = T(0), p = bt === 2 && (h && (E === 0 || E === 1)) ? 1 : bt, tn = Xn(
+    [Tt, nt, rt]
+  ), [Yt, e] = T(0), [Ft, St] = T(1), [s, se] = T(g[0]), [At, le] = T(0), [jt, Pe] = T(!1), [L, Y] = T(Ht), [Gt, ue] = T(null), [, Ie] = T(0), p = vt === 2 && (h && (C === 0 || C === 1)) ? 1 : vt, tn = Xn(
     o,
-    b,
-    E,
+    v,
+    C,
     p,
     s,
-    Ft,
+    jt,
     at
-  ), { imageWidth: vt, imageHeight: Kt, pageUrl: St, loadImage: en, pageUrlLoading: nn, preloadImages: Vt, onImageLoad: rn, setImageLoadCallback: qt } = tn, Dt = u(null), Ie = u(null), Pt = u(0), It = u(null), G = u(!1), Qt = u(!1), lt = u(1 / 0), ut = u(-1 / 0), Me = u(0), we = u(0), zt = u(0), Ct = u(0), Et = u(!1), Q = u(x);
-  Q.current = x;
-  const Mt = u(E);
-  Mt.current = E;
+  ), { imageWidth: Pt, imageHeight: Kt, pageUrl: Dt, loadImage: en, pageUrlLoading: nn, preloadImages: Vt, onImageLoad: rn, setImageLoadCallback: qt } = tn, It = u(null), xe = u(null), xt = u(0), yt = u(null), G = u(!1), Qt = u(!1), lt = u(1 / 0), ut = u(-1 / 0), ye = u(0), Me = u(0), zt = u(0), Ct = u(0), Et = u(!1), Q = u(L);
+  Q.current = L;
+  const Mt = u(C);
+  Mt.current = C;
   const Jt = u(p);
   Jt.current = p;
-  const Zt = u(s);
-  Zt.current = s;
+  const wt = u(s);
+  wt.current = s;
   const te = u(At);
   te.current = At;
-  const Le = u(c.onFlipLeftStart);
-  Le.current = c.onFlipLeftStart;
-  const xe = u(c.onFlipLeftEnd);
-  xe.current = c.onFlipLeftEnd;
+  const we = u(c.onFlipLeftStart);
+  we.current = c.onFlipLeftStart;
+  const Le = u(c.onFlipLeftEnd);
+  Le.current = c.onFlipLeftEnd;
   const ke = u(c.onFlipRightStart);
   ke.current = c.onFlipRightStart;
   const _e = u(c.onFlipRightEnd);
@@ -259,195 +259,195 @@ function or(c, r) {
   on.current = rt;
   const Fe = u(U);
   Fe.current = U;
-  const fe = u(/* @__PURE__ */ new Set()), Z = f((t) => {
+  const fe = u(/* @__PURE__ */ new Set()), E = f((t) => {
     const n = requestAnimationFrame((i) => {
       fe.current.delete(n), t(i);
     });
     return fe.current.add(n), n;
-  }, []), Se = h ? o.length - 1 : o.length, ee = h ? Math.max(1, E) : E + 1, De = u({
+  }, []), Se = h ? o.length - 1 : o.length, ee = h ? Math.max(1, C) : C + 1, je = u({
     canFlipLeft: !1,
     canFlipRight: !1,
     canZoomIn: !1,
     canZoomOut: !1,
     page: 0,
     numPages: 0
-  }), ze = f(() => {
+  }), De = f(() => {
     U((t) => p === 1 && t === 0 && o.length > 0 && !o[0] ? 1 : t);
-  }, [p, o, U]), Ce = !x.direction && E < o.length - p, Ee = !x.direction && E >= p && !(p === 1 && !St(Yt - 1)), ot = d === "left" ? Ce : Ee, it = d === "right" ? Ce : Ee, ft = !Ft && At < g.length - 1, gt = !Ft && At > 0;
-  De.current = { canFlipLeft: ot, canFlipRight: it, canZoomIn: ft, canZoomOut: gt, page: ee, numPages: Se };
-  const ge = d === "right" || p === 1 ? Yt : Rt, de = d === "left" ? Yt : Rt, cn = !!St(ge), an = !!St(de) && p === 2, Ze = vt && Kt ? Math.min(a / p / vt, D / Kt, 1) : 1, w = vt ? Math.round(vt * Ze) : 0, dt = Kt ? Math.round(Kt * Ze) : 0, K = (a - w * p) / 2, ht = (D - dt) / 2, sn = Math.ceil(w / L + 1 / s) + "px", ln = dt + "px", un = `${w}px ${dt}px`, fn = Ve(() => {
-    if (!x.direction || p !== 1) return 1;
-    let t = x.progress;
-    return x.direction !== d && (t = 1 - t), t > 0.7 ? 1 - (t - 0.7) / 0.3 : 1;
-  }, [x.direction, x.progress, p, d]), pt = (() => {
+  }, [p, o, U]), ze = !L.direction && C < o.length - p, Ce = !L.direction && C >= p && !(p === 1 && !Dt(Yt - 1)), ot = d === "left" ? ze : Ce, it = d === "right" ? ze : Ce, ft = !jt && At < g.length - 1, gt = !jt && At > 0;
+  je.current = { canFlipLeft: ot, canFlipRight: it, canZoomIn: ft, canZoomOut: gt, page: ee, numPages: Se };
+  const ge = d === "right" || p === 1 ? Yt : Ft, de = d === "left" ? Yt : Ft, cn = !!Dt(ge), an = !!Dt(de) && p === 2, Ee = Pt && Kt ? Math.min(a / p / Pt, j / Kt, 1) : 1, M = Pt ? Math.round(Pt * Ee) : 0, dt = Kt ? Math.round(Kt * Ee) : 0, K = (a - M * p) / 2, ht = (j - dt) / 2, sn = Math.ceil(M / w + 1 / s) + "px", ln = dt + "px", un = `${M}px ${dt}px`, fn = Ve(() => {
+    if (!L.direction || p !== 1) return 1;
+    let t = L.progress;
+    return L.direction !== d && (t = 1 - t), t > 0.7 ? 1 - (t - 0.7) / 0.3 : 1;
+  }, [L.direction, L.progress, p, d]), pt = (() => {
     if (p === 1) return K;
-    const t = St(ge) ? K : a / 2;
-    return x.direction ? t < lt.current ? t : lt.current : t;
-  })(), Ot = (() => {
+    const t = Dt(ge) ? K : a / 2;
+    return L.direction ? t < lt.current ? t : lt.current : t;
+  })(), Zt = (() => {
     if (p === 1) return a - K;
-    const t = St(de) ? a - K : a / 2;
-    return x.direction ? t > ut.current ? t : ut.current : t;
-  })(), mt = et ? Math.round(a / 2 - (pt + Ot) / 2) : 0, Oe = u(mt);
-  Oe.current = mt;
-  const We = u(p);
-  N(() => {
-    Gt === null && vt !== null && ue(mt);
-  }, [Gt, vt, mt]), N(() => {
-    We.current !== p && (We.current = p, ue(mt), Et.current = !1);
+    const t = Dt(de) ? a - K : a / 2;
+    return L.direction ? t > ut.current ? t : ut.current : t;
+  })(), mt = et ? Math.round(a / 2 - (pt + Zt) / 2) : 0, Ze = u(mt);
+  Ze.current = mt;
+  const Oe = u(p);
+  $(() => {
+    Gt === null && Pt !== null && ue(mt);
+  }, [Gt, Pt, mt]), $(() => {
+    Oe.current !== p && (Oe.current = p, ue(mt), Et.current = !1);
   }, [p, mt]);
-  const Wt = Math.round(Gt ?? 0), gn = It.current ? It.current : A && ft ? "zoom-in" : A && gt ? "zoom-out" : B ? "grab" : "auto", dn = !G.current, hn = (Ft || s > 1) && dn ? z.viewportZoomDragToScroll : Ft || s > 1 ? z.viewportZoom : z.viewport, pn = (() => {
-    const t = (Ot - pt) * s;
-    return t < a ? (pt + Wt) * s - (a - t) / 2 : (pt + Wt) * s;
+  const Ot = Math.round(Gt ?? 0), gn = yt.current ? yt.current : A && ft ? "zoom-in" : A && gt ? "zoom-out" : O ? "grab" : "auto", dn = !G.current, hn = (jt || s > 1) && dn ? D.viewportZoomDragToScroll : jt || s > 1 ? D.viewportZoom : D.viewport, pn = (() => {
+    const t = (Zt - pt) * s;
+    return t < a ? (pt + Ot) * s - (a - t) / 2 : (pt + Ot) * s;
   })(), mn = (() => {
-    const t = (Ot - pt) * s;
-    return t < a ? (pt + Wt) * s - (a - t) / 2 : (Ot + Wt) * s - a;
-  })(), yn = (() => {
-    const t = dt * s;
-    return t < D ? ht * s - (D - t) / 2 : ht * s;
+    const t = (Zt - pt) * s;
+    return t < a ? (pt + Ot) * s - (a - t) / 2 : (Zt + Ot) * s - a;
   })(), bn = (() => {
     const t = dt * s;
-    return t < D ? ht * s - (D - t) / 2 : (ht + dt) * s - D;
-  })(), je = Math.min(mn, Math.max(pn, zt.current)), Ne = Math.min(bn, Math.max(yn, Ct.current)), $e = f(
+    return t < j ? ht * s - (j - t) / 2 : ht * s;
+  })(), vn = (() => {
+    const t = dt * s;
+    return t < j ? ht * s - (j - t) / 2 : (ht + dt) * s - j;
+  })(), We = Math.min(mn, Math.max(pn, zt.current)), Ne = Math.min(vn, Math.max(bn, Ct.current)), $e = f(
     (t, n) => {
       const i = [], l = [-0.5, -0.25, 0, 0.25, 0.5];
-      if (C < 1) {
-        const m = 1 - C, y = l.map((v) => (1 - Math.cos((t - n * v) / 180 * Math.PI)) * m);
+      if (z < 1) {
+        const m = 1 - z, b = l.map((P) => (1 - Math.cos((t - n * P) / 180 * Math.PI)) * m);
         i.push(
-          `linear-gradient(to right,rgba(0,0,0,${y[0]}),rgba(0,0,0,${y[1]}) 25%,rgba(0,0,0,${y[2]}) 50%,rgba(0,0,0,${y[3]}) 75%,rgba(0,0,0,${y[4]}))`
+          `linear-gradient(to right,rgba(0,0,0,${b[0]}),rgba(0,0,0,${b[1]}) 25%,rgba(0,0,0,${b[2]}) 50%,rgba(0,0,0,${b[3]}) 75%,rgba(0,0,0,${b[4]}))`
         );
       }
       if (F > 0) {
-        const v = l.map(
-          (P) => Math.max(
-            Math.pow(Math.cos((t + 30 - n * P) / 180 * Math.PI), 200),
-            Math.pow(Math.cos((t - 30 - n * P) / 180 * Math.PI), 200)
+        const P = l.map(
+          (I) => Math.max(
+            Math.pow(Math.cos((t + 30 - n * I) / 180 * Math.PI), 200),
+            Math.pow(Math.cos((t - 30 - n * I) / 180 * Math.PI), 200)
           )
         );
         i.push(
-          `linear-gradient(to right,rgba(255,255,255,${v[0] * F}),rgba(255,255,255,${v[1] * F}) 25%,rgba(255,255,255,${v[2] * F}) 50%,rgba(255,255,255,${v[3] * F}) 75%,rgba(255,255,255,${v[4] * F}))`
+          `linear-gradient(to right,rgba(255,255,255,${P[0] * F}),rgba(255,255,255,${P[1] * F}) 25%,rgba(255,255,255,${P[2] * F}) 50%,rgba(255,255,255,${P[3] * F}) 75%,rgba(255,255,255,${P[4] * F}))`
         );
       }
       return i.join(",");
     },
-    [C, F]
+    [z, F]
   ), he = f(
     (t) => {
       const n = Q.current;
       if (!n.direction) return [];
-      if (!Number.isFinite(w) || w <= 0 || L <= 0)
+      if (!Number.isFinite(M) || M <= 0 || w <= 0)
         return [];
       let i = n.progress, l = n.direction;
       if (!Number.isFinite(i)) return [];
       i < 0 && (i = 0), i > 1 && (i = 1), p === 1 && l !== d && (i = 1 - i, l = d);
-      const m = t === "front" ? n.frontImage : n.backImage, y = w / L;
-      let v = K, P = !1;
-      p === 1 ? d === "right" ? t === "back" && (P = !0, v = K - w) : l === "left" ? t === "back" ? v = w - K : P = !0 : t === "front" ? v = w - K : P = !0 : l === "left" ? t === "back" ? v = a / 2 : P = !0 : t === "front" ? v = a / 2 : P = !0;
-      const I = new ie();
-      I.translate(a / 2), I.perspective(R), I.translate(-a / 2), I.translate(v, ht);
+      const m = t === "front" ? n.frontImage : n.backImage, b = M / w;
+      let P = K, I = !1;
+      p === 1 ? d === "right" ? t === "back" && (I = !0, P = K - M) : l === "left" ? t === "back" ? P = M - K : I = !0 : t === "front" ? P = M - K : I = !0 : l === "left" ? t === "back" ? P = a / 2 : I = !0 : t === "front" ? P = a / 2 : I = !0;
+      const x = new ie();
+      x.translate(a / 2), x.perspective(R), x.translate(-a / 2), x.translate(P, ht);
       let W = 0;
-      i > 0.5 && (W = -(i - 0.5) * 2 * 180), l === "left" && (W = -W), t === "back" && (W += 180), W && (P && I.translate(w), I.rotateY(W), P && I.translate(-w));
+      i > 0.5 && (W = -(i - 0.5) * 2 * 180), l === "left" && (W = -W), t === "back" && (W += 180), W && (I && x.translate(M), x.rotateY(W), I && x.translate(-M));
       let k;
       i < 0.5 ? k = i * 2 * Math.PI : k = (1 - (i - 0.5) * 2) * Math.PI, k === 0 && (k = 1e-9);
-      const yt = w / k;
-      let $ = 0;
-      const j = k / L;
-      let X = j / 2 / Math.PI * 180;
-      const J = j / Math.PI * 180;
-      P && (X = -k / Math.PI * 180 + J / 2), t === "back" && (X = -X);
+      const bt = M / k;
+      let X = 0;
+      const N = k / w;
+      let H = N / 2 / Math.PI * 180;
+      const J = N / Math.PI * 180;
+      I && (H = -k / Math.PI * 180 + J / 2), t === "back" && (H = -H);
       const $t = t === "back" ? -J : J;
       lt.current = 1 / 0, ut.current = -1 / 0;
       const q = [];
-      for (let ne = 0; ne < L; ne++) {
-        const zn = `${ne / (L - 1) * 100}% 0px`, Xt = I.clone(), Ae = P ? k - $ : $;
-        let ye = Math.sin(Ae) * yt;
-        P && (ye = w - ye);
-        let re = (1 - Math.cos(Ae)) * yt;
-        t === "back" && (re = -re), Xt.translate3d(ye, 0, re), Xt.rotateY(-X);
-        const Ge = Xt.transformX(0), Ke = Xt.transformX(y);
+      for (let ne = 0; ne < w; ne++) {
+        const Dn = `${ne / (w - 1) * 100}% 0px`, Xt = x.clone(), Ae = I ? k - X : X;
+        let be = Math.sin(Ae) * bt;
+        I && (be = M - be);
+        let re = (1 - Math.cos(Ae)) * bt;
+        t === "back" && (re = -re), Xt.translate3d(be, 0, re), Xt.rotateY(-H);
+        const Ge = Xt.transformX(0), Ke = Xt.transformX(b);
         ut.current = Math.max(Math.max(Ge, Ke), ut.current), lt.current = Math.min(Math.min(Ge, Ke), lt.current);
-        const Cn = $e(W - X, $t);
-        $ += j, X += $t, q.push({
+        const zn = $e(W - H, $t);
+        X += N, H += $t, q.push({
           key: t + ne,
           bgImage: m,
-          lighting: Cn,
-          bgPos: zn,
+          lighting: zn,
+          bgPos: Dn,
           transform: Xt.toString(),
           z: Math.abs(Math.round(re))
         });
       }
       return q;
     },
-    [p, d, w, K, ht, a, R, L, $e]
-  ), vn = Ve(() => x.direction ? [...he("front"), ...he("back")] : [], [x.direction, x.progress, x.frontImage, x.backImage, he]), V = f(
+    [p, d, M, K, ht, a, R, w, $e]
+  ), Pn = Ve(() => L.direction ? [...he("front"), ...he("back")] : [], [L.direction, L.progress, L.frontImage, L.backImage, he]), V = f(
     (t, n) => {
       const i = Mt.current, l = Jt.current;
-      let m = null, y = null;
-      t !== d ? l === 1 ? (m = o[i - 1] ?? null, y = null) : (m = o[d === "right" || l === 1 ? i : i + 1] ?? null, y = o[i - l + 1] ?? null) : l === 1 ? (m = o[i] ?? null, y = null) : (m = o[d === "left" ? i : i + 1] ?? null, y = o[i + l] ?? null), Y({
+      let m = null, b = null;
+      t !== d ? l === 1 ? (m = o[i - 1] ?? null, b = null) : (m = o[d === "right" || l === 1 ? i : i + 1] ?? null, b = o[i - l + 1] ?? null) : l === 1 ? (m = o[i] ?? null, b = null) : (m = o[d === "left" ? i : i + 1] ?? null, b = o[i + l] ?? null), Y({
         progress: 0,
         direction: t,
         frontImage: m,
-        backImage: y,
+        backImage: b,
         auto: !1
-      }), Z(() => {
-        Z(() => {
-          t !== d ? l === 2 && e(i - l) : l === 1 ? e(i + l) : Tt(i + 1 + l), n && pe(t);
+      }), E(() => {
+        E(() => {
+          t !== d ? l === 2 && e(i - l) : l === 1 ? e(i + l) : St(i + 1 + l), n && pe(t);
         });
       });
     },
-    [d, o, Z]
+    [d, o, E]
   ), pe = f(
     (t) => {
       const n = Q.current, i = _ * (1 - n.progress), l = n.progress;
-      Y((I) => ({ ...I, auto: !0 }));
-      const m = Mt.current, y = o[0] !== null ? m + 1 : Math.max(1, m);
-      t === "left" ? Le.current?.(y) : ke.current?.(y);
-      let v = null;
-      const P = (I) => {
-        v === null && (v = I);
-        const W = I - v;
+      Y((x) => ({ ...x, auto: !0 }));
+      const m = Mt.current, b = o[0] !== null ? m + 1 : Math.max(1, m);
+      t === "left" ? we.current?.(b) : ke.current?.(b);
+      let P = null;
+      const I = (x) => {
+        P === null && (P = x);
+        const W = x - P;
         let k = l + W / i;
         k > 1 && (k = 1);
-        const yt = Qe(k);
-        if (Y(($) => ({ ...$, progress: yt })), k < 1)
-          Z(P);
+        const bt = Qe(k);
+        if (Y((X) => ({ ...X, progress: bt })), k < 1)
+          E(I);
         else {
-          const $ = Jt.current;
-          let j;
-          t !== d ? j = Mt.current - $ : j = Mt.current + $, Fe.current(j);
-          const X = o[0] !== null ? j + 1 : Math.max(1, j);
-          t === "left" ? xe.current?.(X) : _e.current?.(X), $ === 1 && t === d ? Y(Ht) : qt(1, () => {
+          const X = Jt.current;
+          let N;
+          t !== d ? N = Mt.current - X : N = Mt.current + X, Fe.current(N);
+          const H = o[0] !== null ? N + 1 : Math.max(1, N);
+          t === "left" ? Le.current?.(H) : _e.current?.(H), X === 1 && t === d ? Y(Ht) : qt(1, () => {
             Y(Ht);
           });
         }
       };
-      Z(P);
+      E(I);
     },
-    [_, d, o, qt, Z]
+    [_, d, o, qt, E]
   ), Xe = f(() => {
     const t = Q.current, n = _ * t.progress, i = t.progress;
-    Y((y) => ({ ...y, auto: !0 }));
+    Y((b) => ({ ...b, auto: !0 }));
     let l = null;
-    const m = (y) => {
-      l === null && (l = y);
-      const v = y - l;
-      let P = i - i * v / n;
-      if (P < 0 && (P = 0), Y((I) => ({ ...I, progress: P })), P > 0)
-        Z(m);
+    const m = (b) => {
+      l === null && (l = b);
+      const P = b - l;
+      let I = i - i * P / n;
+      if (I < 0 && (I = 0), Y((x) => ({ ...x, progress: I })), I > 0)
+        E(m);
       else {
-        const I = Mt.current;
-        e(I), Tt(I + 1);
+        const x = Mt.current;
+        e(x), St(x + 1);
         const W = Jt.current, k = Q.current.direction;
         W === 1 && k !== d ? Y(Ht) : qt(1, () => {
           Y(Ht);
         });
       }
     };
-    Z(m);
-  }, [_, d, qt, Z]), Pn = f(() => {
+    E(m);
+  }, [_, d, qt, E]), In = f(() => {
     ot && V("left", !0);
-  }, [ot, V]), In = f(() => {
+  }, [ot, V]), xn = f(() => {
     it && V("right", !0);
-  }, [it, V]), wt = f(
+  }, [it, V]), Lt = f(
     (t, n) => {
       const i = r.current;
       if (!i) return;
@@ -457,38 +457,38 @@ function or(c, r) {
         l = n.pageX - J.left, m = n.pageY - J.top;
       } else
         l = i.clientWidth / 2, m = i.clientHeight / 2;
-      const y = Zt.current, v = t, P = i.scrollLeft, I = i.scrollTop, W = l + P, k = m + I, yt = W / y * v - l, $ = k / y * v - m;
-      ve(!0), Re.current?.(t);
-      let j = null;
-      const X = (J) => {
-        j === null && (j = J);
-        const $t = J - j;
-        let q = $t / M;
-        q > 1 && (q = 1), q = Qe(q), se(y + (v - y) * q), zt.current = P + (yt - P) * q, Ct.current = I + ($ - I) * q, $t < M ? Z(X) : (Te.current?.(t), ve(!1), se(t), zt.current = yt, Ct.current = $);
+      const b = wt.current, P = t, I = i.scrollLeft, x = i.scrollTop, W = l + I, k = m + x, bt = W / b * P - l, X = k / b * P - m;
+      Pe(!0), Re.current?.(t);
+      let N = null;
+      const H = (J) => {
+        N === null && (N = J);
+        const $t = J - N;
+        let q = $t / y;
+        q > 1 && (q = 1), q = Qe(q), se(b + (P - b) * q), zt.current = I + (bt - I) * q, Ct.current = x + (X - x) * q, $t < y ? E(H) : (Te.current?.(t), Pe(!1), se(t), zt.current = bt, Ct.current = X);
       };
-      Z(X), v > 1 && Vt(!0);
+      E(H), P > 1 && Vt(!0);
     },
-    [M, r, Vt, Z]
-  ), jt = f(
+    [y, r, Vt, E]
+  ), Wt = f(
     (t) => {
       if (!ft) return;
       const n = te.current + 1;
-      le(n), wt(g[n], t);
+      le(n), Lt(g[n], t);
     },
-    [ft, g, wt]
+    [ft, g, Lt]
   ), Nt = f(
     (t) => {
       if (!gt) return;
       const n = te.current - 1;
-      le(n), wt(g[n], t);
+      le(n), Lt(g[n], t);
     },
-    [gt, g, wt]
+    [gt, g, Lt]
   ), He = f(
     (t) => {
       const n = (te.current + 1) % g.length;
-      le(n), wt(g[n], t);
+      le(n), Lt(g[n], t);
     },
-    [g, wt]
+    [g, Lt]
   ), me = f(
     (t) => {
       if (t === null || t === ee) return;
@@ -501,112 +501,116 @@ function or(c, r) {
   const Ue = f(
     (t, n) => {
       const i = r.current;
-      i && (i.scrollLeft = Me.current - t, i.scrollTop = we.current - n, zt.current = i.scrollLeft, Ct.current = i.scrollTop);
+      i && (i.scrollLeft = ye.current - t, i.scrollTop = Me.current - n, zt.current = i.scrollLeft, Ct.current = i.scrollTop);
     },
     [r]
-  ), Lt = f(
+  ), kt = f(
     (t) => {
-      if (Dt.current = t.pageX, Ie.current = t.pageY, Pt.current = 0, Zt.current <= 1)
-        B && (It.current = "grab");
+      if (It.current = t.pageX, xe.current = t.pageY, xt.current = 0, wt.current <= 1)
+        O && (yt.current = "grab");
       else {
         const n = r.current;
-        n && (Me.current = n.scrollLeft, we.current = n.scrollTop), It.current = "all-scroll";
+        n && (ye.current = n.scrollLeft, Me.current = n.scrollTop), yt.current = "all-scroll";
       }
     },
-    [B, r]
-  ), xt = f(
+    [O, r]
+  ), _t = f(
     (t) => {
-      if (Dt.current === null) return !1;
-      const n = t.pageX - Dt.current, i = t.pageY - Ie.current;
-      if (Pt.current = Math.max(Pt.current, Math.abs(n)), Pt.current = Math.max(Pt.current, Math.abs(i)), Zt.current > 1)
+      if (It.current === null) return !1;
+      const n = t.pageX - It.current, i = t.pageY - xe.current;
+      if (xt.current = Math.max(xt.current, Math.abs(n)), xt.current = Math.max(xt.current, Math.abs(i)), wt.current > 1)
         return G.current || Ue(n, i), !1;
-      if (!B || Math.abs(i) > Math.abs(n) || !Number.isFinite(w) || w <= 0) return !1;
-      It.current = "grabbing", Pe((m) => m + 1);
+      if (!O || Math.abs(i) > Math.abs(n) || !Number.isFinite(M) || M <= 0) return !1;
+      yt.current = "grabbing", Ie((m) => m + 1);
       const l = Q.current;
       return n > 0 ? (l.direction === null && ot && n >= S && V("left", !1), Q.current.direction === "left" && Y((m) => ({
         ...m,
-        progress: Math.min(n / w, 1)
+        progress: Math.min(n / M, 1)
       }))) : (l.direction === null && it && n <= -S && V("right", !1), Q.current.direction === "right" && Y((m) => ({
         ...m,
-        progress: Math.min(-n / w, 1)
+        progress: Math.min(-n / M, 1)
       }))), !0;
     },
-    [B, ot, it, S, V, w, Ue]
-  ), kt = f(
+    [O, ot, it, S, V, M, Ue]
+  ), Rt = f(
     (t) => {
-      if (Dt.current === null) return;
-      A && Pt.current < S && He(t);
+      if (It.current === null) return;
+      A && xt.current < S && He(t);
       const n = Q.current;
-      n.direction !== null && !n.auto && (n.progress > 1 / 4 ? pe(n.direction) : Xe()), Dt.current = null, It.current = null, Pe((i) => i + 1);
+      n.direction !== null && !n.auto && (n.progress > 1 / 4 ? pe(n.direction) : Xe()), It.current = null, yt.current = null, Ie((i) => i + 1);
     },
     [A, S, He, pe, Xe]
+  ), yn = f(
+    (t) => {
+      G.current = !0, kt(t.changedTouches[0]);
+    },
+    [kt]
   ), Mn = f(
     (t) => {
-      G.current = !0, Lt(t.changedTouches[0]);
+      if (_t(t.changedTouches[0])) {
+        t.cancelable && t.preventDefault();
+        return;
+      }
+      O && wt.current <= 1 && It.current !== null && t.cancelable && t.preventDefault();
     },
-    [Lt]
+    [O, _t]
   ), wn = f(
     (t) => {
-      xt(t.changedTouches[0]) && t.cancelable && t.preventDefault();
+      Rt(t.changedTouches[0]);
     },
-    [xt]
+    [Rt]
   ), Ln = f(
-    (t) => {
-      kt(t.changedTouches[0]);
-    },
-    [kt]
-  ), xn = f(
     (t) => {
       if (Qt.current = !0, !G.current && t.button === 0) {
-        Lt(t);
+        kt(t);
         try {
           t.target.setPointerCapture(t.pointerId);
         } catch {
         }
       }
     },
-    [Lt]
+    [kt]
   ), kn = f(
     (t) => {
-      G.current || xt(t);
+      G.current || _t(t);
     },
-    [xt]
+    [_t]
   ), _n = f(
     (t) => {
       if (!G.current) {
-        kt(t);
+        Rt(t);
         try {
           t.target.releasePointerCapture(t.pointerId);
         } catch {
         }
       }
     },
-    [kt]
+    [Rt]
   ), Rn = f(
     (t) => {
-      G.current || Qt.current || t.button === 0 && Lt(t);
+      G.current || Qt.current || t.button === 0 && kt(t);
     },
-    [Lt]
+    [kt]
   ), Tn = f(
     (t) => {
-      G.current || Qt.current || xt(t);
+      G.current || Qt.current || _t(t);
     },
-    [xt]
+    [_t]
   ), Fn = f(
     (t) => {
-      G.current || Qt.current || kt(t);
+      G.current || Qt.current || Rt(t);
     },
-    [kt]
+    [Rt]
   ), Sn = f(
     (t) => {
-      if (st === "scroll" && Zt.current > 1 && !G.current) {
+      if (st === "scroll" && wt.current > 1 && !G.current) {
         const n = r.current;
         n && (n.scrollLeft += t.deltaX, n.scrollTop += t.deltaY, zt.current = n.scrollLeft, Ct.current = n.scrollTop), t.cancelable && t.preventDefault();
       }
-      st === "zoom" && (t.deltaY >= 100 ? (Nt(t), t.cancelable && t.preventDefault()) : t.deltaY <= -100 && (jt(t), t.cancelable && t.preventDefault()));
+      st === "zoom" && (t.deltaY >= 100 ? (Nt(t), t.cancelable && t.preventDefault()) : t.deltaY <= -100 && (Wt(t), t.cancelable && t.preventDefault()));
     },
-    [st, r, Nt, jt]
-  ), Dn = f(
+    [st, r, Nt, Wt]
+  ), jn = f(
     (t) => {
       switch (t.key) {
         case "ArrowLeft":
@@ -617,31 +621,31 @@ function or(c, r) {
           break;
         case "+":
         case "=":
-          t.preventDefault(), ft && jt();
+          t.preventDefault(), ft && Wt();
           break;
         case "-":
           t.preventDefault(), gt && Nt();
           break;
       }
     },
-    [ot, it, ft, gt, V, jt, Nt]
+    [ot, it, ft, gt, V, Wt, Nt]
   );
-  N(() => {
-    bt === 2 && U((t) => {
+  $(() => {
+    vt === 2 && U((t) => {
       const n = t & -2;
       return n === 0 && h ? t : n;
     }), lt.current = 1 / 0, ut.current = -1 / 0;
-  }, [ce, bt, h, U]);
+  }, [ce, vt, h, U]);
   const Ye = u(Vt);
-  return Ye.current = Vt, N(() => {
-    e(E), Tt(E + 1), Ye.current();
-  }, [E]), N(() => {
+  return Ye.current = Vt, $(() => {
+    e(C), St(C + 1), Ye.current();
+  }, [C]), $(() => {
     if (Et.current || Gt === null) return;
     Et.current = !0;
     const t = () => {
-      Z(() => {
+      E(() => {
         ue((n) => {
-          const i = Oe.current;
+          const i = Ze.current;
           if (n === null)
             return Et.current = !1, i;
           const l = i - n;
@@ -650,19 +654,19 @@ function or(c, r) {
       });
     };
     t();
-  }, [mt, Z]), N(() => {
+  }, [mt, E]), $(() => {
     const t = r.current;
-    t && (t.scrollLeft = je);
-  }, [je, r]), N(() => {
+    t && (t.scrollLeft = We);
+  }, [We, r]), $(() => {
     const t = r.current;
     t && (t.scrollTop = Ne);
-  }, [Ne, r]), N(() => {
-    ze();
-  }, [o, ze]), N(() => {
+  }, [Ne, r]), $(() => {
+    De();
+  }, [o, De]), $(() => {
     Be.current(ct);
-  }, [ct]), N(() => {
+  }, [ct]), $(() => {
     se(g[0]);
-  }, []), N(() => {
+  }, []), $(() => {
     const t = fe.current;
     return () => {
       t.forEach(cancelAnimationFrame), t.clear();
@@ -670,14 +674,14 @@ function or(c, r) {
   }, []), {
     // Layout
     viewWidth: a,
-    viewHeight: D,
-    pageWidth: w,
+    viewHeight: j,
+    pageWidth: M,
     pageHeight: dt,
     xMargin: K,
     yMargin: ht,
     displayedPages: p,
     zoom: s,
-    centerOffsetSmoothed: Wt,
+    centerOffsetSmoothed: Ot,
     // Pages
     page: ee,
     numPages: Se,
@@ -688,9 +692,9 @@ function or(c, r) {
     pageUrlLoading: nn,
     loadImage: en,
     // Flip
-    flip: x,
+    flip: L,
     flipOpacity: fn,
-    polygonArray: vn,
+    polygonArray: Pn,
     polygonWidth: sn,
     polygonHeight: ln,
     polygonBgSize: un,
@@ -701,98 +705,98 @@ function or(c, r) {
     canZoomOut: gt,
     // Bounds
     boundingLeft: pt,
-    boundingRight: Ot,
+    boundingRight: Zt,
     // Cursor
     cursor: gn,
     viewportClass: hn,
     // Actions
-    flipLeft: Pn,
-    flipRight: In,
-    zoomIn: jt,
+    flipLeft: In,
+    flipRight: xn,
+    zoomIn: Wt,
     zoomOut: Nt,
     goToPage: me,
     // Stable ref for imperative API
-    apiRef: De,
+    apiRef: je,
     // Event handlers
     handlers: {
-      onTouchStart: Mn,
-      onTouchMove: wn,
-      onTouchEnd: Ln,
-      onPointerDown: xn,
+      onTouchStart: yn,
+      onTouchMove: Mn,
+      onTouchEnd: wn,
+      onPointerDown: Ln,
       onPointerMove: kn,
       onPointerUp: _n,
       onMouseDown: Rn,
       onMouseMove: Tn,
       onMouseUp: Fn,
       onWheel: Sn,
-      onKeyDown: Dn
+      onKeyDown: jn
     },
     onImageLoad: rn
   };
 }
-const sr = En(
+const sr = Cn(
   function({
     pages: r,
     pagesHiRes: o,
-    pageLabels: b,
+    pageLabels: v,
     flipDuration: _,
-    zoomDuration: M,
-    zooms: O,
+    zoomDuration: y,
+    zooms: Z,
     perspective: R,
-    nPolygons: L,
-    ambient: C,
+    nPolygons: w,
+    ambient: z,
     gloss: F,
     swipeMin: S,
-    singlePage: H,
+    singlePage: B,
     forwardDirection: d,
     centering: et,
     startPage: ct,
     loadingImage: at,
     clickToZoom: A,
-    dragToFlip: B,
+    dragToFlip: O,
     wheel: st,
     page: nt,
     onPageChange: rt,
     onFlipLeftStart: g,
     onFlipLeftEnd: h,
     onFlipRightStart: a,
-    onFlipRightEnd: D,
-    onZoomStart: bt,
+    onFlipRightEnd: j,
+    onZoomStart: vt,
     onZoomEnd: ce,
     children: ae,
     className: Ut,
-    ..._t
-  }, E) {
+    ...Tt
+  }, C) {
     const U = u(null), e = or({
       pages: r,
       pagesHiRes: o,
       flipDuration: _,
-      zoomDuration: M,
-      zooms: O,
+      zoomDuration: y,
+      zooms: Z,
       perspective: R,
-      nPolygons: L,
-      ambient: C,
+      nPolygons: w,
+      ambient: z,
       gloss: F,
       swipeMin: S,
-      singlePage: H,
+      singlePage: B,
       forwardDirection: d,
       centering: et,
       startPage: ct,
       loadingImage: at,
       clickToZoom: A,
-      dragToFlip: B,
+      dragToFlip: O,
       wheel: st,
       page: nt,
       onPageChange: rt,
       onFlipLeftStart: g,
       onFlipLeftEnd: h,
       onFlipRightStart: a,
-      onFlipRightEnd: D,
-      onZoomStart: bt,
+      onFlipRightEnd: j,
+      onZoomStart: vt,
       onZoomEnd: ce
     }, U);
-    Zn(
-      E,
+    En(
+      C,
       () => ({
         get flipLeft() {
           return e.flipLeft;
@@ -832,12 +836,12 @@ const sr = En(
       // only rebuild when action functions change
       [e.flipLeft, e.flipRight, e.zoomIn, e.zoomOut, e.goToPage, e.apiRef]
     );
-    const Rt = (s) => b && b[s] ? b[s] : `Page ${s + 1}`, Tt = Ut ? `${z.root} ${Ut}` : z.root;
+    const Ft = (s) => v && v[s] ? v[s] : `Page ${s + 1}`, St = Ut ? `${D.root} ${Ut}` : D.root;
     return /* @__PURE__ */ oe(
       "div",
       {
-        ..._t,
-        className: Tt,
+        ...Tt,
+        className: St,
         role: "document",
         "aria-label": `Book viewer, page ${e.page} of ${e.numPages}`,
         "aria-roledescription": "flipbook",
@@ -877,7 +881,7 @@ const sr = En(
               children: /* @__PURE__ */ oe(
                 "div",
                 {
-                  className: z.container,
+                  className: D.container,
                   style: { transform: `scale(${e.zoom})` },
                   children: [
                     /* @__PURE__ */ tt(
@@ -887,7 +891,7 @@ const sr = En(
                         tabIndex: e.canFlipLeft ? 0 : -1,
                         "aria-label": "Previous page",
                         "aria-disabled": !e.canFlipLeft,
-                        className: z.clickLeft,
+                        className: D.clickLeft,
                         style: {
                           cursor: e.canFlipLeft ? "pointer" : "auto"
                         },
@@ -904,7 +908,7 @@ const sr = En(
                         tabIndex: e.canFlipRight ? 0 : -1,
                         "aria-label": "Next page",
                         "aria-disabled": !e.canFlipRight,
-                        className: z.clickRight,
+                        className: D.clickRight,
                         style: {
                           cursor: e.canFlipRight ? "pointer" : "auto"
                         },
@@ -924,7 +928,7 @@ const sr = En(
                           e.showLeftPage && /* @__PURE__ */ tt(
                             "img",
                             {
-                              className: z.page,
+                              className: D.page,
                               style: {
                                 width: e.pageWidth + "px",
                                 height: e.pageHeight + "px",
@@ -932,14 +936,14 @@ const sr = En(
                                 top: e.yMargin + "px"
                               },
                               src: e.pageUrlLoading(e.leftPage, !0) ?? void 0,
-                              alt: Rt(e.leftPage),
+                              alt: Ft(e.leftPage),
                               onLoad: e.onImageLoad
                             }
                           ),
                           e.showRightPage && /* @__PURE__ */ tt(
                             "img",
                             {
-                              className: z.page,
+                              className: D.page,
                               style: {
                                 width: e.pageWidth + "px",
                                 height: e.pageHeight + "px",
@@ -947,14 +951,14 @@ const sr = En(
                                 top: e.yMargin + "px"
                               },
                               src: e.pageUrlLoading(e.rightPage, !0) ?? void 0,
-                              alt: Rt(e.rightPage),
+                              alt: Ft(e.rightPage),
                               onLoad: e.onImageLoad
                             }
                           ),
                           /* @__PURE__ */ tt("div", { style: { opacity: e.flipOpacity }, children: e.polygonArray.map((s) => /* @__PURE__ */ tt(
                             "div",
                             {
-                              className: s.bgImage ? z.polygon : z.polygonBlank,
+                              className: s.bgImage ? D.polygon : D.polygonBlank,
                               style: {
                                 backgroundImage: s.bgImage ? `url(${e.loadImage(s.bgImage)})` : void 0,
                                 backgroundSize: e.polygonBgSize,
@@ -967,7 +971,7 @@ const sr = En(
                               children: s.lighting && /* @__PURE__ */ tt(
                                 "div",
                                 {
-                                  className: z.lighting,
+                                  className: D.lighting,
                                   style: { backgroundImage: s.lighting }
                                 }
                               )
@@ -977,7 +981,7 @@ const sr = En(
                           /* @__PURE__ */ tt(
                             "div",
                             {
-                              className: z.boundingBox,
+                              className: D.boundingBox,
                               style: {
                                 left: e.boundingLeft + "px",
                                 top: e.yMargin + "px",
@@ -1004,7 +1008,7 @@ const sr = En(
               role: "status",
               "aria-live": "polite",
               "aria-atomic": "true",
-              className: z.srOnly,
+              className: D.srOnly,
               children: [
                 "Page ",
                 e.page,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaktos/flipbook-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "3D page flip effect for React",
   "type": "module",
   "main": "dist/react-flipbook.cjs",