@design-edito/tools 0.5.26 → 0.5.29

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

@@ -6,7 +6,7 @@ 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 palette from './palette/index.js'

package/agnostic/colors/index.js

@@ -6,7 +6,7 @@ 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 palette from './palette/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 isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
+export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'

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 isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
+export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'

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

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
-export * as and from './and/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 deleteproperties from './deleteproperties/index.js'
 export * as clone from './clone/index.js'
-export * as getproperties from './getproperties/index.js'
-export * as getattribute from './getattribute/index.js'
+export * as deleteproperties from './deleteproperties/index.js'
 export * as equals from './equals/index.js'
-export * as hjparse from './hjparse/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 initialize from './initialize/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 map from './map/index.js'
 export * as negate from './negate/index.js'
-export * as initialize from './initialize/index.js'
 export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
+export * as populate from './populate/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as print from './print/index.js'
-export * as populate from './populate/index.js'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
+export * as length from './length/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
-export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
+export * as removeattribute from './removeattribute/index.js'
 export * as renameproperty from './renameproperty/index.js'
-export * as select from './select/index.js'
 export * as replace from './replace/index.js'
 export * as set from './set/index.js'
-export * as setattribute from './setattribute/index.js'
-export * as sorton from './sorton/index.js'
-export * as split from './split/index.js'
+export * as select from './select/index.js'
 export * as setproperty from './setproperty/index.js'
+export * as setattribute from './setattribute/index.js'
 export * as spread from './spread/index.js'
+export * as sorton from './sorton/index.js'
 export * as toarray from './toarray/index.js'
+export * as toboolean from './toboolean/index.js'
+export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
-export * as toelement from './toelement/index.js'
 export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
-export * as tostring from './tostring/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as toref from './toref/index.js'
+export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
-export * as trim from './trim/index.js'
 export * as transformselected from './transformselected/index.js'
+export * as trim from './trim/index.js'
+export * as split from './split/index.js'

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

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
-export * as and from './and/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 deleteproperties from './deleteproperties/index.js'
 export * as clone from './clone/index.js'
-export * as getproperties from './getproperties/index.js'
-export * as getattribute from './getattribute/index.js'
+export * as deleteproperties from './deleteproperties/index.js'
 export * as equals from './equals/index.js'
-export * as hjparse from './hjparse/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 initialize from './initialize/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 map from './map/index.js'
 export * as negate from './negate/index.js'
-export * as initialize from './initialize/index.js'
 export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
+export * as populate from './populate/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as print from './print/index.js'
-export * as populate from './populate/index.js'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
+export * as length from './length/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
-export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
+export * as removeattribute from './removeattribute/index.js'
 export * as renameproperty from './renameproperty/index.js'
-export * as select from './select/index.js'
 export * as replace from './replace/index.js'
 export * as set from './set/index.js'
-export * as setattribute from './setattribute/index.js'
-export * as sorton from './sorton/index.js'
-export * as split from './split/index.js'
+export * as select from './select/index.js'
 export * as setproperty from './setproperty/index.js'
+export * as setattribute from './setattribute/index.js'
 export * as spread from './spread/index.js'
+export * as sorton from './sorton/index.js'
 export * as toarray from './toarray/index.js'
+export * as toboolean from './toboolean/index.js'
+export * as toelement from './toelement/index.js'
 export * as toggleclass from './toggleclass/index.js'
 export * as tonodelist from './tonodelist/index.js'
 export * as tonull from './tonull/index.js'
-export * as toelement from './toelement/index.js'
 export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
-export * as tostring from './tostring/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as toref from './toref/index.js'
+export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
-export * as trim from './trim/index.js'
 export * as transformselected from './transformselected/index.js'
+export * as trim from './trim/index.js'
+export * as split from './split/index.js'

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

@@ -1,13 +1,13 @@
 export * as any from './any/index.js'
+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 array from './array/index.js'
+export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
-export * as get from './get/index.js'
+export * as ref from './ref/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
+export * as element from './element/index.js'
 export * as string from './string/index.js'
-export * as ref from './ref/index.js'
 export * as text from './text/index.js'
-export * as nodelist from './nodelist/index.js'

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

@@ -1,13 +1,13 @@
 export * as any from './any/index.js'
+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 array from './array/index.js'
+export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
-export * as get from './get/index.js'
+export * as ref from './ref/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
+export * as element from './element/index.js'
 export * as string from './string/index.js'
-export * as ref from './ref/index.js'
 export * as text from './text/index.js'
-export * as nodelist from './nodelist/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 placeholders from './placeholders/index.js'
 export * as replaceInElement from './replace-in-element/index.js'
+export * as getPositionInsideParent from './get-position-inside-parent/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'

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 placeholders from './placeholders/index.js'
 export * as replaceInElement from './replace-in-element/index.js'
+export * as getPositionInsideParent from './get-position-inside-parent/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'

package/agnostic/index.d.ts

@@ -1,17 +1,17 @@
 export * as arrays from './arrays/index.js'
-export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
+export * as booleans from './booleans/index.js'
 export * as css from './css/index.js'
-export * as errors from './errors/index.js'
 export * as html from './html/index.js'
+export * as errors from './errors/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 misc from './misc/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 subtitles from './subtitles/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/index.js'
-export * as regexps from './regexps/index.js'

package/agnostic/index.js

@@ -1,17 +1,17 @@
 export * as arrays from './arrays/index.js'
-export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
+export * as booleans from './booleans/index.js'
 export * as css from './css/index.js'
-export * as errors from './errors/index.js'
 export * as html from './html/index.js'
+export * as errors from './errors/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 misc from './misc/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 subtitles from './subtitles/index.js'
 export * as time from './time/index.js'
 export * as typescript from './typescript/index.js'
-export * as regexps from './regexps/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 crawler from './crawler/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 normalizeExtension from './normalize-extension/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 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 crawler from './crawler/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 normalizeExtension from './normalize-extension/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 outcome from './outcome/index.js'

package/agnostic/numbers/index.d.ts

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

package/agnostic/numbers/index.js

@@ -2,5 +2,5 @@ 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 geometricProgressions from './geometric-progressions/index.js'
-export * as round from './round/index.js'
 export * as interpolate from './interpolate/index.js'
+export * as round from './round/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 enums from './enums/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 isRecord from './is-record/index.js'
 export * as validation from './validation/index.js'

package/agnostic/objects/index.js

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
+export * as enums from './enums/index.js'
 export * as flattenGetters from './flatten-getters/index.js'
 export * as isObject from './is-object/index.js'
-export * as enums from './enums/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 isRecord from './is-record/index.js'
 export * as validation from './validation/index.js'

package/agnostic/strings/index.d.ts

@@ -1,8 +1,8 @@
+export * as charCodes from './char-codes/index.js'
 export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
-export * as replaceAll from './replace-all/index.js'
-export * as charCodes from './char-codes/index.js'
 export * as parseTable from './parse-table/index.js'
+export * as replaceAll from './replace-all/index.js'
+export * as splitTrim from './split-trim/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'
-export * as splitTrim from './split-trim/index.js'

package/agnostic/strings/index.js

@@ -1,8 +1,8 @@
+export * as charCodes from './char-codes/index.js'
 export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
-export * as replaceAll from './replace-all/index.js'
-export * as charCodes from './char-codes/index.js'
 export * as parseTable from './parse-table/index.js'
+export * as replaceAll from './replace-all/index.js'
+export * as splitTrim from './split-trim/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'
-export * as splitTrim from './split-trim/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/Overlayer/index.d.ts

@@ -34,9 +34,10 @@ export type Props = PropsWithChildren<WithClassName<{
     overlays?: Overlay[];
 }>>;
 /**
- * Absolute positioning overlay component. Renders a base content layer and
- * stacks one or more overlays on top of it, each independently positioned via
- * percentage coordinates and a justify alignment.
+ * Positions overlays over a base layer — **by publishing where they go, not by placing
+ * them**. Each overlay carries its anchor and its shift as custom properties, and a
+ * consumer's stylesheet turns them into a position. Naked like the rest of the library:
+ * without such a sheet, the overlays render in the flow, under the base.
  *
  * ### Child elements
  * - `__base` — wrapping `<div>` that contains `children`.
@@ -44,12 +45,14 @@ export type Props = PropsWithChildren<WithClassName<{
  * are omitted).
  *
  * ### CSS custom properties on each overlay element
- * - `--PRIVATE-left` — derived from `xPercent` (e.g. `42%`). Used internally
- * to set the horizontal anchor position.
- * - `--PRIVATE-top` — derived from `yPercent` (e.g. `10%`). Used internally
- * to set the vertical anchor position.
- * - `--PRIVATE-translate-x` — derived from `justify`. Used internally to shift
- * the overlay relative to its anchor.
+ * **They are the whole of what this component does**, and they are public: it computes
+ * three values and writes them down, and a consumer's stylesheet decides what to do with
+ * them. It renders no positioning of its own — `styles.module.css` is empty, as for every
+ * component here whose JavaScript measures nothing.
+ * - `--lm-overlayer-anchor-x` — `xPercent` as a percentage (e.g. `42%`).
+ * - `--lm-overlayer-anchor-y` — `yPercent` as a percentage (e.g. `10%`).
+ * - `--lm-overlayer-translate-x` — `justify` as the shift it means: `0%` for `'left'`,
+ * `-50%` for `'center'`, `-100%` for `'right'`, `-n%` for a number.
  *
  * @param props - Component properties.
  * @see {@link Props}

package/components/Overlayer/index.js

@@ -5,9 +5,10 @@ import { mergeClassNames } from '../utils/index.js';
 import { overlayer as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**
- * Absolute positioning overlay component. Renders a base content layer and
- * stacks one or more overlays on top of it, each independently positioned via
- * percentage coordinates and a justify alignment.
+ * Positions overlays over a base layer — **by publishing where they go, not by placing
+ * them**. Each overlay carries its anchor and its shift as custom properties, and a
+ * consumer's stylesheet turns them into a position. Naked like the rest of the library:
+ * without such a sheet, the overlays render in the flow, under the base.
  *
  * ### Child elements
  * - `__base` — wrapping `<div>` that contains `children`.
@@ -15,12 +16,14 @@ import cssModule from './styles.module.css';
  * are omitted).
  *
  * ### CSS custom properties on each overlay element
- * - `--PRIVATE-left` — derived from `xPercent` (e.g. `42%`). Used internally
- * to set the horizontal anchor position.
- * - `--PRIVATE-top` — derived from `yPercent` (e.g. `10%`). Used internally
- * to set the vertical anchor position.
- * - `--PRIVATE-translate-x` — derived from `justify`. Used internally to shift
- * the overlay relative to its anchor.
+ * **They are the whole of what this component does**, and they are public: it computes
+ * three values and writes them down, and a consumer's stylesheet decides what to do with
+ * them. It renders no positioning of its own — `styles.module.css` is empty, as for every
+ * component here whose JavaScript measures nothing.
+ * - `--lm-overlayer-anchor-x` — `xPercent` as a percentage (e.g. `42%`).
+ * - `--lm-overlayer-anchor-y` — `yPercent` as a percentage (e.g. `10%`).
+ * - `--lm-overlayer-translate-x` — `justify` as the shift it means: `0%` for `'left'`,
+ * `-50%` for `'center'`, `-100%` for `'right'`, `-n%` for a number.
  *
  * @param props - Component properties.
  * @see {@link Props}
@@ -48,10 +51,15 @@ export const Overlayer = ({ overlays, children, className }) => {
                 else {
                     computedTranslateX = '-50%';
                 }
+                // Written out in full, one literal per line: they are this component's public API,
+                // a consumer greps for the exact string, and it has to exist in the source they
+                // read. Public and not `--PRIVATE-`, because they are a conversion of props an
+                // article wrote — three numbers given back as percentages — and not a mechanism
+                // this component keeps to itself.
                 const overlayCustomProps = {
-                    '--PRIVATE-left': `${xPercent}%`,
-                    '--PRIVATE-top': `${yPercent}%`,
-                    '--PRIVATE-translate-x': computedTranslateX
+                    '--lm-overlayer-anchor-x': `${xPercent}%`,
+                    '--lm-overlayer-anchor-y': `${yPercent}%`,
+                    '--lm-overlayer-translate-x': computedTranslateX
                 };
                 if (isFalsy(overlayChildren))
                     return null;

package/components/index.d.ts

@@ -7,8 +7,8 @@ export * as eventListener from './EventListener/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 intersectionObserver from './IntersectionObserver/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 listLoader from './ListLoader/index.js'
@@ -17,9 +17,9 @@ 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 sequencer from './Sequencer/index.js'
 export * as select from './Select/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
+export * as sequencer from './Sequencer/index.js'
 export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'
 export * as uiModule from './UIModule/index.js'

package/components/index.js

@@ -7,8 +7,8 @@ export * as eventListener from './EventListener/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 intersectionObserver from './IntersectionObserver/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 listLoader from './ListLoader/index.js'
@@ -17,9 +17,9 @@ 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 sequencer from './Sequencer/index.js'
 export * as select from './Select/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
+export * as sequencer from './Sequencer/index.js'
 export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'
 export * as uiModule from './UIModule/index.js'

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

@@ -1,7 +1,7 @@
-export * as copy from './copy/index.js'
 export * as download from './download/index.js'
+export * as copy from './copy/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 exists from './exists/index.js'
-export * as upload from './upload/index.js'
 export * as stat from './stat/index.js'
+export * as upload from './upload/index.js'

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

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

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

@@ -2,11 +2,11 @@ export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
+export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
-export * as getMetadata from './get-metadata/index.js'
 export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
+export * as stat from './stat/index.js'
 export * as updateMetadata from './update-metadata/index.js'
 export * as upload from './upload/index.js'
-export * as stat from './stat/index.js'

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

@@ -2,11 +2,11 @@ export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as generateSignedUrl from './generate-signed-url/index.js'
+export * as getMetadata from './get-metadata/index.js'
 export * as getPermissions from './get-permissions/index.js'
 export * as move from './move/index.js'
-export * as getMetadata from './get-metadata/index.js'
 export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'
+export * as stat from './stat/index.js'
 export * as updateMetadata from './update-metadata/index.js'
 export * as upload from './upload/index.js'
-export * as stat from './stat/index.js'

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

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

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

@@ -1,3 +1,3 @@
 export * as bucket from './bucket/index.js'
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/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 downloadFile from './download-file/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 statFile from './stat-file/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as uploadFile from './upload-file/index.js'

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

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

package/node/encryption/index.d.ts

@@ -1,2 +1,2 @@
-export * as key from './key/index.js'
 export * as aes_256Gcm from './@aes-256-gcm/index.js'
+export * as key from './key/index.js'

package/node/encryption/index.js

@@ -1,2 +1,2 @@
-export * as key from './key/index.js'
 export * as aes_256Gcm from './@aes-256-gcm/index.js'
+export * as key from './key/index.js'

package/node/files/index.d.ts

@@ -1,4 +1,4 @@
 export * as getSize from './get-size/index.js'
-export * as readWrite from './read-write/index.js'
 export * as isInDirectory from './is-in-directory/index.js'
+export * as readWrite from './read-write/index.js'
 export * as subpaths from './subpaths/index.js'

package/node/files/index.js

@@ -1,4 +1,4 @@
 export * as getSize from './get-size/index.js'
-export * as readWrite from './read-write/index.js'
 export * as isInDirectory from './is-in-directory/index.js'
+export * as readWrite from './read-write/index.js'
 export * as subpaths from './subpaths/index.js'

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

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

package/node/ftps/file/index.js

@@ -1,7 +1,7 @@
-export * as download from './download/index.js'
+export * as copy from './copy/index.js'
 export * as exists from './exists/index.js'
 export * as move from './move/index.js'
-export * as copy from './copy/index.js'
+export * as download from './download/index.js'
+export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
 export * as upload from './upload/index.js'
-export * as remove from './remove/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 format from './format/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 format from './format/index.js'
 export * as utils from './utils/index.js'

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

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

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

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

package/node/process/index.d.ts

@@ -1,3 +1,3 @@
-export * as onExit from './on-exit/index.js'
 export * as promptContinue from './prompt-continue/index.js'
+export * as onExit from './on-exit/index.js'
 export * as spawner from './spawner/index.js'

package/node/process/index.js

@@ -1,3 +1,3 @@
-export * as onExit from './on-exit/index.js'
 export * as promptContinue from './prompt-continue/index.js'
+export * as onExit from './on-exit/index.js'
 export * as spawner from './spawner/index.js'

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

@@ -1,7 +1,7 @@
 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 upload from './upload/index.js'
 export * as stat from './stat/index.js'
+export * as upload from './upload/index.js'

package/node/sftp/file/index.js

@@ -1,7 +1,7 @@
 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 upload from './upload/index.js'
 export * as stat from './stat/index.js'
+export * as upload from './upload/index.js'

package/package.json

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