@embedpdf/plugin-thumbnail 1.0.10 → 1.0.12

package/dist/preact/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/preact/index.ts","../../src/preact/hooks/use-thumbnail.ts","../../src/preact/components/thumbnails-pane.tsx","../../src/preact/components/thumbnail-img.tsx"],"sourcesContent":["export * from './hooks';\nexport * from './components';\n","import { useCapability, usePlugin } from '@embedpdf/core/preact';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","/** @jsxImportSource preact */\nimport { ComponentChildren, JSX } from 'preact';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailsProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'style'> & {\n  style?: JSX.CSSProperties;\n  children: (m: ThumbMeta) => ComponentChildren;\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","/** @jsxImportSource preact */\nimport { ComponentChildren, Fragment, JSX } from 'preact';\nimport { useEffect, useState, useRef } from 'preact/hooks';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailImgProps = Omit<JSX.HTMLAttributes<HTMLImageElement>, 'style'> & {\n  style?: JSX.CSSProperties;\n  meta: ThumbMeta;\n};\n\nexport function ThumbImg({ meta, style, ...props }: ThumbnailImgProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\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  }, [meta.pageIndex]);\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"],"mappings":"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","names":["window","import_hooks","import_jsx_runtime"]}
+{"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 } from '@framework';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability } 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 [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\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  }, [meta.pageIndex]);\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":["useThumbnailCapability","useCapability","ThumbnailPlugin","id","meta","style","props","provides","thumbs","url","setUrl","useState","urlRef","useRef","useEffect","task","renderThumb","pageIndex","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","usePlugin"],"mappings":"iRAIaA,EAAyB,IAAMC,gBAA+BC,EAAAA,gBAAgBC,qBCMpF,UAAkBC,KAAEA,EAAAC,MAAMA,KAAUC,IACzC,MAAQC,SAAUC,GAAWR,KACtBS,EAAKC,GAAUC,aAChBC,EAASC,SAAsB,MA8B9B,OA5BPC,EAAAA,WAAU,KACR,MAAMC,EAAO,MAAAP,OAAA,EAAAA,EAAQQ,YAAYZ,EAAKa,UAAWC,OAAOC,kBAOxD,OANM,MAAAJ,GAAAA,EAAAK,MAAMC,IACJ,MAAAC,EAAYC,IAAIC,gBAAgBH,GACtCT,EAAOa,QAAUH,EACjBZ,EAAOY,EAAS,GACfI,UAEI,KACDd,EAAOa,SACLF,IAAAI,gBAAgBf,EAAOa,SAC3Bb,EAAOa,QAAU,MAEjB,MAAAV,GAAAA,EAAMa,MAAM,CACVC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,wBACV,CAEL,GACC,CAAC5B,EAAKa,YASFR,EAAOwB,EAAAA,IAAA,MAAA,CAAIC,IAAKzB,EAAK0B,OAPJ,KAClBvB,EAAOa,UACLF,IAAAI,gBAAgBf,EAAOa,SAC3Bb,EAAOa,QAAU,KAAA,EAIgCpB,WAAkBC,IAAY,IACrF,yBCjCO,UAAwBD,MAC7BA,EAAA+B,aACAA,EAAAC,cACAA,EAAgB,CAAEC,SAAU,SAAUC,MAAO,UAAWC,OAAQ,cAC7DlC,IAEH,MAAQC,SAAUC,GAAWR,IACvByC,EAAc5B,SAAuB,OAEpCK,EAAQwB,GAAa/B,EAAAA,SAA6B,aAGzDG,EAAAA,WAAU,IAAM,MAAAN,OAAA,EAAAA,EAAQmC,SAASD,IAAY,CAAClC,IAG9CM,EAAAA,WAAU,KACR,MAAM8B,EAAKH,EAAYhB,QACvB,IAAKmB,EAAI,OACT,MAAMC,EAAW,IAAM,MAAArC,OAAA,EAAAA,EAAQsC,YAAYF,EAAGG,UAAWH,EAAGI,cAE5D,OADGJ,EAAAK,iBAAiB,SAAUJ,GACvB,IAAMD,EAAGM,oBAAoB,SAAUL,EAAQ,GACrD,CAACrC,IAGJM,EAAAA,WAAU,KACR,MAAM8B,EAAKH,EAAYhB,QAClBmB,GAAOpC,GAEiB,KAAzB,MAAAU,OAAA,EAAAA,EAAQiC,MAAMC,SAChB5C,EAAOsC,YAAYF,EAAGG,UAAWH,EAAGI,aAAY,GAEjD,CAAC9B,EAAQV,IAGZM,EAAAA,WAAU,KACJ,IAACsB,IAAiBlB,EAAQ,OAExB,MAAAmC,EAAOnC,EAAOiC,MAAMG,MAAMC,GAAOA,EAAGtC,UAAY,IAAMmB,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,EAAapC,MAAO,CAAEwD,UAAW,OAAQC,SAAU,cAAezD,MAAaC,EAEvFyD,eAAC,MAAI,CAAA1D,MAAO,CAAE2D,QAAQ,MAAA9C,SAAAA,EAAQ+C,cAAe,EAAGH,SAAU,YACvDC,SAAQ,MAAA7C,OAAA,EAAAA,EAAAiC,MAAMe,KAAKC,GAAM7D,EAAMyD,SAASI,QAIjD,8DF1EkC,IAAMC,YAA2BlE,EAAAA,gBAAgBC"}

package/dist/preact/index.d.ts

@@ -1,34 +1 @@
-import * as _embedpdf_plugin_thumbnail from '@embedpdf/plugin-thumbnail';
-import { ThumbnailPlugin, ThumbMeta } from '@embedpdf/plugin-thumbnail';
-import { JSX, ComponentChildren } from 'preact';
-
-declare const useThumbnailPlugin: () => {
-    plugin: ThumbnailPlugin | null;
-    isLoading: boolean;
-    ready: Promise<void>;
-};
-declare const useThumbnailCapability: () => {
-    provides: Readonly<_embedpdf_plugin_thumbnail.ThumbnailCapability> | null;
-    isLoading: boolean;
-    ready: Promise<void>;
-};
-
-/** @jsxImportSource preact */
-
-type ThumbnailsProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'style'> & {
-    style?: JSX.CSSProperties;
-    children: (m: ThumbMeta) => ComponentChildren;
-    selectedPage?: number;
-    scrollOptions?: ScrollIntoViewOptions;
-};
-declare function ThumbnailsPane({ style, selectedPage, scrollOptions, ...props }: ThumbnailsProps): JSX.Element;
-
-/** @jsxImportSource preact */
-
-type ThumbnailImgProps = Omit<JSX.HTMLAttributes<HTMLImageElement>, 'style'> & {
-    style?: JSX.CSSProperties;
-    meta: ThumbMeta;
-};
-declare function ThumbImg({ meta, style, ...props }: ThumbnailImgProps): JSX.Element | null;
-
-export { ThumbImg, ThumbnailsPane, useThumbnailCapability, useThumbnailPlugin };
+export * from '../shared-preact';

package/dist/preact/index.js

@@ -1,12 +1,11 @@
-// src/preact/hooks/use-thumbnail.ts
-import { useCapability, usePlugin } from "@embedpdf/core/preact";
+import { usePlugin, useCapability } from "@embedpdf/core/preact";
 import { ThumbnailPlugin } from "@embedpdf/plugin-thumbnail";
-var useThumbnailPlugin = () => usePlugin(ThumbnailPlugin.id);
-var useThumbnailCapability = () => useCapability(ThumbnailPlugin.id);
-
-// src/preact/components/thumbnails-pane.tsx
-import { useEffect, useRef, useState } from "preact/hooks";
 import { jsx } from "preact/jsx-runtime";
+import "preact";
+import { useRef, useState, useEffect } from "preact/hooks";
+import { ignore, PdfErrorCode } from "@embedpdf/models";
+const useThumbnailPlugin = () => usePlugin(ThumbnailPlugin.id);
+const useThumbnailCapability = () => useCapability(ThumbnailPlugin.id);
 function ThumbnailsPane({
   style,
   selectedPage,
@@ -16,18 +15,18 @@ function ThumbnailsPane({
   const { provides: thumbs } = useThumbnailCapability();
   const viewportRef = useRef(null);
   const [window2, setWindow] = useState(null);
-  useEffect(() => thumbs?.onWindow(setWindow), [thumbs]);
+  useEffect(() => thumbs == null ? void 0 : thumbs.onWindow(setWindow), [thumbs]);
   useEffect(() => {
     const vp = viewportRef.current;
     if (!vp) return;
-    const onScroll = () => thumbs?.setViewport(vp.scrollTop, vp.clientHeight);
+    const onScroll = () => thumbs == null ? void 0 : thumbs.setViewport(vp.scrollTop, vp.clientHeight);
     vp.addEventListener("scroll", onScroll);
     return () => vp.removeEventListener("scroll", onScroll);
   }, [thumbs]);
   useEffect(() => {
     const vp = viewportRef.current;
     if (!vp || !thumbs) return;
-    if (window2?.items.length === 0) {
+    if ((window2 == null ? void 0 : window2.items.length) === 0) {
       thumbs.setViewport(vp.scrollTop, vp.clientHeight);
     }
   }, [window2, thumbs]);
@@ -47,20 +46,15 @@ function ThumbnailsPane({
       });
     }
   }, [selectedPage, window2, scrollOptions]);
-  return /* @__PURE__ */ jsx("div", { ref: viewportRef, style: { overflowY: "auto", position: "relative", ...style }, ...props, children: /* @__PURE__ */ jsx("div", { style: { height: window2?.totalHeight ?? 0, position: "relative" }, children: window2?.items.map((m) => props.children(m)) }) });
+  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)) }) });
 }
-
-// src/preact/components/thumbnail-img.tsx
-import { useEffect as useEffect2, useState as useState2, useRef as useRef2 } from "preact/hooks";
-import { ignore, PdfErrorCode } from "@embedpdf/models";
-import { jsx as jsx2 } from "preact/jsx-runtime";
 function ThumbImg({ meta, style, ...props }) {
   const { provides: thumbs } = useThumbnailCapability();
-  const [url, setUrl] = useState2();
-  const urlRef = useRef2(null);
-  useEffect2(() => {
-    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);
-    task?.wait((blob) => {
+  const [url, setUrl] = useState();
+  const urlRef = useRef(null);
+  useEffect(() => {
+    const task = thumbs == null ? void 0 : thumbs.renderThumb(meta.pageIndex, window.devicePixelRatio);
+    task == null ? void 0 : task.wait((blob) => {
       const objectUrl = URL.createObjectURL(blob);
       urlRef.current = objectUrl;
       setUrl(objectUrl);
@@ -70,7 +64,7 @@ function ThumbImg({ meta, style, ...props }) {
         URL.revokeObjectURL(urlRef.current);
         urlRef.current = null;
       } else {
-        task?.abort({
+        task == null ? void 0 : task.abort({
           code: PdfErrorCode.Cancelled,
           message: "canceled render task"
         });
@@ -83,7 +77,7 @@ function ThumbImg({ meta, style, ...props }) {
       urlRef.current = null;
     }
   };
-  return url ? /* @__PURE__ */ jsx2("img", { src: url, onLoad: handleImageLoad, style, ...props }) : null;
+  return url ? /* @__PURE__ */ jsx("img", { src: url, onLoad: handleImageLoad, style, ...props }) : null;
 }
 export {
   ThumbImg,
@@ -91,4 +85,4 @@ export {
   useThumbnailCapability,
   useThumbnailPlugin
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/preact/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/preact/hooks/use-thumbnail.ts","../../src/preact/components/thumbnails-pane.tsx","../../src/preact/components/thumbnail-img.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/preact';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","/** @jsxImportSource preact */\nimport { ComponentChildren, JSX } from 'preact';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailsProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'style'> & {\n  style?: JSX.CSSProperties;\n  children: (m: ThumbMeta) => ComponentChildren;\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","/** @jsxImportSource preact */\nimport { ComponentChildren, Fragment, JSX } from 'preact';\nimport { useEffect, useState, useRef } from 'preact/hooks';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailImgProps = Omit<JSX.HTMLAttributes<HTMLImageElement>, 'style'> & {\n  style?: JSX.CSSProperties;\n  meta: ThumbMeta;\n};\n\nexport function ThumbImg({ meta, style, ...props }: ThumbnailImgProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\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  }, [meta.pageIndex]);\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"],"mappings":"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","names":["window","useEffect","useState","useRef","jsx","useState","useRef","useEffect"]}
+{"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 } from '@framework';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability } 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 [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\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  }, [meta.pageIndex]);\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/adapter.d.ts

@@ -0,0 +1,2 @@
+export { Fragment, useEffect, useRef, useState, useCallback, useMemo } from 'react';
+export type { ReactNode, HTMLAttributes, CSSProperties } from 'react';

package/dist/react/core.d.ts

@@ -0,0 +1 @@
+export * from '@embedpdf/core/react';

package/dist/react/index.cjs

@@ -1,124 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/react/index.ts
-var react_exports = {};
-__export(react_exports, {
-  ThumbImg: () => ThumbImg,
-  ThumbnailsPane: () => ThumbnailsPane,
-  useThumbnailCapability: () => useThumbnailCapability,
-  useThumbnailPlugin: () => useThumbnailPlugin
-});
-module.exports = __toCommonJS(react_exports);
-
-// src/react/hooks/use-thumbnail.ts
-var import_react = require("@embedpdf/core/react");
-var import_plugin_thumbnail = require("@embedpdf/plugin-thumbnail");
-var useThumbnailPlugin = () => (0, import_react.usePlugin)(import_plugin_thumbnail.ThumbnailPlugin.id);
-var useThumbnailCapability = () => (0, import_react.useCapability)(import_plugin_thumbnail.ThumbnailPlugin.id);
-
-// src/react/components/thumbnails-pane.tsx
-var import_react2 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-function ThumbnailsPane({
-  style,
-  selectedPage,
-  scrollOptions = { behavior: "smooth", block: "nearest", inline: "nearest" },
-  ...props
-}) {
-  const { provides: thumbs } = useThumbnailCapability();
-  const viewportRef = (0, import_react2.useRef)(null);
-  const [window2, setWindow] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => thumbs?.onWindow(setWindow), [thumbs]);
-  (0, import_react2.useEffect)(() => {
-    const vp = viewportRef.current;
-    if (!vp) return;
-    const onScroll = () => thumbs?.setViewport(vp.scrollTop, vp.clientHeight);
-    vp.addEventListener("scroll", onScroll);
-    return () => vp.removeEventListener("scroll", onScroll);
-  }, [thumbs]);
-  (0, import_react2.useEffect)(() => {
-    const vp = viewportRef.current;
-    if (!vp || !thumbs) return;
-    if (window2?.items.length === 0) {
-      thumbs.setViewport(vp.scrollTop, vp.clientHeight);
-    }
-  }, [window2, thumbs]);
-  (0, import_react2.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
-      });
-    }
-  }, [selectedPage, window2, scrollOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: viewportRef, style: { overflowY: "auto", position: "relative", ...style }, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: window2?.totalHeight ?? 0, position: "relative" }, children: window2?.items.map((m) => props.children(m)) }) });
-}
-
-// src/react/components/thumbnail-img.tsx
-var import_react3 = require("react");
-var import_models = require("@embedpdf/models");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function ThumbImg({ meta, style, ...props }) {
-  const { provides: thumbs } = useThumbnailCapability();
-  const [url, setUrl] = (0, import_react3.useState)();
-  const urlRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
-    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);
-    task?.wait((blob) => {
-      const objectUrl = URL.createObjectURL(blob);
-      urlRef.current = objectUrl;
-      setUrl(objectUrl);
-    }, import_models.ignore);
-    return () => {
-      if (urlRef.current) {
-        URL.revokeObjectURL(urlRef.current);
-        urlRef.current = null;
-      } else {
-        task?.abort({
-          code: import_models.PdfErrorCode.Cancelled,
-          message: "canceled render task"
-        });
-      }
-    };
-  }, [meta.pageIndex]);
-  const handleImageLoad = () => {
-    if (urlRef.current) {
-      URL.revokeObjectURL(urlRef.current);
-      urlRef.current = null;
-    }
-  };
-  return url ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: url, onLoad: handleImageLoad, style, ...props }) : null;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ThumbImg,
-  ThumbnailsPane,
-  useThumbnailCapability,
-  useThumbnailPlugin
-});
-//# sourceMappingURL=index.cjs.map
+"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.useCapability(t.ThumbnailPlugin.id);exports.ThumbImg=function({meta:e,style:t,...o}){const{provides:s}=i(),[u,c]=n.useState(),a=n.useRef(null);return 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);a.current=t,c(t)}),l.ignore),()=>{a.current?(URL.revokeObjectURL(a.current),a.current=null):null==t||t.abort({code:l.PdfErrorCode.Cancelled,message:"canceled render task"})}}),[e.pageIndex]),u?r.jsx("img",{src:u,onLoad:()=>{a.current&&(URL.revokeObjectURL(a.current),a.current=null)},style:t,...o}):null},exports.ThumbnailsPane=function({style:e,selectedPage:t,scrollOptions:l={behavior:"smooth",block:"nearest",inline:"nearest"},...o}){const{provides:s}=i(),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},...o,children:r.jsx("div",{style:{height:(null==c?void 0:c.totalHeight)??0,position:"relative"},children:null==c?void 0:c.items.map((e=>o.children(e)))})})},exports.useThumbnailCapability=i,exports.useThumbnailPlugin=()=>e.usePlugin(t.ThumbnailPlugin.id);
+//# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/index.ts","../../src/react/hooks/use-thumbnail.ts","../../src/react/components/thumbnails-pane.tsx","../../src/react/components/thumbnail-img.tsx"],"sourcesContent":["export * from './hooks';\nexport * from './components';\n","import { useCapability, usePlugin } from '@embedpdf/core/react';\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 } from 'react';\nimport { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {\n  style?: React.CSSProperties;\n  children: (m: ThumbMeta) => React.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 } from 'react';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailImgProps = Omit<React.HTMLAttributes<HTMLImageElement>, 'style'> & {\n  style?: React.CSSProperties;\n  meta: ThumbMeta;\n};\n\nexport function ThumbImg({ meta, style, ...props }: ThumbnailImgProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\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  }, [meta.pageIndex]);\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"],"mappings":"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","names":["import_react","window","import_react","import_jsx_runtime"]}
+{"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 } from '@framework';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability } 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 [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\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  }, [meta.pageIndex]);\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":["useThumbnailCapability","useCapability","ThumbnailPlugin","id","meta","style","props","provides","thumbs","url","setUrl","useState","urlRef","useRef","useEffect","task","renderThumb","pageIndex","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","usePlugin"],"mappings":"gPAIaA,EAAyB,IAAMC,gBAA+BC,EAAAA,gBAAgBC,qBCMpF,UAAkBC,KAAEA,EAAAC,MAAMA,KAAUC,IACzC,MAAQC,SAAUC,GAAWR,KACtBS,EAAKC,GAAUC,aAChBC,EAASC,SAAsB,MA8B9B,OA5BPC,EAAAA,WAAU,KACR,MAAMC,EAAO,MAAAP,OAAA,EAAAA,EAAQQ,YAAYZ,EAAKa,UAAWC,OAAOC,kBAOxD,OANM,MAAAJ,GAAAA,EAAAK,MAAMC,IACJ,MAAAC,EAAYC,IAAIC,gBAAgBH,GACtCT,EAAOa,QAAUH,EACjBZ,EAAOY,EAAS,GACfI,UAEI,KACDd,EAAOa,SACLF,IAAAI,gBAAgBf,EAAOa,SAC3Bb,EAAOa,QAAU,MAEjB,MAAAV,GAAAA,EAAMa,MAAM,CACVC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,wBACV,CAEL,GACC,CAAC5B,EAAKa,YASFR,EAAOwB,EAAAA,IAAA,MAAA,CAAIC,IAAKzB,EAAK0B,OAPJ,KAClBvB,EAAOa,UACLF,IAAAI,gBAAgBf,EAAOa,SAC3Bb,EAAOa,QAAU,KAAA,EAIgCpB,WAAkBC,IAAY,IACrF,yBCjCO,UAAwBD,MAC7BA,EAAA+B,aACAA,EAAAC,cACAA,EAAgB,CAAEC,SAAU,SAAUC,MAAO,UAAWC,OAAQ,cAC7DlC,IAEH,MAAQC,SAAUC,GAAWR,IACvByC,EAAc5B,SAAuB,OAEpCK,EAAQwB,GAAa/B,EAAAA,SAA6B,aAGzDG,EAAAA,WAAU,IAAM,MAAAN,OAAA,EAAAA,EAAQmC,SAASD,IAAY,CAAClC,IAG9CM,EAAAA,WAAU,KACR,MAAM8B,EAAKH,EAAYhB,QACvB,IAAKmB,EAAI,OACT,MAAMC,EAAW,IAAM,MAAArC,OAAA,EAAAA,EAAQsC,YAAYF,EAAGG,UAAWH,EAAGI,cAE5D,OADGJ,EAAAK,iBAAiB,SAAUJ,GACvB,IAAMD,EAAGM,oBAAoB,SAAUL,EAAQ,GACrD,CAACrC,IAGJM,EAAAA,WAAU,KACR,MAAM8B,EAAKH,EAAYhB,QAClBmB,GAAOpC,GAEiB,KAAzB,MAAAU,OAAA,EAAAA,EAAQiC,MAAMC,SAChB5C,EAAOsC,YAAYF,EAAGG,UAAWH,EAAGI,aAAY,GAEjD,CAAC9B,EAAQV,IAGZM,EAAAA,WAAU,KACJ,IAACsB,IAAiBlB,EAAQ,OAExB,MAAAmC,EAAOnC,EAAOiC,MAAMG,MAAMC,GAAOA,EAAGtC,UAAY,IAAMmB,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,EAAapC,MAAO,CAAEwD,UAAW,OAAQC,SAAU,cAAezD,MAAaC,EAEvFyD,eAAC,MAAI,CAAA1D,MAAO,CAAE2D,QAAQ,MAAA9C,SAAAA,EAAQ+C,cAAe,EAAGH,SAAU,YACvDC,SAAQ,MAAA7C,OAAA,EAAAA,EAAAiC,MAAMe,KAAKC,GAAM7D,EAAMyD,SAASI,QAIjD,8DF1EkC,IAAMC,YAA2BlE,EAAAA,gBAAgBC"}

package/dist/react/index.d.ts

@@ -1,30 +1 @@
-import * as _embedpdf_plugin_thumbnail from '@embedpdf/plugin-thumbnail';
-import { ThumbnailPlugin, ThumbMeta } from '@embedpdf/plugin-thumbnail';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare const useThumbnailPlugin: () => {
-    plugin: ThumbnailPlugin | null;
-    isLoading: boolean;
-    ready: Promise<void>;
-};
-declare const useThumbnailCapability: () => {
-    provides: Readonly<_embedpdf_plugin_thumbnail.ThumbnailCapability> | null;
-    isLoading: boolean;
-    ready: Promise<void>;
-};
-
-type ThumbnailsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {
-    style?: React.CSSProperties;
-    children: (m: ThumbMeta) => React.ReactNode;
-    selectedPage?: number;
-    scrollOptions?: ScrollIntoViewOptions;
-};
-declare function ThumbnailsPane({ style, selectedPage, scrollOptions, ...props }: ThumbnailsProps): react_jsx_runtime.JSX.Element;
-
-type ThumbnailImgProps = Omit<React.HTMLAttributes<HTMLImageElement>, 'style'> & {
-    style?: React.CSSProperties;
-    meta: ThumbMeta;
-};
-declare function ThumbImg({ meta, style, ...props }: ThumbnailImgProps): react_jsx_runtime.JSX.Element | null;
-
-export { ThumbImg, ThumbnailsPane, useThumbnailCapability, useThumbnailPlugin };
+export * from '../shared-react';

package/dist/react/index.js

@@ -1,12 +1,10 @@
-// src/react/hooks/use-thumbnail.ts
-import { useCapability, usePlugin } from "@embedpdf/core/react";
+import { usePlugin, useCapability } from "@embedpdf/core/react";
 import { ThumbnailPlugin } from "@embedpdf/plugin-thumbnail";
-var useThumbnailPlugin = () => usePlugin(ThumbnailPlugin.id);
-var useThumbnailCapability = () => useCapability(ThumbnailPlugin.id);
-
-// src/react/components/thumbnails-pane.tsx
-import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+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,
@@ -16,18 +14,18 @@ function ThumbnailsPane({
   const { provides: thumbs } = useThumbnailCapability();
   const viewportRef = useRef(null);
   const [window2, setWindow] = useState(null);
-  useEffect(() => thumbs?.onWindow(setWindow), [thumbs]);
+  useEffect(() => thumbs == null ? void 0 : thumbs.onWindow(setWindow), [thumbs]);
   useEffect(() => {
     const vp = viewportRef.current;
     if (!vp) return;
-    const onScroll = () => thumbs?.setViewport(vp.scrollTop, vp.clientHeight);
+    const onScroll = () => thumbs == null ? void 0 : thumbs.setViewport(vp.scrollTop, vp.clientHeight);
     vp.addEventListener("scroll", onScroll);
     return () => vp.removeEventListener("scroll", onScroll);
   }, [thumbs]);
   useEffect(() => {
     const vp = viewportRef.current;
     if (!vp || !thumbs) return;
-    if (window2?.items.length === 0) {
+    if ((window2 == null ? void 0 : window2.items.length) === 0) {
       thumbs.setViewport(vp.scrollTop, vp.clientHeight);
     }
   }, [window2, thumbs]);
@@ -47,20 +45,15 @@ function ThumbnailsPane({
       });
     }
   }, [selectedPage, window2, scrollOptions]);
-  return /* @__PURE__ */ jsx("div", { ref: viewportRef, style: { overflowY: "auto", position: "relative", ...style }, ...props, children: /* @__PURE__ */ jsx("div", { style: { height: window2?.totalHeight ?? 0, position: "relative" }, children: window2?.items.map((m) => props.children(m)) }) });
+  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)) }) });
 }
-
-// src/react/components/thumbnail-img.tsx
-import { useEffect as useEffect2, useState as useState2, useRef as useRef2 } from "react";
-import { ignore, PdfErrorCode } from "@embedpdf/models";
-import { jsx as jsx2 } from "react/jsx-runtime";
 function ThumbImg({ meta, style, ...props }) {
   const { provides: thumbs } = useThumbnailCapability();
-  const [url, setUrl] = useState2();
-  const urlRef = useRef2(null);
-  useEffect2(() => {
-    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);
-    task?.wait((blob) => {
+  const [url, setUrl] = useState();
+  const urlRef = useRef(null);
+  useEffect(() => {
+    const task = thumbs == null ? void 0 : thumbs.renderThumb(meta.pageIndex, window.devicePixelRatio);
+    task == null ? void 0 : task.wait((blob) => {
       const objectUrl = URL.createObjectURL(blob);
       urlRef.current = objectUrl;
       setUrl(objectUrl);
@@ -70,7 +63,7 @@ function ThumbImg({ meta, style, ...props }) {
         URL.revokeObjectURL(urlRef.current);
         urlRef.current = null;
       } else {
-        task?.abort({
+        task == null ? void 0 : task.abort({
           code: PdfErrorCode.Cancelled,
           message: "canceled render task"
         });
@@ -83,7 +76,7 @@ function ThumbImg({ meta, style, ...props }) {
       urlRef.current = null;
     }
   };
-  return url ? /* @__PURE__ */ jsx2("img", { src: url, onLoad: handleImageLoad, style, ...props }) : null;
+  return url ? /* @__PURE__ */ jsx("img", { src: url, onLoad: handleImageLoad, style, ...props }) : null;
 }
 export {
   ThumbImg,
@@ -91,4 +84,4 @@ export {
   useThumbnailCapability,
   useThumbnailPlugin
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/hooks/use-thumbnail.ts","../../src/react/components/thumbnails-pane.tsx","../../src/react/components/thumbnail-img.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/react';\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 } from 'react';\nimport { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {\n  style?: React.CSSProperties;\n  children: (m: ThumbMeta) => React.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 } from 'react';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability } from '../hooks';\n\ntype ThumbnailImgProps = Omit<React.HTMLAttributes<HTMLImageElement>, 'style'> & {\n  style?: React.CSSProperties;\n  meta: ThumbMeta;\n};\n\nexport function ThumbImg({ meta, style, ...props }: ThumbnailImgProps) {\n  const { provides: thumbs } = useThumbnailCapability();\n  const [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\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  }, [meta.pageIndex]);\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"],"mappings":"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","names":["window","useEffect","useState","useRef","jsx","useState","useRef","useEffect"]}
+{"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 } from '@framework';\nimport { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useThumbnailCapability } 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 [url, setUrl] = useState<string>();\n  const urlRef = useRef<string | null>(null);\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  }, [meta.pageIndex]);\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/index.d.ts

@@ -0,0 +1,2 @@
+export * from './thumbnails-pane';
+export * from './thumbnail-img';

package/dist/shared-preact/components/thumbnail-img.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, CSSProperties } from '../../preact/adapter.ts';
+import { ThumbMeta } from '../../lib/index.ts';
+type ThumbnailImgProps = Omit<HTMLAttributes<HTMLImageElement>, 'style'> & {
+    style?: CSSProperties;
+    meta: ThumbMeta;
+};
+export declare function ThumbImg({ meta, style, ...props }: ThumbnailImgProps): import("preact").JSX.Element | null;
+export {};

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

@@ -0,0 +1,10 @@
+import { HTMLAttributes, CSSProperties, ReactNode } from '../../preact/adapter.ts';
+import { ThumbMeta } from '../../lib/index.ts';
+type ThumbnailsProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'> & {
+    style?: CSSProperties;
+    children: (m: ThumbMeta) => ReactNode;
+    selectedPage?: number;
+    scrollOptions?: ScrollIntoViewOptions;
+};
+export declare function ThumbnailsPane({ style, selectedPage, scrollOptions, ...props }: ThumbnailsProps): import("preact").JSX.Element;
+export {};

package/dist/shared-preact/hooks/index.d.ts

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