@design-edito/tools 0.5.24 → 0.5.26

package/agnostic/arrays/index.d.ts

@@ -1,6 +1,6 @@
-export * as isArrayOf from './is-array-of/index.js'
+export * as dedupe from './dedupe/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 dedupe from './dedupe/index.js'
+export * as isArrayOf from './is-array-of/index.js'

package/agnostic/arrays/index.js

@@ -1,6 +1,6 @@
-export * as isArrayOf from './is-array-of/index.js'
+export * as dedupe from './dedupe/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 dedupe from './dedupe/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 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 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 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 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 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 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 isValidCssClassName from './is-valid-css-class-name/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 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 isValidCssClassName from './is-valid-css-class-name/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 stylesSet from './styles-set/index.js'

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

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
-export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
+export * as addclass from './addclass/index.js'
 export * as append from './append/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
-export * as clone from './clone/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
-export * as getattribute from './getattribute/index.js'
+export * as clone from './clone/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 getattribute from './getattribute/index.js'
 export * as equals from './equals/index.js'
+export * as hjparse from './hjparse/index.js'
+export * as getproperty from './getproperty/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 length from './length/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 initialize from './initialize/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 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 removeattribute from './removeattribute/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
+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 replace from './replace/index.js'
 export * as set from './set/index.js'
 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 toarray from './toarray/index.js'
-export * as toboolean from './toboolean/index.js'
+export * as setproperty from './setproperty/index.js'
 export * as spread from './spread/index.js'
-export * as toelement from './toelement/index.js'
+export * as toarray from './toarray/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 toelement from './toelement/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 transformselected from './transformselected/index.js'
-export * as trim from './trim/index.js'
+export * as toboolean from './toboolean/index.js'
+export * as toref from './toref/index.js'
 export * as totext from './totext/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,52 +1,52 @@
 export * as add from './add/index.js'
-export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
+export * as addclass from './addclass/index.js'
 export * as append from './append/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
-export * as clone from './clone/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
-export * as getattribute from './getattribute/index.js'
+export * as clone from './clone/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 getattribute from './getattribute/index.js'
 export * as equals from './equals/index.js'
+export * as hjparse from './hjparse/index.js'
+export * as getproperty from './getproperty/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 length from './length/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 initialize from './initialize/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 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 removeattribute from './removeattribute/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
+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 replace from './replace/index.js'
 export * as set from './set/index.js'
 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 toarray from './toarray/index.js'
-export * as toboolean from './toboolean/index.js'
+export * as setproperty from './setproperty/index.js'
 export * as spread from './spread/index.js'
-export * as toelement from './toelement/index.js'
+export * as toarray from './toarray/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 toelement from './toelement/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 transformselected from './transformselected/index.js'
-export * as trim from './trim/index.js'
+export * as toboolean from './toboolean/index.js'
+export * as toref from './toref/index.js'
 export * as totext from './totext/index.js'
+export * as trim from './trim/index.js'
+export * as transformselected from './transformselected/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 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 array from './array/index.js'
+export * as null from './null/index.js'
+export * as get from './get/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
+export * as string from './string/index.js'
 export * as ref from './ref/index.js'
 export * as text from './text/index.js'
-export * as string from './string/index.js'
-export * as null from './null/index.js'
+export * as nodelist from './nodelist/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 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 array from './array/index.js'
+export * as null from './null/index.js'
+export * as get from './get/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
+export * as string from './string/index.js'
 export * as ref from './ref/index.js'
 export * as text from './text/index.js'
-export * as string from './string/index.js'
-export * as null from './null/index.js'
+export * as nodelist from './nodelist/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 css from './css/index.js'
 export * as colors from './colors/index.js'
-export * as html from './html/index.js'
+export * as css from './css/index.js'
 export * as errors from './errors/index.js'
-export * as misc from './misc/index.js'
+export * as html from './html/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'
+export * as misc from './misc/index.js'
 export * as optim from './optim/index.js'
-export * as regexps from './regexps/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 strings from './strings/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 regexps from './regexps/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 css from './css/index.js'
 export * as colors from './colors/index.js'
-export * as html from './html/index.js'
+export * as css from './css/index.js'
 export * as errors from './errors/index.js'
-export * as misc from './misc/index.js'
+export * as html from './html/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'
+export * as misc from './misc/index.js'
 export * as optim from './optim/index.js'
-export * as regexps from './regexps/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 strings from './strings/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 regexps from './regexps/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 connection from './connection/index.js'
+export * as crossenv from './crossenv/index.js'
 export * as dataSize from './data-size/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as 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 logs from './logs/index.js'
+export * as loremIpsum from './lorem-ipsum/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 connection from './connection/index.js'
+export * as crossenv from './crossenv/index.js'
 export * as dataSize from './data-size/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as 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 logs from './logs/index.js'
+export * as loremIpsum from './lorem-ipsum/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/numbers/index.d.ts

@@ -2,5 +2,5 @@ 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 interpolate from './interpolate/index.js'

package/agnostic/numbers/index.js

@@ -2,5 +2,5 @@ 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 interpolate from './interpolate/index.js'

package/agnostic/objects/index.d.ts

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
 export * as flattenGetters from './flatten-getters/index.js'
 export * as isObject from './is-object/index.js'
+export * as enums from './enums/index.js'
 export * as recordFormat from './record-format/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 isRecord from './is-record/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 flattenGetters from './flatten-getters/index.js'
 export * as isObject from './is-object/index.js'
+export * as enums from './enums/index.js'
 export * as recordFormat from './record-format/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 isRecord from './is-record/index.js'
 export * as validation from './validation/index.js'
-export * as enums from './enums/index.js'

package/agnostic/strings/index.d.ts

@@ -1,8 +1,8 @@
-export * as charCodes from './char-codes/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 replaceAll from './replace-all/index.js'
+export * as charCodes from './char-codes/index.js'
+export * as parseTable from './parse-table/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'
+export * as splitTrim from './split-trim/index.js'

package/agnostic/strings/index.js

@@ -1,8 +1,8 @@
-export * as charCodes from './char-codes/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 replaceAll from './replace-all/index.js'
+export * as charCodes from './char-codes/index.js'
+export * as parseTable from './parse-table/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'
+export * as splitTrim from './split-trim/index.js'

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

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

package/agnostic/time/dates/index.js

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

package/agnostic/time/index.d.ts

@@ -1,5 +1,5 @@
+export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
 export * as timeout from './timeout/index.js'
 export * as 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 dates from './dates/index.js'
 export * as duration from './duration/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/Clippable/index.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type FunctionComponent, type MouseEvent } from 'react';
+import { type PropsWithChildren, type FunctionComponent, type MouseEvent, type ReactNode } from 'react';
 import type { WithClassName } from '../utils/types.js';
 /**
  * Props for the {@link Clippable} component.
@@ -6,6 +6,15 @@ import type { WithClassName } from '../utils/types.js';
  * @property toClip - Content written to the clipboard. When omitted, the
  * content container's `innerHTML` is used. A function may be provided to
  * transform that current content before it is written.
+ * @property copyBtnContent - What the copy button shows at rest. Left out, the button
+ * renders empty and a stylesheet fills it — `:empty::before` — which is how every
+ * control in this library takes its default look without the component deciding on a
+ * word or a glyph.
+ * @property clippedBtnContent - What it shows during the three seconds after a
+ * successful write. Left out, the button is empty in that state too, and the same
+ * stylesheet hook applies. It does **not** fall back to `copyBtnContent`: the two states
+ * say different things, and an article that names one without the other means the other
+ * to come from the stylesheet.
  * @property onCopyClicked - Called when the copy button is clicked, before the
  * clipboard content is resolved, with the container's raw HTML.
  * @property onClipped - Called once content has been written to the clipboard.
@@ -17,6 +26,8 @@ import type { WithClassName } from '../utils/types.js';
  */
 export type Props = PropsWithChildren<WithClassName<{
     toClip?: string | ((curr: string | undefined) => string | undefined);
+    copyBtnContent?: ReactNode;
+    clippedBtnContent?: ReactNode;
     onCopyClicked?: (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, rawContent: string | undefined) => void;
     onClipped?: (content: string) => void;
     onCopyFailed?: (error: unknown) => void;

package/components/Clippable/index.js

@@ -26,7 +26,7 @@ const clippedModifierDurationMs = 3000;
  * unset) and leaves the component untouched: neither `onClipped` nor the
  * `clipped` modifier fires.
  */
-export const Clippable = ({ className, children, toClip, onCopyClicked, onClipped, onCopyFailed }) => {
+export const Clippable = ({ className, children, toClip, copyBtnContent, clippedBtnContent, onCopyClicked, onClipped, onCopyFailed }) => {
     // State & refs
     const [hasBeenRecentlyClipped, setHasBeenRecentlyClipped] = useState(false);
     const contentRef = useRef(null);
@@ -71,5 +71,5 @@ export const Clippable = ({ className, children, toClip, onCopyClicked, onClippe
     }), className);
     const copyClss = c('copy');
     const contentClss = c('content');
-    return _jsxs("div", { className: rootClss, children: [_jsx("button", { type: 'button', className: copyClss, onClick: e => { void handleCopyClick(e); } }), _jsx("div", { ref: contentRef, className: contentClss, children: children })] });
+    return _jsxs("div", { className: rootClss, children: [_jsx("button", { type: 'button', className: copyClss, onClick: e => { void handleCopyClick(e); }, children: hasBeenRecentlyClipped ? clippedBtnContent : copyBtnContent }), _jsx("div", { ref: contentRef, className: contentClss, children: children })] });
 };

package/components/ScrollListener/index.d.ts

@@ -1,43 +1,59 @@
 import { type FunctionComponent, type PropsWithChildren } from 'react';
-import type { WithClassName, WithViewportObservation } from '../utils/types.js';
+import type { WithClassName } from '../utils/types.js';
+import type { ViewportBehaviours } from '../utils/viewport-behaviours/types.js';
 import { type ScrollState } from './utils.js';
+import type { ScrollListenerAction } from './types.js';
 /**
  * Props for the {@link ScrollListener} component.
  *
- * @property startOnVisible - When `true`, scroll tracking only starts once the
- * component enters the viewport, instead of on mount.
- * @property stopOnHidden - When `true`, scroll tracking stops when the component
- * leaves the viewport.
+ * @property tracking - Whether the component is measuring, taken over by the consumer.
+ * Provided, it is the whole answer and the instructions no longer reach it.
+ * @property defaultTracking - Whether it starts measuring on mount. `true` by default,
+ * which is what this component has always done — a starting point and not a setting,
+ * hence `default…`. `defaultTracking={false}` with `whenVisible='track'` is the old
+ * `startOnVisible`, written in the shared grammar.
+ * @property behavioursSuspended - Holds back the instructions that **start** something,
+ * and lets through those that stop it. A gate reaches `'track'`: measuring a subtree
+ * nobody is being shown is work done for no one.
+ * @property onIsTrackingChanged - Called once the effective tracking state changed.
  * @property onScrollStateChanged - Called after the measured {@link ScrollState}
  * changed. Receives `undefined` until the first measurement lands.
- * @property onVisibilityChanged - Called on every intersection change, with
- * `true` when the component intersects the viewport.
+ * @property onVisibilityChanged - Called when the component enters or leaves the
+ * viewport, on the **settled** state — the `visibility…` delays included, so a consumer
+ * watching visibility and a consumer running instructions are told the same story.
  * @property onScrollProgressChanged - Called after the element's vertical outer
  * scroll progress changed: `0` when it is about to enter the viewport, `1` once
  * it has fully left it. Never on mount.
  * @property onScrollDirectionChanged - Called after the document scroll
  * direction changed, with `'up'` or `'down'`. Never on mount.
- * @property threshold - How much of the component has to be in view before it
- * counts as visible, forwarded to the internal {@link IntersectionObserver}.
- * @property root - The observer's root. Defaults to the viewport.
- * @property rootMargin - Grows or shrinks that root before measuring.
+ * @property visibilityThreshold - How much of the component has to be in view before it
+ * counts as visible. See `VisibilityOptions` for this and the four that follow it.
+ * @property visibilityRoot - The box visibility is measured against.
+ * @property visibilityRootMargin - Grows or shrinks that box before measuring.
+ * @property visibilityOnAfterMs - How long it must stay visible to count as visible.
+ * @property visibilityOffAfterMs - The same, on the way out.
  * @property className - Optional additional class name(s) applied to the root element.
  * @property children - React nodes rendered inside the scroll listener container.
  */
-export type Props = PropsWithChildren<WithClassName<WithViewportObservation<{
-    startOnVisible?: boolean;
-    stopOnHidden?: boolean;
+export type Props = PropsWithChildren<WithClassName<{
+    tracking?: boolean;
+    defaultTracking?: boolean;
+    onIsTrackingChanged?: (isTracking: boolean) => void;
     onScrollStateChanged?: (scrollState?: ScrollState) => void;
-    onVisibilityChanged?: (isVisible: boolean) => void;
     onScrollProgressChanged?: (progress: number) => void;
     onScrollDirectionChanged?: (direction: 'up' | 'down') => void;
-}>>>;
+}>> & ViewportBehaviours<ScrollListenerAction> & {
+    behavioursSuspended?: boolean;
+};
 /**
  * Exposes scroll metrics — both the document's and its own — as CSS custom
  * properties on its root element, so scroll-driven styling needs no JavaScript
  * of its own.
  *
  * ### Root element modifiers
+ * - `--tracking` — the component is measuring. The state, where `--measured` is its
+ *   consequence: a listener that has stopped keeps its last values, so it can be
+ *   measured and no longer tracking.
  * - `--measured` — a first measurement landed, so the properties below are set.
  * - `--scrolling-up` / `--scrolling-down` — the document's last known direction.
  *   Neither is present before the first scroll.
@@ -66,10 +82,21 @@ export type Props = PropsWithChildren<WithClassName<WithViewportObservation<{
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A container exposing the metrics, wrapping its children inside an
- * {@link IntersectionObserverComponent}.
+ * @returns A container exposing the metrics, with the children as its own.
  *
  * @remarks
+ * **Viewport-driven behaviour is declared, not named by a prop.** `whenVisible` and
+ * `whenHidden` take `'track'`, `'untrack'`, or a list, each optionally suffixed by
+ * `':once'` and `':force'`. The old `startOnVisible` is `defaultTracking={false}` plus
+ * `whenVisible='track'`, and `stopOnHidden` is `whenHidden='untrack'`. 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.
+ *
+ * **The observer runs on the root itself.** There is no inner box between this element
+ * and the children any more, and that matters here more than anywhere else in the
+ * library: the whole point is a stylesheet animating on the properties this element
+ * carries, which it cannot do if what it wants to move sits one level below.
+ *
  * All mounted instances share a single pair of `scroll` / `resize` listeners and
  * a single measurement pass per animation frame — the document is measured once
  * for everyone, each element only for itself. The listeners exist only while at