@design-edito/tools 0.4.5 → 0.4.11

package/components/Sequencer/index.js

@@ -1,266 +1,109 @@
-// src/components/Sequencer/index.tsx
-import {
-  useState as useState2,
-  useEffect as useEffect2,
-  useCallback as useCallback2,
-  Children as Children2,
-  useRef as useRef2
-} from "react";
-
-// 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
-} 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
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, Children, useRef } from 'react';
+import { absoluteModulo } from '../../agnostic/numbers/absolute-modulo/index.js';
+import { clamp } from '../../agnostic/numbers/clamp/index.js';
+import { IntersectionObserverComponent } from '../IntersectionObserver/index.js';
+import { SequencerControlled } from './index.controlled.js';
+/**
+ * Uncontrolled, self-advancing sequencer component. Drives a
+ * {@link SequencerControlled} instance with an internal tempo-based interval,
+ * optional loop/clamp boundary behaviour, and viewport-driven play/reset triggers
+ * via an {@link IntersectionObserverComponent}.
+ *
+ * Supports mixed controlled/uncontrolled usage: passing `step` disables the
+ * internal interval while still applying loop/clamp arithmetic before forwarding
+ * to the controlled layer. Passing `play` disables internal play state management
+ * while still allowing viewport handlers to fire `actionHandlers.intersected`.
+ *
+ * ### Forwarded modifiers to {@link SequencerControlled}
+ * The following `_modifiers` are computed and injected automatically:
+ * - `playing` — `true` when the effective play state is active.
+ * - `at-start` — `true` when the forwarded step is `0`.
+ * - `at-end` — `true` when the forwarded step equals `stepsCount - 1`.
+ *
+ * ### Forwarded data attributes to {@link SequencerControlled}
+ * - `data-tempo` — the current `tempo` value.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @see {@link SequencerControlled}
+ * @returns An {@link IntersectionObserverComponent} wrapping a
+ * {@link SequencerControlled} with the computed step and modifiers applied.
+ */
+export const Sequencer = ({ defaultStep, tempo = 60, play, loop, clampFirst, clampLast, resetOnVisible, resetOnHidden, playOnVisible, pauseOnHidden, actionHandlers, stateHandlers, ...controlledProps }) => {
+    // State
+    const { step, activateOnStep, children } = controlledProps;
+    const [internalPlay, setInternalPlay] = useState(play ?? false);
+    const [internalStep, setInternalStep] = useState(step ?? defaultStep ?? 0);
+    const actualPlay = play ?? internalPlay;
+    const actualStep = step ?? internalStep;
+    const actualPlayRef = useRef(actualPlay);
+    // Effects
+    useEffect(() => {
+        const clampedTempo = Math.max(tempo, 1);
+        if (!actualPlay || step !== undefined)
+            return;
+        const interval = window.setInterval(() => {
+            setInternalStep(s => s + 1);
+        }, 1000 / (clampedTempo / 60));
+        return () => window.clearInterval(interval);
+    }, [actualPlay, tempo, step]);
+    // Forwarded step calculation
+    const stepsCount = activateOnStep !== undefined
+        ? activateOnStep.length
+        : Children.toArray(children).length;
+    let forwardedStep;
+    if (loop === true) {
+        forwardedStep = absoluteModulo(actualStep, stepsCount);
     }
-  );
-};
-
-// src/components/Sequencer/index.controlled.tsx
-import {
-  Children
-} from "react";
-import cssModule2 from "./styles.module.css";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var SequencerControlled = ({
-  step = 0,
-  activateOnStep,
-  _modifiers,
-  _dataAttributes,
-  className,
-  children
-}) => {
-  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__ */ jsx2(
-    "div",
-    {
-      className: rootClss,
-      ...rootAttributes,
-      children: Children.toArray(children).map((child, childPos) => {
-        const thisStepActivateOnStep = activateOnStep?.[step];
-        const isPrevious = activateOnStep === void 0 ? childPos < step : [...activateOnStep].slice(0, step).some((list) => list.includes(childPos));
-        const isCurrent = activateOnStep === void 0 ? 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 /* @__PURE__ */ jsx2("div", { className: childClss, children: child });
-      })
-    }
-  );
-};
-
-// src/components/Sequencer/index.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Sequencer = ({
-  defaultStep,
-  tempo = 60,
-  play,
-  loop,
-  clampFirst,
-  clampLast,
-  resetOnVisible,
-  resetOnHidden,
-  playOnVisible,
-  pauseOnHidden,
-  actionHandlers,
-  stateHandlers,
-  ...controlledProps
-}) => {
-  const { step, activateOnStep, children } = controlledProps;
-  const [internalPlay, setInternalPlay] = useState2(play ?? false);
-  const [internalStep, setInternalStep] = useState2(step ?? defaultStep ?? 0);
-  const actualPlay = play ?? internalPlay;
-  const actualStep = step ?? internalStep;
-  const actualPlayRef = useRef2(actualPlay);
-  useEffect2(() => {
-    const clampedTempo = Math.max(tempo, 1);
-    if (!actualPlay || step !== void 0) return;
-    const interval = window.setInterval(() => {
-      setInternalStep((s) => s + 1);
-    }, 1e3 / (clampedTempo / 60));
-    return () => window.clearInterval(interval);
-  }, [actualPlay, tempo, step]);
-  const stepsCount = activateOnStep !== void 0 ? activateOnStep.length : Children2.toArray(children).length;
-  let forwardedStep;
-  if (loop === true) {
-    forwardedStep = absoluteModulo(actualStep, stepsCount);
-  } else {
-    const leftClamp = clampFirst === true ? 0 : -Infinity;
-    const rightClamp = clampLast === true ? stepsCount - 1 : Infinity;
-    forwardedStep = clamp(actualStep, leftClamp, rightClamp);
-  }
-  const forwardedStepRef = useRef2(forwardedStep);
-  useEffect2(() => {
-    if (actualPlay !== actualPlayRef.current) {
-      actualPlayRef.current = actualPlay;
-      stateHandlers?.isPlaying?.(actualPlay);
-    }
-    if (forwardedStep !== forwardedStepRef.current) {
-      forwardedStepRef.current = forwardedStep;
-      stateHandlers?.stepChanged?.(forwardedStep);
-    }
-  }, [actualPlay, forwardedStep]);
-  const handleIntersection = useCallback2(({ ioEntry, observer }) => {
-    if (play === true || step !== void 0) return;
-    const { isIntersecting } = ioEntry ?? {};
-    actionHandlers?.intersected?.({ ioEntry, observer });
-    if (isIntersecting === true) {
-      if (resetOnVisible === true) setInternalStep(0);
-      if (playOnVisible === true) setInternalPlay(true);
-    } else {
-      if (resetOnHidden === true) setInternalStep(0);
-      if (pauseOnHidden === true) setInternalPlay(false);
+    else {
+        const leftClamp = clampFirst === true ? 0 : -Infinity;
+        const rightClamp = clampLast === true ? stepsCount - 1 : Infinity;
+        forwardedStep = clamp(actualStep, leftClamp, rightClamp);
     }
-  }, [
-    resetOnVisible,
-    playOnVisible,
-    resetOnHidden,
-    pauseOnHidden,
-    play,
-    step,
-    actionHandlers
-  ]);
-  return /* @__PURE__ */ jsx3(
-    IntersectionObserverComponent,
-    {
-      onIntersected: handleIntersection,
-      children: /* @__PURE__ */ jsx3(
-        SequencerControlled,
-        {
-          ...controlledProps,
-          step: forwardedStep,
-          _modifiers: {
-            playing: actualPlay,
-            "at-start": forwardedStep === 0,
-            "at-end": forwardedStep === stepsCount - 1
-          },
-          _dataAttributes: { tempo }
+    const forwardedStepRef = useRef(forwardedStep);
+    // State change handlers
+    useEffect(() => {
+        if (actualPlay !== actualPlayRef.current) {
+            actualPlayRef.current = actualPlay;
+            stateHandlers?.isPlaying?.(actualPlay);
         }
-      )
-    }
-  );
-};
-export {
-  Sequencer
+        if (forwardedStep !== forwardedStepRef.current) {
+            forwardedStepRef.current = forwardedStep;
+            stateHandlers?.stepChanged?.(forwardedStep);
+        }
+    }, [actualPlay, forwardedStep]);
+    // Action handlers
+    const handleIntersection = useCallback(({ ioEntry, observer }) => {
+        if (play === true || step !== undefined)
+            return;
+        const { isIntersecting } = ioEntry ?? {};
+        actionHandlers?.intersected?.({ ioEntry, observer });
+        if (isIntersecting === true) {
+            if (resetOnVisible === true)
+                setInternalStep(0);
+            if (playOnVisible === true)
+                setInternalPlay(true);
+        }
+        else {
+            if (resetOnHidden === true)
+                setInternalStep(0);
+            if (pauseOnHidden === true)
+                setInternalPlay(false);
+        }
+    }, [
+        resetOnVisible,
+        playOnVisible,
+        resetOnHidden,
+        pauseOnHidden,
+        play,
+        step,
+        actionHandlers
+    ]);
+    // Rendering
+    return _jsx(IntersectionObserverComponent, { onIntersected: handleIntersection, children: _jsx(SequencerControlled, { ...controlledProps, step: forwardedStep, _modifiers: {
+                playing: actualPlay,
+                'at-start': forwardedStep === 0,
+                'at-end': forwardedStep === stepsCount - 1
+            }, _dataAttributes: { tempo } }) });
 };

package/components/ShadowRoot/index.js

@@ -1,97 +1,43 @@
-// src/components/ShadowRoot/index.tsx
-import {
-  useRef,
-  useEffect,
-  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 = ({
-  mode = "open",
-  delegatesFocus,
-  slotAssignment,
-  adoptedStyleSheets,
-  injectedStyles,
-  className,
-  children
-}) => {
-  const hostRef = useRef(null);
-  const [shadowRoot2, setShadowRoot] = useState(null);
-  const [styles, setStyles] = useState(injectedStyles);
-  useEffect(() => {
-    if (hostRef.current === null || shadowRoot2 !== null) return;
-    const root = hostRef.current.attachShadow({ mode, delegatesFocus, slotAssignment });
-    if (adoptedStyleSheets !== void 0 && "adoptedStyleSheets" in root) {
-      root.adoptedStyleSheets = adoptedStyleSheets;
-    }
-    if (injectedStyles !== void 0) setStyles(injectedStyles);
-    setShadowRoot(root);
-  }, [
-    mode,
-    delegatesFocus,
-    slotAssignment,
-    adoptedStyleSheets,
-    injectedStyles
-  ]);
-  const c = clss(shadowRoot, { cssModule });
-  const rootClss = mergeClassNames(c(), className);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: hostRef,
-      className: rootClss,
-      children: shadowRoot2 !== null && createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
-        styles !== void 0 && /* @__PURE__ */ jsx("style", { children: styles }),
-        children
-      ] }), shadowRoot2)
-    }
-  );
-};
-export {
-  ShadowRootComponent
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { shadowRoot as publicClassName } from '../public-classnames.js';
+import { mergeClassNames } from '../utils/index.js';
+import cssModule from './styles.module.css';
+/**
+ * Component that creates a Shadow Root on its host element and renders
+ * its children inside that Shadow Root using a React portal.
+ *
+ * @param props - Component properties
+ * @see {@link Props}
+ * @returns A host `div` element that owns the created Shadow Root.
+ */
+export const ShadowRootComponent = ({ mode = 'open', delegatesFocus, slotAssignment, adoptedStyleSheets, injectedStyles, className, children }) => {
+    // Refs, state & effects
+    const hostRef = useRef(null);
+    const [shadowRoot, setShadowRoot] = useState(null);
+    const [styles, setStyles] = useState(injectedStyles);
+    useEffect(() => {
+        if (hostRef.current === null || shadowRoot !== null)
+            return;
+        const root = hostRef.current.attachShadow({ mode, delegatesFocus, slotAssignment });
+        if (adoptedStyleSheets !== undefined
+            && 'adoptedStyleSheets' in root) {
+            root.adoptedStyleSheets = adoptedStyleSheets;
+        }
+        if (injectedStyles !== undefined)
+            setStyles(injectedStyles);
+        setShadowRoot(root);
+    }, [
+        mode,
+        delegatesFocus,
+        slotAssignment,
+        adoptedStyleSheets,
+        injectedStyles
+    ]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    return _jsx("div", { ref: hostRef, className: rootClss, children: shadowRoot !== null && createPortal(_jsxs(_Fragment, { children: [styles !== undefined && _jsx("style", { children: styles }), children] }), shadowRoot) });
 };