@design-edito/tools 0.4.5 → 0.4.11

package/components/Scrllgngn/index.js

@@ -1,476 +1,179 @@
-// src/components/Scrllgngn/index.tsx
-import {
-  useState as useState4,
-  useEffect as useEffect4
-} from "react";
-
-// src/agnostic/css/clss/index.ts
-function clss(blockNames, options) {
-  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
-  return (eltNames = null, modNames = []) => {
-    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
-    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
-      if (typeof modName === "string") return modName;
-      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
-      return trueModNames;
-    }).flat();
-    const outputClassesArr = [];
-    blockNamesArr.forEach((compName) => {
-      eltNamesArr.forEach((eltName) => {
-        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
-        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
-        outputClassesArr.push(targetPublicClss);
-        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
-        modNamesArr.forEach((modName) => {
-          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
-          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
-          outputClassesArr.push(targetModifiedPublicClss);
-          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
-        });
-      });
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { IntersectionObserverComponent } from '../IntersectionObserver/index.js';
+import { Paginator } from '../Paginator/index.js';
+import { ResizeObserverComponent } from '../ResizeObserver/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { scrllgngn as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Scrollytelling engine component. Orchestrates layered sticky blocks (`back`
+ * and `front`) over a paginated scrolling content area, with lazy loading,
+ * viewport bound detection, and dimension tracking.
+ *
+ * ### Root element modifiers
+ * The root `<div>` receives the public class name defined by `scrllgngn` and
+ * the following BEM-style modifier classes when active:
+ * - `--top-visible` — the top boundary sentinel is intersecting the viewport.
+ * - `--content-visible` — the scrolling content area is intersecting the viewport.
+ * - `--bottom-visible` — the bottom boundary sentinel is intersecting the viewport.
+ * - `--force-stick-blocks-before` — when `forceStickBlocks === 'before'`.
+ * - `--force-stick-blocks-after` — when `forceStickBlocks === 'after'`.
+ * - `--force-stick-blocks-both` — when `forceStickBlocks === 'both'`.
+ *
+ * ### Data attributes
+ * - `data-current-page-pos` — zero-based index of the page currently in view,
+ * updated on every page change reported by the internal {@link Paginator}.
+ *
+ * ### CSS custom properties
+ * Exposed on the root element and updated on resize via the internal
+ * {@link ResizeObserverComponent}:
+ * - `--scrllgngn-screen-left` / `--PRIVATE-left` — left edge of the bounding rect (px).
+ * - `--scrllgngn-screen-right` / `--PRIVATE-right` — right edge (px).
+ * - `--scrllgngn-screen-width` / `--PRIVATE-width` — total width (px).
+ * - `--scrllgngn-screen-height` / `--PRIVATE-height` — total height (px).
+ *
+ * ### Sticky block elements
+ * Each lazy-loaded sticky block receives:
+ * - `--active` modifier when the block's page range includes the current page.
+ * - `--lazy-loaded` modifier when the block is mounted but not on the current page.
+ * - An inline `z-index` derived from the block's position in the sorted stack
+ * (overridden by {@link PropsStickyBlock.zIndex} if provided).
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A div wrapping the full scrollytelling structure: top-bound sentinel,
+ * back-blocks layer, front-blocks layer, paginated scrolling content, and
+ * bottom-bound sentinel.
+ */
+export const Scrllgngn = ({ pages, thresholdOffsetPercent, stickyBlocksLazyLoadDistance = 2, forceStickBlocks, className }) => {
+    // State
+    const [topVisible, setTopVis] = useState(false);
+    const [contentVisible, setCntVis] = useState(false);
+    const [bottomVisible, setBtmVis] = useState(false);
+    const [currentPagePos, setCurrentPagePos] = useState(0);
+    const [stickyBlocks, setStickyBlocks] = useState(new Map());
+    const [partialBoundingRect, setPartialBoundingRect] = useState();
+    // Sticky blocks calculations
+    useEffect(() => {
+        const consolidatedBlocks = new Map();
+        for (const page of pages ?? []) {
+            const pageIndex = pages?.indexOf(page) ?? -1;
+            for (const block of page.blocks ?? []) {
+                const blockId = block.id ?? randomHash(12);
+                const found = consolidatedBlocks.get(blockId);
+                if (found !== undefined)
+                    consolidatedBlocks.set(blockId, {
+                        ...found,
+                        ...block,
+                        displayOnPages: [
+                            ...found.displayOnPages,
+                            pageIndex
+                        ]
+                    });
+                else
+                    consolidatedBlocks.set(blockId, {
+                        ...block,
+                        displayOnPages: [pageIndex]
+                    });
+            }
+        }
+        const consolidatedStickyBlocks = new Map(Array
+            .from(consolidatedBlocks)
+            .filter((e) => {
+            const block = e[1];
+            return block.depth === 'back'
+                || block.depth === 'front';
+        }));
+        setStickyBlocks(consolidatedStickyBlocks);
+    }, [pages]);
+    const lazyLoadedBackBlocks = Array
+        .from(stickyBlocks)
+        .filter(([, block]) => block.depth === 'back'
+        && block.displayOnPages.some(dispPage => {
+            const absDiff = Math.abs(dispPage - currentPagePos);
+            return absDiff <= stickyBlocksLazyLoadDistance;
+        })).map(([, block]) => block)
+        .sort((a, b) => {
+        return (a.zIndex ?? -Infinity) - (b.zIndex ?? -Infinity);
     });
-    return outputClassesArr.join(" ");
-  };
-}
-
-// src/agnostic/random/hex-char/index.ts
-var hexChars = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
-function randomHexChar() {
-  const nbr = Math.floor(Math.random() * 16);
-  const char = hexChars[nbr];
-  return char;
-}
-
-// src/agnostic/random/uuid/index.ts
-function randomHash(length = 4) {
-  return new Array(length).fill(null).map(randomHexChar).join("");
-}
-
-// src/components/IntersectionObserver/index.tsx
-import {
-  useState,
-  useRef,
-  useEffect,
-  useCallback
-} from "react";
-
-// src/components/utils/index.tsx
-function mergeClassNames(...names) {
-  return names.map((name) => {
-    if (typeof name !== "string" && !Array.isArray(name)) return false;
-    if (Array.isArray(name)) return mergeClassNames(...name);
-    if (name.trim() === "") return false;
-    return name.trim();
-  }).filter((name) => typeof name === "string").join(" ");
-}
-
-// src/components/public-classnames.ts
-var intersectionObserver = "dsed-intersection-observer";
-var paginator = "dsed-paginator";
-var resizeObserver = "dsed-resize-observer";
-var scrllgngn = "dsed-scrllgngn";
-
-// src/components/IntersectionObserver/index.tsx
-import cssModule from "./styles.module.css";
-import { jsx } from "react/jsx-runtime";
-var IntersectionObserverComponent = ({
-  onIntersected,
-  root,
-  rootMargin,
-  threshold,
-  className,
-  children
-}) => {
-  const [ioEntry, setIoEntry] = useState(null);
-  const rootRef = useRef(null);
-  const observerRef = useRef(null);
-  const observation = useCallback((entries, observer) => {
-    const thisEntry = entries[0];
-    if (thisEntry === void 0) return setIoEntry(null);
-    onIntersected?.({ ioEntry: thisEntry, observer });
-    setIoEntry(thisEntry);
-  }, [onIntersected]);
-  const forceObservation = useCallback(() => {
-    const rootEl = rootRef.current;
-    const observer = observerRef.current;
-    if (rootEl === null || observer === null) return;
-    observer.unobserve(rootEl);
-    observer.observe(rootEl);
-  }, []);
-  useEffect(() => {
-    const rootEl = rootRef.current;
-    if (rootEl === null) return console.warn("rootRef.current should not be null");
-    const observer = new IntersectionObserver(observation, { root, rootMargin, threshold });
-    observerRef.current = observer;
-    observer.observe(rootEl);
-    return () => observer.disconnect();
-  }, [root, rootMargin, threshold, observation]);
-  useEffect(() => {
-    const timeout1 = window.setTimeout(forceObservation, 100);
-    const timeout2 = window.setTimeout(forceObservation, 500);
-    return () => {
-      window.clearTimeout(timeout1);
-      window.clearTimeout(timeout2);
-    };
-  }, [forceObservation]);
-  const c = clss(intersectionObserver, { cssModule });
-  const isIntersecting = ioEntry?.isIntersecting ?? false;
-  const rootClss = mergeClassNames(
-    c(null, { "is-intersecting": isIntersecting }),
-    className
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: rootClss,
-      ref: rootRef,
-      children
-    }
-  );
-};
-
-// src/components/Paginator/index.tsx
-import {
-  useEffect as useEffect2,
-  useRef as useRef2,
-  Children,
-  useState as useState2
-} from "react";
-import cssModule2 from "./styles.module.css";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Paginator = ({
-  thresholdOffsetPercent,
-  stateHandlers,
-  className,
-  children
-}) => {
-  const [pagesState, setPagesState] = useState2(/* @__PURE__ */ new Map());
-  const [directionState, setDirectionState] = useState2(null);
-  const pagesRef = useRef2(null);
-  const directionRef = useRef2(null);
-  useEffect2(() => {
-    stateHandlers?.pageChanged?.(Array.from(pagesState).map(([, state]) => state));
-  }, [pagesState]);
-  useEffect2(() => {
-    stateHandlers?.directionChanged?.(directionState);
-  }, [directionState]);
-  useEffect2(() => {
-    let lastCall = 0;
-    let lastScrollY = window.scrollY;
-    const handleScroll = (e) => {
-      const now = Date.now();
-      if (now - lastCall < 100) return;
-      lastCall = now;
-      const currentScrollY = window.scrollY;
-      const direction = currentScrollY > lastScrollY ? "forwards" : "backwards";
-      lastScrollY = currentScrollY;
-      if (direction !== directionRef.current) {
-        directionRef.current = direction;
-        setDirectionState(direction);
-      }
+    const lazyLoadedFrontBlocks = Array
+        .from(stickyBlocks)
+        .filter(([, block]) => block.depth === 'front'
+        && block.displayOnPages.some(dispPage => {
+            const absDiff = Math.abs(dispPage - currentPagePos);
+            return absDiff <= stickyBlocksLazyLoadDistance;
+        })).map(([, block]) => block)
+        .sort((a, b) => {
+        return (a.zIndex ?? -Infinity) - (b.zIndex ?? -Infinity);
+    });
+    // Handlers
+    const handleTopBoundDetect = e => setTopVis(e.ioEntry?.isIntersecting ?? false);
+    const handleCntDetect = e => setCntVis(e.ioEntry?.isIntersecting ?? false);
+    const handleBtmBoundDetect = e => setBtmVis(e.ioEntry?.isIntersecting ?? false);
+    const handlePageChange = pages => {
+        const curPagePos = pages.findIndex(page => page.position === 'curr');
+        if (curPagePos === -1)
+            return;
+        return setCurrentPagePos(curPagePos);
     };
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("resize", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("resize", handleScroll);
+    const handleResize = ({ boundingClientRect }) => {
+        if (partialBoundingRect === undefined
+            || boundingClientRect.left !== partialBoundingRect.left
+            || boundingClientRect.right !== partialBoundingRect.right
+            || boundingClientRect.height !== partialBoundingRect.height
+            || boundingClientRect.width !== partialBoundingRect.width)
+            setPartialBoundingRect(boundingClientRect);
     };
-  }, []);
-  useEffect2(() => {
-    if (pagesRef.current === null) return;
-    const pages = Array.from(pagesRef.current.children);
-    const observerRootMargin = `-${thresholdOffsetPercent ?? 0}% 0px -${100 - (thresholdOffsetPercent ?? 0)}% 0px`;
-    const observer = new IntersectionObserver((entries) => {
-      setPagesState((prevState) => {
-        const nextState = new Map(prevState);
-        entries.forEach((entry) => {
-          const index = pageIndexMap.get(entry.target);
-          if (index === void 0) return;
-          const prev = prevState.get(index);
-          const position = entry.isIntersecting ? "curr" : entry.boundingClientRect.bottom < (entry.rootBounds?.top ?? 0) ? "prev" : "next";
-          const currCount = position === "curr" && prev?.position !== "curr" ? (prev?.currCount ?? 0) + 1 : prev?.currCount ?? 0;
-          nextState.set(index, { position, currCount });
-        });
-        return nextState;
-      });
-    }, { rootMargin: observerRootMargin });
-    const pageIndexMap = /* @__PURE__ */ new Map();
-    pages.forEach((page, index) => {
-      pageIndexMap.set(page, index);
-      observer.observe(page);
-    });
-    return () => observer.disconnect();
-  }, [thresholdOffsetPercent, children]);
-  const c = clss(paginator, { cssModule: cssModule2 });
-  const rootClss = mergeClassNames(
-    c(null, {
-      forwards: directionState === "forwards",
-      backwards: directionState === "backwards"
-    }),
-    className
-  );
-  const pagesClss = c("pages");
-  const childrenArr = Children.toArray(children);
-  return /* @__PURE__ */ jsx2("div", { className: rootClss, children: /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: pagesClss,
-      ref: pagesRef,
-      children: childrenArr.map((child, pos) => {
-        const state = pagesState.get(pos);
-        const pageClss = c("page", {
-          first: pos === 0,
-          last: pos === childrenArr.length - 1,
-          prev: state?.position === "prev",
-          curr: state?.position === "curr",
-          next: state?.position === "next"
-        });
-        return /* @__PURE__ */ jsx2(
-          "div",
-          {
-            className: pageClss,
-            "data-page": pos,
-            "data-curr-count": state?.currCount ?? 0,
-            children: child
-          },
-          pos
-        );
-      })
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, {
+        'top-visible': topVisible,
+        'content-visible': contentVisible,
+        'bottom-visible': bottomVisible,
+        'force-stick-blocks-before': forceStickBlocks === 'before',
+        'force-stick-blocks-after': forceStickBlocks === 'after',
+        'force-stick-blocks-both': forceStickBlocks === 'both'
+    }), className);
+    const customCssProps = {};
+    if (partialBoundingRect?.left !== undefined) {
+        customCssProps[`--${publicClassName}-screen-left`] = `${partialBoundingRect.left}px`;
+        customCssProps['--PRIVATE-left'] = `${partialBoundingRect.left}px`;
     }
-  ) });
-};
-
-// src/components/ResizeObserver/index.tsx
-import {
-  useRef as useRef3,
-  useEffect as useEffect3,
-  useState as useState3
-} from "react";
-import cssModule3 from "./style.module.css";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var ResizeObserverComponent = ({
-  className,
-  onResized,
-  children
-}) => {
-  const [roEntry, setRoEntry] = useState3();
-  const rootRef = useRef3(null);
-  const observerRef = useRef3(null);
-  const createObserver = () => {
-    const root = rootRef.current;
-    observerRef.current?.disconnect();
-    if (root === null) return;
-    observerRef.current = new ResizeObserver((entries) => {
-      const firstEntry = entries[0];
-      if (firstEntry !== void 0) {
-        const boundingClientRect = firstEntry.target.getBoundingClientRect();
-        const fullEntry = {
-          entry: firstEntry,
-          boundingClientRect
-        };
-        setRoEntry(fullEntry);
-        if (onResized === void 0) return;
-        onResized(fullEntry);
-      }
-    });
-    observerRef.current.observe(root);
-  };
-  useEffect3(() => {
-    createObserver();
-    return () => observerRef.current?.disconnect();
-  }, [onResized]);
-  const {
-    x,
-    y,
-    top,
-    left,
-    bottom,
-    right,
-    width,
-    height
-  } = roEntry?.entry.contentRect ?? {};
-  const contentRect = { x, y, top, left, bottom, right, width, height };
-  const dataAttributes = Object.entries(contentRect).reduce((acc, [key, val]) => {
-    if (val === void 0) return acc;
-    return { ...acc, [`data-${key}`]: val.toString() };
-  }, {});
-  const cssCustomProps = Object.entries(contentRect).reduce((acc, [key, val]) => {
-    if (val === void 0) return acc;
-    return {
-      ...acc,
-      [`--${resizeObserver}-${key}`]: val.toString(),
-      [`--${resizeObserver}-${key}-px`]: `${val.toString()}px`
-    };
-  }, {});
-  const c = clss(resizeObserver, { cssModule: cssModule3 });
-  const rootClss = mergeClassNames(c(null), className);
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      ...dataAttributes,
-      className: rootClss,
-      ref: rootRef,
-      style: { ...cssCustomProps },
-      children
+    if (partialBoundingRect?.right !== undefined) {
+        customCssProps[`--${publicClassName}-screen-right`] = `${partialBoundingRect.right}px`;
+        customCssProps['--PRIVATE-right'] = `${partialBoundingRect.right}px`;
     }
-  );
-};
-
-// src/components/Scrllgngn/index.tsx
-import cssModule4 from "./styles.module.css";
-import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
-var Scrllgngn = ({
-  pages,
-  thresholdOffsetPercent,
-  stickyBlocksLazyLoadDistance = 2,
-  forceStickBlocks,
-  className
-}) => {
-  const [topVisible, setTopVis] = useState4(false);
-  const [contentVisible, setCntVis] = useState4(false);
-  const [bottomVisible, setBtmVis] = useState4(false);
-  const [currentPagePos, setCurrentPagePos] = useState4(0);
-  const [stickyBlocks, setStickyBlocks] = useState4(/* @__PURE__ */ new Map());
-  const [partialBoundingRect, setPartialBoundingRect] = useState4();
-  useEffect4(() => {
-    const consolidatedBlocks = /* @__PURE__ */ new Map();
-    for (const page of pages ?? []) {
-      const pageIndex = pages?.indexOf(page) ?? -1;
-      for (const block of page.blocks ?? []) {
-        const blockId = block.id ?? randomHash(12);
-        const found = consolidatedBlocks.get(blockId);
-        if (found !== void 0) consolidatedBlocks.set(blockId, {
-          ...found,
-          ...block,
-          displayOnPages: [
-            ...found.displayOnPages,
-            pageIndex
-          ]
-        });
-        else consolidatedBlocks.set(blockId, {
-          ...block,
-          displayOnPages: [pageIndex]
-        });
-      }
+    if (partialBoundingRect?.width !== undefined) {
+        customCssProps[`--${publicClassName}-screen-width`] = `${partialBoundingRect.width}px`;
+        customCssProps['--PRIVATE-width'] = `${partialBoundingRect.width}px`;
     }
-    const consolidatedStickyBlocks = new Map(Array.from(consolidatedBlocks).filter((e) => {
-      const block = e[1];
-      return block.depth === "back" || block.depth === "front";
-    }));
-    setStickyBlocks(consolidatedStickyBlocks);
-  }, [pages]);
-  const lazyLoadedBackBlocks = Array.from(stickyBlocks).filter(
-    ([, block]) => block.depth === "back" && block.displayOnPages.some((dispPage) => {
-      const absDiff = Math.abs(dispPage - currentPagePos);
-      return absDiff <= stickyBlocksLazyLoadDistance;
-    })
-  ).map(([, block]) => block).sort((a, b) => {
-    return (a.zIndex ?? -Infinity) - (b.zIndex ?? -Infinity);
-  });
-  const lazyLoadedFrontBlocks = Array.from(stickyBlocks).filter(
-    ([, block]) => block.depth === "front" && block.displayOnPages.some((dispPage) => {
-      const absDiff = Math.abs(dispPage - currentPagePos);
-      return absDiff <= stickyBlocksLazyLoadDistance;
-    })
-  ).map(([, block]) => block).sort((a, b) => {
-    return (a.zIndex ?? -Infinity) - (b.zIndex ?? -Infinity);
-  });
-  const handleTopBoundDetect = (e) => setTopVis(e.ioEntry?.isIntersecting ?? false);
-  const handleCntDetect = (e) => setCntVis(e.ioEntry?.isIntersecting ?? false);
-  const handleBtmBoundDetect = (e) => setBtmVis(e.ioEntry?.isIntersecting ?? false);
-  const handlePageChange = (pages2) => {
-    const curPagePos = pages2.findIndex((page) => page.position === "curr");
-    if (curPagePos === -1) return;
-    return setCurrentPagePos(curPagePos);
-  };
-  const handleResize = ({ boundingClientRect }) => {
-    if (partialBoundingRect === void 0 || boundingClientRect.left !== partialBoundingRect.left || boundingClientRect.right !== partialBoundingRect.right || boundingClientRect.height !== partialBoundingRect.height || boundingClientRect.width !== partialBoundingRect.width) setPartialBoundingRect(boundingClientRect);
-  };
-  const c = clss(scrllgngn, { cssModule: cssModule4 });
-  const rootClss = mergeClassNames(
-    c(null, {
-      "top-visible": topVisible,
-      "content-visible": contentVisible,
-      "bottom-visible": bottomVisible,
-      "force-stick-blocks-before": forceStickBlocks === "before",
-      "force-stick-blocks-after": forceStickBlocks === "after",
-      "force-stick-blocks-both": forceStickBlocks === "both"
-    }),
-    className
-  );
-  const customCssProps = {};
-  if (partialBoundingRect?.left !== void 0) {
-    customCssProps[`--${scrllgngn}-screen-left`] = `${partialBoundingRect.left}px`;
-    customCssProps["--PRIVATE-left"] = `${partialBoundingRect.left}px`;
-  }
-  if (partialBoundingRect?.right !== void 0) {
-    customCssProps[`--${scrllgngn}-screen-right`] = `${partialBoundingRect.right}px`;
-    customCssProps["--PRIVATE-right"] = `${partialBoundingRect.right}px`;
-  }
-  if (partialBoundingRect?.width !== void 0) {
-    customCssProps[`--${scrllgngn}-screen-width`] = `${partialBoundingRect.width}px`;
-    customCssProps["--PRIVATE-width"] = `${partialBoundingRect.width}px`;
-  }
-  if (partialBoundingRect?.height !== void 0) {
-    customCssProps[`--${scrllgngn}-screen-height`] = `${partialBoundingRect.height}px`;
-    customCssProps["--PRIVATE-height"] = `${partialBoundingRect.height}px`;
-  }
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      className: rootClss,
-      "data-current-page-pos": currentPagePos,
-      style: { ...customCssProps },
-      children: /* @__PURE__ */ jsxs(ResizeObserverComponent, { onResized: handleResize, children: [
-        /* @__PURE__ */ jsx4("div", { className: c("top-bound"), children: /* @__PURE__ */ jsx4(IntersectionObserverComponent, { onIntersected: handleTopBoundDetect }) }),
-        /* @__PURE__ */ jsx4("div", { className: c("back-blocks"), children: lazyLoadedBackBlocks.map((block, blockPos) => {
-          const isActive = block.displayOnPages.includes(currentPagePos);
-          const blockClss = c("back-block", {
-            active: isActive,
-            "lazy-loaded": !isActive
-          });
-          return /* @__PURE__ */ jsx4(
-            "div",
-            {
-              className: blockClss,
-              style: { zIndex: blockPos },
-              children: block.children
-            }
-          );
-        }) }),
-        /* @__PURE__ */ jsx4("div", { className: c("front-blocks"), children: lazyLoadedFrontBlocks.map((block, blockPos) => {
-          const isActive = block.displayOnPages.includes(currentPagePos);
-          const blockClss = c("front-block", {
-            active: isActive,
-            "lazy-loaded": !isActive
-          });
-          return /* @__PURE__ */ jsx4(
-            "div",
-            {
-              className: blockClss,
-              style: { zIndex: blockPos },
-              children: block.children
-            }
-          );
-        }) }),
-        /* @__PURE__ */ jsx4("div", { className: c("scrolling-content"), children: /* @__PURE__ */ jsx4(IntersectionObserverComponent, { onIntersected: handleCntDetect, children: /* @__PURE__ */ jsx4(
-          Paginator,
-          {
-            thresholdOffsetPercent,
-            stateHandlers: {
-              pageChanged: handlePageChange
-            },
-            children: pages?.map((page) => {
-              const scrollBlocks = page.blocks?.filter((b) => b.depth === "scroll" || b.depth === void 0) ?? [];
-              return /* @__PURE__ */ jsx4(Fragment, { children: scrollBlocks.map((b) => b.children) });
-            })
-          }
-        ) }) }),
-        /* @__PURE__ */ jsx4("div", { className: c("bottom-bound"), children: /* @__PURE__ */ jsx4(IntersectionObserverComponent, { onIntersected: handleBtmBoundDetect }) })
-      ] })
+    if (partialBoundingRect?.height !== undefined) {
+        customCssProps[`--${publicClassName}-screen-height`] = `${partialBoundingRect.height}px`;
+        customCssProps['--PRIVATE-height'] = `${partialBoundingRect.height}px`;
     }
-  );
-};
-export {
-  Scrllgngn
+    return _jsx("div", { className: rootClss, "data-current-page-pos": currentPagePos, style: { ...customCssProps }, children: _jsxs(ResizeObserverComponent, { onResized: handleResize, children: [_jsx("div", { className: c('top-bound'), children: _jsx(IntersectionObserverComponent, { onIntersected: handleTopBoundDetect }) }), _jsx("div", { className: c('back-blocks'), children: lazyLoadedBackBlocks.map((block, blockPos) => {
+                        const isActive = block.displayOnPages.includes(currentPagePos);
+                        const blockClss = c('back-block', {
+                            active: isActive,
+                            'lazy-loaded': !isActive
+                        });
+                        return _jsx("div", { className: blockClss, style: { zIndex: blockPos }, children: block.children });
+                    }) }), _jsx("div", { className: c('front-blocks'), children: lazyLoadedFrontBlocks.map((block, blockPos) => {
+                        const isActive = block.displayOnPages.includes(currentPagePos);
+                        const blockClss = c('front-block', {
+                            active: isActive,
+                            'lazy-loaded': !isActive
+                        });
+                        return _jsx("div", { className: blockClss, style: { zIndex: blockPos }, children: block.children });
+                    }) }), _jsx("div", { className: c('scrolling-content'), children: _jsx(IntersectionObserverComponent, { onIntersected: handleCntDetect, children: _jsx(Paginator, { thresholdOffsetPercent: thresholdOffsetPercent, stateHandlers: {
+                                pageChanged: handlePageChange
+                            }, children: pages?.map(page => {
+                                const scrollBlocks = page.blocks
+                                    ?.filter(b => b.depth === 'scroll' || b.depth === undefined) ?? [];
+                                // eslint-disable-next-line @typescript-eslint/promise-function-async
+                                return _jsx(_Fragment, { children: scrollBlocks.map(b => b.children) });
+                            }) }) }) }), _jsx("div", { className: c('bottom-bound'), children: _jsx(IntersectionObserverComponent, { onIntersected: handleBtmBoundDetect }) })] }) });
 };