@design-edito/tools 0.5.33 → 0.5.35

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 isArrayOf from './is-array-of/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 isArrayOf from './is-array-of/index.js'

package/agnostic/colors/index.d.ts

@@ -1,12 +1,12 @@
 export * as channels from './channels/index.js'
 export * as contrast from './contrast/index.js'
 export * as convert from './convert/index.js'
-export * as distance from './distance/index.js'
 export * as grayscale from './grayscale/index.js'
-export * as lerp from './lerp/index.js'
+export * as distance from './distance/index.js'
 export * as invert from './invert/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 distance from './distance/index.js'
 export * as grayscale from './grayscale/index.js'
-export * as lerp from './lerp/index.js'
+export * as distance from './distance/index.js'
 export * as invert from './invert/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/html/hyper-json/smart-tags/coalesced/index.d.ts

@@ -1,7 +1,7 @@
 export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
-export * as and from './and/index.js'
 export * as append from './append/index.js'
+export * as 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'
@@ -10,7 +10,6 @@ export * as equals from './equals/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
-export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
@@ -19,6 +18,7 @@ export * as length from './length/index.js'
 export * as map from './map/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
+export * as 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'
@@ -30,22 +30,22 @@ export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
+export * as select from './select/index.js'
 export * as 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 toboolean from './toboolean/index.js'
-export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
+export * as toarray from './toarray/index.js'
+export * as toelement from './toelement/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
-export * as select from './select/index.js'
-export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
 export * as toref from './toref/index.js'
+export * as tonumber from './tonumber/index.js'
 export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
 export * as transformselected from './transformselected/index.js'

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

@@ -1,7 +1,7 @@
 export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
-export * as and from './and/index.js'
 export * as append from './append/index.js'
+export * as 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'
@@ -10,7 +10,6 @@ export * as equals from './equals/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
-export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
 export * as initialize from './initialize/index.js'
@@ -19,6 +18,7 @@ export * as length from './length/index.js'
 export * as map from './map/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
+export * as 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'
@@ -30,22 +30,22 @@ export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
+export * as select from './select/index.js'
 export * as 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 toboolean from './toboolean/index.js'
-export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
+export * as toarray from './toarray/index.js'
+export * as toelement from './toelement/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
-export * as select from './select/index.js'
-export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
 export * as toref from './toref/index.js'
+export * as tonumber from './tonumber/index.js'
 export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
 export * as transformselected from './transformselected/index.js'

package/agnostic/html/index.d.ts

@@ -1,6 +1,6 @@
 export * as deepSelect from './deep-select/index.js'
-export * as getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as getNodeAncestors from './get-node-ancestors/index.js'
+export * as getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
 export * as placeholders from './placeholders/index.js'

package/agnostic/html/index.js

@@ -1,6 +1,6 @@
 export * as deepSelect from './deep-select/index.js'
-export * as getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as getNodeAncestors from './get-node-ancestors/index.js'
+export * as getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
 export * as placeholders from './placeholders/index.js'

package/agnostic/index.d.ts

@@ -1,6 +1,5 @@
 export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
-export * as arrays from './arrays/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'
@@ -12,6 +11,7 @@ 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 typescript from './typescript/index.js'
-export * as subtitles from './subtitles/index.js'

package/agnostic/index.js

@@ -1,6 +1,5 @@
 export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
-export * as arrays from './arrays/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'
@@ -12,6 +11,7 @@ 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 typescript from './typescript/index.js'
-export * as subtitles from './subtitles/index.js'

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

@@ -1,2 +1,2 @@
-export * as window from './window/index.js'
 export * as detectRuntime from './detect-runtime/index.js'
+export * as window from './window/index.js'

package/agnostic/misc/crossenv/index.js

@@ -1,2 +1,2 @@
-export * as window from './window/index.js'
 export * as detectRuntime from './detect-runtime/index.js'
+export * as window from './window/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 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 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 approximateRational from './approximate-rational/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 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 clamp from './clamp/index.js'
+export * as approximateRational from './approximate-rational/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/objects/index.d.ts

@@ -5,5 +5,5 @@ 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 validation from './validation/index.js'
 export * as sortKeys from './sort-keys/index.js'
+export * as validation from './validation/index.js'

package/agnostic/objects/index.js

@@ -5,5 +5,5 @@ 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 validation from './validation/index.js'
 export * as sortKeys from './sort-keys/index.js'
+export * as validation from './validation/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 path from './path/index.js'
 export * as userInput from './user-input/index.js'
+export * as path from './path/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 path from './path/index.js'
 export * as userInput from './user-input/index.js'
+export * as path from './path/index.js'

package/agnostic/strings/index.d.ts

@@ -2,7 +2,7 @@ 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 splitTrim from './split-trim/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 trim from './trim/index.js'

package/agnostic/strings/index.js

@@ -2,7 +2,7 @@ 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 splitTrim from './split-trim/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 trim from './trim/index.js'

package/agnostic/time/index.d.ts

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

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/UIModule/index.d.ts

@@ -1,36 +1,43 @@
 import { type FunctionComponent } from 'react';
 import type { WithClassName } from '../utils/types.js';
 /**
- * Describes the contract a dynamically imported UI module must satisfy.
- * Every member is validated at runtime after the import resolves.
+ * Describes the contract a dynamically imported UI module must satisfy. Only `init`
+ * is required; every member present is validated at runtime after the import resolves.
  *
- * @property init - Called once after the module loads. Receives the current
- * `props` and must return the root `Element` that will be appended to the
- * host `<div>`. Throwing inside `init` is caught and surfaced as an error state.
- * @property destroy - Called when the component unmounts or `src` changes.
- * Receives the `Element` previously returned by `init`. Use it to tear down
- * event listeners, timers, or third-party instances.
- * @property update - Optional. Called when `props` change after the module is
- * already initialized. Receives the live `Element` and the new props object.
+ * @property init - Called once after the module loads. Receives the current `props`
+ * and must return the root `Element` that will be appended to the host `<div>`.
+ * **The element is not in the document yet**, so measuring it or reaching its
+ * ancestors belongs in `postInit`, not here. Throwing is caught and surfaced as an
+ * 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.
+ * @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
+ * per real change.
+ * @property destroy - Optional. Called when the component unmounts or `src` changes.
+ * Receives the `Element` previously returned by `init`. Use it to tear down event
+ * listeners, timers, or third-party instances.
  * @property css - Optional array of raw CSS strings scoped automatically to
  * the host element via `.<publicClassName>#<id> { … }` and injected as
  * `<style>` elements.
  */
 type ModuleData = {
     init: (props: Record<string, unknown>) => Element;
-    destroy: (target: Element) => void;
+    postInit?: (target: Element, props: Record<string, unknown>) => void;
     update?: (target: Element, props: Record<string, unknown>) => void;
+    destroy?: (target: Element) => void;
     css?: string[];
 };
 /**
  * Props for the {@link UIModule} component.
  *
  * @property src - URL of the ES module to import dynamically. The module must
- * satisfy the {@link ModuleData} interface — `init` and `destroy` are required,
- * `update` and `css` are optional. When `undefined`, nothing is loaded and the
- * component stays in the `--no-module` state.
- * @property props - Arbitrary key-value object forwarded verbatim to the
- * module's `init` call and, on subsequent changes, to `update` (if exported).
+ * satisfy the {@link ModuleData} interface — only `init` is required. When
+ * `undefined`, nothing is loaded and the component stays in the `--no-module` state.
+ * @property props - Arbitrary key-value object forwarded verbatim to `init`, then to
+ * `postInit`, then to `update` whenever the object's identity changes.
  * @property onIdGenerated - Called once on mount with the instance's generated
  * `id`. The id never changes afterwards, so this fires exactly once.
  * @property onIsLoadingChanged - Called after the loading state changed, with
@@ -55,8 +62,14 @@ export type Props = WithClassName<{
  * and appends that element to its own root `<div>`.
  *
  * The imported module is expected to conform to the {@link ModuleData} interface.
- * Any violation (missing exports, wrong types, `init` not returning an `Element`)
- * transitions the component into the `--error` state and logs to `console.error`.
+ * A missing `init`, a member of the wrong type, or an `init` not returning an
+ * `Element` transitions the component into the `--error` state and logs to
+ * `console.error`.
+ *
+ * ### 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.
  *
  * ### CSS modifiers
  * Reflecting the current load lifecycle:

package/components/UIModule/index.js

@@ -13,8 +13,14 @@ import cssModule from './styles.module.css';
  * and appends that element to its own root `<div>`.
  *
  * The imported module is expected to conform to the {@link ModuleData} interface.
- * Any violation (missing exports, wrong types, `init` not returning an `Element`)
- * transitions the component into the `--error` state and logs to `console.error`.
+ * A missing `init`, a member of the wrong type, or an `init` not returning an
+ * `Element` transitions the component into the `--error` state and logs to
+ * `console.error`.
+ *
+ * ### 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.
  *
  * ### CSS modifiers
  * Reflecting the current load lifecycle:
@@ -45,10 +51,16 @@ export const UIModule = ({ src, props, onIdGenerated, onIsLoadingChanged, onLoad
     // What the teardown needs, held outside state so the load effect can depend on
     // `src` alone and still destroy whatever is actually live at cleanup time.
     const liveInstanceRef = useRef(null);
+    // The load effect depends on `src` alone, so the props it closes over are those of
+    // the render it ran on. This is what `init` and `postInit` read instead.
+    const propsRef = useRef(props);
     // State dispatch
     useChangeDispatch(isLoading, onIsLoadingChanged);
     useChangeDispatch(loadedModule, onLoadedModuleChanged);
     useChangeDispatch(moduleTarget, onModuleTargetChanged);
+    // Fx. no dep. - keep the latest props reachable from the effects that run outside
+    // their own render, declared first so they read this render's value and not the last
+    useEffect(() => { propsRef.current = props; });
     // Fx. no dep. - report the generated id, which never changes afterwards
     useEffect(() => { onIdGenerated?.(id); }, []);
     // Fx. dep. `src` - import, validate and initialize the module
@@ -63,8 +75,10 @@ export const UIModule = ({ src, props, onIdGenerated, onIsLoadingChanged, onLoad
                 return setLoadedModule(new Error('Not a module'));
             if (!('init' in data) || typeof data.init !== 'function')
                 return setLoadedModule(new Error('Module exported member `init` must be a function'));
-            if (!('destroy' in data) || typeof data.destroy !== 'function')
+            if ('destroy' in data && typeof data.destroy !== 'function')
                 return setLoadedModule(new Error('Module exported member `destroy` must be a function'));
+            if ('postInit' in data && typeof data.postInit !== 'function')
+                return setLoadedModule(new Error('Module exported member `postInit` must be a function'));
             if ('css' in data) {
                 if (!Array.isArray(data.css))
                     return setLoadedModule(new Error('Module exported member `css` must be an array of strings'));
@@ -77,7 +91,7 @@ export const UIModule = ({ src, props, onIdGenerated, onIsLoadingChanged, onLoad
             const module = data;
             setLoadedModule(module);
             try {
-                const target = module.init(props ?? {});
+                const target = module.init(propsRef.current ?? {});
                 if (!(target instanceof Element))
                     return setLoadedModule(new Error('Module exported function `init` must return an Element'));
                 liveInstanceRef.current = { module, target };
@@ -99,7 +113,7 @@ export const UIModule = ({ src, props, onIdGenerated, onIsLoadingChanged, onLoad
             const liveInstance = liveInstanceRef.current;
             if (liveInstance === null)
                 return;
-            liveInstance.module.destroy(liveInstance.target);
+            liveInstance.module.destroy?.(liveInstance.target);
             liveInstanceRef.current = null;
         };
     }, [src]);
@@ -109,14 +123,26 @@ export const UIModule = ({ src, props, onIdGenerated, onIsLoadingChanged, onLoad
         if (loadedModule instanceof Error)
             console.error(loadedModule);
     }, [loadedModule]);
-    // Fx. dep. `moduleTarget` - append the element the module built
+    // Fx. dep. `moduleTarget` - append the element the module built, then hand it back
+    // attached. `init` ran on a detached node, so this is the first point a module can
+    // measure its own box or reach an ancestor.
     useEffect(() => {
         if (moduleTarget === null)
             return;
         if (rootRef.current === null)
             return;
         rootRef.current.appendChild(moduleTarget);
+        liveInstanceRef.current?.module.postInit?.(moduleTarget, propsRef.current ?? {});
     }, [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
+    // the consumer's reference discipline and the module's own reading of what changed.
+    useEffect(() => {
+        const liveInstance = liveInstanceRef.current;
+        if (liveInstance === null)
+            return;
+        liveInstance.module.update?.(liveInstance.target, props ?? {});
+    }, [props]);
     // Rendering
     const c = clss(publicClassName, { cssModule });
     const hasErrored = loadedModule instanceof Error;

package/components/index.d.ts

@@ -1,6 +1,6 @@
 export * as beforeAfter from './BeforeAfter/index.js'
-export * as button from './Button/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'
@@ -9,8 +9,8 @@ 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 jsonEditor from './JsonEditor/index.js'
 export * as lightbox from './Lightbox/index.js'
+export * as jsonEditor from './JsonEditor/index.js'
 export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
@@ -20,8 +20,8 @@ export * as scrollListener from './ScrollListener/index.js'
 export * as select from './Select/index.js'
 export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
-export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'
+export * as subtitles from './Subtitles/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,6 +1,6 @@
 export * as beforeAfter from './BeforeAfter/index.js'
-export * as button from './Button/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'
@@ -9,8 +9,8 @@ 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 jsonEditor from './JsonEditor/index.js'
 export * as lightbox from './Lightbox/index.js'
+export * as jsonEditor from './JsonEditor/index.js'
 export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
@@ -20,8 +20,8 @@ export * as scrollListener from './ScrollListener/index.js'
 export * as select from './Select/index.js'
 export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
-export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'
+export * as subtitles from './Subtitles/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 remove from './remove/index.js'
 export * as stat from './stat/index.js'
+export * as remove from './remove/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 remove from './remove/index.js'
 export * as stat from './stat/index.js'
+export * as remove from './remove/index.js'
 export * as upload from './upload/index.js'

package/node/@google-cloud/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 copyDir from './copy-dir/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 copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
+export * as copyDir from './copy-dir/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 getPermissions from './get-permissions/index.js'
 export * as getMetadata from './get-metadata/index.js'
-export * as move from './move/index.js'
+export * as getPermissions from './get-permissions/index.js'
+export * as download from './download/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 getPermissions from './get-permissions/index.js'
 export * as getMetadata from './get-metadata/index.js'
-export * as move from './move/index.js'
+export * as getPermissions from './get-permissions/index.js'
+export * as download from './download/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 removeDir from './remove-dir/index.js'
 export * as removeFile from './remove-file/index.js'
+export * as removeDir from './remove-dir/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 removeDir from './remove-dir/index.js'
 export * as removeFile from './remove-file/index.js'
+export * as removeDir from './remove-dir/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'

package/node/ftps/file/index.d.ts

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

package/node/ftps/file/index.js

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

package/node/ftps/index.d.ts

@@ -1,2 +1,2 @@
-export * as file from './file/index.js'
 export * as directory from './directory/index.js'
+export * as file from './file/index.js'

package/node/ftps/index.js

@@ -1,2 +1,2 @@
-export * as file from './file/index.js'
 export * as directory from './directory/index.js'
+export * as file from './file/index.js'

package/node/images/index.d.ts

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

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

@@ -1,6 +1,6 @@
 export * as blur from './blur/index.js'
-export * as extend from './extend/index.js'
 export * as brighten from './brighten/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'

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

@@ -1,6 +1,6 @@
 export * as blur from './blur/index.js'
-export * as extend from './extend/index.js'
 export * as brighten from './brighten/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'

package/node/index.d.ts

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

package/node/index.js

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

package/package.json

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