@kaktos/flipbook-react 1.0.2 → 1.0.3

package/README.md

@@ -152,6 +152,8 @@ const [page, setPage] = useState(0)
 | `clickToZoom` | `boolean` | `true` | Enable click/tap to zoom. |
 | `dragToFlip` | `boolean` | `true` | Enable drag/swipe to flip. |
 | `wheel` | `'scroll' \| 'zoom'` | `'scroll'` | Mouse wheel behavior when zoomed. |
+| `bookClassName` | `string` | — | Class applied to the inner book container. |
+| `bookStyle` | `React.CSSProperties` | — | Inline styles applied to the inner book container. |
 | `page` | `number` | — | Controlled page state (internal index). |
 | `onPageChange` | `(page: number) => void` | — | Called when page changes in controlled mode. |
 | `onFlipLeftStart` | `(page: number) => void` | — | Fired when left flip begins. |
@@ -192,6 +194,31 @@ You can also pass `className` and `style` to the root element:
 <Flipbook className="my-book" style={{ background: '#1a1a1a' }} pages={pages} />
 ```
 
+## Book Shadow / Inner Styling
+
+If you want to style the actual book container (the element that scales and holds pages), use
+`bookClassName` / `bookStyle`:
+
+```tsx
+<Flipbook
+  pages={pages}
+  bookStyle={{ boxShadow: '0 24px 60px rgba(0,0,0,0.35)', borderRadius: 8 }}
+/>
+```
+
+Or with a class:
+
+```tsx
+<Flipbook pages={pages} bookClassName="bookShadow" />
+```
+
+```css
+.bookShadow {
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+  border-radius: 8px;
+}
+```
+
 ## License
 
 MIT

package/dist/react-flipbook.cjs

@@ -1 +1 @@
-"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;
+"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(m){return typeof m=="number"}).filter(function(m){return!isNaN(m)});if(c.length===6&&o.length===6){var s=He();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 He(){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),m=ht(o),L=[],P=0;P<4;P++)for(var z=[s[P],s[P+4],s[P+8],s[P+12]],C=0;C<4;C++){var I=C*4,E=[m[I],m[I+1],m[I+2],m[I+3]],_=z[0]*E[0]+z[1]*E[1]+z[2]*E[2]+z[3]*E[3];L[P+I]=_}return L}function Tn(c){var o=He();return o[11]=-1/c,o}function jn(c){var o=Math.PI/180*c,s=He();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 m=He();return c!==void 0&&o!==void 0&&s!==void 0&&(m[12]=c,m[13]=o,m[14]=s),m}class et{constructor(o){o?o instanceof et?this.m=[...o.m]:this.m=[...o]:this.m=He()}clone(){return new et(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,m){this.multiply(Yt(o,s,m))}rotateY(o){this.multiply(jn(o))}toString(){return Fn(this.m)}}function En(c,o,s){const[m,L]=t.useState(0),[P,z]=t.useState(0),[C,I]=t.useState(1),[E,_]=t.useState(0);return t.useEffect(()=>{const T=()=>{const H=c.current;if(!H)return;L(H.clientWidth),z(H.clientHeight);const f=H.clientWidth>H.clientHeight&&!o?2:1;I(f),f===2&&_(ee=>ee+1)};return window.addEventListener("resize",T,{passive:!0}),T(),()=>window.removeEventListener("resize",T)},[o,c]),{viewWidth:m,viewHeight:P,rawDisplayedPages:C,pageAlignmentTick:E}}function Dn(c,o,s,m,L,P,z){const[C,I]=t.useState(null),[E,_]=t.useState(null),[T,H]=t.useState({}),f=t.useRef({}),ee=t.useRef({count:0,target:0,cb:null}),oe=t.useRef(new Set),se=t.useCallback((u,g=!1)=>{if(g&&L>1&&!P){const i=o[u];if(i)return i}return c[u]??null},[c,o,L,P]),U=t.useCallback(u=>C===null||T[u]?u:(f.current[u]||(f.current[u]=null,oe.current.add(u)),z),[C,T,z]);t.useEffect(()=>{const u=oe.current;u.size!==0&&(u.forEach(g=>{if(f.current[g])return;const i=new Image;f.current[g]=i,i.onload=()=>{H(j=>({...j,[g]:!0}))},i.src=g}),u.clear())});const O=t.useCallback((u,g=!1)=>{const i=se(u,g);return g&&L>1&&!P?i:i?U(i):null},[se,U,L,P]),ae=t.useCallback((u=!1)=>{for(let g=s-3;g<=s+3;g++)O(g);if(u)for(let g=s;g<s+m;g++){const i=o[g];if(i&&!f.current[i]){const j=new Image;f.current[i]=j,j.src=i}}},[s,m,o,O]),V=t.useCallback(u=>{const g=u.target;C===null&&(I(g.naturalWidth),_(g.naturalHeight));const i=ee.current;i.cb&&(i.count++,i.count>=i.target&&(i.cb(),i.cb=null))},[C]),te=t.useCallback((u,g)=>{ee.current={count:0,target:u,cb:g}},[]);return{imageWidth:C,imageHeight:E,loadedImages:T,pageUrl:se,loadImage:U,pageUrlLoading:O,preloadImages:ae,onImageLoad:V,setImageLoadCallback:te}}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",$n="_viewportZoom_jjdx8_16 _viewport_jjdx8_8",Wn="_viewportZoomDragToScroll_jjdx8_22 _viewportZoom_jjdx8_16 _viewport_jjdx8_8",Nn="_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",S={root:On,viewport:Zn,viewportZoom:$n,viewportZoomDragToScroll:Wn,container:Nn,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 Xe={progress:0,direction:null,frontImage:null,backImage:null,auto:!1};function Vn(c,o){const{pages:s,pagesHiRes:m=[],flipDuration:L=1e3,zoomDuration:P=500,zooms:z=[1,2,4],perspective:C=2400,nPolygons:I=10,ambient:E=.4,gloss:_=.6,swipeMin:T=3,singlePage:H=!1,forwardDirection:f="right",centering:ee=!0,startPage:oe=null,loadingImage:se=zn,clickToZoom:U=!0,dragToFlip:O=!0,wheel:ae="scroll",page:V,onPageChange:te}=c,u=z??[1],g=s[0]===null,{viewWidth:i,viewHeight:j,rawDisplayedPages:be,pageAlignmentTick:tt}=En(o,H),[nt,rt]=t.useState(0),Ce=V!==void 0,F=Ce?V:nt,Y=t.useCallback(e=>{if(Ce){const r=typeof e=="function"?e(V):e;te?.(r)}else rt(e)},[Ce,V,te]),[Se,ce]=t.useState(0),[ot,n]=t.useState(1),[R,_e]=t.useState(u[0]),[b,st]=t.useState(0),[Te,pt]=t.useState(!1),[M,B]=t.useState(Xe),[Be,at]=t.useState(null),[,mt]=t.useState(0),d=be===2&&(g&&(F===0||F===1))?1:be,Kt=Dn(s,m,F,d,R,Te,se),{imageWidth:ke,imageHeight:Ue,pageUrl:je,loadImage:qt,pageUrlLoading:Vt,preloadImages:Ye,onImageLoad:Qt,setImageLoadCallback:Ae}=Kt,xe=t.useRef(null),bt=t.useRef(null),Re=t.useRef(0),ve=t.useRef(null),A=t.useRef(!1),Ge=t.useRef(!1),ie=t.useRef(1/0),le=t.useRef(-1/0),kt=t.useRef(0),xt=t.useRef(0),Fe=t.useRef(0),Ee=t.useRef(0),De=t.useRef(!1),Q=t.useRef(M);Q.current=M;const Pe=t.useRef(F);Pe.current=F;const Ke=t.useRef(d);Ke.current=d;const ye=t.useRef(R);ye.current=R;const qe=t.useRef(b);qe.current=b;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(te);Jt.current=te;const wt=t.useRef(Y);wt.current=Y;const ct=t.useRef(new Set),D=t.useCallback(e=>{const r=requestAnimationFrame(a=>{ct.current.delete(r),e(a)});return ct.current.add(r),r},[]),Lt=g?s.length-1:s.length,Ve=g?Math.max(1,F):F+1,Ct=t.useRef({canFlipLeft:!1,canFlipRight:!1,canZoomIn:!1,canZoomOut:!1,page:0,numPages:0}),St=t.useCallback(()=>{Y(e=>d===1&&e===0&&s.length>0&&!s[0]?1:e)},[d,s,Y]),_t=!M.direction&&F<s.length-d,Tt=!M.direction&&F>=d&&!(d===1&&!je(Se-1)),ne=f==="left"?_t:Tt,re=f==="right"?_t:Tt,ue=!Te&&b<u.length-1,fe=!Te&&b>0;Ct.current={canFlipLeft:ne,canFlipRight:re,canZoomIn:ue,canZoomOut:fe,page:Ve,numPages:Lt};const it=f==="right"||d===1?Se:ot,lt=f==="left"?Se:ot,en=!!je(it),tn=!!je(lt)&&d===2,jt=ke&&Ue?Math.min(i/d/ke,j/Ue,1):1,y=ke?Math.round(ke*jt):0,ge=Ue?Math.round(Ue*jt):0,G=(i-y*d)/2,de=(j-ge)/2,nn=Math.ceil(y/I+1/R)+"px",rn=ge+"px",on=`${y}px ${ge}px`,sn=t.useMemo(()=>{if(!M.direction||d!==1)return 1;let e=M.progress;return M.direction!==f&&(e=1-e),e>.7?1-(e-.7)/.3:1},[M.direction,M.progress,d,f]),he=(()=>{if(d===1)return G;const e=je(it)?G:i/2;return M.direction?e<ie.current?e:ie.current:e})(),ze=(()=>{if(d===1)return i-G;const e=je(lt)?i-G:i/2;return M.direction?e>le.current?e:le.current:e})(),pe=ee?Math.round(i/2-(he+ze)/2):0,Ft=t.useRef(pe);Ft.current=pe;const Et=t.useRef(d);t.useEffect(()=>{Be===null&&ke!==null&&at(pe)},[Be,ke,pe]),t.useEffect(()=>{Et.current!==d&&(Et.current=d,at(pe),De.current=!1)},[d,pe]);const Oe=Math.round(Be??0),an=ve.current?ve.current:U&&ue?"zoom-in":U&&fe?"zoom-out":O?"grab":"auto",cn=!A.current,ln=(Te||R>1)&&cn?S.viewportZoomDragToScroll:Te||R>1?S.viewportZoom:S.viewport,un=(()=>{const e=(ze-he)*R;return e<i?(he+Oe)*R-(i-e)/2:(he+Oe)*R})(),fn=(()=>{const e=(ze-he)*R;return e<i?(he+Oe)*R-(i-e)/2:(ze+Oe)*R-i})(),gn=(()=>{const e=ge*R;return e<j?de*R-(j-e)/2:de*R})(),dn=(()=>{const e=ge*R;return e<j?de*R-(j-e)/2:(de+ge)*R-j})(),Dt=Math.min(fn,Math.max(un,Fe.current)),zt=Math.min(dn,Math.max(gn,Ee.current)),Ot=t.useCallback((e,r)=>{const a=[],l=[-.5,-.25,0,.25,.5];if(E<1){const h=1-E,p=l.map(k=>(1-Math.cos((e-r*k)/180*Math.PI))*h);a.push(`linear-gradient(to right,rgba(0,0,0,${p[0]}),rgba(0,0,0,${p[1]}) 25%,rgba(0,0,0,${p[2]}) 50%,rgba(0,0,0,${p[3]}) 75%,rgba(0,0,0,${p[4]}))`)}if(_>0){const k=l.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]*_}),rgba(255,255,255,${k[1]*_}) 25%,rgba(255,255,255,${k[2]*_}) 50%,rgba(255,255,255,${k[3]*_}) 75%,rgba(255,255,255,${k[4]*_}))`)}return a.join(",")},[E,_]),ut=t.useCallback(e=>{const r=Q.current;if(!r.direction)return[];if(!Number.isFinite(y)||y<=0||I<=0)return[];let a=r.progress,l=r.direction;if(!Number.isFinite(a))return[];a<0&&(a=0),a>1&&(a=1),d===1&&l!==f&&(a=1-a,l=f);const h=e==="front"?r.frontImage:r.backImage,p=y/I;let k=G,x=!1;d===1?f==="right"?e==="back"&&(x=!0,k=G-y):l==="left"?e==="back"?k=y-G:x=!0:e==="front"?k=y-G:x=!0:l==="left"?e==="back"?k=i/2:x=!0:e==="front"?k=i/2:x=!0;const v=new et;v.translate(i/2),v.perspective(C),v.translate(-i/2),v.translate(k,de);let Z=0;a>.5&&(Z=-(a-.5)*2*180),l==="left"&&(Z=-Z),e==="back"&&(Z+=180),Z&&(x&&v.translate(y),v.rotateY(Z),x&&v.translate(-y));let w;a<.5?w=a*2*Math.PI:w=(1-(a-.5)*2)*Math.PI,w===0&&(w=1e-9);const me=y/w;let N=0;const $=w/I;let X=$/2/Math.PI*180;const J=$/Math.PI*180;x&&(X=-w/Math.PI*180+J/2),e==="back"&&(X=-X);const We=e==="back"?-J:J;ie.current=1/0,le.current=-1/0;const q=[];for(let Qe=0;Qe<I;Qe++){const Cn=`${Qe/(I-1)*100}% 0px`,Ne=v.clone(),Ht=x?w-N:N;let dt=Math.sin(Ht)*me;x&&(dt=y-dt);let Je=(1-Math.cos(Ht))*me;e==="back"&&(Je=-Je),Ne.translate3d(dt,0,Je),Ne.rotateY(-X);const Bt=Ne.transformX(0),Ut=Ne.transformX(p);le.current=Math.max(Math.max(Bt,Ut),le.current),ie.current=Math.min(Math.min(Bt,Ut),ie.current);const Sn=Ot(Z-X,We);N+=$,X+=We,q.push({key:e+Qe,bgImage:h,lighting:Sn,bgPos:Cn,transform:Ne.toString(),z:Math.abs(Math.round(Je))})}return q},[d,f,y,G,de,i,C,I,Ot]),hn=t.useMemo(()=>M.direction?[...ut("front"),...ut("back")]:[],[M.direction,M.progress,M.frontImage,M.backImage,ut]),K=t.useCallback((e,r)=>{const a=Pe.current,l=Ke.current;let h=null,p=null;e!==f?l===1?(h=s[a-1]??null,p=null):(h=s[f==="right"||l===1?a:a+1]??null,p=s[a-l+1]??null):l===1?(h=s[a]??null,p=null):(h=s[f==="left"?a:a+1]??null,p=s[a+l]??null),B({progress:0,direction:e,frontImage:h,backImage:p,auto:!1}),D(()=>{D(()=>{e!==f?l===2&&ce(a-l):l===1?ce(a+l):n(a+1+l),r&&ft(e)})})},[f,s,D]),ft=t.useCallback(e=>{const r=Q.current,a=L*(1-r.progress),l=r.progress;B(v=>({...v,auto:!0}));const h=Pe.current,p=s[0]!==null?h+1:Math.max(1,h);e==="left"?Rt.current?.(p):Pt.current?.(p);let k=null;const x=v=>{k===null&&(k=v);const Z=v-k;let w=l+Z/a;w>1&&(w=1);const me=At(w);if(B(N=>({...N,progress:me})),w<1)D(x);else{const N=Ke.current;let $;e!==f?$=Pe.current-N:$=Pe.current+N,wt.current($);const X=s[0]!==null?$+1:Math.max(1,$);e==="left"?vt.current?.(X):yt.current?.(X),N===1&&e===f?B(Xe):Ae(1,()=>{B(Xe)})}};D(x)},[L,f,s,Ae,D]),Zt=t.useCallback(()=>{const e=Q.current,r=L*e.progress,a=e.progress;B(p=>({...p,auto:!0}));let l=null;const h=p=>{l===null&&(l=p);const k=p-l;let x=a-a*k/r;if(x<0&&(x=0),B(v=>({...v,progress:x})),x>0)D(h);else{const v=Pe.current;ce(v),n(v+1);const Z=Ke.current,w=Q.current.direction;Z===1&&w!==f?B(Xe):Ae(1,()=>{B(Xe)})}};D(h)},[L,f,Ae,D]),pn=t.useCallback(()=>{ne&&K("left",!0)},[ne,K]),mn=t.useCallback(()=>{re&&K("right",!0)},[re,K]),Ie=t.useCallback((e,r)=>{const a=o.current;if(!a)return;let l,h;if(r){const J=a.getBoundingClientRect();l=r.pageX-J.left,h=r.pageY-J.top}else l=a.clientWidth/2,h=a.clientHeight/2;const p=ye.current,k=e,x=a.scrollLeft,v=a.scrollTop,Z=l+x,w=h+v,me=Z/p*k-l,N=w/p*k-h;pt(!0),It.current?.(e);let $=null;const X=J=>{$===null&&($=J);const We=J-$;let q=We/P;q>1&&(q=1),q=At(q),_e(p+(k-p)*q),Fe.current=x+(me-x)*q,Ee.current=v+(N-v)*q,We<P?D(X):(Mt.current?.(e),pt(!1),_e(e),Fe.current=me,Ee.current=N)};D(X),k>1&&Ye(!0)},[P,o,Ye,D]),Ze=t.useCallback(e=>{if(!ue)return;const r=qe.current+1;st(r),Ie(u[r],e)},[ue,u,Ie]),$e=t.useCallback(e=>{if(!fe)return;const r=qe.current-1;st(r),Ie(u[r],e)},[fe,u,Ie]),$t=t.useCallback(e=>{const r=(qe.current+1)%u.length;st(r),Ie(u[r],e)},[u,Ie]),gt=t.useCallback(e=>{if(e===null||e===Ve)return;let r;s[0]===null?d===2&&e===1?r=0:r=e:r=e-1,(d===2&&r>0&&s[0]===null||d===2&&s[0]!==null)&&(r=r&-2),Y(r),ie.current=1/0,le.current=-1/0},[Ve,s,d,Y]),Wt=t.useRef(gt);Wt.current=gt;const Nt=t.useCallback((e,r)=>{const a=o.current;a&&(a.scrollLeft=kt.current-e,a.scrollTop=xt.current-r,Fe.current=a.scrollLeft,Ee.current=a.scrollTop)},[o]),Me=t.useCallback(e=>{if(xe.current=e.pageX,bt.current=e.pageY,Re.current=0,ye.current<=1)O&&(ve.current="grab");else{const r=o.current;r&&(kt.current=r.scrollLeft,xt.current=r.scrollTop),ve.current="all-scroll"}},[O,o]),we=t.useCallback(e=>{if(xe.current===null)return!1;const r=e.pageX-xe.current,a=e.pageY-bt.current;if(Re.current=Math.max(Re.current,Math.abs(r)),Re.current=Math.max(Re.current,Math.abs(a)),ye.current>1)return A.current||Nt(r,a),!1;if(!O||Math.abs(a)>Math.abs(r)||!Number.isFinite(y)||y<=0)return!1;ve.current="grabbing",mt(h=>h+1);const l=Q.current;return r>0?(l.direction===null&&ne&&r>=T&&K("left",!1),Q.current.direction==="left"&&B(h=>({...h,progress:Math.min(r/y,1)}))):(l.direction===null&&re&&r<=-T&&K("right",!1),Q.current.direction==="right"&&B(h=>({...h,progress:Math.min(-r/y,1)}))),!0},[O,ne,re,T,K,y,Nt]),Le=t.useCallback(e=>{if(xe.current===null)return;U&&Re.current<T&&$t(e);const r=Q.current;r.direction!==null&&!r.auto&&(r.progress>1/4?ft(r.direction):Zt()),xe.current=null,ve.current=null,mt(a=>a+1)},[U,T,$t,ft,Zt]),bn=t.useCallback(e=>{A.current=!0,Me(e.changedTouches[0])},[Me]),kn=t.useCallback(e=>{if(we(e.changedTouches[0])){e.cancelable&&e.preventDefault();return}O&&ye.current<=1&&xe.current!==null&&e.cancelable&&e.preventDefault()},[O,we]),xn=t.useCallback(e=>{Le(e.changedTouches[0])},[Le]),Rn=t.useCallback(e=>{if(Ge.current=!0,!A.current&&e.button===0){Me(e);try{e.target.setPointerCapture(e.pointerId)}catch{}}},[Me]),vn=t.useCallback(e=>{A.current||we(e)},[we]),Pn=t.useCallback(e=>{if(!A.current){Le(e);try{e.target.releasePointerCapture(e.pointerId)}catch{}}},[Le]),yn=t.useCallback(e=>{A.current||Ge.current||e.button===0&&Me(e)},[Me]),In=t.useCallback(e=>{A.current||Ge.current||we(e)},[we]),Mn=t.useCallback(e=>{A.current||Ge.current||Le(e)},[Le]),wn=t.useCallback(e=>{if(ae==="scroll"&&ye.current>1&&!A.current){const r=o.current;r&&(r.scrollLeft+=e.deltaX,r.scrollTop+=e.deltaY,Fe.current=r.scrollLeft,Ee.current=r.scrollTop),e.cancelable&&e.preventDefault()}ae==="zoom"&&(e.deltaY>=100?($e(e),e.cancelable&&e.preventDefault()):e.deltaY<=-100&&(Ze(e),e.cancelable&&e.preventDefault()))},[ae,o,$e,Ze]),Ln=t.useCallback(e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),ne&&K("left",!0);break;case"ArrowRight":e.preventDefault(),re&&K("right",!0);break;case"+":case"=":e.preventDefault(),ue&&Ze();break;case"-":e.preventDefault(),fe&&$e();break}},[ne,re,ue,fe,K,Ze,$e]);t.useEffect(()=>{be===2&&Y(e=>{const r=e&-2;return r===0&&g?e:r}),ie.current=1/0,le.current=-1/0},[tt,be,g,Y]);const Xt=t.useRef(Ye);return Xt.current=Ye,t.useEffect(()=>{ce(F),n(F+1),Xt.current()},[F]),t.useEffect(()=>{if(De.current||Be===null)return;De.current=!0;const e=()=>{D(()=>{at(r=>{const a=Ft.current;if(r===null)return De.current=!1,a;const l=a-r;return Math.abs(l)<.5?(De.current=!1,a):(e(),r+l*.1)})})};e()},[pe,D]),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(()=>{Wt.current(oe)},[oe]),t.useEffect(()=>{_e(u[0])},[]),t.useEffect(()=>{const e=ct.current;return()=>{e.forEach(cancelAnimationFrame),e.clear()}},[]),{viewWidth:i,viewHeight:j,pageWidth:y,pageHeight:ge,xMargin:G,yMargin:de,displayedPages:d,zoom:R,centerOffsetSmoothed:Oe,page:Ve,numPages:Lt,leftPage:it,rightPage:lt,showLeftPage:en,showRightPage:tn,pageUrlLoading:Vt,loadImage:qt,flip:M,flipOpacity:sn,polygonArray:hn,polygonWidth:nn,polygonHeight:rn,polygonBgSize:on,canFlipLeft:ne,canFlipRight:re,canZoomIn:ue,canZoomOut:fe,boundingLeft:he,boundingRight:ze,cursor:an,viewportClass:ln,flipLeft:pn,flipRight:mn,zoomIn:Ze,zoomOut:$e,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:m,flipDuration:L,zoomDuration:P,zooms:z,perspective:C,nPolygons:I,ambient:E,gloss:_,swipeMin:T,singlePage:H,forwardDirection:f,centering:ee,startPage:oe,loadingImage:se,clickToZoom:U,dragToFlip:O,wheel:ae,bookClassName:V,bookStyle:te,page:u,onPageChange:g,onFlipLeftStart:i,onFlipLeftEnd:j,onFlipRightStart:be,onFlipRightEnd:tt,onZoomStart:nt,onZoomEnd:rt,children:Ce,className:F,...Y},Se){const ce=t.useRef(null),n=Vn({pages:o,pagesHiRes:s,flipDuration:L,zoomDuration:P,zooms:z,perspective:C,nPolygons:I,ambient:E,gloss:_,swipeMin:T,singlePage:H,forwardDirection:f,centering:ee,startPage:oe,loadingImage:se,clickToZoom:U,dragToFlip:O,wheel:ae,page:u,onPageChange:g,onFlipLeftStart:i,onFlipLeftEnd:j,onFlipRightStart:be,onFlipRightEnd:tt,onZoomStart:nt,onZoomEnd:rt},ce);t.useImperativeHandle(Se,()=>({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 R=b=>m&&m[b]?m[b]:`Page ${b+1}`,_e=F?`${S.root} ${F}`:S.root;return W.jsxs("div",{...Y,className:_e,role:"document","aria-label":`Book viewer, page ${n.page} of ${n.numPages}`,"aria-roledescription":"flipbook",children:[Ce?.({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:ce,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:V?`${S.container} ${V}`:S.container,style:{...te,transform:`scale(${n.zoom})`},children:[W.jsx("div",{role:"button",tabIndex:n.canFlipLeft?0:-1,"aria-label":"Previous page","aria-disabled":!n.canFlipLeft,className:S.clickLeft,style:{cursor:n.canFlipLeft?"pointer":"auto"},onClick:n.flipLeft,onKeyDown:b=>{(b.key==="Enter"||b.key===" ")&&(b.preventDefault(),n.flipLeft())}}),W.jsx("div",{role:"button",tabIndex:n.canFlipRight?0:-1,"aria-label":"Next page","aria-disabled":!n.canFlipRight,className:S.clickRight,style:{cursor:n.canFlipRight?"pointer":"auto"},onClick:n.flipRight,onKeyDown:b=>{(b.key==="Enter"||b.key===" ")&&(b.preventDefault(),n.flipRight())}}),W.jsxs("div",{style:{transform:`translateX(${n.centerOffsetSmoothed}px)`},children:[n.showLeftPage&&W.jsx("img",{className:S.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:R(n.leftPage),onLoad:n.onImageLoad}),n.showRightPage&&W.jsx("img",{className:S.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:R(n.rightPage),onLoad:n.onImageLoad}),W.jsx("div",{style:{opacity:n.flipOpacity},children:n.polygonArray.map(b=>W.jsx("div",{className:b.bgImage?S.polygon:S.polygonBlank,style:{backgroundImage:b.bgImage?`url(${n.loadImage(b.bgImage)})`:void 0,backgroundSize:n.polygonBgSize,backgroundPosition:b.bgPos,width:n.polygonWidth,height:n.polygonHeight,transform:b.transform,zIndex:b.z},children:b.lighting&&W.jsx("div",{className:S.lighting,style:{backgroundImage:b.lighting}})},b.key))}),W.jsx("div",{className:S.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:S.srOnly,children:["Page ",n.page," of ",n.numPages]})]})});exports.Flipbook=Qn;