@embedpdf/plugin-thumbnail 1.3.4 → 1.3.6

package/dist/preact/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-thumbnail.ts","../../src/shared/components/thumbnails-pane.tsx","../../src/shared/components/thumbnail-img.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","import { useEffect, useRef, useState, HTMLAttributes, CSSProperties, ReactNode } from '@framework';\nimport { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailsProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {\n  style?: CSSProperties;\n  children: (m: ThumbMeta) => ReactNode;\n  selectedPage?: number;\n  scrollOptions?: ScrollIntoViewOptions;\n};\n\nexport function ThumbnailsPane({\n  style,\n  selectedPage,\n  scrollOptions = { behavior: 'smooth', block: 'nearest', inline: 'nearest' },\n  ...props\n}: ThumbnailsProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const viewportRef = useRef<HTMLDivElement>(null);\n\n  const [window, setWindow] = useState<WindowState | null>(null);\n\n  /* 1️⃣  subscribe once to window updates */\n  useEffect(() => thumbs?.onWindow(setWindow), [thumbs]);\n\n  /* 2️⃣  keep plugin in sync while the user scrolls */\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n    const onScroll = () => thumbs?.setViewport(vp.scrollTop, vp.clientHeight);\n    vp.addEventListener('scroll', onScroll);\n    return () => vp.removeEventListener('scroll', onScroll);\n  }, [thumbs]);\n\n  /* 3️⃣  kick-start (or re-kick) after document change */\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbs) return;\n\n    if (window?.items.length === 0) {\n      thumbs.setViewport(vp.scrollTop, vp.clientHeight);\n    }\n  }, [window, thumbs]);\n\n  /* 4️⃣ whenever selectedPage or window changes, ensure it’s visible */\n  useEffect(() => {\n    if (!selectedPage || !window) return;\n\n    const item = window.items.find((it) => it.pageIndex + 1 === selectedPage);\n    if (!item) return; // not in current window yet → wait for next update\n\n    const vp = viewportRef.current;\n    if (!vp) return;\n\n    // Scroll only if the item is above or below the viewport “padding” zone\n    const margin = 8; // px\n    if (item.top < vp.scrollTop + margin) {\n      vp.scrollTo({ top: item.top, ...scrollOptions });\n    } else if (\n      item.top + item.wrapperHeight + item.labelHeight >\n      vp.scrollTop + vp.clientHeight - margin\n    ) {\n      vp.scrollTo({\n        top: item.top + item.wrapperHeight + item.labelHeight - vp.clientHeight,\n        ...scrollOptions,\n      });\n    }\n  }, [selectedPage, window, scrollOptions]);\n\n  return (\n    <div ref={viewportRef} style={{ overflowY: 'auto', position: 'relative', ...style }} {...props}>\n      {/* spacer keeps correct scroll height even before first window arrives */}\n      <div style={{ height: window?.totalHeight ?? 0, position: 'relative' }}>\n        {window?.items.map((m) => props.children(m))}\n      </div>\n    </div>\n  );\n}\n","import { useEffect, useState, useRef, HTMLAttributes, CSSProperties, Fragment } from '@framework';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n\ntype ThumbnailImgProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n  style?: CSSProperties;\n  meta: ThumbMeta;\n};\n\nexport function ThumbImg({ meta, style, ...props }: ThumbnailImgProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n  const [refreshTick, setRefreshTick] = useState(0);\n\n  useEffect(() => {\n    if (!thumbnailPlugin) return;\n    return thumbnailPlugin.onRefreshPages((pages) => {\n      if (pages.includes(meta.pageIndex)) {\n        setRefreshTick((tick) => tick + 1);\n      }\n    });\n  }, [thumbnailPlugin]);\n\n  useEffect(() => {\n    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);\n    task?.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\n    }, ignore);\n\n    return () => {\n      if (urlRef.current) {\n        URL.revokeObjectURL(urlRef.current);\n        urlRef.current = null;\n      } else {\n        task?.abort({\n          code: PdfErrorCode.Cancelled,\n          message: 'canceled render task',\n        });\n      }\n    };\n  }, [thumbs, meta.pageIndex, refreshTick]);\n\n  const handleImageLoad = () => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n  };\n\n  return url ? <img src={url} onLoad={handleImageLoad} style={style} {...props} /> : null;\n}\n"],"names":["window"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-thumbnail.ts","../../src/shared/components/thumbnails-pane.tsx","../../src/shared/components/thumbnail-img.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","import { useEffect, useRef, useState, HTMLAttributes, CSSProperties, ReactNode } from '@framework';\nimport { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\nimport { useThumbnailPlugin } from '../hooks';\n\ntype ThumbnailsProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {\n  style?: CSSProperties;\n  children: (m: ThumbMeta) => ReactNode;\n  /** @deprecated use scrollToThumb via capability or rely on autoScroll */\n  selectedPage?: number;\n  /** @deprecated behavior is now controlled by ThumbnailPluginConfig.scrollBehavior */\n  scrollOptions?: ScrollIntoViewOptions;\n};\n\nexport function ThumbnailsPane({ style, scrollOptions, selectedPage, ...props }: ThumbnailsProps) {\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n  const viewportRef = useRef<HTMLDivElement>(null);\n\n  const [window, setWindow] = useState<WindowState | null>(null);\n\n  // 1) subscribe once to window updates\n  useEffect(() => thumbnailPlugin?.onWindow(setWindow), [thumbnailPlugin]);\n\n  // 2) keep plugin in sync while the user scrolls\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n    const onScroll = () => thumbnailPlugin?.updateWindow(vp.scrollTop, vp.clientHeight);\n    vp.addEventListener('scroll', onScroll);\n    return () => vp.removeEventListener('scroll', onScroll);\n  }, [thumbnailPlugin]);\n\n  // 2.5) keep plugin in sync when viewport resizes (e.g., menu opens/closes)\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbnailPlugin) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n    });\n    resizeObserver.observe(vp);\n\n    return () => resizeObserver.disconnect();\n  }, [thumbnailPlugin]);\n\n  // 3) kick-start after document change\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbnailPlugin) return;\n\n    // push initial metrics\n    thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n  }, [window, thumbnailPlugin]);\n\n  // 4) let plugin drive scroll – only after window is set, and only once\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbnailPlugin || !window) return;\n\n    return thumbnailPlugin.onScrollTo(({ top, behavior }) => {\n      vp.scrollTo({ top, behavior });\n    });\n  }, [thumbnailPlugin, !!window]); // Note: !!window to prevent re-subscription on window updates\n\n  const paddingY = thumbnailPlugin?.cfg.paddingY ?? 0;\n\n  return (\n    <div\n      ref={viewportRef}\n      style={{\n        overflowY: 'auto',\n        position: 'relative',\n        paddingTop: paddingY,\n        paddingBottom: paddingY,\n        height: '100%',\n        ...style,\n      }}\n      {...props}\n    >\n      <div style={{ height: window?.totalHeight ?? 0, position: 'relative' }}>\n        {window?.items.map((m) => props.children(m))}\n      </div>\n    </div>\n  );\n}\n","import { useEffect, useState, useRef, HTMLAttributes, CSSProperties, Fragment } from '@framework';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n\ntype ThumbnailImgProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n  style?: CSSProperties;\n  meta: ThumbMeta;\n};\n\nexport function ThumbImg({ meta, style, ...props }: ThumbnailImgProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n  const [refreshTick, setRefreshTick] = useState(0);\n\n  useEffect(() => {\n    if (!thumbnailPlugin) return;\n    return thumbnailPlugin.onRefreshPages((pages) => {\n      if (pages.includes(meta.pageIndex)) {\n        setRefreshTick((tick) => tick + 1);\n      }\n    });\n  }, [thumbnailPlugin]);\n\n  useEffect(() => {\n    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);\n    task?.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\n    }, ignore);\n\n    return () => {\n      if (urlRef.current) {\n        URL.revokeObjectURL(urlRef.current);\n        urlRef.current = null;\n      } else {\n        task?.abort({\n          code: PdfErrorCode.Cancelled,\n          message: 'canceled render task',\n        });\n      }\n    };\n  }, [thumbs, meta.pageIndex, refreshTick]);\n\n  const handleImageLoad = () => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n  };\n\n  return url ? <img src={url} onLoad={handleImageLoad} style={style} {...props} /> : null;\n}\n"],"names":["window"],"mappings":"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"}

package/dist/react/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),t=require("@embedpdf/plugin-thumbnail"),r=require("react/jsx-runtime"),n=require("react"),l=require("@embedpdf/models"),i=()=>e.usePlugin(t.ThumbnailPlugin.id),o=()=>e.useCapability(t.ThumbnailPlugin.id);exports.ThumbImg=function({meta:e,style:t,...s}){const{provides:u}=o(),{plugin:c}=i(),[a,d]=n.useState(),p=n.useRef(null),[f,g]=n.useState(0);return n.useEffect((()=>{if(c)return c.onRefreshPages((t=>{t.includes(e.pageIndex)&&g((e=>e+1))}))}),[c]),n.useEffect((()=>{const t=null==u?void 0:u.renderThumb(e.pageIndex,window.devicePixelRatio);return null==t||t.wait((e=>{const t=URL.createObjectURL(e);p.current=t,d(t)}),l.ignore),()=>{p.current?(URL.revokeObjectURL(p.current),p.current=null):null==t||t.abort({code:l.PdfErrorCode.Cancelled,message:"canceled render task"})}}),[u,e.pageIndex,f]),a?r.jsx("img",{src:a,onLoad:()=>{p.current&&(URL.revokeObjectURL(p.current),p.current=null)},style:t,...s}):null},exports.ThumbnailsPane=function({style:e,selectedPage:t,scrollOptions:l={behavior:"smooth",block:"nearest",inline:"nearest"},...i}){const{provides:s}=o(),u=n.useRef(null),[c,a]=n.useState(null);return n.useEffect((()=>null==s?void 0:s.onWindow(a)),[s]),n.useEffect((()=>{const e=u.current;if(!e)return;const t=()=>null==s?void 0:s.setViewport(e.scrollTop,e.clientHeight);return e.addEventListener("scroll",t),()=>e.removeEventListener("scroll",t)}),[s]),n.useEffect((()=>{const e=u.current;e&&s&&0===(null==c?void 0:c.items.length)&&s.setViewport(e.scrollTop,e.clientHeight)}),[c,s]),n.useEffect((()=>{if(!t||!c)return;const e=c.items.find((e=>e.pageIndex+1===t));if(!e)return;const r=u.current;if(!r)return;e.top<r.scrollTop+8?r.scrollTo({top:e.top,...l}):e.top+e.wrapperHeight+e.labelHeight>r.scrollTop+r.clientHeight-8&&r.scrollTo({top:e.top+e.wrapperHeight+e.labelHeight-r.clientHeight,...l})}),[t,c,l]),r.jsx("div",{ref:u,style:{overflowY:"auto",position:"relative",...e},...i,children:r.jsx("div",{style:{height:(null==c?void 0:c.totalHeight)??0,position:"relative"},children:null==c?void 0:c.items.map((e=>i.children(e)))})})},exports.useThumbnailCapability=o,exports.useThumbnailPlugin=i,Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),t=require("@embedpdf/plugin-thumbnail"),r=require("react/jsx-runtime"),n=require("react"),o=require("@embedpdf/models"),l=()=>e.usePlugin(t.ThumbnailPlugin.id),i=()=>e.useCapability(t.ThumbnailPlugin.id);exports.ThumbImg=function({meta:e,style:t,...u}){const{provides:s}=i(),{plugin:c}=l(),[d,a]=n.useState(),p=n.useRef(null),[f,g]=n.useState(0);return n.useEffect((()=>{if(c)return c.onRefreshPages((t=>{t.includes(e.pageIndex)&&g((e=>e+1))}))}),[c]),n.useEffect((()=>{const t=null==s?void 0:s.renderThumb(e.pageIndex,window.devicePixelRatio);return null==t||t.wait((e=>{const t=URL.createObjectURL(e);p.current=t,a(t)}),o.ignore),()=>{p.current?(URL.revokeObjectURL(p.current),p.current=null):null==t||t.abort({code:o.PdfErrorCode.Cancelled,message:"canceled render task"})}}),[s,e.pageIndex,f]),d?r.jsx("img",{src:d,onLoad:()=>{p.current&&(URL.revokeObjectURL(p.current),p.current=null)},style:t,...u}):null},exports.ThumbnailsPane=function({style:e,scrollOptions:t,selectedPage:o,...i}){const{plugin:u}=l(),s=n.useRef(null),[c,d]=n.useState(null);n.useEffect((()=>null==u?void 0:u.onWindow(d)),[u]),n.useEffect((()=>{const e=s.current;if(!e)return;const t=()=>null==u?void 0:u.updateWindow(e.scrollTop,e.clientHeight);return e.addEventListener("scroll",t),()=>e.removeEventListener("scroll",t)}),[u]),n.useEffect((()=>{const e=s.current;if(!e||!u)return;const t=new ResizeObserver((()=>{u.updateWindow(e.scrollTop,e.clientHeight)}));return t.observe(e),()=>t.disconnect()}),[u]),n.useEffect((()=>{const e=s.current;e&&u&&u.updateWindow(e.scrollTop,e.clientHeight)}),[c,u]),n.useEffect((()=>{const e=s.current;if(e&&u&&c)return u.onScrollTo((({top:t,behavior:r})=>{e.scrollTo({top:t,behavior:r})}))}),[u,!!c]);const a=(null==u?void 0:u.cfg.paddingY)??0;return r.jsx("div",{ref:s,style:{overflowY:"auto",position:"relative",paddingTop:a,paddingBottom:a,height:"100%",...e},...i,children:r.jsx("div",{style:{height:(null==c?void 0:c.totalHeight)??0,position:"relative"},children:null==c?void 0:c.items.map((e=>i.children(e)))})})},exports.useThumbnailCapability=i,exports.useThumbnailPlugin=l,Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
 //# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-thumbnail.ts","../../src/shared/components/thumbnail-img.tsx","../../src/shared/components/thumbnails-pane.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","import { useEffect, useState, useRef, HTMLAttributes, CSSProperties, Fragment } from '@framework';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n\ntype ThumbnailImgProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n  style?: CSSProperties;\n  meta: ThumbMeta;\n};\n\nexport function ThumbImg({ meta, style, ...props }: ThumbnailImgProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n  const [refreshTick, setRefreshTick] = useState(0);\n\n  useEffect(() => {\n    if (!thumbnailPlugin) return;\n    return thumbnailPlugin.onRefreshPages((pages) => {\n      if (pages.includes(meta.pageIndex)) {\n        setRefreshTick((tick) => tick + 1);\n      }\n    });\n  }, [thumbnailPlugin]);\n\n  useEffect(() => {\n    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);\n    task?.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\n    }, ignore);\n\n    return () => {\n      if (urlRef.current) {\n        URL.revokeObjectURL(urlRef.current);\n        urlRef.current = null;\n      } else {\n        task?.abort({\n          code: PdfErrorCode.Cancelled,\n          message: 'canceled render task',\n        });\n      }\n    };\n  }, [thumbs, meta.pageIndex, refreshTick]);\n\n  const handleImageLoad = () => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n  };\n\n  return url ? <img src={url} onLoad={handleImageLoad} style={style} {...props} /> : null;\n}\n","import { useEffect, useRef, useState, HTMLAttributes, CSSProperties, ReactNode } from '@framework';\nimport { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailsProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {\n  style?: CSSProperties;\n  children: (m: ThumbMeta) => ReactNode;\n  selectedPage?: number;\n  scrollOptions?: ScrollIntoViewOptions;\n};\n\nexport function ThumbnailsPane({\n  style,\n  selectedPage,\n  scrollOptions = { behavior: 'smooth', block: 'nearest', inline: 'nearest' },\n  ...props\n}: ThumbnailsProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const viewportRef = useRef<HTMLDivElement>(null);\n\n  const [window, setWindow] = useState<WindowState | null>(null);\n\n  /* 1️⃣  subscribe once to window updates */\n  useEffect(() => thumbs?.onWindow(setWindow), [thumbs]);\n\n  /* 2️⃣  keep plugin in sync while the user scrolls */\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n    const onScroll = () => thumbs?.setViewport(vp.scrollTop, vp.clientHeight);\n    vp.addEventListener('scroll', onScroll);\n    return () => vp.removeEventListener('scroll', onScroll);\n  }, [thumbs]);\n\n  /* 3️⃣  kick-start (or re-kick) after document change */\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbs) return;\n\n    if (window?.items.length === 0) {\n      thumbs.setViewport(vp.scrollTop, vp.clientHeight);\n    }\n  }, [window, thumbs]);\n\n  /* 4️⃣ whenever selectedPage or window changes, ensure it’s visible */\n  useEffect(() => {\n    if (!selectedPage || !window) return;\n\n    const item = window.items.find((it) => it.pageIndex + 1 === selectedPage);\n    if (!item) return; // not in current window yet → wait for next update\n\n    const vp = viewportRef.current;\n    if (!vp) return;\n\n    // Scroll only if the item is above or below the viewport “padding” zone\n    const margin = 8; // px\n    if (item.top < vp.scrollTop + margin) {\n      vp.scrollTo({ top: item.top, ...scrollOptions });\n    } else if (\n      item.top + item.wrapperHeight + item.labelHeight >\n      vp.scrollTop + vp.clientHeight - margin\n    ) {\n      vp.scrollTo({\n        top: item.top + item.wrapperHeight + item.labelHeight - vp.clientHeight,\n        ...scrollOptions,\n      });\n    }\n  }, [selectedPage, window, scrollOptions]);\n\n  return (\n    <div ref={viewportRef} style={{ overflowY: 'auto', position: 'relative', ...style }} {...props}>\n      {/* spacer keeps correct scroll height even before first window arrives */}\n      <div style={{ height: window?.totalHeight ?? 0, position: 'relative' }}>\n        {window?.items.map((m) => props.children(m))}\n      </div>\n    </div>\n  );\n}\n"],"names":["useThumbnailPlugin","usePlugin","ThumbnailPlugin","id","useThumbnailCapability","useCapability","meta","style","props","provides","thumbs","plugin","thumbnailPlugin","url","setUrl","useState","urlRef","useRef","refreshTick","setRefreshTick","useEffect","onRefreshPages","pages","includes","pageIndex","tick","task","renderThumb","window","devicePixelRatio","wait","blob","objectUrl","URL","createObjectURL","current","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","jsx","src","onLoad","selectedPage","scrollOptions","behavior","block","inline","viewportRef","setWindow","onWindow","vp","onScroll","setViewport","scrollTop","clientHeight","addEventListener","removeEventListener","items","length","item","find","it","top","scrollTo","wrapperHeight","labelHeight","ref","overflowY","position","children","height","totalHeight","map","m"],"mappings":"gPAGaA,EAAqB,IAAMC,YAA2BC,EAAAA,gBAAgBC,IACtEC,EAAyB,IAAMC,gBAA+BH,EAAAA,gBAAgBC,qBCMpF,UAAkBG,KAAEA,EAAAC,MAAMA,KAAUC,IACzC,MAAQC,SAAUC,GAAWN,KACrBO,OAAQC,GAAoBZ,KAC7Ba,EAAKC,GAAUC,aAChBC,EAASC,SAAsB,OAC9BC,EAAaC,GAAkBJ,EAAAA,SAAS,GAuCxC,OArCPK,EAAAA,WAAU,KACR,GAAKR,EACE,OAAAA,EAAgBS,gBAAgBC,IACjCA,EAAMC,SAASjB,EAAKkB,YACPL,GAACM,GAASA,EAAO,GAAC,GAEpC,GACA,CAACb,IAEJQ,EAAAA,WAAU,KACR,MAAMM,EAAO,MAAAhB,OAAA,EAAAA,EAAQiB,YAAYrB,EAAKkB,UAAWI,OAAOC,kBAOxD,OANM,MAAAH,GAAAA,EAAAI,MAAMC,IACJ,MAAAC,EAAYC,IAAIC,gBAAgBH,GACtCf,EAAOmB,QAAUH,EACjBlB,EAAOkB,EAAS,GACfI,UAEI,KACDpB,EAAOmB,SACLF,IAAAI,gBAAgBrB,EAAOmB,SAC3BnB,EAAOmB,QAAU,MAEjB,MAAAT,GAAAA,EAAMY,MAAM,CACVC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,wBACV,CAEL,GACC,CAAChC,EAAQJ,EAAKkB,UAAWN,IASrBL,EAAO8B,EAAAA,IAAA,MAAA,CAAIC,IAAK/B,EAAKgC,OAPJ,KAClB7B,EAAOmB,UACLF,IAAAI,gBAAgBrB,EAAOmB,SAC3BnB,EAAOmB,QAAU,KAAA,EAIgC5B,WAAkBC,IAAY,IACrF,yBC5CO,UAAwBD,MAC7BA,EAAAuC,aACAA,EAAAC,cACAA,EAAgB,CAAEC,SAAU,SAAUC,MAAO,UAAWC,OAAQ,cAC7D1C,IAEH,MAAQC,SAAUC,GAAWN,IACvB+C,EAAclC,SAAuB,OAEpCW,EAAQwB,GAAarC,EAAAA,SAA6B,aAGzDK,EAAAA,WAAU,IAAM,MAAAV,OAAA,EAAAA,EAAQ2C,SAASD,IAAY,CAAC1C,IAG9CU,EAAAA,WAAU,KACR,MAAMkC,EAAKH,EAAYhB,QACvB,IAAKmB,EAAI,OACT,MAAMC,EAAW,IAAM,MAAA7C,OAAA,EAAAA,EAAQ8C,YAAYF,EAAGG,UAAWH,EAAGI,cAE5D,OADGJ,EAAAK,iBAAiB,SAAUJ,GACvB,IAAMD,EAAGM,oBAAoB,SAAUL,EAAQ,GACrD,CAAC7C,IAGJU,EAAAA,WAAU,KACR,MAAMkC,EAAKH,EAAYhB,QAClBmB,GAAO5C,GAEiB,KAAzB,MAAAkB,OAAA,EAAAA,EAAQiC,MAAMC,SAChBpD,EAAO8C,YAAYF,EAAGG,UAAWH,EAAGI,aAAY,GAEjD,CAAC9B,EAAQlB,IAGZU,EAAAA,WAAU,KACJ,IAAC0B,IAAiBlB,EAAQ,OAExB,MAAAmC,EAAOnC,EAAOiC,MAAMG,MAAMC,GAAOA,EAAGzC,UAAY,IAAMsB,IAC5D,IAAKiB,EAAM,OAEX,MAAMT,EAAKH,EAAYhB,QACvB,IAAKmB,EAAI,OAILS,EAAKG,IAAMZ,EAAGG,UADH,EAEbH,EAAGa,SAAS,CAAED,IAAKH,EAAKG,OAAQnB,IAEhCgB,EAAKG,IAAMH,EAAKK,cAAgBL,EAAKM,YACrCf,EAAGG,UAAYH,EAAGI,aALL,GAObJ,EAAGa,SAAS,CACVD,IAAKH,EAAKG,IAAMH,EAAKK,cAAgBL,EAAKM,YAAcf,EAAGI,gBACxDX,GACJ,GAEF,CAACD,EAAclB,EAAQmB,UAGvB,MAAI,CAAAuB,IAAKnB,EAAa5C,MAAO,CAAEgE,UAAW,OAAQC,SAAU,cAAejE,MAAaC,EAEvFiE,eAAC,MAAI,CAAAlE,MAAO,CAAEmE,QAAQ,MAAA9C,SAAAA,EAAQ+C,cAAe,EAAGH,SAAU,YACvDC,SAAQ,MAAA7C,OAAA,EAAAA,EAAAiC,MAAMe,KAAKC,GAAMrE,EAAMiE,SAASI,QAIjD"}
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-thumbnail.ts","../../src/shared/components/thumbnail-img.tsx","../../src/shared/components/thumbnails-pane.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","import { useEffect, useState, useRef, HTMLAttributes, CSSProperties, Fragment } from '@framework';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n\ntype ThumbnailImgProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n  style?: CSSProperties;\n  meta: ThumbMeta;\n};\n\nexport function ThumbImg({ meta, style, ...props }: ThumbnailImgProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n  const [refreshTick, setRefreshTick] = useState(0);\n\n  useEffect(() => {\n    if (!thumbnailPlugin) return;\n    return thumbnailPlugin.onRefreshPages((pages) => {\n      if (pages.includes(meta.pageIndex)) {\n        setRefreshTick((tick) => tick + 1);\n      }\n    });\n  }, [thumbnailPlugin]);\n\n  useEffect(() => {\n    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);\n    task?.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\n    }, ignore);\n\n    return () => {\n      if (urlRef.current) {\n        URL.revokeObjectURL(urlRef.current);\n        urlRef.current = null;\n      } else {\n        task?.abort({\n          code: PdfErrorCode.Cancelled,\n          message: 'canceled render task',\n        });\n      }\n    };\n  }, [thumbs, meta.pageIndex, refreshTick]);\n\n  const handleImageLoad = () => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n  };\n\n  return url ? <img src={url} onLoad={handleImageLoad} style={style} {...props} /> : null;\n}\n","import { useEffect, useRef, useState, HTMLAttributes, CSSProperties, ReactNode } from '@framework';\nimport { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\nimport { useThumbnailPlugin } from '../hooks';\n\ntype ThumbnailsProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {\n  style?: CSSProperties;\n  children: (m: ThumbMeta) => ReactNode;\n  /** @deprecated use scrollToThumb via capability or rely on autoScroll */\n  selectedPage?: number;\n  /** @deprecated behavior is now controlled by ThumbnailPluginConfig.scrollBehavior */\n  scrollOptions?: ScrollIntoViewOptions;\n};\n\nexport function ThumbnailsPane({ style, scrollOptions, selectedPage, ...props }: ThumbnailsProps) {\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n  const viewportRef = useRef<HTMLDivElement>(null);\n\n  const [window, setWindow] = useState<WindowState | null>(null);\n\n  // 1) subscribe once to window updates\n  useEffect(() => thumbnailPlugin?.onWindow(setWindow), [thumbnailPlugin]);\n\n  // 2) keep plugin in sync while the user scrolls\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n    const onScroll = () => thumbnailPlugin?.updateWindow(vp.scrollTop, vp.clientHeight);\n    vp.addEventListener('scroll', onScroll);\n    return () => vp.removeEventListener('scroll', onScroll);\n  }, [thumbnailPlugin]);\n\n  // 2.5) keep plugin in sync when viewport resizes (e.g., menu opens/closes)\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbnailPlugin) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n    });\n    resizeObserver.observe(vp);\n\n    return () => resizeObserver.disconnect();\n  }, [thumbnailPlugin]);\n\n  // 3) kick-start after document change\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbnailPlugin) return;\n\n    // push initial metrics\n    thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n  }, [window, thumbnailPlugin]);\n\n  // 4) let plugin drive scroll – only after window is set, and only once\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbnailPlugin || !window) return;\n\n    return thumbnailPlugin.onScrollTo(({ top, behavior }) => {\n      vp.scrollTo({ top, behavior });\n    });\n  }, [thumbnailPlugin, !!window]); // Note: !!window to prevent re-subscription on window updates\n\n  const paddingY = thumbnailPlugin?.cfg.paddingY ?? 0;\n\n  return (\n    <div\n      ref={viewportRef}\n      style={{\n        overflowY: 'auto',\n        position: 'relative',\n        paddingTop: paddingY,\n        paddingBottom: paddingY,\n        height: '100%',\n        ...style,\n      }}\n      {...props}\n    >\n      <div style={{ height: window?.totalHeight ?? 0, position: 'relative' }}>\n        {window?.items.map((m) => props.children(m))}\n      </div>\n    </div>\n  );\n}\n"],"names":["useThumbnailPlugin","usePlugin","ThumbnailPlugin","id","useThumbnailCapability","useCapability","meta","style","props","provides","thumbs","plugin","thumbnailPlugin","url","setUrl","useState","urlRef","useRef","refreshTick","setRefreshTick","useEffect","onRefreshPages","pages","includes","pageIndex","tick","task","renderThumb","window","devicePixelRatio","wait","blob","objectUrl","URL","createObjectURL","current","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","jsx","src","onLoad","scrollOptions","selectedPage","viewportRef","setWindow","onWindow","vp","onScroll","updateWindow","scrollTop","clientHeight","addEventListener","removeEventListener","resizeObserver","ResizeObserver","observe","disconnect","onScrollTo","top","behavior","scrollTo","paddingY","cfg","jsxRuntime","ref","overflowY","position","paddingTop","paddingBottom","height","children","totalHeight","items","map","m"],"mappings":"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"}

package/dist/react/index.js

@@ -6,47 +6,56 @@ import { useRef, useState, useEffect } from "react";
 import { ignore, PdfErrorCode } from "@embedpdf/models";
 const useThumbnailPlugin = () => usePlugin(ThumbnailPlugin.id);
 const useThumbnailCapability = () => useCapability(ThumbnailPlugin.id);
-function ThumbnailsPane({
-  style,
-  selectedPage,
-  scrollOptions = { behavior: "smooth", block: "nearest", inline: "nearest" },
-  ...props
-}) {
-  const { provides: thumbs } = useThumbnailCapability();
+function ThumbnailsPane({ style, scrollOptions, selectedPage, ...props }) {
+  const { plugin: thumbnailPlugin } = useThumbnailPlugin();
   const viewportRef = useRef(null);
   const [window2, setWindow] = useState(null);
-  useEffect(() => thumbs == null ? void 0 : thumbs.onWindow(setWindow), [thumbs]);
+  useEffect(() => thumbnailPlugin == null ? void 0 : thumbnailPlugin.onWindow(setWindow), [thumbnailPlugin]);
   useEffect(() => {
     const vp = viewportRef.current;
     if (!vp) return;
-    const onScroll = () => thumbs == null ? void 0 : thumbs.setViewport(vp.scrollTop, vp.clientHeight);
+    const onScroll = () => thumbnailPlugin == null ? void 0 : thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);
     vp.addEventListener("scroll", onScroll);
     return () => vp.removeEventListener("scroll", onScroll);
-  }, [thumbs]);
+  }, [thumbnailPlugin]);
   useEffect(() => {
     const vp = viewportRef.current;
-    if (!vp || !thumbs) return;
-    if ((window2 == null ? void 0 : window2.items.length) === 0) {
-      thumbs.setViewport(vp.scrollTop, vp.clientHeight);
-    }
-  }, [window2, thumbs]);
+    if (!vp || !thumbnailPlugin) return;
+    const resizeObserver = new ResizeObserver(() => {
+      thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);
+    });
+    resizeObserver.observe(vp);
+    return () => resizeObserver.disconnect();
+  }, [thumbnailPlugin]);
   useEffect(() => {
-    if (!selectedPage || !window2) return;
-    const item = window2.items.find((it) => it.pageIndex + 1 === selectedPage);
-    if (!item) return;
     const vp = viewportRef.current;
-    if (!vp) return;
-    const margin = 8;
-    if (item.top < vp.scrollTop + margin) {
-      vp.scrollTo({ top: item.top, ...scrollOptions });
-    } else if (item.top + item.wrapperHeight + item.labelHeight > vp.scrollTop + vp.clientHeight - margin) {
-      vp.scrollTo({
-        top: item.top + item.wrapperHeight + item.labelHeight - vp.clientHeight,
-        ...scrollOptions
-      });
+    if (!vp || !thumbnailPlugin) return;
+    thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);
+  }, [window2, thumbnailPlugin]);
+  useEffect(() => {
+    const vp = viewportRef.current;
+    if (!vp || !thumbnailPlugin || !window2) return;
+    return thumbnailPlugin.onScrollTo(({ top, behavior }) => {
+      vp.scrollTo({ top, behavior });
+    });
+  }, [thumbnailPlugin, !!window2]);
+  const paddingY = (thumbnailPlugin == null ? void 0 : thumbnailPlugin.cfg.paddingY) ?? 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: viewportRef,
+      style: {
+        overflowY: "auto",
+        position: "relative",
+        paddingTop: paddingY,
+        paddingBottom: paddingY,
+        height: "100%",
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { style: { height: (window2 == null ? void 0 : window2.totalHeight) ?? 0, position: "relative" }, children: window2 == null ? void 0 : window2.items.map((m) => props.children(m)) })
     }
-  }, [selectedPage, window2, scrollOptions]);
-  return /* @__PURE__ */ jsx("div", { ref: viewportRef, style: { overflowY: "auto", position: "relative", ...style }, ...props, children: /* @__PURE__ */ jsx("div", { style: { height: (window2 == null ? void 0 : window2.totalHeight) ?? 0, position: "relative" }, children: window2 == null ? void 0 : window2.items.map((m) => props.children(m)) }) });
+  );
 }
 function ThumbImg({ meta, style, ...props }) {
   const { provides: thumbs } = useThumbnailCapability();

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-thumbnail.ts","../../src/shared/components/thumbnails-pane.tsx","../../src/shared/components/thumbnail-img.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","import { useEffect, useRef, useState, HTMLAttributes, CSSProperties, ReactNode } from '@framework';\nimport { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailsProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {\n  style?: CSSProperties;\n  children: (m: ThumbMeta) => ReactNode;\n  selectedPage?: number;\n  scrollOptions?: ScrollIntoViewOptions;\n};\n\nexport function ThumbnailsPane({\n  style,\n  selectedPage,\n  scrollOptions = { behavior: 'smooth', block: 'nearest', inline: 'nearest' },\n  ...props\n}: ThumbnailsProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const viewportRef = useRef<HTMLDivElement>(null);\n\n  const [window, setWindow] = useState<WindowState | null>(null);\n\n  /* 1️⃣  subscribe once to window updates */\n  useEffect(() => thumbs?.onWindow(setWindow), [thumbs]);\n\n  /* 2️⃣  keep plugin in sync while the user scrolls */\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n    const onScroll = () => thumbs?.setViewport(vp.scrollTop, vp.clientHeight);\n    vp.addEventListener('scroll', onScroll);\n    return () => vp.removeEventListener('scroll', onScroll);\n  }, [thumbs]);\n\n  /* 3️⃣  kick-start (or re-kick) after document change */\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbs) return;\n\n    if (window?.items.length === 0) {\n      thumbs.setViewport(vp.scrollTop, vp.clientHeight);\n    }\n  }, [window, thumbs]);\n\n  /* 4️⃣ whenever selectedPage or window changes, ensure it’s visible */\n  useEffect(() => {\n    if (!selectedPage || !window) return;\n\n    const item = window.items.find((it) => it.pageIndex + 1 === selectedPage);\n    if (!item) return; // not in current window yet → wait for next update\n\n    const vp = viewportRef.current;\n    if (!vp) return;\n\n    // Scroll only if the item is above or below the viewport “padding” zone\n    const margin = 8; // px\n    if (item.top < vp.scrollTop + margin) {\n      vp.scrollTo({ top: item.top, ...scrollOptions });\n    } else if (\n      item.top + item.wrapperHeight + item.labelHeight >\n      vp.scrollTop + vp.clientHeight - margin\n    ) {\n      vp.scrollTo({\n        top: item.top + item.wrapperHeight + item.labelHeight - vp.clientHeight,\n        ...scrollOptions,\n      });\n    }\n  }, [selectedPage, window, scrollOptions]);\n\n  return (\n    <div ref={viewportRef} style={{ overflowY: 'auto', position: 'relative', ...style }} {...props}>\n      {/* spacer keeps correct scroll height even before first window arrives */}\n      <div style={{ height: window?.totalHeight ?? 0, position: 'relative' }}>\n        {window?.items.map((m) => props.children(m))}\n      </div>\n    </div>\n  );\n}\n","import { useEffect, useState, useRef, HTMLAttributes, CSSProperties, Fragment } from '@framework';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n\ntype ThumbnailImgProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n  style?: CSSProperties;\n  meta: ThumbMeta;\n};\n\nexport function ThumbImg({ meta, style, ...props }: ThumbnailImgProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n  const [refreshTick, setRefreshTick] = useState(0);\n\n  useEffect(() => {\n    if (!thumbnailPlugin) return;\n    return thumbnailPlugin.onRefreshPages((pages) => {\n      if (pages.includes(meta.pageIndex)) {\n        setRefreshTick((tick) => tick + 1);\n      }\n    });\n  }, [thumbnailPlugin]);\n\n  useEffect(() => {\n    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);\n    task?.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\n    }, ignore);\n\n    return () => {\n      if (urlRef.current) {\n        URL.revokeObjectURL(urlRef.current);\n        urlRef.current = null;\n      } else {\n        task?.abort({\n          code: PdfErrorCode.Cancelled,\n          message: 'canceled render task',\n        });\n      }\n    };\n  }, [thumbs, meta.pageIndex, refreshTick]);\n\n  const handleImageLoad = () => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n  };\n\n  return url ? <img src={url} onLoad={handleImageLoad} style={style} {...props} /> : null;\n}\n"],"names":["window"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-thumbnail.ts","../../src/shared/components/thumbnails-pane.tsx","../../src/shared/components/thumbnail-img.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","import { useEffect, useRef, useState, HTMLAttributes, CSSProperties, ReactNode } from '@framework';\nimport { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\nimport { useThumbnailPlugin } from '../hooks';\n\ntype ThumbnailsProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {\n  style?: CSSProperties;\n  children: (m: ThumbMeta) => ReactNode;\n  /** @deprecated use scrollToThumb via capability or rely on autoScroll */\n  selectedPage?: number;\n  /** @deprecated behavior is now controlled by ThumbnailPluginConfig.scrollBehavior */\n  scrollOptions?: ScrollIntoViewOptions;\n};\n\nexport function ThumbnailsPane({ style, scrollOptions, selectedPage, ...props }: ThumbnailsProps) {\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n  const viewportRef = useRef<HTMLDivElement>(null);\n\n  const [window, setWindow] = useState<WindowState | null>(null);\n\n  // 1) subscribe once to window updates\n  useEffect(() => thumbnailPlugin?.onWindow(setWindow), [thumbnailPlugin]);\n\n  // 2) keep plugin in sync while the user scrolls\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n    const onScroll = () => thumbnailPlugin?.updateWindow(vp.scrollTop, vp.clientHeight);\n    vp.addEventListener('scroll', onScroll);\n    return () => vp.removeEventListener('scroll', onScroll);\n  }, [thumbnailPlugin]);\n\n  // 2.5) keep plugin in sync when viewport resizes (e.g., menu opens/closes)\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbnailPlugin) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n    });\n    resizeObserver.observe(vp);\n\n    return () => resizeObserver.disconnect();\n  }, [thumbnailPlugin]);\n\n  // 3) kick-start after document change\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbnailPlugin) return;\n\n    // push initial metrics\n    thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n  }, [window, thumbnailPlugin]);\n\n  // 4) let plugin drive scroll – only after window is set, and only once\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp || !thumbnailPlugin || !window) return;\n\n    return thumbnailPlugin.onScrollTo(({ top, behavior }) => {\n      vp.scrollTo({ top, behavior });\n    });\n  }, [thumbnailPlugin, !!window]); // Note: !!window to prevent re-subscription on window updates\n\n  const paddingY = thumbnailPlugin?.cfg.paddingY ?? 0;\n\n  return (\n    <div\n      ref={viewportRef}\n      style={{\n        overflowY: 'auto',\n        position: 'relative',\n        paddingTop: paddingY,\n        paddingBottom: paddingY,\n        height: '100%',\n        ...style,\n      }}\n      {...props}\n    >\n      <div style={{ height: window?.totalHeight ?? 0, position: 'relative' }}>\n        {window?.items.map((m) => props.children(m))}\n      </div>\n    </div>\n  );\n}\n","import { useEffect, useState, useRef, HTMLAttributes, CSSProperties, Fragment } from '@framework';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n\ntype ThumbnailImgProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {\n  style?: CSSProperties;\n  meta: ThumbMeta;\n};\n\nexport function ThumbImg({ meta, style, ...props }: ThumbnailImgProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\n  const [refreshTick, setRefreshTick] = useState(0);\n\n  useEffect(() => {\n    if (!thumbnailPlugin) return;\n    return thumbnailPlugin.onRefreshPages((pages) => {\n      if (pages.includes(meta.pageIndex)) {\n        setRefreshTick((tick) => tick + 1);\n      }\n    });\n  }, [thumbnailPlugin]);\n\n  useEffect(() => {\n    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);\n    task?.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef.current = objectUrl;\n      setUrl(objectUrl);\n    }, ignore);\n\n    return () => {\n      if (urlRef.current) {\n        URL.revokeObjectURL(urlRef.current);\n        urlRef.current = null;\n      } else {\n        task?.abort({\n          code: PdfErrorCode.Cancelled,\n          message: 'canceled render task',\n        });\n      }\n    };\n  }, [thumbs, meta.pageIndex, refreshTick]);\n\n  const handleImageLoad = () => {\n    if (urlRef.current) {\n      URL.revokeObjectURL(urlRef.current);\n      urlRef.current = null;\n    }\n  };\n\n  return url ? <img src={url} onLoad={handleImageLoad} style={style} {...props} /> : null;\n}\n"],"names":["window"],"mappings":"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"}

package/dist/shared-preact/components/thumbnails-pane.d.ts

@@ -3,8 +3,10 @@ import { ThumbMeta } from '../../lib/index.ts';
 type ThumbnailsProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {
     style?: CSSProperties;
     children: (m: ThumbMeta) => ReactNode;
+    /** @deprecated use scrollToThumb via capability or rely on autoScroll */
     selectedPage?: number;
+    /** @deprecated behavior is now controlled by ThumbnailPluginConfig.scrollBehavior */
     scrollOptions?: ScrollIntoViewOptions;
 };
-export declare function ThumbnailsPane({ style, selectedPage, scrollOptions, ...props }: ThumbnailsProps): import("preact").JSX.Element;
+export declare function ThumbnailsPane({ style, scrollOptions, selectedPage, ...props }: ThumbnailsProps): import("preact").JSX.Element;
 export {};

package/dist/shared-react/components/thumbnails-pane.d.ts

@@ -3,8 +3,10 @@ import { ThumbMeta } from '../../lib/index.ts';
 type ThumbnailsProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {
     style?: CSSProperties;
     children: (m: ThumbMeta) => ReactNode;
+    /** @deprecated use scrollToThumb via capability or rely on autoScroll */
     selectedPage?: number;
+    /** @deprecated behavior is now controlled by ThumbnailPluginConfig.scrollBehavior */
     scrollOptions?: ScrollIntoViewOptions;
 };
-export declare function ThumbnailsPane({ style, selectedPage, scrollOptions, ...props }: ThumbnailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThumbnailsPane({ style, scrollOptions, selectedPage, ...props }: ThumbnailsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/vue/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ThumbnailsPane } from './thumbnails-pane.vue';
+export { default as ThumbImg } from './thumbnail-img.vue';

package/dist/vue/components/thumbnail-img.vue.d.ts

@@ -0,0 +1,6 @@
+import { ThumbMeta } from '../../lib/index.ts';
+type __VLS_Props = {
+    meta: ThumbMeta;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/vue/components/thumbnails-pane.vue.d.ts

@@ -0,0 +1,14 @@
+declare var __VLS_1: {
+    meta: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/vue/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-thumbnail';

package/dist/vue/hooks/use-thumbnail.d.ts

@@ -0,0 +1,3 @@
+import { ThumbnailPlugin } from '../../lib/index.ts';
+export declare const useThumbnailPlugin: () => import('@embedpdf/core/vue').PluginState<ThumbnailPlugin>;
+export declare const useThumbnailCapability: () => import('@embedpdf/core/vue').CapabilityState<Readonly<import('../../lib/index.ts').ThumbnailCapability>>;

package/dist/vue/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/vue"),l=require("@embedpdf/plugin-thumbnail"),n=require("vue"),t=require("@embedpdf/models"),o=()=>e.usePlugin(l.ThumbnailPlugin.id),u=()=>e.useCapability(l.ThumbnailPlugin.id),r=n.defineComponent({__name:"thumbnails-pane",setup(e){const l=n.useAttrs(),{plugin:t}=o(),u=n.ref(null),r=n.ref(null);let a=null,i=null;return n.watchEffect((e=>{t.value&&(null==a||a(),a=t.value.onWindow((e=>r.value=e)),e((()=>null==a?void 0:a())))})),n.onMounted((()=>{const e=u.value;if(!e||!t.value)return;const l=()=>t.value.updateWindow(e.scrollTop,e.clientHeight);e.addEventListener("scroll",l);const o=new ResizeObserver((()=>{t.value.updateWindow(e.scrollTop,e.clientHeight)}));o.observe(e),t.value.updateWindow(e.scrollTop,e.clientHeight),n.onBeforeUnmount((()=>{e.removeEventListener("scroll",l),o.disconnect()}))})),n.watchEffect((e=>{const l=u.value;l&&t.value&&r.value&&(i=t.value.onScrollTo((({top:e,behavior:t})=>{n.nextTick((()=>{l.scrollTo({top:e,behavior:t})}))})),e((()=>null==i?void 0:i())))})),n.onBeforeUnmount((()=>{null==a||a(),null==i||i()})),(e,o)=>{var a,i,d,s,c,p;return n.openBlock(),n.createElementBlock("div",n.mergeProps({ref_key:"viewportRef",ref:u,style:{overflowY:"auto",position:"relative",paddingTop:((null==(i=null==(a=n.unref(t))?void 0:a.cfg)?void 0:i.paddingY)??0)+"px",paddingBottom:((null==(s=null==(d=n.unref(t))?void 0:d.cfg)?void 0:s.paddingY)??0)+"px",height:"100%"}},n.unref(l)),[n.createElementVNode("div",{style:n.normalizeStyle({height:((null==(c=r.value)?void 0:c.totalHeight)??0)+"px",position:"relative"})},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList((null==(p=r.value)?void 0:p.items)??[],(l=>n.renderSlot(e.$slots,"default",{key:l.pageIndex,meta:l}))),128))],4)],16)}}}),a=["src"],i=n.defineComponent({__name:"thumbnail-img",props:{meta:{}},setup(e){const l=e,r=n.useAttrs(),{provides:i}=u(),{plugin:d}=o(),s=n.ref(null);let c=null;const p=n.ref(0);let v=null;function m(){c&&(URL.revokeObjectURL(c),c=null)}n.watchEffect((e=>{d.value&&(null==v||v(),v=d.value.onRefreshPages((e=>{e.includes(l.meta.pageIndex)&&p.value++})),e((()=>null==v?void 0:v())))}));let f=null;return n.watch((()=>[l.meta.pageIndex,p.value,!!i.value]),(()=>{null==f||f(),function(){if(!i.value)return;const e=i.value.renderThumb(l.meta.pageIndex,window.devicePixelRatio);f=()=>e.abort({code:t.PdfErrorCode.Cancelled,message:"canceled render task"}),e.wait((e=>{m();const l=URL.createObjectURL(e);c=l,s.value=l}),t.ignore)}()}),{immediate:!0}),n.onBeforeUnmount((()=>{null==f||f(),m()})),(e,l)=>s.value?(n.openBlock(),n.createElementBlock("img",n.mergeProps({key:0,src:s.value},n.unref(r),{onLoad:m}),null,16,a)):n.createCommentVNode("",!0)}});exports.ThumbImg=i,exports.ThumbnailsPane=r,exports.useThumbnailCapability=u,exports.useThumbnailPlugin=o,Object.keys(l).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>l[e]})}));
+//# sourceMappingURL=index.cjs.map

package/dist/vue/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-thumbnail.ts","../../src/vue/components/thumbnails-pane.vue","../../src/vue/components/thumbnail-img.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","<script setup lang=\"ts\">\nimport { onMounted, onBeforeUnmount, ref, watchEffect, nextTick, useAttrs } from 'vue';\nimport { useThumbnailPlugin } from '../hooks';\nimport type { WindowState } from '@embedpdf/plugin-thumbnail';\n\nconst attrs = useAttrs();\n\nconst { plugin: thumbnailPlugin } = useThumbnailPlugin();\nconst viewportRef = ref<HTMLDivElement | null>(null);\nconst windowState = ref<WindowState | null>(null);\n\nlet offWindow: (() => void) | null = null;\nlet offScrollTo: (() => void) | null = null;\n\nwatchEffect((onCleanup) => {\n  if (!thumbnailPlugin.value) return;\n  offWindow?.();\n  offWindow = thumbnailPlugin.value.onWindow((w) => (windowState.value = w));\n  onCleanup(() => offWindow?.());\n});\n\n// Setup scroll listener on mount\nonMounted(() => {\n  const vp = viewportRef.value;\n  if (!vp || !thumbnailPlugin.value) return;\n\n  const onScroll = () => thumbnailPlugin.value!.updateWindow(vp.scrollTop, vp.clientHeight);\n  vp.addEventListener('scroll', onScroll);\n\n  // Setup resize observer for viewport changes\n  const resizeObserver = new ResizeObserver(() => {\n    thumbnailPlugin.value!.updateWindow(vp.scrollTop, vp.clientHeight);\n  });\n  resizeObserver.observe(vp);\n\n  // initial push\n  thumbnailPlugin.value.updateWindow(vp.scrollTop, vp.clientHeight);\n\n  onBeforeUnmount(() => {\n    vp.removeEventListener('scroll', onScroll);\n    resizeObserver.disconnect();\n  });\n});\n\n// Setup scrollTo subscription only after window is ready\nwatchEffect((onCleanup) => {\n  const vp = viewportRef.value;\n  if (!vp || !thumbnailPlugin.value || !windowState.value) return;\n\n  offScrollTo = thumbnailPlugin.value.onScrollTo(({ top, behavior }) => {\n    // Wait for Vue to finish rendering the content before scrolling\n    nextTick(() => {\n      vp.scrollTo({ top, behavior });\n    });\n  });\n\n  onCleanup(() => offScrollTo?.());\n});\n\nonBeforeUnmount(() => {\n  offWindow?.();\n  offScrollTo?.();\n});\n</script>\n\n<template>\n  <div\n    ref=\"viewportRef\"\n    :style=\"{\n      overflowY: 'auto',\n      position: 'relative',\n      paddingTop: (thumbnailPlugin?.cfg?.paddingY ?? 0) + 'px',\n      paddingBottom: (thumbnailPlugin?.cfg?.paddingY ?? 0) + 'px',\n      height: '100%',\n    }\"\n    v-bind=\"attrs\"\n  >\n    <div :style=\"{ height: (windowState?.totalHeight ?? 0) + 'px', position: 'relative' }\">\n      <!-- ✅ Use a template v-for to render the default scoped slot -->\n      <template v-for=\"m in windowState?.items ?? []\" :key=\"m.pageIndex\">\n        <slot :meta=\"m\" />\n      </template>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, watch, watchEffect, useAttrs } from 'vue';\nimport { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\nimport type { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nconst props = defineProps<{ meta: ThumbMeta }>();\nconst attrs = useAttrs();\n\nconst { provides: thumbs } = useThumbnailCapability();\nconst { plugin: thumbnailPlugin } = useThumbnailPlugin();\n\nconst url = ref<string | null>(null);\nlet urlToRevoke: string | null = null;\nconst refreshTick = ref(0);\n\nlet offRefresh: (() => void) | null = null;\n\nwatchEffect((onCleanup) => {\n  if (!thumbnailPlugin.value) return;\n  offRefresh?.();\n  offRefresh = thumbnailPlugin.value.onRefreshPages((pages) => {\n    if (pages.includes(props.meta.pageIndex)) {\n      refreshTick.value++;\n    }\n  });\n  onCleanup(() => offRefresh?.());\n});\n\nfunction revoke() {\n  if (urlToRevoke) {\n    URL.revokeObjectURL(urlToRevoke);\n    urlToRevoke = null;\n  }\n}\n\nlet abortTask: (() => void) | null = null;\n\nfunction load() {\n  if (!thumbs.value) return; // wait until capability exists\n\n  const task = thumbs.value.renderThumb(props.meta.pageIndex, window.devicePixelRatio);\n  abortTask = () =>\n    task.abort({\n      code: PdfErrorCode.Cancelled,\n      message: 'canceled render task',\n    });\n\n  task.wait((blob) => {\n    revoke();\n    const objectUrl = URL.createObjectURL(blob);\n    urlToRevoke = objectUrl;\n    url.value = objectUrl;\n  }, ignore);\n}\n\n/* 🔧 Re-run when:\n   - page changes,\n   - the plugin tells us to refresh,\n   - OR the capability becomes available later.\n*/\nwatch(\n  () => [props.meta.pageIndex, refreshTick.value, !!thumbs.value],\n  () => {\n    abortTask?.();\n    load();\n  },\n  { immediate: true },\n);\n\nonBeforeUnmount(() => {\n  abortTask?.();\n  revoke();\n});\n</script>\n\n<template>\n  <img v-if=\"url\" :src=\"url\" v-bind=\"attrs\" @load=\"revoke\" />\n</template>\n"],"names":["useThumbnailPlugin","usePlugin","ThumbnailPlugin","id","useThumbnailCapability","useCapability","attrs","useAttrs","plugin","thumbnailPlugin","viewportRef","ref","windowState","offWindow","offScrollTo","vue$1","watchEffect","onCleanup","value","onWindow","w","onMounted","vp","onScroll","updateWindow","scrollTop","clientHeight","addEventListener","resizeObserver","ResizeObserver","observe","onBeforeUnmount","removeEventListener","disconnect","onScrollTo","top","behavior","nextTick","scrollTo","_openBlock","_createElementBlock","_mergeProps","style","_unref","_a","cfg","_b","paddingY","_c","_d","unref","_createElementVNode","_normalizeStyle","normalizeStyle","height","_e","totalHeight","position","createElementBlock","_Fragment","Fragment","_renderList","_f","items","m","_renderSlot","_ctx","$slots","key","pageIndex","meta","props","__props","provides","thumbs","url","urlToRevoke","refreshTick","offRefresh","revoke","URL","revokeObjectURL","onRefreshPages","pages","includes","abortTask","watch","task","renderThumb","window","devicePixelRatio","abort","code","PdfErrorCode","Cancelled","message","wait","blob","objectUrl","createObjectURL","ignore","load","immediate","src","onLoad","_hoisted_1"],"mappings":"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"}

package/dist/vue/index.d.ts

@@ -0,0 +1,3 @@
+export * from './hooks';
+export * from './components';
+export * from '../lib/index.ts';

package/dist/vue/index.js

@@ -0,0 +1,151 @@
+import { usePlugin, useCapability } from "@embedpdf/core/vue";
+import { ThumbnailPlugin } from "@embedpdf/plugin-thumbnail";
+export * from "@embedpdf/plugin-thumbnail";
+import { defineComponent, useAttrs, ref, watchEffect, onMounted, onBeforeUnmount, nextTick, createElementBlock, openBlock, mergeProps, unref, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot, watch, createCommentVNode } from "vue";
+import { ignore, PdfErrorCode } from "@embedpdf/models";
+const useThumbnailPlugin = () => usePlugin(ThumbnailPlugin.id);
+const useThumbnailCapability = () => useCapability(ThumbnailPlugin.id);
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "thumbnails-pane",
+  setup(__props) {
+    const attrs = useAttrs();
+    const { plugin: thumbnailPlugin } = useThumbnailPlugin();
+    const viewportRef = ref(null);
+    const windowState = ref(null);
+    let offWindow = null;
+    let offScrollTo = null;
+    watchEffect((onCleanup) => {
+      if (!thumbnailPlugin.value) return;
+      offWindow == null ? void 0 : offWindow();
+      offWindow = thumbnailPlugin.value.onWindow((w) => windowState.value = w);
+      onCleanup(() => offWindow == null ? void 0 : offWindow());
+    });
+    onMounted(() => {
+      const vp = viewportRef.value;
+      if (!vp || !thumbnailPlugin.value) return;
+      const onScroll = () => thumbnailPlugin.value.updateWindow(vp.scrollTop, vp.clientHeight);
+      vp.addEventListener("scroll", onScroll);
+      const resizeObserver = new ResizeObserver(() => {
+        thumbnailPlugin.value.updateWindow(vp.scrollTop, vp.clientHeight);
+      });
+      resizeObserver.observe(vp);
+      thumbnailPlugin.value.updateWindow(vp.scrollTop, vp.clientHeight);
+      onBeforeUnmount(() => {
+        vp.removeEventListener("scroll", onScroll);
+        resizeObserver.disconnect();
+      });
+    });
+    watchEffect((onCleanup) => {
+      const vp = viewportRef.value;
+      if (!vp || !thumbnailPlugin.value || !windowState.value) return;
+      offScrollTo = thumbnailPlugin.value.onScrollTo(({ top, behavior }) => {
+        nextTick(() => {
+          vp.scrollTo({ top, behavior });
+        });
+      });
+      onCleanup(() => offScrollTo == null ? void 0 : offScrollTo());
+    });
+    onBeforeUnmount(() => {
+      offWindow == null ? void 0 : offWindow();
+      offScrollTo == null ? void 0 : offScrollTo();
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d, _e, _f;
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "viewportRef",
+        ref: viewportRef,
+        style: {
+          overflowY: "auto",
+          position: "relative",
+          paddingTop: (((_b = (_a = unref(thumbnailPlugin)) == null ? void 0 : _a.cfg) == null ? void 0 : _b.paddingY) ?? 0) + "px",
+          paddingBottom: (((_d = (_c = unref(thumbnailPlugin)) == null ? void 0 : _c.cfg) == null ? void 0 : _d.paddingY) ?? 0) + "px",
+          height: "100%"
+        }
+      }, unref(attrs)), [
+        createElementVNode("div", {
+          style: normalizeStyle({ height: (((_e = windowState.value) == null ? void 0 : _e.totalHeight) ?? 0) + "px", position: "relative" })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(((_f = windowState.value) == null ? void 0 : _f.items) ?? [], (m) => {
+            return renderSlot(_ctx.$slots, "default", {
+              key: m.pageIndex,
+              meta: m
+            });
+          }), 128))
+        ], 4)
+      ], 16);
+    };
+  }
+});
+const _hoisted_1 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "thumbnail-img",
+  props: {
+    meta: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = useAttrs();
+    const { provides: thumbs } = useThumbnailCapability();
+    const { plugin: thumbnailPlugin } = useThumbnailPlugin();
+    const url = ref(null);
+    let urlToRevoke = null;
+    const refreshTick = ref(0);
+    let offRefresh = null;
+    watchEffect((onCleanup) => {
+      if (!thumbnailPlugin.value) return;
+      offRefresh == null ? void 0 : offRefresh();
+      offRefresh = thumbnailPlugin.value.onRefreshPages((pages) => {
+        if (pages.includes(props.meta.pageIndex)) {
+          refreshTick.value++;
+        }
+      });
+      onCleanup(() => offRefresh == null ? void 0 : offRefresh());
+    });
+    function revoke() {
+      if (urlToRevoke) {
+        URL.revokeObjectURL(urlToRevoke);
+        urlToRevoke = null;
+      }
+    }
+    let abortTask = null;
+    function load() {
+      if (!thumbs.value) return;
+      const task = thumbs.value.renderThumb(props.meta.pageIndex, window.devicePixelRatio);
+      abortTask = () => task.abort({
+        code: PdfErrorCode.Cancelled,
+        message: "canceled render task"
+      });
+      task.wait((blob) => {
+        revoke();
+        const objectUrl = URL.createObjectURL(blob);
+        urlToRevoke = objectUrl;
+        url.value = objectUrl;
+      }, ignore);
+    }
+    watch(
+      () => [props.meta.pageIndex, refreshTick.value, !!thumbs.value],
+      () => {
+        abortTask == null ? void 0 : abortTask();
+        load();
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      abortTask == null ? void 0 : abortTask();
+      revoke();
+    });
+    return (_ctx, _cache) => {
+      return url.value ? (openBlock(), createElementBlock("img", mergeProps({
+        key: 0,
+        src: url.value
+      }, unref(attrs), { onLoad: revoke }), null, 16, _hoisted_1)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as ThumbImg,
+  _sfc_main$1 as ThumbnailsPane,
+  useThumbnailCapability,
+  useThumbnailPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/vue/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-thumbnail.ts","../../src/vue/components/thumbnails-pane.vue","../../src/vue/components/thumbnail-img.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","<script setup lang=\"ts\">\nimport { onMounted, onBeforeUnmount, ref, watchEffect, nextTick, useAttrs } from 'vue';\nimport { useThumbnailPlugin } from '../hooks';\nimport type { WindowState } from '@embedpdf/plugin-thumbnail';\n\nconst attrs = useAttrs();\n\nconst { plugin: thumbnailPlugin } = useThumbnailPlugin();\nconst viewportRef = ref<HTMLDivElement | null>(null);\nconst windowState = ref<WindowState | null>(null);\n\nlet offWindow: (() => void) | null = null;\nlet offScrollTo: (() => void) | null = null;\n\nwatchEffect((onCleanup) => {\n  if (!thumbnailPlugin.value) return;\n  offWindow?.();\n  offWindow = thumbnailPlugin.value.onWindow((w) => (windowState.value = w));\n  onCleanup(() => offWindow?.());\n});\n\n// Setup scroll listener on mount\nonMounted(() => {\n  const vp = viewportRef.value;\n  if (!vp || !thumbnailPlugin.value) return;\n\n  const onScroll = () => thumbnailPlugin.value!.updateWindow(vp.scrollTop, vp.clientHeight);\n  vp.addEventListener('scroll', onScroll);\n\n  // Setup resize observer for viewport changes\n  const resizeObserver = new ResizeObserver(() => {\n    thumbnailPlugin.value!.updateWindow(vp.scrollTop, vp.clientHeight);\n  });\n  resizeObserver.observe(vp);\n\n  // initial push\n  thumbnailPlugin.value.updateWindow(vp.scrollTop, vp.clientHeight);\n\n  onBeforeUnmount(() => {\n    vp.removeEventListener('scroll', onScroll);\n    resizeObserver.disconnect();\n  });\n});\n\n// Setup scrollTo subscription only after window is ready\nwatchEffect((onCleanup) => {\n  const vp = viewportRef.value;\n  if (!vp || !thumbnailPlugin.value || !windowState.value) return;\n\n  offScrollTo = thumbnailPlugin.value.onScrollTo(({ top, behavior }) => {\n    // Wait for Vue to finish rendering the content before scrolling\n    nextTick(() => {\n      vp.scrollTo({ top, behavior });\n    });\n  });\n\n  onCleanup(() => offScrollTo?.());\n});\n\nonBeforeUnmount(() => {\n  offWindow?.();\n  offScrollTo?.();\n});\n</script>\n\n<template>\n  <div\n    ref=\"viewportRef\"\n    :style=\"{\n      overflowY: 'auto',\n      position: 'relative',\n      paddingTop: (thumbnailPlugin?.cfg?.paddingY ?? 0) + 'px',\n      paddingBottom: (thumbnailPlugin?.cfg?.paddingY ?? 0) + 'px',\n      height: '100%',\n    }\"\n    v-bind=\"attrs\"\n  >\n    <div :style=\"{ height: (windowState?.totalHeight ?? 0) + 'px', position: 'relative' }\">\n      <!-- ✅ Use a template v-for to render the default scoped slot -->\n      <template v-for=\"m in windowState?.items ?? []\" :key=\"m.pageIndex\">\n        <slot :meta=\"m\" />\n      </template>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, watch, watchEffect, useAttrs } from 'vue';\nimport { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\nimport type { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nconst props = defineProps<{ meta: ThumbMeta }>();\nconst attrs = useAttrs();\n\nconst { provides: thumbs } = useThumbnailCapability();\nconst { plugin: thumbnailPlugin } = useThumbnailPlugin();\n\nconst url = ref<string | null>(null);\nlet urlToRevoke: string | null = null;\nconst refreshTick = ref(0);\n\nlet offRefresh: (() => void) | null = null;\n\nwatchEffect((onCleanup) => {\n  if (!thumbnailPlugin.value) return;\n  offRefresh?.();\n  offRefresh = thumbnailPlugin.value.onRefreshPages((pages) => {\n    if (pages.includes(props.meta.pageIndex)) {\n      refreshTick.value++;\n    }\n  });\n  onCleanup(() => offRefresh?.());\n});\n\nfunction revoke() {\n  if (urlToRevoke) {\n    URL.revokeObjectURL(urlToRevoke);\n    urlToRevoke = null;\n  }\n}\n\nlet abortTask: (() => void) | null = null;\n\nfunction load() {\n  if (!thumbs.value) return; // wait until capability exists\n\n  const task = thumbs.value.renderThumb(props.meta.pageIndex, window.devicePixelRatio);\n  abortTask = () =>\n    task.abort({\n      code: PdfErrorCode.Cancelled,\n      message: 'canceled render task',\n    });\n\n  task.wait((blob) => {\n    revoke();\n    const objectUrl = URL.createObjectURL(blob);\n    urlToRevoke = objectUrl;\n    url.value = objectUrl;\n  }, ignore);\n}\n\n/* 🔧 Re-run when:\n   - page changes,\n   - the plugin tells us to refresh,\n   - OR the capability becomes available later.\n*/\nwatch(\n  () => [props.meta.pageIndex, refreshTick.value, !!thumbs.value],\n  () => {\n    abortTask?.();\n    load();\n  },\n  { immediate: true },\n);\n\nonBeforeUnmount(() => {\n  abortTask?.();\n  revoke();\n});\n</script>\n\n<template>\n  <img v-if=\"url\" :src=\"url\" v-bind=\"attrs\" @load=\"revoke\" />\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_renderSlot"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-thumbnail",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -21,24 +21,31 @@
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js",
       "require": "./dist/react/index.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.js",
+      "require": "./dist/vue/index.cjs"
     }
   },
   "dependencies": {
-    "@embedpdf/models": "1.3.4"
+    "@embedpdf/models": "1.3.6"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
     "@embedpdf/build": "1.0.1",
-    "@embedpdf/core": "1.3.4",
-    "@embedpdf/plugin-render": "1.3.4"
+    "@embedpdf/plugin-render": "1.3.6",
+    "@embedpdf/plugin-scroll": "1.3.6",
+    "@embedpdf/core": "1.3.6"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "preact": "^10.26.4",
-    "@embedpdf/core": "1.3.4",
-    "@embedpdf/plugin-render": "1.3.4"
+    "vue": ">=3.2.0",
+    "@embedpdf/core": "1.3.6",
+    "@embedpdf/plugin-render": "1.3.6"
   },
   "files": [
     "dist",
@@ -60,7 +67,8 @@
     "build:base": "vite build --mode base",
     "build:react": "vite build --mode react",
     "build:preact": "vite build --mode preact",
-    "build": "pnpm run clean && concurrently -c auto -n base,react,preact \"vite build --mode base\" \"vite build --mode react\" \"vite build --mode preact\"",
+    "build:vue": "vite build --mode vue",
+    "build": "pnpm run clean && concurrently -c auto -n base,react,preact,vue \"vite build --mode base\" \"vite build --mode react\" \"vite build --mode preact\" \"vite build --mode vue\"",
     "clean": "rimraf dist",
     "lint": "eslint src --color",
     "lint:fix": "eslint src --color --fix"