@design-edito/tools 0.5.35 → 0.5.37

package/agnostic/arrays/index.d.ts

@@ -1,6 +1,6 @@
 export * as dedupe from './dedupe/index.js'
-export * as findDuplicates from './find-duplicates/index.js'
 export * as isArrayOf from './is-array-of/index.js'
 export * as make from './make/index.js'
 export * as randomPick from './random-pick/index.js'
 export * as shuffle from './shuffle/index.js'
+export * as findDuplicates from './find-duplicates/index.js'

package/agnostic/arrays/index.js

@@ -1,6 +1,6 @@
 export * as dedupe from './dedupe/index.js'
-export * as findDuplicates from './find-duplicates/index.js'
 export * as isArrayOf from './is-array-of/index.js'
 export * as make from './make/index.js'
 export * as randomPick from './random-pick/index.js'
 export * as shuffle from './shuffle/index.js'
+export * as findDuplicates from './find-duplicates/index.js'

package/agnostic/colors/index.d.ts

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

@@ -1,12 +1,12 @@
 export * as channels from './channels/index.js'
 export * as contrast from './contrast/index.js'
 export * as convert from './convert/index.js'
-export * as grayscale from './grayscale/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 isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as stylesSet from './styles-set/index.js'

package/agnostic/css/index.js

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

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

@@ -5,20 +5,20 @@ export * as and from './and/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
 export * as clone from './clone/index.js'
-export * as deleteproperties from './deleteproperties/index.js'
 export * as equals from './equals/index.js'
+export * as deleteproperties from './deleteproperties/index.js'
 export * as getattribute from './getattribute/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 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 hjstringify from './hjstringify/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
-export * as hjparse from './hjparse/index.js'
 export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
@@ -33,20 +33,20 @@ 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 toboolean from './toboolean/index.js'
-export * as toggleclass from './toggleclass/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 setproperty from './setproperty/index.js'
+export * as split from './split/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
-export * as torecord from './torecord/index.js'
-export * as toref from './toref/index.js'
 export * as tonumber from './tonumber/index.js'
+export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
+export * as torecord from './torecord/index.js'
 export * as totext from './totext/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

@@ -5,20 +5,20 @@ export * as and from './and/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
 export * as clone from './clone/index.js'
-export * as deleteproperties from './deleteproperties/index.js'
 export * as equals from './equals/index.js'
+export * as deleteproperties from './deleteproperties/index.js'
 export * as getattribute from './getattribute/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 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 hjstringify from './hjstringify/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
-export * as hjparse from './hjparse/index.js'
 export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
@@ -33,20 +33,20 @@ 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 toboolean from './toboolean/index.js'
-export * as toggleclass from './toggleclass/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 setproperty from './setproperty/index.js'
+export * as split from './split/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
-export * as torecord from './torecord/index.js'
-export * as toref from './toref/index.js'
 export * as tonumber from './tonumber/index.js'
+export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
+export * as torecord from './torecord/index.js'
 export * as totext from './totext/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

@@ -3,8 +3,8 @@ export * as array from './array/index.js'
 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 nodelist from './nodelist/index.js'
+export * as guess from './guess/index.js'
 export * as null from './null/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'

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

@@ -3,8 +3,8 @@ export * as array from './array/index.js'
 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 nodelist from './nodelist/index.js'
+export * as guess from './guess/index.js'
 export * as null from './null/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'

package/agnostic/html/index.d.ts

@@ -6,5 +6,5 @@ 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 stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
+export * as stringToNodes from './string-to-nodes/index.js'

package/agnostic/html/index.js

@@ -6,5 +6,5 @@ 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 stringToNodes from './string-to-nodes/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,3 +1,4 @@
+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'
@@ -11,7 +12,6 @@ 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 time from './time/index.js'
-export * as arrays from './arrays/index.js'
+export * as subtitles from './subtitles/index.js'
 export * as typescript from './typescript/index.js'

package/agnostic/index.js

@@ -1,3 +1,4 @@
+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'
@@ -11,7 +12,6 @@ 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 time from './time/index.js'
-export * as arrays from './arrays/index.js'
+export * as subtitles from './subtitles/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 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 normalizeExtension from './normalize-extension/index.js'
-export * as crawler from './crawler/index.js'
-export * as crossenv from './crossenv/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 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 normalizeExtension from './normalize-extension/index.js'
-export * as crawler from './crawler/index.js'
-export * as crossenv from './crossenv/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 clamp from './clamp/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 interpolate from './interpolate/index.js'
 export * as round from './round/index.js'
+export * as geometricProgressions from './geometric-progressions/index.js'

package/agnostic/numbers/index.js

@@ -1,6 +1,6 @@
 export * as absoluteModulo from './absolute-modulo/index.js'
-export * as clamp from './clamp/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 interpolate from './interpolate/index.js'
 export * as round from './round/index.js'
+export * as geometricProgressions from './geometric-progressions/index.js'

package/agnostic/objects/index.d.ts

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
 export * as enums from './enums/index.js'
 export * as flattenGetters from './flatten-getters/index.js'
-export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as recordMap from './record-map/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'
+export * as isObject from './is-object/index.js'

package/agnostic/objects/index.js

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
 export * as enums from './enums/index.js'
 export * as flattenGetters from './flatten-getters/index.js'
-export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as recordMap from './record-map/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'
+export * as isObject from './is-object/index.js'

package/agnostic/random/index.d.ts

@@ -1,3 +1,3 @@
 export * as hexChar from './hex-char/index.js'
-export * as random from './random/index.js'
 export * as uuid from './uuid/index.js'
+export * as random from './random/index.js'

package/agnostic/random/index.js

@@ -1,3 +1,3 @@
 export * as hexChar from './hex-char/index.js'
-export * as random from './random/index.js'
 export * as uuid from './uuid/index.js'
+export * as random from './random/index.js'

package/agnostic/sanitization/index.d.ts

@@ -1,4 +1,4 @@
 export * as fileName from './file-name/index.js'
 export * as html from './html/index.js'
-export * as userInput from './user-input/index.js'
 export * as path from './path/index.js'
+export * as userInput from './user-input/index.js'

package/agnostic/sanitization/index.js

@@ -1,4 +1,4 @@
 export * as fileName from './file-name/index.js'
 export * as html from './html/index.js'
-export * as userInput from './user-input/index.js'
 export * as path from './path/index.js'
+export * as userInput from './user-input/index.js'

package/agnostic/strings/index.d.ts

@@ -3,6 +3,6 @@ export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
 export * as replaceAll from './replace-all/index.js'
-export * as toAlphanum from './to-alphanum/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

@@ -3,6 +3,6 @@ export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
 export * as replaceAll from './replace-all/index.js'
-export * as toAlphanum from './to-alphanum/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/dates/index.d.ts

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

package/agnostic/time/dates/index.js

@@ -1,2 +1,2 @@
-export * as formatDate from './format-date/index.js'
 export * as toFrenchRepublican from './to-french-republican/index.js'
+export * as formatDate from './format-date/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/UIModule/index.d.ts

@@ -11,7 +11,9 @@ import type { WithClassName } from '../utils/types.js';
  * error state.
  * @property postInit - Optional. Called once, right after the element returned by
  * `init` has been appended. First point at which the module holds an attached
- * element: layout can be measured and ancestors reached.
+ * element: layout can be measured and ancestors reached. **May return a teardown
+ * function**, run at unmount before `destroy` — which lets whatever it set up stay in
+ * its own closure instead of being filed somewhere `destroy` can find it again.
  * @property update - Optional. Called when the `props` object changes identity,
  * once the module is live. Compared by reference, not by value — a consumer passing
  * an inline object gets one call per render, one passing a stable reference gets one
@@ -25,7 +27,7 @@ import type { WithClassName } from '../utils/types.js';
  */
 type ModuleData = {
     init: (props: Record<string, unknown>) => Element;
-    postInit?: (target: Element, props: Record<string, unknown>) => void;
+    postInit?: (target: Element, props: Record<string, unknown>) => void | (() => void);
     update?: (target: Element, props: Record<string, unknown>) => void;
     destroy?: (target: Element) => void;
     css?: string[];
@@ -69,7 +71,8 @@ export type Props = WithClassName<{
  * ### Lifecycle
  * `init(props)` builds the element, **detached**. It is appended, then `postInit`
  * runs on it attached. `update` follows each change of the `props` object's
- * identity, and `destroy` runs on unmount or when `src` changes.
+ * identity. At unmount, or when `src` changes, the teardown `postInit` returned runs
+ * first, then `destroy`.
  *
  * ### CSS modifiers
  * Reflecting the current load lifecycle:

package/components/UIModule/index.js

@@ -20,7 +20,8 @@ import cssModule from './styles.module.css';
  * ### Lifecycle
  * `init(props)` builds the element, **detached**. It is appended, then `postInit`
  * runs on it attached. `update` follows each change of the `props` object's
- * identity, and `destroy` runs on unmount or when `src` changes.
+ * identity. At unmount, or when `src` changes, the teardown `postInit` returned runs
+ * first, then `destroy`.
  *
  * ### CSS modifiers
  * Reflecting the current load lifecycle:
@@ -113,6 +114,9 @@ export const UIModule = ({ src, props, onIdGenerated, onIsLoadingChanged, onLoad
             const liveInstance = liveInstanceRef.current;
             if (liveInstance === null)
                 return;
+            // The teardown `postInit` handed back first: it undoes what `postInit` did, so it
+            // runs in reverse order of construction.
+            liveInstance.cleanup?.();
             liveInstance.module.destroy?.(liveInstance.target);
             liveInstanceRef.current = null;
         };
@@ -132,7 +136,12 @@ export const UIModule = ({ src, props, onIdGenerated, onIsLoadingChanged, onLoad
         if (rootRef.current === null)
             return;
         rootRef.current.appendChild(moduleTarget);
-        liveInstanceRef.current?.module.postInit?.(moduleTarget, propsRef.current ?? {});
+        const liveInstance = liveInstanceRef.current;
+        if (liveInstance === null)
+            return;
+        const cleanup = liveInstance.module.postInit?.(moduleTarget, propsRef.current ?? {});
+        if (typeof cleanup === 'function')
+            liveInstance.cleanup = cleanup;
     }, [moduleTarget]);
     // Fx. dep. `props` - hand a props change to a module that is already live. Compared
     // by reference: the component knows nothing of the values, so it leaves the call to

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

@@ -1,27 +1,27 @@
 export * as beforeAfter from './BeforeAfter/index.js'
 export * as clippable from './Clippable/index.js'
 export * as button from './Button/index.js'
-export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
+export * as disclaimer from './Disclaimer/index.js'
 export * as gallery from './Gallery/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
 export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
-export * as lightbox from './Lightbox/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
+export * as lightbox from './Lightbox/index.js'
 export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
-export * as scrollListener from './ScrollListener/index.js'
 export * as select from './Select/index.js'
+export * as scrollListener from './ScrollListener/index.js'
 export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
-export * as textarea from './Textarea/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'
 export * as wipAudioQuote from './_WIP_AudioQuote/index.js'

package/components/index.js

@@ -1,27 +1,27 @@
 export * as beforeAfter from './BeforeAfter/index.js'
 export * as clippable from './Clippable/index.js'
 export * as button from './Button/index.js'
-export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
+export * as disclaimer from './Disclaimer/index.js'
 export * as gallery from './Gallery/index.js'
 export * as iframe from './Iframe/index.js'
 export * as image from './Image/index.js'
 export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
-export * as lightbox from './Lightbox/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
+export * as lightbox from './Lightbox/index.js'
 export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
 export * as resizeObserver from './ResizeObserver/index.js'
 export * as scrllgngn from './Scrllgngn/index.js'
-export * as scrollListener from './ScrollListener/index.js'
 export * as select from './Select/index.js'
+export * as scrollListener from './ScrollListener/index.js'
 export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
-export * as textarea from './Textarea/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'
 export * as wipAudioQuote from './_WIP_AudioQuote/index.js'

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

@@ -2,6 +2,6 @@ export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as move from './move/index.js'
-export * as stat from './stat/index.js'
 export * as remove from './remove/index.js'
+export * as stat from './stat/index.js'
 export * as upload from './upload/index.js'

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

@@ -2,6 +2,6 @@ export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as move from './move/index.js'
-export * as stat from './stat/index.js'
 export * as remove from './remove/index.js'
+export * as stat from './stat/index.js'
 export * as upload from './upload/index.js'

package/node/@google-cloud/storage/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 download from './download/index.js'
+export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
-export * as generateSignedUrl from './generate-signed-url/index.js'
-export * as move from './move/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 download from './download/index.js'
+export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
-export * as generateSignedUrl from './generate-signed-url/index.js'
-export * as move from './move/index.js'
 export * as stat from './stat/index.js'
 export * as updateMetadata from './update-metadata/index.js'
 export * as upload from './upload/index.js'

package/node/cloud-storage/operations/index.d.ts

@@ -5,7 +5,7 @@ export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as moveFile from './move-file/index.js'
-export * as removeFile from './remove-file/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'

package/node/cloud-storage/operations/index.js

@@ -5,7 +5,7 @@ export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'
 export * as moveFile from './move-file/index.js'
-export * as removeFile from './remove-file/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'

package/node/images/index.d.ts

@@ -1,5 +1,5 @@
 export * as create from './create/index.js'
 export * as format from './format/index.js'
-export * as transform from './transform/index.js'
 export * as metadata from './metadata/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 transform from './transform/index.js'
 export * as metadata from './metadata/index.js'
+export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'

package/node/index.d.ts

@@ -1,7 +1,7 @@
 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 googleCloud from './@google-cloud/index.js'
+export * as express from './@express/index.js'
 export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'

package/node/index.js

@@ -1,7 +1,7 @@
 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 googleCloud from './@google-cloud/index.js'
+export * as express from './@express/index.js'
 export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'

package/package.json

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