@bendyline/squisq-react 2.11.4 → 2.11.6

package/dist/chunk-7QA6EW6Y.js

@@ -0,0 +1,240 @@
+import {
+  LinearDocView
+} from "./chunk-5UGIE2QO.js";
+
+// src/PaginatedDocView.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PaginatedDocView({
+  doc,
+  pages,
+  linearViewProps,
+  className = "",
+  scrollerClassName = "",
+  pageClassName = "",
+  previousButtonClassName = "",
+  nextButtonClassName = "",
+  indicatorClassName = "",
+  indicatorTextClassName = "",
+  renderPreviousIcon,
+  renderNextIcon,
+  ariaLabel = "Document pages",
+  initialPage = 0,
+  focusOnMount = true,
+  einkMode = false,
+  onPageChange,
+  style,
+  scrollerStyle,
+  pageStyle: pageStyleOverride
+}) {
+  const resolvedPages = useMemo(() => {
+    if (pages) return pages;
+    if (!doc) return [];
+    return doc.blocks.map((block, index) => ({
+      key: block.id || `page-${index}`,
+      label: block.sourceHeading ? `Document section ${index + 1}` : `Document page ${index + 1}`,
+      content: /* @__PURE__ */ jsx(
+        LinearDocView,
+        {
+          ...linearViewProps,
+          doc: {
+            ...doc,
+            blocks: [block],
+            startBlock: index === 0 ? doc.startBlock : void 0
+          },
+          thinMargins: linearViewProps?.thinMargins ?? true
+        }
+      )
+    }));
+  }, [doc, linearViewProps, pages]);
+  const lastPage = Math.max(0, resolvedPages.length - 1);
+  const [currentPage, setCurrentPage] = useState(
+    () => Math.min(Math.max(0, initialPage), lastPage)
+  );
+  const scrollRef = useRef(null);
+  const pendingPageRef = useRef(null);
+  const pendingPageTimeoutRef = useRef(null);
+  const commitPage = useCallback(
+    (next) => {
+      setCurrentPage((current) => {
+        if (current !== next) onPageChange?.(next);
+        return next;
+      });
+    },
+    [onPageChange]
+  );
+  const updatePage = useCallback(
+    (index) => {
+      const next = Math.min(Math.max(0, index), lastPage);
+      pendingPageRef.current = next;
+      if (pendingPageTimeoutRef.current !== null) {
+        clearTimeout(pendingPageTimeoutRef.current);
+      }
+      pendingPageTimeoutRef.current = setTimeout(() => {
+        pendingPageRef.current = null;
+        pendingPageTimeoutRef.current = null;
+        commitPage(next);
+      }, 750);
+      const container = scrollRef.current;
+      const pageNodes = container?.querySelectorAll(":scope > .squisq-paginated-page");
+      const target = pageNodes?.[next];
+      if (container && target) {
+        const origin = pageNodes?.[0]?.offsetLeft ?? 0;
+        container.scrollTo({
+          left: target.offsetLeft - origin,
+          behavior: einkMode ? "auto" : "smooth"
+        });
+      }
+    },
+    [commitPage, einkMode, lastPage]
+  );
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const initial = Math.min(Math.max(0, initialPage), lastPage);
+    pendingPageRef.current = null;
+    container.scrollLeft = initial * container.clientWidth;
+    setCurrentPage(initial);
+    if (focusOnMount) container.focus({ preventScroll: true });
+  }, [focusOnMount, initialPage, lastPage, resolvedPages]);
+  useEffect(
+    () => () => {
+      if (pendingPageTimeoutRef.current !== null) {
+        clearTimeout(pendingPageTimeoutRef.current);
+      }
+    },
+    []
+  );
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    let frame = 0;
+    const onScroll = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        if (container.clientWidth <= 0) return;
+        const pageNodes = Array.from(
+          container.querySelectorAll(":scope > .squisq-paginated-page")
+        );
+        const origin = pageNodes[0]?.offsetLeft ?? 0;
+        const pendingPage = pendingPageRef.current;
+        if (pendingPage !== null) {
+          const pendingTarget = pageNodes[pendingPage];
+          const pendingLeft = pendingTarget ? pendingTarget.offsetLeft - origin : 0;
+          if (Math.abs(container.scrollLeft - pendingLeft) > 1) return;
+          pendingPageRef.current = null;
+          if (pendingPageTimeoutRef.current !== null) {
+            clearTimeout(pendingPageTimeoutRef.current);
+            pendingPageTimeoutRef.current = null;
+          }
+        }
+        const next = pageNodes.reduce(
+          (nearest, page, index) => Math.abs(container.scrollLeft - (page.offsetLeft - origin)) < Math.abs(container.scrollLeft - (pageNodes[nearest]?.offsetLeft ?? origin) + origin) ? index : nearest,
+          0
+        );
+        commitPage(next);
+      });
+    };
+    container.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      cancelAnimationFrame(frame);
+      container.removeEventListener("scroll", onScroll);
+    };
+  }, [commitPage, lastPage]);
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      updatePage((pendingPageRef.current ?? currentPage) + 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      updatePage((pendingPageRef.current ?? currentPage) - 1);
+    }
+  };
+  const outerStyle = { position: "relative", width: "100%", height: "100%" };
+  const scrollStyle = {
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    overflowX: "auto",
+    overflowY: "hidden",
+    scrollSnapType: "x mandatory"
+  };
+  const pageStyle = {
+    flex: "0 0 100%",
+    minWidth: "100%",
+    height: "100%",
+    overflowY: "auto",
+    overflowX: "hidden",
+    scrollSnapAlign: "start",
+    scrollSnapStop: "always",
+    boxSizing: "border-box"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `squisq-paginated ${className}`.trim(), style: { ...outerStyle, ...style }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: `squisq-paginated-scroll ${scrollerClassName}`.trim(),
+        style: { ...scrollStyle, ...scrollerStyle },
+        tabIndex: 0,
+        role: "region",
+        "aria-label": ariaLabel,
+        "aria-roledescription": "paginated reader",
+        onKeyDown,
+        children: resolvedPages.map((page) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `squisq-paginated-page ${pageClassName} ${page.className ?? ""}`.trim(),
+            style: { ...pageStyle, ...pageStyleOverride },
+            role: "group",
+            "aria-label": page.label,
+            children: page.content
+          },
+          page.key
+        ))
+      }
+    ),
+    currentPage > 0 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `squisq-paginated-nav squisq-paginated-nav--previous ${previousButtonClassName}`.trim(),
+        "aria-label": "Previous page",
+        onClick: () => updatePage((pendingPageRef.current ?? currentPage) - 1),
+        children: renderPreviousIcon?.() ?? "\u2039"
+      }
+    ),
+    currentPage < lastPage && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `squisq-paginated-nav squisq-paginated-nav--next ${nextButtonClassName}`.trim(),
+        "aria-label": "Next page",
+        onClick: () => updatePage((pendingPageRef.current ?? currentPage) + 1),
+        children: renderNextIcon?.() ?? "\u203A"
+      }
+    ),
+    resolvedPages.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `squisq-paginated-indicator ${indicatorClassName}`.trim(),
+        "aria-live": "polite",
+        children: /* @__PURE__ */ jsxs("span", { className: indicatorTextClassName, children: [
+          currentPage + 1,
+          " / ",
+          resolvedPages.length
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  PaginatedDocView
+};

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { getAnimationStyle, getTransitionClass } from '@bendyline/squisq/doc';
 import { C as CodeBlockCopyHandler } from './MarkdownRenderer-CC9dOc6b.js';
 export { a as CodeBlockCopyContext, M as MarkdownRenderer, b as MarkdownRendererProps } from './MarkdownRenderer-CC9dOc6b.js';
 export { FenceRendererContext, MermaidDiagram, MermaidDiagramProps, useFenceRenderers } from './markdown/index.js';
-export { CanvasSection, CanvasSectionProps, ImageDisplayMode, LinearDocView, LinearDocViewProps, PageSectionView, PageSectionViewProps, PageViewContext, PageViewContextValue, usePageView } from './page/index.js';
+export { CanvasSection, CanvasSectionProps, ImageDisplayMode, LinearDocView, LinearDocViewProps, PageSectionView, PageSectionViewProps, PageViewContext, PageViewContextValue, PaginatedDocPage, PaginatedDocView, PaginatedDocViewProps, usePageView } from './page/index.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { ImageLayer, MapLayer, MermaidLayer, PathLayer, ShapeLayer, TextLayer, TreeLayer, VideoLayer } from './layers/index.js';
 export { T as TableLayer, a as TableLayerContentRenderer, b as TableLayerContentRendererProps } from './TableLayer-B7ADuUGc.js';

package/dist/index.js

@@ -16,6 +16,9 @@ import {
   resolveDocPlayerAppearance,
   useMediaClipDurations
 } from "./chunk-KGWT454C.js";
+import {
+  PaginatedDocView
+} from "./chunk-7QA6EW6Y.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -98,6 +101,7 @@ export {
   MermaidLayer,
   PageSectionView,
   PageViewContext,
+  PaginatedDocView,
   PathLayer,
   ResourcePolicyContext,
   ShapeLayer,

package/dist/page/index.d.ts

@@ -6,6 +6,7 @@ import { FenceRendererMap } from '@bendyline/squisq/fence';
 import { C as CodeBlockCopyHandler } from '../MarkdownRenderer-CC9dOc6b.js';
 export { a as CodeBlockCopyContext } from '../MarkdownRenderer-CC9dOc6b.js';
 import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
 interface LinearDocViewProps {
     /**
@@ -95,6 +96,40 @@ type ImageDisplayMode = 'inline' | 'thumbnail';
  */
 declare function LinearDocView({ doc, markdown, basePath, viewport, className, theme, surface, animationsEnabled, thinMargins, imageDisplayMode, globalKeyboardShortcuts, showCover, transformPage, showCodeCopyButton, onCopyCode, fenceRenderers, htmlPolicy, linkSchemes, }: LinearDocViewProps): react_jsx_runtime.JSX.Element;
 
+interface PaginatedDocPage {
+    key: string;
+    label: string;
+    /** React or react-compatible host node (for example Preact compat). */
+    content: ReactNode | object | bigint;
+    className?: string;
+}
+interface PaginatedDocViewProps {
+    /** A Doc to split into one page per top-level block. */
+    doc?: Doc;
+    /** Host-composed pages. Wins over doc when supplied. */
+    pages?: readonly PaginatedDocPage[];
+    /** Props applied to Doc pages rendered with LinearDocView. */
+    linearViewProps?: Omit<LinearDocViewProps, 'doc'>;
+    className?: string;
+    scrollerClassName?: string;
+    pageClassName?: string;
+    previousButtonClassName?: string;
+    nextButtonClassName?: string;
+    indicatorClassName?: string;
+    indicatorTextClassName?: string;
+    renderPreviousIcon?: () => ReactNode | object | bigint;
+    renderNextIcon?: () => ReactNode | object | bigint;
+    ariaLabel?: string;
+    initialPage?: number;
+    focusOnMount?: boolean;
+    einkMode?: boolean;
+    onPageChange?: (pageIndex: number) => void;
+    style?: CSSProperties;
+    scrollerStyle?: CSSProperties;
+    pageStyle?: CSSProperties;
+}
+declare function PaginatedDocView({ doc, pages, linearViewProps, className, scrollerClassName, pageClassName, previousButtonClassName, nextButtonClassName, indicatorClassName, indicatorTextClassName, renderPreviousIcon, renderNextIcon, ariaLabel, initialPage, focusOnMount, einkMode, onPageChange, style, scrollerStyle, pageStyle: pageStyleOverride, }: PaginatedDocViewProps): react_jsx_runtime.JSX.Element;
+
 interface PageSectionViewProps {
     entry: PageSectionMaterialization;
     /** Alternation flip for feature-split sections (theme `alternate` hint). */
@@ -130,4 +165,4 @@ interface PageViewContextValue {
 declare const PageViewContext: react.Context<PageViewContextValue>;
 declare function usePageView(): PageViewContextValue;
 
-export { CanvasSection, type CanvasSectionProps, CodeBlockCopyHandler, type ImageDisplayMode, LinearDocView, type LinearDocViewProps, PageSectionView, type PageSectionViewProps, PageViewContext, type PageViewContextValue, usePageView };
+export { CanvasSection, type CanvasSectionProps, CodeBlockCopyHandler, type ImageDisplayMode, LinearDocView, type LinearDocViewProps, PageSectionView, type PageSectionViewProps, PageViewContext, type PageViewContextValue, type PaginatedDocPage, PaginatedDocView, type PaginatedDocViewProps, usePageView };

package/dist/page/index.js

@@ -1,3 +1,6 @@
+import {
+  PaginatedDocView
+} from "../chunk-7QA6EW6Y.js";
 import {
   CanvasSection,
   LinearDocView,
@@ -15,5 +18,6 @@ export {
   LinearDocView,
   PageSectionView,
   PageViewContext,
+  PaginatedDocView,
   usePageView
 };