@design-edito/tools 0.5.21 → 0.5.23

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 make from './make/index.js'
 export * as randomPick from './random-pick/index.js'
 export * as shuffle from './shuffle/index.js'
+export * as isArrayOf from './is-array-of/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 make from './make/index.js'
 export * as randomPick from './random-pick/index.js'
 export * as shuffle from './shuffle/index.js'
+export * as isArrayOf from './is-array-of/index.js'

package/agnostic/colors/index.d.ts

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

package/agnostic/colors/index.js

@@ -1,12 +1,12 @@
 export * as channels from './channels/index.js'
 export * as contrast from './contrast/index.js'
 export * as convert from './convert/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 distance from './distance/index.js'
 export * as lerp from './lerp/index.js'
 export * as luminance from './luminance/index.js'
-export * as palette from './palette/index.js'
 export * as rotate from './rotate/index.js'
 export * as tidy from './tidy/index.js'
+export * as invert from './invert/index.js'
 export * as typechecks from './typechecks/index.js'
+export * as palette from './palette/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 scale from './scale/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
+export * as scale from './scale/index.js'
+export * as generateNiceColor from './generate-nice-color/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 scale from './scale/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
+export * as scale from './scale/index.js'
+export * as generateNiceColor from './generate-nice-color/index.js'
 export * as stylesSet from './styles-set/index.js'

package/agnostic/errors/index.d.ts

@@ -1,2 +1,2 @@
-export * as register from './register/index.js'
 export * as unknownToString from './unknown-to-string/index.js'
+export * as register from './register/index.js'

package/agnostic/errors/index.js

@@ -1,2 +1,2 @@
-export * as register from './register/index.js'
 export * as unknownToString from './unknown-to-string/index.js'
+export * as register from './register/index.js'

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

@@ -1,28 +1,28 @@
 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 at from './at/index.js'
+export * as append from './append/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 getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
+export * as getattribute from './getattribute/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 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 hjparse from './hjparse/index.js'
 export * as or from './or/index.js'
+export * as notrailing from './notrailing/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 populate from './populate/index.js'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
@@ -30,8 +30,8 @@ export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
-export * as select from './select/index.js'
 export * as set from './set/index.js'
+export * as select from './select/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
 export * as sorton from './sorton/index.js'
@@ -41,12 +41,12 @@ 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 tonodelist from './tonodelist/index.js'
 export * as tonumber from './tonumber/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 transformselected from './transformselected/index.js'

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

@@ -1,28 +1,28 @@
 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 at from './at/index.js'
+export * as append from './append/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 getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
+export * as getattribute from './getattribute/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 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 hjparse from './hjparse/index.js'
 export * as or from './or/index.js'
+export * as notrailing from './notrailing/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 populate from './populate/index.js'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
@@ -30,8 +30,8 @@ export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
-export * as select from './select/index.js'
 export * as set from './set/index.js'
+export * as select from './select/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
 export * as sorton from './sorton/index.js'
@@ -41,12 +41,12 @@ 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 tonodelist from './tonodelist/index.js'
 export * as tonumber from './tonumber/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 transformselected from './transformselected/index.js'

package/agnostic/html/index.d.ts

@@ -1,5 +1,4 @@
 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 hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
@@ -8,3 +7,4 @@ export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
+export * as getNodeAncestors from './get-node-ancestors/index.js'

package/agnostic/html/index.js

@@ -1,5 +1,4 @@
 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 hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
@@ -8,3 +7,4 @@ export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
+export * as getNodeAncestors from './get-node-ancestors/index.js'

package/agnostic/index.d.ts

@@ -1,17 +1,17 @@
 export * as arrays from './arrays/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 colors from './colors/index.js'
 export * as errors from './errors/index.js'
-export * as html from './html/index.js'
+export * as css from './css/index.js'
 export * as misc from './misc/index.js'
 export * as objects from './objects/index.js'
+export * as html from './html/index.js'
 export * as optim from './optim/index.js'
-export * as numbers from './numbers/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 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'
+export * as numbers from './numbers/index.js'

package/agnostic/index.js

@@ -1,17 +1,17 @@
 export * as arrays from './arrays/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 colors from './colors/index.js'
 export * as errors from './errors/index.js'
-export * as html from './html/index.js'
+export * as css from './css/index.js'
 export * as misc from './misc/index.js'
 export * as objects from './objects/index.js'
+export * as html from './html/index.js'
 export * as optim from './optim/index.js'
-export * as numbers from './numbers/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 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'
+export * as numbers from './numbers/index.js'

package/agnostic/misc/index.d.ts

@@ -2,11 +2,11 @@ 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 crossenv from './crossenv/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as loremIpsum from './lorem-ipsum/index.js'
 export * as logs from './logs/index.js'
+export * as loremIpsum from './lorem-ipsum/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/misc/index.js

@@ -2,11 +2,11 @@ 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 crossenv from './crossenv/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as loremIpsum from './lorem-ipsum/index.js'
 export * as logs from './logs/index.js'
+export * as loremIpsum from './lorem-ipsum/index.js'
 export * as normalizeExtension from './normalize-extension/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 clamp from './clamp/index.js'
 export * as round from './round/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 clamp from './clamp/index.js'
 export * as round from './round/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/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.
  *
@@ -59,6 +75,21 @@ export type Props = PropsWithChildren<WithClassName<{
  * Children that are not elements — text, whitespace — are rendered untouched and take no
  * part: they carry no class, so they simply stay visible throughout.
  *
+ * @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`,
  * `data-total-steps` and `data-tempo`.

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, 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';
 /**
@@ -57,6 +58,21 @@ function stepsOf(child, elementIndex) {
  * Children that are not elements — text, whitespace — are rendered untouched and take no
  * part: they carry no class, so they simply stay visible throughout.
  *
+ * @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`,
  * `data-total-steps` and `data-tempo`.
@@ -73,9 +89,11 @@ 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 elements = childrenArr.filter(isValidElement);
@@ -88,11 +106,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 +131,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 +222,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/Video/index.js

@@ -137,7 +137,8 @@ export const Video = ({ defaultSubtitlesOn = true, behavioursSuspended, visibili
     const handleFullscreenChange = useCallback((isFullscreen) => {
         if (!isFullscreen)
             setFullscreen(false);
-    }, []);
+        controlledProps.onFullscreenChange?.(isFullscreen);
+    }, [controlledProps.onFullscreenChange]);
     const handleOnLoadedMetadataEvent = useCallback((e) => {
         muteAttributeWorkaround(e.currentTarget, controlledProps.muted ?? false);
         controlledProps.onLoadedMetadata?.(e);

package/components/index.d.ts

@@ -13,8 +13,8 @@ export * as jsonEditor from './JsonEditor/index.js'
 export * as lightbox from './Lightbox/index.js'
 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 paginator from './Paginator/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
 export * as scrollListener from './ScrollListener/index.js'
 export * as select from './Select/index.js'

package/components/index.js

@@ -13,8 +13,8 @@ export * as jsonEditor from './JsonEditor/index.js'
 export * as lightbox from './Lightbox/index.js'
 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 paginator from './Paginator/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
 export * as scrollListener from './ScrollListener/index.js'
 export * as select from './Select/index.js'

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

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
-export * as list from './list/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as list from './list/index.js'
 export * as removeDir from './remove-dir/index.js'

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

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
-export * as list from './list/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as list from './list/index.js'
 export * as removeDir from './remove-dir/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 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 move from './move/index.js'
 export * as upload from './upload/index.js'
+export * as stat from './stat/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 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 move from './move/index.js'
 export * as upload from './upload/index.js'
+export * as stat from './stat/index.js'

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

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

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

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

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

@@ -3,9 +3,9 @@ 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 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 getPermissions from './get-permissions/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'

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

@@ -3,9 +3,9 @@ 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 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 getPermissions from './get-permissions/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'

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/images/index.d.ts

@@ -1,5 +1,5 @@
-export * as create from './create/index.js'
 export * as format from './format/index.js'
 export * as metadata from './metadata/index.js'
 export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'
+export * as create from './create/index.js'

package/node/images/index.js

@@ -1,5 +1,5 @@
-export * as create from './create/index.js'
 export * as format from './format/index.js'
 export * as metadata from './metadata/index.js'
 export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'
+export * as create from './create/index.js'

package/node/images/transform/operations/index.d.ts

@@ -1,15 +1,15 @@
 export * as blur from './blur/index.js'
 export * as brighten from './brighten/index.js'
 export * as extend from './extend/index.js'
-export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
+export * as extract from './extract/index.js'
 export * as flip from './flip/index.js'
-export * as flop from './flop/index.js'
 export * as hue from './hue/index.js'
+export * as flop from './flop/index.js'
 export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
 export * as normalize from './normalize/index.js'
-export * as overlay from './overlay/index.js'
 export * as resize from './resize/index.js'
 export * as rotate from './rotate/index.js'
+export * as overlay from './overlay/index.js'
 export * as saturate from './saturate/index.js'

package/node/images/transform/operations/index.js

@@ -1,15 +1,15 @@
 export * as blur from './blur/index.js'
 export * as brighten from './brighten/index.js'
 export * as extend from './extend/index.js'
-export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
+export * as extract from './extract/index.js'
 export * as flip from './flip/index.js'
-export * as flop from './flop/index.js'
 export * as hue from './hue/index.js'
+export * as flop from './flop/index.js'
 export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
 export * as normalize from './normalize/index.js'
-export * as overlay from './overlay/index.js'
 export * as resize from './resize/index.js'
 export * as rotate from './rotate/index.js'
+export * as overlay from './overlay/index.js'
 export * as saturate from './saturate/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.5.21",
+  "version": "0.5.23",
   "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"