@epam/ai-dial-react-pdf-highlighter 0.2.0-dev.3 → 0.2.0-dev.30

package/dist/ai-dial-react-pdf-highlighter.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@epam/ai-dial-ui-kit"),U=require("@epam/pdf-highlighter-kit"),t=require("react"),z=require("@tabler/icons-react"),Z="auto",A="page-fit",L=[{value:Z,label:"Auto"},{value:A,label:"Page Fit"},{value:"0.5",label:"50%"},{value:"0.75",label:"75%"},{value:"1",label:"100%"},{value:"1.25",label:"125%"},{value:"1.5",label:"150%"},{value:"2",label:"200%"},{value:"3",label:"300%"}],K={maxWidth:104,format:"image/jpeg",quality:.85},$=15,ne="application/pdf",le=".pdf",W=({pdf:s,highlights:a,selectedHighlightId:m,autoFocusFirstHighlight:n=!1,selectedPageNumber:d,zoom:c,containerClassName:p,onTotalPagesChange:x,onViewerReady:y,selectedPages:f})=>{const h=t.useRef(null),r=t.useRef(null),[o,C]=t.useState(!1),[O,v]=t.useState(!1),P=t.useRef(x),E=t.useRef(y);t.useEffect(()=>{P.current=x},[x]),t.useEffect(()=>{E.current=y},[y]);const N=t.useCallback(l=>r.current?.goToHighlight(l),[]);return t.useEffect(()=>{if(!h.current)return;C(!1),v(!1),r.current&&(r.current.destroy(),r.current=null);let l=null,b=!0;return(async()=>{try{if(l=new U.PDFHighlightViewer,await l.init(h.current,{enableTextSelection:!0,enableVirtualScrolling:!0,bboxOrigin:"top-left"}),!b){l.destroy();return}if(await l.loadPDF(s,{selectedPages:f}),!b){l.destroy();return}const g=l.getTotalPages?.();typeof g=="number"&&g>0&&P.current?.(g),b&&(r.current=l,C(!0))}catch(g){if(!b)return;console.error("Error in initViewer:",g)}})(),()=>{b=!1,l&&l.destroy()}},[s,f]),t.useEffect(()=>{!o||!r.current||(r.current.loadHighlights(a),n&&a&&a[0]&&N(a[0].id))},[n,N,a,o]),t.useEffect(()=>{v(!0)},[a]),t.useEffect(()=>{o&&O&&m&&N(m)},[N,o,O,m]),t.useEffect(()=>{if(!(!o||!c))if(c===Z)r.current?.setZoom?.(U.ZoomMode.AUTO);else if(c===A)r.current?.setZoom?.(U.ZoomMode.PAGE_FIT);else{const l=parseFloat(c);!Number.isNaN(l)&&l>0&&r.current?.setZoom?.(l)}},[o,c]),t.useEffect(()=>{o&&d&&r.current?.setPage?.(d)},[o,d]),t.useEffect(()=>{if(!o||!r.current)return;const l=r.current;E.current?.({getThumbnailsDataUrl:(b,I)=>l.getThumbnailsDataUrl(b,I),zoomIn:()=>l.zoomIn(),zoomOut:()=>l.zoomOut(),getZoom:()=>l.getZoom(),navigateToPage:b=>l.setPage?.(b)})},[o]),e.jsx("div",{ref:h,className:i.mergeClasses("grow min-w-0 overflow-auto bg-layer-3",p)})},T="h-4 rounded-[120px] bg-gradient-to-r from-layer-4 via-layer-3 to-layer-4 bg-[length:200%_100%] animate-skeleton-wave",X=({className:s,ariaLabel:a="pdf preview loading"})=>e.jsx("div",{role:"status","aria-label":a,"aria-live":"polite",className:i.mergeClasses("h-full w-full bg-layer-3",s),children:e.jsxs("div",{className:"flex h-full w-full flex-col gap-10 px-[60px] pt-10",children:[e.jsx("div",{className:"mx-auto h-4 w-[208px] max-w-[40%] rounded-[120px] bg-gradient-to-r from-layer-4 via-layer-3 to-layer-4 bg-[length:200%_100%] animate-skeleton-wave"}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:T}),e.jsx("div",{className:T}),e.jsx("div",{className:T}),e.jsx("div",{className:T}),e.jsx("div",{className:i.mergeClasses(T,"w-[28%] max-w-[320px]")})]}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:T}),e.jsx("div",{className:T}),e.jsx("div",{className:T}),e.jsx("div",{className:T}),e.jsx("div",{className:i.mergeClasses(T,"w-[58%] max-w-[520px]")})]})]})}),Y=t.createContext(null),J=()=>t.useContext(Y),S=L.filter(({value:s})=>{const a=Number.parseFloat(s);return!Number.isNaN(a)&&a>0}),oe=[...S].reverse(),Q=(s,a,m)=>{if(S.length===0)return s;const n=Number.parseFloat(s),d=!Number.isNaN(n)&&n>0?n:m,c=typeof d=="number"&&d>0?d:Number.parseFloat(S[0].value);return a===1?(S.find(({value:p})=>Number.parseFloat(p)>c)??S[S.length-1]).value:(oe.find(({value:p})=>Number.parseFloat(p)<c)??S[0]).value};function ee(s,a){const m=(s??"").toLowerCase();return(a??"").toLowerCase()===ne||m.endsWith(le)}const G=L.map(s=>({value:s.value,label:s.label})),te=({fileUrl:s,fileName:a,loadFileCb:m,highlights:n,selectedPageNumber:d,onTotalPagesChange:c,thumbnailPageNumbers:p,onThumbnailsLoaded:x,onViewerReady:y,showLoaderOverlay:f=!1,selectedPages:h})=>{const r=J(),o=t.useRef(null),[C,O]=t.useState(!1),[v,P]=t.useState(0),[E,N]=t.useState(!1),[l,b]=t.useState(null),[I,g]=t.useState(null),[j,k]=t.useState(Z),D=t.useMemo(()=>{let u=a||s;if(!a)try{u=new URL(s).pathname}catch{u=s.split("?")[0].split("#")[0]}return ee(u.toLowerCase())},[a,s]),M=t.useCallback(u=>{P((v+u+n.length)%n.length)},[v,n.length]),F=t.useCallback(u=>{const w=o.current;!w?.getZoom||!u||k(Q(j,u,w.getZoom()))},[j]),V=t.useMemo(()=>{if(!(j===Z||j===A||L.some(w=>w.value===j))){const w=parseFloat(j);if(!Number.isNaN(w)&&w>0)return[...G,{value:j,label:`${Math.round(w*100)}%`}]}return G},[j]);t.useEffect(()=>{let u=!1;if(b(!0),N(!1),g(null),O(!1),o.current=null,!D){N(!0),b(!1);return}return(async()=>{try{const _=await(r?r.getFile(s,()=>m(s)):m(s));u||g(_)}catch{u||(N(!0),g(null))}finally{u||b(!1)}})(),()=>{u=!0}},[s,r,m,D]);const B=t.useCallback(u=>{o.current=u,O(!0),y?.(u)},[y]);return t.useEffect(()=>{const u=p??[],w=o.current?.getThumbnailsDataUrl;if(!u.length||!w||!I||!x||!C)return;let _=!1;return(async()=>{const q=new Map;for(let R=0;R<u.length&&!_;R+=$){const se=u.slice(R,R+$);try{const H=await w(se,K);if(_)break;H.forEach((re,ae)=>q.set(ae,re)),x(new Map(q))}catch(H){console.warn("Thumbnail batch load failed:",H);break}}})(),()=>{_=!0}},[p,I,x,C]),{file:I,isLoading:l,isError:E,isSupportedFile:D,activeHighlightIndex:v,zoom:j,setZoom:k,zoomSelectOptions:V,viewerApiRef:o,showLoader:!E&&(!!l||f),changeIndex:M,handleZoomChange:F,handleViewerReady:B}},ce=({fileUrl:s,fileName:a,errorLabel:m,occurrencesLabel:n,unsupportedLabel:d,highlights:c,loadFileCb:p,showOccurrences:x=!0,selectedPageNumber:y,containerClassName:f,pdfViewerClassName:h,onTotalPagesChange:r,title:o,thumbnailPageNumbers:C,onThumbnailsLoaded:O,onViewerReady:v,showLoaderOverlay:P=!1,selectedPages:E})=>{const{file:N,isError:l,isSupportedFile:b,activeHighlightIndex:I,zoom:g,setZoom:j,zoomSelectOptions:k,showLoader:D,changeIndex:M,handleZoomChange:F,handleViewerReady:V}=te({fileUrl:s,fileName:a,loadFileCb:p,highlights:c,selectedPageNumber:y,onTotalPagesChange:r,thumbnailPageNumbers:C,onThumbnailsLoaded:O,onViewerReady:v,showLoaderOverlay:P,selectedPages:E});return e.jsxs("div",{className:i.mergeClasses("flex flex-col self-center gap-4 py-3 px-6 h-full w-full bg-layer-2",f),children:[a&&e.jsx("div",{className:"shrink-0 min-h-0 w-full",children:e.jsx(i.DialEllipsisTooltip,{className:"dial-tiny-text text-secondary",text:a})}),e.jsxs("div",{className:i.mergeClasses("flex w-full justify-between items-center",x&&o?"gap-2":""),children:[e.jsx("div",{children:x?e.jsxs("div",{className:"flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-4 rounded w-fit",children:[e.jsxs("span",{className:"dial-small-text",children:[n??"Occurrences",":",e.jsx("span",{className:"pl-0.5 min-w-3 inline-block text-right",children:c.length>0?`${I+1}/${c.length}`:"0"})]}),c.length>0&&e.jsxs(e.Fragment,{children:[e.jsx(i.DialButton,{className:"p-0 text-primary !h-6.5",size:i.ElementSize.Small,iconAfter:e.jsx(z.IconChevronDown,{size:16}),"aria-label":"Next occurrence",onClick:()=>M(1)}),e.jsx(i.DialButton,{className:"p-0 text-primary !h-6.5",size:i.ElementSize.Small,iconAfter:e.jsx(z.IconChevronUp,{size:16}),"aria-label":"Previous occurrence",onClick:()=>M(-1)})]})]}):e.jsx("div",{})}),e.jsxs("div",{className:i.mergeClasses("flex flex-1 items-center gap-4 min-w-0",o!=null&&o!==""?"justify-between":"justify-end"),children:[o!=null&&o!==""&&e.jsx(i.DialEllipsisTooltip,{text:o,className:"dial-body-semi-text text-primary min-w-0"}),e.jsxs("div",{className:"flex gap-0.5 items-center shrink-0",children:[e.jsx("div",{className:"h-6",children:e.jsx(i.DialSelect,{size:i.SelectSize.Sm,className:"bg-layer-4 !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-hover rounded",options:k,value:g,onChange:B=>j(B)})}),e.jsx(i.DialButton,{className:"py-0 flex items-center justify-center rounded text-primary bg-layer-4 border border-transparent hover:border-hover",iconAfter:e.jsx(z.IconMinus,{size:16}),"aria-label":"Zoom out",size:i.ElementSize.Small,onClick:()=>F(-1)}),e.jsx(i.DialButton,{className:"py-0 flex items-center justify-center rounded text-primary bg-layer-4 border border-transparent hover:border-hover",iconAfter:e.jsx(z.IconPlus,{size:16}),"aria-label":"Zoom in",size:i.ElementSize.Small,onClick:()=>F(1)})]})]})]}),e.jsxs("div",{className:"relative flex min-h-0 flex-1",children:[N&&e.jsx(W,{pdf:N,highlights:c,selectedHighlightId:x?c[I]?.id:void 0,selectedPageNumber:y,zoom:g,onTotalPagesChange:r,onViewerReady:V,containerClassName:h,selectedPages:E}),D&&e.jsx(X,{className:"absolute inset-0 z-10"}),l&&e.jsx("div",{className:"absolute inset-0 z-20 flex items-center justify-center bg-layer-3",children:e.jsxs("div",{className:"flex flex-col items-center gap-6 p-10",children:[e.jsx(z.IconAlertTriangle,{size:60,stroke:2,className:"text-secondary"}),e.jsx("div",{className:"text-center dial-small-text whitespace-pre-wrap",children:!b&&d?d:m??"Failed to load document."})]})})]})]})},ie=1200*1e3,ue=20,me=({children:s,ttlMs:a=ie,maxEntries:m=ue})=>{const n=t.useRef(new Map),d=t.useCallback((f,h)=>{n.current.delete(f),n.current.set(f,h)},[]),c=t.useCallback(()=>{const f=Date.now();for(const[h,r]of n.current.entries())r.file&&f-r.timestamp>a&&n.current.delete(h)},[a]),p=t.useCallback(()=>{for(;n.current.size>m;){const f=n.current.keys().next().value;f&&n.current.delete(f)}},[m]),x=t.useCallback(()=>{n.current.clear()},[]),y=t.useCallback(async(f,h)=>{c();const r=n.current.get(f);if(r){if(d(f,{...r,timestamp:Date.now()}),r.file)return r.file;if(r.promise)return r.promise}const o=Date.now(),C=h().then(v=>{const P={file:v,timestamp:Date.now()};return d(f,P),p(),v}).catch(v=>{throw n.current.delete(f),v});return d(f,{promise:C,timestamp:o}),p(),C},[p,c,d]);return t.useEffect(()=>()=>x(),[x]),e.jsx(Y.Provider,{value:{getFile:y,clearCache:x},children:s})},de=({pageNum:s,onSelectPage:a,isSelected:m,isLoading:n,isMultiselect:d,thumbnailUrl:c,className:p})=>e.jsxs("button",{type:"button","aria-label":`Page ${s}`,"aria-pressed":m,onClick:x=>{d&&x.target.closest("[data-checkbox-wrapper]")||a(s)},className:i.mergeClasses("flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-layer-4 rounded-sm",m&&(d?"border border-accent-primary bg-accent-primary-alpha":"border border-primary"),p),children:[e.jsxs("div",{className:"relative w-[104px] h-[146px] bg-model-icon rounded-sm overflow-hidden",children:[c?e.jsx("img",{src:c,alt:`Page ${s} thumbnail`,className:"w-full h-full object-cover rounded-sm"}):null,d&&e.jsx("div",{className:"absolute left-1 top-1 z-10","data-checkbox-wrapper":!0,children:e.jsx(i.DialCheckbox,{id:`page-thumbnail-${s}`,checked:m,onChange:()=>a(s),className:"before:border-primary before:bg-model-icon bg-model-icon"})}),n&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-blackout rounded-sm",children:e.jsx(i.DialLoader,{size:24,fullWidth:!1,ariaLabel:`Loading page ${s}`})})]}),e.jsx("span",{className:"dial-tiny-text text-primary",children:s})]});exports.AUTO_ZOOM_ID=Z;exports.DocumentPreview=ce;exports.DocumentPreviewCacheProvider=me;exports.FIT_ZOOM_ID=A;exports.PDFViewer=W;exports.PageThumbnail=de;exports.PdfPreviewLoader=X;exports.THUMBNAIL_BATCH_SIZE=$;exports.THUMBNAIL_IMAGE_OPTIONS=K;exports.ZOOM_OPTIONS=L;exports.getStepZoomOptionValue=Q;exports.isPdfFile=ee;exports.useDocumentPreview=te;exports.useDocumentPreviewCache=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@epam/ai-dial-ui-kit"),L=require("@epam/pdf-highlighter-kit"),t=require("react"),k=require("@tabler/icons-react"),z="auto",A="page-fit",V=[{value:z,label:"Auto"},{value:A,label:"Page Fit"},{value:"0.5",label:"50%"},{value:"0.75",label:"75%"},{value:"1",label:"100%"},{value:"1.25",label:"125%"},{value:"1.5",label:"150%"},{value:"2",label:"200%"},{value:"3",label:"300%"}],X={maxWidth:104,format:"image/jpeg",quality:.85},$=15,le="application/pdf",oe=".pdf",Y=({pdf:a,highlights:r,selectedHighlightId:u,autoFocusFirstHighlight:l=!1,selectedPageNumber:d,zoom:c,containerClassName:v,onTotalPagesChange:b,onViewerReady:N,selectedPages:m,viewerOptions:y})=>{const f=t.useRef(null),n=t.useRef(null),[h,E]=t.useState(!1),[w,I]=t.useState(!1),T=t.useRef(b),O=t.useRef(N),_=t.useRef(y);t.useEffect(()=>{T.current=b},[b]),t.useEffect(()=>{O.current=N},[N]),t.useEffect(()=>{_.current=y},[y]);const j=t.useCallback(s=>n.current?.goToHighlight(s),[]);return t.useEffect(()=>{if(!f.current)return;E(!1),I(!1),n.current&&(n.current.destroy(),n.current=null);let s=null,x=!0;const p=()=>{x&&I(!0)};return(async()=>{try{if(s=new L.PDFHighlightViewer,await s.init(f.current,{enableTextSelection:!0,enableVirtualScrolling:!0,bboxOrigin:"top-left",..._.current}),!x){s.destroy();return}if(s.addEventListener("zoomChanged",p),await s.loadPDF(a,{selectedPages:m}),!x){s.destroy();return}const C=s.getTotalPages?.();typeof C=="number"&&C>0&&T.current?.(C),x&&(n.current=s,E(!0))}catch(C){if(!x)return;console.error("Error in initViewer:",C)}})(),()=>{x=!1,s&&(s.removeEventListener("zoomChanged",p),s.destroy())}},[a,m]),t.useEffect(()=>{!h||!n.current||(n.current.loadHighlights(r),l&&r&&r[0]&&j(r[0].id))},[l,j,r,h]),t.useEffect(()=>{h&&w&&u&&j(u)},[j,h,w,u]),t.useEffect(()=>{if(!(!h||!c))if(c===z)n.current?.setZoom?.(L.ZoomMode.AUTO);else if(c===A)n.current?.setZoom?.(L.ZoomMode.PAGE_FIT);else{const s=parseFloat(c);!Number.isNaN(s)&&s>0&&n.current?.setZoom?.(s)}},[h,c]),t.useEffect(()=>{h&&d&&n.current?.setPage?.(d)},[h,d]),t.useEffect(()=>{if(!h||!n.current)return;const s=n.current;O.current?.({getThumbnailsDataUrl:(x,p)=>s.getThumbnailsDataUrl(x,p),zoomIn:()=>s.zoomIn(),zoomOut:()=>s.zoomOut(),getZoom:()=>s.getZoom(),navigateToPage:x=>s.setPage?.(x),setPageDisplayRotation:(x,p,S)=>s.setPageDisplayRotation(x,p,S),getPageDisplayRotation:x=>s.getPageDisplayRotation(x)})},[h]),e.jsx("div",{ref:f,className:i.mergeClasses("grow min-w-0 overflow-auto bg-layer-raised",v)})},P="h-4 rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave",J=({className:a,ariaLabel:r="pdf preview loading"})=>e.jsx("div",{role:"status","aria-label":r,"aria-live":"polite",className:i.mergeClasses("h-full w-full bg-layer-raised",a),children:e.jsxs("div",{className:"flex h-full w-full flex-col gap-10 px-[60px] pt-10",children:[e.jsx("div",{className:"mx-auto h-4 w-[208px] max-w-[40%] rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave"}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:i.mergeClasses(P,"w-[28%] max-w-[320px]")})]}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:i.mergeClasses(P,"w-[58%] max-w-[520px]")})]})]})}),Q=t.createContext(null),ee=()=>t.useContext(Q),D=V.filter(({value:a})=>{const r=Number.parseFloat(a);return!Number.isNaN(r)&&r>0}),ce=[...D].reverse(),te=(a,r,u)=>{if(D.length===0)return a;const l=Number.parseFloat(a),d=!Number.isNaN(l)&&l>0?l:u,c=typeof d=="number"&&d>0?d:Number.parseFloat(D[0].value);return r===1?(D.find(({value:v})=>Number.parseFloat(v)>c)??D[D.length-1]).value:(ce.find(({value:v})=>Number.parseFloat(v)<c)??D[0]).value};function q(a,r){const u=(a??"").toLowerCase();return(r??"").toLowerCase()===le||u.endsWith(oe)}const W=V.map(a=>({value:a.value,label:a.label})),ae=({fileUrl:a,fileName:r,loadFileCb:u,highlights:l,selectedPageNumber:d,onTotalPagesChange:c,thumbnailPageNumbers:v,onThumbnailsLoaded:b,onViewerReady:N,showLoaderOverlay:m=!1,selectedPages:y})=>{const f=ee(),n=t.useRef(null),[h,E]=t.useState(!1),[w,I]=t.useState(0),[T,O]=t.useState(!1),[_,j]=t.useState(null),[s,x]=t.useState(null),[p,S]=t.useState(z),C=t.useMemo(()=>{if(r)return q(r.toLowerCase());let o;try{o=new URL(a).pathname}catch{o=a.split("?")[0].split("#")[0]}const g=o.split("/").pop()??"";return!g.includes(".")||q(g.toLowerCase())},[r,a]),B=t.useCallback(o=>{I((w+o+l.length)%l.length)},[w,l.length]),U=t.useCallback(o=>{const g=n.current;!g?.getZoom||!o||S(te(p,o,g.getZoom()))},[p]),R=t.useMemo(()=>{if(!(p===z||p===A||V.some(g=>g.value===p))){const g=parseFloat(p);if(!Number.isNaN(g)&&g>0)return[...W,{value:p,label:`${Math.round(g*100)}%`}]}return W},[p]);t.useEffect(()=>{let o=!1;if(j(!0),O(!1),x(null),E(!1),n.current=null,!C){O(!0),j(!1);return}return(async()=>{try{const Z=await(f?f.getFile(a,()=>u(a)):u(a));o||x(Z)}catch{o||(O(!0),x(null))}finally{o||j(!1)}})(),()=>{o=!0}},[a,f,u,C]);const M=t.useCallback(o=>{n.current=o,E(!0),N?.(o)},[N]);return t.useEffect(()=>{const o=v??[],g=n.current?.getThumbnailsDataUrl;if(!o.length||!g||!s||!b||!h)return;let Z=!1;return(async()=>{const K=new Map;for(let F=0;F<o.length&&!Z;F+=$){const se=o.slice(F,F+$);try{const H=await g(se,X);if(Z)break;H.forEach((re,ne)=>K.set(ne,re)),b(new Map(K))}catch(H){console.warn("Thumbnail batch load failed:",H);break}}})(),()=>{Z=!0}},[v,s,b,h]),{file:s,isLoading:_,isError:T,isSupportedFile:C,activeHighlightIndex:w,zoom:p,setZoom:S,zoomSelectOptions:R,viewerApiRef:n,showLoader:!T&&(!!_||m),changeIndex:B,handleZoomChange:U,handleViewerReady:M}},ie=({fileUrl:a,fileName:r,errorLabel:u,occurrencesLabel:l,unsupportedLabel:d,highlights:c,loadFileCb:v,showOccurrences:b=!0,selectedPageNumber:N,containerClassName:m,pdfViewerClassName:y,onTotalPagesChange:f,title:n,thumbnailPageNumbers:h,onThumbnailsLoaded:E,onViewerReady:w,showLoaderOverlay:I=!1,selectedPages:T,selectedHighlightId:O,viewerOptions:_})=>{const{file:j,isError:s,isSupportedFile:x,activeHighlightIndex:p,zoom:S,setZoom:C,zoomSelectOptions:B,showLoader:U,changeIndex:R,handleZoomChange:M,handleViewerReady:G}=ae({fileUrl:a,fileName:r,loadFileCb:v,highlights:c,selectedPageNumber:N,onTotalPagesChange:f,thumbnailPageNumbers:h,onThumbnailsLoaded:E,onViewerReady:w,showLoaderOverlay:I,selectedPages:T});return e.jsxs("div",{className:i.mergeClasses("flex flex-col self-center gap-4 py-3 px-6 h-full w-full bg-layer-sunken",m),children:[r&&e.jsx("div",{className:"shrink-0 min-h-0 w-full",children:e.jsx(i.EllipsisTooltip,{className:"dial-tiny-text text-secondary",text:r})}),e.jsxs("div",{className:i.mergeClasses("flex w-full justify-between items-center",b&&n?"gap-2":""),children:[e.jsx("div",{children:b?e.jsxs("div",{className:"flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-raised rounded w-fit",children:[e.jsxs("span",{className:"dial-small-text",children:[l??"Occurrences",":",e.jsx("span",{className:"pl-0.5 min-w-3 inline-block text-right",children:c.length>0?`${p+1}/${c.length}`:"0"})]}),c.length>0&&e.jsxs(e.Fragment,{children:[e.jsx(i.IconButton,{className:"p-0 text-primary !h-6.5",size:i.ElementSize.Small,icon:e.jsx(k.IconChevronDown,{size:16}),"aria-label":"Next occurrence",onClick:()=>R(1)}),e.jsx(i.IconButton,{className:"p-0 text-primary !h-6.5",size:i.ElementSize.Small,icon:e.jsx(k.IconChevronUp,{size:16}),"aria-label":"Previous occurrence",onClick:()=>R(-1)})]})]}):e.jsx("div",{})}),e.jsxs("div",{className:i.mergeClasses("flex flex-1 items-center gap-4 min-w-0",n!=null&&n!==""?"justify-between":"justify-end"),children:[n!=null&&n!==""&&e.jsx(i.EllipsisTooltip,{text:n,className:"dial-body-semi-text text-primary min-w-0"}),e.jsxs("div",{className:"flex gap-0.5 items-center shrink-0",children:[e.jsx("div",{className:"h-6",children:e.jsx(i.Select,{size:i.ElementSize.Small,ariaLabel:"Zoom",fieldClassName:"bg-control-neutral !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-accent-alpha rounded",options:B,value:S,onChange:o=>C(o)})}),e.jsx(i.IconButton,{className:"py-0 rounded text-primary bg-control-neutral border border-transparent hover:border-accent-alpha",icon:e.jsx(k.IconMinus,{size:16}),"aria-label":"Zoom out",size:i.ElementSize.Small,onClick:()=>M(-1)}),e.jsx(i.IconButton,{className:"py-0 rounded text-primary bg-control-neutral border border-transparent hover:border-accent-alpha",icon:e.jsx(k.IconPlus,{size:16}),"aria-label":"Zoom in",size:i.ElementSize.Small,onClick:()=>M(1)})]})]})]}),e.jsxs("div",{className:"relative flex min-h-0 flex-1",children:[j&&e.jsx(Y,{pdf:j,highlights:c,selectedHighlightId:b?c[p]?.id:O,selectedPageNumber:N,zoom:S,onTotalPagesChange:f,onViewerReady:G,containerClassName:y,selectedPages:T,viewerOptions:_}),U&&e.jsx(J,{className:"absolute inset-0 z-10"}),s&&e.jsx("div",{className:"absolute inset-0 z-20 flex items-center justify-center bg-layer-raised",children:e.jsxs("div",{className:"flex flex-col items-center gap-6 p-10",children:[e.jsx(k.IconAlertTriangle,{size:60,stroke:2,className:"text-secondary"}),e.jsx("div",{className:"text-center dial-small-text whitespace-pre-wrap",children:!x&&d?d:u??"Failed to load document."})]})})]})]})},ue=1200*1e3,de=20,me=({children:a,ttlMs:r=ue,maxEntries:u=de})=>{const l=t.useRef(new Map),d=t.useCallback((m,y)=>{l.current.delete(m),l.current.set(m,y)},[]),c=t.useCallback(()=>{const m=Date.now();for(const[y,f]of l.current.entries())f.file&&m-f.timestamp>r&&l.current.delete(y)},[r]),v=t.useCallback(()=>{for(;l.current.size>u;){const m=l.current.keys().next().value;m&&l.current.delete(m)}},[u]),b=t.useCallback(()=>{l.current.clear()},[]),N=t.useCallback(async(m,y)=>{c();const f=l.current.get(m);if(f){if(d(m,{...f,timestamp:Date.now()}),f.file)return f.file;if(f.promise)return f.promise}const n=Date.now(),h=y().then(w=>{const I={file:w,timestamp:Date.now()};return d(m,I),v(),w}).catch(w=>{throw l.current.delete(m),w});return d(m,{promise:h,timestamp:n}),v(),h},[v,c,d]);return t.useEffect(()=>()=>b(),[b]),e.jsx(Q.Provider,{value:{getFile:N,clearCache:b},children:a})},fe=({pageNum:a,onSelectPage:r,isSelected:u,isLoading:l,isMultiselect:d,thumbnailUrl:c,className:v})=>e.jsxs("button",{type:"button","aria-label":`Page ${a}`,"aria-pressed":u,onClick:b=>{d&&b.target.closest("[data-checkbox-wrapper]")||r(a)},className:i.mergeClasses("flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-control-accent-alpha-hover rounded-sm",u&&(d?"border border-accent bg-control-accent-alpha":"border border-primary"),v),children:[e.jsxs("div",{className:"relative w-[104px] h-[146px] bg-layer-raised rounded-sm overflow-hidden",children:[c?e.jsx("img",{src:c,alt:`Page ${a} thumbnail`,className:"w-full h-full object-cover rounded-sm"}):null,d&&e.jsx("div",{className:"absolute left-1 top-1 z-10","data-checkbox-wrapper":!0,children:e.jsx(i.Checkbox,{id:`page-thumbnail-${a}`,isSelected:u,onChange:()=>r(a),"aria-label":`Select page ${a}`})}),l&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-backdrop rounded-sm",children:e.jsx(i.Spinner,{size:24,fullWidth:!1,ariaLabel:`Loading page ${a}`})})]}),e.jsx("span",{className:"dial-tiny-text text-primary",children:a})]});Object.defineProperty(exports,"RotationDirection",{enumerable:!0,get:()=>L.RotationDirection});exports.AUTO_ZOOM_ID=z;exports.DocumentPreview=ie;exports.DocumentPreviewCacheProvider=me;exports.FIT_ZOOM_ID=A;exports.PDFViewer=Y;exports.PageThumbnail=fe;exports.PdfPreviewLoader=J;exports.THUMBNAIL_BATCH_SIZE=$;exports.THUMBNAIL_IMAGE_OPTIONS=X;exports.ZOOM_OPTIONS=V;exports.getStepZoomOptionValue=te;exports.isPdfFile=q;exports.useDocumentPreview=ae;exports.useDocumentPreviewCache=ee;

package/dist/ai-dial-react-pdf-highlighter.es.js

@@ -1,10 +1,11 @@
-import { jsx as e, jsxs as v, Fragment as le } from "react/jsx-runtime";
-import { mergeClasses as S, DialEllipsisTooltip as K, DialButton as j, ElementSize as B, DialSelect as oe, SelectSize as se, DialCheckbox as ce, DialLoader as ie } from "@epam/ai-dial-ui-kit";
-import { ZoomMode as Y, PDFHighlightViewer as ue } from "@epam/pdf-highlighter-kit";
-import { useRef as F, useState as E, useEffect as y, useCallback as O, createContext as me, useContext as de, useMemo as J } from "react";
-import { IconChevronDown as fe, IconChevronUp as pe, IconMinus as ve, IconPlus as be, IconAlertTriangle as he } from "@tabler/icons-react";
-const H = "auto", G = "page-fit", X = [
-  { value: H, label: "Auto" },
+import { jsx as e, jsxs as x, Fragment as se } from "react/jsx-runtime";
+import { mergeClasses as S, EllipsisTooltip as Y, IconButton as B, ElementSize as M, Select as ce, Checkbox as ie, Spinner as ue } from "@epam/ai-dial-ui-kit";
+import { ZoomMode as J, PDFHighlightViewer as de } from "@epam/pdf-highlighter-kit";
+import { RotationDirection as je } from "@epam/pdf-highlighter-kit";
+import { useRef as F, useState as Z, useEffect as y, useCallback as I, createContext as me, useContext as fe, useMemo as Q } from "react";
+import { IconChevronDown as pe, IconChevronUp as he, IconMinus as ve, IconPlus as be, IconAlertTriangle as xe } from "@tabler/icons-react";
+const $ = "auto", G = "page-fit", X = [
+  { value: $, label: "Auto" },
   { value: G, label: "Page Fit" },
   { value: "0.5", label: "50%" },
   { value: "0.75", label: "75%" },
@@ -13,135 +14,142 @@ const H = "auto", G = "page-fit", X = [
   { value: "1.5", label: "150%" },
   { value: "2", label: "200%" },
   { value: "3", label: "300%" }
-], xe = {
+], ge = {
   maxWidth: 104,
   format: "image/jpeg",
   quality: 0.85
-}, Q = 15, we = "application/pdf", ye = ".pdf", ge = ({
+}, ee = 15, we = "application/pdf", ye = ".pdf", Ne = ({
   pdf: t,
-  highlights: a,
-  selectedHighlightId: i,
-  autoFocusFirstHighlight: n = !1,
-  selectedPageNumber: u,
+  highlights: r,
+  selectedHighlightId: c,
+  autoFocusFirstHighlight: o = !1,
+  selectedPageNumber: i,
   zoom: s,
-  containerClassName: f,
-  onTotalPagesChange: d,
-  onViewerReady: g,
-  selectedPages: m
+  containerClassName: v,
+  onTotalPagesChange: h,
+  onViewerReady: N,
+  selectedPages: u,
+  viewerOptions: w
 }) => {
-  const h = F(null), r = F(null), [o, T] = E(!1), [_, b] = E(!1), D = F(d), z = F(g);
+  const d = F(null), n = F(null), [p, _] = Z(!1), [g, E] = Z(!1), O = F(h), D = F(N), k = F(w);
   y(() => {
-    D.current = d;
-  }, [d]), y(() => {
-    z.current = g;
-  }, [g]);
-  const N = O(
-    (l) => r.current?.goToHighlight(l),
+    O.current = h;
+  }, [h]), y(() => {
+    D.current = N;
+  }, [N]), y(() => {
+    k.current = w;
+  }, [w]);
+  const C = I(
+    (a) => n.current?.goToHighlight(a),
     []
   );
   return y(() => {
-    if (!h.current) return;
-    T(!1), b(!1), r.current && (r.current.destroy(), r.current = null);
-    let l = null, p = !0;
+    if (!d.current) return;
+    _(!1), E(!1), n.current && (n.current.destroy(), n.current = null);
+    let a = null, m = !0;
+    const f = () => {
+      m && E(!0);
+    };
     return (async () => {
       try {
-        if (l = new ue(), await l.init(h.current, {
+        if (a = new de(), await a.init(d.current, {
           enableTextSelection: !0,
           enableVirtualScrolling: !0,
-          bboxOrigin: "top-left"
-        }), !p) {
-          l.destroy();
+          bboxOrigin: "top-left",
+          ...k.current
+        }), !m) {
+          a.destroy();
           return;
         }
-        if (await l.loadPDF(t, { selectedPages: m }), !p) {
-          l.destroy();
+        if (a.addEventListener("zoomChanged", f), await a.loadPDF(t, { selectedPages: u }), !m) {
+          a.destroy();
           return;
         }
-        const x = l.getTotalPages?.();
-        typeof x == "number" && x > 0 && D.current?.(x), p && (r.current = l, T(!0));
-      } catch (x) {
-        if (!p)
+        const P = a.getTotalPages?.();
+        typeof P == "number" && P > 0 && O.current?.(P), m && (n.current = a, _(!0));
+      } catch (P) {
+        if (!m)
           return;
-        console.error("Error in initViewer:", x);
+        console.error("Error in initViewer:", P);
       }
     })(), () => {
-      p = !1, l && l.destroy();
+      m = !1, a && (a.removeEventListener("zoomChanged", f), a.destroy());
     };
-  }, [t, m]), y(() => {
-    !o || !r.current || (r.current.loadHighlights(a), n && a && a[0] && N(a[0].id));
-  }, [n, N, a, o]), y(() => {
-    b(!0);
-  }, [a]), y(() => {
-    o && _ && i && N(i);
-  }, [N, o, _, i]), y(() => {
-    if (!(!o || !s))
-      if (s === H)
-        r.current?.setZoom?.(Y.AUTO);
+  }, [t, u]), y(() => {
+    !p || !n.current || (n.current.loadHighlights(r), o && r && r[0] && C(r[0].id));
+  }, [o, C, r, p]), y(() => {
+    p && g && c && C(c);
+  }, [C, p, g, c]), y(() => {
+    if (!(!p || !s))
+      if (s === $)
+        n.current?.setZoom?.(J.AUTO);
       else if (s === G)
-        r.current?.setZoom?.(Y.PAGE_FIT);
+        n.current?.setZoom?.(J.PAGE_FIT);
       else {
-        const l = parseFloat(s);
-        !Number.isNaN(l) && l > 0 && r.current?.setZoom?.(l);
+        const a = parseFloat(s);
+        !Number.isNaN(a) && a > 0 && n.current?.setZoom?.(a);
       }
-  }, [o, s]), y(() => {
-    o && u && r.current?.setPage?.(u);
-  }, [o, u]), y(() => {
-    if (!o || !r.current) return;
-    const l = r.current;
-    z.current?.({
-      getThumbnailsDataUrl: (p, P) => l.getThumbnailsDataUrl(p, P),
-      zoomIn: () => l.zoomIn(),
-      zoomOut: () => l.zoomOut(),
-      getZoom: () => l.getZoom(),
-      navigateToPage: (p) => l.setPage?.(p)
+  }, [p, s]), y(() => {
+    p && i && n.current?.setPage?.(i);
+  }, [p, i]), y(() => {
+    if (!p || !n.current) return;
+    const a = n.current;
+    D.current?.({
+      getThumbnailsDataUrl: (m, f) => a.getThumbnailsDataUrl(m, f),
+      zoomIn: () => a.zoomIn(),
+      zoomOut: () => a.zoomOut(),
+      getZoom: () => a.getZoom(),
+      navigateToPage: (m) => a.setPage?.(m),
+      setPageDisplayRotation: (m, f, z) => a.setPageDisplayRotation(m, f, z),
+      getPageDisplayRotation: (m) => a.getPageDisplayRotation(m)
     });
-  }, [o]), /* @__PURE__ */ e(
+  }, [p]), /* @__PURE__ */ e(
     "div",
     {
-      ref: h,
+      ref: d,
       className: S(
-        "grow min-w-0 overflow-auto bg-layer-3",
-        f
+        "grow min-w-0 overflow-auto bg-layer-raised",
+        v
       )
     }
   );
-}, C = "h-4 rounded-[120px] bg-gradient-to-r from-layer-4 via-layer-3 to-layer-4 bg-[length:200%_100%] animate-skeleton-wave", Ne = ({
+}, T = "h-4 rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave", Ce = ({
   className: t,
-  ariaLabel: a = "pdf preview loading"
+  ariaLabel: r = "pdf preview loading"
 }) => /* @__PURE__ */ e(
   "div",
   {
     role: "status",
-    "aria-label": a,
+    "aria-label": r,
     "aria-live": "polite",
-    className: S("h-full w-full bg-layer-3", t),
-    children: /* @__PURE__ */ v("div", { className: "flex h-full w-full flex-col gap-10 px-[60px] pt-10", children: [
-      /* @__PURE__ */ e("div", { className: "mx-auto h-4 w-[208px] max-w-[40%] rounded-[120px] bg-gradient-to-r from-layer-4 via-layer-3 to-layer-4 bg-[length:200%_100%] animate-skeleton-wave" }),
-      /* @__PURE__ */ v("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ e("div", { className: C }),
-        /* @__PURE__ */ e("div", { className: C }),
-        /* @__PURE__ */ e("div", { className: C }),
-        /* @__PURE__ */ e("div", { className: C }),
+    className: S("h-full w-full bg-layer-raised", t),
+    children: /* @__PURE__ */ x("div", { className: "flex h-full w-full flex-col gap-10 px-[60px] pt-10", children: [
+      /* @__PURE__ */ e("div", { className: "mx-auto h-4 w-[208px] max-w-[40%] rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave" }),
+      /* @__PURE__ */ x("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ e("div", { className: T }),
+        /* @__PURE__ */ e("div", { className: T }),
+        /* @__PURE__ */ e("div", { className: T }),
+        /* @__PURE__ */ e("div", { className: T }),
         /* @__PURE__ */ e(
           "div",
           {
             className: S(
-              C,
+              T,
               "w-[28%] max-w-[320px]"
             )
           }
         )
       ] }),
-      /* @__PURE__ */ v("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ e("div", { className: C }),
-        /* @__PURE__ */ e("div", { className: C }),
-        /* @__PURE__ */ e("div", { className: C }),
-        /* @__PURE__ */ e("div", { className: C }),
+      /* @__PURE__ */ x("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ e("div", { className: T }),
+        /* @__PURE__ */ e("div", { className: T }),
+        /* @__PURE__ */ e("div", { className: T }),
+        /* @__PURE__ */ e("div", { className: T }),
         /* @__PURE__ */ e(
           "div",
           {
             className: S(
-              C,
+              T,
               "w-[58%] max-w-[520px]"
             )
           }
@@ -149,110 +157,112 @@ const H = "auto", G = "page-fit", X = [
       ] })
     ] })
   }
-), te = me(null), Ie = () => de(te), Z = X.filter(({ value: t }) => {
-  const a = Number.parseFloat(t);
-  return !Number.isNaN(a) && a > 0;
-}), Te = [...Z].reverse(), Ce = (t, a, i) => {
-  if (Z.length === 0)
+), re = me(null), Pe = () => fe(re), R = X.filter(({ value: t }) => {
+  const r = Number.parseFloat(t);
+  return !Number.isNaN(r) && r > 0;
+}), Te = [...R].reverse(), Ie = (t, r, c) => {
+  if (R.length === 0)
     return t;
-  const n = Number.parseFloat(t), u = !Number.isNaN(n) && n > 0 ? n : i, s = typeof u == "number" && u > 0 ? u : Number.parseFloat(Z[0].value);
-  return a === 1 ? (Z.find(
-    ({ value: f }) => Number.parseFloat(f) > s
-  ) ?? Z[Z.length - 1]).value : (Te.find(
-    ({ value: f }) => Number.parseFloat(f) < s
-  ) ?? Z[0]).value;
+  const o = Number.parseFloat(t), i = !Number.isNaN(o) && o > 0 ? o : c, s = typeof i == "number" && i > 0 ? i : Number.parseFloat(R[0].value);
+  return r === 1 ? (R.find(
+    ({ value: v }) => Number.parseFloat(v) > s
+  ) ?? R[R.length - 1]).value : (Te.find(
+    ({ value: v }) => Number.parseFloat(v) < s
+  ) ?? R[0]).value;
 };
-function Pe(t, a) {
-  const i = (t ?? "").toLowerCase();
-  return (a ?? "").toLowerCase() === we || i.endsWith(ye);
+function te(t, r) {
+  const c = (t ?? "").toLowerCase();
+  return (r ?? "").toLowerCase() === we || c.endsWith(ye);
 }
-const ee = X.map((t) => ({
+const ae = X.map((t) => ({
   value: t.value,
   label: t.label
-})), Oe = ({
+})), _e = ({
   fileUrl: t,
-  fileName: a,
-  loadFileCb: i,
-  highlights: n,
-  selectedPageNumber: u,
+  fileName: r,
+  loadFileCb: c,
+  highlights: o,
+  selectedPageNumber: i,
   onTotalPagesChange: s,
-  thumbnailPageNumbers: f,
-  onThumbnailsLoaded: d,
-  onViewerReady: g,
-  showLoaderOverlay: m = !1,
-  selectedPages: h
+  thumbnailPageNumbers: v,
+  onThumbnailsLoaded: h,
+  onViewerReady: N,
+  showLoaderOverlay: u = !1,
+  selectedPages: w
 }) => {
-  const r = Ie(), o = F(null), [T, _] = E(!1), [b, D] = E(0), [z, N] = E(!1), [l, p] = E(null), [P, x] = E(null), [I, A] = E(H), k = J(() => {
-    let c = a || t;
-    if (!a)
-      try {
-        c = new URL(t).pathname;
-      } catch {
-        c = t.split("?")[0].split("#")[0];
-      }
-    return Pe(c.toLowerCase());
-  }, [a, t]), M = O(
-    (c) => {
-      D(
-        (b + c + n.length) % n.length
+  const d = Pe(), n = F(null), [p, _] = Z(!1), [g, E] = Z(0), [O, D] = Z(!1), [k, C] = Z(null), [a, m] = Z(null), [f, z] = Z($), P = Q(() => {
+    if (r)
+      return te(r.toLowerCase());
+    let l;
+    try {
+      l = new URL(t).pathname;
+    } catch {
+      l = t.split("?")[0].split("#")[0];
+    }
+    const b = l.split("/").pop() ?? "";
+    return !b.includes(".") || te(b.toLowerCase());
+  }, [r, t]), U = I(
+    (l) => {
+      E(
+        (g + l + o.length) % o.length
       );
     },
-    [b, n.length]
-  ), R = O(
-    (c) => {
-      const w = o.current;
-      !w?.getZoom || !c || A(Ce(I, c, w.getZoom()));
+    [g, o.length]
+  ), H = I(
+    (l) => {
+      const b = n.current;
+      !b?.getZoom || !l || z(Ie(f, l, b.getZoom()));
     },
-    [I]
-  ), $ = J(() => {
-    if (!(I === H || I === G || X.some((w) => w.value === I))) {
-      const w = parseFloat(I);
-      if (!Number.isNaN(w) && w > 0)
+    [f]
+  ), A = Q(() => {
+    if (!(f === $ || f === G || X.some((b) => b.value === f))) {
+      const b = parseFloat(f);
+      if (!Number.isNaN(b) && b > 0)
         return [
-          ...ee,
-          { value: I, label: `${Math.round(w * 100)}%` }
+          ...ae,
+          { value: f, label: `${Math.round(b * 100)}%` }
         ];
     }
-    return ee;
-  }, [I]);
+    return ae;
+  }, [f]);
   y(() => {
-    let c = !1;
-    if (p(!0), N(!1), x(null), _(!1), o.current = null, !k) {
-      N(!0), p(!1);
+    let l = !1;
+    if (C(!0), D(!1), m(null), _(!1), n.current = null, !P) {
+      D(!0), C(!1);
       return;
     }
     return (async () => {
       try {
-        const L = await (r ? r.getFile(t, () => i(t)) : i(t));
-        c || x(L);
+        const L = await (d ? d.getFile(t, () => c(t)) : c(t));
+        l || m(L);
       } catch {
-        c || (N(!0), x(null));
+        l || (D(!0), m(null));
       } finally {
-        c || p(!1);
+        l || C(!1);
       }
     })(), () => {
-      c = !0;
+      l = !0;
     };
-  }, [t, r, i, k]);
-  const U = O(
-    (c) => {
-      o.current = c, _(!0), g?.(c);
+  }, [t, d, c, P]);
+  const V = I(
+    (l) => {
+      n.current = l, _(!0), N?.(l);
     },
-    [g]
+    [N]
   );
   return y(() => {
-    const c = f ?? [], w = o.current?.getThumbnailsDataUrl;
-    if (!c.length || !w || !P || !d || !T)
+    const l = v ?? [], b = n.current?.getThumbnailsDataUrl;
+    if (!l.length || !b || !a || !h || !p)
       return;
     let L = !1;
     return (async () => {
-      const q = /* @__PURE__ */ new Map();
-      for (let V = 0; V < c.length && !L; V += Q) {
-        const re = c.slice(V, V + Q);
+      const K = /* @__PURE__ */ new Map();
+      for (let j = 0; j < l.length && !L; j += ee) {
+        const ne = l.slice(j, j + ee);
         try {
-          const W = await w(re, xe);
+          const W = await b(ne, ge);
           if (L) break;
-          W.forEach((ae, ne) => q.set(ne, ae)), d(new Map(q));
+          W.forEach((oe, le) => K.set(le, oe)), h(new Map(K));
         } catch (W) {
           console.warn("Thumbnail batch load failed:", W);
           break;
@@ -261,162 +271,165 @@ const ee = X.map((t) => ({
     })(), () => {
       L = !0;
     };
-  }, [f, P, d, T]), {
-    file: P,
-    isLoading: l,
-    isError: z,
-    isSupportedFile: k,
-    activeHighlightIndex: b,
-    zoom: I,
-    setZoom: A,
-    zoomSelectOptions: $,
-    viewerApiRef: o,
-    showLoader: !z && (!!l || m),
-    changeIndex: M,
-    handleZoomChange: R,
-    handleViewerReady: U
+  }, [v, a, h, p]), {
+    file: a,
+    isLoading: k,
+    isError: O,
+    isSupportedFile: P,
+    activeHighlightIndex: g,
+    zoom: f,
+    setZoom: z,
+    zoomSelectOptions: A,
+    viewerApiRef: n,
+    showLoader: !O && (!!k || u),
+    changeIndex: U,
+    handleZoomChange: H,
+    handleViewerReady: V
   };
-}, Ae = ({
+}, Fe = ({
   fileUrl: t,
-  fileName: a,
-  errorLabel: i,
-  occurrencesLabel: n,
-  unsupportedLabel: u,
+  fileName: r,
+  errorLabel: c,
+  occurrencesLabel: o,
+  unsupportedLabel: i,
   highlights: s,
-  loadFileCb: f,
-  showOccurrences: d = !0,
-  selectedPageNumber: g,
-  containerClassName: m,
-  pdfViewerClassName: h,
-  onTotalPagesChange: r,
-  title: o,
-  thumbnailPageNumbers: T,
+  loadFileCb: v,
+  showOccurrences: h = !0,
+  selectedPageNumber: N,
+  containerClassName: u,
+  pdfViewerClassName: w,
+  onTotalPagesChange: d,
+  title: n,
+  thumbnailPageNumbers: p,
   onThumbnailsLoaded: _,
-  onViewerReady: b,
-  showLoaderOverlay: D = !1,
-  selectedPages: z
+  onViewerReady: g,
+  showLoaderOverlay: E = !1,
+  selectedPages: O,
+  selectedHighlightId: D,
+  viewerOptions: k
 }) => {
   const {
-    file: N,
-    isError: l,
-    isSupportedFile: p,
-    activeHighlightIndex: P,
-    zoom: x,
-    setZoom: I,
-    zoomSelectOptions: A,
-    showLoader: k,
-    changeIndex: M,
-    handleZoomChange: R,
-    handleViewerReady: $
-  } = Oe({
+    file: C,
+    isError: a,
+    isSupportedFile: m,
+    activeHighlightIndex: f,
+    zoom: z,
+    setZoom: P,
+    zoomSelectOptions: U,
+    showLoader: H,
+    changeIndex: A,
+    handleZoomChange: V,
+    handleViewerReady: q
+  } = _e({
     fileUrl: t,
-    fileName: a,
-    loadFileCb: f,
+    fileName: r,
+    loadFileCb: v,
     highlights: s,
-    selectedPageNumber: g,
-    onTotalPagesChange: r,
-    thumbnailPageNumbers: T,
+    selectedPageNumber: N,
+    onTotalPagesChange: d,
+    thumbnailPageNumbers: p,
     onThumbnailsLoaded: _,
-    onViewerReady: b,
-    showLoaderOverlay: D,
-    selectedPages: z
+    onViewerReady: g,
+    showLoaderOverlay: E,
+    selectedPages: O
   });
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ x(
     "div",
     {
       className: S(
-        "flex flex-col self-center gap-4 py-3 px-6 h-full w-full bg-layer-2",
-        m
+        "flex flex-col self-center gap-4 py-3 px-6 h-full w-full bg-layer-sunken",
+        u
       ),
       children: [
-        a && /* @__PURE__ */ e("div", { className: "shrink-0 min-h-0 w-full", children: /* @__PURE__ */ e(
-          K,
+        r && /* @__PURE__ */ e("div", { className: "shrink-0 min-h-0 w-full", children: /* @__PURE__ */ e(
+          Y,
           {
             className: "dial-tiny-text text-secondary",
-            text: a
+            text: r
           }
         ) }),
-        /* @__PURE__ */ v(
+        /* @__PURE__ */ x(
           "div",
           {
             className: S(
               "flex w-full justify-between items-center",
-              d && o ? "gap-2" : ""
+              h && n ? "gap-2" : ""
             ),
             children: [
-              /* @__PURE__ */ e("div", { children: d ? /* @__PURE__ */ v("div", { className: "flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-4 rounded w-fit", children: [
-                /* @__PURE__ */ v("span", { className: "dial-small-text", children: [
-                  n ?? "Occurrences",
+              /* @__PURE__ */ e("div", { children: h ? /* @__PURE__ */ x("div", { className: "flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-raised rounded w-fit", children: [
+                /* @__PURE__ */ x("span", { className: "dial-small-text", children: [
+                  o ?? "Occurrences",
                   ":",
-                  /* @__PURE__ */ e("span", { className: "pl-0.5 min-w-3 inline-block text-right", children: s.length > 0 ? `${P + 1}/${s.length}` : "0" })
+                  /* @__PURE__ */ e("span", { className: "pl-0.5 min-w-3 inline-block text-right", children: s.length > 0 ? `${f + 1}/${s.length}` : "0" })
                 ] }),
-                s.length > 0 && /* @__PURE__ */ v(le, { children: [
+                s.length > 0 && /* @__PURE__ */ x(se, { children: [
                   /* @__PURE__ */ e(
-                    j,
+                    B,
                     {
                       className: "p-0 text-primary !h-6.5",
-                      size: B.Small,
-                      iconAfter: /* @__PURE__ */ e(fe, { size: 16 }),
+                      size: M.Small,
+                      icon: /* @__PURE__ */ e(pe, { size: 16 }),
                       "aria-label": "Next occurrence",
-                      onClick: () => M(1)
+                      onClick: () => A(1)
                     }
                   ),
                   /* @__PURE__ */ e(
-                    j,
+                    B,
                     {
                       className: "p-0 text-primary !h-6.5",
-                      size: B.Small,
-                      iconAfter: /* @__PURE__ */ e(pe, { size: 16 }),
+                      size: M.Small,
+                      icon: /* @__PURE__ */ e(he, { size: 16 }),
                       "aria-label": "Previous occurrence",
-                      onClick: () => M(-1)
+                      onClick: () => A(-1)
                     }
                   )
                 ] })
               ] }) : /* @__PURE__ */ e("div", {}) }),
-              /* @__PURE__ */ v(
+              /* @__PURE__ */ x(
                 "div",
                 {
                   className: S(
                     "flex flex-1 items-center gap-4 min-w-0",
-                    o != null && o !== "" ? "justify-between" : "justify-end"
+                    n != null && n !== "" ? "justify-between" : "justify-end"
                   ),
                   children: [
-                    o != null && o !== "" && /* @__PURE__ */ e(
-                      K,
+                    n != null && n !== "" && /* @__PURE__ */ e(
+                      Y,
                       {
-                        text: o,
+                        text: n,
                         className: "dial-body-semi-text text-primary min-w-0"
                       }
                     ),
-                    /* @__PURE__ */ v("div", { className: "flex gap-0.5 items-center shrink-0", children: [
+                    /* @__PURE__ */ x("div", { className: "flex gap-0.5 items-center shrink-0", children: [
                       /* @__PURE__ */ e("div", { className: "h-6", children: /* @__PURE__ */ e(
-                        oe,
+                        ce,
                         {
-                          size: se.Sm,
-                          className: "bg-layer-4 !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-hover rounded",
-                          options: A,
-                          value: x,
-                          onChange: (U) => I(U)
+                          size: M.Small,
+                          ariaLabel: "Zoom",
+                          fieldClassName: "bg-control-neutral !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-accent-alpha rounded",
+                          options: U,
+                          value: z,
+                          onChange: (l) => P(l)
                         }
                       ) }),
                       /* @__PURE__ */ e(
-                        j,
+                        B,
                         {
-                          className: "py-0 flex items-center justify-center rounded text-primary bg-layer-4 border border-transparent hover:border-hover",
-                          iconAfter: /* @__PURE__ */ e(ve, { size: 16 }),
+                          className: "py-0 rounded text-primary bg-control-neutral border border-transparent hover:border-accent-alpha",
+                          icon: /* @__PURE__ */ e(ve, { size: 16 }),
                           "aria-label": "Zoom out",
-                          size: B.Small,
-                          onClick: () => R(-1)
+                          size: M.Small,
+                          onClick: () => V(-1)
                         }
                       ),
                       /* @__PURE__ */ e(
-                        j,
+                        B,
                         {
-                          className: "py-0 flex items-center justify-center rounded text-primary bg-layer-4 border border-transparent hover:border-hover",
-                          iconAfter: /* @__PURE__ */ e(be, { size: 16 }),
+                          className: "py-0 rounded text-primary bg-control-neutral border border-transparent hover:border-accent-alpha",
+                          icon: /* @__PURE__ */ e(be, { size: 16 }),
                           "aria-label": "Zoom in",
-                          size: B.Small,
-                          onClick: () => R(1)
+                          size: M.Small,
+                          onClick: () => V(1)
                         }
                       )
                     ] })
@@ -426,100 +439,101 @@ const ee = X.map((t) => ({
             ]
           }
         ),
-        /* @__PURE__ */ v("div", { className: "relative flex min-h-0 flex-1", children: [
-          N && /* @__PURE__ */ e(
-            ge,
+        /* @__PURE__ */ x("div", { className: "relative flex min-h-0 flex-1", children: [
+          C && /* @__PURE__ */ e(
+            Ne,
             {
-              pdf: N,
+              pdf: C,
               highlights: s,
-              selectedHighlightId: d ? s[P]?.id : void 0,
-              selectedPageNumber: g,
-              zoom: x,
-              onTotalPagesChange: r,
-              onViewerReady: $,
-              containerClassName: h,
-              selectedPages: z
+              selectedHighlightId: h ? s[f]?.id : D,
+              selectedPageNumber: N,
+              zoom: z,
+              onTotalPagesChange: d,
+              onViewerReady: q,
+              containerClassName: w,
+              selectedPages: O,
+              viewerOptions: k
             }
           ),
-          k && /* @__PURE__ */ e(Ne, { className: "absolute inset-0 z-10" }),
-          l && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-layer-3", children: /* @__PURE__ */ v("div", { className: "flex flex-col items-center gap-6 p-10", children: [
+          H && /* @__PURE__ */ e(Ce, { className: "absolute inset-0 z-10" }),
+          a && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-layer-raised", children: /* @__PURE__ */ x("div", { className: "flex flex-col items-center gap-6 p-10", children: [
             /* @__PURE__ */ e(
-              he,
+              xe,
               {
                 size: 60,
                 stroke: 2,
                 className: "text-secondary"
               }
             ),
-            /* @__PURE__ */ e("div", { className: "text-center dial-small-text whitespace-pre-wrap", children: !p && u ? u : i ?? "Failed to load document." })
+            /* @__PURE__ */ e("div", { className: "text-center dial-small-text whitespace-pre-wrap", children: !m && i ? i : c ?? "Failed to load document." })
           ] }) })
         ] })
       ]
     }
   );
-}, _e = 1200 * 1e3, De = 20, Me = ({
+}, Ee = 1200 * 1e3, Oe = 20, Le = ({
   children: t,
-  ttlMs: a = _e,
-  maxEntries: i = De
+  ttlMs: r = Ee,
+  maxEntries: c = Oe
 }) => {
-  const n = F(/* @__PURE__ */ new Map()), u = O((m, h) => {
-    n.current.delete(m), n.current.set(m, h);
-  }, []), s = O(() => {
-    const m = Date.now();
-    for (const [h, r] of n.current.entries())
-      r.file && m - r.timestamp > a && n.current.delete(h);
-  }, [a]), f = O(() => {
-    for (; n.current.size > i; ) {
-      const m = n.current.keys().next().value;
-      m && n.current.delete(m);
+  const o = F(/* @__PURE__ */ new Map()), i = I((u, w) => {
+    o.current.delete(u), o.current.set(u, w);
+  }, []), s = I(() => {
+    const u = Date.now();
+    for (const [w, d] of o.current.entries())
+      d.file && u - d.timestamp > r && o.current.delete(w);
+  }, [r]), v = I(() => {
+    for (; o.current.size > c; ) {
+      const u = o.current.keys().next().value;
+      u && o.current.delete(u);
     }
-  }, [i]), d = O(() => {
-    n.current.clear();
-  }, []), g = O(
-    async (m, h) => {
+  }, [c]), h = I(() => {
+    o.current.clear();
+  }, []), N = I(
+    async (u, w) => {
       s();
-      const r = n.current.get(m);
-      if (r) {
-        if (u(m, { ...r, timestamp: Date.now() }), r.file)
-          return r.file;
-        if (r.promise)
-          return r.promise;
+      const d = o.current.get(u);
+      if (d) {
+        if (i(u, { ...d, timestamp: Date.now() }), d.file)
+          return d.file;
+        if (d.promise)
+          return d.promise;
       }
-      const o = Date.now(), T = h().then((b) => {
-        const D = { file: b, timestamp: Date.now() };
-        return u(m, D), f(), b;
-      }).catch((b) => {
-        throw n.current.delete(m), b;
+      const n = Date.now(), p = w().then((g) => {
+        const E = { file: g, timestamp: Date.now() };
+        return i(u, E), v(), g;
+      }).catch((g) => {
+        throw o.current.delete(u), g;
       });
-      return u(m, { promise: T, timestamp: o }), f(), T;
+      return i(u, { promise: p, timestamp: n }), v(), p;
     },
-    [f, s, u]
+    [v, s, i]
   );
-  return y(() => () => d(), [d]), /* @__PURE__ */ e(te.Provider, { value: { getFile: g, clearCache: d }, children: t });
-}, Re = ({
+  return y(() => () => h(), [h]), /* @__PURE__ */ e(re.Provider, { value: { getFile: N, clearCache: h }, children: t });
+}, Me = ({
   pageNum: t,
-  onSelectPage: a,
-  isSelected: i,
-  isLoading: n,
-  isMultiselect: u,
+  onSelectPage: r,
+  isSelected: c,
+  isLoading: o,
+  isMultiselect: i,
   thumbnailUrl: s,
-  className: f
-}) => /* @__PURE__ */ v(
+  className: v
+}) => /* @__PURE__ */ x(
   "button",
   {
     type: "button",
     "aria-label": `Page ${t}`,
-    "aria-pressed": i,
-    onClick: (d) => {
-      u && d.target.closest("[data-checkbox-wrapper]") || a(t);
+    "aria-pressed": c,
+    onClick: (h) => {
+      i && h.target.closest("[data-checkbox-wrapper]") || r(t);
     },
     className: S(
-      "flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-layer-4 rounded-sm",
-      i && (u ? "border border-accent-primary bg-accent-primary-alpha" : "border border-primary"),
-      f
+      "flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-control-accent-alpha-hover rounded-sm",
+      c && (i ? "border border-accent bg-control-accent-alpha" : "border border-primary"),
+      v
     ),
     children: [
-      /* @__PURE__ */ v("div", { className: "relative w-[104px] h-[146px] bg-model-icon rounded-sm overflow-hidden", children: [
+      /* @__PURE__ */ x("div", { className: "relative w-[104px] h-[146px] bg-layer-raised rounded-sm overflow-hidden", children: [
         s ? /* @__PURE__ */ e(
           "img",
           {
@@ -528,17 +542,17 @@ const ee = X.map((t) => ({
             className: "w-full h-full object-cover rounded-sm"
           }
         ) : null,
-        u && /* @__PURE__ */ e("div", { className: "absolute left-1 top-1 z-10", "data-checkbox-wrapper": !0, children: /* @__PURE__ */ e(
-          ce,
+        i && /* @__PURE__ */ e("div", { className: "absolute left-1 top-1 z-10", "data-checkbox-wrapper": !0, children: /* @__PURE__ */ e(
+          ie,
           {
             id: `page-thumbnail-${t}`,
-            checked: i,
-            onChange: () => a(t),
-            className: "before:border-primary before:bg-model-icon bg-model-icon"
+            isSelected: c,
+            onChange: () => r(t),
+            "aria-label": `Select page ${t}`
           }
         ) }),
-        n && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-blackout rounded-sm", children: /* @__PURE__ */ e(
-          ie,
+        o && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-backdrop rounded-sm", children: /* @__PURE__ */ e(
+          ue,
           {
             size: 24,
             fullWidth: !1,
@@ -551,18 +565,19 @@ const ee = X.map((t) => ({
   }
 );
 export {
-  H as AUTO_ZOOM_ID,
-  Ae as DocumentPreview,
-  Me as DocumentPreviewCacheProvider,
+  $ as AUTO_ZOOM_ID,
+  Fe as DocumentPreview,
+  Le as DocumentPreviewCacheProvider,
   G as FIT_ZOOM_ID,
-  ge as PDFViewer,
-  Re as PageThumbnail,
-  Ne as PdfPreviewLoader,
-  Q as THUMBNAIL_BATCH_SIZE,
-  xe as THUMBNAIL_IMAGE_OPTIONS,
+  Ne as PDFViewer,
+  Me as PageThumbnail,
+  Ce as PdfPreviewLoader,
+  je as RotationDirection,
+  ee as THUMBNAIL_BATCH_SIZE,
+  ge as THUMBNAIL_IMAGE_OPTIONS,
   X as ZOOM_OPTIONS,
-  Ce as getStepZoomOptionValue,
-  Pe as isPdfFile,
-  Oe as useDocumentPreview,
-  Ie as useDocumentPreviewCache
+  Ie as getStepZoomOptionValue,
+  te as isPdfFile,
+  _e as useDocumentPreview,
+  Pe as useDocumentPreviewCache
 };

package/dist/index.css

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-1{left:.25rem}.top-1{top:.25rem}.z-10{z-index:10}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.inline-block{display:inline-block}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[146px\]{height:146px}.h-\[186px\]{height:186px}.h-\[600px\]{height:600px}.h-\[700px\]{height:700px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:1.5rem}.min-h-\[26px\]{min-height:26px}.w-\[104px\]{width:104px}.w-\[120px\]{width:120px}.w-\[208px\]{width:208px}.w-\[28\%\]{width:28%}.w-\[500px\]{width:500px}.w-\[58\%\]{width:58%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-3{min-width:.75rem}.max-w-\[320px\]{max-width:320px}.max-w-\[40\%\]{max-width:40%}.max-w-\[520px\]{max-width:520px}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}@keyframes skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-skeleton-wave{animation:skeleton-wave 3.5s ease-in-out infinite}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:4px}.rounded-\[120px\]{border-radius:120px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-accent-primary{border-color:var(--stroke-accent-primary,#7da4ff)}.border-primary{border-color:var(--stroke-primary,#696e7c)}.border-transparent{border-color:transparent}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.bg-blackout{background-color:var(--bg-blackout,#0c101db3)}.bg-layer-1{background-color:var(--bg-layer-1,#0c101d)}.bg-layer-2{background-color:var(--bg-layer-2,#161b2d)}.bg-layer-3{background-color:var(--bg-layer-3,#1d2439)}.bg-layer-4{background-color:var(--bg-layer-4,#242c42)}.bg-model-icon{background-color:var(--bg-model-icon,#fff)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-layer-4{--tw-gradient-from:var(--bg-layer-4,#242c42) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-layer-3{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--bg-layer-3,#1d2439) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-layer-4{--tw-gradient-to:var(--bg-layer-4,#242c42) var(--tw-gradient-to-position)}.bg-\[length\:200\%_100\%\]{background-size:200% 100%}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.\!py-0{padding-top:0!important;padding-bottom:0!important}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[60px\]{padding-left:60px;padding-right:60px}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-0\.5{padding-left:.125rem}.pt-10{padding-top:2.5rem}.text-center{text-align:center}.text-right{text-align:right}.text-xs{font-size:.75rem;line-height:1rem}.text-primary{color:var(--text-primary,#eef1f7)}.text-secondary{color:var(--text-secondary,#9fa6bd)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:border-primary:before{content:var(--tw-content);border-color:var(--stroke-primary,#696e7c)}.before\:bg-model-icon:before{content:var(--tw-content);background-color:var(--bg-model-icon,#fff)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#eef1f7)}.hover\:bg-layer-4:hover{background-color:var(--bg-layer-4,#242c42)}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:769px){.container{max-width:769px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-1{left:.25rem}.top-1{top:.25rem}.z-10{z-index:10}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.hidden{display:none}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[146px\]{height:146px}.h-\[186px\]{height:186px}.h-\[600px\]{height:600px}.h-\[700px\]{height:700px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:1.5rem}.min-h-\[26px\]{min-height:26px}.w-64{width:16rem}.w-\[104px\]{width:104px}.w-\[120px\]{width:120px}.w-\[208px\]{width:208px}.w-\[28\%\]{width:28%}.w-\[500px\]{width:500px}.w-\[58\%\]{width:58%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-3{min-width:.75rem}.max-w-\[320px\]{max-width:320px}.max-w-\[40\%\]{max-width:40%}.max-w-\[520px\]{max-width:520px}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}@keyframes skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-skeleton-wave{animation:skeleton-wave 3.5s ease-in-out infinite}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.\!justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:4px}.rounded-\[120px\]{border-radius:120px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-r{border-right-width:1px}.border-accent{border-color:var(--stroke-accent,#1d4ed8)}.border-primary{border-color:var(--stroke-primary,#57647a)}.border-tertiary{border-color:var(--stroke-tertiary,#e0e6f0)}.border-transparent{border-color:transparent}.bg-backdrop{background-color:var(--bg-backdrop,#161b2d4d)}.bg-control-accent-alpha{background-color:var(--bg-control-accent-alpha,#2764d90f)}.bg-control-neutral{background-color:var(--bg-control-neutral,#fcfcfc)}.bg-layer-base{background-color:var(--bg-layer-base,#f5f7fa)}.bg-layer-raised{background-color:var(--bg-layer-raised,#fcfcfc)}.bg-layer-sunken{background-color:var(--bg-layer-sunken,#eef1f7)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-layer-sunken{--tw-gradient-from:var(--bg-layer-sunken,#eef1f7) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-layer-raised{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--bg-layer-raised,#fcfcfc) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-layer-sunken{--tw-gradient-to:var(--bg-layer-sunken,#eef1f7) var(--tw-gradient-to-position)}.bg-\[length\:200\%_100\%\]{background-size:200% 100%}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.\!py-0{padding-top:0!important;padding-bottom:0!important}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[60px\]{padding-left:60px;padding-right:60px}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-0\.5{padding-left:.125rem}.pt-10{padding-top:2.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-xs{font-size:.75rem;line-height:1rem}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.025em}.text-accent{color:var(--text-accent,#1d4ed8)}.text-primary{color:var(--text-primary,#161b2d)}.text-secondary{color:var(--text-secondary,#57647a)}.outline{outline-style:solid;outline-width:1px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:border-accent-alpha:hover{border-color:var(--stroke-accent-alpha,#2764d933)}.hover\:bg-control-accent-alpha-hover:hover{background-color:var(--bg-control-accent-alpha-hover,#2764d924)}

package/dist/src/components/DocumentPreview/DocumentPreview.d.ts

@@ -1,4 +1,4 @@
-import { InputHighlightData } from '@epam/pdf-highlighter-kit';
+import { InputHighlightData, ViewerOptions } from '@epam/pdf-highlighter-kit';
 import { FC, ReactNode } from 'react';
 import { PdfViewerApi } from '../../models/pdf-viewer.models';
 /**
@@ -47,6 +47,18 @@ export interface DocumentPreviewProps {
     showLoaderOverlay?: boolean;
     /** Restricts viewer loading to selected pages only. */
     selectedPages?: number[];
+    /**
+     * Highlight id to navigate to. When `showOccurrences` is true the internal
+     * occurrence counter takes precedence; pass this when `showOccurrences` is
+     * false to drive navigation externally (e.g. from a results table).
+     */
+    selectedHighlightId?: string;
+    /**
+     * Override or extend low-level viewer initialization options passed to `PDFViewer`.
+     * Values are merged on top of the defaults (`enableTextSelection: true`,
+     * `enableVirtualScrolling: true`, `bboxOrigin: 'top-left'`).
+     */
+    viewerOptions?: ViewerOptions;
 }
 /**
  * High-level PDF preview component with toolbar, highlight navigation, zoom controls,

package/dist/src/components/PdfViewer/PdfViewer.d.ts

@@ -1,4 +1,4 @@
-import { PDFSource, InputHighlightData } from '@epam/pdf-highlighter-kit';
+import { PDFSource, ViewerOptions, InputHighlightData } from '@epam/pdf-highlighter-kit';
 import { FC } from 'react';
 import { PdfViewerApi } from '../../models/pdf-viewer.models';
 /**
@@ -25,6 +25,12 @@ export interface PdfViewerProps {
     onViewerReady?: (api: PdfViewerApi) => void;
     /** Optional list of pages to load instead of the full document. */
     selectedPages?: number[];
+    /**
+     * Override or extend low-level viewer initialization options.
+     * Values are merged on top of the defaults (`enableTextSelection: true`,
+     * `enableVirtualScrolling: true`, `bboxOrigin: 'top-left'`).
+     */
+    viewerOptions?: ViewerOptions;
 }
 /**
  * Low-level PDF viewer wrapper around `PDFHighlightViewer`.

package/dist/src/index.d.ts

@@ -12,5 +12,8 @@ export { PageThumbnail } from './components/PageThumbnail/PageThumbnail';
 export type { PageThumbnailProps } from './components/PageThumbnail/PageThumbnail';
 export type { PdfViewerApi } from './models/pdf-viewer.models';
 export type { ZoomOption } from './models/pdf-viewer.models';
+export type { ViewerOptions } from '@epam/pdf-highlighter-kit';
+export { RotationDirection } from '@epam/pdf-highlighter-kit';
+export type { PageRotationDegrees } from '@epam/pdf-highlighter-kit';
 export { AUTO_ZOOM_ID, FIT_ZOOM_ID, THUMBNAIL_BATCH_SIZE, THUMBNAIL_IMAGE_OPTIONS, ZOOM_OPTIONS, } from './constants/pdf-viewer.constants';
 export { getStepZoomOptionValue, isPdfFile } from './utils/pdf-viewer.utils';

package/dist/src/models/pdf-viewer.models.d.ts

@@ -1,4 +1,4 @@
-import { ThumbnailOptions } from '@epam/pdf-highlighter-kit';
+import { PageRotationDegrees, RotationDirection, ThumbnailOptions } from '@epam/pdf-highlighter-kit';
 /**
  * Imperative API exposed by {@link PDFViewer} through the `onViewerReady` callback.
  */
@@ -18,6 +18,10 @@ export interface PdfViewerApi {
     getZoom: () => number;
     /** Navigates to a specific 1-based page number. */
     navigateToPage: (page: number) => void;
+    /** Sets extra clockwise display rotation for a 1-based page (on top of PDF `/Rotate`). */
+    setPageDisplayRotation: (pageNumber: number, degrees: PageRotationDegrees, direction?: RotationDirection) => void;
+    /** Returns extra clockwise display rotation for a 1-based page. */
+    getPageDisplayRotation: (pageNumber: number) => PageRotationDegrees;
 }
 export interface ZoomOption {
     value: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-react-pdf-highlighter",
-  "version": "0.2.0-dev.3",
+  "version": "0.2.0-dev.30",
   "type": "module",
   "license": "Apache-2.0",
   "description": "React components for PDF viewing and highlighting, built on @epam/pdf-highlighter-kit",
@@ -48,7 +48,7 @@
     "build-storybook": "concurrently \"npm run build-storybook:css\" \"storybook build\"",
     "build-storybook:css": "tailwindcss -m -i ./src/styles/tailwind-entry.scss -o ./src/index.css",
     "prepare": "husky",
-    "publish": "node tools/publish-lib.mjs",
+    "publish:npm": "node tools/publish-lib.mjs",
     "publish:dry": "node tools/publish-lib.mjs --dry",
     "test": "vitest --coverage"
   },
@@ -58,9 +58,9 @@
     ]
   },
   "peerDependencies": {
-    "@epam/ai-dial-ui-kit": ">=0.8.0-0 || >=0.9.0-rc.0",
-    "@epam/pdf-highlighter-kit": ">=0.0.13",
-    "@tabler/icons-react": "^3.0.0",
+    "@epam/ai-dial-ui-kit": ">=0.14.0-0",
+    "@epam/pdf-highlighter-kit": ">=0.0.18",
+    "@tabler/icons-react": "^3.44.0",
     "pdfjs-dist": ">=4.0.0",
     "react": ">=18",
     "react-dom": ">=18"
@@ -73,21 +73,26 @@
   "overrides": {
     "minimatch": ">=3.1.4",
     "picomatch": ">=2.3.2",
-    "tar": ">=7.5.11"
+    "tar": ">=7.5.11",
+    "brace-expansion": ">=5.0.9",
+    "ip-address": ">=10.3.1",
+    "@eslint/eslintrc": {
+      "minimatch": "5.1.6"
+    }
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.3",
-    "@epam/ai-dial-ui-kit": "0.9.0-rc.20",
-    "@epam/pdf-highlighter-kit": "^0.0.13",
+    "@chromatic-com/storybook": "^5.2.1",
+    "@epam/ai-dial-ui-kit": "^0.14.0-dev.4",
+    "@epam/pdf-highlighter-kit": "^0.0.18",
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.31.0",
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@storybook/addon-a11y": "^10.2.17",
-    "@storybook/addon-docs": "^10.2.17",
-    "@storybook/addon-vitest": "^10.2.17",
-    "@storybook/react-vite": "^10.2.17",
-    "@tabler/icons-react": "^3.36.1",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-vitest": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
+    "@tabler/icons-react": "^3.44.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^22.15.30",
@@ -104,7 +109,7 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^10.2.17",
+    "eslint-plugin-storybook": "^10.4.6",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
@@ -114,7 +119,7 @@
     "postcss-import": "^16.1.1",
     "prettier": "3.6.2",
     "sass": "^1.89.2",
-    "storybook": "^10.2.17",
+    "storybook": "^10.4.6",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",