@design-edito/tools 0.5.22 → 0.5.24

package/agnostic/arrays/index.d.ts

@@ -1,6 +1,6 @@
-export * as dedupe from './dedupe/index.js'
-export * as findDuplicates from './find-duplicates/index.js'
 export * as isArrayOf from './is-array-of/index.js'
+export * as findDuplicates from './find-duplicates/index.js'
+export * as make from './make/index.js'
 export * as randomPick from './random-pick/index.js'
 export * as shuffle from './shuffle/index.js'
-export * as make from './make/index.js'
+export * as dedupe from './dedupe/index.js'

package/agnostic/arrays/index.js

@@ -1,6 +1,6 @@
-export * as dedupe from './dedupe/index.js'
-export * as findDuplicates from './find-duplicates/index.js'
 export * as isArrayOf from './is-array-of/index.js'
+export * as findDuplicates from './find-duplicates/index.js'
+export * as make from './make/index.js'
 export * as randomPick from './random-pick/index.js'
 export * as shuffle from './shuffle/index.js'
-export * as make from './make/index.js'
+export * as dedupe from './dedupe/index.js'

package/agnostic/colors/index.d.ts

@@ -1,10 +1,10 @@
-export * as channels from './channels/index.js'
+export * as contrast from './contrast/index.js'
 export * as convert from './convert/index.js'
+export * as channels from './channels/index.js'
 export * as distance from './distance/index.js'
 export * as grayscale from './grayscale/index.js'
 export * as invert from './invert/index.js'
 export * as lerp from './lerp/index.js'
-export * as contrast from './contrast/index.js'
 export * as luminance from './luminance/index.js'
 export * as palette from './palette/index.js'
 export * as rotate from './rotate/index.js'

package/agnostic/colors/index.js

@@ -1,10 +1,10 @@
-export * as channels from './channels/index.js'
+export * as contrast from './contrast/index.js'
 export * as convert from './convert/index.js'
+export * as channels from './channels/index.js'
 export * as distance from './distance/index.js'
 export * as grayscale from './grayscale/index.js'
 export * as invert from './invert/index.js'
 export * as lerp from './lerp/index.js'
-export * as contrast from './contrast/index.js'
 export * as luminance from './luminance/index.js'
 export * as palette from './palette/index.js'
 export * as rotate from './rotate/index.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

@@ -2,32 +2,32 @@ export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
 export * as append from './append/index.js'
-export * as clone from './clone/index.js'
-export * as call from './call/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 getproperties from './getproperties/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 equals from './equals/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
-export * as join from './join/index.js'
+export * as initialize from './initialize/index.js'
 export * as length from './length/index.js'
-export * as negate from './negate/index.js'
+export * as join from './join/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 initialize from './initialize/index.js'
-export * as push from './push/index.js'
 export * as print from './print/index.js'
+export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
+export * as removeattribute from './removeattribute/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
 export * as removeclass from './removeclass/index.js'
-export * as removeattribute from './removeattribute/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
 export * as select from './select/index.js'
@@ -36,17 +36,17 @@ export * as setattribute from './setattribute/index.js'
 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 toarray from './toarray/index.js'
 export * as toboolean from './toboolean/index.js'
+export * as spread from './spread/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 tonumber from './tonumber/index.js'
 export * as tonull from './tonull/index.js'
 export * as torecord from './torecord/index.js'
 export * as toref from './toref/index.js'
-export * as tonumber from './tonumber/index.js'
 export * as tostring from './tostring/index.js'
-export * as totext from './totext/index.js'
-export * as trim from './trim/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

@@ -2,32 +2,32 @@ export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
 export * as append from './append/index.js'
-export * as clone from './clone/index.js'
-export * as call from './call/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 getproperties from './getproperties/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 equals from './equals/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
-export * as join from './join/index.js'
+export * as initialize from './initialize/index.js'
 export * as length from './length/index.js'
-export * as negate from './negate/index.js'
+export * as join from './join/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 initialize from './initialize/index.js'
-export * as push from './push/index.js'
 export * as print from './print/index.js'
+export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
+export * as removeattribute from './removeattribute/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
 export * as removeclass from './removeclass/index.js'
-export * as removeattribute from './removeattribute/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
 export * as select from './select/index.js'
@@ -36,17 +36,17 @@ export * as setattribute from './setattribute/index.js'
 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 toarray from './toarray/index.js'
 export * as toboolean from './toboolean/index.js'
+export * as spread from './spread/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 tonumber from './tonumber/index.js'
 export * as tonull from './tonull/index.js'
 export * as torecord from './torecord/index.js'
 export * as toref from './toref/index.js'
-export * as tonumber from './tonumber/index.js'
 export * as tostring from './tostring/index.js'
-export * as totext from './totext/index.js'
-export * as trim from './trim/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 any from './any/index.js'
-export * as array from './array/index.js'
 export * as boolean from './boolean/index.js'
+export * as array from './array/index.js'
 export * as element from './element/index.js'
 export * as get from './get/index.js'
 export * as guess from './guess/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as number from './number/index.js'
-export * as null from './null/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
 export * as text from './text/index.js'
 export * as string from './string/index.js'
+export * as null from './null/index.js'

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

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

package/agnostic/index.d.ts

@@ -1,17 +1,17 @@
 export * as arrays from './arrays/index.js'
 export * as booleans from './booleans/index.js'
-export * as errors from './errors/index.js'
-export * as colors from './colors/index.js'
 export * as css from './css/index.js'
+export * as colors from './colors/index.js'
 export * as html from './html/index.js'
+export * as errors from './errors/index.js'
 export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'
 export * as optim from './optim/index.js'
-export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'
-export * as sanitization from './sanitization/index.js'
+export * as random from './random/index.js'
 export * as strings from './strings/index.js'
+export * as sanitization from './sanitization/index.js'
 export * as subtitles from './subtitles/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/index.js'

package/agnostic/index.js

@@ -1,17 +1,17 @@
 export * as arrays from './arrays/index.js'
 export * as booleans from './booleans/index.js'
-export * as errors from './errors/index.js'
-export * as colors from './colors/index.js'
 export * as css from './css/index.js'
+export * as colors from './colors/index.js'
 export * as html from './html/index.js'
+export * as errors from './errors/index.js'
 export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'
 export * as optim from './optim/index.js'
-export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'
-export * as sanitization from './sanitization/index.js'
+export * as random from './random/index.js'
 export * as strings from './strings/index.js'
+export * as sanitization from './sanitization/index.js'
 export * as subtitles from './subtitles/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/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 dataSize from './data-size/index.js'
-export * as assert from './assert/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 crossenv from './crossenv/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 dataSize from './data-size/index.js'
-export * as assert from './assert/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 crossenv from './crossenv/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/numbers/index.d.ts

@@ -1,6 +1,6 @@
+export * as absoluteModulo from './absolute-modulo/index.js'
 export * as approximateRational from './approximate-rational/index.js'
 export * as clamp from './clamp/index.js'
 export * as geometricProgressions from './geometric-progressions/index.js'
 export * as interpolate from './interpolate/index.js'
 export * as round from './round/index.js'
-export * as absoluteModulo from './absolute-modulo/index.js'

package/agnostic/numbers/index.js

@@ -1,6 +1,6 @@
+export * as absoluteModulo from './absolute-modulo/index.js'
 export * as approximateRational from './approximate-rational/index.js'
 export * as clamp from './clamp/index.js'
 export * as geometricProgressions from './geometric-progressions/index.js'
 export * as interpolate from './interpolate/index.js'
 export * as round from './round/index.js'
-export * as absoluteModulo from './absolute-modulo/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 sortKeys from './sort-keys/index.js'
+export * as isRecord from './is-record/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'
+export * as enums from './enums/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 sortKeys from './sort-keys/index.js'
+export * as isRecord from './is-record/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'
+export * as enums from './enums/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,8 +1,8 @@
 export * as charCodes from './char-codes/index.js'
-export * as parseTable from './parse-table/index.js'
-export * as normalizeIndent from './normalize-indent/index.js'
 export * as matches from './matches/index.js'
+export * as parseTable from './parse-table/index.js'
 export * as replaceAll from './replace-all/index.js'
+export * as normalizeIndent from './normalize-indent/index.js'
 export * as splitTrim from './split-trim/index.js'
-export * as trim from './trim/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
+export * as trim from './trim/index.js'

package/agnostic/strings/index.js

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

package/agnostic/time/dates/index.d.ts

@@ -1,2 +1,2 @@
-export * as formatDate from './format-date/index.js'
 export * as toFrenchRepublican from './to-french-republican/index.js'
+export * as formatDate from './format-date/index.js'

package/agnostic/time/dates/index.js

@@ -1,2 +1,2 @@
-export * as formatDate from './format-date/index.js'
 export * as toFrenchRepublican from './to-french-republican/index.js'
+export * as formatDate from './format-date/index.js'

package/agnostic/time/index.d.ts

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

package/agnostic/time/index.js

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

package/components/Sequencer/index.d.ts

@@ -1,5 +1,7 @@
 import { type FunctionComponent, type PropsWithChildren } from 'react';
 import type { WithClassName } from '../utils/types.js';
+import type { ViewportBehaviours } from '../utils/viewport-behaviours/types.js';
+import type { SequencerAction } from './types.js';
 /**
  * @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
@@ -13,9 +15,16 @@ import type { WithClassName } from '../utils/types.js';
  * @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 play - Whether the sequence advances, taken over by the consumer. Provided,
+ * it is the whole answer and the instructions no longer reach it, the way `step` takes
+ * the counter over from the tempo.
+ * @property defaultPlay - Whether it starts advancing. `false` by default, and the
+ * starting point a `'play'` instruction moves from — not a setting, hence `default…`.
+ * @property behavioursSuspended - Holds back the instructions that **start** something,
+ * and lets through those that stop it. For a consumer withholding the sequence behind
+ * something — a warning to accept, typically. What was held back is replayed the moment
+ * this goes false, so lifting the veil on an already-visible sequence does what was
+ * asked. `':force'` does not override it.
  * @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
@@ -24,11 +33,15 @@ import type { WithClassName } from '../utils/types.js';
  * 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 onIsEndedChanged - Called when the sequence ends, or leaves that state.
+ * **The end is the counter leaving the last step, not arriving on it** — the last step
+ * is owed its beat like every other one, and a sequence paused on it has not ended. 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.
+ * @property onReachedLastStep - Called when the position becomes the last one. This is
+ * the arrival, where `onIsEndedChanged` is the departure: on a playing sequence they are
+ * one beat apart.
  */
 export type Props = PropsWithChildren<WithClassName<{
     totalSteps?: number;
@@ -36,6 +49,7 @@ export type Props = PropsWithChildren<WithClassName<{
     step?: number;
     defaultStep?: number;
     play?: boolean;
+    defaultPlay?: boolean;
     tempo?: number;
     loop?: boolean;
     onStepChanged?: (step: number, activeStep: number) => void;
@@ -44,7 +58,9 @@ export type Props = PropsWithChildren<WithClassName<{
     onLooped?: () => void;
     onReachedFirstStep?: () => void;
     onReachedLastStep?: () => void;
-}>>;
+}>> & ViewportBehaviours<SequencerAction> & {
+    behavioursSuspended?: boolean;
+};
 /**
  * A sequencer over its children, which it classifies and never moves.
  *
@@ -57,7 +73,24 @@ export type Props = PropsWithChildren<WithClassName<{
  * 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.
+ * part: they carry no class, so they simply stay visible throughout. **A fragment is
+ * opened rather than counted**: it groups without rendering an element of its own, so
+ * there would be nothing to class and nothing to show for the step it would consume.
+ *
+ * @remarks
+ * **Viewport-driven behaviour is declared, not named by a prop.** `whenVisible` and
+ * `whenHidden` take a verb or a list of them, out of {@link SequencerAction} — `'play'`,
+ * `'jump-start'`, `'jump-by:1'` — each optionally suffixed by `':once'` and `':force'`.
+ * The old `playOnVisible`, `pauseOnHidden`, `resetOnVisible` and `resetOnHidden` are
+ * those four instructions written the long way: `whenHidden={['pause', 'jump-start']}`
+ * is the pair of them, and the order of a list is the order of execution. See
+ * `components/utils/viewport-behaviours` for the grammar, and the `visibility…` props
+ * for what « visible » means and how long it has to have been true.
+ *
+ * **Nothing surrenders here.** The layer lets a reader's hand switch an instruction off
+ * for the rest of the mount, and this component has no control for a hand to touch — so
+ * `':force'` has nothing to override, and the single `'playback'` domain is a formality.
+ * A gate still holds `'play'` back, which is a different brake. @see {@link SequencerDomain}
  *
  * ### On the root
  * `--playing`, `--at-start`, `--at-end`, `--ended`, plus `data-step`, `data-active-step`,

package/components/Sequencer/index.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement, useEffect, useState } from 'react';
+import { Children, cloneElement, Fragment, isValidElement, useEffect, useRef, useState } from 'react';
 import { absoluteModulo } from '../../agnostic/numbers/absolute-modulo/index.js';
 import { clamp } from '../../agnostic/numbers/clamp/index.js';
 import { clss } from '../../agnostic/css/clss/index.js';
 import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
+import { useViewportBehaviours } from '../utils/viewport-behaviours/index.js';
 import { sequencer as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**
@@ -37,6 +38,29 @@ function parseSteps(raw) {
         return null;
     return steps;
 }
+/**
+ * The children, with fragments opened.
+ *
+ * **`Children.toArray` does not go through a `<>…</>`**: a fragment is one element to it,
+ * and one that cannot be classed either — `cloneElement` on it would hand `className` to
+ * `React.Fragment`, which warns and drops it. So a consumer whose children arrive wrapped
+ * in one gets a sequence of exactly one step, stuck on position `0`.
+ *
+ * That consumer is not hypothetical: lm-link renders an article's `<nodelist>` through
+ * `lm-html`, which returns `<>{children}</>` — every sequence written in hyper-json
+ * therefore arrives wrapped. Opening them here rather than asking each consumer to
+ * flatten is the only place the fix belongs: a fragment is a grouping with no rendered
+ * element of its own, so it has no business consuming a step.
+ */
+function flattenChildren(nodes) {
+    return Children.toArray(nodes).flatMap((child) => {
+        if (!isValidElement(child) || child.type !== Fragment)
+            return [child];
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- a fragment's props are its children and its key, whatever else they are
+        const { children } = child.props;
+        return flattenChildren(children);
+    });
+}
 /** 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
@@ -55,7 +79,24 @@ function stepsOf(child, elementIndex) {
  * 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.
+ * part: they carry no class, so they simply stay visible throughout. **A fragment is
+ * opened rather than counted**: it groups without rendering an element of its own, so
+ * there would be nothing to class and nothing to show for the step it would consume.
+ *
+ * @remarks
+ * **Viewport-driven behaviour is declared, not named by a prop.** `whenVisible` and
+ * `whenHidden` take a verb or a list of them, out of {@link SequencerAction} — `'play'`,
+ * `'jump-start'`, `'jump-by:1'` — each optionally suffixed by `':once'` and `':force'`.
+ * The old `playOnVisible`, `pauseOnHidden`, `resetOnVisible` and `resetOnHidden` are
+ * those four instructions written the long way: `whenHidden={['pause', 'jump-start']}`
+ * is the pair of them, and the order of a list is the order of execution. See
+ * `components/utils/viewport-behaviours` for the grammar, and the `visibility…` props
+ * for what « visible » means and how long it has to have been true.
+ *
+ * **Nothing surrenders here.** The layer lets a reader's hand switch an instruction off
+ * for the rest of the mount, and this component has no control for a hand to touch — so
+ * `':force'` has nothing to override, and the single `'playback'` domain is a formality.
+ * A gate still holds `'play'` back, which is a different brake. @see {@link SequencerDomain}
  *
  * ### On the root
  * `--playing`, `--at-start`, `--at-end`, `--ended`, plus `data-step`, `data-active-step`,
@@ -73,11 +114,13 @@ function stepsOf(child, elementIndex) {
  * 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 = ({ totalSteps, stepMap, step, defaultStep, play, tempo = 60, loop, onStepChanged, onIsPlayingChanged, onIsEndedChanged, onLooped, onReachedFirstStep, onReachedLastStep, className, children }) => {
+export const Sequencer = ({ totalSteps, stepMap, step, defaultStep, play, defaultPlay, tempo = 60, loop, onStepChanged, onIsPlayingChanged, onIsEndedChanged, onLooped, onReachedFirstStep, onReachedLastStep, behavioursSuspended, visibilityThreshold, visibilityRoot, visibilityRootMargin, visibilityOnAfterMs, visibilityOffAfterMs, whenVisible, whenHidden, onVisibilityChanged, className, children }) => {
     const [internalStep, setInternalStep] = useState(step ?? defaultStep ?? 0);
+    const [internalPlay, setInternalPlay] = useState(defaultPlay ?? false);
     const [hasLapped, setHasLapped] = useState(0);
+    const rootRef = useRef(null);
     // Children, split once: what takes part and what merely renders.
-    const childrenArr = Children.toArray(children);
+    const childrenArr = flattenChildren(children);
     const elements = childrenArr.filter(isValidElement);
     const stepsCount = Math.max(totalSteps ?? elements.length, 0);
     // The two numbers
@@ -88,11 +131,14 @@ export const Sequencer = ({ totalSteps, stepMap, step, defaultStep, play, tempo
             : 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;
+    // **The end is the counter leaving the last step, not arriving on it.** The last step
+    // is owed its beat like every other one, so the counter runs one past the end while
+    // the position clamps to it — which is also what keeps the whole thing derived: nothing
+    // has to be unset when `loop` or `step` changes under it, and `onReachedLastStep` stays
+    // the arrival that this is not. A sequence merely paused on the last step has not
+    // ended, and a consumer driving `step` says so by naming the position after the last.
+    const isEnded = loop !== true && stepsCount > 0 && rawStep >= stepsCount;
+    const isPlaying = (play ?? internalPlay) && !isEnded;
     useEffect(() => {
         if (!isPlaying || step !== undefined || stepsCount <= 0)
             return;
@@ -110,6 +156,70 @@ export const Sequencer = ({ totalSteps, stepMap, step, defaultStep, play, tempo
         setHasLapped(lap);
         onLooped?.();
     }, [lap, loop]);
+    // Viewport behaviours
+    // A jump names a position and lands on it **within the current lap**: the counter is
+    // absolute, so setting it to a bare position on a looping sequence would count as a
+    // wrap backwards and fire `onLooped` for a move nobody made. `jump-by` is left alone
+    // on purpose — stepping past the last position really is a wrap, and says so.
+    const jumpToPosition = (target) => {
+        if (step !== undefined || stepsCount <= 0)
+            return;
+        const resolved = target < 0 ? stepsCount + target : target;
+        const bounded = loop === true
+            ? absoluteModulo(resolved, stepsCount)
+            : clamp(resolved, 0, stepsCount - 1);
+        setInternalStep(lap * stepsCount + bounded);
+    };
+    const jumpBy = (offset) => {
+        if (step !== undefined || stepsCount <= 0)
+            return;
+        setInternalStep(current => current + offset);
+    };
+    // What each verb does. Rebuilt on every render — it closes over the setters — which is
+    // why the generic layer reads it through a ref rather than a dependency list.
+    //
+    // `play` and `pause` need no guard against a controlled `play`: the effective state
+    // reads the prop first, so the internal one they write is simply never consulted.
+    const actions = {
+        play: { kind: 'start', domain: 'playback', run: () => setInternalPlay(true) },
+        pause: { kind: 'stop', domain: 'playback', run: () => setInternalPlay(false) },
+        // A jump starts nothing on its own — it moves a counter, playing or not — so a gate
+        // has no reason to hold it back.
+        'jump-to': {
+            kind: 'stop',
+            domain: 'playback',
+            run: arg => {
+                const target = Number(arg);
+                if (!Number.isFinite(target))
+                    return;
+                jumpToPosition(target);
+            }
+        },
+        'jump-start': { kind: 'stop', domain: 'playback', run: () => jumpToPosition(0) },
+        'jump-end': { kind: 'stop', domain: 'playback', run: () => jumpToPosition(-1) },
+        'jump-by': {
+            kind: 'stop',
+            domain: 'playback',
+            run: arg => {
+                const offset = Number(arg);
+                if (!Number.isFinite(offset))
+                    return;
+                jumpBy(offset);
+            }
+        }
+    };
+    // The surrender half of the result is dropped, and that is the whole of what this
+    // component's lack of controls changes: nothing here can be taken over by hand.
+    useViewportBehaviours(rootRef, {
+        visibilityThreshold,
+        visibilityRoot,
+        visibilityRootMargin,
+        visibilityOnAfterMs,
+        visibilityOffAfterMs,
+        whenVisible,
+        whenHidden,
+        onVisibilityChanged
+    }, actions, behavioursSuspended === true);
     // State dispatch
     useChangeDispatch(position, () => onStepChanged?.(position, activeStep));
     useChangeDispatch(isPlaying, onIsPlayingChanged);
@@ -137,7 +247,7 @@ export const Sequencer = ({ totalSteps, stepMap, step, defaultStep, play, tempo
         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) => {
+    return _jsx("div", { ref: rootRef, 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;

package/components/Sequencer/types.d.ts

@@ -0,0 +1,57 @@
+/**
+ * The verbs a sequence answers to, as the table keys them.
+ *
+ * `jump-to` and `jump-by` are the two taking an argument, and the table is keyed by the
+ * verb alone — the argument is parsed out of the instruction before the lookup.
+ *
+ * The family is `Video`'s, word for word: a sequence and a player move a counter, and
+ * two vocabularies for that one gesture is exactly what the viewport-behaviours layer
+ * exists to stop. `jump-start` is the old `resetOnVisible` under the shared name.
+ */
+export declare const SEQUENCER_VERBS: readonly ["play", "pause", "jump-to", "jump-start", "jump-end", "jump-by"];
+export type SequencerVerb = typeof SEQUENCER_VERBS[number];
+/**
+ * How to read the argument of each verb that takes one.
+ *
+ * **Exported because a consumer has to validate what it is handed**, and a type gives a
+ * runtime validator nothing to compare against: lm-link reads an article's props out of
+ * static XML and has to reject `'jump-to:banana'` before it reaches the component.
+ *
+ * A digit string, and deliberately not `Number`: that would take `'1e3'` and `'0x10'`,
+ * which nobody means to write in an article.
+ */
+export declare const SEQUENCER_VERB_ARGUMENTS: {
+    readonly 'jump-to': (arg: string) => boolean;
+    readonly 'jump-by': (arg: string) => boolean;
+};
+/**
+ * The instructions a consumer writes in `whenVisible` / `whenHidden`.
+ *
+ * **A jump names a position, never an active step** — the counter, the thing `step` and
+ * `defaultStep` already name. What that position *means* stays `stepMap`'s answer, which
+ * is the one place the component's two numbers could be confused for one another.
+ *
+ * `'jump-to:2'` goes to position 2, and **a negative value counts from the end**:
+ * `'jump-to:-1'` is the last position, `-1` rather than `-0` because `-0 === 0` in
+ * JavaScript and would collide with the start. `'jump-start'` and `'jump-end'` are the
+ * shorthands for `'jump-to:0'` and `'jump-to:-1'`.
+ *
+ * `'jump-by:1'` is the next position and `'jump-by:-1'` the previous one — signed and
+ * relative, where `jump-to` is absolute. The two forms of `-1` therefore do not say the
+ * same thing, which is the price of keeping one family rather than adding `next` and
+ * `prev` beside it.
+ *
+ * Every one of them takes the `':once'` and `':force'` suffixes, which are the generic
+ * layer's and are not restated here.
+ */
+export type SequencerAction = Exclude<SequencerVerb, 'jump-to' | 'jump-by'> | `jump-to:${number}` | `jump-by:${number}`;
+/**
+ * What a verb competes with — one domain, and it is a formality.
+ *
+ * **This component has no controls**: nothing to click, so nothing a reader can take
+ * over and nothing that ever surrenders. The field is part of {@link ActionSpec} and is
+ * declared honestly rather than split into domains no hand could ever tell apart. The
+ * consequence is that `':force'` has no trigger here — it overrides a surrender, and
+ * there are none.
+ */
+export type SequencerDomain = 'playback';

package/components/Sequencer/types.js

@@ -0,0 +1,32 @@
+/**
+ * The verbs a sequence answers to, as the table keys them.
+ *
+ * `jump-to` and `jump-by` are the two taking an argument, and the table is keyed by the
+ * verb alone — the argument is parsed out of the instruction before the lookup.
+ *
+ * The family is `Video`'s, word for word: a sequence and a player move a counter, and
+ * two vocabularies for that one gesture is exactly what the viewport-behaviours layer
+ * exists to stop. `jump-start` is the old `resetOnVisible` under the shared name.
+ */
+export const SEQUENCER_VERBS = [
+    'play',
+    'pause',
+    'jump-to',
+    'jump-start',
+    'jump-end',
+    'jump-by'
+];
+/**
+ * How to read the argument of each verb that takes one.
+ *
+ * **Exported because a consumer has to validate what it is handed**, and a type gives a
+ * runtime validator nothing to compare against: lm-link reads an article's props out of
+ * static XML and has to reject `'jump-to:banana'` before it reaches the component.
+ *
+ * A digit string, and deliberately not `Number`: that would take `'1e3'` and `'0x10'`,
+ * which nobody means to write in an article.
+ */
+export const SEQUENCER_VERB_ARGUMENTS = {
+    'jump-to': (arg) => /^-?\d+$/v.test(arg),
+    'jump-by': (arg) => /^-?\d+$/v.test(arg)
+};

package/components/index.d.ts

@@ -3,10 +3,10 @@ export * as button from './Button/index.js'
 export * as clippable from './Clippable/index.js'
 export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
-export * as eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'
-export * as image from './Image/index.js'
 export * as iframe from './Iframe/index.js'
+export * as eventListener from './EventListener/index.js'
+export * as image from './Image/index.js'
 export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
@@ -15,8 +15,8 @@ export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'
-export * as scrllgngn from './Scrllgngn/index.js'
 export * as scrollListener from './ScrollListener/index.js'
+export * as scrllgngn from './Scrllgngn/index.js'
 export * as select from './Select/index.js'
 export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'

package/components/index.js

@@ -3,10 +3,10 @@ export * as button from './Button/index.js'
 export * as clippable from './Clippable/index.js'
 export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
-export * as eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'
-export * as image from './Image/index.js'
 export * as iframe from './Iframe/index.js'
+export * as eventListener from './EventListener/index.js'
+export * as image from './Image/index.js'
 export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
@@ -15,8 +15,8 @@ export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'
-export * as scrllgngn from './Scrllgngn/index.js'
 export * as scrollListener from './ScrollListener/index.js'
+export * as scrllgngn from './Scrllgngn/index.js'
 export * as select from './Select/index.js'
 export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'

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

@@ -1,7 +1,7 @@
-export * as copy from './copy/index.js'
 export * as download from './download/index.js'
+export * as copy from './copy/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'
+export * as remove from './remove/index.js'
 export * as upload from './upload/index.js'

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

@@ -1,7 +1,7 @@
-export * as copy from './copy/index.js'
 export * as download from './download/index.js'
+export * as copy from './copy/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'
+export * as remove from './remove/index.js'
 export * as upload from './upload/index.js'

package/node/@google-cloud/storage/file/index.d.ts

@@ -1,12 +1,12 @@
 export * as copy from './copy/index.js'
 export * as download from './download/index.js'
-export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
+export * as exists from './exists/index.js'
 export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
-export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as stat from './stat/index.js'
-export * as updateMetadata from './update-metadata/index.js'
+export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as upload from './upload/index.js'
+export * as updateMetadata from './update-metadata/index.js'

package/node/@google-cloud/storage/file/index.js

@@ -1,12 +1,12 @@
 export * as copy from './copy/index.js'
 export * as download from './download/index.js'
-export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
+export * as exists from './exists/index.js'
 export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
-export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as stat from './stat/index.js'
-export * as updateMetadata from './update-metadata/index.js'
+export * as revokeSignedUrls from './revoke-signed-urls/index.js'
 export * as upload from './upload/index.js'
+export * as updateMetadata from './update-metadata/index.js'

package/node/@google-cloud/storage/index.d.ts

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

package/node/@google-cloud/storage/index.js

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

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

@@ -5,7 +5,7 @@ export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as moveFile from './move-file/index.js'
-export * as removeDir from './remove-dir/index.js'
 export * as removeFile from './remove-file/index.js'
+export * as removeDir from './remove-dir/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'

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

@@ -5,7 +5,7 @@ export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as moveFile from './move-file/index.js'
-export * as removeDir from './remove-dir/index.js'
 export * as removeFile from './remove-file/index.js'
+export * as removeDir from './remove-dir/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'

package/node/ftps/file/index.d.ts

@@ -1,6 +1,6 @@
 export * as copy from './copy/index.js'
-export * as download from './download/index.js'
 export * as exists from './exists/index.js'
+export * as download from './download/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/ftps/file/index.js

@@ -1,6 +1,6 @@
 export * as copy from './copy/index.js'
-export * as download from './download/index.js'
 export * as exists from './exists/index.js'
+export * as download from './download/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/index.d.ts

@@ -5,7 +5,7 @@ export * as googleCloud from './@google-cloud/index.js'
 export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
-export * as ftps from './ftps/index.js'
 export * as images from './images/index.js'
 export * as process from './process/index.js'
+export * as ftps from './ftps/index.js'
 export * as sftp from './sftp/index.js'

package/node/index.js

@@ -5,7 +5,7 @@ export * as googleCloud from './@google-cloud/index.js'
 export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
-export * as ftps from './ftps/index.js'
 export * as images from './images/index.js'
 export * as process from './process/index.js'
+export * as ftps from './ftps/index.js'
 export * as sftp from './sftp/index.js'

package/node/sftp/file/index.d.ts

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

package/node/sftp/file/index.js

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

package/node/sftp/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/sftp/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.5.22",
+  "version": "0.5.24",
   "description": "",
   "author": "Maxime Fabas",
   "license": "ISC",
@@ -1558,6 +1558,10 @@
     "./components/Sequencer/index.js": {
       "import": "./components/Sequencer/index.js"
     },
+    "./components/Sequencer/types.js": {
+      "import": "./components/Sequencer/types.js",
+      "types": "./components/Sequencer/types.d.ts"
+    },
     "./components/ShadowRoot": {
       "import": "./components/ShadowRoot/index.js",
       "types": "./components/ShadowRoot/index.d.ts"