@design-edito/tools 0.5.8 → 0.5.9

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

package/agnostic/colors/index.d.ts

@@ -4,9 +4,9 @@ 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 palette from './palette/index.js'
 export * as lerp from './lerp/index.js'
-export * as tidy from './tidy/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 luminance from './luminance/index.js'

package/agnostic/colors/index.js

@@ -4,9 +4,9 @@ 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 palette from './palette/index.js'
 export * as lerp from './lerp/index.js'
-export * as tidy from './tidy/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 luminance from './luminance/index.js'

package/agnostic/css/index.d.ts

@@ -1,6 +1,6 @@
 export * as bem from './bem/index.js'
+export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
-export * as clss from './clss/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 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 clss from './clss/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,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 at from './at/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 deleteproperties from './deleteproperties/index.js'
+export * as addclass from './addclass/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 deleteproperties from './deleteproperties/index.js'
 export * as getproperties from './getproperties/index.js'
-export * as hjparse from './hjparse/index.js'
 export * as getproperty from './getproperty/index.js'
+export * as equals from './equals/index.js'
 export * as hjstringify from './hjstringify/index.js'
-export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
-export * as length from './length/index.js'
+export * as if from './if/index.js'
+export * as join from './join/index.js'
+export * as hjparse from './hjparse/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 length from './length/index.js'
 export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
-export * as join from './join/index.js'
 export * as print from './print/index.js'
+export * as negate from './negate/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
-export * as push from './push/index.js'
 export * as removeattribute from './removeattribute/index.js'
+export * as notrailing from './notrailing/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 push from './push/index.js'
 export * as select from './select/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 replace from './replace/index.js'
 export * as sorton from './sorton/index.js'
 export * as split from './split/index.js'
+export * as renameproperty from './renameproperty/index.js'
 export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
 export * as toboolean from './toboolean/index.js'
 export * as 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 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 toref from './toref/index.js'
+export * as tonull from './tonull/index.js'
 export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/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 at from './at/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 deleteproperties from './deleteproperties/index.js'
+export * as addclass from './addclass/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 deleteproperties from './deleteproperties/index.js'
 export * as getproperties from './getproperties/index.js'
-export * as hjparse from './hjparse/index.js'
 export * as getproperty from './getproperty/index.js'
+export * as equals from './equals/index.js'
 export * as hjstringify from './hjstringify/index.js'
-export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
-export * as length from './length/index.js'
+export * as if from './if/index.js'
+export * as join from './join/index.js'
+export * as hjparse from './hjparse/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 length from './length/index.js'
 export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
-export * as join from './join/index.js'
 export * as print from './print/index.js'
+export * as negate from './negate/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
-export * as push from './push/index.js'
 export * as removeattribute from './removeattribute/index.js'
+export * as notrailing from './notrailing/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 push from './push/index.js'
 export * as select from './select/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 replace from './replace/index.js'
 export * as sorton from './sorton/index.js'
 export * as split from './split/index.js'
+export * as renameproperty from './renameproperty/index.js'
 export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
 export * as toboolean from './toboolean/index.js'
 export * as 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 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 toref from './toref/index.js'
+export * as tonull from './tonull/index.js'
 export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/index.js'

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

@@ -4,10 +4,10 @@ export * as boolean from './boolean/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 null from './null/index.js'
 export * as nodelist from './nodelist/index.js'
+export * as null from './null/index.js'
 export * as number from './number/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 string from './string/index.js'
+export * as record from './record/index.js'

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

@@ -4,10 +4,10 @@ export * as boolean from './boolean/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 null from './null/index.js'
 export * as nodelist from './nodelist/index.js'
+export * as null from './null/index.js'
 export * as number from './number/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 string from './string/index.js'
+export * as record from './record/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 getNodeAncestors from './get-node-ancestors/index.js'
 export * as placeholders from './placeholders/index.js'
 export * as replaceInElement from './replace-in-element/index.js'
+export * as stringToNodes from './string-to-nodes/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
 export * as watchSelection from './watch-selection/index.js'
-export * as stringToNodes from './string-to-nodes/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 getNodeAncestors from './get-node-ancestors/index.js'
 export * as placeholders from './placeholders/index.js'
 export * as replaceInElement from './replace-in-element/index.js'
+export * as stringToNodes from './string-to-nodes/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
 export * as watchSelection from './watch-selection/index.js'
-export * as stringToNodes from './string-to-nodes/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 errors from './errors/index.js'
 export * as html from './html/index.js'
-export * as numbers from './numbers/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 colors from './colors/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 regexps from './regexps/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 typescript from './typescript/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 colors from './colors/index.js'
 export * as booleans from './booleans/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'
-export * as numbers from './numbers/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 colors from './colors/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 regexps from './regexps/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 typescript from './typescript/index.js'
 export * as time from './time/index.js'
+export * as typescript from './typescript/index.js'

package/agnostic/misc/index.d.ts

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

package/agnostic/misc/index.js

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

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

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

package/agnostic/misc/logs/index.js

@@ -1,3 +1,3 @@
 export * as logger from './logger/index.js'
-export * as makeTextBlock from './make-text-block/index.js'
 export * as styles from './styles/index.js'
+export * as makeTextBlock from './make-text-block/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 recordFormat from './record-format/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 sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'

package/agnostic/objects/index.js

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
+export * as enums from './enums/index.js'
 export * as flattenGetters from './flatten-getters/index.js'
 export * as isObject from './is-object/index.js'
-export * as recordFormat from './record-format/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 sortKeys from './sort-keys/index.js'
 export * as validation from './validation/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 replaceAll from './replace-all/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 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 replaceAll from './replace-all/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 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 timeout from './timeout/index.js'
 export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'
+export * as duration from './duration/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 duration from './duration/index.js'

package/components/Paginator/index.d.ts

@@ -25,7 +25,9 @@ type DirectionState = 'forwards' | 'backwards' | null;
  *
  * @property thresholdOffsetPercent - Optional percentage offset used to compute
  * the {@link IntersectionObserver} root margin. Determines how far into the viewport
- * a page must be before it is considered `'curr'`. Defaults to `0`.
+ * a page must be before it is considered `'curr'`. Defaults to `0`. Clamped to
+ * 0–100, with a `console.warn` naming the value received — outside that range the
+ * root margin is invalid and the observer would throw.
  *
  * @property onDirectionChanged - Called after the scroll direction changed, with
  * the new {@link DirectionState}. Repeated scrolls in the same direction do not
@@ -64,7 +66,10 @@ export type Props = PropsWithChildren<WithClassName<{
  *   when the direction actually changes, using an internal ref to avoid stale
  *   closure comparisons.
  * - Page visibility is tracked via a single {@link IntersectionObserver} instance
- *   that is recreated when `thresholdOffsetPercent` or `children` change.
+ *   that is recreated when `thresholdOffsetPercent` or the **number** of children
+ *   changes. Not on `children` itself: a parent building its child list inline hands
+ *   over a new array on every render, which would tear down and rebuild one observer
+ *   per page each time, for nothing.
  * - `currCount` on each {@link PageState} increments each time a page transitions
  *   into the `'curr'` position, making it useful as a re-entry counter.
  */

package/components/Paginator/index.js

@@ -4,6 +4,18 @@ import { clss } from '../../agnostic/css/clss/index.js';
 import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
 import { paginator as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
+/**
+ * Brings `thresholdOffsetPercent` back into the 0–100 range `rootMargin` accepts.
+ *
+ * Outside it the margin comes out as `--20%`, which the `IntersectionObserver`
+ * constructor rejects by throwing — taking the whole component down with it over a
+ * single setting. A non-finite value falls back to `0` for the same reason.
+ */
+function toThresholdPercent(percent) {
+    if (percent === undefined || !Number.isFinite(percent))
+        return 0;
+    return Math.min(100, Math.max(0, percent));
+}
 /**
  * A scroll-driven pagination component that tracks which child page is currently
  * visible in the viewport and the direction of scroll.
@@ -23,7 +35,10 @@ import cssModule from './styles.module.css';
  *   when the direction actually changes, using an internal ref to avoid stale
  *   closure comparisons.
  * - Page visibility is tracked via a single {@link IntersectionObserver} instance
- *   that is recreated when `thresholdOffsetPercent` or `children` change.
+ *   that is recreated when `thresholdOffsetPercent` or the **number** of children
+ *   changes. Not on `children` itself: a parent building its child list inline hands
+ *   over a new array on every render, which would tear down and rebuild one observer
+ *   per page each time, for nothing.
  * - `currCount` on each {@link PageState} increments each time a page transitions
  *   into the `'curr'` position, making it useful as a re-entry counter.
  */
@@ -33,6 +48,20 @@ export const Paginator = ({ thresholdOffsetPercent, onDirectionChanged, onPagesC
     const [directionState, setDirectionState] = useState(null);
     const pagesRef = useRef(null);
     const directionRef = useRef(null);
+    const childrenArr = Children.toArray(children);
+    const pagesCount = childrenArr.length;
+    const thresholdPercent = toThresholdPercent(thresholdOffsetPercent);
+    // Fx. dep. thresholdOffsetPercent, thresholdPercent - Says it once per offending
+    // value rather than on every render. Clamping without a word would turn a caller's
+    // bug into a scrolling glitch, hunted for somewhere else entirely.
+    useEffect(() => {
+        if (thresholdOffsetPercent === undefined)
+            return;
+        if (thresholdPercent === thresholdOffsetPercent)
+            return;
+        // eslint-disable-next-line no-console
+        console.warn('Paginator: thresholdOffsetPercent must be a number between 0 and 100, received', thresholdOffsetPercent, `— clamped to ${thresholdPercent}.`);
+    }, [thresholdOffsetPercent, thresholdPercent]);
     // State dispatch
     useChangeDispatch(pagesState, pages => onPagesChanged?.(Array
         .from(pages)
@@ -62,15 +91,24 @@ export const Paginator = ({ thresholdOffsetPercent, onDirectionChanged, onPagesC
             window.removeEventListener('resize', handleScroll);
         };
     }, []);
-    // Detect active pages with Intersection Observer
+    // Fx. dep. pagesCount - The page slots are this component's own divs, reused as
+    // long as their number holds, so the set only changes when the count does.
     useEffect(() => {
         if (pagesRef.current === null)
             return;
         const pages = Array.from(pagesRef.current.children);
         onPageElementsChanged?.(pages.filter(page => page instanceof HTMLElement));
-        const observerRootMargin = `-${thresholdOffsetPercent ?? 0}%`
+    }, [pagesCount]);
+    // Detect active pages with Intersection Observer
+    // Fx. dep. thresholdPercent, pagesCount - Same reasoning: rebuilding one observer
+    // per page on every render would cost a full measurement pass for an unchanged set.
+    useEffect(() => {
+        if (pagesRef.current === null)
+            return;
+        const pages = Array.from(pagesRef.current.children);
+        const observerRootMargin = `-${thresholdPercent}%`
             + ' 0px'
-            + ` -${100 - (thresholdOffsetPercent ?? 0)}%`
+            + ` -${100 - thresholdPercent}%`
             + ' 0px';
         const observer = new IntersectionObserver(entries => {
             setPagesState(prevState => {
@@ -100,7 +138,7 @@ export const Paginator = ({ thresholdOffsetPercent, onDirectionChanged, onPagesC
             observer.observe(page);
         });
         return () => observer.disconnect();
-    }, [thresholdOffsetPercent, children]);
+    }, [thresholdPercent, pagesCount]);
     // Rendering
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(null, {
@@ -108,7 +146,6 @@ export const Paginator = ({ thresholdOffsetPercent, onDirectionChanged, onPagesC
         backwards: directionState === 'backwards'
     }), className);
     const pagesClss = c('pages');
-    const childrenArr = Children.toArray(children);
     return _jsx("div", { className: rootClss, children: _jsx("div", { className: pagesClss, ref: pagesRef, children: childrenArr.map((child, pos) => {
                 const state = pagesState.get(pos);
                 const pageClss = c('page', {

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

@@ -38,7 +38,9 @@ type TrackData = {
  * @property loudBtnContent - React content for the "loud" (unmute) button.
  * @property muteBtnContent - React content for the mute button.
  * @property fullscreenBtnContent - React content for the fullscreen button.
- * @property play - External control of play state (true = play, false = pause).
+ * @property play - Whether the media should be playing. A **request**, not a
+ * setting: a browser holds a veto over playback — an unmuted media outside a user
+ * gesture is refused — so this prop asks, and `onIsPlayingChanged` answers.
  * @property fullscreen - External control of fullscreen mode.
  * @property volume - External control of volume (0 to 1).
  * @property mute - External control of mute (true = muted).
@@ -67,7 +69,10 @@ type TrackData = {
  * @property onTimelineClicked - Called when the timeline is clicked, before the
  * component reacts, with the target and current times (in seconds). The component
  * seeks to the target right after, unless the time is controlled.
- * @property onIsPlayingChanged - Called once the playback state has changed.
+ * @property onIsPlayingChanged - Called with what the **element** is doing, not
+ * with what `play` asked for. It is how a refused play surfaces, that being the one
+ * case where nothing else does: the promise rejects, no event fires, and without
+ * this a parent would go on believing a media that never started. Never on mount.
  * @property onIsFullscreenChanged - Called once the fullscreen state has changed.
  * @property onIsEndedChanged - Called after playback reached the end, and again
  * once it left it — a seek back or a new play. Never on mount.

package/components/Video/index.controlled.js

@@ -59,6 +59,10 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
     // element, and the two events that turn it on and off are joined by a sync on
     // every time update, which covers a seek away from the end.
     const [isEnded, setIsEnded] = useState(false);
+    // What the element is actually doing, as opposed to what `play` asked for. The
+    // two part ways whenever a browser refuses a play, which it does without firing
+    // anything — see `forcePlay`.
+    const [isElementPlaying, setIsElementPlaying] = useState(false);
     const isTimeControlled = givenCurrentTimeMs !== undefined;
     // The parent owns the time as soon as it provides one, so that is what gets
     // displayed — not what the element reported one render later.
@@ -92,12 +96,18 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
     }, [intrinsicVideoAttributes.onTimeUpdate]);
     const handleEndedEvent = useCallback((e) => {
         setIsEnded(true);
+        setIsElementPlaying(false);
         intrinsicVideoAttributes.onEnded?.(e);
     }, [intrinsicVideoAttributes.onEnded]);
     const handlePlayEvent = useCallback((e) => {
         setIsEnded(false);
+        setIsElementPlaying(true);
         intrinsicVideoAttributes.onPlay?.(e);
     }, [intrinsicVideoAttributes.onPlay]);
+    const handlePauseEvent = useCallback((e) => {
+        setIsElementPlaying(false);
+        intrinsicVideoAttributes.onPause?.(e);
+    }, [intrinsicVideoAttributes.onPause]);
     // Custom action handlers
     const handlePlayButtonClick = useCallback((e) => {
         const wasPlaying = videoRef.current?.paused === false;
@@ -239,12 +249,18 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
             void forcePause(videoRef.current);
             return;
         }
-        if (play === true) {
-            void forcePlay(videoRef.current);
-        }
-        else {
+        if (play !== true) {
             void forcePause(videoRef.current);
+            return;
         }
+        let isCurrent = true;
+        void forcePlay(videoRef.current).then(isNowPlaying => {
+            // A refused play fires nothing, so without this the component would go on
+            // believing a media that never started.
+            if (isCurrent && !isNowPlaying)
+                setIsElementPlaying(false);
+        });
+        return () => { isCurrent = false; };
     }, [play, isTimeControlled]);
     useEffect(() => {
         forceVolume(videoRef.current, volume);
@@ -276,13 +292,13 @@ export const ControlledVideo = ({ sources, tracks, subtitles, playBtnContent, pa
     }, [onFullscreenChange]);
     // State handlers
     useChangeDispatch(currentTimeMs, onCurrentTimeMsChanged);
-    useChangeDispatch(isPlaying, onIsPlayingChanged);
+    useChangeDispatch(isElementPlaying, onIsPlayingChanged);
     useChangeDispatch(isFullscreen, onIsFullscreenChanged);
     useChangeDispatch(isLoud, onIsLoudChanged);
     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, children: [parsedSources.map((source, index) => typeof source === 'string'
+    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'
                         ? _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

@@ -74,8 +74,10 @@ export type Props = WithViewportObservation<Omit<ControlledProps, 'play' | 'full
  * behaviour is the same as setting the `…When…` one alone.
  *
  * Browsers refuse an unmuted `play()` outside a user gesture, so pairing an
- * `autoLoud…` with an `autoPlay…` will usually have the playback rejected: the
- * element stays paused while the controls believe otherwise. Autoplay muted, and
- * leave unmuting to the reader.
+ * `autoLoud…` with an `autoPlay…` will usually have the playback rejected. The
+ * refusal is caught rather than ignored — the element is read back once the attempt
+ * settles, and the play state follows what it says — so the controls stay truthful.
+ * The media still won't play, though: autoplay muted, and leave unmuting to the
+ * reader.
  */
 export declare const Video: FunctionComponent<Props>;

package/components/Video/index.js

@@ -35,9 +35,11 @@ import { ControlledVideo } from './index.controlled.js';
  * behaviour is the same as setting the `…When…` one alone.
  *
  * Browsers refuse an unmuted `play()` outside a user gesture, so pairing an
- * `autoLoud…` with an `autoPlay…` will usually have the playback rejected: the
- * element stays paused while the controls believe otherwise. Autoplay muted, and
- * leave unmuting to the reader.
+ * `autoLoud…` with an `autoPlay…` will usually have the playback rejected. The
+ * refusal is caught rather than ignored — the element is read back once the attempt
+ * settles, and the play state follows what it says — so the controls stay truthful.
+ * The media still won't play, though: autoplay muted, and leave unmuting to the
+ * reader.
  */
 export const Video = ({ loop, autoPlayWhenVisible, autoPlayOnceVisible, autoPauseWhenHidden, autoPauseOnceHidden, autoMuteWhenHidden, autoMuteOnceHidden, autoLoudWhenVisible, autoLoudOnceVisible, threshold, root, rootMargin, onVisibilityChanged, wrapperClassName, onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, ...controlledProps }) => {
     // State & refs
@@ -87,6 +89,14 @@ export const Video = ({ loop, autoPlayWhenVisible, autoPlayOnceVisible, autoPaus
         setPlay(false);
         controlledProps.onPause?.(e);
     }, [controlledProps.onPause]);
+    // The element's own account of whether it is playing. It covers what the `play`
+    // and `pause` events do, plus the one case they can't: a play the browser refused,
+    // which fires nothing at all. Without it the controls would stay on `--play-on`
+    // over a media that never started.
+    const handleIsPlayingChanged = useCallback((isPlaying) => {
+        setPlay(isPlaying);
+        controlledProps.onIsPlayingChanged?.(isPlaying);
+    }, [controlledProps.onIsPlayingChanged]);
     const handleOnVolumeChangeEvent = useCallback((e) => {
         setMute(e.currentTarget.muted);
         setVolume(e.currentTarget.volume);
@@ -178,7 +188,7 @@ export const Video = ({ loop, autoPlayWhenVisible, autoPlayOnceVisible, autoPaus
     // 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, onPlay: handleOnPlayEvent, onPause: handleOnPauseEvent, onVolumeChange: handleOnVolumeChangeEvent, onRateChange: handleOnRateChangeEvent, onLoadedMetadata: handleOnLoadedMetadataEvent, onFullscreenChange: handleFullscreenChange, onPlayButtonClicked: handlePlayButtonClick, onPauseButtonClicked: handlePauseButtonClick, onLoudButtonClicked: handleLoudButtonClick, onMuteButtonClicked: handleMuteButtonClick, onVolumeRangeChanged: handleVolumeRangeChange, onRateRangeChanged: handleRateRangeChange, onFullscreenButtonClicked: handleFullscreenButtonClick });
+    const videoContent = _jsx(ControlledVideo, { ...controlledProps, play: play && !isTimeControlled, volume: volume, mute: mute, playbackRate: playbackRate, fullscreen: fullscreen, 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 });
     return _jsx("div", { className: rootClss, children: needsObserve
             ? _jsx(IntersectionObserverComponent, { threshold: threshold, root: root, rootMargin: rootMargin, onIntersected: onIntersected, children: videoContent })
             : videoContent });

package/components/Video/utils.d.ts

@@ -2,6 +2,17 @@ export declare const muteAttributeWorkaround: (video: HTMLVideoElement | null, s
 export declare const forceMute: (video: HTMLVideoElement | null) => void;
 export declare const forceLoud: (video: HTMLVideoElement | null) => void;
 export declare const forceVolume: (video: HTMLVideoElement | null, volume: number) => void;
+/**
+ * Asks the element to play, and reports what came of it.
+ *
+ * A browser may refuse — an unmuted media outside a user gesture, typically — and
+ * it refuses **silently**: the promise rejects and no event fires, so this is the
+ * only moment the outcome can be known. Hence the return value, and hence no
+ * logging: a refusal is not an anomaly to print, it is an answer to hand back.
+ *
+ * @param video - The element, or `null` before it mounts.
+ * @returns Whether it is playing now.
+ */
 export declare const forcePlay: (video: HTMLVideoElement | null) => Promise<boolean>;
 export declare const forcePause: (video: HTMLVideoElement | null) => boolean;
 export declare const forcePlaybackRate: (video: HTMLVideoElement | null, rate: number) => void;

package/components/Video/utils.js

@@ -28,6 +28,17 @@ export const forceVolume = (video, volume) => {
     // eslint-disable-next-line no-param-reassign
     video.volume = volume;
 };
+/**
+ * Asks the element to play, and reports what came of it.
+ *
+ * A browser may refuse — an unmuted media outside a user gesture, typically — and
+ * it refuses **silently**: the promise rejects and no event fires, so this is the
+ * only moment the outcome can be known. Hence the return value, and hence no
+ * logging: a refusal is not an anomaly to print, it is an answer to hand back.
+ *
+ * @param video - The element, or `null` before it mounts.
+ * @returns Whether it is playing now.
+ */
 export const forcePlay = async (video) => {
     if (video === null)
         return false;
@@ -35,13 +46,11 @@ export const forcePlay = async (video) => {
         return true;
     try {
         await video.play();
-        return video.paused;
     }
-    catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(e);
+    catch (err) {
+        // The refusal itself is the information, and it is in `video.paused` below.
     }
-    return false;
+    return !video.paused;
 };
 export const forcePause = (video) => {
     if (video === null)

package/components/index.d.ts

@@ -10,16 +10,16 @@ export * as image from './Image/index.js'
 export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
-export * as overlayer from './Overlayer/index.js'
 export * as listLoader from './ListLoader/index.js'
-export * as scrollListener from './ScrollListener/index.js'
+export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
-export * as sequencer from './Sequencer/index.js'
-export * as select from './Select/index.js'
+export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
+export * as scrollListener from './ScrollListener/index.js'
+export * as select from './Select/index.js'
+export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
 export * as subtitles from './Subtitles/index.js'
-export * as resizeObserver from './ResizeObserver/index.js'
 export * as textarea from './Textarea/index.js'
 export * as theatre from './Theatre/index.js'
 export * as uiModule from './UIModule/index.js'

package/components/index.js

@@ -10,16 +10,16 @@ export * as image from './Image/index.js'
 export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
-export * as overlayer from './Overlayer/index.js'
 export * as listLoader from './ListLoader/index.js'
-export * as scrollListener from './ScrollListener/index.js'
+export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
-export * as sequencer from './Sequencer/index.js'
-export * as select from './Select/index.js'
+export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
+export * as scrollListener from './ScrollListener/index.js'
+export * as select from './Select/index.js'
+export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
 export * as subtitles from './Subtitles/index.js'
-export * as resizeObserver from './ResizeObserver/index.js'
 export * as textarea from './Textarea/index.js'
 export * as theatre from './Theatre/index.js'
 export * as uiModule from './UIModule/index.js'

package/index.d.ts

@@ -1,3 +1,3 @@
 export * as agnostic from './agnostic/index.js'
-export * as node from './node/index.js'
 export * as components from './components/index.js'
+export * as node from './node/index.js'

package/index.js

@@ -1,3 +1,3 @@
 export * as agnostic from './agnostic/index.js'
-export * as node from './node/index.js'
 export * as components from './components/index.js'
+export * as node from './node/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'

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'

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

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

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

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

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

@@ -1,12 +1,12 @@
 export * as copy from './copy/index.js'
+export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
 export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
-export * as download from './download/index.js'
 export * as remove from './remove/index.js'
-export * as stat from './stat/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 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 download from './download/index.js'
 export * as remove from './remove/index.js'
-export * as stat from './stat/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

@@ -1,11 +1,11 @@
 export * as copyDir from './copy-dir/index.js'
-export * as copyFile from './copy-file/index.js'
 export * as downloadFile from './download-file/index.js'
+export * as copyFile from './copy-file/index.js'
 export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
-export * as moveFile from './move-file/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as moveFile from './move-file/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

@@ -1,11 +1,11 @@
 export * as copyDir from './copy-dir/index.js'
-export * as copyFile from './copy-file/index.js'
 export * as downloadFile from './download-file/index.js'
+export * as copyFile from './copy-file/index.js'
 export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
-export * as moveFile from './move-file/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as moveFile from './move-file/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/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 brighten from './brighten/index.js'
 export * as blur from './blur/index.js'
 export * as extend from './extend/index.js'
-export * as flatten from './flatten/index.js'
+export * as brighten from './brighten/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 level from './level/index.js'
 export * as hue from './hue/index.js'
-export * as normalize from './normalize/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 saturate from './saturate/index.js'
 export * as rotate from './rotate/index.js'
+export * as saturate from './saturate/index.js'

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

@@ -1,15 +1,15 @@
-export * as brighten from './brighten/index.js'
 export * as blur from './blur/index.js'
 export * as extend from './extend/index.js'
-export * as flatten from './flatten/index.js'
+export * as brighten from './brighten/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 level from './level/index.js'
 export * as hue from './hue/index.js'
-export * as normalize from './normalize/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 saturate from './saturate/index.js'
 export * as rotate from './rotate/index.js'
+export * as saturate from './saturate/index.js'

package/node/index.d.ts

@@ -1,11 +1,11 @@
 export * as awsS3 from './@aws-s3/index.js'
-export * as designEdito from './@design-edito/index.js'
 export * as express from './@express/index.js'
+export * as designEdito from './@design-edito/index.js'
 export * as googleCloud from './@google-cloud/index.js'
 export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'
-export * as images from './images/index.js'
 export * as process from './process/index.js'
+export * as images from './images/index.js'
 export * as sftp from './sftp/index.js'

package/node/index.js

@@ -1,11 +1,11 @@
 export * as awsS3 from './@aws-s3/index.js'
-export * as designEdito from './@design-edito/index.js'
 export * as express from './@express/index.js'
+export * as designEdito from './@design-edito/index.js'
 export * as googleCloud from './@google-cloud/index.js'
 export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'
-export * as images from './images/index.js'
 export * as process from './process/index.js'
+export * as images from './images/index.js'
 export * as sftp from './sftp/index.js'

package/package.json

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