@kaktos/flipbook-react 1.0.2 → 1.0.4

package/README.md

@@ -152,6 +152,10 @@ 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 book frame around the pages. |
+| `bookStyle` | `React.CSSProperties` | — | Inline styles applied to the book frame around the pages. |
+| `viewportClassName` | `string` | — | Class applied to the viewport element. |
+| `viewportStyle` | `React.CSSProperties` | — | Inline styles applied to the viewport element. |
 | `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 +196,60 @@ 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 book frame around the pages (for shadows, borders, etc.), 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;
+}
+```
+
+## Viewport Styling
+
+If you want to control the viewport height/overflow (for example to avoid full-height),
+use `viewportClassName` / `viewportStyle`:
+
+```tsx
+<Flipbook
+  pages={pages}
+  viewportStyle={{ height: 500 }}
+/>
+```
+
+## Styling Layers (How to Choose)
+
+The component has three styling layers. Pick the one that matches what you want to change:
+
+- **Root (`className` / `style`)**  
+  Outer wrapper. Use for overall layout (centering, margins, container sizing).
+- **Viewport (`viewportClassName` / `viewportStyle`)**  
+  The interactive area that handles gestures/zoom. Use to control height, overflow, or alignment within the root.
+- **Book Frame (`bookClassName` / `bookStyle`)**  
+  The book’s visual frame around pages. Use for shadows, borders, and background decoration.
+
+Recommended usage order:
+
+1. Prefer sizing the **parent container** first (simple and predictable).
+2. If you need internal sizing, use **viewport** props.
+3. For visual effects, use **book** props.
+
 ## 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 z=require("react/jsx-runtime"),t=require("react");function pt(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=Ue();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 Ue(){for(var c=[],o=0;o<16;o++)o%5==0?c.push(1):c.push(0);return c}function Sn(c,o){for(var s=pt(c),m=pt(o),L=[],v=0;v<4;v++)for(var O=[s[v],s[v+4],s[v+8],s[v+12]],C=0;C<4;C++){var y=C*4,F=[m[y],m[y+1],m[y+2],m[y+3]],_=O[0]*F[0]+O[1]*F[1]+O[2]*F[2]+O[3]*F[3];L[v+y]=_}return L}function jn(c){var o=Ue();return o[11]=-1/c,o}function Tn(c){var o=Math.PI/180*c,s=Ue();return s[0]=s[10]=Math.cos(o),s[2]=s[8]=Math.sin(o),s[2]*=-1,s}function Fn(c){return"matrix3d("+pt(c).join(", ")+")"}function Yt(c,o,s){var m=Ue();return c!==void 0&&o!==void 0&&s!==void 0&&(m[12]=c,m[13]=o,m[14]=s),m}class rt{constructor(o){o?o instanceof rt?this.m=[...o.m]:this.m=[...o]:this.m=Ue()}clone(){return new rt(this)}multiply(o){this.m=Sn(this.m,o)}perspective(o){this.multiply(jn(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(Tn(o))}toString(){return Fn(this.m)}}function En(c,o,s){const[m,L]=t.useState(0),[v,O]=t.useState(0),[C,y]=t.useState(1),[F,_]=t.useState(0);return t.useEffect(()=>{const S=()=>{const X=c.current;if(!X)return;L(X.clientWidth),O(X.clientHeight);const g=X.clientWidth>X.clientHeight&&!o?2:1;y(g),g===2&&_(J=>J+1)};return window.addEventListener("resize",S,{passive:!0}),S(),()=>window.removeEventListener("resize",S)},[o,c]),{viewWidth:m,viewHeight:v,rawDisplayedPages:C,pageAlignmentTick:F}}function Dn(c,o,s,m,L,v,O){const[C,y]=t.useState(null),[F,_]=t.useState(null),[S,X]=t.useState({}),g=t.useRef({}),J=t.useRef({count:0,target:0,cb:null}),se=t.useRef(new Set),ae=t.useCallback((u,f=!1)=>{if(f&&L>1&&!v){const i=o[u];if(i)return i}return c[u]??null},[c,o,L,v]),U=t.useCallback(u=>C===null||S[u]?u:(g.current[u]||(g.current[u]=null,se.current.add(u)),O),[C,S,O]);t.useEffect(()=>{const u=se.current;u.size!==0&&(u.forEach(f=>{if(g.current[f])return;const i=new Image;g.current[f]=i,i.onload=()=>{X(j=>({...j,[f]:!0}))},i.src=f}),u.clear())});const Z=t.useCallback((u,f=!1)=>{const i=ae(u,f);return f&&L>1&&!v?i:i?U(i):null},[ae,U,L,v]),ce=t.useCallback((u=!1)=>{for(let f=s-3;f<=s+3;f++)Z(f);if(u)for(let f=s;f<s+m;f++){const i=o[f];if(i&&!g.current[i]){const j=new Image;g.current[i]=j,j.src=i}}},[s,m,o,Z]),ee=t.useCallback(u=>{const f=u.target;C===null&&(y(f.naturalWidth),_(f.naturalHeight));const i=J.current;i.cb&&(i.count++,i.count>=i.target&&(i.cb(),i.cb=null))},[C]),te=t.useCallback((u,f)=>{J.current={count:0,target:u,cb:f}},[]);return{imageWidth:C,imageHeight:F,loadedImages:S,pageUrl:ae,loadImage:U,pageUrlLoading:Z,preloadImages:ce,onImageLoad:ee,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",Hn="_clickLeft_jjdx8_43 _clickToFlip_jjdx8_35",Xn="_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:$n,viewportZoomDragToScroll:Wn,container:Nn,clickLeft:Hn,clickRight:Xn,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 Be={progress:0,direction:null,frontImage:null,backImage:null,auto:!1};function Vn(c,o){const{pages:s,pagesHiRes:m=[],flipDuration:L=1e3,zoomDuration:v=500,zooms:O=[1,2,4],perspective:C=2400,nPolygons:y=10,ambient:F=.4,gloss:_=.6,swipeMin:S=3,singlePage:X=!1,forwardDirection:g="right",centering:J=!0,startPage:se=null,loadingImage:ae=zn,clickToZoom:U=!0,dragToFlip:Z=!0,wheel:ce="scroll",page:ee,onPageChange:te}=c,u=O??[1],f=s[0]===null,{viewWidth:i,viewHeight:j,rawDisplayedPages:xe,pageAlignmentTick:ot}=En(o,X),[st,at]=t.useState(0),Te=ee!==void 0,E=Te?ee:st,Y=t.useCallback(e=>{if(Te){const r=typeof e=="function"?e(ee):e;te?.(r)}else at(e)},[Te,ee,te]),[ke,Re]=t.useState(0),[Ye,ve]=t.useState(1),[P,n]=t.useState(u[0]),[ie,Fe]=t.useState(0),[ne,k]=t.useState(!1),[I,B]=t.useState(Be),[Ae,ct]=t.useState(null),[,mt]=t.useState(0),d=xe===2&&(f&&(E===0||E===1))?1:xe,Kt=Dn(s,m,E,d,P,ne,ae),{imageWidth:Pe,imageHeight:Ge,pageUrl:Ee,loadImage:qt,pageUrlLoading:Vt,preloadImages:Ke,onImageLoad:Qt,setImageLoadCallback:qe}=Kt,Me=t.useRef(null),bt=t.useRef(null),ye=t.useRef(0),Ie=t.useRef(null),A=t.useRef(!1),Ve=t.useRef(!1),le=t.useRef(1/0),ue=t.useRef(-1/0),xt=t.useRef(0),kt=t.useRef(0),De=t.useRef(0),ze=t.useRef(0),Oe=t.useRef(!1),V=t.useRef(I);V.current=I;const we=t.useRef(E);we.current=E;const Qe=t.useRef(d);Qe.current=d;const Le=t.useRef(P);Le.current=P;const Je=t.useRef(ie);Je.current=ie;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 Mt=t.useRef(c.onFlipRightEnd);Mt.current=c.onFlipRightEnd;const yt=t.useRef(c.onZoomStart);yt.current=c.onZoomStart;const It=t.useRef(c.onZoomEnd);It.current=c.onZoomEnd;const Jt=t.useRef(te);Jt.current=te;const wt=t.useRef(Y);wt.current=Y;const it=t.useRef(new Set),D=t.useCallback(e=>{const r=requestAnimationFrame(a=>{it.current.delete(r),e(a)});return it.current.add(r),r},[]),Lt=f?s.length-1:s.length,et=f?Math.max(1,E):E+1,Ct=t.useRef({canFlipLeft:!1,canFlipRight:!1,canZoomIn:!1,canZoomOut:!1,page:0,numPages:0}),_t=t.useCallback(()=>{Y(e=>d===1&&e===0&&s.length>0&&!s[0]?1:e)},[d,s,Y]),St=!I.direction&&E<s.length-d,jt=!I.direction&&E>=d&&!(d===1&&!Ee(ke-1)),re=g==="left"?St:jt,oe=g==="right"?St:jt,fe=!ne&&ie<u.length-1,ge=!ne&&ie>0;Ct.current={canFlipLeft:re,canFlipRight:oe,canZoomIn:fe,canZoomOut:ge,page:et,numPages:Lt};const lt=g==="right"||d===1?ke:Ye,ut=g==="left"?ke:Ye,en=!!Ee(lt),tn=!!Ee(ut)&&d===2,Tt=Pe&&Ge?Math.min(i/d/Pe,j/Ge,1):1,M=Pe?Math.round(Pe*Tt):0,de=Ge?Math.round(Ge*Tt):0,G=(i-M*d)/2,he=(j-de)/2,nn=Math.ceil(M/y+1/P)+"px",rn=de+"px",on=`${M}px ${de}px`,sn=t.useMemo(()=>{if(!I.direction||d!==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,d,g]),pe=(()=>{if(d===1)return G;const e=Ee(lt)?G:i/2;return I.direction?e<le.current?e:le.current:e})(),Ze=(()=>{if(d===1)return i-G;const e=Ee(ut)?i-G:i/2;return I.direction?e>ue.current?e:ue.current:e})(),me=J?Math.round(i/2-(pe+Ze)/2):0,Ft=t.useRef(me);Ft.current=me;const Et=t.useRef(d);t.useEffect(()=>{Ae===null&&Pe!==null&&ct(me)},[Ae,Pe,me]),t.useEffect(()=>{Et.current!==d&&(Et.current=d,ct(me),Oe.current=!1)},[d,me]);const $e=Math.round(Ae??0),an=Ie.current?Ie.current:U&&fe?"zoom-in":U&&ge?"zoom-out":Z?"grab":"auto",cn=!A.current,ln=(ne||P>1)&&cn?T.viewportZoomDragToScroll:ne||P>1?T.viewportZoom:T.viewport,un=(()=>{const e=(Ze-pe)*P;return e<i?(pe+$e)*P-(i-e)/2:(pe+$e)*P})(),fn=(()=>{const e=(Ze-pe)*P;return e<i?(pe+$e)*P-(i-e)/2:(Ze+$e)*P-i})(),gn=(()=>{const e=de*P;return e<j?he*P-(j-e)/2:he*P})(),dn=(()=>{const e=de*P;return e<j?he*P-(j-e)/2:(he+de)*P-j})(),Dt=Math.min(fn,Math.max(un,De.current)),zt=Math.min(dn,Math.max(gn,ze.current)),Ot=t.useCallback((e,r)=>{const a=[],l=[-.5,-.25,0,.25,.5];if(F<1){const h=1-F,p=l.map(b=>(1-Math.cos((e-r*b)/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 b=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,${b[0]*_}),rgba(255,255,255,${b[1]*_}) 25%,rgba(255,255,255,${b[2]*_}) 50%,rgba(255,255,255,${b[3]*_}) 75%,rgba(255,255,255,${b[4]*_}))`)}return a.join(",")},[F,_]),ft=t.useCallback(e=>{const r=V.current;if(!r.direction)return[];if(!Number.isFinite(M)||M<=0||y<=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!==g&&(a=1-a,l=g);const h=e==="front"?r.frontImage:r.backImage,p=M/y;let b=G,x=!1;d===1?g==="right"?e==="back"&&(x=!0,b=G-M):l==="left"?e==="back"?b=M-G:x=!0:e==="front"?b=M-G:x=!0:l==="left"?e==="back"?b=i/2:x=!0:e==="front"?b=i/2:x=!0;const R=new rt;R.translate(i/2),R.perspective(C),R.translate(-i/2),R.translate(b,he);let $=0;a>.5&&($=-(a-.5)*2*180),l==="left"&&($=-$),e==="back"&&($+=180),$&&(x&&R.translate(M),R.rotateY($),x&&R.translate(-M));let w;a<.5?w=a*2*Math.PI:w=(1-(a-.5)*2)*Math.PI,w===0&&(w=1e-9);const be=M/w;let N=0;const W=w/y;let H=W/2/Math.PI*180;const Q=W/Math.PI*180;x&&(H=-w/Math.PI*180+Q/2),e==="back"&&(H=-H);const He=e==="back"?-Q:Q;le.current=1/0,ue.current=-1/0;const q=[];for(let tt=0;tt<y;tt++){const Cn=`${tt/(y-1)*100}% 0px`,Xe=R.clone(),Xt=x?w-N:N;let ht=Math.sin(Xt)*be;x&&(ht=M-ht);let nt=(1-Math.cos(Xt))*be;e==="back"&&(nt=-nt),Xe.translate3d(ht,0,nt),Xe.rotateY(-H);const Bt=Xe.transformX(0),Ut=Xe.transformX(p);ue.current=Math.max(Math.max(Bt,Ut),ue.current),le.current=Math.min(Math.min(Bt,Ut),le.current);const _n=Ot($-H,He);N+=W,H+=He,q.push({key:e+tt,bgImage:h,lighting:_n,bgPos:Cn,transform:Xe.toString(),z:Math.abs(Math.round(nt))})}return q},[d,g,M,G,he,i,C,y,Ot]),hn=t.useMemo(()=>I.direction?[...ft("front"),...ft("back")]:[],[I.direction,I.progress,I.frontImage,I.backImage,ft]),K=t.useCallback((e,r)=>{const a=we.current,l=Qe.current;let h=null,p=null;e!==g?l===1?(h=s[a-1]??null,p=null):(h=s[g==="right"||l===1?a:a+1]??null,p=s[a-l+1]??null):l===1?(h=s[a]??null,p=null):(h=s[g==="left"?a:a+1]??null,p=s[a+l]??null),B({progress:0,direction:e,frontImage:h,backImage:p,auto:!1}),D(()=>{D(()=>{e!==g?l===2&&Re(a-l):l===1?Re(a+l):ve(a+1+l),r&&gt(e)})})},[g,s,D]),gt=t.useCallback(e=>{const r=V.current,a=L*(1-r.progress),l=r.progress;B(R=>({...R,auto:!0}));const h=we.current,p=s[0]!==null?h+1:Math.max(1,h);e==="left"?Rt.current?.(p):Pt.current?.(p);let b=null;const x=R=>{b===null&&(b=R);const $=R-b;let w=l+$/a;w>1&&(w=1);const be=At(w);if(B(N=>({...N,progress:be})),w<1)D(x);else{const N=Qe.current;let W;e!==g?W=we.current-N:W=we.current+N,wt.current(W);const H=s[0]!==null?W+1:Math.max(1,W);e==="left"?vt.current?.(H):Mt.current?.(H),N===1&&e===g?B(Be):qe(1,()=>{B(Be)})}};D(x)},[L,g,s,qe,D]),Zt=t.useCallback(()=>{const e=V.current,r=L*e.progress,a=e.progress;B(p=>({...p,auto:!0}));let l=null;const h=p=>{l===null&&(l=p);const b=p-l;let x=a-a*b/r;if(x<0&&(x=0),B(R=>({...R,progress:x})),x>0)D(h);else{const R=we.current;Re(R),ve(R+1);const $=Qe.current,w=V.current.direction;$===1&&w!==g?B(Be):qe(1,()=>{B(Be)})}};D(h)},[L,g,qe,D]),pn=t.useCallback(()=>{re&&K("left",!0)},[re,K]),mn=t.useCallback(()=>{oe&&K("right",!0)},[oe,K]),Ce=t.useCallback((e,r)=>{const a=o.current;if(!a)return;let l,h;if(r){const Q=a.getBoundingClientRect();l=r.pageX-Q.left,h=r.pageY-Q.top}else l=a.clientWidth/2,h=a.clientHeight/2;const p=Le.current,b=e,x=a.scrollLeft,R=a.scrollTop,$=l+x,w=h+R,be=$/p*b-l,N=w/p*b-h;k(!0),yt.current?.(e);let W=null;const H=Q=>{W===null&&(W=Q);const He=Q-W;let q=He/v;q>1&&(q=1),q=At(q),n(p+(b-p)*q),De.current=x+(be-x)*q,ze.current=R+(N-R)*q,He<v?D(H):(It.current?.(e),k(!1),n(e),De.current=be,ze.current=N)};D(H),b>1&&Ke(!0)},[v,o,Ke,D]),We=t.useCallback(e=>{if(!fe)return;const r=Je.current+1;Fe(r),Ce(u[r],e)},[fe,u,Ce]),Ne=t.useCallback(e=>{if(!ge)return;const r=Je.current-1;Fe(r),Ce(u[r],e)},[ge,u,Ce]),$t=t.useCallback(e=>{const r=(Je.current+1)%u.length;Fe(r),Ce(u[r],e)},[u,Ce]),dt=t.useCallback(e=>{if(e===null||e===et)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),le.current=1/0,ue.current=-1/0},[et,s,d,Y]),Wt=t.useRef(dt);Wt.current=dt;const Nt=t.useCallback((e,r)=>{const a=o.current;a&&(a.scrollLeft=xt.current-e,a.scrollTop=kt.current-r,De.current=a.scrollLeft,ze.current=a.scrollTop)},[o]),_e=t.useCallback(e=>{if(Me.current=e.pageX,bt.current=e.pageY,ye.current=0,Le.current<=1)Z&&(Ie.current="grab");else{const r=o.current;r&&(xt.current=r.scrollLeft,kt.current=r.scrollTop),Ie.current="all-scroll"}},[Z,o]),Se=t.useCallback(e=>{if(Me.current===null)return!1;const r=e.pageX-Me.current,a=e.pageY-bt.current;if(ye.current=Math.max(ye.current,Math.abs(r)),ye.current=Math.max(ye.current,Math.abs(a)),Le.current>1)return A.current||Nt(r,a),!1;if(!Z||Math.abs(a)>Math.abs(r)||!Number.isFinite(M)||M<=0)return!1;Ie.current="grabbing",mt(h=>h+1);const l=V.current;return r>0?(l.direction===null&&re&&r>=S&&K("left",!1),V.current.direction==="left"&&B(h=>({...h,progress:Math.min(r/M,1)}))):(l.direction===null&&oe&&r<=-S&&K("right",!1),V.current.direction==="right"&&B(h=>({...h,progress:Math.min(-r/M,1)}))),!0},[Z,re,oe,S,K,M,Nt]),je=t.useCallback(e=>{if(Me.current===null)return;U&&ye.current<S&&$t(e);const r=V.current;r.direction!==null&&!r.auto&&(r.progress>1/4?gt(r.direction):Zt()),Me.current=null,Ie.current=null,mt(a=>a+1)},[U,S,$t,gt,Zt]),bn=t.useCallback(e=>{A.current=!0,_e(e.changedTouches[0])},[_e]),xn=t.useCallback(e=>{if(Se(e.changedTouches[0])){e.cancelable&&e.preventDefault();return}Z&&Le.current<=1&&Me.current!==null&&e.cancelable&&e.preventDefault()},[Z,Se]),kn=t.useCallback(e=>{je(e.changedTouches[0])},[je]),Rn=t.useCallback(e=>{if(Ve.current=!0,!A.current&&e.button===0){_e(e);try{e.target.setPointerCapture(e.pointerId)}catch{}}},[_e]),vn=t.useCallback(e=>{A.current||Se(e)},[Se]),Pn=t.useCallback(e=>{if(!A.current){je(e);try{e.target.releasePointerCapture(e.pointerId)}catch{}}},[je]),Mn=t.useCallback(e=>{A.current||Ve.current||e.button===0&&_e(e)},[_e]),yn=t.useCallback(e=>{A.current||Ve.current||Se(e)},[Se]),In=t.useCallback(e=>{A.current||Ve.current||je(e)},[je]),wn=t.useCallback(e=>{if(ce==="scroll"&&Le.current>1&&!A.current){const r=o.current;r&&(r.scrollLeft+=e.deltaX,r.scrollTop+=e.deltaY,De.current=r.scrollLeft,ze.current=r.scrollTop),e.cancelable&&e.preventDefault()}ce==="zoom"&&(e.deltaY>=100?(Ne(e),e.cancelable&&e.preventDefault()):e.deltaY<=-100&&(We(e),e.cancelable&&e.preventDefault()))},[ce,o,Ne,We]),Ln=t.useCallback(e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),re&&K("left",!0);break;case"ArrowRight":e.preventDefault(),oe&&K("right",!0);break;case"+":case"=":e.preventDefault(),fe&&We();break;case"-":e.preventDefault(),ge&&Ne();break}},[re,oe,fe,ge,K,We,Ne]);t.useEffect(()=>{xe===2&&Y(e=>{const r=e&-2;return r===0&&f?e:r}),le.current=1/0,ue.current=-1/0},[ot,xe,f,Y]);const Ht=t.useRef(Ke);return Ht.current=Ke,t.useEffect(()=>{Re(E),ve(E+1),Ht.current()},[E]),t.useEffect(()=>{if(Oe.current||Ae===null)return;Oe.current=!0;const e=()=>{D(()=>{ct(r=>{const a=Ft.current;if(r===null)return Oe.current=!1,a;const l=a-r;return Math.abs(l)<.5?(Oe.current=!1,a):(e(),r+l*.1)})})};e()},[me,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(()=>{_t()},[s,_t]),t.useEffect(()=>{Wt.current(se)},[se]),t.useEffect(()=>{n(u[0])},[]),t.useEffect(()=>{const e=it.current;return()=>{e.forEach(cancelAnimationFrame),e.clear()}},[]),{viewWidth:i,viewHeight:j,pageWidth:M,pageHeight:de,xMargin:G,yMargin:he,displayedPages:d,zoom:P,centerOffsetSmoothed:$e,page:et,numPages:Lt,leftPage:lt,rightPage:ut,showLeftPage:en,showRightPage:tn,pageUrlLoading:Vt,loadImage:qt,flip:I,flipOpacity:sn,polygonArray:hn,polygonWidth:nn,polygonHeight:rn,polygonBgSize:on,canFlipLeft:re,canFlipRight:oe,canZoomIn:fe,canZoomOut:ge,boundingLeft:pe,boundingRight:Ze,cursor:an,viewportClass:ln,flipLeft:pn,flipRight:mn,zoomIn:We,zoomOut:Ne,goToPage:dt,apiRef:Ct,handlers:{onTouchStart:bn,onTouchMove:xn,onTouchEnd:kn,onPointerDown:Rn,onPointerMove:vn,onPointerUp:Pn,onMouseDown:Mn,onMouseMove:yn,onMouseUp:In,onWheel:wn,onKeyDown:Ln},onImageLoad:Qt}}const Qn=t.forwardRef(function({pages:o,pagesHiRes:s,pageLabels:m,flipDuration:L,zoomDuration:v,zooms:O,perspective:C,nPolygons:y,ambient:F,gloss:_,swipeMin:S,singlePage:X,forwardDirection:g,centering:J,startPage:se,loadingImage:ae,clickToZoom:U,dragToFlip:Z,wheel:ce,bookClassName:ee,bookStyle:te,viewportClassName:u,viewportStyle:f,page:i,onPageChange:j,onFlipLeftStart:xe,onFlipLeftEnd:ot,onFlipRightStart:st,onFlipRightEnd:at,onZoomStart:Te,onZoomEnd:E,children:Y,className:ke,...Re},Ye){const ve=t.useRef(null),n=Vn({pages:o,pagesHiRes:s,flipDuration:L,zoomDuration:v,zooms:O,perspective:C,nPolygons:y,ambient:F,gloss:_,swipeMin:S,singlePage:X,forwardDirection:g,centering:J,startPage:se,loadingImage:ae,clickToZoom:U,dragToFlip:Z,wheel:ce,page:i,onPageChange:j,onFlipLeftStart:xe,onFlipLeftEnd:ot,onFlipRightStart:st,onFlipRightEnd:at,onZoomStart:Te,onZoomEnd:E},ve);t.useImperativeHandle(Ye,()=>({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 ie=k=>m&&m[k]?m[k]:`Page ${k+1}`,Fe=ke?`${T.root} ${ke}`:T.root,ne={...f,cursor:n.cursor==="grabbing"?"grabbing":"auto"};return f&&f.flex==null&&(f.height!=null||f.maxHeight!=null)&&(ne.flex="0 0 auto"),z.jsxs("div",{...Re,className:Fe,role:"document","aria-label":`Book viewer, page ${n.page} of ${n.numPages}`,"aria-roledescription":"flipbook",children:[Y?.({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:ve,className:u?`${n.viewportClass} ${u}`:n.viewportClass,style:ne,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:k=>{(k.key==="Enter"||k.key===" ")&&(k.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:k=>{(k.key==="Enter"||k.key===" ")&&(k.preventDefault(),n.flipRight())}}),z.jsxs("div",{style:{transform:`translateX(${n.centerOffsetSmoothed}px)`},children:[z.jsx("div",{className:ee,style:{...te,position:"absolute",left:n.boundingLeft+"px",top:n.yMargin+"px",width:n.boundingRight-n.boundingLeft+"px",height:n.pageHeight+"px",pointerEvents:"none"}}),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:ie(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:ie(n.rightPage),onLoad:n.onImageLoad}),z.jsx("div",{style:{opacity:n.flipOpacity},children:n.polygonArray.map(k=>z.jsx("div",{className:k.bgImage?T.polygon:T.polygonBlank,style:{backgroundImage:k.bgImage?`url(${n.loadImage(k.bgImage)})`:void 0,backgroundSize:n.polygonBgSize,backgroundPosition:k.bgPos,width:n.polygonWidth,height:n.polygonHeight,transform:k.transform,zIndex:k.z},children:k.lighting&&z.jsx("div",{className:T.lighting,style:{backgroundImage:k.lighting}})},k.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;