@embedpdf/plugin-scroll 1.0.0

package/dist/preact/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/preact/hooks/use-scroll.ts","../../src/preact/components/scroller.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/preact';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScroll = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n","/** @jsxImportSource preact */\nimport { JSX } from 'preact';\nimport { useEffect, useState } from 'preact/hooks';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/preact';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollCapability } from '../hooks';\n\ninterface RenderPageProps extends PageLayout {\n  rotation: Rotation;\n  scale: number;\n  document: PdfDocumentObject | null;\n}\n\ntype ScrollerProps = JSX.HTMLAttributes<HTMLDivElement> & {\n  renderPage: (props: RenderPageProps) => JSX.Element;\n  overlayElements?: JSX.Element[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n  const { provides: scrollProvides } = useScrollCapability();\n  const { registry } = useRegistry();\n  const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n    () => scrollProvides?.getScrollerLayout() ?? null,\n  );\n\n  useEffect(() => {\n    if (!scrollProvides) return;\n\n    return scrollProvides.onScrollerData(setScrollerLayout);\n  }, [scrollProvides]);\n\n  if (!scrollerLayout) return null;\n  if (!registry) return null;\n\n  const coreState = registry.getStore().getState();\n\n  return (\n    <div\n      {...props}\n      style={{\n        width: `${scrollerLayout.totalWidth}px`,\n        height: `${scrollerLayout.totalHeight}px`,\n        position: 'relative',\n        boxSizing: 'border-box',\n        margin: '0 auto',\n        ...(scrollerLayout.strategy === ScrollStrategy.Horizontal && {\n          display: 'flex',\n          flexDirection: 'row',\n        }),\n      }}\n    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\n          display: 'flex',\n          alignItems: 'center',\n          position: 'relative',\n          boxSizing: 'border-box',\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                flexDirection: 'row',\n                minHeight: '100%',\n              }\n            : {\n                flexDirection: 'column',\n                minWidth: 'fit-content',\n              }),\n        }}\n      >\n        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                  rotation: coreState.core.rotation,\n                  scale: coreState.core.scale,\n                  document: coreState.core.document,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      {overlayElements}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/react/index.cjs

@@ -0,0 +1,156 @@
+"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, {
+  Scroller: () => Scroller,
+  useScroll: () => useScroll,
+  useScrollCapability: () => useScrollCapability
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/hooks/use-scroll.ts
+var import_react = require("@embedpdf/core/react");
+var import_plugin_scroll = require("@embedpdf/plugin-scroll");
+var useScroll = () => (0, import_react.usePlugin)(import_plugin_scroll.ScrollPlugin.id);
+var useScrollCapability = () => (0, import_react.useCapability)(import_plugin_scroll.ScrollPlugin.id);
+
+// src/react/components/scroller.tsx
+var import_react2 = require("react");
+var import_plugin_scroll2 = require("@embedpdf/plugin-scroll");
+var import_react3 = require("@embedpdf/core/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Scroller({ renderPage, overlayElements, ...props }) {
+  const { provides: scrollProvides } = useScrollCapability();
+  const { registry } = (0, import_react3.useRegistry)();
+  const [scrollerLayout, setScrollerLayout] = (0, import_react2.useState)(
+    () => scrollProvides?.getScrollerLayout() ?? null
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!scrollProvides) return;
+    return scrollProvides.onScrollerData(setScrollerLayout);
+  }, [scrollProvides]);
+  if (!scrollerLayout) return null;
+  if (!registry) return null;
+  const coreState = registry.getStore().getState();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...props,
+      style: {
+        width: `${scrollerLayout.totalWidth}px`,
+        height: `${scrollerLayout.totalHeight}px`,
+        position: "relative",
+        boxSizing: "border-box",
+        margin: "0 auto",
+        ...scrollerLayout.strategy === import_plugin_scroll2.ScrollStrategy.Horizontal && {
+          display: "flex",
+          flexDirection: "row"
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              ...scrollerLayout.strategy === import_plugin_scroll2.ScrollStrategy.Horizontal ? {
+                width: scrollerLayout.startSpacing,
+                height: "100%",
+                flexShrink: 0
+              } : {
+                height: scrollerLayout.startSpacing,
+                width: "100%"
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              gap: scrollerLayout.pageGap,
+              display: "flex",
+              alignItems: "center",
+              position: "relative",
+              boxSizing: "border-box",
+              ...scrollerLayout.strategy === import_plugin_scroll2.ScrollStrategy.Horizontal ? {
+                flexDirection: "row",
+                minHeight: "100%"
+              } : {
+                flexDirection: "column",
+                minWidth: "fit-content"
+              }
+            },
+            children: scrollerLayout.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "center",
+                  gap: scrollerLayout.pageGap
+                },
+                children: item.pageLayouts.map((layout) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: `${layout.rotatedWidth}px`,
+                      height: `${layout.rotatedHeight}px`
+                    },
+                    children: renderPage({
+                      ...layout,
+                      rotation: coreState.core.rotation,
+                      scale: coreState.core.scale,
+                      document: coreState.core.document
+                    })
+                  },
+                  layout.pageNumber
+                ))
+              },
+              item.pageNumbers[0]
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              ...scrollerLayout.strategy === import_plugin_scroll2.ScrollStrategy.Horizontal ? {
+                width: scrollerLayout.endSpacing,
+                height: "100%",
+                flexShrink: 0
+              } : {
+                height: scrollerLayout.endSpacing,
+                width: "100%"
+              }
+            }
+          }
+        ),
+        overlayElements
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Scroller,
+  useScroll,
+  useScrollCapability
+});
+//# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/index.ts","../../src/react/hooks/use-scroll.ts","../../src/react/components/scroller.tsx"],"sourcesContent":["export * from './hooks';\nexport * from './components';\n","import { useCapability, usePlugin } from '@embedpdf/core/react';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScroll = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n","import React, { ReactNode, useEffect, useState } from 'react';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/react';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollCapability } from '../hooks';\n\ninterface RenderPageProps extends PageLayout {\n  rotation: Rotation;\n  scale: number;\n  document: PdfDocumentObject | null;\n}\n\ntype ScrollerProps = React.HTMLAttributes<HTMLDivElement> & {\n  renderPage: (props: RenderPageProps) => ReactNode;\n  overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n  const { provides: scrollProvides } = useScrollCapability();\n  const { registry } = useRegistry();\n  const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n    () => scrollProvides?.getScrollerLayout() ?? null,\n  );\n\n  useEffect(() => {\n    if (!scrollProvides) return;\n\n    return scrollProvides.onScrollerData(setScrollerLayout);\n  }, [scrollProvides]);\n\n  if (!scrollerLayout) return null;\n  if (!registry) return null;\n\n  const coreState = registry.getStore().getState();\n\n  return (\n    <div\n      {...props}\n      style={{\n        width: `${scrollerLayout.totalWidth}px`,\n        height: `${scrollerLayout.totalHeight}px`,\n        position: 'relative',\n        boxSizing: 'border-box',\n        margin: '0 auto',\n        ...(scrollerLayout.strategy === ScrollStrategy.Horizontal && {\n          display: 'flex',\n          flexDirection: 'row',\n        }),\n      }}\n    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\n          display: 'flex',\n          alignItems: 'center',\n          position: 'relative',\n          boxSizing: 'border-box',\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                flexDirection: 'row',\n                minHeight: '100%',\n              }\n            : {\n                flexDirection: 'column',\n                minWidth: 'fit-content',\n              }),\n        }}\n      >\n        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                  rotation: coreState.core.rotation,\n                  scale: coreState.core.scale,\n                  document: coreState.core.document,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      {overlayElements}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyC;AACzC,2BAA6B;AAEtB,IAAM,YAAY,UAAM,wBAAwB,kCAAa,EAAE;AAC/D,IAAM,sBAAsB,UAAM,4BAA4B,kCAAa,EAAE;;;ACJpF,IAAAA,gBAAsD;AACtD,IAAAC,wBAA2D;AAC3D,IAAAD,gBAA4B;AAmCxB;AAnBG,SAAS,SAAS,EAAE,YAAY,iBAAiB,GAAG,MAAM,GAAkB;AACjF,QAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,QAAM,EAAE,SAAS,QAAI,2BAAY;AACjC,QAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,IAC1C,MAAM,gBAAgB,kBAAkB,KAAK;AAAA,EAC/C;AAEA,+BAAU,MAAM;AACd,QAAI,CAAC,eAAgB;AAErB,WAAO,eAAe,eAAe,iBAAiB;AAAA,EACxD,GAAG,CAAC,cAAc,CAAC;AAEnB,MAAI,CAAC,eAAgB,QAAO;AAC5B,MAAI,CAAC,SAAU,QAAO;AAEtB,QAAM,YAAY,SAAS,SAAS,EAAE,SAAS;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,OAAO,GAAG,eAAe,UAAU;AAAA,QACnC,QAAQ,GAAG,eAAe,WAAW;AAAA,QACrC,UAAU;AAAA,QACV,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,GAAI,eAAe,aAAa,qCAAe,cAAc;AAAA,UAC3D,SAAS;AAAA,UACT,eAAe;AAAA,QACjB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,GAAI,eAAe,aAAa,qCAAe,aAC3C;AAAA,gBACE,OAAO,eAAe;AAAA,gBACtB,QAAQ;AAAA,gBACR,YAAY;AAAA,cACd,IACA;AAAA,gBACE,QAAQ,eAAe;AAAA,gBACvB,OAAO;AAAA,cACT;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,KAAK,eAAe;AAAA,cACpB,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW;AAAA,cACX,GAAI,eAAe,aAAa,qCAAe,aAC3C;AAAA,gBACE,eAAe;AAAA,gBACf,WAAW;AAAA,cACb,IACA;AAAA,gBACE,eAAe;AAAA,gBACf,UAAU;AAAA,cACZ;AAAA,YACN;AAAA,YAEC,yBAAe,MAAM,IAAI,CAAC,SACzB;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAO;AAAA,kBACL,SAAS;AAAA,kBACT,gBAAgB;AAAA,kBAChB,KAAK,eAAe;AAAA,gBACtB;AAAA,gBAEC,eAAK,YAAY,IAAI,CAAC,WACrB;AAAA,kBAAC;AAAA;AAAA,oBAEC,OAAO;AAAA,sBACL,OAAO,GAAG,OAAO,YAAY;AAAA,sBAC7B,QAAQ,GAAG,OAAO,aAAa;AAAA,oBACjC;AAAA,oBAEC,qBAAW;AAAA,sBACV,GAAG;AAAA,sBACH,UAAU,UAAU,KAAK;AAAA,sBACzB,OAAO,UAAU,KAAK;AAAA,sBACtB,UAAU,UAAU,KAAK;AAAA,oBAC3B,CAAC;AAAA;AAAA,kBAXI,OAAO;AAAA,gBAYd,CACD;AAAA;AAAA,cAtBI,KAAK,YAAY,CAAC;AAAA,YAuBzB,CACD;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,GAAI,eAAe,aAAa,qCAAe,aAC3C;AAAA,gBACE,OAAO,eAAe;AAAA,gBACtB,QAAQ;AAAA,gBACR,YAAY;AAAA,cACd,IACA;AAAA,gBACE,QAAQ,eAAe;AAAA,gBACvB,OAAO;AAAA,cACT;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":["import_react","import_plugin_scroll"]}

package/dist/react/index.d.cts

@@ -0,0 +1,29 @@
+import * as _embedpdf_plugin_scroll from '@embedpdf/plugin-scroll';
+import { ScrollPlugin, PageLayout } from '@embedpdf/plugin-scroll';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+import { Rotation, PdfDocumentObject } from '@embedpdf/models';
+
+declare const useScroll: () => {
+    plugin: ScrollPlugin | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+declare const useScrollCapability: () => {
+    provides: Readonly<_embedpdf_plugin_scroll.ScrollCapability> | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+
+interface RenderPageProps extends PageLayout {
+    rotation: Rotation;
+    scale: number;
+    document: PdfDocumentObject | null;
+}
+type ScrollerProps = React.HTMLAttributes<HTMLDivElement> & {
+    renderPage: (props: RenderPageProps) => ReactNode;
+    overlayElements?: ReactNode[];
+};
+declare function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps): react_jsx_runtime.JSX.Element | null;
+
+export { Scroller, useScroll, useScrollCapability };

package/dist/react/index.d.ts

@@ -0,0 +1,29 @@
+import * as _embedpdf_plugin_scroll from '@embedpdf/plugin-scroll';
+import { ScrollPlugin, PageLayout } from '@embedpdf/plugin-scroll';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+import { Rotation, PdfDocumentObject } from '@embedpdf/models';
+
+declare const useScroll: () => {
+    plugin: ScrollPlugin | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+declare const useScrollCapability: () => {
+    provides: Readonly<_embedpdf_plugin_scroll.ScrollCapability> | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+
+interface RenderPageProps extends PageLayout {
+    rotation: Rotation;
+    scale: number;
+    document: PdfDocumentObject | null;
+}
+type ScrollerProps = React.HTMLAttributes<HTMLDivElement> & {
+    renderPage: (props: RenderPageProps) => ReactNode;
+    overlayElements?: ReactNode[];
+};
+declare function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps): react_jsx_runtime.JSX.Element | null;
+
+export { Scroller, useScroll, useScrollCapability };

package/dist/react/index.js

@@ -0,0 +1,127 @@
+// src/react/hooks/use-scroll.ts
+import { useCapability, usePlugin } from "@embedpdf/core/react";
+import { ScrollPlugin } from "@embedpdf/plugin-scroll";
+var useScroll = () => usePlugin(ScrollPlugin.id);
+var useScrollCapability = () => useCapability(ScrollPlugin.id);
+
+// src/react/components/scroller.tsx
+import { useEffect, useState } from "react";
+import { ScrollStrategy } from "@embedpdf/plugin-scroll";
+import { useRegistry } from "@embedpdf/core/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Scroller({ renderPage, overlayElements, ...props }) {
+  const { provides: scrollProvides } = useScrollCapability();
+  const { registry } = useRegistry();
+  const [scrollerLayout, setScrollerLayout] = useState(
+    () => scrollProvides?.getScrollerLayout() ?? null
+  );
+  useEffect(() => {
+    if (!scrollProvides) return;
+    return scrollProvides.onScrollerData(setScrollerLayout);
+  }, [scrollProvides]);
+  if (!scrollerLayout) return null;
+  if (!registry) return null;
+  const coreState = registry.getStore().getState();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      style: {
+        width: `${scrollerLayout.totalWidth}px`,
+        height: `${scrollerLayout.totalHeight}px`,
+        position: "relative",
+        boxSizing: "border-box",
+        margin: "0 auto",
+        ...scrollerLayout.strategy === ScrollStrategy.Horizontal && {
+          display: "flex",
+          flexDirection: "row"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...scrollerLayout.strategy === ScrollStrategy.Horizontal ? {
+                width: scrollerLayout.startSpacing,
+                height: "100%",
+                flexShrink: 0
+              } : {
+                height: scrollerLayout.startSpacing,
+                width: "100%"
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              gap: scrollerLayout.pageGap,
+              display: "flex",
+              alignItems: "center",
+              position: "relative",
+              boxSizing: "border-box",
+              ...scrollerLayout.strategy === ScrollStrategy.Horizontal ? {
+                flexDirection: "row",
+                minHeight: "100%"
+              } : {
+                flexDirection: "column",
+                minWidth: "fit-content"
+              }
+            },
+            children: scrollerLayout.items.map((item) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "center",
+                  gap: scrollerLayout.pageGap
+                },
+                children: item.pageLayouts.map((layout) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      width: `${layout.rotatedWidth}px`,
+                      height: `${layout.rotatedHeight}px`
+                    },
+                    children: renderPage({
+                      ...layout,
+                      rotation: coreState.core.rotation,
+                      scale: coreState.core.scale,
+                      document: coreState.core.document
+                    })
+                  },
+                  layout.pageNumber
+                ))
+              },
+              item.pageNumbers[0]
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...scrollerLayout.strategy === ScrollStrategy.Horizontal ? {
+                width: scrollerLayout.endSpacing,
+                height: "100%",
+                flexShrink: 0
+              } : {
+                height: scrollerLayout.endSpacing,
+                width: "100%"
+              }
+            }
+          }
+        ),
+        overlayElements
+      ]
+    }
+  );
+}
+export {
+  Scroller,
+  useScroll,
+  useScrollCapability
+};
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/hooks/use-scroll.ts","../../src/react/components/scroller.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/react';\nimport { ScrollPlugin } from '@embedpdf/plugin-scroll';\n\nexport const useScroll = () => usePlugin<ScrollPlugin>(ScrollPlugin.id);\nexport const useScrollCapability = () => useCapability<ScrollPlugin>(ScrollPlugin.id);\n","import React, { ReactNode, useEffect, useState } from 'react';\nimport { ScrollStrategy, ScrollerLayout, PageLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/react';\nimport { PdfDocumentObject, Rotation } from '@embedpdf/models';\n\nimport { useScrollCapability } from '../hooks';\n\ninterface RenderPageProps extends PageLayout {\n  rotation: Rotation;\n  scale: number;\n  document: PdfDocumentObject | null;\n}\n\ntype ScrollerProps = React.HTMLAttributes<HTMLDivElement> & {\n  renderPage: (props: RenderPageProps) => ReactNode;\n  overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n  const { provides: scrollProvides } = useScrollCapability();\n  const { registry } = useRegistry();\n  const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n    () => scrollProvides?.getScrollerLayout() ?? null,\n  );\n\n  useEffect(() => {\n    if (!scrollProvides) return;\n\n    return scrollProvides.onScrollerData(setScrollerLayout);\n  }, [scrollProvides]);\n\n  if (!scrollerLayout) return null;\n  if (!registry) return null;\n\n  const coreState = registry.getStore().getState();\n\n  return (\n    <div\n      {...props}\n      style={{\n        width: `${scrollerLayout.totalWidth}px`,\n        height: `${scrollerLayout.totalHeight}px`,\n        position: 'relative',\n        boxSizing: 'border-box',\n        margin: '0 auto',\n        ...(scrollerLayout.strategy === ScrollStrategy.Horizontal && {\n          display: 'flex',\n          flexDirection: 'row',\n        }),\n      }}\n    >\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.startSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.startSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      <div\n        style={{\n          gap: scrollerLayout.pageGap,\n          display: 'flex',\n          alignItems: 'center',\n          position: 'relative',\n          boxSizing: 'border-box',\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                flexDirection: 'row',\n                minHeight: '100%',\n              }\n            : {\n                flexDirection: 'column',\n                minWidth: 'fit-content',\n              }),\n        }}\n      >\n        {scrollerLayout.items.map((item) => (\n          <div\n            key={item.pageNumbers[0]}\n            style={{\n              display: 'flex',\n              justifyContent: 'center',\n              gap: scrollerLayout.pageGap,\n            }}\n          >\n            {item.pageLayouts.map((layout) => (\n              <div\n                key={layout.pageNumber}\n                style={{\n                  width: `${layout.rotatedWidth}px`,\n                  height: `${layout.rotatedHeight}px`,\n                }}\n              >\n                {renderPage({\n                  ...layout,\n                  rotation: coreState.core.rotation,\n                  scale: coreState.core.scale,\n                  document: coreState.core.document,\n                })}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      <div\n        style={{\n          ...(scrollerLayout.strategy === ScrollStrategy.Horizontal\n            ? {\n                width: scrollerLayout.endSpacing,\n                height: '100%',\n                flexShrink: 0,\n              }\n            : {\n                height: scrollerLayout.endSpacing,\n                width: '100%',\n              }),\n        }}\n      />\n      {overlayElements}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@embedpdf/plugin-scroll",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./preact": {
+      "types": "./dist/preact/index.d.ts",
+      "import": "./dist/preact/index.js",
+      "require": "./dist/preact/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@embedpdf/models": "1.0.0",
+    "@embedpdf/plugin-viewport": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "preact": "^10.26.4",
+    "@embedpdf/core": "1.0.0",
+    "@embedpdf/plugin-viewport": "1.0.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/embedpdf/embed-pdf-viewer",
+    "directory": "packages/plugin-scroll"
+  },
+  "homepage": "https://www.embedpdf.com/docs",
+  "bugs": {
+    "url": "https://github.com/embedpdf/embed-pdf-viewer/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "PROJECT_CWD=$(pwd) pnpm -w p:build",
+    "build:watch": "PROJECT_CWD=$(pwd) pnpm -w p:build:watch",
+    "clean": "PROJECT_CWD=$(pwd) pnpm -w p:clean",
+    "lint": "PROJECT_CWD=$(pwd) pnpm -w p:lint",
+    "lint:fix": "PROJECT_CWD=$(pwd) pnpm -w p:lint:fix",
+    "typecheck": "PROJECT_CWD=$(pwd) pnpm -w p:typecheck"
+  }
+}