@design-edito/tools 0.5.19 → 0.5.21

package/agnostic/colors/convert/index.js

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-unsafe-type-assertion -- TransformedColor<C> can't be narrowed from a generic type param at compile time; every assertion here is guarded by an isX(...) runtime check immediately prior */
-/* eslint-disable max-lines */
 import { absoluteModulo } from '../../numbers/absolute-modulo/index.js';
 import { tidy } from '../tidy/index.js';
 import { cssColors } from '../cssColorsMap.js';

package/agnostic/css/index.d.ts

@@ -1,6 +1,6 @@
 export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
-export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
+export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as stylesSet from './styles-set/index.js'

package/agnostic/css/index.js

@@ -1,6 +1,6 @@
 export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
-export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
+export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as stylesSet from './styles-set/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.d.ts

@@ -4,24 +4,24 @@ export * as and from './and/index.js'
 export * as append from './append/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
+export * as clone from './clone/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
 export * as equals from './equals/index.js'
-export * as clone from './clone/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
-export * as length from './length/index.js'
 export * as initialize from './initialize/index.js'
-export * as join from './join/index.js'
+export * as length from './length/index.js'
 export * as map from './map/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
+export * as join from './join/index.js'
 export * as print from './print/index.js'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
@@ -37,16 +37,16 @@ export * as setproperty from './setproperty/index.js'
 export * as sorton from './sorton/index.js'
 export * as split from './split/index.js'
 export * as spread from './spread/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as toarray from './toarray/index.js'
+export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
+export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
 export * as tonumber from './tonumber/index.js'
-export * as tonodelist from './tonodelist/index.js'
 export * as torecord from './torecord/index.js'
 export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
+export * as totext from './totext/index.js'
 export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/index.js'
-export * as totext from './totext/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.js

@@ -4,24 +4,24 @@ export * as and from './and/index.js'
 export * as append from './append/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
+export * as clone from './clone/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
 export * as equals from './equals/index.js'
-export * as clone from './clone/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
-export * as length from './length/index.js'
 export * as initialize from './initialize/index.js'
-export * as join from './join/index.js'
+export * as length from './length/index.js'
 export * as map from './map/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
+export * as join from './join/index.js'
 export * as print from './print/index.js'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
@@ -37,16 +37,16 @@ export * as setproperty from './setproperty/index.js'
 export * as sorton from './sorton/index.js'
 export * as split from './split/index.js'
 export * as spread from './spread/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as toarray from './toarray/index.js'
+export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
+export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
 export * as tonumber from './tonumber/index.js'
-export * as tonodelist from './tonodelist/index.js'
 export * as torecord from './torecord/index.js'
 export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
+export * as totext from './totext/index.js'
 export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/index.js'
-export * as totext from './totext/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.d.ts

@@ -1,13 +1,13 @@
-export * as array from './array/index.js'
 export * as any from './any/index.js'
+export * as array from './array/index.js'
+export * as boolean from './boolean/index.js'
 export * as element from './element/index.js'
 export * as get from './get/index.js'
-export * as nodelist from './nodelist/index.js'
 export * as guess from './guess/index.js'
+export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
-export * as boolean from './boolean/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
-export * as string from './string/index.js'
 export * as ref from './ref/index.js'
+export * as string from './string/index.js'
 export * as text from './text/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.js

@@ -1,13 +1,13 @@
-export * as array from './array/index.js'
 export * as any from './any/index.js'
+export * as array from './array/index.js'
+export * as boolean from './boolean/index.js'
 export * as element from './element/index.js'
 export * as get from './get/index.js'
-export * as nodelist from './nodelist/index.js'
 export * as guess from './guess/index.js'
+export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
-export * as boolean from './boolean/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
-export * as string from './string/index.js'
 export * as ref from './ref/index.js'
+export * as string from './string/index.js'
 export * as text from './text/index.js'

package/agnostic/html/hyper-json/utils/index.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-lines, @typescript-eslint/no-unsafe-type-assertion -- generic type params (T/K/Value) and DOM NodeList casts here can't be narrowed from a generic/runtime check at compile time; guarded by runtime typeCheck(s)/instanceof checks immediately prior */
+/* eslint-disable @typescript-eslint/no-unsafe-type-assertion -- generic type params (T/K/Value) and DOM NodeList casts here can't be narrowed from a generic/runtime check at compile time; guarded by runtime typeCheck(s)/instanceof checks immediately prior */
 import * as Window from '../../../misc/crossenv/window/index.js';
 import { isRecord } from '../../../objects/is-record/index.js';
 import { recordMap } from '../../../objects/record-map/index.js';

package/agnostic/html/index.d.ts

@@ -1,10 +1,10 @@
 export * as deepSelect from './deep-select/index.js'
 export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
-export * as insertNode from './insert-node/index.js'
 export * as hyperJson from './hyper-json/index.js'
+export * as insertNode from './insert-node/index.js'
+export * as placeholders from './placeholders/index.js'
 export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
-export * as placeholders from './placeholders/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'

package/agnostic/html/index.js

@@ -1,10 +1,10 @@
 export * as deepSelect from './deep-select/index.js'
 export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
-export * as insertNode from './insert-node/index.js'
 export * as hyperJson from './hyper-json/index.js'
+export * as insertNode from './insert-node/index.js'
+export * as placeholders from './placeholders/index.js'
 export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
-export * as placeholders from './placeholders/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'

package/agnostic/index.d.ts

@@ -1,6 +1,6 @@
 export * as arrays from './arrays/index.js'
-export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
+export * as booleans from './booleans/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'

package/agnostic/index.js

@@ -1,6 +1,6 @@
 export * as arrays from './arrays/index.js'
-export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
+export * as booleans from './booleans/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'

package/agnostic/misc/index.d.ts

@@ -1,12 +1,12 @@
 export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
+export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
-export * as connection from './connection/index.js'
-export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as dataSize from './data-size/index.js'
+export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as logs from './logs/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
+export * as logs from './logs/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/misc/index.js

@@ -1,12 +1,12 @@
 export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
+export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
-export * as connection from './connection/index.js'
-export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as dataSize from './data-size/index.js'
+export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as logs from './logs/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
+export * as logs from './logs/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/misc/logs/index.d.ts

@@ -1,3 +1,3 @@
-export * as makeTextBlock from './make-text-block/index.js'
 export * as logger from './logger/index.js'
+export * as makeTextBlock from './make-text-block/index.js'
 export * as styles from './styles/index.js'

package/agnostic/misc/logs/index.js

@@ -1,3 +1,3 @@
-export * as makeTextBlock from './make-text-block/index.js'
 export * as logger from './logger/index.js'
+export * as makeTextBlock from './make-text-block/index.js'
 export * as styles from './styles/index.js'

package/agnostic/objects/index.d.ts

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
 export * as enums from './enums/index.js'
 export * as flattenGetters from './flatten-getters/index.js'
+export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
-export * as isObject from './is-object/index.js'
 export * as recordMap from './record-map/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'

package/agnostic/objects/index.js

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
 export * as enums from './enums/index.js'
 export * as flattenGetters from './flatten-getters/index.js'
+export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
-export * as isObject from './is-object/index.js'
 export * as recordMap from './record-map/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'

package/agnostic/random/index.d.ts

@@ -1,3 +1,3 @@
-export * as hexChar from './hex-char/index.js'
 export * as random from './random/index.js'
 export * as uuid from './uuid/index.js'
+export * as hexChar from './hex-char/index.js'

package/agnostic/random/index.js

@@ -1,3 +1,3 @@
-export * as hexChar from './hex-char/index.js'
 export * as random from './random/index.js'
 export * as uuid from './uuid/index.js'
+export * as hexChar from './hex-char/index.js'

package/agnostic/strings/index.d.ts

@@ -1,7 +1,7 @@
 export * as charCodes from './char-codes/index.js'
+export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
-export * as matches from './matches/index.js'
 export * as replaceAll from './replace-all/index.js'
 export * as splitTrim from './split-trim/index.js'
 export * as toAlphanum from './to-alphanum/index.js'

package/agnostic/strings/index.js

@@ -1,7 +1,7 @@
 export * as charCodes from './char-codes/index.js'
+export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
-export * as matches from './matches/index.js'
 export * as replaceAll from './replace-all/index.js'
 export * as splitTrim from './split-trim/index.js'
 export * as toAlphanum from './to-alphanum/index.js'

package/agnostic/time/index.d.ts

@@ -1,5 +1,5 @@
+export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
 export * as timeout from './timeout/index.js'
-export * as dates from './dates/index.js'
 export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'

package/agnostic/time/index.js

@@ -1,5 +1,5 @@
+export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
 export * as timeout from './timeout/index.js'
-export * as dates from './dates/index.js'
 export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'

package/components/Sequencer/index.d.ts

@@ -1,97 +1,78 @@
-import { type FunctionComponent } from 'react';
-import { type Props as IOCompProps } from '../IntersectionObserver/index.js';
-import type { ViewportObserverOptions } from '../utils/types.js';
-import { type Props as ControlledProps } from './index.controlled.js';
+import { type FunctionComponent, type PropsWithChildren } from 'react';
+import type { WithClassName } from '../utils/types.js';
 /**
- * Props for the {@link Sequencer} component.
- *
- * Extends {@link ControlledProps} — minus `isPlaying` and `tempo`, which this
- * component derives itself — with uncontrolled playback and viewport-driven
- * behaviour.
- *
- * @property defaultStep - Initial step index when running in uncontrolled mode.
- * Ignored if `step` is provided. Defaults to `0`.
- * @property tempo - Playback speed in beats per minute. The interval between
- * steps is derived as `1000 / (tempo / 60)` ms. Clamped to a minimum of `1`.
- * Defaults to `60`.
- * @property play - Controlled play state. When provided, overrides the internal
- * play state. The auto-advance interval only runs when this is `true`.
- * @property loop - When `true`, the step wraps around using absolute modulo so
- * it never exceeds the number of steps.
- * @property clampFirst - When `true` (and `loop` is `false`), clamps the step
- * to `0` at the lower bound, preventing negative step values.
- * @property clampLast - When `true` (and `loop` is `false`), clamps the step
- * to `stepsCount - 1` at the upper bound, preventing overflow.
- * @property resetOnVisible - When `true`, resets the internal step to `0` each
- * time the component enters the viewport. No-op when `step` or `play` is controlled.
- * @property resetOnHidden - When `true`, resets the internal step to `0` each
- * time the component leaves the viewport. No-op when `step` or `play` is controlled.
- * @property playOnVisible - When `true`, starts internal playback when the
- * component enters the viewport. No-op when `play` is controlled.
- * @property pauseOnHidden - When `true`, pauses internal playback when the
- * component leaves the viewport. No-op when `play` is controlled.
- * @property threshold - How much of the component has to be in view before it
- * counts as visible, forwarded to the internal {@link IntersectionObserver}.
- * @property root - The observer's root. Defaults to the viewport.
- * @property rootMargin - Grows or shrinks that root before measuring.
- * @property onVisibilityChanged - Called on every crossing with the new value.
- * `onIntersected` is the raw form of the same event, carrying the entry and the
- * observer; this one carries the answer.
- * @property onIntersected - Forwarded verbatim to the internal
- * {@link IntersectionObserverComponent}, and called on every intersection
- * change whichever mode the sequencer runs in.
- * @property onIsPlayingChanged - Called after the effective play state changed,
- * with the new value.
- * @property onStepChanged - Called after the forwarded step changed, with the
- * new value.
- * @property onLooped - Called when the step wraps around (either direction),
- * only while `loop` is `true`.
- * @property onReachedFirstStep - Called when the forwarded step becomes `0`.
- * @property onReachedLastStep - Called when the forwarded step becomes the last
- * one.
+ * @property totalSteps - How many steps the sequence has. Falls back to the number of
+ * **element** children: text and whitespace never count, which matters more than it
+ * looks — an article writes its children across several lines, and a text node counting
+ * as a step would put every index out by one.
+ * @property stepMap - Rewrites what a position means, **by position and nothing else**:
+ * at position `i` the active step is `stepMap[i]` when there is one, and `i` otherwise.
+ * `[2, 6, 7]` over seven steps plays `2, 6, 7, 3, 4, 5, 6` — a step may be skipped, may
+ * come back, and may not correspond to any child at all, in which case nothing lights up
+ * and that is a legal thing to write.
+ * @property step - The position, taken over by the consumer. Provided, the tempo stops
+ * advancing anything: the counter is theirs.
+ * @property defaultStep - The position to start from. Ignored when `step` is provided.
+ * @property play - Whether the sequence advances. **There are no controls in this
+ * component** — nothing to click, so nothing to surrender to — and this is the only way
+ * it moves on its own.
+ * @property tempo - Speed in beats per minute: one step every `60000 / tempo` ms, so `60`
+ * is a step per second. Clamped to a minimum of `1`.
+ * @property loop - Whether the sequence wraps round. **`false` by default**, so a
+ * sequence ends the way a video does rather than running forever.
+ * @property onStepChanged - Called when the position changes, with the position and the
+ * active step it resolves to. Never on mount.
+ * @property onIsPlayingChanged - Called once the effective play state changed — which
+ * includes it dropping to `false` on its own at the end.
+ * @property onIsEndedChanged - Called when the sequence reaches its last step, or leaves
+ * it. A looping sequence never ends, so never emits.
+ * @property onLooped - Called on each wrap, only while `loop` is `true`.
+ * @property onReachedFirstStep - Called when the position becomes `0`.
+ * @property onReachedLastStep - Called when the position becomes the last one.
  */
-export type Props = ViewportObserverOptions & Omit<ControlledProps, 'isPlaying' | 'tempo'> & {
+export type Props = PropsWithChildren<WithClassName<{
+    totalSteps?: number;
+    stepMap?: number[];
+    step?: number;
     defaultStep?: number;
-    tempo?: number;
     play?: boolean;
+    tempo?: number;
     loop?: boolean;
-    clampFirst?: boolean;
-    clampLast?: boolean;
-    resetOnVisible?: boolean;
-    resetOnHidden?: boolean;
-    playOnVisible?: boolean;
-    pauseOnHidden?: boolean;
-    onIntersected?: IOCompProps['onIntersected'];
-    onVisibilityChanged?: (isVisible: boolean) => void;
+    onStepChanged?: (step: number, activeStep: number) => void;
     onIsPlayingChanged?: (isPlaying: boolean) => void;
-    onStepChanged?: (step: number) => void;
+    onIsEndedChanged?: (isEnded: boolean) => void;
     onLooped?: () => void;
     onReachedFirstStep?: () => void;
     onReachedLastStep?: () => void;
-};
+}>>;
 /**
- * Uncontrolled, self-advancing sequencer component. Drives a
- * {@link ControlledSequencer} instance with an internal tempo-based interval,
- * optional loop/clamp boundary behaviour, and viewport-driven play/reset triggers
- * via an {@link IntersectionObserverComponent}.
+ * A sequencer over its children, which it classifies and never moves.
+ *
+ * It renders no box of its own around anything: **the modifiers go straight onto the
+ * children**, by `cloneElement`. A wrapper would take the place a consumer lays out —
+ * it would be the grid or flex item, leaving the element they actually wrote one level
+ * down — and a sequencer exists precisely so that a stylesheet can animate that element.
+ * The cost is the contract: **a child has to honour `className`**, which every DOM
+ * element does, and every component here does by convention. One that ignores it gets no
+ * modifiers, silently.
  *
- * 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 `onIntersected`.
+ * Children that are not elements — text, whitespace — are rendered untouched and take no
+ * part: they carry no class, so they simply stay visible throughout.
  *
- * ### Forwarded to {@link ControlledSequencer}
- * - `step` — the effective step, after loop/clamp arithmetic.
- * - `isPlaying` — the effective play state, controlled or internal.
- * - `tempo` — the current tempo, which the controlled layer exposes as `data-tempo`.
+ * ### On the root
+ * `--playing`, `--at-start`, `--at-end`, `--ended`, plus `data-step`, `data-active-step`,
+ * `data-total-steps` and `data-tempo`.
  *
- * The `--at-start` and `--at-end` modifiers are derived by the controlled layer
- * from `step` and the children count.
+ * ### On each element child
+ * The `__child` element class, then three pairs, one of each always present:
+ * - `--on` / `--off` — whether it belongs to the active step.
+ * - `--is-first` / `--not-first` — whether its first turn in this lap is still to come.
+ * - `--is-last` / `--not-last` — whether it has another turn left in this lap.
  *
- * @param props - Component properties.
- * @see {@link Props}
- * @see {@link ControlledSequencer}
- * @returns An {@link IntersectionObserverComponent} wrapping a
- * {@link ControlledSequencer} with the computed step and modifiers applied.
+ * **The three pairs are derived, not remembered.** The order of the whole lap is known
+ * from `stepMap` alone, so « has it been shown yet » is a question about positions before
+ * this one, not about what happened since mount. A child active at positions 1 and 6 is
+ * therefore `--is-first` at 1 and `--not-first` at 6, and the answer is the same on every
+ * lap without anything being reset.
  */
 export declare const Sequencer: FunctionComponent<Props>;

package/components/Sequencer/index.js

@@ -1,116 +1,168 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef, Children } from 'react';
+import { Children, cloneElement, isValidElement, useEffect, useState } 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 { useChangeDispatch } from '../utils/index.js';
-import { ControlledSequencer } from './index.controlled.js';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
+import { sequencer as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
 /**
- * Uncontrolled, self-advancing sequencer component. Drives a
- * {@link ControlledSequencer} instance with an internal tempo-based interval,
- * optional loop/clamp boundary behaviour, and viewport-driven play/reset triggers
- * via an {@link IntersectionObserverComponent}.
+ * The attribute a child uses to say which steps it belongs to.
  *
- * 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 `onIntersected`.
+ * **Written on the child rather than gathered in a prop**, and that is the whole
+ * difference with the `activateOnStep` this component used to take. A parallel array and
+ * a children list derive from one another: inserting a child in the middle means
+ * reindexing the array, and nothing signals the one time it is forgotten. Carried by the
+ * child, the attachment travels with it.
  *
- * ### Forwarded to {@link ControlledSequencer}
- * - `step` — the effective step, after loop/clamp arithmetic.
- * - `isPlaying` — the effective play state, controlled or internal.
- * - `tempo` — the current tempo, which the controlled layer exposes as `data-tempo`.
+ * It stays in the DOM once read — it costs nothing, it is worth having while debugging,
+ * and a stylesheet can select on it.
+ */
+const STEPS_ATTRIBUTE = 'data-steps';
+/**
+ * `data-steps="2, 6"` into the steps it names.
+ *
+ * Anything unreadable gives back `null`, which the caller reads as « the attribute was
+ * not written » and falls back to the child's position. That is lm-link's rule applied
+ * here — a typo costs the default behaviour, never a broken one.
+ */
+function parseSteps(raw) {
+    if (typeof raw !== 'string')
+        return null;
+    const parts = raw.split(',').map(part => part.trim()).filter(part => part !== '');
+    if (parts.length === 0)
+        return null;
+    const steps = parts.map(Number);
+    if (steps.some(step => !Number.isInteger(step)))
+        return null;
+    return steps;
+}
+/** The steps a child answers to: what it declares, or where it sits. */
+function stepsOf(child, elementIndex) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- a React element's props are a record, whatever else they are
+    const declared = parseSteps(child.props[STEPS_ATTRIBUTE]);
+    return declared ?? [elementIndex];
+}
+/**
+ * A sequencer over its children, which it classifies and never moves.
+ *
+ * It renders no box of its own around anything: **the modifiers go straight onto the
+ * children**, by `cloneElement`. A wrapper would take the place a consumer lays out —
+ * it would be the grid or flex item, leaving the element they actually wrote one level
+ * down — and a sequencer exists precisely so that a stylesheet can animate that element.
+ * The cost is the contract: **a child has to honour `className`**, which every DOM
+ * element does, and every component here does by convention. One that ignores it gets no
+ * modifiers, silently.
+ *
+ * Children that are not elements — text, whitespace — are rendered untouched and take no
+ * part: they carry no class, so they simply stay visible throughout.
  *
- * The `--at-start` and `--at-end` modifiers are derived by the controlled layer
- * from `step` and the children count.
+ * ### On the root
+ * `--playing`, `--at-start`, `--at-end`, `--ended`, plus `data-step`, `data-active-step`,
+ * `data-total-steps` and `data-tempo`.
  *
- * @param props - Component properties.
- * @see {@link Props}
- * @see {@link ControlledSequencer}
- * @returns An {@link IntersectionObserverComponent} wrapping a
- * {@link ControlledSequencer} with the computed step and modifiers applied.
+ * ### On each element child
+ * The `__child` element class, then three pairs, one of each always present:
+ * - `--on` / `--off` — whether it belongs to the active step.
+ * - `--is-first` / `--not-first` — whether its first turn in this lap is still to come.
+ * - `--is-last` / `--not-last` — whether it has another turn left in this lap.
+ *
+ * **The three pairs are derived, not remembered.** The order of the whole lap is known
+ * from `stepMap` alone, so « has it been shown yet » is a question about positions before
+ * this one, not about what happened since mount. A child active at positions 1 and 6 is
+ * therefore `--is-first` at 1 and `--not-first` at 6, and the answer is the same on every
+ * lap without anything being reset.
  */
-export const Sequencer = ({ defaultStep, tempo = 60, play, loop, clampFirst, clampLast, resetOnVisible, resetOnHidden, playOnVisible, pauseOnHidden, onIntersected, onVisibilityChanged, threshold, root, rootMargin, onIsPlayingChanged, onStepChanged, onLooped, onReachedFirstStep, onReachedLastStep, ...controlledProps }) => {
-    // State
-    const { step, activateOnStep, children } = controlledProps;
-    const [internalPlay, setInternalPlay] = useState(play ?? false);
+export const Sequencer = ({ totalSteps, stepMap, step, defaultStep, play, tempo = 60, loop, onStepChanged, onIsPlayingChanged, onIsEndedChanged, onLooped, onReachedFirstStep, onReachedLastStep, className, children }) => {
     const [internalStep, setInternalStep] = useState(step ?? defaultStep ?? 0);
-    const actualPlay = play ?? internalPlay;
-    const actualStep = step ?? internalStep;
-    // Effects
+    const [hasLapped, setHasLapped] = useState(0);
+    // Children, split once: what takes part and what merely renders.
+    const childrenArr = Children.toArray(children);
+    const elements = childrenArr.filter(isValidElement);
+    const stepsCount = Math.max(totalSteps ?? elements.length, 0);
+    // The two numbers
+    const rawStep = step ?? internalStep;
+    const position = stepsCount > 0
+        ? (loop === true
+            ? absoluteModulo(rawStep, stepsCount)
+            : clamp(rawStep, 0, stepsCount - 1))
+        : 0;
+    const activeStep = stepMap?.[position] ?? position;
+    // A sequence that does not loop stops on its last step, and says so rather than
+    // claiming to still be playing. Derived rather than held: nothing has to be unset when
+    // `loop` or `step` changes under it.
+    const isEnded = loop !== true && stepsCount > 0 && position >= stepsCount - 1;
+    const isPlaying = (play ?? false) && !isEnded;
     useEffect(() => {
-        const clampedTempo = Math.max(tempo, 1);
-        if (!actualPlay || step !== undefined)
+        if (!isPlaying || step !== undefined || stepsCount <= 0)
             return;
-        const interval = window.setInterval(() => {
-            setInternalStep(s => s + 1);
-        }, 1000 / (clampedTempo / 60));
+        const interval = window.setInterval(() => setInternalStep(current => current + 1), 60000 / Math.max(tempo, 1));
         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);
-    }
-    else {
-        const leftClamp = clampFirst === true ? 0 : -Infinity;
-        const rightClamp = clampLast === true ? stepsCount - 1 : Infinity;
-        forwardedStep = clamp(actualStep, leftClamp, rightClamp);
-    }
-    // State dispatch
-    useChangeDispatch(actualPlay, onIsPlayingChanged);
-    useChangeDispatch(forwardedStep, onStepChanged);
-    // Fx. dep. `forwardedStep` - loop / boundary events
-    const previousStepsRef = useRef(null);
+    }, [isPlaying, step, stepsCount, tempo]);
+    // A lap counter rather than a comparison of steps: `onLooped` has to fire on the wrap
+    // itself, and the position on either side of it says nothing about having crossed.
+    const lap = stepsCount > 0 ? Math.floor(rawStep / stepsCount) : 0;
     useEffect(() => {
-        if (stepsCount <= 0)
+        if (loop !== true)
             return;
-        const previous = previousStepsRef.current;
-        previousStepsRef.current = { forwarded: forwardedStep, actual: actualStep };
-        if (previous === null)
+        if (lap === hasLapped)
             return;
-        const lapChanged = Math.floor(actualStep / stepsCount) !== Math.floor(previous.actual / stepsCount);
-        if (loop === true && lapChanged)
-            onLooped?.();
-        if (forwardedStep === 0 && previous.forwarded !== 0)
-            onReachedFirstStep?.();
-        if (forwardedStep === stepsCount - 1 && previous.forwarded !== stepsCount - 1)
-            onReachedLastStep?.();
-    }, [forwardedStep, actualStep, stepsCount, loop]);
-    // Action handlers
-    const handleIntersection = useCallback(({ ioEntry, observer }) => {
-        onIntersected?.({ ioEntry, observer });
-        const { isIntersecting } = ioEntry ?? {};
-        if (isIntersecting !== undefined)
-            onVisibilityChanged?.(isIntersecting);
-        // Both handlers fire whatever the mode: a controlled sequencer still wants to
-        // hear about the viewport, it just doesn't let it drive the step.
-        if (play === true || step !== undefined)
-            return;
-        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,
-        onIntersected
-    ]);
+        setHasLapped(lap);
+        onLooped?.();
+    }, [lap, loop]);
+    // State dispatch
+    useChangeDispatch(position, () => onStepChanged?.(position, activeStep));
+    useChangeDispatch(isPlaying, onIsPlayingChanged);
+    useChangeDispatch(isEnded, onIsEndedChanged);
+    useChangeDispatch(position === 0, atStart => { if (atStart)
+        onReachedFirstStep?.(); });
+    useChangeDispatch(stepsCount > 0 && position === stepsCount - 1, atEnd => { if (atEnd)
+        onReachedLastStep?.(); });
     // Rendering
-    return _jsx(IntersectionObserverComponent, { threshold: threshold, root: root, rootMargin: rootMargin, onIntersected: handleIntersection, children: _jsx(ControlledSequencer, { ...controlledProps, step: forwardedStep, isPlaying: actualPlay, tempo: tempo }) });
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, {
+        playing: isPlaying,
+        'at-start': position === 0,
+        'at-end': stepsCount > 0 && position === stepsCount - 1,
+        ended: isEnded
+    }), className);
+    // Walked once per render: for each element, the positions of this lap at which it is
+    // active. Cheap, and it is what makes the three pairs answerable without memory.
+    const positionsOf = (steps) => {
+        const positions = [];
+        for (let i = 0; i < stepsCount; i += 1) {
+            if (steps.includes(stepMap?.[i] ?? i))
+                positions.push(i);
+        }
+        return positions;
+    };
+    let elementIndex = -1;
+    return _jsx("div", { className: rootClss, "data-step": position, "data-active-step": activeStep, "data-total-steps": stepsCount, "data-tempo": tempo, children: childrenArr.map((child, childPos) => {
+            if (!isValidElement(child))
+                return child;
+            elementIndex += 1;
+            const steps = stepsOf(child, elementIndex);
+            const positions = positionsOf(steps);
+            const isOn = steps.includes(activeStep);
+            const hasEarlier = positions.some(p => p < position);
+            const hasLater = positions.some(p => p > position);
+            const childClss = c('child', {
+                on: isOn,
+                off: !isOn,
+                'is-first': !hasEarlier,
+                'not-first': hasEarlier,
+                'is-last': !hasLater,
+                'not-last': hasLater
+            });
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- a React element's props are a record, whatever else they are
+            const ownClassName = child.props.className;
+            // `className` is the whole of what a child is asked to honour, and the only prop
+            // touched here — its own is kept, and comes second so a consumer's class wins a
+            // shorthand conflict.
+            const nextProps = {
+                key: childPos,
+                className: mergeClassNames(childClss, typeof ownClassName === 'string' ? ownClassName : undefined)
+            };
+            return cloneElement(child, nextProps);
+        }) });
 };

package/components/Video/index.d.ts

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'react';
-import { type ViewportBehaviours } from '../utils/viewport-behaviours/index.js';
+import type { ViewportBehaviours } from '../utils/viewport-behaviours/types.js';
 import type { VideoAction } from './types.js';
 import { type Props as ControlledProps } from './index.controlled.js';
 /**

package/components/utils/viewport-behaviours/index.d.ts

@@ -1,5 +1,30 @@
 import { type RefObject } from 'react';
 import type { ActionTable, ViewportBehaviours, VisibilityOptions } from './types.js';
+/**
+ * Whether a string is an instruction this vocabulary answers to.
+ *
+ * **It lives in the entry point and not next to `parseInstruction`**, which is where it
+ * belongs by subject, because the publish step only maps `index.js` and `types.js` into
+ * the package's exports — a `utils.js` is unreachable from outside, whatever it holds.
+ *
+ * **Exported for the consumers that receive their props as text.** lm-link reads an
+ * article's XML, where nothing is typed, and has to reject `'jump-to:banana'` before it
+ * reaches a component. Written on its side, the rule would exist twice and drift in
+ * silence — a verb added here would be rejected there for no visible reason.
+ *
+ * Returns a plain boolean rather than a type predicate, and that is not an oversight: a
+ * verb taking an argument is written `'jump-to:500'`, which is not a member of the verb
+ * list this checks against. Narrowing to `Instruction<A>` would therefore claim more than
+ * the list can support, and the caller that needs the narrow type is better off asserting
+ * it once, where it can say why.
+ *
+ * @param value - What the consumer wrote.
+ * @param verbs - The vocabulary, bare — `VIDEO_VERBS` and its like.
+ * @param withArgument - Those of them that take one, and what a valid one looks like. A
+ * verb given an argument it does not take, or denied one it needs, fails either way:
+ * both are a consumer meaning something the component cannot do.
+ */
+export declare function isInstruction(value: unknown, verbs: readonly string[], withArgument?: Readonly<Partial<Record<string, (arg: string) => boolean>>>): boolean;
 /**
  * Whether the element counts as visible — **as a state, not as a crossing**.
  *
@@ -51,4 +76,3 @@ export type ViewportBehavioursResult = {
  * and yielding is the silent one.
  */
 export declare function useViewportBehaviours<A extends string>(targetRef: RefObject<Element | null>, props: ViewportBehaviours<A>, table: ActionTable<A>, suspended?: boolean): ViewportBehavioursResult;
-export type { ActionSpec, ActionTable, Instruction, Modifier, ParsedInstruction, ViewportBehaviours, VisibilityOptions } from './types.js';

package/components/utils/viewport-behaviours/index.js

@@ -2,6 +2,41 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntersectionObserver } from '../../IntersectionObserver/index.js';
 import { useChangeDispatch } from '../index.js';
 import { parseInstruction, toInstructionList } from './utils.js';
+/**
+ * Whether a string is an instruction this vocabulary answers to.
+ *
+ * **It lives in the entry point and not next to `parseInstruction`**, which is where it
+ * belongs by subject, because the publish step only maps `index.js` and `types.js` into
+ * the package's exports — a `utils.js` is unreachable from outside, whatever it holds.
+ *
+ * **Exported for the consumers that receive their props as text.** lm-link reads an
+ * article's XML, where nothing is typed, and has to reject `'jump-to:banana'` before it
+ * reaches a component. Written on its side, the rule would exist twice and drift in
+ * silence — a verb added here would be rejected there for no visible reason.
+ *
+ * Returns a plain boolean rather than a type predicate, and that is not an oversight: a
+ * verb taking an argument is written `'jump-to:500'`, which is not a member of the verb
+ * list this checks against. Narrowing to `Instruction<A>` would therefore claim more than
+ * the list can support, and the caller that needs the narrow type is better off asserting
+ * it once, where it can say why.
+ *
+ * @param value - What the consumer wrote.
+ * @param verbs - The vocabulary, bare — `VIDEO_VERBS` and its like.
+ * @param withArgument - Those of them that take one, and what a valid one looks like. A
+ * verb given an argument it does not take, or denied one it needs, fails either way:
+ * both are a consumer meaning something the component cannot do.
+ */
+export function isInstruction(value, verbs, withArgument = {}) {
+    if (typeof value !== 'string')
+        return false;
+    const { verb, arg } = parseInstruction(value);
+    if (!verbs.includes(verb))
+        return false;
+    const validate = withArgument[verb];
+    if (validate === undefined)
+        return arg === undefined;
+    return arg !== undefined && validate(arg);
+}
 /**
  * Whether the element counts as visible — **as a state, not as a crossing**.
  *

package/components/utils/viewport-behaviours/utils.d.ts

@@ -24,24 +24,3 @@ export declare function parseInstruction(instruction: string): ParsedInstruction
  * @returns The instructions in the order they were given, which is the order they run.
  */
 export declare function toInstructionList<A extends string>(given: Instruction<A> | Array<Instruction<A>> | undefined): Array<Instruction<A>>;
-/**
- * Whether a string is an instruction this vocabulary answers to.
- *
- * **Exported for the consumers that receive their props as text.** lm-link reads an
- * article's XML, where nothing is typed, and has to reject `'jump-to:banana'` before it
- * reaches a component. Written on its side, the rule would exist twice and drift in
- * silence — a verb added here would be rejected there for no visible reason.
- *
- * Returns a plain boolean rather than a type predicate, and that is not an oversight: a
- * verb taking an argument is written `'jump-to:500'`, which is not a member of the verb
- * list this checks against. Narrowing to `Instruction<A>` would therefore claim more than
- * the list can support, and the caller that needs the narrow type is better off asserting
- * it once, where it can say why.
- *
- * @param value - What the consumer wrote.
- * @param verbs - The vocabulary, bare — `VIDEO_VERBS` and its like.
- * @param withArgument - Those of them that take one, and what a valid one looks like. A
- * verb given an argument it does not take, or denied one it needs, fails either way:
- * both are a consumer meaning something the component cannot do.
- */
-export declare function isInstruction(value: unknown, verbs: readonly string[], withArgument?: Readonly<Partial<Record<string, (arg: string) => boolean>>>): boolean;

package/components/utils/viewport-behaviours/utils.js

@@ -53,34 +53,3 @@ export function toInstructionList(given) {
         return given;
     return [given];
 }
-/**
- * Whether a string is an instruction this vocabulary answers to.
- *
- * **Exported for the consumers that receive their props as text.** lm-link reads an
- * article's XML, where nothing is typed, and has to reject `'jump-to:banana'` before it
- * reaches a component. Written on its side, the rule would exist twice and drift in
- * silence — a verb added here would be rejected there for no visible reason.
- *
- * Returns a plain boolean rather than a type predicate, and that is not an oversight: a
- * verb taking an argument is written `'jump-to:500'`, which is not a member of the verb
- * list this checks against. Narrowing to `Instruction<A>` would therefore claim more than
- * the list can support, and the caller that needs the narrow type is better off asserting
- * it once, where it can say why.
- *
- * @param value - What the consumer wrote.
- * @param verbs - The vocabulary, bare — `VIDEO_VERBS` and its like.
- * @param withArgument - Those of them that take one, and what a valid one looks like. A
- * verb given an argument it does not take, or denied one it needs, fails either way:
- * both are a consumer meaning something the component cannot do.
- */
-export function isInstruction(value, verbs, withArgument = {}) {
-    if (typeof value !== 'string')
-        return false;
-    const { verb, arg } = parseInstruction(value);
-    if (!verbs.includes(verb))
-        return false;
-    const validate = withArgument[verb];
-    if (validate === undefined)
-        return arg === undefined;
-    return arg !== undefined && validate(arg);
-}

package/node/@aws-s3/storage/file/index.d.ts

@@ -1,6 +1,6 @@
 export * as copy from './copy/index.js'
-export * as exists from './exists/index.js'
 export * as download from './download/index.js'
+export * as exists from './exists/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'

package/node/@aws-s3/storage/file/index.js

@@ -1,6 +1,6 @@
 export * as copy from './copy/index.js'
-export * as exists from './exists/index.js'
 export * as download from './download/index.js'
+export * as exists from './exists/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'

package/node/@aws-s3/storage/index.d.ts

@@ -1,2 +1,2 @@
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/index.js'

package/node/@aws-s3/storage/index.js

@@ -1,2 +1,2 @@
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/index.js'

package/node/cloud-storage/operations/index.d.ts

@@ -1,6 +1,6 @@
 export * as copyDir from './copy-dir/index.js'
-export * as downloadFile from './download-file/index.js'
 export * as copyFile from './copy-file/index.js'
+export * as downloadFile from './download-file/index.js'
 export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'

package/node/cloud-storage/operations/index.js

@@ -1,6 +1,6 @@
 export * as copyDir from './copy-dir/index.js'
-export * as downloadFile from './download-file/index.js'
 export * as copyFile from './copy-file/index.js'
+export * as downloadFile from './download-file/index.js'
 export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.5.19",
+  "version": "0.5.21",
   "description": "",
   "author": "Maxime Fabas",
   "license": "ISC",

package/components/Sequencer/index.controlled.d.ts

@@ -1,68 +0,0 @@
-import { type FunctionComponent, type PropsWithChildren } from 'react';
-import type { WithClassName } from '../utils/types.js';
-/**
- * Props for the {@link ControlledSequencer} component.
- *
- * This is the low-level controlled interface. All state is driven externally —
- * the component holds no internal state of its own. For the uncontrolled
- * version that reacts to external events and derives these props automatically,
- * see the default export of the parent module.
- *
- * @property step - Zero-based index of the currently active step. Determines
- * which child is marked active, which are previous, and which are next.
- * Defaults to `0`.
- * @property activateOnStep - Optional 2D array that overrides the default
- * one-child-per-step activation logic. Each entry at index `i` is the list of
- * child indices that should be active when `step === i`, allowing multiple
- * children to be simultaneously active on a given step. When omitted, exactly
- * one child is active at a time (the child at index `step`).
- * @property isPlaying - Whether the sequence is currently progressing. The
- * controlled layer never advances on its own; this only drives the `--playing`
- * modifier. Defaults to `false`.
- * @property tempo - Playback speed in beats per minute, exposed as `data-tempo`
- * for styling and scripting. Purely informational here — the interval itself
- * lives in the uncontrolled wrapper. When omitted, no attribute is rendered.
- * @property className - Optional additional class name(s) applied to the root element.
- * @property children - The items to sequence. Each child is wrapped in a
- * classifier `<div>` and receives one of the `--active`, `--previous`, or
- * `--next` modifiers depending on its position relative to the current `step`.
- */
-export type Props = PropsWithChildren<WithClassName<{
-    step?: number;
-    activateOnStep?: number[][];
-    isPlaying?: boolean;
-    tempo?: number;
-}>>;
-/**
- * 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:
- * - `--playing` — when `isPlaying` is `true`.
- * - `--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
- * - `data-step` — the current step index.
- * - `data-tempo` — current playback tempo, when `tempo` is 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 Props}
- * @returns A root `<div>` containing one classifier wrapper per child.
- */
-export declare const ControlledSequencer: FunctionComponent<Props>;

package/components/Sequencer/index.controlled.js

@@ -1,70 +0,0 @@
-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:
- * - `--playing` — when `isPlaying` is `true`.
- * - `--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
- * - `data-step` — the current step index.
- * - `data-tempo` — current playback tempo, when `tempo` is 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 Props}
- * @returns A root `<div>` containing one classifier wrapper per child.
- */
-export const ControlledSequencer = ({ step = 0, activateOnStep, isPlaying = false, tempo, className, children }) => {
-    const childrenArr = Children.toArray(children);
-    const stepsCount = activateOnStep?.length ?? childrenArr.length;
-    // Rendering
-    const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(null, {
-        playing: isPlaying,
-        'at-start': step === 0,
-        'at-end': step === stepsCount - 1
-    }), className);
-    return _jsx("div", { className: rootClss, "data-step": step, "data-tempo": tempo, children: childrenArr
-            .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)
-                    : false;
-            const isNext = !isPrevious && !isCurrent;
-            const childClss = c('child', {
-                current: isCurrent,
-                prev: isPrevious,
-                next: isNext
-            });
-            return _jsx("div", { className: childClss, children: child }, childPos);
-        }) });
-};