@embedpdf/plugin-scroll 1.3.16 → 1.4.0

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

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

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

@@ -0,0 +1,14 @@
+import { ReactNode, HTMLAttributes } from '../../react/adapter.ts';
+import { PageLayout } from '../../index.ts';
+import { PdfDocumentObject, Rotation } from '@embedpdf/models';
+export interface RenderPageProps extends PageLayout {
+    rotation: Rotation;
+    scale: number;
+    document: PdfDocumentObject | null;
+}
+type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
+    renderPage: (props: RenderPageProps) => ReactNode;
+    overlayElements?: ReactNode[];
+};
+export declare function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

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

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

@@ -0,0 +1,31 @@
+import { ScrollCapability, ScrollPlugin } from '../../index.ts';
+export declare const useScrollPlugin: () => {
+    plugin: ScrollPlugin | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+export declare const useScrollCapability: () => {
+    provides: Readonly<ScrollCapability> | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+interface UseScrollReturn {
+    provides: ScrollCapability | null;
+    state: {
+        currentPage: number;
+        totalPages: number;
+    };
+    readonly currentPage: number;
+    readonly totalPages: number;
+    readonly scrollToPage: ScrollCapability['scrollToPage'] | undefined;
+    readonly scrollToNextPage: ScrollCapability['scrollToNextPage'] | undefined;
+    readonly scrollToPreviousPage: ScrollCapability['scrollToPreviousPage'] | undefined;
+    readonly getMetrics: ScrollCapability['getMetrics'] | undefined;
+    readonly onPageChange: ScrollCapability['onPageChange'] | undefined;
+    readonly onScroll: ScrollCapability['onScroll'] | undefined;
+    readonly onLayoutChange: ScrollCapability['onLayoutChange'] | undefined;
+    readonly getCurrentPage: ScrollCapability['getCurrentPage'] | undefined;
+    readonly getTotalPages: ScrollCapability['getTotalPages'] | undefined;
+}
+export declare const useScroll: () => UseScrollReturn;
+export {};

package/dist/shared/index.d.ts

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

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'svelte/elements';
+import { PageLayout } from '../../lib/index.ts';
+import { PdfDocumentObject, Rotation } from '@embedpdf/models';
+import { Snippet } from 'svelte';
+export interface RenderPageProps extends PageLayout {
+    rotation: Rotation;
+    scale: number;
+    document: PdfDocumentObject | null;
+}
+type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
+    RenderPageSnippet: Snippet<RenderPageProps>;
+    overlayElements?: Snippet[];
+};
+declare const Scroller: import('svelte', { with: { "resolution-mode": "import" } }).Component<ScrollerProps, {}, "">;
+type Scroller = ReturnType<typeof Scroller>;
+export default Scroller;

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { ScrollCapability, ScrollPlugin } from '../../lib/index.ts';
+export declare const useScrollPlugin: () => {
+    plugin: ScrollPlugin | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+export declare const useScrollCapability: () => {
+    provides: Readonly<ScrollCapability> | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+interface UseScrollReturn {
+    provides: ScrollCapability | null;
+    state: {
+        currentPage: number;
+        totalPages: number;
+    };
+}
+export declare const useScroll: () => UseScrollReturn;
+export {};

package/dist/svelte/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("svelte/internal/disclose-version");const e=require("svelte/internal/client"),t=require("@embedpdf/plugin-scroll"),r=require("@embedpdf/core/svelte");function l(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}const i=l(e),a=()=>r.usePlugin(t.ScrollPlugin.id),o=()=>r.useCapability(t.ScrollPlugin.id);var n=i.from_html("<div><!></div>"),g=i.from_html("<div></div>"),s=i.from_html("<div><div></div> <div></div> <div></div> <!></div>");exports.Scroller=function(e,l){i.push(l,!0);const o=i.derived(a),d=i.derived((()=>i.get(o).plugin)),p=i.derived(r.useRegistry),c=i.derived((()=>i.get(p).registry));let u=i.derived(r.useCoreState),v=i.derived((()=>i.get(u).coreState)),f=i.derived((()=>{var e;return(null==(e=i.get(d))?void 0:e.getScrollerLayout())??null})),y=i.rest_props(l,["$$slots","$$events","$$legacy","RenderPageSnippet","overlayElements"]);i.user_effect((()=>{if(i.get(d))return i.get(d).onScrollerData((e=>i.set(f,e)))})),i.user_effect((()=>{i.get(d)&&i.get(d).setLayoutReady()}));var S=i.comment(),h=i.first_child(S),m=e=>{var r=s();i.attribute_effect(r,(e=>({...y,[i.STYLE]:e})),[()=>({width:`${i.get(f).totalWidth}px`,height:`${i.get(f).totalHeight}px`,position:"relative","box-sizing":"border-box",margin:"0 auto",display:i.get(f).strategy===t.ScrollStrategy.Horizontal?"flex":null,"flex-direction":i.get(f).strategy===t.ScrollStrategy.Horizontal?"row":null})]);var a=i.child(r);let o;var d=i.sibling(a,2);let p;i.each(d,21,(()=>i.get(f).items),(e=>e.pageNumbers[0]),((e,t)=>{var r=g();let a;i.each(r,21,(()=>i.get(t).pageLayouts),(e=>e.pageNumber),((e,t)=>{var r=n();let a;var o=i.child(r);{let e=i.derived((()=>({...i.get(t),rotation:i.get(v).rotation,scale:i.get(v).scale,document:i.get(v).document})));i.snippet(o,(()=>l.RenderPageSnippet??i.noop),(()=>i.get(e)))}i.reset(r),i.template_effect((e=>a=i.set_style(r,"",a,e)),[()=>({width:`${i.get(t).rotatedWidth}px`,height:`${i.get(t).rotatedHeight}px`})]),i.append(e,r)})),i.reset(r),i.template_effect((e=>a=i.set_style(r,"",a,e)),[()=>({display:"flex","justify-content":"center",gap:`${i.get(f).pageGap}px`})]),i.append(e,r)})),i.reset(d);var c=i.sibling(d,2);let u;var S=i.sibling(c,2),h=e=>{var t=i.comment(),r=i.first_child(t);i.each(r,17,(()=>l.overlayElements),i.index,((e,t)=>{var r=i.comment(),l=i.first_child(r);i.snippet(l,(()=>i.get(t)??i.noop)),i.append(e,r)})),i.append(e,t)};i.if(S,(e=>{l.overlayElements&&l.overlayElements.length>0&&e(h)})),i.reset(r),i.template_effect(((e,t,r)=>{o=i.set_style(a,"",o,e),p=i.set_style(d,"",p,t),u=i.set_style(c,"",u,r)}),[()=>({width:i.get(f).strategy===t.ScrollStrategy.Horizontal?`${i.get(f).startSpacing}px`:"100%",height:i.get(f).strategy===t.ScrollStrategy.Horizontal?"100%":`${i.get(f).startSpacing}px`,"flex-shrink":"0"}),()=>({gap:`${i.get(f).pageGap}px`,display:"flex","align-items":"center",position:"relative","box-sizing":"border-box","flex-direction":i.get(f).strategy===t.ScrollStrategy.Horizontal?"row":"column","min-width":i.get(f).strategy===t.ScrollStrategy.Horizontal?"100%":"fit-content"}),()=>({width:i.get(f).strategy===t.ScrollStrategy.Horizontal?`${i.get(f).endSpacing}px`:"100%",height:i.get(f).strategy===t.ScrollStrategy.Horizontal?"100%":`${i.get(f).endSpacing}px`,"flex-shrink":"0"})]),i.append(e,r)};i.if(h,(e=>{i.get(f)&&i.get(c)&&i.get(v)&&e(m)})),i.append(e,S),i.pop()},exports.useScroll=()=>{const e=i.derived(o),t=i.derived((()=>i.get(e).provides)),r=i.proxy({currentPage:1,totalPages:1});return i.user_effect((()=>{if(i.get(t))return i.get(t).onPageChange((({pageNumber:e,totalPages:t})=>{r.currentPage=e,r.totalPages=t}))})),{get provides(){return i.get(t)},get state(){return r}}},exports.useScrollCapability=o,exports.useScrollPlugin=a,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/svelte/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-scroll.svelte.ts","../../src/svelte/components/Scroller.svelte"],"sourcesContent":["import { ScrollCapability, ScrollPlugin } from '@embedpdf/plugin-scroll';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n  provides: ScrollCapability | null;\n  state: {\n    currentPage: number;\n    totalPages: number;\n  };\n}\n\ninterface SimpleScrollState {\n  currentPage: number;\n  totalPages: number;\n}\n\nexport const useScroll = (): UseScrollReturn => {\n  const { provides } = $derived(useScrollCapability());\n  const state = $state<SimpleScrollState>({ currentPage: 1, totalPages: 1 });\n\n  $effect(() => {\n    if (!provides) return;\n    return provides.onPageChange(({ pageNumber, totalPages }) => {\n      state.currentPage = pageNumber;\n      state.totalPages = totalPages;\n    });\n  });\n\n  return {\n    get provides() {\n      return provides;\n    },\n    get state() {\n      return state;\n    },\n  };\n};\n","<script lang=\"ts\">\n  import { useScrollPlugin } from '../hooks';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { type PageLayout, type ScrollerLayout, ScrollStrategy } from '@embedpdf/plugin-scroll';\n  import type { PdfDocumentObject, Rotation } from '@embedpdf/models';\n  import { useRegistry, useCoreState } from '@embedpdf/core/svelte';\n  import { type Snippet } from 'svelte';\n\n  export interface RenderPageProps extends PageLayout {\n    rotation: Rotation;\n    scale: number;\n    document: PdfDocumentObject | null;\n  }\n\n  type ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n    RenderPageSnippet: Snippet<RenderPageProps>;\n    overlayElements?: Snippet[];\n  };\n\n  const { plugin: scrollPlugin } = $derived(useScrollPlugin());\n  const { registry } = $derived(useRegistry());\n  let { coreState } = $derived(useCoreState());\n  let scrollerLayout = $derived<ScrollerLayout | null>(scrollPlugin?.getScrollerLayout() ?? null);\n\n  let { RenderPageSnippet, overlayElements, ...restProps }: ScrollerProps = $props();\n\n\n  $effect(() => {\n    if (!scrollPlugin) return;\n    return scrollPlugin.onScrollerData((layout) => (scrollerLayout = layout));\n  });\n\n  $effect(() => {\n    if (!scrollPlugin) return;\n    scrollPlugin.setLayoutReady();\n  });\n</script>\n\n{#if scrollerLayout && registry && coreState}\n  <div\n    {...restProps}\n    style:width={`${scrollerLayout.totalWidth}px`}\n    style:height={`${scrollerLayout.totalHeight}px`}\n    style:position=\"relative\"\n    style:box-sizing=\"border-box\"\n    style:margin=\"0 auto\"\n    style:display={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'flex' : null}\n    style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'row' : null}\n  >\n    <div\n      style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? `${scrollerLayout.startSpacing}px`\n        : '100%'}\n      style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : `${scrollerLayout.startSpacing}px`}\n      style:flex-shrink=\"0\"\n    ></div>\n    <div\n      style:gap={`${scrollerLayout.pageGap}px`}\n      style:display=\"flex\"\n      style:align-items=\"center\"\n      style:position=\"relative\"\n      style:box-sizing=\"border-box\"\n      style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? 'row'\n        : 'column'}\n      style:min-width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : 'fit-content'}\n    >\n      {#each scrollerLayout.items as item (item.pageNumbers[0])}\n        <div\n          style:display=\"flex\"\n          style:justify-content=\"center\"\n          style:gap={`${scrollerLayout.pageGap}px`}\n        >\n          {#each item.pageLayouts as layout (layout.pageNumber)}\n            <div\n              style:width={`${layout.rotatedWidth}px`}\n              style:height={`${layout.rotatedHeight}px`}\n            >\n              {@render RenderPageSnippet?.({\n                ...layout,\n                rotation: coreState.rotation,\n                scale: coreState.scale,\n                document: coreState.document,\n              })}\n            </div>\n          {/each}\n        </div>\n      {/each}\n    </div>\n    <div\n      style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? `${scrollerLayout.endSpacing}px`\n        : '100%'}\n      style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : `${scrollerLayout.endSpacing}px`}\n      style:flex-shrink=\"0\"\n    ></div>\n    {#if overlayElements && overlayElements.length > 0}\n      {#each overlayElements as OverLay}\n        {@render OverLay?.()}\n      {/each}\n    {/if}\n  </div>\n{/if}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","scrollPlugin","plugin","useRegistry","registry","useCoreState","coreState","scrollerLayout","$","derived","get","getScrollerLayout","restProps","rest_props","$$props","user_effect","onScrollerData","layout","set","$__namespace","setLayoutReady","STYLE","$0","width","totalWidth","height","totalHeight","strategy","ScrollStrategy","Horizontal","items","item","pageNumbers","$$anchor","pageLayouts","pageNumber","rotation","scale","document","rotatedWidth","rotatedHeight","gap","pageGap","OverLay","noop","overlayElements","length","consequent","startSpacing","endSpacing","consequent_1","provides","state","currentPage","totalPages","onPageChange"],"mappings":"sgBAGaA,EAAwB,IAAAC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAA4B,IAAAC,gBAA4BH,EAAAA,aAAaC,uMCetCH,GAA1BM,0BAARC,qBACsBC,eAAtBC,0BAAAA,2BACqBC,gBAAvBC,0BAAAA,YACFC,EAAiDC,EAAAC,SAAA,WAAAD,OAAAA,OAAAA,EAAAA,EAAAE,IAAAT,SAAAO,EAAAA,EAAcG,sBAAuB,IAAA,IAE7CC,EAASJ,EAAAK,WAAAC,EAAA,yEAGtDN,EAAAO,aAAc,cACPd,GACEO,OAAAA,EAAAE,IAAAT,GAAae,gBAAgBC,GAAYT,EAAAU,IAAAX,EAAiBU,IAAM,IAGzET,EAAAO,aAAc,WACPd,IACLkB,EAAAT,IAAAT,GAAamB,gBAAc,uFAMvBR,EAAS,CAAAJ,EAAAa,OAAAC,KAAA,OACGC,MAAA,GAAAf,EAAAE,IAAAH,GAAeiB,eACdC,OAAA,GAAAjB,EAAAE,IAAAH,GAAemB,4FAIjBnB,GAAeoB,WAAaC,EAAcA,eAACC,WAAa,OAAS,4BAC1DtB,GAAeoB,WAAaC,EAAcA,eAACC,WAAa,MAAQ,kFAwB7EtB,GAAeuB,QAASC,GAAMA,EAAKC,YAAY,KAAC,CAAAC,EAAxBF,4CAMpBA,GAAKG,cAAejB,GAAQA,EAAOkB,aAAU,CAAAF,EAAzBhB,uEAMlBA,GACHmB,SAAQ5B,EAAAE,IAAEJ,GAAU8B,SACpBC,MAAK7B,EAAAE,IAAEJ,GAAU+B,MACjBC,SAAQ9B,EAAAE,IAAEJ,GAAUgC,4IAPNf,MAAA,GAAAf,EAAAE,IAAAO,GAAOsB,iBACNd,OAAA,GAAAjB,EAAAE,IAAAO,GAAOuB,kJALdC,IAAA,GAAAjC,EAAAE,IAAAH,GAAemC,uLA4BPC,iEACfA,IAAOnC,EAAAoC,mDAFoB9B,EAAA+B,iBAAA/B,EAAA+B,gBAAAC,OAAS,KAACC,EAAA,yIApDnCxC,GAAeoB,WAAaC,EAAAA,eAAeC,WAAS,GAAArB,EAAAE,IAC1DH,GAAeyC,iBAClB,oBACUzC,GAAeoB,WAAaC,EAAAA,eAAeC,WACrD,OAAK,GAAArB,EAAAE,IACFH,GAAeyC,2CAIRP,IAAA,GAAAjC,EAAAE,IAAAH,GAAemC,uHAKPnC,GAAeoB,WAAaC,EAAcA,eAACC,WAC7D,MACA,2BACatB,GAAeoB,WAAaC,EAAcA,eAACC,WACxD,OACA,kCAyBStB,GAAeoB,WAAaC,EAAAA,eAAeC,WAAS,GAAArB,EAAAE,IAC1DH,GAAe0C,eAClB,oBACU1C,GAAeoB,WAAaC,EAAAA,eAAeC,WACrD,OAAK,GAAArB,EAAAE,IACFH,GAAe0C,sEA7DvB1C,IAAcC,EAAAE,IAAIN,IAAQI,EAAAE,IAAIJ,MAAS4C,EAAA,yBAF5C,2CDfgCnD,GAAtBoD,0BAAAA,WACFC,WAAoCC,YAAa,EAAGC,WAAY,WAEtE9C,EAAAO,2BACOoC,GACE3C,OAAAA,EAAAE,IAAAyC,GAASI,cAAa,EAAGpB,aAAYmB,iBAC1CF,EAAMC,YAAclB,EACpBiB,EAAME,WAAaA,CAAA,GACpB,KAIG,YAAAH,gBACKA,EACT,EACI,SAAAC,GACK,OAAAA"}

package/dist/svelte/index.d.ts

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

package/dist/svelte/index.js

@@ -0,0 +1,173 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { ScrollPlugin, ScrollStrategy } from "@embedpdf/plugin-scroll";
+export * from "@embedpdf/plugin-scroll";
+import { usePlugin, useCapability, useRegistry, useCoreState } from "@embedpdf/core/svelte";
+const useScrollPlugin = () => usePlugin(ScrollPlugin.id);
+const useScrollCapability = () => useCapability(ScrollPlugin.id);
+const useScroll = () => {
+  const $$d = $.derived(useScrollCapability), provides = $.derived(() => $.get($$d).provides);
+  const state = $.proxy({ currentPage: 1, totalPages: 1 });
+  $.user_effect(() => {
+    if (!$.get(provides)) return;
+    return $.get(provides).onPageChange(({ pageNumber, totalPages }) => {
+      state.currentPage = pageNumber;
+      state.totalPages = totalPages;
+    });
+  });
+  return {
+    get provides() {
+      return $.get(provides);
+    },
+    get state() {
+      return state;
+    }
+  };
+};
+var root_3 = $.from_html(`<div><!></div>`);
+var root_2 = $.from_html(`<div></div>`);
+var root_1 = $.from_html(`<div><div></div> <div></div> <div></div> <!></div>`);
+function Scroller($$anchor, $$props) {
+  $.push($$props, true);
+  const $$d = $.derived(useScrollPlugin), scrollPlugin = $.derived(() => $.get($$d).plugin);
+  const $$d_1 = $.derived(useRegistry), registry = $.derived(() => $.get($$d_1).registry);
+  let $$d_2 = $.derived(useCoreState), coreState = $.derived(() => $.get($$d_2).coreState);
+  let scrollerLayout = $.derived(() => {
+    var _a;
+    return ((_a = $.get(scrollPlugin)) == null ? void 0 : _a.getScrollerLayout()) ?? null;
+  });
+  let restProps = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "RenderPageSnippet",
+    "overlayElements"
+  ]);
+  $.user_effect(() => {
+    if (!$.get(scrollPlugin)) return;
+    return $.get(scrollPlugin).onScrollerData((layout) => $.set(scrollerLayout, layout));
+  });
+  $.user_effect(() => {
+    if (!$.get(scrollPlugin)) return;
+    $.get(scrollPlugin).setLayoutReady();
+  });
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var div = root_1();
+      $.attribute_effect(div, ($0) => ({ ...restProps, [$.STYLE]: $0 }), [
+        () => ({
+          width: `${$.get(scrollerLayout).totalWidth}px`,
+          height: `${$.get(scrollerLayout).totalHeight}px`,
+          position: "relative",
+          "box-sizing": "border-box",
+          margin: "0 auto",
+          display: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "flex" : null,
+          "flex-direction": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "row" : null
+        })
+      ]);
+      var div_1 = $.child(div);
+      let styles;
+      var div_2 = $.sibling(div_1, 2);
+      let styles_1;
+      $.each(div_2, 21, () => $.get(scrollerLayout).items, (item) => item.pageNumbers[0], ($$anchor3, item) => {
+        var div_3 = root_2();
+        let styles_2;
+        $.each(div_3, 21, () => $.get(item).pageLayouts, (layout) => layout.pageNumber, ($$anchor4, layout) => {
+          var div_4 = root_3();
+          let styles_3;
+          var node_1 = $.child(div_4);
+          {
+            let $0 = $.derived(() => ({
+              ...$.get(layout),
+              rotation: $.get(coreState).rotation,
+              scale: $.get(coreState).scale,
+              document: $.get(coreState).document
+            }));
+            $.snippet(node_1, () => $$props.RenderPageSnippet ?? $.noop, () => $.get($0));
+          }
+          $.reset(div_4);
+          $.template_effect(($0) => styles_3 = $.set_style(div_4, "", styles_3, $0), [
+            () => ({
+              width: `${$.get(layout).rotatedWidth}px`,
+              height: `${$.get(layout).rotatedHeight}px`
+            })
+          ]);
+          $.append($$anchor4, div_4);
+        });
+        $.reset(div_3);
+        $.template_effect(($0) => styles_2 = $.set_style(div_3, "", styles_2, $0), [
+          () => ({
+            display: "flex",
+            "justify-content": "center",
+            gap: `${$.get(scrollerLayout).pageGap}px`
+          })
+        ]);
+        $.append($$anchor3, div_3);
+      });
+      $.reset(div_2);
+      var div_5 = $.sibling(div_2, 2);
+      let styles_4;
+      var node_2 = $.sibling(div_5, 2);
+      {
+        var consequent = ($$anchor3) => {
+          var fragment_1 = $.comment();
+          var node_3 = $.first_child(fragment_1);
+          $.each(node_3, 17, () => $$props.overlayElements, $.index, ($$anchor4, OverLay) => {
+            var fragment_2 = $.comment();
+            var node_4 = $.first_child(fragment_2);
+            $.snippet(node_4, () => $.get(OverLay) ?? $.noop);
+            $.append($$anchor4, fragment_2);
+          });
+          $.append($$anchor3, fragment_1);
+        };
+        $.if(node_2, ($$render) => {
+          if ($$props.overlayElements && $$props.overlayElements.length > 0) $$render(consequent);
+        });
+      }
+      $.reset(div);
+      $.template_effect(
+        ($0, $1, $2) => {
+          styles = $.set_style(div_1, "", styles, $0);
+          styles_1 = $.set_style(div_2, "", styles_1, $1);
+          styles_4 = $.set_style(div_5, "", styles_4, $2);
+        },
+        [
+          () => ({
+            width: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? `${$.get(scrollerLayout).startSpacing}px` : "100%",
+            height: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : `${$.get(scrollerLayout).startSpacing}px`,
+            "flex-shrink": "0"
+          }),
+          () => ({
+            gap: `${$.get(scrollerLayout).pageGap}px`,
+            display: "flex",
+            "align-items": "center",
+            position: "relative",
+            "box-sizing": "border-box",
+            "flex-direction": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "row" : "column",
+            "min-width": $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : "fit-content"
+          }),
+          () => ({
+            width: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? `${$.get(scrollerLayout).endSpacing}px` : "100%",
+            height: $.get(scrollerLayout).strategy === ScrollStrategy.Horizontal ? "100%" : `${$.get(scrollerLayout).endSpacing}px`,
+            "flex-shrink": "0"
+          })
+        ]
+      );
+      $.append($$anchor2, div);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(scrollerLayout) && $.get(registry) && $.get(coreState)) $$render(consequent_1);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+export {
+  Scroller,
+  useScroll,
+  useScrollCapability,
+  useScrollPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/svelte/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-scroll.svelte.ts","../../src/svelte/components/Scroller.svelte"],"sourcesContent":["import { ScrollCapability, ScrollPlugin } from '@embedpdf/plugin-scroll';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useScrollPlugin = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseScrollReturn {\n  provides: ScrollCapability | null;\n  state: {\n    currentPage: number;\n    totalPages: number;\n  };\n}\n\ninterface SimpleScrollState {\n  currentPage: number;\n  totalPages: number;\n}\n\nexport const useScroll = (): UseScrollReturn => {\n  const { provides } = $derived(useScrollCapability());\n  const state = $state<SimpleScrollState>({ currentPage: 1, totalPages: 1 });\n\n  $effect(() => {\n    if (!provides) return;\n    return provides.onPageChange(({ pageNumber, totalPages }) => {\n      state.currentPage = pageNumber;\n      state.totalPages = totalPages;\n    });\n  });\n\n  return {\n    get provides() {\n      return provides;\n    },\n    get state() {\n      return state;\n    },\n  };\n};\n","<script lang=\"ts\">\n  import { useScrollPlugin } from '../hooks';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { type PageLayout, type ScrollerLayout, ScrollStrategy } from '@embedpdf/plugin-scroll';\n  import type { PdfDocumentObject, Rotation } from '@embedpdf/models';\n  import { useRegistry, useCoreState } from '@embedpdf/core/svelte';\n  import { type Snippet } from 'svelte';\n\n  export interface RenderPageProps extends PageLayout {\n    rotation: Rotation;\n    scale: number;\n    document: PdfDocumentObject | null;\n  }\n\n  type ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n    RenderPageSnippet: Snippet<RenderPageProps>;\n    overlayElements?: Snippet[];\n  };\n\n  const { plugin: scrollPlugin } = $derived(useScrollPlugin());\n  const { registry } = $derived(useRegistry());\n  let { coreState } = $derived(useCoreState());\n  let scrollerLayout = $derived<ScrollerLayout | null>(scrollPlugin?.getScrollerLayout() ?? null);\n\n  let { RenderPageSnippet, overlayElements, ...restProps }: ScrollerProps = $props();\n\n\n  $effect(() => {\n    if (!scrollPlugin) return;\n    return scrollPlugin.onScrollerData((layout) => (scrollerLayout = layout));\n  });\n\n  $effect(() => {\n    if (!scrollPlugin) return;\n    scrollPlugin.setLayoutReady();\n  });\n</script>\n\n{#if scrollerLayout && registry && coreState}\n  <div\n    {...restProps}\n    style:width={`${scrollerLayout.totalWidth}px`}\n    style:height={`${scrollerLayout.totalHeight}px`}\n    style:position=\"relative\"\n    style:box-sizing=\"border-box\"\n    style:margin=\"0 auto\"\n    style:display={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'flex' : null}\n    style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal ? 'row' : null}\n  >\n    <div\n      style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? `${scrollerLayout.startSpacing}px`\n        : '100%'}\n      style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : `${scrollerLayout.startSpacing}px`}\n      style:flex-shrink=\"0\"\n    ></div>\n    <div\n      style:gap={`${scrollerLayout.pageGap}px`}\n      style:display=\"flex\"\n      style:align-items=\"center\"\n      style:position=\"relative\"\n      style:box-sizing=\"border-box\"\n      style:flex-direction={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? 'row'\n        : 'column'}\n      style:min-width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : 'fit-content'}\n    >\n      {#each scrollerLayout.items as item (item.pageNumbers[0])}\n        <div\n          style:display=\"flex\"\n          style:justify-content=\"center\"\n          style:gap={`${scrollerLayout.pageGap}px`}\n        >\n          {#each item.pageLayouts as layout (layout.pageNumber)}\n            <div\n              style:width={`${layout.rotatedWidth}px`}\n              style:height={`${layout.rotatedHeight}px`}\n            >\n              {@render RenderPageSnippet?.({\n                ...layout,\n                rotation: coreState.rotation,\n                scale: coreState.scale,\n                document: coreState.document,\n              })}\n            </div>\n          {/each}\n        </div>\n      {/each}\n    </div>\n    <div\n      style:width={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? `${scrollerLayout.endSpacing}px`\n        : '100%'}\n      style:height={scrollerLayout.strategy === ScrollStrategy.Horizontal\n        ? '100%'\n        : `${scrollerLayout.endSpacing}px`}\n      style:flex-shrink=\"0\"\n    ></div>\n    {#if overlayElements && overlayElements.length > 0}\n      {#each overlayElements as OverLay}\n        {@render OverLay?.()}\n      {/each}\n    {/if}\n  </div>\n{/if}\n"],"names":["$$anchor"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-scroll",
-  "version": "1.3.16",
+  "version": "1.4.0",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -26,25 +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",
+      "svelte": "./dist/svelte/index.js",
+      "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/build": "1.0.1",
-    "@embedpdf/plugin-viewport": "1.3.16",
-    "@embedpdf/core": "1.3.16"
+    "@embedpdf/build": "1.1.0",
+    "@embedpdf/core": "1.4.0",
+    "@embedpdf/plugin-viewport": "1.4.0"
   },
   "peerDependencies": {
     "preact": "^10.26.4",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "vue": ">=3.2.0",
-    "@embedpdf/core": "1.3.16",
-    "@embedpdf/plugin-viewport": "1.3.16"
+    "svelte": ">=5 <6",
+    "@embedpdf/core": "1.4.0",
+    "@embedpdf/plugin-viewport": "1.4.0"
   },
   "files": [
     "dist",
@@ -67,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"