@design-edito/tools 0.5.34 → 0.5.36

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 lerp from './lerp/index.js'
 export * as luminance from './luminance/index.js'
 export * as palette from './palette/index.js'
 export * as rotate from './rotate/index.js'
 export * as tidy from './tidy/index.js'
 export * as typechecks from './typechecks/index.js'
-export * as lerp from './lerp/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 lerp from './lerp/index.js'
 export * as luminance from './luminance/index.js'
 export * as palette from './palette/index.js'
 export * as rotate from './rotate/index.js'
 export * as tidy from './tidy/index.js'
 export * as typechecks from './typechecks/index.js'
-export * as lerp from './lerp/index.js'

package/agnostic/css/index.d.ts

@@ -1,6 +1,6 @@
-export * as bem from './bem/index.js'
+export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'
-export * as clss from './clss/index.js'
+export * as bem from './bem/index.js'

package/agnostic/css/index.js

@@ -1,6 +1,6 @@
-export * as bem from './bem/index.js'
+export * as clss from './clss/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'
-export * as clss from './clss/index.js'
+export * as bem from './bem/index.js'

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

@@ -1,52 +1,52 @@
-export * as addclass from './addclass/index.js'
-export * as and from './and/index.js'
 export * as add from './add/index.js'
+export * as addclass from './addclass/index.js'
 export * as append from './append/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
+export * as and from './and/index.js'
 export * as clone from './clone/index.js'
-export * as deleteproperties from './deleteproperties/index.js'
-export * as getattribute from './getattribute/index.js'
 export * as equals from './equals/index.js'
+export * as deleteproperties from './deleteproperties/index.js'
 export * as getproperties from './getproperties/index.js'
+export * as getattribute from './getattribute/index.js'
 export * as getproperty from './getproperty/index.js'
+export * as if from './if/index.js'
 export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
-export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
+export * as join from './join/index.js'
 export * as length from './length/index.js'
 export * as map from './map/index.js'
-export * as join from './join/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
-export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
 export * as 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 pusheach from './pusheach/index.js'
+export * as or from './or/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 select from './select/index.js'
+export * as removeclass from './removeclass/index.js'
 export * as replace from './replace/index.js'
+export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
 export * as sorton from './sorton/index.js'
-export * as split from './split/index.js'
 export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as toboolean from './toboolean/index.js'
+export * as split from './split/index.js'
 export * as toelement from './toelement/index.js'
+export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
 export * as tonull from './tonull/index.js'
-export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
+export * as toref from './toref/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,52 +1,52 @@
-export * as addclass from './addclass/index.js'
-export * as and from './and/index.js'
 export * as add from './add/index.js'
+export * as addclass from './addclass/index.js'
 export * as append from './append/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
+export * as and from './and/index.js'
 export * as clone from './clone/index.js'
-export * as deleteproperties from './deleteproperties/index.js'
-export * as getattribute from './getattribute/index.js'
 export * as equals from './equals/index.js'
+export * as deleteproperties from './deleteproperties/index.js'
 export * as getproperties from './getproperties/index.js'
+export * as getattribute from './getattribute/index.js'
 export * as getproperty from './getproperty/index.js'
+export * as if from './if/index.js'
 export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
-export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
+export * as join from './join/index.js'
 export * as length from './length/index.js'
 export * as map from './map/index.js'
-export * as join from './join/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
-export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
 export * as 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 pusheach from './pusheach/index.js'
+export * as or from './or/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 select from './select/index.js'
+export * as removeclass from './removeclass/index.js'
 export * as replace from './replace/index.js'
+export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
 export * as sorton from './sorton/index.js'
-export * as split from './split/index.js'
 export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as toboolean from './toboolean/index.js'
+export * as split from './split/index.js'
 export * as toelement from './toelement/index.js'
+export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
 export * as tonull from './tonull/index.js'
-export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
+export * as toref from './toref/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

@@ -7,7 +7,7 @@ export * as guess from './guess/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 record from './record/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'

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

@@ -7,7 +7,7 @@ export * as guess from './guess/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 record from './record/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'

package/agnostic/html/index.d.ts

@@ -3,8 +3,8 @@ 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 placeholders from './placeholders/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
+export * as placeholders from './placeholders/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
+export * as replaceInElement from './replace-in-element/index.js'
 export * as watchSelection from './watch-selection/index.js'

package/agnostic/html/index.js

@@ -3,8 +3,8 @@ 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 placeholders from './placeholders/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
+export * as placeholders from './placeholders/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
+export * as replaceInElement from './replace-in-element/index.js'
 export * as watchSelection from './watch-selection/index.js'

package/agnostic/index.d.ts

@@ -2,8 +2,8 @@ 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 html from './html/index.js'
 export * as errors from './errors/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'

package/agnostic/index.js

@@ -2,8 +2,8 @@ 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 html from './html/index.js'
 export * as errors from './errors/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'

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 crossenv from './crossenv/index.js'
 export * as crawler from './crawler/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 crossenv from './crossenv/index.js'
+export * as isNullish from './is-nullish/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/misc/index.js

@@ -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 crossenv from './crossenv/index.js'
 export * as crawler from './crawler/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 crossenv from './crossenv/index.js'
+export * as isNullish from './is-nullish/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/numbers/index.d.ts

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

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 geometricProgressions from './geometric-progressions/index.js'
 export * as clamp from './clamp/index.js'
+export * as geometricProgressions from './geometric-progressions/index.js'
 export * as interpolate from './interpolate/index.js'
 export * as round from './round/index.js'

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 charCodes from './char-codes/index.js'
+export * as normalizeIndent from './normalize-indent/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 splitTrim from './split-trim/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 charCodes from './char-codes/index.js'
+export * as normalizeIndent from './normalize-indent/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 splitTrim from './split-trim/index.js'
 export * as trim from './trim/index.js'

package/agnostic/subtitles/index.d.ts

@@ -1,2 +1,2 @@
-export * as srtTimecodeToMs from './srt-timecode-to-ms/index.js'
 export * as parseSrt from './parse-srt/index.js'
+export * as srtTimecodeToMs from './srt-timecode-to-ms/index.js'

package/agnostic/subtitles/index.js

@@ -1,2 +1,2 @@
-export * as srtTimecodeToMs from './srt-timecode-to-ms/index.js'
 export * as parseSrt from './parse-srt/index.js'
+export * as srtTimecodeToMs from './srt-timecode-to-ms/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 transitions from './transitions/index.js'
-export * as wait from './wait/index.js'
 export * as timeout from './timeout/index.js'
+export * as wait from './wait/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 transitions from './transitions/index.js'
-export * as wait from './wait/index.js'
 export * as timeout from './timeout/index.js'
+export * as wait from './wait/index.js'

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

@@ -9,9 +9,9 @@ import type { WithClassName } from '../utils/types.js';
  * @property before - Content rendered in the first (before) panel.
  * @property after - Content rendered in the second (after) panel.
  * @property onDragged - Called on each pointer move while dragging, with the
- * pointer's x and y ratios relative to the component's bounds.
+ * pointer's `xRatio` and `yRatio` relative to the component's bounds.
  * @property onClicked - Called on pointer release when no drag occurred, with
- * the release position's x and y ratios.
+ * the release position's `xRatio` and `yRatio`.
  * @property className - Additional class name(s) applied to the root element.
  * @property children - Arbitrary content to inject inside the component.
  */
@@ -20,8 +20,14 @@ export type Props = PropsWithChildren<WithClassName<{
     ratio?: number;
     before?: ReactNode;
     after?: ReactNode;
-    onDragged?: (xRatio: number, yRatio: number) => void;
-    onClicked?: (xRatio: number, yRatio: number) => void;
+    onDragged?: (payload: {
+        xRatio: number;
+        yRatio: number;
+    }) => void;
+    onClicked?: (payload: {
+        xRatio: number;
+        yRatio: number;
+    }) => void;
 }>>;
 /**
  * Controlled before/after comparison component.

package/components/BeforeAfter/index.controlled.js

@@ -55,12 +55,12 @@ export const ControlledBeforeAfter = ({ mode = 'horizontal', ratio = 0, before,
     const reportDrag = (clientX, clientY) => {
         const ratios = getRatios(clientX, clientY);
         if (ratios !== null)
-            onDragged?.(ratios.xRatio, ratios.yRatio);
+            onDragged?.(ratios);
     };
     const reportClick = (clientX, clientY) => {
         const ratios = getRatios(clientX, clientY);
         if (ratios !== null)
-            onClicked?.(ratios.xRatio, ratios.yRatio);
+            onClicked?.(ratios);
     };
     // User action handlers
     const handlePointerDown = () => {

package/components/BeforeAfter/index.js

@@ -45,16 +45,16 @@ export const BeforeAfter = ({ mode = 'horizontal', ratio, defaultRatio = 0.5, on
             return;
         setInternalRatio(mode === 'horizontal' ? xRatio : yRatio);
     };
-    const handleDrag = (xRatio, yRatio) => {
+    const handleDrag = ({ xRatio, yRatio }) => {
         const x = toDividerRatio(xRatio);
         const y = toDividerRatio(yRatio);
-        onDragged?.(x, y);
+        onDragged?.({ xRatio: x, yRatio: y });
         moveDividerTo(x, y);
     };
-    const handleClick = (xRatio, yRatio) => {
+    const handleClick = ({ xRatio, yRatio }) => {
         const x = toDividerRatio(xRatio);
         const y = toDividerRatio(yRatio);
-        onClicked?.(x, y);
+        onClicked?.({ xRatio: x, yRatio: y });
         moveDividerTo(x, y);
     };
     // Rendering

package/components/Clippable/index.d.ts

@@ -16,7 +16,7 @@ import type { WithClassName } from '../utils/types.js';
  * say different things, and an article that names one without the other means the other
  * to come from the stylesheet.
  * @property onCopyClicked - Called when the copy button is clicked, before the
- * clipboard content is resolved, with the container's raw HTML.
+ * clipboard content is resolved, with `event` and the container's `rawHtml`.
  * @property onClipped - Called once content has been written to the clipboard.
  * Not called when the write fails.
  * @property onCopyFailed - Called when the clipboard write throws, with the
@@ -28,7 +28,10 @@ export type Props = PropsWithChildren<WithClassName<{
     toClip?: string | ((curr: string | undefined) => string | undefined);
     copyBtnContent?: ReactNode;
     clippedBtnContent?: ReactNode;
-    onCopyClicked?: (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, rawContent: string | undefined) => void;
+    onCopyClicked?: (payload: {
+        event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>;
+        rawHtml: string | undefined;
+    }) => void;
     onClipped?: (content: string) => void;
     onCopyFailed?: (error: unknown) => void;
 }>>;

package/components/Clippable/index.js

@@ -34,7 +34,7 @@ export const Clippable = ({ className, children, toClip, copyBtnContent, clipped
     // User action handlers
     const handleCopyClick = async (e) => {
         const rawHtml = contentRef.current?.innerHTML;
-        onCopyClicked?.(e, rawHtml);
+        onCopyClicked?.({ event: e, rawHtml });
         const html = typeof toClip === 'string'
             ? toClip
             : typeof toClip === 'function'

package/components/Gallery/index.d.ts

@@ -17,8 +17,8 @@ import type { WithClassName } from '../utils/types.js';
  * @property noSnap - Frees the scroll from snapping to a slot.
  * @property onPrevClicked - Fires before the gallery reacts, with the index as it was.
  * @property onNextClicked - Fires before the gallery reacts, with the index as it was.
- * @property onPaginationClicked - Fires before the gallery reacts, with the index as it
- * was and the one aimed at.
+ * @property onPaginationClicked - Fires before the gallery reacts, with `activePos`
+ * as it was and `targetPos`, the one aimed at.
  * @property onActiveSlotChanged - Fires after the active slot changed, with the new index.
  * @property onCanGoLeftChanged - Fires after the ability to scroll further left changed.
  * Never on mount.
@@ -38,7 +38,10 @@ export type Props = PropsWithChildren<WithClassName<{
     noSnap?: boolean;
     onPrevClicked?: (activePos: number) => void;
     onNextClicked?: (activePos: number) => void;
-    onPaginationClicked?: (activePos: number, targetPos: number) => void;
+    onPaginationClicked?: (payload: {
+        activePos: number;
+        targetPos: number;
+    }) => void;
     onActiveSlotChanged?: (activePos: number) => void;
     onCanGoLeftChanged?: (canGoLeft: boolean) => void;
     onCanGoRightChanged?: (canGoRight: boolean) => void;

package/components/Gallery/index.js

@@ -96,7 +96,7 @@ export const Gallery = ({ offsetLeft, offsetRight, offset, prevButtonContent, ne
         scrollToSlot(activeIndex + 1);
     };
     const handlePaginationClick = (pos) => {
-        onPaginationClicked?.(activeIndex, pos);
+        onPaginationClicked?.({ activePos: activeIndex, targetPos: pos });
         if (isControlled)
             return;
         scrollToSlot(pos);

package/components/ListLoader/index.d.ts

@@ -25,10 +25,11 @@ import { type Props as ControlledProps } from './index.controlled.js';
  * `onPageFetchFailed` and retried according to `fetchRetriesNb`.
  * @property staleAfterMs - Delay after which a loaded page is refetched, counted
  * from its own last successful load. When omitted, pages are never refreshed.
- * @property onPageFetched - Called after a page's items have been stored. Not
- * called for a page dropped while its request was in flight.
- * @property onPageFetchFailed - Called on every failed attempt, not only once retries
- * are exhausted. When omitted, failures are logged with `console.warn`.
+ * @property onPageFetched - Called with `pagePos` and `items` after a page's items
+ * have been stored. Not called for a page dropped while its request was in flight.
+ * @property onPageFetchFailed - Called with `pagePos` and `error` on every failed
+ * attempt, not only once retries are exhausted. When omitted, failures are logged
+ * with `console.warn`.
  * @property fetchRetriesNb - Number of retries after a failed fetch. Defaults to
  * `Infinity`, so a page keeps retrying until it succeeds.
  * @property fetchRetriesDelayMs - Delay between two attempts. Defaults to `1000`.
@@ -40,8 +41,14 @@ export type Props<T> = Omit<ControlledProps<T>, 'itemsPages' | 'loadingPages' |
     dropPagesFurtherThan?: number;
     fetch: (page: number) => Promise<T[]>;
     staleAfterMs?: number;
-    onPageFetched?: (pagePos: number, items: T[]) => void;
-    onPageFetchFailed?: (pagePos: number, error: Error) => void;
+    onPageFetched?: (payload: {
+        pagePos: number;
+        items: T[];
+    }) => void;
+    onPageFetchFailed?: (payload: {
+        pagePos: number;
+        error: Error;
+    }) => void;
     fetchRetriesNb?: number;
     fetchRetriesDelayMs?: number;
 };

package/components/ListLoader/index.js

@@ -63,7 +63,7 @@ export const ListLoader = ({ className, pages, defaultPage, fillGaps = true, dro
     const reportFetchError = (page, err) => {
         const error = toError(err);
         if (onPageFetchFailed !== undefined)
-            return onPageFetchFailed(page, error);
+            return onPageFetchFailed({ pagePos: page, error });
         // eslint-disable-next-line no-console
         console.warn(`ListLoader failed to fetch page ${page}`, error);
     };
@@ -78,7 +78,7 @@ export const ListLoader = ({ className, pages, defaultPage, fillGaps = true, dro
             if (!requestedPages.current.has(page))
                 return;
             storePage(page, items);
-            onPageFetched?.(page, items);
+            onPageFetched?.({ pagePos: page, items });
             setPageLoading(page, false);
         })
             .catch((err) => {

package/components/Scrllgngn/index.d.ts

@@ -83,8 +83,8 @@ export type PropsPage = {
  * - `'both'`   — forces blocks on both sides.
  * - `'none'`   — no forcing (default behaviour).
  * @property onPageChanged - Called once the current page has changed, never on
- * mount. Receives the zero-based index of the new current page and the
- * corresponding page definition, if available.
+ * mount. Receives `currentPagePos`, the zero-based index of the new current page,
+ * and `pageData`, its definition when there is one.
  * @property onContentVisibilityChanged - Called after the scrolling content
  * area entered or left the viewport, with the new value. Never on mount.
  * @property className - Optional additional class name(s) applied to the root
@@ -99,7 +99,10 @@ export type Props = WithClassName<{
     viewportOffsetLeft?: ViewportOffset;
     stickyBlocksLazyLoadDistance?: number;
     forceStickBlocks?: 'before' | 'after' | 'both' | 'none';
-    onPageChanged?: (currentPagePos: number, pageData?: PropsPage) => void;
+    onPageChanged?: (payload: {
+        currentPagePos: number;
+        pageData?: PropsPage;
+    }) => void;
     onContentVisibilityChanged?: (isVisible: boolean) => void;
 }>;
 /**

package/components/Scrllgngn/index.js

@@ -254,7 +254,10 @@ export const Scrllgngn = ({ pages, thresholdOffsetPercent, viewportOffsetTop, vi
         return () => window.clearInterval(interval);
     }, [isOnScreen, readVisibleZone]);
     // Handlers
-    useChangeDispatch(currentPagePos, pagePos => onPageChanged?.(pagePos, pages?.[pagePos]));
+    useChangeDispatch(currentPagePos, pagePos => onPageChanged?.({
+        currentPagePos: pagePos,
+        pageData: pages?.[pagePos]
+    }));
     useChangeDispatch(contentVisible, onContentVisibilityChanged);
     const handleTopBoundDetect = e => setTopVis(e.ioEntry?.isIntersecting ?? false);
     const handleCntDetect = e => setCntVis(e.ioEntry?.isIntersecting ?? false);

package/components/Sequencer/index.d.ts

@@ -30,8 +30,8 @@ import type { SequencerAction } from './types.js';
  * is a step per second. Clamped to a minimum of `1`.
  * @property loop - Whether the sequence wraps round. **`false` by default**, so a
  * sequence ends the way a video does rather than running forever.
- * @property onStepChanged - Called when the position changes, with the position and the
- * active step it resolves to. Never on mount.
+ * @property onStepChanged - Called when the position changes, with `step` and the
+ * `activeStep` it resolves to. Never on mount.
  * @property onIsPlayingChanged - Called once the effective play state changed — which
  * includes it dropping to `false` on its own at the end.
  * @property onIsEndedChanged - Called when the sequence ends, or leaves that state.
@@ -53,7 +53,10 @@ export type Props = PropsWithChildren<WithClassName<{
     defaultPlay?: boolean;
     tempo?: number;
     loop?: boolean;
-    onStepChanged?: (step: number, activeStep: number) => void;
+    onStepChanged?: (payload: {
+        step: number;
+        activeStep: number;
+    }) => void;
     onIsPlayingChanged?: (isPlaying: boolean) => void;
     onIsEndedChanged?: (isEnded: boolean) => void;
     onLooped?: () => void;

package/components/Sequencer/index.js

@@ -269,7 +269,7 @@ export const Sequencer = ({ totalSteps, stepMap, step, defaultStep, play, defaul
         onVisibilityChanged
     }, actions, behavioursSuspended === true);
     // State dispatch
-    useChangeDispatch(position, () => onStepChanged?.(position, activeStep));
+    useChangeDispatch(position, () => onStepChanged?.({ step: position, activeStep }));
     useChangeDispatch(isPlaying, onIsPlayingChanged);
     useChangeDispatch(isEnded, onIsEndedChanged);
     useChangeDispatch(position === 0, atStart => { if (atStart)

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

@@ -33,6 +33,10 @@ import { type SourceData, type TrackData } from './utils.js';
  * to update the prop instead. Because a playing element advances the time by
  * itself, a controlled time also implies a stopped video: `play` and `autoPlay`
  * are ignored for as long as this prop is provided.
+ *
+ * Every action handler below receives one {@link VideoActionPayload}: the `event` that
+ * triggered it, the `videoElement` it acted on, and the values named in its own entry.
+ *
  * @property onPlayButtonClicked - Called when the play button is clicked, before
  * the component reacts, with the playback state as it was.
  * @property onPauseButtonClicked - Called when the pause button is clicked, before
@@ -93,6 +97,14 @@ import { type SourceData, type TrackData } from './utils.js';
  *
  * Also inherits all standard HTML props for a <video> element.
  */
+/**
+ * What every action handler of this component carries: the event that triggered it, the
+ * `<video>` it acted on, and the values of that action.
+ */
+export type VideoActionPayload<E, T> = {
+    event: E;
+    videoElement: HTMLVideoElement | null;
+} & T;
 export type Props = PropsWithChildren<WithClassName<{
     rootRef?: Ref<HTMLElement>;
     videoRef?: RefObject<HTMLVideoElement | null>;
@@ -114,16 +126,39 @@ export type Props = PropsWithChildren<WithClassName<{
     playbackRate?: number;
     currentTimeMs?: number;
     timeFormat?: string;
-    onPlayButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isPlaying: boolean, video: HTMLVideoElement | null) => void;
-    onPauseButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isPlaying: boolean, video: HTMLVideoElement | null) => void;
-    onLoudButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isLoud: boolean, video: HTMLVideoElement | null) => void;
-    onMuteButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isLoud: boolean, video: HTMLVideoElement | null) => void;
-    onVolumeRangeChanged?: (e: React.ChangeEvent<HTMLInputElement>, targetVolume: number, currentVolume: number, video: HTMLVideoElement | null) => void;
-    onRateRangeChanged?: (e: React.ChangeEvent<HTMLInputElement>, targetRate: number, currentRate: number, video: HTMLVideoElement | null) => void;
-    onFullscreenButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isFullscreen: boolean, video: HTMLVideoElement | null) => void;
-    onSubtitlesButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isSubtitlesOn: boolean, video: HTMLVideoElement | null) => void;
-    onTimelineClicked?: (e: React.MouseEvent<HTMLDivElement>, targetTime: number, currentTime: number, video: HTMLVideoElement | null) => void;
-    onVideoClicked?: (e: React.MouseEvent<HTMLVideoElement>, isPlaying: boolean, video: HTMLVideoElement | null) => void;
+    onPlayButtonClicked?: (payload: VideoActionPayload<React.MouseEvent<HTMLButtonElement>, {
+        isPlaying: boolean;
+    }>) => void;
+    onPauseButtonClicked?: (payload: VideoActionPayload<React.MouseEvent<HTMLButtonElement>, {
+        isPlaying: boolean;
+    }>) => void;
+    onLoudButtonClicked?: (payload: VideoActionPayload<React.MouseEvent<HTMLButtonElement>, {
+        isLoud: boolean;
+    }>) => void;
+    onMuteButtonClicked?: (payload: VideoActionPayload<React.MouseEvent<HTMLButtonElement>, {
+        isLoud: boolean;
+    }>) => void;
+    onVolumeRangeChanged?: (payload: VideoActionPayload<React.ChangeEvent<HTMLInputElement>, {
+        targetVolume: number;
+        currentVolume: number;
+    }>) => void;
+    onRateRangeChanged?: (payload: VideoActionPayload<React.ChangeEvent<HTMLInputElement>, {
+        targetRate: number;
+        currentRate: number;
+    }>) => void;
+    onFullscreenButtonClicked?: (payload: VideoActionPayload<React.MouseEvent<HTMLButtonElement>, {
+        isFullscreen: boolean;
+    }>) => void;
+    onSubtitlesButtonClicked?: (payload: VideoActionPayload<React.MouseEvent<HTMLButtonElement>, {
+        isSubtitlesOn: boolean;
+    }>) => void;
+    onTimelineClicked?: (payload: VideoActionPayload<React.MouseEvent<HTMLDivElement>, {
+        targetTime: number;
+        currentTime: number;
+    }>) => void;
+    onVideoClicked?: (payload: VideoActionPayload<React.MouseEvent<HTMLVideoElement>, {
+        isPlaying: boolean;
+    }>) => void;
     onIsPlayingChanged?: (isPlaying: boolean) => void;
     onIsFullscreenChanged?: (isFullscreen: boolean) => void;
     onIsLoudChanged?: (isLoud: boolean) => void;

package/components/Video/index.controlled.js

@@ -120,7 +120,7 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
     // Custom action handlers
     const handlePlayButtonClick = useCallback((e) => {
         const wasPlaying = videoRef.current?.paused === false;
-        onPlayButtonClicked?.(e, wasPlaying, videoRef.current);
+        onPlayButtonClicked?.({ event: e, isPlaying: wasPlaying, videoElement: videoRef.current });
     }, [onPlayButtonClicked]);
     // The picture as a play/pause surface. It reports and nothing more, like every other
     // control here: the uncontrolled layer above owns the play state.
@@ -134,37 +134,42 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
         if (togglePlayOnClick !== true)
             return;
         const wasPlaying = videoRef.current?.paused === false;
-        onVideoClicked?.(e, wasPlaying, videoRef.current);
+        onVideoClicked?.({ event: e, isPlaying: wasPlaying, videoElement: videoRef.current });
     }, [togglePlayOnClick, onVideoClicked]);
     const handlePauseButtonClick = useCallback((e) => {
         const wasPlaying = videoRef.current?.paused === false;
-        onPauseButtonClicked?.(e, wasPlaying, videoRef.current);
+        onPauseButtonClicked?.({ event: e, isPlaying: wasPlaying, videoElement: videoRef.current });
     }, [onPauseButtonClicked]);
     const handleLoudButtonClick = useCallback((e) => {
-        onLoudButtonClicked?.(e, isLoud, videoRef.current);
+        onLoudButtonClicked?.({ event: e, isLoud, videoElement: videoRef.current });
     }, [onLoudButtonClicked, isLoud]);
     const handleMuteButtonClick = useCallback((e) => {
-        onMuteButtonClicked?.(e, isLoud, videoRef.current);
+        onMuteButtonClicked?.({ event: e, isLoud, videoElement: videoRef.current });
     }, [onMuteButtonClicked, isLoud]);
     const handleFullscreenButtonClick = useCallback((e) => {
-        onFullscreenButtonClicked?.(e, isFullscreen, videoRef.current);
+        onFullscreenButtonClicked?.({ event: e, isFullscreen, videoElement: videoRef.current });
     }, [onFullscreenButtonClicked, isFullscreen]);
     const handleSubtitlesButtonClick = useCallback((e) => {
-        onSubtitlesButtonClicked?.(e, subtitlesOn, videoRef.current);
+        onSubtitlesButtonClicked?.({ event: e, isSubtitlesOn: subtitlesOn, videoElement: videoRef.current });
     }, [onSubtitlesButtonClicked, subtitlesOn]);
     const handleVolumeRangeChange = useCallback((e) => {
         const targetVolume = Number(e.currentTarget.value) / 100;
-        onVolumeRangeChanged?.(e, targetVolume, volume, videoRef.current);
+        onVolumeRangeChanged?.({ event: e, targetVolume, currentVolume: volume, videoElement: videoRef.current });
     }, [onVolumeRangeChanged, volume]);
     const handleRateRangeChange = useCallback((e) => {
-        onRateRangeChanged?.(e, Number(e.currentTarget.value), playbackRate, videoRef.current);
+        onRateRangeChanged?.({
+            event: e,
+            targetRate: Number(e.currentTarget.value),
+            currentRate: playbackRate,
+            videoElement: videoRef.current
+        });
     }, [onRateRangeChanged, playbackRate]);
     const handleTimelineClick = useCallback((e) => {
         if (videoRef.current === null)
             return;
         const progress = getTimelineClickProgress(e);
         const targetTime = progress * totalTime;
-        onTimelineClicked?.(e, targetTime, currentTime, videoRef.current);
+        onTimelineClicked?.({ event: e, targetTime, currentTime, videoElement: videoRef.current });
         // A controlled time is the parent's to move: it is expected to update the
         // prop in response to this very handler.
         if (!isTimeControlled) {

package/components/Video/index.js

@@ -144,54 +144,54 @@ export const Video = ({ defaultSubtitlesOn = true, behavioursSuspended, visibili
         controlledProps.onLoadedMetadata?.(e);
     }, [controlledProps.onLoadedMetadata, controlledProps.muted]);
     // User actions
-    const handlePlayButtonClick = useCallback((e, isPlaying, video) => {
-        onPlayButtonClicked?.(e, isPlaying, video);
+    const handlePlayButtonClick = useCallback(payload => {
+        onPlayButtonClicked?.(payload);
         surrender('playback');
         setPlay(true);
     }, [onPlayButtonClicked, surrender]);
-    const handlePauseButtonClick = useCallback((e, isPlaying, video) => {
-        onPauseButtonClicked?.(e, isPlaying, video);
+    const handlePauseButtonClick = useCallback(payload => {
+        onPauseButtonClicked?.(payload);
         surrender('playback');
         setPlay(false);
     }, [onPauseButtonClicked, surrender]);
     // The picture toggles, where the two buttons each say one thing. It is the same gesture
     // as pressing one of them — a consumer tracking whether the reader has taken over
     // playback has to count this one too, since it is the same decision made elsewhere.
-    const handleVideoClick = useCallback((e, isPlaying, video) => {
-        onVideoClicked?.(e, isPlaying, video);
+    const handleVideoClick = useCallback(payload => {
+        onVideoClicked?.(payload);
         surrender('playback');
-        setPlay(!isPlaying);
+        setPlay(!payload.isPlaying);
     }, [onVideoClicked, surrender]);
-    const handleLoudButtonClick = useCallback((e, isLoud, video) => {
-        onLoudButtonClicked?.(e, isLoud, video);
+    const handleLoudButtonClick = useCallback(payload => {
+        onLoudButtonClicked?.(payload);
         surrender('sound');
         setMute(false);
     }, [onLoudButtonClicked, surrender]);
-    const handleMuteButtonClick = useCallback((e, isLoud, video) => {
-        onMuteButtonClicked?.(e, isLoud, video);
+    const handleMuteButtonClick = useCallback(payload => {
+        onMuteButtonClicked?.(payload);
         surrender('sound');
         setMute(true);
     }, [onMuteButtonClicked, surrender]);
-    const handleRateRangeChange = useCallback((e, targetRate, currentRate, video) => {
-        onRateRangeChanged?.(e, targetRate, currentRate, video);
-        setPlaybackRate(targetRate);
+    const handleRateRangeChange = useCallback(payload => {
+        onRateRangeChanged?.(payload);
+        setPlaybackRate(payload.targetRate);
     }, [onRateRangeChanged]);
-    const handleVolumeRangeChange = useCallback((e, targetVolume, currentVolume, video) => {
-        onVolumeRangeChanged?.(e, targetVolume, currentVolume, video);
+    const handleVolumeRangeChange = useCallback(payload => {
+        onVolumeRangeChanged?.(payload);
         surrender('sound');
-        setVolume(targetVolume);
+        setVolume(payload.targetVolume);
     }, [onVolumeRangeChanged, surrender]);
-    const handleFullscreenButtonClick = useCallback((e, isFullscreen, video) => {
-        onFullscreenButtonClicked?.(e, isFullscreen, video);
-        setFullscreen(!isFullscreen);
+    const handleFullscreenButtonClick = useCallback(payload => {
+        onFullscreenButtonClicked?.(payload);
+        setFullscreen(!payload.isFullscreen);
     }, [onFullscreenButtonClicked]);
     // Un seul bouton pour les deux sens, contrairement à lecture/pause et son/muet qui en
     // ont un chacun : ceux-là existent en paire dans le DOM et la feuille en montre un,
     // parce qu'ils portent deux glyphes opposés. Les sous-titres n'en portent qu'un, dont
     // seul l'habillage change — inutile d'en rendre deux pour n'en montrer jamais qu'un.
-    const handleSubtitlesButtonClick = useCallback((e, isSubtitlesOn, video) => {
-        onSubtitlesButtonClicked?.(e, isSubtitlesOn, video);
-        setSubtitlesOn(!isSubtitlesOn);
+    const handleSubtitlesButtonClick = useCallback(payload => {
+        onSubtitlesButtonClicked?.(payload);
+        setSubtitlesOn(!payload.isSubtitlesOn);
     }, [onSubtitlesButtonClicked]);
     // `autoPlay` is forwarded to the element, but the play state is owned here, so
     // it has to be seeded once on mount for the controls to agree with the element.

package/components/index.d.ts

@@ -19,8 +19,8 @@ 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 subtitles from './Subtitles/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
+export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'
 export * as uiModule from './UIModule/index.js'
 export * as video from './Video/index.js'

package/components/index.js

@@ -19,8 +19,8 @@ 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 subtitles from './Subtitles/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
+export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'
 export * as uiModule from './UIModule/index.js'
 export * as video from './Video/index.js'

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

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

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

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

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

@@ -1,8 +1,8 @@
 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 getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'

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

@@ -1,8 +1,8 @@
 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 getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'

package/node/files/index.d.ts

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

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

@@ -1,10 +1,10 @@
-export * as blur from './blur/index.js'
 export * as brighten from './brighten/index.js'
+export * as blur from './blur/index.js'
 export * as extend from './extend/index.js'
 export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
-export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
+export * as flip from './flip/index.js'
 export * as hue from './hue/index.js'
 export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'

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

@@ -1,10 +1,10 @@
-export * as blur from './blur/index.js'
 export * as brighten from './brighten/index.js'
+export * as blur from './blur/index.js'
 export * as extend from './extend/index.js'
 export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
-export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
+export * as flip from './flip/index.js'
 export * as hue from './hue/index.js'
 export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'

package/node/index.d.ts

@@ -1,5 +1,5 @@
-export * as awsS3 from './@aws-s3/index.js'
 export * as designEdito from './@design-edito/index.js'
+export * as awsS3 from './@aws-s3/index.js'
 export * as express from './@express/index.js'
 export * as googleCloud from './@google-cloud/index.js'
 export * as cloudStorage from './cloud-storage/index.js'

package/node/index.js

@@ -1,5 +1,5 @@
-export * as awsS3 from './@aws-s3/index.js'
 export * as designEdito from './@design-edito/index.js'
+export * as awsS3 from './@aws-s3/index.js'
 export * as express from './@express/index.js'
 export * as googleCloud from './@google-cloud/index.js'
 export * as cloudStorage from './cloud-storage/index.js'

package/package.json

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