@design-edito/tools 0.5.28 → 0.5.30

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

@@ -2,24 +2,24 @@ export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
 export * as append from './append/index.js'
+export * as at from './at/index.js'
 export * as 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 getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
-export * as at from './at/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 join from './join/index.js'
 export * as length from './length/index.js'
-export * as initialize from './initialize/index.js'
 export * as map from './map/index.js'
+export * as initialize from './initialize/index.js'
 export * as negate from './negate/index.js'
-export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
+export * as notrailing from './notrailing/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
 export * as print from './print/index.js'
@@ -32,19 +32,19 @@ 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 toarray from './toarray/index.js'
 export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
-export * as tonodelist from './tonodelist/index.js'
+export * as setattribute from './setattribute/index.js'
 export * as tonull from './tonull/index.js'
-export * as tonumber from './tonumber/index.js'
+export * as tonodelist from './tonodelist/index.js'
 export * as torecord from './torecord/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 totext from './totext/index.js'

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

@@ -2,24 +2,24 @@ export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
 export * as append from './append/index.js'
+export * as at from './at/index.js'
 export * as 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 getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
-export * as at from './at/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 join from './join/index.js'
 export * as length from './length/index.js'
-export * as initialize from './initialize/index.js'
 export * as map from './map/index.js'
+export * as initialize from './initialize/index.js'
 export * as negate from './negate/index.js'
-export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
+export * as notrailing from './notrailing/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
 export * as print from './print/index.js'
@@ -32,19 +32,19 @@ 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 toarray from './toarray/index.js'
 export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
-export * as tonodelist from './tonodelist/index.js'
+export * as setattribute from './setattribute/index.js'
 export * as tonull from './tonull/index.js'
-export * as tonumber from './tonumber/index.js'
+export * as tonodelist from './tonodelist/index.js'
 export * as torecord from './torecord/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 totext from './totext/index.js'

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

@@ -8,6 +8,6 @@ export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
-export * as string from './string/index.js'
 export * as ref from './ref/index.js'
+export * as string from './string/index.js'
 export * as text from './text/index.js'

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

@@ -8,6 +8,6 @@ export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
-export * as string from './string/index.js'
 export * as ref from './ref/index.js'
+export * as string from './string/index.js'
 export * as text from './text/index.js'

package/agnostic/html/index.d.ts

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

package/agnostic/html/index.js

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

package/agnostic/index.d.ts

@@ -3,15 +3,15 @@ export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
-export * as html from './html/index.js'
-export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'
-export * as random from './random/index.js'
 export * as optim from './optim/index.js'
+export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'
 export * as sanitization from './sanitization/index.js'
 export * as strings from './strings/index.js'
+export * as html from './html/index.js'
+export * as misc from './misc/index.js'
 export * as subtitles from './subtitles/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/index.js'

package/agnostic/index.js

@@ -3,15 +3,15 @@ export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
-export * as html from './html/index.js'
-export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'
-export * as random from './random/index.js'
 export * as optim from './optim/index.js'
+export * as random from './random/index.js'
 export * as regexps from './regexps/index.js'
 export * as sanitization from './sanitization/index.js'
 export * as strings from './strings/index.js'
+export * as html from './html/index.js'
+export * as misc from './misc/index.js'
 export * as subtitles from './subtitles/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/index.js'

package/agnostic/misc/index.d.ts

@@ -4,9 +4,9 @@ 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 isConstructorFunction from './is-constructor-function/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/misc/index.js

@@ -4,9 +4,9 @@ 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 isConstructorFunction from './is-constructor-function/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

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

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

package/agnostic/misc/logs/index.js

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

package/agnostic/optim/index.d.ts

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

package/agnostic/optim/index.js

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

package/agnostic/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/agnostic/time/index.d.ts

@@ -1,5 +1,5 @@
-export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
+export * as dates from './dates/index.js'
 export * as timeout from './timeout/index.js'
 export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'

package/agnostic/time/index.js

@@ -1,5 +1,5 @@
-export * as dates from './dates/index.js'
 export * as duration from './duration/index.js'
+export * as dates from './dates/index.js'
 export * as timeout from './timeout/index.js'
 export * as transitions from './transitions/index.js'
 export * as wait from './wait/index.js'

package/components/Drawer/index.d.ts

@@ -3,8 +3,19 @@ import type { WithClassName } from '../utils/types.js';
 /**
  * Props for the {@link Drawer} component.
  *
- * @property openerContent - Content rendered inside the opener control.
- * @property closerContent - Content rendered inside the closer control.
+ * @property openerContent - Content rendered inside the opener control. Not
+ * necessarily a button: a command is a bar, and most consumers put a title *and* a
+ * toggle in it — hence `openerContent` rather than `openerBtnContent`.
+ * @property closerContent - Content rendered inside the closer control. Defaults to
+ * `openerContent`, so a bar written once serves both states and CSS tells them apart
+ * through the root modifiers. Pass `null` to render an empty closer.
+ * @property openerBtnSelector - CSS selector picking the toggle *inside*
+ * `openerContent`. Without it the whole bar opens the drawer; with it, only a click
+ * landing inside a matching descendant does. Whatever it points at receives the
+ * `opener-btn` class, so CSS can reach the toggle too. An invalid selector falls back
+ * to the whole bar.
+ * @property closerBtnSelector - Same, for the closer. Defaults to
+ * `openerBtnSelector`, like the content it goes with.
  * @property defaultIsOpened - Initial open state in uncontrolled mode.
  * Ignored when `isOpened` is provided. Defaults to `false`.
  * @property isOpened - Controlled open state. When defined, the component
@@ -23,6 +34,8 @@ import type { WithClassName } from '../utils/types.js';
 export type Props = PropsWithChildren<WithClassName<{
     openerContent?: ReactNode;
     closerContent?: ReactNode;
+    openerBtnSelector?: string;
+    closerBtnSelector?: string;
     defaultIsOpened?: boolean;
     isOpened?: boolean;
     onOpenerClicked?: (isOpened: boolean) => void;
@@ -49,6 +62,9 @@ export type Props = PropsWithChildren<WithClassName<{
  * - `opener`
  * - `closer`
  * - `content`
+ * - `opener-btn` / `closer-btn` — the toggle. On the bar itself when the whole bar is
+ *   clickable, on whatever `openerBtnSelector` / `closerBtnSelector` point at otherwise.
+ *   Always present, so a stylesheet has one place to look.
  *
  * ### CSS custom properties on the root element
  * - `--lm-drawer-content-width` / `--lm-drawer-content-width-raw`
@@ -69,5 +85,13 @@ export type Props = PropsWithChildren<WithClassName<{
  * - `onOpenerClicked` and `onCloserClicked` fire in both modes — a controlled
  *   parent needs them to know a click happened at all.
  * - `onIsOpenedChanged` fires in both modes too, and never on mount.
+ * - **A command is a bar, not a button.** Both content props take whatever the consumer
+ *   puts in the row — most often a title and a toggle — and `closerContent` /
+ *   `closerBtnSelector` default to their opener counterpart, so that bar is written
+ *   once. What tells the two states apart is CSS, through the root modifiers.
+ * - **`…BtnSelector` narrows the click, it does not move it.** The handler stays on the
+ *   bar; the selector only decides which descendants carry the `-btn` class, and the
+ *   handler asks that class. So the consumer keeps full control of what the row
+ *   contains, and a stylesheet reaches the toggle without knowing the selector.
  */
 export declare const Drawer: FunctionComponent<Props>;

package/components/Drawer/index.js

@@ -1,10 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
 import { ResizeObserverComponent } from '../ResizeObserver/index.js';
 import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
 import { drawer as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
+/**
+ * Marks whatever a `…BtnSelector` points at with the command's `-btn` public class.
+ *
+ * **The class is the single source of truth**, for CSS and for the click handler alike:
+ * without it, a stylesheet would have no way to reach the toggle — the selector is a
+ * JavaScript prop and leaves no trace in the markup — and the two would answer the
+ * question « what is the toggle » by different means.
+ *
+ * The no-selector case never gets here: the class is then written straight into the
+ * bar's own `className`, because the whole bar *is* the toggle. So this hook only ever
+ * runs to narrow that down to a few descendants.
+ *
+ * **It writes into DOM that React owns.** React does not reset an attribute it has not
+ * diffed, so the class survives an ordinary re-render — but a bar whose own `className`
+ * changes would be rewritten, class included. Hence `content` among the dependencies:
+ * whatever makes the content change is also what repairs the marking, before paint.
+ *
+ * An invalid selector marks the bar itself. A consumer typo would otherwise leave no
+ * toggle at all and a drawer that no longer opens; falling back to the whole bar is the
+ * behaviour they had before writing the selector.
+ */
+function useToggleMarking(barRef, selector, btnClassName, content) {
+    useLayoutEffect(() => {
+        const bar = barRef.current;
+        if (bar === null)
+            return;
+        bar.querySelectorAll(`.${btnClassName}`).forEach(node => { node.classList.remove(btnClassName); });
+        if (selector === undefined)
+            return;
+        bar.classList.remove(btnClassName);
+        try {
+            bar.querySelectorAll(selector).forEach(node => { node.classList.add(btnClassName); });
+        }
+        catch (err) {
+            bar.classList.add(btnClassName);
+        }
+    }, [barRef, selector, btnClassName, content]);
+}
+/**
+ * Whether a click on a command should toggle the drawer.
+ *
+ * The test is « did the click land inside a marked element », never the selector itself:
+ * {@link useToggleMarking} has already resolved what the toggle is. `contains` comes on
+ * top of `closest` because a marked element could, in principle, sit outside this bar.
+ */
+function isToggleHit(event, btnClassName) {
+    const { target, currentTarget } = event;
+    if (!(target instanceof Element))
+        return false;
+    const hit = target.closest(`.${btnClassName}`);
+    return hit !== null && currentTarget.contains(hit);
+}
 /**
  * Drawer component supporting controlled and uncontrolled usage.
  *
@@ -21,6 +73,9 @@ import cssModule from './styles.module.css';
  * - `opener`
  * - `closer`
  * - `content`
+ * - `opener-btn` / `closer-btn` — the toggle. On the bar itself when the whole bar is
+ *   clickable, on whatever `openerBtnSelector` / `closerBtnSelector` point at otherwise.
+ *   Always present, so a stylesheet has one place to look.
  *
  * ### CSS custom properties on the root element
  * - `--lm-drawer-content-width` / `--lm-drawer-content-width-raw`
@@ -41,25 +96,55 @@ import cssModule from './styles.module.css';
  * - `onOpenerClicked` and `onCloserClicked` fire in both modes — a controlled
  *   parent needs them to know a click happened at all.
  * - `onIsOpenedChanged` fires in both modes too, and never on mount.
+ * - **A command is a bar, not a button.** Both content props take whatever the consumer
+ *   puts in the row — most often a title and a toggle — and `closerContent` /
+ *   `closerBtnSelector` default to their opener counterpart, so that bar is written
+ *   once. What tells the two states apart is CSS, through the root modifiers.
+ * - **`…BtnSelector` narrows the click, it does not move it.** The handler stays on the
+ *   bar; the selector only decides which descendants carry the `-btn` class, and the
+ *   handler asks that class. So the consumer keeps full control of what the row
+ *   contains, and a stylesheet reaches the toggle without knowing the selector.
  */
-export const Drawer = ({ openerContent, closerContent, defaultIsOpened = false, isOpened: isOpenedProp, onOpenerClicked, onCloserClicked, onIsOpenedChanged, onContentResized, className, children }) => {
+export const Drawer = ({ openerContent, closerContent, openerBtnSelector, closerBtnSelector, defaultIsOpened = false, isOpened: isOpenedProp, onOpenerClicked, onCloserClicked, onIsOpenedChanged, onContentResized, className, children }) => {
     // State
     const [internalIsOpened, setInternalIsOpened] = useState(defaultIsOpened);
     const [contentDimensions, setContentDimensions] = useState();
+    const openerRef = useRef(null);
+    const closerRef = useRef(null);
     const isControlled = isOpenedProp !== undefined;
     const isOpened = isOpenedProp ?? internalIsOpened;
+    // Une barre écrite une fois sert les deux états : le plus souvent un titre et une
+    // bascule, identiques ouverts et fermés, que les modifieurs de la racine suffisent à
+    // distinguer en CSS. `undefined` seul retombe — un `null` explicite reste un closer
+    // vide, et le consommateur garde le moyen de n'en rendre aucun.
+    const resolvedCloserContent = closerContent === undefined ? openerContent : closerContent;
+    const resolvedCloserBtnSelector = closerBtnSelector ?? openerBtnSelector;
+    // Class names
+    // Le `-btn` désigne la bascule, et il existe dans tous les cas : posé ici quand la
+    // barre entière en tient lieu, posé sur les descendants par {@link useToggleMarking}
+    // quand un sélecteur la rétrécit. Une feuille n'a donc qu'un endroit où regarder, et
+    // le gestionnaire de clic qu'une question à poser.
+    const c = clss(publicClassName, { cssModule });
+    const openerBtnClss = c('opener-btn');
+    const closerBtnClss = c('closer-btn');
+    useToggleMarking(openerRef, openerBtnSelector, openerBtnClss, openerContent);
+    useToggleMarking(closerRef, resolvedCloserBtnSelector, closerBtnClss, resolvedCloserContent);
     // State dispatch
     useChangeDispatch(isOpened, onIsOpenedChanged);
     useChangeDispatch(contentDimensions, dimensions => { if (dimensions !== undefined)
         onContentResized?.(dimensions); }, (a, b) => a?.width === b?.width && a?.height === b?.height);
     // User action handlers
-    const handleOpenerClick = () => {
+    const handleOpenerClick = (event) => {
+        if (!isToggleHit(event, openerBtnClss))
+            return;
         onOpenerClicked?.(isOpened);
         if (isControlled)
             return;
         setInternalIsOpened(true);
     };
-    const handleCloserClick = () => {
+    const handleCloserClick = (event) => {
+        if (!isToggleHit(event, closerBtnClss))
+            return;
         onCloserClicked?.(isOpened);
         if (isControlled)
             return;
@@ -70,14 +155,17 @@ export const Drawer = ({ openerContent, closerContent, defaultIsOpened = false,
         setContentDimensions({ width, height });
     };
     // Rendering
-    const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(null, {
         'opened': isOpened,
         'closed': !isOpened,
         measured: contentDimensions !== undefined
     }), className);
-    const openerClss = c('opener');
-    const closerClss = c('closer');
+    const openerClss = openerBtnSelector === undefined
+        ? mergeClassNames(c('opener'), openerBtnClss)
+        : c('opener');
+    const closerClss = resolvedCloserBtnSelector === undefined
+        ? mergeClassNames(c('closer'), closerBtnClss)
+        : c('closer');
     const contentClss = c('content');
     let dataAttributes = {};
     let customCssProps = {};
@@ -94,5 +182,5 @@ export const Drawer = ({ openerContent, closerContent, defaultIsOpened = false,
             '--lm-drawer-content-height-raw': `${height}`
         };
     }
-    return _jsxs("div", { className: rootClss, ...dataAttributes, style: { ...customCssProps }, children: [_jsx("div", { className: openerClss, onClick: handleOpenerClick, children: openerContent }), _jsx("div", { className: closerClss, onClick: handleCloserClick, children: closerContent }), _jsx("div", { className: contentClss, children: _jsx(ResizeObserverComponent, { onResized: handleContentResized, children: children }) })] });
+    return _jsxs("div", { className: rootClss, ...dataAttributes, style: { ...customCssProps }, children: [_jsx("div", { ref: openerRef, className: openerClss, onClick: handleOpenerClick, children: openerContent }), _jsx("div", { ref: closerRef, className: closerClss, onClick: handleCloserClick, children: resolvedCloserContent }), _jsx("div", { className: contentClss, children: _jsx(ResizeObserverComponent, { onResized: handleContentResized, children: children }) })] });
 };

package/components/Sequencer/index.d.ts

@@ -109,7 +109,19 @@ export type Props = PropsWithChildren<WithClassName<{
  *
  * ### On the root
  * `--playing`, `--at-start`, `--at-end`, `--ended`, plus `data-step`, `data-active-step`,
- * `data-total-steps` and `data-tempo`.
+ * `data-total-steps`, `data-tempo` and `data-lap`.
+ *
+ * The same five numbers are also published as custom properties —
+ * `--lm-sequencer-step`, `--lm-sequencer-active-step`, `--lm-sequencer-total-steps`,
+ * `--lm-sequencer-tempo`, `--lm-sequencer-lap` — plus `--lm-sequencer-raw-step`, the
+ * counter that keeps growing across laps (`lap × total + step`). **A data attribute
+ * selects, a custom property computes**: `attr()` cannot feed a `calc()`, so a rule that
+ * wants to turn something by a degree per step needs the property, and gets it on every
+ * descendant since custom properties inherit —
+ * `transform: rotate(calc(var(--lm-sequencer-raw-step) * 5deg))`.
+ *
+ * No `-raw` twin as `ResizeObserver` has: every one of these is a bare number, and none
+ * of them would mean anything with a unit attached.
  *
  * ### On each element child
  * The `__child` element class, then three pairs, one of each always present:

package/components/Sequencer/index.js

@@ -145,7 +145,19 @@ function stepsOf(child, elementIndex) {
  *
  * ### On the root
  * `--playing`, `--at-start`, `--at-end`, `--ended`, plus `data-step`, `data-active-step`,
- * `data-total-steps` and `data-tempo`.
+ * `data-total-steps`, `data-tempo` and `data-lap`.
+ *
+ * The same five numbers are also published as custom properties —
+ * `--lm-sequencer-step`, `--lm-sequencer-active-step`, `--lm-sequencer-total-steps`,
+ * `--lm-sequencer-tempo`, `--lm-sequencer-lap` — plus `--lm-sequencer-raw-step`, the
+ * counter that keeps growing across laps (`lap × total + step`). **A data attribute
+ * selects, a custom property computes**: `attr()` cannot feed a `calc()`, so a rule that
+ * wants to turn something by a degree per step needs the property, and gets it on every
+ * descendant since custom properties inherit —
+ * `transform: rotate(calc(var(--lm-sequencer-raw-step) * 5deg))`.
+ *
+ * No `-raw` twin as `ResizeObserver` has: every one of these is a bare number, and none
+ * of them would mean anything with a unit attached.
  *
  * ### On each element child
  * The `__child` element class, then three pairs, one of each always present:
@@ -212,6 +224,14 @@ export const Sequencer = ({ totalSteps, stepMap, step, defaultStep, play, defaul
     // absolute, so setting it to a bare position on a looping sequence would count as a
     // wrap backwards and fire `onLooped` for a move nobody made. `jump-by` is left alone
     // on purpose — stepping past the last position really is a wrap, and says so.
+    //
+    // **The lap offset is for looping sequences only, and adding it elsewhere was a bug.**
+    // A sequence that does not loop runs its counter one past the end and leaves it there,
+    // so `lap` reads `1` from that moment on — and `jump-start` landed on `1 * stepsCount`,
+    // which is precisely the ended position it was asked to leave. The symptom: a sequence
+    // with `whenVisible='jump-start'` played once, stopped on its last step, and stayed
+    // there however many times it was scrolled past. Nothing is lost by dropping the
+    // offset here: without `loop`, there is no wrap to misread and `onLooped` never fires.
     const jumpToPosition = (target) => {
         if (step !== undefined || stepsCount <= 0)
             return;
@@ -219,7 +239,7 @@ export const Sequencer = ({ totalSteps, stepMap, step, defaultStep, play, defaul
         const bounded = loop === true
             ? absoluteModulo(resolved, stepsCount)
             : clamp(resolved, 0, stepsCount - 1);
-        setInternalStep(lap * stepsCount + bounded);
+        setInternalStep(loop === true ? lap * stepsCount + bounded : bounded);
     };
     const jumpBy = (offset) => {
         if (step !== undefined || stepsCount <= 0)
@@ -297,8 +317,25 @@ export const Sequencer = ({ totalSteps, stepMap, step, defaultStep, play, defaul
         }
         return positions;
     };
+    // **The lap count is the wraps, so it is zero without `loop`.** The internal counter
+    // runs one past the end and stays there, which makes `lap` read `1` on a sequence that
+    // never wrapped at all — true of the division, false of the thing it is named after,
+    // and `onLooped` says the same by never firing without `loop`.
+    const publishedLap = loop === true ? lap : 0;
+    // Rebuilt from the published lap rather than read off `rawStep`, for that same reason:
+    // at the end of a non-looping sequence the internal counter sits one step past the last
+    // position, and a number meant to drive a transform must not overshoot the picture.
+    const rawStepProp = publishedLap * stepsCount + position;
+    const cssCustomProps = {
+        '--lm-sequencer-step': `${position}`,
+        '--lm-sequencer-active-step': `${activeStep}`,
+        '--lm-sequencer-total-steps': `${stepsCount}`,
+        '--lm-sequencer-tempo': `${tempo}`,
+        '--lm-sequencer-lap': `${publishedLap}`,
+        '--lm-sequencer-raw-step': `${rawStepProp}`
+    };
     let elementIndex = -1;
-    return _jsx("div", { ref: rootRef, className: rootClss, "data-step": position, "data-active-step": activeStep, "data-total-steps": stepsCount, "data-tempo": tempo, children: childrenArr.map((child, childPos) => {
+    return _jsx("div", { ref: rootRef, className: rootClss, "data-step": position, "data-active-step": activeStep, "data-total-steps": stepsCount, "data-tempo": tempo, "data-lap": publishedLap, style: { ...cssCustomProps }, children: childrenArr.map((child, childPos) => {
             if (!isValidElement(child))
                 return child;
             elementIndex += 1;

package/components/index.d.ts

@@ -5,8 +5,8 @@ export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'
-export * as image from './Image/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 jsonEditor from './JsonEditor/index.js'
@@ -16,8 +16,8 @@ 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 subtitles from './Subtitles/index.js'

package/components/index.js

@@ -5,8 +5,8 @@ export * as disclaimer from './Disclaimer/index.js'
 export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'
-export * as image from './Image/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 jsonEditor from './JsonEditor/index.js'
@@ -16,8 +16,8 @@ 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 subtitles from './Subtitles/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 moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as copyDir from './copy-dir/index.js'
+export * as list from './list/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 moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as copyDir from './copy-dir/index.js'
+export * as list from './list/index.js'

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

@@ -1,2 +1,2 @@
-export * as operations from './operations/index.js'
 export * as clients from './clients/index.js'
+export * as operations from './operations/index.js'

package/node/cloud-storage/index.js

@@ -1,2 +1,2 @@
-export * as operations from './operations/index.js'
 export * as clients from './clients/index.js'
+export * as operations from './operations/index.js'

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

@@ -1,11 +1,11 @@
 export * as copyDir from './copy-dir/index.js'
 export * as copyFile from './copy-file/index.js'
+export * as downloadFile from './download-file/index.js'
+export * as 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 downloadFile from './download-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 existsFile from './exists-file/index.js'
 export * as uploadFile from './upload-file/index.js'
+export * as statFile from './stat-file/index.js'

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

@@ -1,11 +1,11 @@
 export * as copyDir from './copy-dir/index.js'
 export * as copyFile from './copy-file/index.js'
+export * as downloadFile from './download-file/index.js'
+export * as 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 downloadFile from './download-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 existsFile from './exists-file/index.js'
 export * as uploadFile from './upload-file/index.js'
+export * as statFile from './stat-file/index.js'

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

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

package/node/ftps/directory/index.js

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

package/node/images/index.d.ts

@@ -1,5 +1,5 @@
 export * as create from './create/index.js'
 export * as format from './format/index.js'
-export * as metadata from './metadata/index.js'
 export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'
+export * as metadata from './metadata/index.js'

package/node/images/index.js

@@ -1,5 +1,5 @@
 export * as create from './create/index.js'
 export * as format from './format/index.js'
-export * as metadata from './metadata/index.js'
 export * as transform from './transform/index.js'
 export * as utils from './utils/index.js'
+export * as metadata from './metadata/index.js'

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

@@ -1,13 +1,13 @@
 export * as blur from './blur/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'
-export * as flop from './flop/index.js'
 export * as hue from './hue/index.js'
+export * as flop from './flop/index.js'
 export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
+export * as extend from './extend/index.js'
 export * as normalize from './normalize/index.js'
 export * as overlay from './overlay/index.js'
 export * as resize from './resize/index.js'

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

@@ -1,13 +1,13 @@
 export * as blur from './blur/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'
-export * as flop from './flop/index.js'
 export * as hue from './hue/index.js'
+export * as flop from './flop/index.js'
 export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
+export * as extend from './extend/index.js'
 export * as normalize from './normalize/index.js'
 export * as overlay from './overlay/index.js'
 export * as resize from './resize/index.js'

package/node/index.d.ts

@@ -6,6 +6,6 @@ export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'
-export * as images from './images/index.js'
-export * as sftp from './sftp/index.js'
 export * as process from './process/index.js'
+export * as sftp from './sftp/index.js'
+export * as images from './images/index.js'

package/node/index.js

@@ -6,6 +6,6 @@ export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'
-export * as images from './images/index.js'
-export * as sftp from './sftp/index.js'
 export * as process from './process/index.js'
+export * as sftp from './sftp/index.js'
+export * as images from './images/index.js'

package/package.json

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