@design-edito/tools 0.4.4 → 0.4.5

package/components/ResizeObserver/index.js

@@ -1,10 +1,122 @@
+// src/components/ResizeObserver/index.tsx
 import {
-  ResizeObserverComponent
-} from "../../chunks/chunk-GG4EFNMU.js";
-import "../../chunks/chunk-IEZ3O5OF.js";
-import "../../chunks/chunk-TRFZSKNB.js";
-import "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
+  useRef,
+  useEffect,
+  useState
+} 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);
+        });
+      });
+    });
+    return outputClassesArr.join(" ");
+  };
+}
+
+// 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 resizeObserver = "dsed-resize-observer";
+
+// src/components/ResizeObserver/index.tsx
+import cssModule from "./style.module.css";
+import { jsx } from "react/jsx-runtime";
+var ResizeObserverComponent = ({
+  className,
+  onResized,
+  children
+}) => {
+  const [roEntry, setRoEntry] = useState();
+  const rootRef = useRef(null);
+  const observerRef = useRef(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);
+  };
+  useEffect(() => {
+    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 });
+  const rootClss = mergeClassNames(c(null), className);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...dataAttributes,
+      className: rootClss,
+      ref: rootRef,
+      style: { ...cssCustomProps },
+      children
+    }
+  );
+};
 export {
   ResizeObserverComponent
 };

package/components/Scrllgngn/index.js

@@ -1,34 +1,324 @@
+// src/components/Scrllgngn/index.tsx
 import {
-  Paginator
-} from "../../chunks/chunk-AC4UMIWM.js";
-import {
-  randomHash
-} from "../../chunks/chunk-75BICI4L.js";
-import "../../chunks/chunk-OGBUSUE6.js";
-import {
-  ResizeObserverComponent
-} from "../../chunks/chunk-GG4EFNMU.js";
-import {
-  IntersectionObserverComponent
-} from "../../chunks/chunk-F2YJXIT7.js";
-import {
-  scrllgngn
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
+  useState as useState4,
+  useEffect as useEffect4
+} from "react";
 
-// src/components/Scrllgngn/index.tsx
+// 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);
+        });
+      });
+    });
+    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,
-  useEffect
+  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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, []);
+  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
+        );
+      })
+    }
+  ) });
+};
+
+// 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
+    }
+  );
+};
+
+// 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,
@@ -36,13 +326,13 @@ var Scrllgngn = ({
   forceStickBlocks,
   className
 }) => {
-  const [topVisible, setTopVis] = useState(false);
-  const [contentVisible, setCntVis] = useState(false);
-  const [bottomVisible, setBtmVis] = useState(false);
-  const [currentPagePos, setCurrentPagePos] = useState(0);
-  const [stickyBlocks, setStickyBlocks] = useState(/* @__PURE__ */ new Map());
-  const [partialBoundingRect, setPartialBoundingRect] = useState();
-  useEffect(() => {
+  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;
@@ -96,7 +386,7 @@ var Scrllgngn = ({
   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 });
+  const c = clss(scrllgngn, { cssModule: cssModule4 });
   const rootClss = mergeClassNames(
     c(null, {
       "top-visible": topVisible,
@@ -125,21 +415,21 @@ var Scrllgngn = ({
     customCssProps[`--${scrllgngn}-screen-height`] = `${partialBoundingRect.height}px`;
     customCssProps["--PRIVATE-height"] = `${partialBoundingRect.height}px`;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: rootClss,
       "data-current-page-pos": currentPagePos,
       style: { ...customCssProps },
       children: /* @__PURE__ */ jsxs(ResizeObserverComponent, { onResized: handleResize, children: [
-        /* @__PURE__ */ jsx("div", { className: c("top-bound"), children: /* @__PURE__ */ jsx(IntersectionObserverComponent, { onIntersected: handleTopBoundDetect }) }),
-        /* @__PURE__ */ jsx("div", { className: c("back-blocks"), children: lazyLoadedBackBlocks.map((block, blockPos) => {
+        /* @__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__ */ jsx(
+          return /* @__PURE__ */ jsx4(
             "div",
             {
               className: blockClss,
@@ -148,13 +438,13 @@ var Scrllgngn = ({
             }
           );
         }) }),
-        /* @__PURE__ */ jsx("div", { className: c("front-blocks"), children: lazyLoadedFrontBlocks.map((block, blockPos) => {
+        /* @__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__ */ jsx(
+          return /* @__PURE__ */ jsx4(
             "div",
             {
               className: blockClss,
@@ -163,7 +453,7 @@ var Scrllgngn = ({
             }
           );
         }) }),
-        /* @__PURE__ */ jsx("div", { className: c("scrolling-content"), children: /* @__PURE__ */ jsx(IntersectionObserverComponent, { onIntersected: handleCntDetect, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx4("div", { className: c("scrolling-content"), children: /* @__PURE__ */ jsx4(IntersectionObserverComponent, { onIntersected: handleCntDetect, children: /* @__PURE__ */ jsx4(
           Paginator,
           {
             thresholdOffsetPercent,
@@ -172,11 +462,11 @@ var Scrllgngn = ({
             },
             children: pages?.map((page) => {
               const scrollBlocks = page.blocks?.filter((b) => b.depth === "scroll" || b.depth === void 0) ?? [];
-              return /* @__PURE__ */ jsx(Fragment, { children: scrollBlocks.map((b) => b.children) });
+              return /* @__PURE__ */ jsx4(Fragment, { children: scrollBlocks.map((b) => b.children) });
             })
           }
         ) }) }),
-        /* @__PURE__ */ jsx("div", { className: c("bottom-bound"), children: /* @__PURE__ */ jsx(IntersectionObserverComponent, { onIntersected: handleBtmBoundDetect }) })
+        /* @__PURE__ */ jsx4("div", { className: c("bottom-bound"), children: /* @__PURE__ */ jsx4(IntersectionObserverComponent, { onIntersected: handleBtmBoundDetect }) })
       ] })
     }
   );