@kaktos/flipbook-react 1.0.3 → 1.0.4

package/README.md

@@ -152,8 +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 inner book container. |
-| `bookStyle` | `React.CSSProperties` | — | Inline styles applied to the inner book container. |
+| `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. |
@@ -196,7 +198,7 @@ You can also pass `className` and `style` to the root element:
 
 ## Book Shadow / Inner Styling
 
-If you want to style the actual book container (the element that scales and holds pages), use
+If you want to style the book frame around the pages (for shadows, borders, etc.), use
 `bookClassName` / `bookStyle`:
 
 ```tsx
@@ -219,6 +221,35 @@ Or with a class:
 }
 ```
 
+## 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(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;
+"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;