@design-edito/tools 0.5.16 → 0.5.17

package/agnostic/colors/index.d.ts

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

package/agnostic/colors/index.js

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

package/agnostic/css/index.d.ts

@@ -1,6 +1,6 @@
 export * as bem from './bem/index.js'
-export * as generateNiceColor from './generate-nice-color/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 stylesSet from './styles-set/index.js'

package/agnostic/css/index.js

@@ -1,6 +1,6 @@
 export * as bem from './bem/index.js'
-export * as generateNiceColor from './generate-nice-color/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 stylesSet from './styles-set/index.js'

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

@@ -1,11 +1,11 @@
+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 add from './add/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 deleteproperties from './deleteproperties/index.js'
-export * as clone from './clone/index.js'
 export * as equals from './equals/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
@@ -13,40 +13,40 @@ export * as getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as initialize from './initialize/index.js'
-export * as if from './if/index.js'
 export * as join from './join/index.js'
 export * as length from './length/index.js'
+export * as if from './if/index.js'
 export * as map from './map/index.js'
 export * as negate from './negate/index.js'
-export * as or from './or/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 push from './push/index.js'
 export * as pusheach from './pusheach/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 removeattribute from './removeattribute/index.js'
+export * as push from './push/index.js'
 export * as select from './select/index.js'
-export * as setproperty from './setproperty/index.js'
-export * as setattribute from './setattribute/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 spread from './spread/index.js'
+export * as split from './split/index.js'
 export * as toarray from './toarray/index.js'
 export * as toelement from './toelement/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
-export * as tonumber from './tonumber/index.js'
 export * as toboolean from './toboolean/index.js'
+export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
-export * as tostring from './tostring/index.js'
 export * as toref from './toref/index.js'
-export * as totext from './totext/index.js'
+export * as tostring from './tostring/index.js'
+export * as toggleclass from './toggleclass/index.js'
 export * as transformselected from './transformselected/index.js'
+export * as totext from './totext/index.js'
 export * as trim from './trim/index.js'

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

@@ -1,11 +1,11 @@
+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 add from './add/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 deleteproperties from './deleteproperties/index.js'
-export * as clone from './clone/index.js'
 export * as equals from './equals/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
@@ -13,40 +13,40 @@ export * as getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as initialize from './initialize/index.js'
-export * as if from './if/index.js'
 export * as join from './join/index.js'
 export * as length from './length/index.js'
+export * as if from './if/index.js'
 export * as map from './map/index.js'
 export * as negate from './negate/index.js'
-export * as or from './or/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 push from './push/index.js'
 export * as pusheach from './pusheach/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 removeattribute from './removeattribute/index.js'
+export * as push from './push/index.js'
 export * as select from './select/index.js'
-export * as setproperty from './setproperty/index.js'
-export * as setattribute from './setattribute/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 spread from './spread/index.js'
+export * as split from './split/index.js'
 export * as toarray from './toarray/index.js'
 export * as toelement from './toelement/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
-export * as tonumber from './tonumber/index.js'
 export * as toboolean from './toboolean/index.js'
+export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
-export * as tostring from './tostring/index.js'
 export * as toref from './toref/index.js'
-export * as totext from './totext/index.js'
+export * as tostring from './tostring/index.js'
+export * as toggleclass from './toggleclass/index.js'
 export * as transformselected from './transformselected/index.js'
+export * as totext from './totext/index.js'
 export * as trim from './trim/index.js'

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

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

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

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

package/agnostic/html/index.d.ts

@@ -1,10 +1,10 @@
+export * as deepSelect from './deep-select/index.js'
 export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
-export * as hyperJson from './hyper-json/index.js'
-export * as insertNode from './insert-node/index.js'
-export * as deepSelect from './deep-select/index.js'
 export * as placeholders from './placeholders/index.js'
+export * as insertNode from './insert-node/index.js'
 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 hyperJson from './hyper-json/index.js'

package/agnostic/html/index.js

@@ -1,10 +1,10 @@
+export * as deepSelect from './deep-select/index.js'
 export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
-export * as hyperJson from './hyper-json/index.js'
-export * as insertNode from './insert-node/index.js'
-export * as deepSelect from './deep-select/index.js'
 export * as placeholders from './placeholders/index.js'
+export * as insertNode from './insert-node/index.js'
 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 hyperJson from './hyper-json/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 colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
-export * as arrays from './arrays/index.js'
 export * as html from './html/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 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 time from './time/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 colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
-export * as arrays from './arrays/index.js'
 export * as html from './html/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 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 time from './time/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 crawler from './crawler/index.js'
-export * as dataSize from './data-size/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 isConstructorFunction from './is-constructor-function/index.js'
 export * as logs from './logs/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
-export * as crossenv from './crossenv/index.js'
+export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'
+export * as dataSize from './data-size/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as normalizeExtension from './normalize-extension/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 crawler from './crawler/index.js'
-export * as dataSize from './data-size/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 isConstructorFunction from './is-constructor-function/index.js'
 export * as logs from './logs/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
-export * as crossenv from './crossenv/index.js'
+export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'
+export * as dataSize from './data-size/index.js'
 export * as isNullish from './is-nullish/index.js'
-export * as normalizeExtension from './normalize-extension/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 absoluteModulo from './absolute-modulo/index.js'
 export * as geometricProgressions from './geometric-progressions/index.js'
-export * as interpolate from './interpolate/index.js'
+export * as approximateRational from './approximate-rational/index.js'
 export * as round from './round/index.js'
+export * as interpolate from './interpolate/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 absoluteModulo from './absolute-modulo/index.js'
 export * as geometricProgressions from './geometric-progressions/index.js'
-export * as interpolate from './interpolate/index.js'
+export * as approximateRational from './approximate-rational/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 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 recordMap from './record-map/index.js'
-export * as enums from './enums/index.js'
+export * as isObject from './is-object/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'
+export * as recordMap from './record-map/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 recordMap from './record-map/index.js'
-export * as enums from './enums/index.js'
+export * as isObject from './is-object/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'
+export * as recordMap from './record-map/index.js'

package/agnostic/optim/index.d.ts

@@ -1,2 +1,2 @@
-export * as memoize from './memoize/index.js'
 export * as throttleDebounce from './throttle-debounce/index.js'
+export * as memoize from './memoize/index.js'

package/agnostic/optim/index.js

@@ -1,2 +1,2 @@
-export * as memoize from './memoize/index.js'
 export * as throttleDebounce from './throttle-debounce/index.js'
+export * as memoize from './memoize/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 normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
-export * as replaceAll from './replace-all/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 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 matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
-export * as replaceAll from './replace-all/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 toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/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 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 transitions from './transitions/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 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 transitions from './transitions/index.js'

package/components/IntersectionObserver/index.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type FunctionComponent } from 'react';
+import { type PropsWithChildren, type FunctionComponent, type RefObject } from 'react';
 import type { WithClassName } from '../utils/types.js';
 /** Alias for the native IntersectionObserver interface. */
 export type IO = IntersectionObserver;
@@ -40,18 +40,43 @@ export type Props = PropsWithChildren<WithClassName<{
         observer: IO;
     }) => void;
 } & ObserverOptions>>;
+/**
+ * Observes an element a caller already renders, rather than one wrapped in a div of
+ * our own.
+ *
+ * This is the whole of the behaviour; {@link IntersectionObserverComponent} is this
+ * hook plus a div to hang it on. Reach for the hook when the element to watch is
+ * already in the tree — a component's own root, typically — and for the component
+ * when there is nothing to watch yet and a box has to be created.
+ *
+ * @param targetRef - The element to observe. Nothing happens until it is attached.
+ * @param options - See {@link ObserverOptions}.
+ * @param onIntersected - Called on every intersection change.
+ * @param enabled - `false` skips the observer entirely, for a caller whose need for
+ * it depends on its own props. A hook cannot be called conditionally; this is how
+ * the condition is expressed.
+ *
+ * @returns The latest {@link IntersectionObserverEntry}, or `null` before the first.
+ *
+ * @remarks
+ * - Automatically creates and disconnects the {@link IntersectionObserver} instance.
+ * - Re-observes the element shortly after mount to handle late layout changes.
+ */
+export declare function useIntersectionObserver(targetRef: RefObject<Element | null>, { root, rootMargin, threshold }: ObserverOptions, onIntersected?: Props['onIntersected'], enabled?: boolean): IOE | null;
 /**
  * Component that observes its root element using the IntersectionObserver API
  * and notifies consumers about visibility changes.
  *
+ * A div and {@link useIntersectionObserver}, and nothing else. A component that
+ * already renders the element it wants watched should use the hook and keep its own
+ * root, rather than gain a wrapper it has no other use for.
+ *
  * @param props - Component properties.
  * @see {@link Props}
  *
  * @returns A div element wrapping `children`, observed for intersection changes.
  *
  * @remarks
- * - Automatically creates and disconnects the {@link IntersectionObserver} instance.
- * - Re-observes the element shortly after mount to handle late layout changes.
  * - Adds an `is-intersecting` modifier class when the element is intersecting.
  */
 export declare const IntersectionObserverComponent: FunctionComponent<Props>;

package/components/IntersectionObserver/index.js

@@ -5,23 +5,29 @@ import { mergeClassNames } from '../utils/index.js';
 import { intersectionObserver as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**
- * Component that observes its root element using the IntersectionObserver API
- * and notifies consumers about visibility changes.
+ * Observes an element a caller already renders, rather than one wrapped in a div of
+ * our own.
  *
- * @param props - Component properties.
- * @see {@link Props}
+ * This is the whole of the behaviour; {@link IntersectionObserverComponent} is this
+ * hook plus a div to hang it on. Reach for the hook when the element to watch is
+ * already in the tree — a component's own root, typically — and for the component
+ * when there is nothing to watch yet and a box has to be created.
  *
- * @returns A div element wrapping `children`, observed for intersection changes.
+ * @param targetRef - The element to observe. Nothing happens until it is attached.
+ * @param options - See {@link ObserverOptions}.
+ * @param onIntersected - Called on every intersection change.
+ * @param enabled - `false` skips the observer entirely, for a caller whose need for
+ * it depends on its own props. A hook cannot be called conditionally; this is how
+ * the condition is expressed.
+ *
+ * @returns The latest {@link IntersectionObserverEntry}, or `null` before the first.
  *
  * @remarks
  * - Automatically creates and disconnects the {@link IntersectionObserver} instance.
  * - Re-observes the element shortly after mount to handle late layout changes.
- * - Adds an `is-intersecting` modifier class when the element is intersecting.
  */
-export const IntersectionObserverComponent = ({ onIntersected, root, rootMargin, threshold, className, children }) => {
-    // Refs, handlers and effects
+export function useIntersectionObserver(targetRef, { root, rootMargin, threshold }, onIntersected, enabled = true) {
     const [ioEntry, setIoEntry] = useState(null);
-    const rootRef = useRef(null);
     const observerRef = useRef(null);
     const observation = useCallback((entries, observer) => {
         const thisEntry = entries[0];
@@ -31,33 +37,58 @@ export const IntersectionObserverComponent = ({ onIntersected, root, rootMargin,
         setIoEntry(thisEntry);
     }, [onIntersected]);
     const forceObservation = useCallback(() => {
-        const rootEl = rootRef.current;
+        const targetEl = targetRef.current;
         const observer = observerRef.current;
-        if (rootEl === null || observer === null)
+        if (targetEl === null || observer === null)
             return;
-        observer.unobserve(rootEl);
-        observer.observe(rootEl);
-    }, []);
+        observer.unobserve(targetEl);
+        observer.observe(targetEl);
+    }, [targetRef]);
     useEffect(() => {
-        const rootEl = rootRef.current;
-        if (rootEl === null) {
+        if (!enabled)
+            return;
+        const targetEl = targetRef.current;
+        if (targetEl === null) {
             // eslint-disable-next-line no-console
-            console.warn('rootRef.current should not be null');
+            console.warn('targetRef.current should not be null');
             return;
         }
         const observer = new IntersectionObserver(observation, { root, rootMargin, threshold });
         observerRef.current = observer;
-        observer.observe(rootEl);
+        observer.observe(targetEl);
         return () => observer.disconnect();
-    }, [root, rootMargin, threshold, observation]);
+    }, [enabled, targetRef, root, rootMargin, threshold, observation]);
     useEffect(() => {
+        if (!enabled)
+            return;
         const timeout1 = window.setTimeout(forceObservation, 100);
         const timeout2 = window.setTimeout(forceObservation, 500);
         return () => {
             window.clearTimeout(timeout1);
             window.clearTimeout(timeout2);
         };
-    }, [forceObservation]);
+    }, [enabled, forceObservation]);
+    return ioEntry;
+}
+/**
+ * Component that observes its root element using the IntersectionObserver API
+ * and notifies consumers about visibility changes.
+ *
+ * A div and {@link useIntersectionObserver}, and nothing else. A component that
+ * already renders the element it wants watched should use the hook and keep its own
+ * root, rather than gain a wrapper it has no other use for.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ *
+ * @returns A div element wrapping `children`, observed for intersection changes.
+ *
+ * @remarks
+ * - Adds an `is-intersecting` modifier class when the element is intersecting.
+ */
+export const IntersectionObserverComponent = ({ onIntersected, root, rootMargin, threshold, className, children }) => {
+    const rootRef = useRef(null);
+    const ioEntry = useIntersectionObserver(rootRef, { root, rootMargin, threshold }, onIntersected);
     // Rendering
     const c = clss(publicClassName, { cssModule });
     const isIntersecting = ioEntry?.isIntersecting ?? false;

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

@@ -1,4 +1,4 @@
-import { type FunctionComponent, type PropsWithChildren, type VideoHTMLAttributes } from 'react';
+import { type FunctionComponent, type PropsWithChildren, type Ref, type VideoHTMLAttributes } from 'react';
 import type { WithClassName } from '../utils/types.js';
 import { type Props as SubsProps } from '../Subtitles/index.js';
 /**
@@ -113,6 +113,7 @@ type TrackData = {
  * Also inherits all standard HTML props for a <video> element.
  */
 export type Props = PropsWithChildren<WithClassName<{
+    rootRef?: Ref<HTMLElement>;
     sources?: string | string[] | SourceData[];
     tracks?: string | string[] | TrackData[];
     subtitles?: SubsProps;

package/components/Video/index.controlled.js

@@ -57,7 +57,7 @@ subtitlesOn = true, mute, muted, volume = 1, playbackRate = 1, currentTimeMs: gi
 // Milliseconds by default, which is what this component has always rendered — a
 // default that changes under a consumer is a change nobody asked for. An article
 // usually wants `'{{mm}}:{{ss}}'` and says so.
-timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onSubtitlesButtonClicked, onTimelineClicked, onIsPlayingChanged, onIsFullscreenChanged, onIsLoudChanged, onIsSubtitlesOnChanged, onIsEndedChanged, onVolumeChanged, onPlaybackRateChanged, onCurrentTimeMsChanged, onFullscreenChange, children, className, ...intrinsicVideoAttributes }) => {
+timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onSubtitlesButtonClicked, onTimelineClicked, onIsPlayingChanged, onIsFullscreenChanged, onIsLoudChanged, onIsSubtitlesOnChanged, onIsEndedChanged, onVolumeChanged, onPlaybackRateChanged, onCurrentTimeMsChanged, onFullscreenChange, children, className, rootRef, ...intrinsicVideoAttributes }) => {
     const videoRef = useRef(null);
     const [totalTime, setTotalTime] = useState(0);
     const totalTimeMs = useMemo(() => secondsToMs(totalTime), [totalTime]);
@@ -318,7 +318,7 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
     useChangeDispatch(isEnded, onIsEndedChanged);
     useChangeDispatch(volume, onVolumeChanged);
     useChangeDispatch(playbackRate, onPlaybackRateChanged);
-    return _jsxs("figure", { className: rootClss, style: rootStyles, ...rootAttributes, children: [_jsxs("video", { ref: videoRef, className: videoClss, ...intrinsicVideoAttributes, autoPlay: isTimeControlled ? false : intrinsicVideoAttributes.autoPlay, onLoadedMetadata: handleMetadataLoadEvent, onTimeUpdate: handleOnTimeUpdateEvent, onEnded: handleEndedEvent, onPlay: handlePlayEvent, onPause: handlePauseEvent, children: [parsedSources.map((source, index) => typeof source === 'string'
+    return _jsxs("figure", { ref: rootRef, className: rootClss, style: rootStyles, ...rootAttributes, children: [_jsxs("video", { ref: videoRef, className: videoClss, ...intrinsicVideoAttributes, autoPlay: isTimeControlled ? false : intrinsicVideoAttributes.autoPlay, onLoadedMetadata: handleMetadataLoadEvent, onTimeUpdate: handleOnTimeUpdateEvent, onEnded: handleEndedEvent, onPlay: handlePlayEvent, onPause: handlePauseEvent, children: [parsedSources.map((source, index) => typeof source === 'string'
                         ? _jsx("source", { src: source }, index)
                         : _jsx("source", { src: source.src, type: source.type }, index)), parsedTracks.map((track, index) => typeof track === 'string'
                         ? _jsx("track", { src: track }, index)

package/components/Video/index.d.ts

@@ -30,7 +30,6 @@ import { type Props as ControlledProps } from './index.controlled.js';
  * stopped video, since a playing element would advance a value it does not own:
  * `autoPlay`, `autoPlayWhenVisible` and the play button have no effect for as
  * long as this prop is provided.
- * @property wrapperClassName - Optional additional class name(s) applied to the root wrapper element.
  * @property defaultSubtitlesOn - Whether the subtitles start shown. `true` by default —
  * an article that supplies cues means them to be read. The reader's button takes it from
  * there, so this is a starting point and not a setting: `default…` and never `initial…`,
@@ -39,7 +38,7 @@ import { type Props as ControlledProps } from './index.controlled.js';
  * @property children - React children rendered inside the `<video>` element itself
  * (e.g. fallback content).
  */
-export type Props = WithViewportObservation<Omit<ControlledProps, 'play' | 'fullscreen' | 'volume' | 'mute' | 'playbackRate' | 'subtitlesOn'>> & {
+export type Props = WithViewportObservation<Omit<ControlledProps, 'play' | 'fullscreen' | 'volume' | 'mute' | 'playbackRate' | 'subtitlesOn' | 'rootRef'>> & {
     defaultSubtitlesOn?: boolean;
     autoPlayWhenVisible?: boolean;
     autoPlayOnceVisible?: boolean;
@@ -49,7 +48,6 @@ export type Props = WithViewportObservation<Omit<ControlledProps, 'play' | 'full
     autoLoudOnceVisible?: boolean;
     autoMuteWhenHidden?: boolean;
     autoMuteOnceHidden?: boolean;
-    wrapperClassName?: string;
 };
 /**
  * Full-featured video player component. Wraps a native `<video>` element with

package/components/Video/index.js

@@ -1,11 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { clss } from '../../agnostic/css/clss/index.js';
-import { IntersectionObserverComponent } from '../IntersectionObserver/index.js';
-import { mergeClassNames } from '../utils/index.js';
-import { videoWrapper as publicClassName } from '../public-classnames.js';
+import { useIntersectionObserver } from '../IntersectionObserver/index.js';
 import { muteAttributeWorkaround, shouldRunAutoBehaviour } from './utils.js';
-import cssModule from './styles.module.css';
 import { ControlledVideo } from './index.controlled.js';
 /**
  * Full-featured video player component. Wraps a native `<video>` element with
@@ -48,7 +44,7 @@ import { ControlledVideo } from './index.controlled.js';
  * The media still won't play, though: autoplay muted, and leave unmuting to the
  * reader.
  */
-export const Video = ({ defaultSubtitlesOn = true, autoPlayWhenVisible, autoPlayOnceVisible, autoPauseWhenHidden, autoPauseOnceHidden, autoMuteWhenHidden, autoMuteOnceHidden, autoLoudWhenVisible, autoLoudOnceVisible, threshold, root, rootMargin, onVisibilityChanged, wrapperClassName, onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onSubtitlesButtonClicked, ...controlledProps }) => {
+export const Video = ({ defaultSubtitlesOn = true, autoPlayWhenVisible, autoPlayOnceVisible, autoPauseWhenHidden, autoPauseOnceHidden, autoMuteWhenHidden, autoMuteOnceHidden, autoLoudWhenVisible, autoLoudOnceVisible, threshold, root, rootMargin, onVisibilityChanged, onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onSubtitlesButtonClicked, ...controlledProps }) => {
     // State & refs
     const [play, setPlay] = useState(false);
     const [volume, setVolume] = useState(1);
@@ -69,6 +65,7 @@ export const Video = ({ defaultSubtitlesOn = true, autoPlayWhenVisible, autoPlay
     // invariant is applied where the state is forwarded rather than guarded at each
     // of those call sites.
     const isTimeControlled = controlledProps.currentTimeMs !== undefined;
+    const rootRef = useRef(null);
     const needsObserve = useMemo(() => onVisibilityChanged !== undefined
         || autoLoudWhenVisible === true
         || autoLoudOnceVisible === true
@@ -201,11 +198,17 @@ export const Video = ({ defaultSubtitlesOn = true, autoPlayWhenVisible, autoPlay
         if (controlledProps.autoPlay === true)
             setPlay(true);
     }, []);
+    // The observer watches the `<figure>` itself. `needsObserve` says whether anything
+    // asked for it — a hook cannot be skipped, so the condition is passed in rather than
+    // wrapped around the call, and no `IntersectionObserver` is created without a reason
+    // to create one.
+    useIntersectionObserver(rootRef, { threshold, root, rootMargin }, onIntersected, needsObserve);
     // Render
-    const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(), wrapperClassName);
-    const videoContent = _jsx(ControlledVideo, { ...controlledProps, play: play && !isTimeControlled, volume: volume, mute: mute, playbackRate: playbackRate, fullscreen: fullscreen, subtitlesOn: subtitlesOn, onPlay: handleOnPlayEvent, onPause: handleOnPauseEvent, onIsPlayingChanged: handleIsPlayingChanged, onVolumeChange: handleOnVolumeChangeEvent, onRateChange: handleOnRateChangeEvent, onLoadedMetadata: handleOnLoadedMetadataEvent, onFullscreenChange: handleFullscreenChange, onPlayButtonClicked: handlePlayButtonClick, onPauseButtonClicked: handlePauseButtonClick, onLoudButtonClicked: handleLoudButtonClick, onMuteButtonClicked: handleMuteButtonClick, onVolumeRangeChanged: handleVolumeRangeChange, onRateRangeChanged: handleRateRangeChange, onFullscreenButtonClicked: handleFullscreenButtonClick, onSubtitlesButtonClicked: handleSubtitlesButtonClick });
-    return _jsx("div", { className: rootClss, children: needsObserve
-            ? _jsx(IntersectionObserverComponent, { threshold: threshold, root: root, rootMargin: rootMargin, onIntersected: onIntersected, children: videoContent })
-            : videoContent });
+    //
+    // **The `<figure>` is the root, and there is nothing above it.** The observer runs on
+    // that element rather than on a box built to hold it: a wrapper would take the outer
+    // position — the one a consumer lays out — and leave `className` naming an inner
+    // element, which is the wrong way round. So no wrapper, and no second class-name prop
+    // to reach past it.
+    return _jsx(ControlledVideo, { ...controlledProps, rootRef: rootRef, play: play && !isTimeControlled, volume: volume, mute: mute, playbackRate: playbackRate, fullscreen: fullscreen, subtitlesOn: subtitlesOn, onPlay: handleOnPlayEvent, onPause: handleOnPauseEvent, onIsPlayingChanged: handleIsPlayingChanged, onVolumeChange: handleOnVolumeChangeEvent, onRateChange: handleOnRateChangeEvent, onLoadedMetadata: handleOnLoadedMetadataEvent, onFullscreenChange: handleFullscreenChange, onPlayButtonClicked: handlePlayButtonClick, onPauseButtonClicked: handlePauseButtonClick, onLoudButtonClicked: handleLoudButtonClick, onMuteButtonClicked: handleMuteButtonClick, onVolumeRangeChanged: handleVolumeRangeChange, onRateRangeChanged: handleRateRangeChange, onFullscreenButtonClicked: handleFullscreenButtonClick, onSubtitlesButtonClicked: handleSubtitlesButtonClick });
 };

package/components/index.d.ts

@@ -3,8 +3,8 @@ 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 eventListener from './EventListener/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
 export * as input from './Input/index.js'

package/components/index.js

@@ -3,8 +3,8 @@ 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 eventListener from './EventListener/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
 export * as input from './Input/index.js'

package/components/public-classnames.d.ts

@@ -24,4 +24,3 @@ export declare const subtitles = "lm-subtitles";
 export declare const textarea = "lm-textarea";
 export declare const uiModule = "lm-ui-module";
 export declare const video = "lm-video";
-export declare const videoWrapper = "lm-video-wrapper";

package/components/public-classnames.js

@@ -24,4 +24,3 @@ export const subtitles = 'lm-subtitles';
 export const textarea = 'lm-textarea';
 export const uiModule = 'lm-ui-module';
 export const video = 'lm-video';
-export const videoWrapper = 'lm-video-wrapper';

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

@@ -2,6 +2,6 @@ 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 stat from './stat/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/@aws-s3/storage/file/index.js

@@ -2,6 +2,6 @@ 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 stat from './stat/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/@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 getMetadata from './get-metadata/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
-export * as move from './move/index.js'
+export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
-export * as revokeSignedUrls from './revoke-signed-urls/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 upload from './upload/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 getMetadata from './get-metadata/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
-export * as move from './move/index.js'
+export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
-export * as revokeSignedUrls from './revoke-signed-urls/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 upload from './upload/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 removeFile from './remove-file/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as removeFile from './remove-file/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 removeFile from './remove-file/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'

package/node/files/index.d.ts

@@ -1,4 +1,4 @@
 export * as getSize from './get-size/index.js'
 export * as isInDirectory from './is-in-directory/index.js'
-export * as subpaths from './subpaths/index.js'
 export * as readWrite from './read-write/index.js'
+export * as subpaths from './subpaths/index.js'

package/node/files/index.js

@@ -1,4 +1,4 @@
 export * as getSize from './get-size/index.js'
 export * as isInDirectory from './is-in-directory/index.js'
-export * as subpaths from './subpaths/index.js'
 export * as readWrite from './read-write/index.js'
+export * as subpaths from './subpaths/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 flatten from './flatten/index.js'
 export * as extract from './extract/index.js'
+export * as flatten from './flatten/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 blur from './blur/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 saturate from './saturate/index.js'
-export * as level from './level/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 flatten from './flatten/index.js'
 export * as extract from './extract/index.js'
+export * as flatten from './flatten/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 blur from './blur/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 saturate from './saturate/index.js'
-export * as level from './level/index.js'

package/node/process/index.d.ts

@@ -1,3 +1,3 @@
 export * as onExit from './on-exit/index.js'
-export * as spawner from './spawner/index.js'
 export * as promptContinue from './prompt-continue/index.js'
+export * as spawner from './spawner/index.js'

package/node/process/index.js

@@ -1,3 +1,3 @@
 export * as onExit from './on-exit/index.js'
-export * as spawner from './spawner/index.js'
 export * as promptContinue from './prompt-continue/index.js'
+export * as spawner from './spawner/index.js'

package/package.json

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