@embedpdf/plugin-thumbnail 1.3.16 → 1.4.0

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { HTMLAttributes, CSSProperties, ReactNode } from '../../react/adapter.ts';
+import { ThumbMeta } from '../../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, scrollOptions, selectedPage, ...props }: ThumbnailsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,11 @@
+import { ThumbnailPlugin } from '../../index.ts';
+export declare const useThumbnailPlugin: () => {
+    plugin: ThumbnailPlugin | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+export declare const useThumbnailCapability: () => {
+    provides: Readonly<import('../../index.ts').ThumbnailCapability> | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};

package/dist/shared/index.d.ts

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

package/dist/svelte/components/ThumbImg.svelte.d.ts

@@ -0,0 +1,8 @@
+import { ThumbMeta } from '../../lib/index.ts';
+import { HTMLImgAttributes } from 'svelte/elements';
+interface Props extends HTMLImgAttributes {
+    meta: ThumbMeta;
+}
+declare const ThumbImg: import('svelte', { with: { "resolution-mode": "import" } }).Component<Props, {}, "">;
+type ThumbImg = ReturnType<typeof ThumbImg>;
+export default ThumbImg;

package/dist/svelte/components/ThumbnailsPane.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Snippet } from 'svelte';
+import { ThumbMeta } from '../../lib/index.ts';
+import { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children: Snippet<[ThumbMeta]>;
+}
+declare const ThumbnailsPane: import('svelte', { with: { "resolution-mode": "import" } }).Component<Props, {}, "">;
+type ThumbnailsPane = ReturnType<typeof ThumbnailsPane>;
+export default ThumbnailsPane;

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

@@ -0,0 +1,2 @@
+export { default as ThumbImg } from './ThumbImg.svelte';
+export { default as ThumbnailsPane } from './ThumbnailsPane.svelte';

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

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

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

@@ -0,0 +1,11 @@
+import { ThumbnailPlugin } from '../../lib/index.ts';
+export declare const useThumbnailPlugin: () => {
+    plugin: ThumbnailPlugin | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+export declare const useThumbnailCapability: () => {
+    provides: Readonly<import('../../lib/index.ts').ThumbnailCapability> | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};

package/dist/svelte/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("svelte/internal/client"),t=require("@embedpdf/core/svelte"),r=require("@embedpdf/plugin-thumbnail");require("svelte/internal/disclose-version");const n=require("@embedpdf/models");function o(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}const i=o(e),l=()=>t.usePlugin(r.ThumbnailPlugin.id),s=()=>t.useCapability(r.ThumbnailPlugin.id);var c=i.from_html("<img/>");var a=i.from_html("<div><div></div></div>");exports.ThumbImg=function(e,t){i.push(t,!0);const r=i.rest_props(t,["$$slots","$$events","$$legacy","meta"]),{provides:o}=s(),{plugin:a}=l();let u=i.state(void 0),d=null,p=i.state(0);i.user_effect((()=>{if(a)return a.onRefreshPages((e=>{e.includes(t.meta.pageIndex)&&i.set(p,i.get(p)+1)}))})),i.user_effect((()=>{const e=null==o?void 0:o.renderThumb(t.meta.pageIndex,window.devicePixelRatio);return null==e||e.wait((e=>{const t=URL.createObjectURL(e);d=t,i.set(u,t,!0)}),n.ignore),()=>{d?(URL.revokeObjectURL(d),d=null):null==e||e.abort({code:n.PdfErrorCode.Cancelled,message:"canceled render task"})}}));const f=()=>{d&&(URL.revokeObjectURL(d),d=null)};var g=i.comment(),v=i.first_child(g),b=e=>{var t=c();i.attribute_effect(t,(()=>({src:i.get(u),onload:f,...r,alt:"PDF thumbnail"}))),i.replay_events(t),i.append(e,t)};i.if(v,(e=>{i.get(u)&&e(b)})),i.append(e,g),i.pop()},exports.ThumbnailsPane=function(e,t){i.push(t,!0);const r=i.rest_props(t,["$$slots","$$events","$$legacy","children"]),{plugin:n}=l();let o,s=i.state(null);i.user_effect((()=>{if(n)return n.onWindow((e=>{i.set(s,e,!0)}))})),i.user_effect((()=>{const e=o;if(!e||!n)return;const t=()=>{n.updateWindow(e.scrollTop,e.clientHeight)};return e.addEventListener("scroll",t),()=>e.removeEventListener("scroll",t)})),i.user_effect((()=>{const e=o;if(!e||!n)return;const t=new ResizeObserver((()=>{n.updateWindow(e.scrollTop,e.clientHeight)}));return t.observe(e),()=>t.disconnect()})),i.user_effect((()=>{const e=o;e&&n&&i.get(s)&&n.updateWindow(e.scrollTop,e.clientHeight)})),i.user_effect((()=>{const e=o;if(e&&n&&i.get(s))return n.onScrollTo((({top:t,behavior:r})=>{e.scrollTo({top:t,behavior:r})}))}));const c=i.derived((()=>(null==n?void 0:n.cfg.paddingY)??0)),u=i.derived((()=>{var e;return(null==(e=i.get(s))?void 0:e.totalHeight)??0})),d=i.derived((()=>{var e;return(null==(e=i.get(s))?void 0:e.items)??[]}));var p=a();i.attribute_effect(p,(e=>({...r,[i.STYLE]:e})),[()=>({"overflow-y":"auto",position:"relative","padding-top":`${i.get(c)??""}px`,"padding-bottom":`${i.get(c)??""}px`,height:"100%"})]);var f=i.child(p);let g;i.each(f,21,(()=>i.get(d)),(e=>e.pageIndex),((e,r)=>{var n=i.comment(),o=i.first_child(n);i.snippet(o,(()=>t.children),(()=>i.get(r))),i.append(e,n)})),i.reset(f),i.reset(p),i.bind_this(p,(e=>o=e),(()=>o)),i.template_effect((e=>g=i.set_style(f,"",g,e)),[()=>({height:`${i.get(u)??""}px`,position:"relative"})]),i.append(e,p),i.pop()},exports.useThumbnailCapability=s,exports.useThumbnailPlugin=l,Object.keys(r).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})}));
+//# sourceMappingURL=index.cjs.map

package/dist/svelte/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-thumbnail.svelte.ts","../../src/svelte/components/ThumbImg.svelte","../../src/svelte/components/ThumbnailsPane.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","<script lang=\"ts\">\n  import type { ThumbMeta } from '@embedpdf/plugin-thumbnail';\n  import { ignore, PdfErrorCode } from '@embedpdf/models';\n  import { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n  import type { HTMLImgAttributes } from 'svelte/elements';\n\n  interface Props extends HTMLImgAttributes {\n    meta: ThumbMeta;\n  }\n\n  const { meta, ...imgProps }: Props = $props();\n\n  const { provides: thumbs } = useThumbnailCapability();\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n\n  let url = $state<string | undefined>(undefined);\n  let urlRef: string | null = null;\n  let refreshTick = $state(0);\n\n  // Listen for refresh events\n  $effect(() => {\n    if (!thumbnailPlugin) return;\n    return thumbnailPlugin.onRefreshPages((pages) => {\n      if (pages.includes(meta.pageIndex)) {\n        refreshTick = refreshTick + 1;\n      }\n    });\n  });\n\n  // Render thumbnail\n  $effect(() => {\n    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);\n    task?.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef = objectUrl;\n      url = objectUrl;\n    }, ignore);\n\n    return () => {\n      if (urlRef) {\n        URL.revokeObjectURL(urlRef);\n        urlRef = null;\n      } else {\n        task?.abort({\n          code: PdfErrorCode.Cancelled,\n          message: 'canceled render task',\n        });\n      }\n    };\n  });\n\n  const handleImageLoad = () => {\n    if (urlRef) {\n      URL.revokeObjectURL(urlRef);\n      urlRef = null;\n    }\n  };\n</script>\n\n{#if url}\n  <img src={url} onload={handleImageLoad} {...imgProps} alt=\"PDF thumbnail\" />\n{/if}\n","<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import type { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\n  import { useThumbnailPlugin } from '../hooks';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n    children: Snippet<[ThumbMeta]>;\n  }\n\n  const { children, ...divProps }: Props = $props();\n\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n\n  let viewportRef: HTMLDivElement | undefined;\n  let window = $state<WindowState | null>(null);\n\n  // 1) subscribe once to window updates\n  $effect(() => {\n    if (!thumbnailPlugin) return;\n    return thumbnailPlugin.onWindow((newWindow) => {\n      window = newWindow;\n    });\n  });\n\n  // 2) keep plugin in sync while the user scrolls\n  $effect(() => {\n    const vp = viewportRef;\n    if (!vp || !thumbnailPlugin) return;\n\n    const onScroll = () => {\n      thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n    };\n\n    vp.addEventListener('scroll', onScroll);\n    return () => vp.removeEventListener('scroll', onScroll);\n  });\n\n  // 2.5) keep plugin in sync when viewport resizes (e.g., menu opens/closes)\n  $effect(() => {\n    const vp = viewportRef;\n    if (!vp || !thumbnailPlugin) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n    });\n\n    resizeObserver.observe(vp);\n    return () => resizeObserver.disconnect();\n  });\n\n  // 3) kick-start after document change\n  $effect(() => {\n    const vp = viewportRef;\n    if (!vp || !thumbnailPlugin || !window) return;\n\n    // push initial metrics\n    thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n  });\n\n  // 4) let plugin drive scroll – only after window is set, and only once\n  $effect(() => {\n    const vp = viewportRef;\n    if (!vp || !thumbnailPlugin || !window) return;\n\n    return thumbnailPlugin.onScrollTo(({ top, behavior }) => {\n      vp.scrollTo({ top, behavior });\n    });\n  });\n\n  const paddingY = $derived(thumbnailPlugin?.cfg.paddingY ?? 0);\n  const totalHeight = $derived(window?.totalHeight ?? 0);\n  const items = $derived(window?.items ?? []);\n</script>\n\n<div\n  bind:this={viewportRef}\n  style:overflow-y=\"auto\"\n  style:position=\"relative\"\n  style:padding-top=\"{paddingY}px\"\n  style:padding-bottom=\"{paddingY}px\"\n  style:height=\"100%\"\n  {...divProps}\n>\n  <div style:height=\"{totalHeight}px\" style:position=\"relative\">\n    {#each items as meta (meta.pageIndex)}\n      {@render children(meta)}\n    {/each}\n  </div>\n</div>\n"],"names":["useThumbnailPlugin","usePlugin","ThumbnailPlugin","id","useThumbnailCapability","useCapability","imgProps","$","rest_props","$$props","provides","thumbs","plugin","thumbnailPlugin","url","urlRef","refreshTick","user_effect","onRefreshPages","pages","includes","meta","pageIndex","get","task","renderThumb","window","devicePixelRatio","wait","blob","objectUrl","URL","createObjectURL","$__namespace","set","ignore","revokeObjectURL","abort","code","PdfErrorCode","Cancelled","message","handleImageLoad","consequent","divProps","viewportRef","onWindow","newWindow","vp","onScroll","updateWindow","scrollTop","clientHeight","addEventListener","removeEventListener","resizeObserver","ResizeObserver","observe","disconnect","onScrollTo","top","behavior","scrollTo","paddingY","cfg","totalHeight","derived","items","STYLE","$0","each","div_1","bind_this","div","$$value"],"mappings":"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"}

package/dist/svelte/index.d.ts

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

package/dist/svelte/index.js

@@ -0,0 +1,163 @@
+import * as $ from "svelte/internal/client";
+import { usePlugin, useCapability } from "@embedpdf/core/svelte";
+import { ThumbnailPlugin } from "@embedpdf/plugin-thumbnail";
+export * from "@embedpdf/plugin-thumbnail";
+import "svelte/internal/disclose-version";
+import { ignore, PdfErrorCode } from "@embedpdf/models";
+const useThumbnailPlugin = () => usePlugin(ThumbnailPlugin.id);
+const useThumbnailCapability = () => useCapability(ThumbnailPlugin.id);
+var root_1 = $.from_html(`<img/>`);
+function ThumbImg($$anchor, $$props) {
+  $.push($$props, true);
+  const imgProps = $.rest_props($$props, ["$$slots", "$$events", "$$legacy", "meta"]);
+  const { provides: thumbs } = useThumbnailCapability();
+  const { plugin: thumbnailPlugin } = useThumbnailPlugin();
+  let url = $.state(void 0);
+  let urlRef = null;
+  let refreshTick = $.state(0);
+  $.user_effect(() => {
+    if (!thumbnailPlugin) return;
+    return thumbnailPlugin.onRefreshPages((pages) => {
+      if (pages.includes($$props.meta.pageIndex)) {
+        $.set(refreshTick, $.get(refreshTick) + 1);
+      }
+    });
+  });
+  $.user_effect(() => {
+    const task = thumbs == null ? void 0 : thumbs.renderThumb($$props.meta.pageIndex, window.devicePixelRatio);
+    task == null ? void 0 : task.wait(
+      (blob) => {
+        const objectUrl = URL.createObjectURL(blob);
+        urlRef = objectUrl;
+        $.set(url, objectUrl, true);
+      },
+      ignore
+    );
+    return () => {
+      if (urlRef) {
+        URL.revokeObjectURL(urlRef);
+        urlRef = null;
+      } else {
+        task == null ? void 0 : task.abort({
+          code: PdfErrorCode.Cancelled,
+          message: "canceled render task"
+        });
+      }
+    };
+  });
+  const handleImageLoad = () => {
+    if (urlRef) {
+      URL.revokeObjectURL(urlRef);
+      urlRef = null;
+    }
+  };
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      var img = root_1();
+      $.attribute_effect(img, () => ({
+        src: $.get(url),
+        onload: handleImageLoad,
+        ...imgProps,
+        alt: "PDF thumbnail"
+      }));
+      $.replay_events(img);
+      $.append($$anchor2, img);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(url)) $$render(consequent);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root = $.from_html(`<div><div></div></div>`);
+function ThumbnailsPane($$anchor, $$props) {
+  $.push($$props, true);
+  const divProps = $.rest_props($$props, ["$$slots", "$$events", "$$legacy", "children"]);
+  const { plugin: thumbnailPlugin } = useThumbnailPlugin();
+  let viewportRef;
+  let window2 = $.state(null);
+  $.user_effect(() => {
+    if (!thumbnailPlugin) return;
+    return thumbnailPlugin.onWindow((newWindow) => {
+      $.set(window2, newWindow, true);
+    });
+  });
+  $.user_effect(() => {
+    const vp = viewportRef;
+    if (!vp || !thumbnailPlugin) return;
+    const onScroll = () => {
+      thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);
+    };
+    vp.addEventListener("scroll", onScroll);
+    return () => vp.removeEventListener("scroll", onScroll);
+  });
+  $.user_effect(() => {
+    const vp = viewportRef;
+    if (!vp || !thumbnailPlugin) return;
+    const resizeObserver = new ResizeObserver(() => {
+      thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);
+    });
+    resizeObserver.observe(vp);
+    return () => resizeObserver.disconnect();
+  });
+  $.user_effect(() => {
+    const vp = viewportRef;
+    if (!vp || !thumbnailPlugin || !$.get(window2)) return;
+    thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);
+  });
+  $.user_effect(() => {
+    const vp = viewportRef;
+    if (!vp || !thumbnailPlugin || !$.get(window2)) return;
+    return thumbnailPlugin.onScrollTo(({ top, behavior }) => {
+      vp.scrollTo({ top, behavior });
+    });
+  });
+  const paddingY = $.derived(() => (thumbnailPlugin == null ? void 0 : thumbnailPlugin.cfg.paddingY) ?? 0);
+  const totalHeight = $.derived(() => {
+    var _a;
+    return ((_a = $.get(window2)) == null ? void 0 : _a.totalHeight) ?? 0;
+  });
+  const items = $.derived(() => {
+    var _a;
+    return ((_a = $.get(window2)) == null ? void 0 : _a.items) ?? [];
+  });
+  var div = root();
+  $.attribute_effect(div, ($0) => ({ ...divProps, [$.STYLE]: $0 }), [
+    () => ({
+      "overflow-y": "auto",
+      position: "relative",
+      "padding-top": `${$.get(paddingY) ?? ""}px`,
+      "padding-bottom": `${$.get(paddingY) ?? ""}px`,
+      height: "100%"
+    })
+  ]);
+  var div_1 = $.child(div);
+  let styles;
+  $.each(div_1, 21, () => $.get(items), (meta) => meta.pageIndex, ($$anchor2, meta) => {
+    var fragment = $.comment();
+    var node = $.first_child(fragment);
+    $.snippet(node, () => $$props.children, () => $.get(meta));
+    $.append($$anchor2, fragment);
+  });
+  $.reset(div_1);
+  $.reset(div);
+  $.bind_this(div, ($$value) => viewportRef = $$value, () => viewportRef);
+  $.template_effect(($0) => styles = $.set_style(div_1, "", styles, $0), [
+    () => ({
+      height: `${$.get(totalHeight) ?? ""}px`,
+      position: "relative"
+    })
+  ]);
+  $.append($$anchor, div);
+  $.pop();
+}
+export {
+  ThumbImg,
+  ThumbnailsPane,
+  useThumbnailCapability,
+  useThumbnailPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/svelte/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-thumbnail.svelte.ts","../../src/svelte/components/ThumbImg.svelte","../../src/svelte/components/ThumbnailsPane.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","<script lang=\"ts\">\n  import type { ThumbMeta } from '@embedpdf/plugin-thumbnail';\n  import { ignore, PdfErrorCode } from '@embedpdf/models';\n  import { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\n  import type { HTMLImgAttributes } from 'svelte/elements';\n\n  interface Props extends HTMLImgAttributes {\n    meta: ThumbMeta;\n  }\n\n  const { meta, ...imgProps }: Props = $props();\n\n  const { provides: thumbs } = useThumbnailCapability();\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n\n  let url = $state<string | undefined>(undefined);\n  let urlRef: string | null = null;\n  let refreshTick = $state(0);\n\n  // Listen for refresh events\n  $effect(() => {\n    if (!thumbnailPlugin) return;\n    return thumbnailPlugin.onRefreshPages((pages) => {\n      if (pages.includes(meta.pageIndex)) {\n        refreshTick = refreshTick + 1;\n      }\n    });\n  });\n\n  // Render thumbnail\n  $effect(() => {\n    const task = thumbs?.renderThumb(meta.pageIndex, window.devicePixelRatio);\n    task?.wait((blob) => {\n      const objectUrl = URL.createObjectURL(blob);\n      urlRef = objectUrl;\n      url = objectUrl;\n    }, ignore);\n\n    return () => {\n      if (urlRef) {\n        URL.revokeObjectURL(urlRef);\n        urlRef = null;\n      } else {\n        task?.abort({\n          code: PdfErrorCode.Cancelled,\n          message: 'canceled render task',\n        });\n      }\n    };\n  });\n\n  const handleImageLoad = () => {\n    if (urlRef) {\n      URL.revokeObjectURL(urlRef);\n      urlRef = null;\n    }\n  };\n</script>\n\n{#if url}\n  <img src={url} onload={handleImageLoad} {...imgProps} alt=\"PDF thumbnail\" />\n{/if}\n","<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import type { ThumbMeta, WindowState } from '@embedpdf/plugin-thumbnail';\n  import { useThumbnailPlugin } from '../hooks';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n    children: Snippet<[ThumbMeta]>;\n  }\n\n  const { children, ...divProps }: Props = $props();\n\n  const { plugin: thumbnailPlugin } = useThumbnailPlugin();\n\n  let viewportRef: HTMLDivElement | undefined;\n  let window = $state<WindowState | null>(null);\n\n  // 1) subscribe once to window updates\n  $effect(() => {\n    if (!thumbnailPlugin) return;\n    return thumbnailPlugin.onWindow((newWindow) => {\n      window = newWindow;\n    });\n  });\n\n  // 2) keep plugin in sync while the user scrolls\n  $effect(() => {\n    const vp = viewportRef;\n    if (!vp || !thumbnailPlugin) return;\n\n    const onScroll = () => {\n      thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n    };\n\n    vp.addEventListener('scroll', onScroll);\n    return () => vp.removeEventListener('scroll', onScroll);\n  });\n\n  // 2.5) keep plugin in sync when viewport resizes (e.g., menu opens/closes)\n  $effect(() => {\n    const vp = viewportRef;\n    if (!vp || !thumbnailPlugin) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n    });\n\n    resizeObserver.observe(vp);\n    return () => resizeObserver.disconnect();\n  });\n\n  // 3) kick-start after document change\n  $effect(() => {\n    const vp = viewportRef;\n    if (!vp || !thumbnailPlugin || !window) return;\n\n    // push initial metrics\n    thumbnailPlugin.updateWindow(vp.scrollTop, vp.clientHeight);\n  });\n\n  // 4) let plugin drive scroll – only after window is set, and only once\n  $effect(() => {\n    const vp = viewportRef;\n    if (!vp || !thumbnailPlugin || !window) return;\n\n    return thumbnailPlugin.onScrollTo(({ top, behavior }) => {\n      vp.scrollTo({ top, behavior });\n    });\n  });\n\n  const paddingY = $derived(thumbnailPlugin?.cfg.paddingY ?? 0);\n  const totalHeight = $derived(window?.totalHeight ?? 0);\n  const items = $derived(window?.items ?? []);\n</script>\n\n<div\n  bind:this={viewportRef}\n  style:overflow-y=\"auto\"\n  style:position=\"relative\"\n  style:padding-top=\"{paddingY}px\"\n  style:padding-bottom=\"{paddingY}px\"\n  style:height=\"100%\"\n  {...divProps}\n>\n  <div style:height=\"{totalHeight}px\" style:position=\"relative\">\n    {#each items as meta (meta.pageIndex)}\n      {@render children(meta)}\n    {/each}\n  </div>\n</div>\n"],"names":["window"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-thumbnail",
-  "version": "1.3.16",
+  "version": "1.4.0",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -26,26 +26,32 @@
       "types": "./dist/vue/index.d.ts",
       "import": "./dist/vue/index.js",
       "require": "./dist/vue/index.cjs"
+    },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "import": "./dist/svelte/index.js",
+      "require": "./dist/svelte/index.cjs"
     }
   },
   "dependencies": {
-    "@embedpdf/models": "1.3.16"
+    "@embedpdf/models": "1.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
-    "@embedpdf/core": "1.3.16",
-    "@embedpdf/plugin-render": "1.3.16",
-    "@embedpdf/plugin-scroll": "1.3.16",
-    "@embedpdf/build": "1.0.1"
+    "@embedpdf/plugin-render": "1.4.0",
+    "@embedpdf/core": "1.4.0",
+    "@embedpdf/build": "1.1.0",
+    "@embedpdf/plugin-scroll": "1.4.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "preact": "^10.26.4",
     "vue": ">=3.2.0",
-    "@embedpdf/core": "1.3.16",
-    "@embedpdf/plugin-render": "1.3.16"
+    "svelte": ">=5 <6",
+    "@embedpdf/core": "1.4.0",
+    "@embedpdf/plugin-render": "1.4.0"
   },
   "files": [
     "dist",
@@ -68,7 +74,8 @@
     "build:react": "vite build --mode react",
     "build:preact": "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\"",
+    "build:svelte": "vite build --mode svelte",
+    "build": "pnpm run clean && concurrently -c auto -n base,react,preact,vue,svelte \"vite build --mode base\" \"vite build --mode react\" \"vite build --mode preact\" \"vite build --mode vue\" \"vite build --mode svelte\"",
     "clean": "rimraf dist",
     "lint": "eslint src --color",
     "lint:fix": "eslint src --color --fix"