@design-edito/tools 0.4.3 → 0.4.5

package/components/ScrollListener/index.js

@@ -1,29 +1,134 @@
+// src/components/ScrollListener/index.tsx
 import {
-  randomHash
-} from "../../chunks/chunk-75BICI4L.js";
-import "../../chunks/chunk-OGBUSUE6.js";
-import {
-  IntersectionObserverComponent
-} from "../../chunks/chunk-F2YJXIT7.js";
-import {
-  scrollListener
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
+  useEffect as useEffect2,
+  useRef as useRef2,
+  useState as useState2,
+  useCallback as useCallback2
+} from "react";
 
-// src/components/ScrollListener/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/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/IntersectionObserver/index.tsx
 import {
-  useEffect,
-  useRef,
   useState,
+  useRef,
+  useEffect,
   useCallback
 } from "react";
 
+// src/components/public-classnames.ts
+var intersectionObserver = "dsed-intersection-observer";
+var scrollListener = "dsed-scroll-listener";
+
+// 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/ScrollListener/utils.tsx
 var globalDocumentScrollListener = () => {
   const win = {
@@ -77,8 +182,8 @@ var unregister = (id) => {
 };
 
 // src/components/ScrollListener/index.tsx
-import cssModule from "./styles.module.css";
-import { jsx } from "react/jsx-runtime";
+import cssModule2 from "./styles.module.css";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var ScrollListener = ({
   startOnVisible,
   stopOnHidden,
@@ -86,19 +191,19 @@ var ScrollListener = ({
   className,
   children
 }) => {
-  const [privateId] = useState(randomHash(6));
-  const [scrollData, setScrollData] = useState();
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [privateId] = useState2(randomHash(6));
+  const [scrollData, setScrollData] = useState2();
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     stateHandlers?.scrollDataChanged?.(scrollData);
   }, [scrollData]);
-  useEffect(() => {
+  useEffect2(() => {
     register({ id: privateId, rootRef, setData: setScrollData });
     return () => {
       unregister(privateId);
     };
   }, []);
-  const handleIntersection = useCallback(({ ioEntry, observer }) => {
+  const handleIntersection = useCallback2(({ ioEntry, observer }) => {
     stateHandlers?.visibilityChanged?.(ioEntry?.isIntersecting ?? false);
     if (startOnVisible !== true && stopOnHidden !== true) return;
     if (ioEntry?.isIntersecting === true && startOnVisible === true) register({ id: privateId, rootRef, setData: setScrollData });
@@ -148,18 +253,18 @@ var ScrollListener = ({
     customProps[`--${scrollListener}-self-inner-scrolled-x-ratio`] = innerScrollXRatio;
     customProps[`--${scrollListener}-self-outer-scrolled-x-ratio`] = outerScrollXRatio;
   }
-  const c = clss(scrollListener, { cssModule });
+  const c = clss(scrollListener, { cssModule: cssModule2 });
   const rootClss = mergeClassNames(
     c(),
     className
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       className: rootClss,
       ref: rootRef,
       style: { ...customProps },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx2(
         IntersectionObserverComponent,
         {
           onIntersected: handleIntersection,

package/components/Sequencer/index.js

@@ -1,38 +1,140 @@
+// src/components/Sequencer/index.tsx
 import {
-  absoluteModulo
-} from "../../chunks/chunk-DNIOWD7K.js";
-import {
-  clamp
-} from "../../chunks/chunk-OSAXBA7G.js";
-import {
-  IntersectionObserverComponent
-} from "../../chunks/chunk-F2YJXIT7.js";
-import {
-  sequencer
-} 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 useState2,
+  useEffect as useEffect2,
+  useCallback as useCallback2,
+  Children as Children2,
+  useRef as useRef2
+} from "react";
 
-// src/components/Sequencer/index.tsx
+// src/agnostic/numbers/absolute-modulo/index.ts
+function absoluteModulo(nbr, modulo) {
+  return (nbr % modulo + modulo) % modulo;
+}
+
+// src/agnostic/numbers/clamp/index.ts
+function clamp(num, bound1, bound2) {
+  const min = Math.min(bound1, bound2);
+  const max = Math.max(bound1, bound2);
+  return Math.min(Math.max(num, min), max);
+}
+
+// src/components/IntersectionObserver/index.tsx
 import {
   useState,
+  useRef,
   useEffect,
-  useCallback,
-  Children as Children2,
-  useRef
+  useCallback
 } 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 intersectionObserver = "dsed-intersection-observer";
+var sequencer = "dsed-sequencer";
+
+// 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/Sequencer/index.controlled.tsx
 import {
   Children
 } from "react";
-import cssModule from "./styles.module.css";
-import { jsx } from "react/jsx-runtime";
+import cssModule2 from "./styles.module.css";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var SequencerControlled = ({
   step = 0,
   activateOnStep,
@@ -41,13 +143,13 @@ var SequencerControlled = ({
   className,
   children
 }) => {
-  const c = clss(sequencer, { cssModule });
+  const c = clss(sequencer, { cssModule: cssModule2 });
   const rootClss = mergeClassNames(c(null, _modifiers), className);
   const rootAttributes = Object.entries({ ..._dataAttributes }).reduce(
     (acc, [key, val]) => ({ ...acc, [`data-${key}`]: val }),
     { "data-step": step }
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       className: rootClss,
@@ -62,14 +164,14 @@ var SequencerControlled = ({
           prev: isPrevious,
           next: isNext
         });
-        return /* @__PURE__ */ jsx("div", { className: childClss, children: child });
+        return /* @__PURE__ */ jsx2("div", { className: childClss, children: child });
       })
     }
   );
 };
 
 // src/components/Sequencer/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var Sequencer = ({
   defaultStep,
   tempo = 60,
@@ -86,12 +188,12 @@ var Sequencer = ({
   ...controlledProps
 }) => {
   const { step, activateOnStep, children } = controlledProps;
-  const [internalPlay, setInternalPlay] = useState(play ?? false);
-  const [internalStep, setInternalStep] = useState(step ?? defaultStep ?? 0);
+  const [internalPlay, setInternalPlay] = useState2(play ?? false);
+  const [internalStep, setInternalStep] = useState2(step ?? defaultStep ?? 0);
   const actualPlay = play ?? internalPlay;
   const actualStep = step ?? internalStep;
-  const actualPlayRef = useRef(actualPlay);
-  useEffect(() => {
+  const actualPlayRef = useRef2(actualPlay);
+  useEffect2(() => {
     const clampedTempo = Math.max(tempo, 1);
     if (!actualPlay || step !== void 0) return;
     const interval = window.setInterval(() => {
@@ -108,8 +210,8 @@ var Sequencer = ({
     const rightClamp = clampLast === true ? stepsCount - 1 : Infinity;
     forwardedStep = clamp(actualStep, leftClamp, rightClamp);
   }
-  const forwardedStepRef = useRef(forwardedStep);
-  useEffect(() => {
+  const forwardedStepRef = useRef2(forwardedStep);
+  useEffect2(() => {
     if (actualPlay !== actualPlayRef.current) {
       actualPlayRef.current = actualPlay;
       stateHandlers?.isPlaying?.(actualPlay);
@@ -119,7 +221,7 @@ var Sequencer = ({
       stateHandlers?.stepChanged?.(forwardedStep);
     }
   }, [actualPlay, forwardedStep]);
-  const handleIntersection = useCallback(({ ioEntry, observer }) => {
+  const handleIntersection = useCallback2(({ ioEntry, observer }) => {
     if (play === true || step !== void 0) return;
     const { isIntersecting } = ioEntry ?? {};
     actionHandlers?.intersected?.({ ioEntry, observer });
@@ -139,11 +241,11 @@ var Sequencer = ({
     step,
     actionHandlers
   ]);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     IntersectionObserverComponent,
     {
       onIntersected: handleIntersection,
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         SequencerControlled,
         {
           ...controlledProps,

package/components/ShadowRoot/index.js

@@ -1,14 +1,3 @@
-import {
-  shadowRoot
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
-
 // src/components/ShadowRoot/index.tsx
 import {
   useRef,
@@ -16,6 +5,50 @@ import {
   useState
 } from "react";
 import { createPortal } from "react-dom";
+
+// 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/public-classnames.ts
+var shadowRoot = "dsed-shadow-root";
+
+// 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/ShadowRoot/index.tsx
 import cssModule from "./styles.module.css";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ShadowRootComponent = ({