@kaktos/flipbook-react 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+Flipbook React
+---
+clone of flipbook-vue.

package/dist/react-flipbook.cjs

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

package/dist/react-flipbook.css

@@ -0,0 +1 @@
+._viewport_ij4oz_1{width:100%;flex:1;min-height:0}._viewportZoom_ij4oz_7{overflow:scroll}._viewportZoomDragToScroll_ij4oz_12{overflow:hidden}._container_ij4oz_17{position:relative;width:100%;height:100%;transform-origin:top left;-webkit-user-select:none;user-select:none}._clickToFlip_ij4oz_25{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;user-select:none}._clickLeft_ij4oz_33{left:0}._clickRight_ij4oz_38{right:0}._boundingBox_ij4oz_43{position:absolute;-webkit-user-select:none;user-select:none}._page_ij4oz_48{position:absolute;backface-visibility:hidden}._polygon_ij4oz_53{position:absolute;top:0;left:0;background-repeat:no-repeat;backface-visibility:hidden;transform-origin:center left}._polygonBlank_ij4oz_62{background-color:#ddd}._lighting_ij4oz_67{width:100%;height:100%}

package/dist/react-flipbook.js

@@ -0,0 +1,858 @@
+import { jsxs as cn, jsx as $ } from "react/jsx-runtime";
+import { useState as L, useRef as u, useCallback as a, useMemo as Bn, useEffect as B, forwardRef as ke, useImperativeHandle as Re } from "react";
+function sn(c) {
+  if (c && c.constructor === Array) {
+    var o = c.filter(function(p) {
+      return typeof p == "number";
+    }).filter(function(p) {
+      return !isNaN(p);
+    });
+    if (c.length === 6 && o.length === 6) {
+      var i = ut();
+      return i[0] = o[0], i[1] = o[1], i[4] = o[2], i[5] = o[3], i[12] = o[4], i[13] = o[5], i;
+    } else if (c.length === 16 && o.length === 16)
+      return c;
+  }
+  throw new TypeError("Expected a `number[]` with length 6 or 16.");
+}
+function ut() {
+  for (var c = [], o = 0; o < 16; o++)
+    o % 5 == 0 ? c.push(1) : c.push(0);
+  return c;
+}
+function Se(c, o) {
+  for (var i = sn(c), p = sn(o), e = [], b = 0; b < 4; b++)
+    for (var nt = [i[b], i[b + 4], i[b + 8], i[b + 12]], et = 0; et < 4; et++) {
+      var T = et * 4, N = [p[T], p[T + 1], p[T + 2], p[T + 3]], j = nt[0] * N[0] + nt[1] * N[1] + nt[2] * N[2] + nt[3] * N[3];
+      e[b + T] = j;
+    }
+  return e;
+}
+function Ze(c) {
+  var o = ut();
+  return o[11] = -1 / c, o;
+}
+function Ee(c) {
+  var o = Math.PI / 180 * c, i = ut();
+  return i[0] = i[10] = Math.cos(o), i[2] = i[8] = Math.sin(o), i[2] *= -1, i;
+}
+function Oe(c) {
+  return "matrix3d(" + sn(c).join(", ") + ")";
+}
+function De(c, o) {
+  var i = ut();
+  return i[12] = c, o && (i[13] = o), i;
+}
+function We(c, o, i) {
+  var p = ut();
+  return c !== void 0 && o !== void 0 && i !== void 0 && (p[12] = c, p[13] = o, p[14] = i), p;
+}
+class Ct {
+  constructor(o) {
+    o ? o instanceof Ct ? this.m = [...o.m] : this.m = [...o] : this.m = ut();
+  }
+  clone() {
+    return new Ct(this);
+  }
+  multiply(o) {
+    this.m = Se(this.m, o);
+  }
+  perspective(o) {
+    this.multiply(Ze(o));
+  }
+  transformX(o) {
+    return (o * this.m[0] + this.m[12]) / (o * this.m[3] + this.m[15]);
+  }
+  translate(o, i) {
+    this.multiply(De(o, i ?? 0));
+  }
+  translate3d(o, i, p) {
+    this.multiply(We(o, i, p));
+  }
+  rotateY(o) {
+    this.multiply(Ee(o));
+  }
+  toString() {
+    return Oe(this.m);
+  }
+}
+const je = "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", Ce = "_viewport_ij4oz_1", He = "_viewportZoom_ij4oz_7 _viewport_ij4oz_1", Xe = "_viewportZoomDragToScroll_ij4oz_12 _viewportZoom_ij4oz_7 _viewport_ij4oz_1", $e = "_container_ij4oz_17", Be = "_clickLeft_ij4oz_33 _clickToFlip_ij4oz_25", Ne = "_clickRight_ij4oz_38 _clickToFlip_ij4oz_25", Ye = "_boundingBox_ij4oz_43", Ue = "_page_ij4oz_48", Ae = "_polygon_ij4oz_53", Ge = "_polygonBlank_ij4oz_62 _polygon_ij4oz_53", qe = "_lighting_ij4oz_67", S = {
+  viewport: Ce,
+  viewportZoom: He,
+  viewportZoomDragToScroll: Xe,
+  container: $e,
+  clickLeft: Be,
+  clickRight: Ne,
+  boundingBox: Ye,
+  page: Ue,
+  polygon: Ae,
+  polygonBlank: Ge,
+  lighting: qe
+};
+function Yn(c) {
+  return c * c;
+}
+function Ve(c) {
+  return 1 - Yn(1 - c);
+}
+function Nn(c) {
+  return c < 0.5 ? Yn(c * 2) / 2 : 0.5 + Ve((c - 0.5) * 2) / 2;
+}
+const Lt = {
+  progress: 0,
+  direction: null,
+  frontImage: null,
+  backImage: null,
+  auto: !1
+};
+function Je(c, o) {
+  const {
+    pages: i,
+    pagesHiRes: p = [],
+    flipDuration: e = 1e3,
+    zoomDuration: b = 500,
+    zooms: nt = [1, 2, 4],
+    perspective: et = 2400,
+    nPolygons: T = 10,
+    ambient: N = 0.4,
+    gloss: j = 0.6,
+    swipeMin: ft = 3,
+    singlePage: an = !1,
+    forwardDirection: I = "right",
+    centering: Un = !0,
+    startPage: ln = null,
+    loadingImage: un = je,
+    clickToZoom: zt = !0,
+    dragToFlip: gt = !0,
+    wheel: Ht = "scroll"
+  } = c, E = nt ?? [1], [v, An] = L(0), [Y, Gn] = L(0), [C, qn] = L(null), [_t, Vn] = L(null), [fn, Jn] = L(1), [x, Tt] = L(0), [Xt, Ft] = L(0), [gn, $t] = L(1), [m, Bt] = L(E[0]), [kt, Nt] = L(0), [U, hn] = L(!1), [P, Z] = L(Lt), [Yt, Ut] = L(null), [dn, Kn] = L({}), [, pn] = L(0), Qn = i[0] === null && (x === 0 || x === 1), f = fn === 2 && Qn ? 1 : fn, ht = u(null), mn = u(null), rt = u(0), ot = u(null), O = u(!1), Rt = u(!1), A = u(1 / 0), G = u(-1 / 0), Mn = u(0), bn = u(0), dt = u(0), pt = u(0), mt = u(!1), In = u({
+    count: 0,
+    target: 0,
+    cb: null
+  }), vn = u({}), H = u(P);
+  H.current = P;
+  const it = u(x);
+  it.current = x;
+  const St = u(f);
+  St.current = f;
+  const Mt = u(m);
+  Mt.current = m;
+  const Zt = u(kt);
+  Zt.current = kt;
+  const Pn = u(c.onFlipLeftStart);
+  Pn.current = c.onFlipLeftStart;
+  const yn = u(c.onFlipLeftEnd);
+  yn.current = c.onFlipLeftEnd;
+  const xn = u(c.onFlipRightStart);
+  xn.current = c.onFlipRightStart;
+  const wn = u(c.onFlipRightEnd);
+  wn.current = c.onFlipRightEnd;
+  const Ln = u(c.onZoomStart);
+  Ln.current = c.onZoomStart;
+  const zn = u(c.onZoomEnd);
+  zn.current = c.onZoomEnd;
+  const At = u(/* @__PURE__ */ new Set()), F = a((t) => {
+    const n = requestAnimationFrame((r) => {
+      At.current.delete(n), t(r);
+    });
+    return At.current.add(n), n;
+  }, []), te = i[0] === null ? i.length - 1 : i.length, Gt = i[0] !== null ? x + 1 : Math.max(1, x), q = a(
+    (t, n = !1) => {
+      if (n && m > 1 && !U) {
+        const r = p[t];
+        if (r) return r;
+      }
+      return i[t] ?? null;
+    },
+    [i, p, m, U]
+  ), qt = a(
+    (t) => {
+      if (C === null || dn[t])
+        return t;
+      if (!vn.current[t]) {
+        vn.current[t] = !0;
+        const n = new Image();
+        n.onload = () => {
+          Kn((r) => ({ ...r, [t]: !0 }));
+        }, n.src = t;
+      }
+      return un;
+    },
+    [C, dn, un]
+  ), Vt = a(
+    (t, n = !1) => {
+      const r = q(t, n);
+      return n && m > 1 && !U ? r : r ? qt(r) : null;
+    },
+    [q, qt, m, U]
+  ), Jt = a(
+    (t = !1) => {
+      for (let n = x - 3; n <= x + 3; n++)
+        Vt(n);
+      if (t)
+        for (let n = x; n < x + f; n++) {
+          const r = p[n];
+          r && (new Image().src = r);
+        }
+    },
+    [x, f, p, Vt]
+  ), _n = a(() => {
+    Tt((t) => f === 1 && t === 0 && i.length > 0 && !i[0] ? 1 : t);
+  }, [f, i]), Tn = !P.direction && x < i.length - f, Fn = !P.direction && x >= f && !(f === 1 && !q(Xt - 1)), bt = I === "left" ? Tn : Fn, It = I === "right" ? Tn : Fn, Et = !U && kt < E.length - 1, Ot = !U && kt > 0, Kt = I === "right" || f === 1 ? Xt : gn, Qt = I === "left" ? Xt : gn, ne = !!q(Kt), ee = !!q(Qt) && f === 2, kn = C && _t ? Math.min(
+    v / f / C,
+    Y / _t,
+    1
+  ) : 1, w = C ? Math.round(C * kn) : 0, V = _t ? Math.round(_t * kn) : 0, D = (v - w * f) / 2, J = (Y - V) / 2, re = Math.ceil(w / T + 1 / m) + "px", oe = V + "px", ie = `${w}px ${V}px`, ce = Bn(() => {
+    if (!P.direction || f !== 1) return 1;
+    let t = P.progress;
+    return P.direction !== I && (t = 1 - t), t > 0.7 ? 1 - (t - 0.7) / 0.3 : 1;
+  }, [P.direction, P.progress, f, I]), K = (() => {
+    if (f === 1) return D;
+    const t = q(Kt) ? D : v / 2;
+    return P.direction ? t < A.current ? t : A.current : t;
+  })(), vt = (() => {
+    if (f === 1) return v - D;
+    const t = q(Qt) ? v - D : v / 2;
+    return P.direction ? t > G.current ? t : G.current : t;
+  })(), Pt = Un ? Math.round(v / 2 - (K + vt) / 2) : 0, Rn = u(Pt);
+  Rn.current = Pt;
+  const Sn = u(f);
+  Yt === null && C !== null && Ut(Pt), Sn.current !== f && (Sn.current = f, Ut(Pt), mt.current = !1);
+  const yt = Math.round(Yt ?? 0), se = ot.current ? ot.current : zt && Et ? "zoom-in" : zt && Ot ? "zoom-out" : gt ? "grab" : "auto", ae = !O.current, le = (U || m > 1) && ae ? S.viewportZoomDragToScroll : U || m > 1 ? S.viewportZoom : S.viewport, ue = (() => {
+    const t = (vt - K) * m;
+    return t < v ? (K + yt) * m - (v - t) / 2 : (K + yt) * m;
+  })(), fe = (() => {
+    const t = (vt - K) * m;
+    return t < v ? (K + yt) * m - (v - t) / 2 : (vt + yt) * m - v;
+  })(), ge = (() => {
+    const t = V * m;
+    return t < Y ? J * m - (Y - t) / 2 : J * m;
+  })(), he = (() => {
+    const t = V * m;
+    return t < Y ? J * m - (Y - t) / 2 : (J + V) * m - Y;
+  })(), Zn = Math.min(
+    fe,
+    Math.max(ue, dt.current)
+  ), En = Math.min(
+    he,
+    Math.max(ge, pt.current)
+  ), On = a(
+    (t, n) => {
+      const r = [], s = [-0.5, -0.25, 0, 0.25, 0.5];
+      if (N < 1) {
+        const l = 1 - N, g = s.map(
+          (h) => (1 - Math.cos((t - n * h) / 180 * Math.PI)) * l
+        );
+        r.push(
+          `linear-gradient(to right,rgba(0,0,0,${g[0]}),rgba(0,0,0,${g[1]}) 25%,rgba(0,0,0,${g[2]}) 50%,rgba(0,0,0,${g[3]}) 75%,rgba(0,0,0,${g[4]}))`
+        );
+      }
+      if (j > 0) {
+        const h = s.map(
+          (d) => Math.max(
+            Math.pow(
+              Math.cos((t + 30 - n * d) / 180 * Math.PI),
+              200
+            ),
+            Math.pow(
+              Math.cos((t - 30 - n * d) / 180 * Math.PI),
+              200
+            )
+          )
+        );
+        r.push(
+          `linear-gradient(to right,rgba(255,255,255,${h[0] * j}),rgba(255,255,255,${h[1] * j}) 25%,rgba(255,255,255,${h[2] * j}) 50%,rgba(255,255,255,${h[3] * j}) 75%,rgba(255,255,255,${h[4] * j}))`
+        );
+      }
+      return r.join(",");
+    },
+    [N, j]
+  ), tn = a(
+    (t) => {
+      const n = H.current;
+      if (!n.direction) return [];
+      let r = n.progress, s = n.direction;
+      f === 1 && s !== I && (r = 1 - r, s = I);
+      const l = t === "front" ? n.frontImage : n.backImage, g = w / T;
+      let h = D, d = !1;
+      f === 1 ? I === "right" ? t === "back" && (d = !0, h = D - w) : s === "left" ? t === "back" ? h = w - D : d = !0 : t === "front" ? h = w - D : d = !0 : s === "left" ? t === "back" ? h = v / 2 : d = !0 : t === "front" ? h = v / 2 : d = !0;
+      const M = new Ct();
+      M.translate(v / 2), M.perspective(et), M.translate(-v / 2), M.translate(h, J);
+      let z = 0;
+      r > 0.5 && (z = -(r - 0.5) * 2 * 180), s === "left" && (z = -z), t === "back" && (z += 180), z && (d && M.translate(w), M.rotateY(z), d && M.translate(-w));
+      let y;
+      r < 0.5 ? y = r * 2 * Math.PI : y = (1 - (r - 0.5) * 2) * Math.PI, y === 0 && (y = 1e-9);
+      const tt = w / y;
+      let k = 0;
+      const _ = y / T;
+      let R = _ / 2 / Math.PI * 180;
+      const X = _ / Math.PI * 180;
+      d && (R = -y / Math.PI * 180 + X / 2), t === "back" && (R = -R);
+      const xt = t === "back" ? -X : X;
+      A.current = 1 / 0, G.current = -1 / 0;
+      const W = [];
+      for (let Wt = 0; Wt < T; Wt++) {
+        const Te = `${Wt / (T - 1) * 100}% 0px`, wt = M.clone(), Hn = d ? y - k : k;
+        let on = Math.sin(Hn) * tt;
+        d && (on = w - on);
+        let jt = (1 - Math.cos(Hn)) * tt;
+        t === "back" && (jt = -jt), wt.translate3d(on, 0, jt), wt.rotateY(-R);
+        const Xn = wt.transformX(0), $n = wt.transformX(g);
+        G.current = Math.max(Math.max(Xn, $n), G.current), A.current = Math.min(Math.min(Xn, $n), A.current);
+        const Fe = On(z - R, xt);
+        k += _, R += xt, W.push({
+          key: t + Wt,
+          bgImage: l,
+          lighting: Fe,
+          bgPos: Te,
+          transform: wt.toString(),
+          z: Math.abs(Math.round(jt))
+        });
+      }
+      return W;
+    },
+    [
+      f,
+      I,
+      w,
+      D,
+      J,
+      v,
+      et,
+      T,
+      On
+    ]
+  ), de = Bn(() => P.direction ? [...tn("front"), ...tn("back")] : [], [
+    P.direction,
+    P.progress,
+    P.frontImage,
+    P.backImage,
+    tn
+  ]), pe = a(
+    (t) => {
+      const n = t.target;
+      C === null && (qn(n.naturalWidth), Vn(n.naturalHeight));
+      const r = In.current;
+      r.cb && (r.count++, r.count >= r.target && (r.cb(), r.cb = null));
+    },
+    [C]
+  ), Dt = a(
+    (t, n) => {
+      In.current = { count: 0, target: t, cb: n };
+    },
+    []
+  ), Q = a(
+    (t, n) => {
+      const r = it.current, s = St.current;
+      let l = null, g = null;
+      t !== I ? s === 1 ? (l = i[r - 1] ?? null, g = null) : (l = i[I === "right" || s === 1 ? r : r + 1] ?? null, g = i[r - s + 1] ?? null) : s === 1 ? (l = i[r] ?? null, g = null) : (l = i[I === "left" ? r : r + 1] ?? null, g = i[r + s] ?? null), Z({
+        progress: 0,
+        direction: t,
+        frontImage: l,
+        backImage: g,
+        auto: !1
+      }), F(() => {
+        F(() => {
+          t !== I ? s === 2 && Ft(r - s) : s === 1 ? Ft(r + s) : $t(r + 1 + s), n && nn(t);
+        });
+      });
+    },
+    [I, i, F]
+  ), nn = a(
+    (t) => {
+      const n = H.current, r = e * (1 - n.progress), s = n.progress;
+      Z((M) => ({ ...M, auto: !0 }));
+      const l = it.current, g = i[0] !== null ? l + 1 : Math.max(1, l);
+      t === "left" ? Pn.current?.(g) : xn.current?.(g);
+      let h = null;
+      const d = (M) => {
+        h === null && (h = M);
+        const z = M - h;
+        let y = s + z / r;
+        y > 1 && (y = 1);
+        const tt = Nn(y);
+        if (Z((k) => ({ ...k, progress: tt })), y < 1)
+          F(d);
+        else {
+          const k = St.current;
+          let _;
+          t !== I ? _ = it.current - k : _ = it.current + k, Tt(_);
+          const R = i[0] !== null ? _ + 1 : Math.max(1, _);
+          t === "left" ? yn.current?.(R) : wn.current?.(R), k === 1 && t === I ? Z(Lt) : Dt(1, () => {
+            Z(Lt);
+          });
+        }
+      };
+      F(d);
+    },
+    [e, I, i, Dt, F]
+  ), Dn = a(() => {
+    const t = H.current, n = e * t.progress, r = t.progress;
+    Z((g) => ({ ...g, auto: !0 }));
+    let s = null;
+    const l = (g) => {
+      s === null && (s = g);
+      const h = g - s;
+      let d = r - r * h / n;
+      if (d < 0 && (d = 0), Z((M) => ({ ...M, progress: d })), d > 0)
+        F(l);
+      else {
+        const M = it.current;
+        Ft(M), $t(M + 1);
+        const z = St.current, y = H.current.direction;
+        z === 1 && y !== I ? Z(Lt) : Dt(1, () => {
+          Z(Lt);
+        });
+      }
+    };
+    F(l);
+  }, [e, I, Dt, F]), me = a(() => {
+    bt && Q("left", !0);
+  }, [bt, Q]), Me = a(() => {
+    It && Q("right", !0);
+  }, [It, Q]), ct = a(
+    (t, n) => {
+      const r = o.current;
+      if (!r) return;
+      let s, l;
+      if (n) {
+        const X = r.getBoundingClientRect();
+        s = n.pageX - X.left, l = n.pageY - X.top;
+      } else
+        s = r.clientWidth / 2, l = r.clientHeight / 2;
+      const g = Mt.current, h = t, d = r.scrollLeft, M = r.scrollTop, z = s + d, y = l + M, tt = z / g * h - s, k = y / g * h - l;
+      hn(!0), Ln.current?.(t);
+      let _ = null;
+      const R = (X) => {
+        _ === null && (_ = X);
+        const xt = X - _;
+        let W = xt / b;
+        W > 1 && (W = 1), W = Nn(W), Bt(g + (h - g) * W), dt.current = d + (tt - d) * W, pt.current = M + (k - M) * W, xt < b ? F(R) : (zn.current?.(t), hn(!1), Bt(t), dt.current = tt, pt.current = k);
+      };
+      F(R), h > 1 && Jt(!0);
+    },
+    [b, o, Jt, F]
+  ), en = a(
+    (t) => {
+      if (!Et) return;
+      const n = Zt.current + 1;
+      Nt(n), ct(E[n], t);
+    },
+    [Et, E, ct]
+  ), rn = a(
+    (t) => {
+      if (!Ot) return;
+      const n = Zt.current - 1;
+      Nt(n), ct(E[n], t);
+    },
+    [Ot, E, ct]
+  ), Wn = a(
+    (t) => {
+      const n = (Zt.current + 1) % E.length;
+      Nt(n), ct(E[n], t);
+    },
+    [E, ct]
+  ), jn = a(
+    (t) => {
+      if (t === null || t === Gt) return;
+      let n;
+      i[0] === null ? f === 2 && t === 1 ? n = 0 : n = t : n = t - 1, (f === 2 && n > 0 && i[0] === null || f === 2 && i[0] !== null) && (n = n & -2), Tt(n), A.current = 1 / 0, G.current = -1 / 0;
+    },
+    [Gt, i, f]
+  ), Cn = a(
+    (t, n) => {
+      const r = o.current;
+      r && (r.scrollLeft = Mn.current - t, r.scrollTop = bn.current - n, dt.current = r.scrollLeft, pt.current = r.scrollTop);
+    },
+    [o]
+  ), st = a(
+    (t) => {
+      if (ht.current = t.pageX, mn.current = t.pageY, rt.current = 0, Mt.current <= 1)
+        gt && (ot.current = "grab");
+      else {
+        const n = o.current;
+        n && (Mn.current = n.scrollLeft, bn.current = n.scrollTop), ot.current = "all-scroll";
+      }
+    },
+    [gt, o]
+  ), at = a(
+    (t) => {
+      if (ht.current === null) return !1;
+      const n = t.pageX - ht.current, r = t.pageY - mn.current;
+      if (rt.current = Math.max(rt.current, Math.abs(n)), rt.current = Math.max(rt.current, Math.abs(r)), Mt.current > 1)
+        return O.current || Cn(n, r), !1;
+      if (!gt || Math.abs(r) > Math.abs(n)) return !1;
+      ot.current = "grabbing", pn((l) => l + 1);
+      const s = H.current;
+      return n > 0 ? (s.direction === null && bt && n >= ft && Q("left", !1), H.current.direction === "left" && Z((l) => ({
+        ...l,
+        progress: Math.min(n / w, 1)
+      }))) : (s.direction === null && It && n <= -ft && Q("right", !1), H.current.direction === "right" && Z((l) => ({
+        ...l,
+        progress: Math.min(-n / w, 1)
+      }))), !0;
+    },
+    [gt, bt, It, ft, Q, w, Cn]
+  ), lt = a(
+    (t) => {
+      if (ht.current === null) return;
+      zt && rt.current < ft && Wn(t);
+      const n = H.current;
+      n.direction !== null && !n.auto && (n.progress > 1 / 4 ? nn(n.direction) : Dn()), ht.current = null, ot.current = null, pn((r) => r + 1);
+    },
+    [zt, ft, Wn, nn, Dn]
+  ), be = a(
+    (t) => {
+      O.current = !0, st(t.changedTouches[0]);
+    },
+    [st]
+  ), Ie = a(
+    (t) => {
+      at(t.changedTouches[0]) && t.cancelable && t.preventDefault();
+    },
+    [at]
+  ), ve = a(
+    (t) => {
+      lt(t.changedTouches[0]);
+    },
+    [lt]
+  ), Pe = a(
+    (t) => {
+      if (Rt.current = !0, !O.current && t.button === 0) {
+        st(t);
+        try {
+          t.target.setPointerCapture(t.pointerId);
+        } catch {
+        }
+      }
+    },
+    [st]
+  ), ye = a(
+    (t) => {
+      O.current || at(t);
+    },
+    [at]
+  ), xe = a(
+    (t) => {
+      if (!O.current) {
+        lt(t);
+        try {
+          t.target.releasePointerCapture(t.pointerId);
+        } catch {
+        }
+      }
+    },
+    [lt]
+  ), we = a(
+    (t) => {
+      O.current || Rt.current || t.button === 0 && st(t);
+    },
+    [st]
+  ), Le = a(
+    (t) => {
+      O.current || Rt.current || at(t);
+    },
+    [at]
+  ), ze = a(
+    (t) => {
+      O.current || Rt.current || lt(t);
+    },
+    [lt]
+  ), _e = a(
+    (t) => {
+      if (Ht === "scroll" && Mt.current > 1 && !O.current) {
+        const n = o.current;
+        n && (n.scrollLeft += t.deltaX, n.scrollTop += t.deltaY, dt.current = n.scrollLeft, pt.current = n.scrollTop), t.cancelable && t.preventDefault();
+      }
+      Ht === "zoom" && (t.deltaY >= 100 ? (rn(t), t.cancelable && t.preventDefault()) : t.deltaY <= -100 && (en(t), t.cancelable && t.preventDefault()));
+    },
+    [Ht, o, rn, en]
+  );
+  return B(() => {
+    const t = () => {
+      const n = o.current;
+      if (!n) return;
+      An(n.clientWidth), Gn(n.clientHeight);
+      const r = n.clientWidth > n.clientHeight && !an ? 2 : 1;
+      Jn(r), r === 2 && Tt((s) => {
+        const l = s & -2;
+        return l === 0 && i[0] === null ? s : l;
+      }), A.current = 1 / 0, G.current = -1 / 0;
+    };
+    return window.addEventListener("resize", t, { passive: !0 }), t(), () => window.removeEventListener("resize", t);
+  }, [an, o]), B(() => {
+    Ft(x), $t(x + 1), Jt();
+  }, [x]), B(() => {
+    if (mt.current || Yt === null) return;
+    mt.current = !0;
+    let t;
+    const n = () => {
+      t = requestAnimationFrame(() => {
+        Ut((r) => {
+          const s = Rn.current;
+          if (r === null)
+            return mt.current = !1, s;
+          const l = s - r;
+          return Math.abs(l) < 0.5 ? (mt.current = !1, s) : (n(), r + l * 0.1);
+        });
+      });
+    };
+    return n(), () => cancelAnimationFrame(t);
+  }, [Pt]), B(() => {
+    const t = o.current;
+    t && (t.scrollLeft = Zn);
+  }, [Zn, o]), B(() => {
+    const t = o.current;
+    t && (t.scrollTop = En);
+  }, [En, o]), B(() => {
+    _n();
+  }, [i, _n]), B(() => {
+    jn(ln);
+  }, [ln]), B(() => {
+    Bt(E[0]);
+  }, []), B(() => {
+    const t = At.current;
+    return () => {
+      t.forEach(cancelAnimationFrame), t.clear();
+    };
+  }, []), {
+    // Layout
+    viewWidth: v,
+    viewHeight: Y,
+    pageWidth: w,
+    pageHeight: V,
+    xMargin: D,
+    yMargin: J,
+    displayedPages: f,
+    zoom: m,
+    centerOffsetSmoothed: yt,
+    // Pages
+    page: Gt,
+    numPages: te,
+    leftPage: Kt,
+    rightPage: Qt,
+    showLeftPage: ne,
+    showRightPage: ee,
+    pageUrlLoading: Vt,
+    loadImage: qt,
+    // Flip
+    flip: P,
+    flipOpacity: ce,
+    polygonArray: de,
+    polygonWidth: re,
+    polygonHeight: oe,
+    polygonBgSize: ie,
+    // Navigation
+    canFlipLeft: bt,
+    canFlipRight: It,
+    canZoomIn: Et,
+    canZoomOut: Ot,
+    // Bounds
+    boundingLeft: K,
+    boundingRight: vt,
+    // Cursor
+    cursor: se,
+    viewportClass: le,
+    // Actions
+    flipLeft: me,
+    flipRight: Me,
+    zoomIn: en,
+    zoomOut: rn,
+    goToPage: jn,
+    // Event handlers
+    handlers: {
+      onTouchStart: be,
+      onTouchMove: Ie,
+      onTouchEnd: ve,
+      onPointerDown: Pe,
+      onPointerMove: ye,
+      onPointerUp: xe,
+      onMouseDown: we,
+      onMouseMove: Le,
+      onMouseUp: ze,
+      onWheel: _e
+    },
+    onImageLoad: pe
+  };
+}
+const Ke = {
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  height: "100%"
+}, nr = ke(
+  function(o, i) {
+    const p = u(null), e = Je(o, p);
+    return Re(
+      i,
+      () => ({
+        flipLeft: e.flipLeft,
+        flipRight: e.flipRight,
+        zoomIn: e.zoomIn,
+        zoomOut: e.zoomOut,
+        goToPage: e.goToPage,
+        canFlipLeft: e.canFlipLeft,
+        canFlipRight: e.canFlipRight,
+        canZoomIn: e.canZoomIn,
+        canZoomOut: e.canZoomOut,
+        page: e.page,
+        numPages: e.numPages
+      }),
+      [
+        e.flipLeft,
+        e.flipRight,
+        e.zoomIn,
+        e.zoomOut,
+        e.goToPage,
+        e.canFlipLeft,
+        e.canFlipRight,
+        e.canZoomIn,
+        e.canZoomOut,
+        e.page,
+        e.numPages
+      ]
+    ), /* @__PURE__ */ cn("div", { style: Ke, children: [
+      o.children?.({
+        canFlipLeft: e.canFlipLeft,
+        canFlipRight: e.canFlipRight,
+        canZoomIn: e.canZoomIn,
+        canZoomOut: e.canZoomOut,
+        page: e.page,
+        numPages: e.numPages,
+        flipLeft: e.flipLeft,
+        flipRight: e.flipRight,
+        zoomIn: e.zoomIn,
+        zoomOut: e.zoomOut,
+        goToPage: e.goToPage
+      }),
+      /* @__PURE__ */ $(
+        "div",
+        {
+          ref: p,
+          className: e.viewportClass,
+          style: {
+            cursor: e.cursor === "grabbing" ? "grabbing" : "auto"
+          },
+          onTouchMove: e.handlers.onTouchMove,
+          onPointerMove: e.handlers.onPointerMove,
+          onMouseMove: e.handlers.onMouseMove,
+          onTouchEnd: e.handlers.onTouchEnd,
+          onTouchCancel: e.handlers.onTouchEnd,
+          onPointerUp: e.handlers.onPointerUp,
+          onPointerCancel: e.handlers.onPointerUp,
+          onMouseUp: e.handlers.onMouseUp,
+          onWheel: e.handlers.onWheel,
+          children: /* @__PURE__ */ cn(
+            "div",
+            {
+              className: S.container,
+              style: { transform: `scale(${e.zoom})` },
+              children: [
+                /* @__PURE__ */ $(
+                  "div",
+                  {
+                    className: S.clickLeft,
+                    style: {
+                      cursor: e.canFlipLeft ? "pointer" : "auto"
+                    },
+                    onClick: e.flipLeft
+                  }
+                ),
+                /* @__PURE__ */ $(
+                  "div",
+                  {
+                    className: S.clickRight,
+                    style: {
+                      cursor: e.canFlipRight ? "pointer" : "auto"
+                    },
+                    onClick: e.flipRight
+                  }
+                ),
+                /* @__PURE__ */ cn(
+                  "div",
+                  {
+                    style: {
+                      transform: `translateX(${e.centerOffsetSmoothed}px)`
+                    },
+                    children: [
+                      e.showLeftPage && /* @__PURE__ */ $(
+                        "img",
+                        {
+                          className: S.page,
+                          style: {
+                            width: e.pageWidth + "px",
+                            height: e.pageHeight + "px",
+                            left: e.xMargin + "px",
+                            top: e.yMargin + "px"
+                          },
+                          src: e.pageUrlLoading(e.leftPage, !0) ?? void 0,
+                          onLoad: e.onImageLoad
+                        }
+                      ),
+                      e.showRightPage && /* @__PURE__ */ $(
+                        "img",
+                        {
+                          className: S.page,
+                          style: {
+                            width: e.pageWidth + "px",
+                            height: e.pageHeight + "px",
+                            left: e.viewWidth / 2 + "px",
+                            top: e.yMargin + "px"
+                          },
+                          src: e.pageUrlLoading(e.rightPage, !0) ?? void 0,
+                          onLoad: e.onImageLoad
+                        }
+                      ),
+                      /* @__PURE__ */ $("div", { style: { opacity: e.flipOpacity }, children: e.polygonArray.map((b) => /* @__PURE__ */ $(
+                        "div",
+                        {
+                          className: b.bgImage ? S.polygon : S.polygonBlank,
+                          style: {
+                            backgroundImage: b.bgImage ? `url(${e.loadImage(b.bgImage)})` : void 0,
+                            backgroundSize: e.polygonBgSize,
+                            backgroundPosition: b.bgPos,
+                            width: e.polygonWidth,
+                            height: e.polygonHeight,
+                            transform: b.transform,
+                            zIndex: b.z
+                          },
+                          children: b.lighting && /* @__PURE__ */ $(
+                            "div",
+                            {
+                              className: S.lighting,
+                              style: { backgroundImage: b.lighting }
+                            }
+                          )
+                        },
+                        b.key
+                      )) }),
+                      /* @__PURE__ */ $(
+                        "div",
+                        {
+                          className: S.boundingBox,
+                          style: {
+                            left: e.boundingLeft + "px",
+                            top: e.yMargin + "px",
+                            width: e.boundingRight - e.boundingLeft + "px",
+                            height: e.pageHeight + "px",
+                            cursor: e.cursor
+                          },
+                          onTouchStart: e.handlers.onTouchStart,
+                          onPointerDown: e.handlers.onPointerDown,
+                          onMouseDown: e.handlers.onMouseDown
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+export {
+  nr as Flipbook
+};

package/dist/src/Flipbook.d.ts

@@ -0,0 +1,2 @@
+import { FlipbookProps, FlipbookRef } from './types';
+export declare const Flipbook: import("react").ForwardRefExoticComponent<FlipbookProps & import("react").RefAttributes<FlipbookRef>>;

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { Flipbook } from './Flipbook';
+export type { FlipbookProps, FlipbookRef, FlipDirection, ForwardDirection, WheelBehavior, ZoomAt, } from './types';

package/dist/src/matrix.d.ts

@@ -0,0 +1,12 @@
+export declare class Matrix {
+    m: number[];
+    constructor(arg?: Matrix | number[]);
+    clone(): Matrix;
+    multiply(m: number[]): void;
+    perspective(d: number): void;
+    transformX(x: number): number;
+    translate(x: number, y?: number): void;
+    translate3d(x: number, y: number, z: number): void;
+    rotateY(deg: number): void;
+    toString(): string;
+}

package/dist/src/types.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+export type FlipDirection = 'left' | 'right';
+export type ForwardDirection = 'left' | 'right';
+export type WheelBehavior = 'scroll' | 'zoom';
+export interface FlipbookProps {
+    pages: (string | null)[];
+    pagesHiRes?: (string | null)[];
+    flipDuration?: number;
+    zoomDuration?: number;
+    zooms?: number[] | null;
+    perspective?: number;
+    nPolygons?: number;
+    ambient?: number;
+    gloss?: number;
+    swipeMin?: number;
+    singlePage?: boolean;
+    forwardDirection?: ForwardDirection;
+    centering?: boolean;
+    startPage?: number | null;
+    loadingImage?: string;
+    clickToZoom?: boolean;
+    dragToFlip?: boolean;
+    wheel?: WheelBehavior;
+    onFlipLeftStart?: (page: number) => void;
+    onFlipLeftEnd?: (page: number) => void;
+    onFlipRightStart?: (page: number) => void;
+    onFlipRightEnd?: (page: number) => void;
+    onZoomStart?: (zoom: number) => void;
+    onZoomEnd?: (zoom: number) => void;
+    children?: (scope: FlipbookRef) => ReactNode;
+}
+export interface FlipbookRef {
+    flipLeft(): void;
+    flipRight(): void;
+    zoomIn(zoomAt?: ZoomAt): void;
+    zoomOut(zoomAt?: ZoomAt): void;
+    goToPage(page: number): void;
+    canFlipLeft: boolean;
+    canFlipRight: boolean;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+    page: number;
+    numPages: number;
+}
+export interface ZoomAt {
+    pageX: number;
+    pageY: number;
+}
+export interface FlipState {
+    progress: number;
+    direction: FlipDirection | null;
+    frontImage: string | null;
+    backImage: string | null;
+    auto: boolean;
+}
+export interface PolygonData {
+    key: string;
+    bgImage: string | null;
+    lighting: string;
+    bgPos: string;
+    transform: string;
+    z: number;
+}

package/dist/src/useFlipbook.d.ts

@@ -0,0 +1,53 @@
+import { RefObject, SyntheticEvent, TouchEvent as ReactTouchEvent, PointerEvent as ReactPointerEvent, MouseEvent as ReactMouseEvent, WheelEvent as ReactWheelEvent } from 'react';
+import { FlipbookProps, FlipState, PolygonData, ZoomAt } from './types';
+export declare function useFlipbook(props: FlipbookProps, viewportRef: RefObject<HTMLDivElement | null>): {
+    viewWidth: number;
+    viewHeight: number;
+    pageWidth: number;
+    pageHeight: number;
+    xMargin: number;
+    yMargin: number;
+    displayedPages: number;
+    zoom: number;
+    centerOffsetSmoothed: number;
+    page: number;
+    numPages: number;
+    leftPage: number;
+    rightPage: number;
+    showLeftPage: boolean;
+    showRightPage: boolean;
+    pageUrlLoading: (p: number, hiRes?: boolean) => string | null;
+    loadImage: (url: string) => string;
+    flip: FlipState;
+    flipOpacity: number;
+    polygonArray: PolygonData[];
+    polygonWidth: string;
+    polygonHeight: string;
+    polygonBgSize: string;
+    canFlipLeft: boolean;
+    canFlipRight: boolean;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+    boundingLeft: number;
+    boundingRight: number;
+    cursor: string;
+    viewportClass: string;
+    flipLeft: () => void;
+    flipRight: () => void;
+    zoomIn: (zoomAt?: ZoomAt) => void;
+    zoomOut: (zoomAt?: ZoomAt) => void;
+    goToPage: (p: number | null) => void;
+    handlers: {
+        onTouchStart: (e: ReactTouchEvent) => void;
+        onTouchMove: (e: ReactTouchEvent) => void;
+        onTouchEnd: (e: ReactTouchEvent) => void;
+        onPointerDown: (e: ReactPointerEvent) => void;
+        onPointerMove: (e: ReactPointerEvent) => void;
+        onPointerUp: (e: ReactPointerEvent) => void;
+        onMouseDown: (e: ReactMouseEvent) => void;
+        onMouseMove: (e: ReactMouseEvent) => void;
+        onMouseUp: (e: ReactMouseEvent) => void;
+        onWheel: (e: ReactWheelEvent) => void;
+    };
+    onImageLoad: (e: SyntheticEvent<HTMLImageElement>) => void;
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@kaktos/flipbook-react",
+  "version": "1.0.0",
+  "description": "3D page flip effect for React",
+  "type": "module",
+  "main": "dist/react-flipbook.cjs",
+  "module": "dist/react-flipbook.js",
+  "types": "dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/react-flipbook.js",
+      "require": "./dist/react-flipbook.cjs",
+      "types": "./dist/src/index.d.ts"
+    },
+    "./style.css": "./dist/react-flipbook.css"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "rm -rf dist && vite build && tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "dev": "vite"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "rematrix": "^0.7.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "files": [
+    "dist/react-flipbook.js",
+    "dist/react-flipbook.cjs",
+    "dist/react-flipbook.css",
+    "dist/src",
+    "README.md"
+  ],
+  "license": "MIT"
+}