@design-edito/tools 0.4.5 → 0.4.11

package/components/ScrollListener/index.js

@@ -1,279 +1,100 @@
-// src/components/ScrollListener/index.tsx
-import {
-  useEffect as useEffect2,
-  useRef as useRef2,
-  useState as useState2,
-  useCallback as useCallback2
-} 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/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 {
-  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 = {
-    height: window.innerHeight,
-    width: window.innerWidth
-  };
-  const html = {
-    width: document.body.parentElement?.offsetWidth ?? 0,
-    height: document.body.parentElement?.offsetHeight ?? 0
-  };
-  const scroll = {
-    x: window.scrollX,
-    y: window.scrollY
-  };
-  const viewport = {
-    minX: scroll.x,
-    minY: scroll.y,
-    maxX: scroll.x + win.width,
-    maxY: scroll.y + win.height
-  };
-  return { win, html, scroll, viewport };
-};
-var localElementScrollListener = (div) => {
-  const offsetX = div.offsetLeft;
-  const offsetY = div.offsetTop;
-  const width = div.offsetWidth;
-  const height = div.offsetHeight;
-  return {
-    offsetX,
-    offsetY,
-    width,
-    height
-  };
-};
-window.addEventListener("scroll", () => {
-  const global = globalDocumentScrollListener();
-  Array.from(registeredIds).forEach(([, item]) => {
-    const { rootRef, setData } = item;
-    if (rootRef.current === null) return;
-    const local = localElementScrollListener(rootRef.current);
-    setData({ global, local });
-  });
-});
-var registeredIds = /* @__PURE__ */ new Map();
-var register = (props) => {
-  const { id, rootRef, setData } = props;
-  registeredIds.set(id, { id, rootRef, setData });
-};
-var unregister = (id) => {
-  registeredIds.delete(id);
-};
-
-// src/components/ScrollListener/index.tsx
-import cssModule2 from "./styles.module.css";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ScrollListener = ({
-  startOnVisible,
-  stopOnHidden,
-  stateHandlers,
-  className,
-  children
-}) => {
-  const [privateId] = useState2(randomHash(6));
-  const [scrollData, setScrollData] = useState2();
-  const rootRef = useRef2(null);
-  useEffect2(() => {
-    stateHandlers?.scrollDataChanged?.(scrollData);
-  }, [scrollData]);
-  useEffect2(() => {
-    register({ id: privateId, rootRef, setData: setScrollData });
-    return () => {
-      unregister(privateId);
-    };
-  }, []);
-  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 });
-    if (ioEntry?.isIntersecting !== true && stopOnHidden === true) unregister(privateId);
-  }, [startOnVisible, stopOnHidden]);
-  const customProps = Object.entries(
-    scrollData !== void 0 ? {
-      // Global
-      [`--${scrollListener}-window-width`]: scrollData.global.win.width,
-      [`--${scrollListener}-window-height`]: scrollData.global.win.height,
-      [`--${scrollListener}-html-width`]: scrollData.global.html.width,
-      [`--${scrollListener}-html-height`]: scrollData.global.html.height,
-      [`--${scrollListener}-scroll-x`]: scrollData.global.scroll.x,
-      [`--${scrollListener}-scroll-y`]: scrollData.global.scroll.y,
-      // Local
-      [`--${scrollListener}-width`]: scrollData.local.width,
-      [`--${scrollListener}-height`]: scrollData.local.height,
-      [`--${scrollListener}-offset-x`]: scrollData.local.offsetX,
-      [`--${scrollListener}-offset-y`]: scrollData.local.offsetY
-    } : {}
-  ).reduce((acc, [key, val]) => ({
-    ...acc,
-    [key]: val,
-    [`${key}-px`]: `${val}px`
-  }), {});
-  if (scrollData !== void 0) {
-    customProps[`--${scrollListener}-window-scrolled-x-ratio`] = scrollData.global.scroll.x / Math.max(scrollData.global.html.width - scrollData.global.win.width, 1);
-    customProps[`--${scrollListener}-window-scrolled-y-ratio`] = scrollData.global.scroll.y / Math.max(scrollData.global.html.height - scrollData.global.win.height, 1);
-    const topTouchesTop = scrollData.local.offsetY;
-    const topTouchesBottom = scrollData.local.offsetY - scrollData.global.win.height;
-    const bottomTouchesTop = scrollData.local.offsetY + scrollData.local.height;
-    const bottomTouchesBottom = scrollData.local.offsetY + scrollData.local.height - scrollData.global.win.height;
-    const leftTouchesLeft = scrollData.local.offsetX;
-    const leftTouchesRight = scrollData.local.offsetX - scrollData.global.win.width;
-    const rightTouchesLeft = scrollData.local.offsetX + scrollData.local.width;
-    const rightTouchesRight = scrollData.local.offsetX + scrollData.local.width - scrollData.global.win.width;
-    const innerYRange = [bottomTouchesBottom, topTouchesTop];
-    const outerYRange = [topTouchesBottom, bottomTouchesTop];
-    const innerXRange = [rightTouchesRight, leftTouchesLeft];
-    const outerXRange = [leftTouchesRight, rightTouchesLeft];
-    const innerScrollYRatio = (scrollData.global.scroll.y - innerYRange[0]) / Math.max(innerYRange[1] - innerYRange[0], 1);
-    const outerScrollYRatio = (scrollData.global.scroll.y - outerYRange[0]) / Math.max(outerYRange[1] - outerYRange[0], 1);
-    const innerScrollXRatio = (scrollData.global.scroll.x - innerXRange[0]) / Math.max(innerXRange[1] - innerXRange[0], 1);
-    const outerScrollXRatio = (scrollData.global.scroll.x - outerXRange[0]) / Math.max(outerXRange[1] - outerXRange[0], 1);
-    customProps[`--${scrollListener}-self-inner-scrolled-y-ratio`] = innerScrollYRatio;
-    customProps[`--${scrollListener}-self-outer-scrolled-y-ratio`] = outerScrollYRatio;
-    customProps[`--${scrollListener}-self-inner-scrolled-x-ratio`] = innerScrollXRatio;
-    customProps[`--${scrollListener}-self-outer-scrolled-x-ratio`] = outerScrollXRatio;
-  }
-  const c = clss(scrollListener, { cssModule: cssModule2 });
-  const rootClss = mergeClassNames(
-    c(),
-    className
-  );
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: rootClss,
-      ref: rootRef,
-      style: { ...customProps },
-      children: /* @__PURE__ */ jsx2(
-        IntersectionObserverComponent,
-        {
-          onIntersected: handleIntersection,
-          children
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { IntersectionObserverComponent } from '../IntersectionObserver/index.js';
+import { scrollListener as publicClassName } from '../public-classnames.js';
+import { register, unregister } from './utils.js';
+import cssModule from './styles.module.css';
+/**
+ * Component that listens to global scroll events and exposes scroll-related data
+ * through CSS custom properties and optional state callbacks.
+ *
+ * The component measures both global scroll metrics (window size, document size,
+ * scroll offsets) and local metrics relative to the component (dimensions and
+ * position within the document).
+ *
+ * Computed values are exposed as CSS variables on the root element, enabling
+ * scroll-driven styling without additional JavaScript.
+ *
+ * Scroll observation can optionally start only when the component becomes visible
+ * and stop when it leaves the viewport.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A container element exposing scroll metrics through CSS variables and
+ * wrapping its children inside an IntersectionObserver boundary.
+ */
+export const ScrollListener = ({ startOnVisible, stopOnHidden, stateHandlers, className, children }) => {
+    const [privateId] = useState(randomHash(6));
+    const [scrollData, setScrollData] = useState();
+    const rootRef = useRef(null);
+    // Fx. dep. `scrollData` - State dispatcher
+    useEffect(() => {
+        stateHandlers?.scrollDataChanged?.(scrollData);
+    }, [scrollData]);
+    // Fx. no dep. - register / unregister to scroll listeners
+    useEffect(() => {
+        register({ id: privateId, rootRef, setData: setScrollData });
+        return () => { unregister(privateId); };
+    }, []);
+    const handleIntersection = useCallback(({ 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 });
+        if (ioEntry?.isIntersecting !== true && stopOnHidden === true)
+            unregister(privateId);
+    }, [startOnVisible, stopOnHidden]);
+    // Rendering
+    const customProps = Object
+        .entries(scrollData !== undefined
+        ? {
+            // Global
+            [`--${publicClassName}-window-width`]: scrollData.global.win.width,
+            [`--${publicClassName}-window-height`]: scrollData.global.win.height,
+            [`--${publicClassName}-html-width`]: scrollData.global.html.width,
+            [`--${publicClassName}-html-height`]: scrollData.global.html.height,
+            [`--${publicClassName}-scroll-x`]: scrollData.global.scroll.x,
+            [`--${publicClassName}-scroll-y`]: scrollData.global.scroll.y,
+            // Local
+            [`--${publicClassName}-width`]: scrollData.local.width,
+            [`--${publicClassName}-height`]: scrollData.local.height,
+            [`--${publicClassName}-offset-x`]: scrollData.local.offsetX,
+            [`--${publicClassName}-offset-y`]: scrollData.local.offsetY
         }
-      )
+        : {}).reduce((acc, [key, val]) => ({
+        ...acc,
+        [key]: val,
+        [`${key}-px`]: `${val}px`
+    }), {});
+    if (scrollData !== undefined) {
+        customProps[`--${publicClassName}-window-scrolled-x-ratio`] = (scrollData.global.scroll.x) / Math.max((scrollData.global.html.width - scrollData.global.win.width), 1);
+        customProps[`--${publicClassName}-window-scrolled-y-ratio`] = (scrollData.global.scroll.y) / Math.max((scrollData.global.html.height - scrollData.global.win.height), 1);
+        const topTouchesTop = scrollData.local.offsetY;
+        const topTouchesBottom = scrollData.local.offsetY - scrollData.global.win.height;
+        const bottomTouchesTop = scrollData.local.offsetY + scrollData.local.height;
+        const bottomTouchesBottom = (scrollData.local.offsetY + scrollData.local.height) - scrollData.global.win.height;
+        const leftTouchesLeft = scrollData.local.offsetX;
+        const leftTouchesRight = scrollData.local.offsetX - scrollData.global.win.width;
+        const rightTouchesLeft = scrollData.local.offsetX + scrollData.local.width;
+        const rightTouchesRight = (scrollData.local.offsetX + scrollData.local.width) - scrollData.global.win.width;
+        const innerYRange = [bottomTouchesBottom, topTouchesTop];
+        const outerYRange = [topTouchesBottom, bottomTouchesTop];
+        const innerXRange = [rightTouchesRight, leftTouchesLeft];
+        const outerXRange = [leftTouchesRight, rightTouchesLeft];
+        const innerScrollYRatio = (scrollData.global.scroll.y - innerYRange[0]) / Math.max((innerYRange[1] - innerYRange[0]), 1);
+        const outerScrollYRatio = (scrollData.global.scroll.y - outerYRange[0]) / Math.max((outerYRange[1] - outerYRange[0]), 1);
+        const innerScrollXRatio = (scrollData.global.scroll.x - innerXRange[0]) / Math.max((innerXRange[1] - innerXRange[0]), 1);
+        const outerScrollXRatio = (scrollData.global.scroll.x - outerXRange[0]) / Math.max((outerXRange[1] - outerXRange[0]), 1);
+        customProps[`--${publicClassName}-self-inner-scrolled-y-ratio`] = innerScrollYRatio;
+        customProps[`--${publicClassName}-self-outer-scrolled-y-ratio`] = outerScrollYRatio;
+        customProps[`--${publicClassName}-self-inner-scrolled-x-ratio`] = innerScrollXRatio;
+        customProps[`--${publicClassName}-self-outer-scrolled-x-ratio`] = outerScrollXRatio;
     }
-  );
-};
-export {
-  ScrollListener
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    return _jsx("div", { className: rootClss, ref: rootRef, style: { ...customProps }, children: _jsx(IntersectionObserverComponent, { onIntersected: handleIntersection, children: children }) });
 };

package/components/ScrollListener/utils.js

@@ -0,0 +1,51 @@
+export const globalDocumentScrollListener = () => {
+    const win = {
+        height: window.innerHeight,
+        width: window.innerWidth
+    };
+    const html = {
+        width: document.body.parentElement?.offsetWidth ?? 0,
+        height: document.body.parentElement?.offsetHeight ?? 0
+    };
+    const scroll = {
+        x: window.scrollX,
+        y: window.scrollY
+    };
+    const viewport = {
+        minX: scroll.x,
+        minY: scroll.y,
+        maxX: scroll.x + win.width,
+        maxY: scroll.y + win.height
+    };
+    return { win, html, scroll, viewport };
+};
+export const localElementScrollListener = (div) => {
+    const offsetX = div.offsetLeft;
+    const offsetY = div.offsetTop;
+    const width = div.offsetWidth;
+    const height = div.offsetHeight;
+    return {
+        offsetX,
+        offsetY,
+        width,
+        height
+    };
+};
+window.addEventListener('scroll', () => {
+    const global = globalDocumentScrollListener();
+    Array.from(registeredIds).forEach(([, item]) => {
+        const { rootRef, setData } = item;
+        if (rootRef.current === null)
+            return;
+        const local = localElementScrollListener(rootRef.current);
+        setData({ global, local });
+    });
+});
+export const registeredIds = new Map();
+export const register = (props) => {
+    const { id, rootRef, setData } = props;
+    registeredIds.set(id, { id, rootRef, setData });
+};
+export const unregister = (id) => {
+    registeredIds.delete(id);
+};

package/components/Sequencer/index.controlled.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { sequencer as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Controlled sequencer component. Renders each child inside a classifier
+ * wrapper and assigns step-relative modifiers based on `step` and the optional
+ * `activateOnStep` override map.
+ *
+ * This component is purely presentational and holds no internal state.
+ * It is designed to be driven by the uncontrolled wrapper, which handles
+ * timing, playback events, and derives the props passed here.
+ *
+ * ### Root element modifiers
+ * The root `<div>` receives the public class name defined by `sequencer` and
+ * the following BEM-style modifier classes, sourced from `_modifiers`:
+ * - `--playing` — when the sequence is actively progressing.
+ * - `--at-start` — when the current step is the first step.
+ * - `--at-end` — when the current step is the last step.
+ *
+ * ### Data attributes on the root element
+ * Derived from `_dataAttributes`, each key is prefixed with `data-`:
+ * - `data-tempo` — current playback tempo, when provided.
+ *
+ * ### Child wrapper elements
+ * Each child is wrapped in a `<div>` with the `__child` element class and
+ * exactly one of the following mutually exclusive modifiers:
+ * - `--active` — this child corresponds to the current step (or is included
+ * in `activateOnStep[step]`).
+ * - `--previous` — this child was active in a prior step.
+ * - `--next` — this child has not yet been reached.
+ *
+ * @param props - Component properties.
+ * @see {@link ControlledProps}
+ * @returns A root `<div>` containing one classifier wrapper per child.
+ */
+export const SequencerControlled = ({ step = 0, activateOnStep, _modifiers, _dataAttributes, className, children }) => {
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, _modifiers), className);
+    const rootAttributes = Object
+        .entries({ ..._dataAttributes })
+        .reduce((acc, [key, val]) => ({ ...acc, [`data-${key}`]: val }), { 'data-step': step });
+    return _jsx("div", { className: rootClss, ...rootAttributes, children: Children.toArray(children)
+            .map((child, childPos) => {
+            const thisStepActivateOnStep = activateOnStep?.[step];
+            const isPrevious = activateOnStep === undefined
+                ? childPos < step
+                : [...activateOnStep]
+                    .slice(0, step)
+                    .some(list => list.includes(childPos));
+            const isCurrent = activateOnStep === undefined
+                ? childPos === step
+                : Array.isArray(thisStepActivateOnStep)
+                    ? thisStepActivateOnStep.includes(childPos)
+                    : thisStepActivateOnStep === childPos;
+            const isNext = !isPrevious && !isCurrent;
+            const childClss = c('child', {
+                current: isCurrent,
+                prev: isPrevious,
+                next: isNext
+            });
+            return _jsx("div", { className: childClss, children: child });
+        }) });
+};