@design-edito/tools 0.5.11 → 0.5.13

package/agnostic/colors/index.d.ts

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

package/agnostic/colors/index.js

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

package/agnostic/css/index.d.ts

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

package/agnostic/css/index.js

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

package/agnostic/errors/index.d.ts

@@ -1,2 +1,2 @@
-export * as unknownToString from './unknown-to-string/index.js'
 export * as register from './register/index.js'
+export * as unknownToString from './unknown-to-string/index.js'

package/agnostic/errors/index.js

@@ -1,2 +1,2 @@
-export * as unknownToString from './unknown-to-string/index.js'
 export * as register from './register/index.js'
+export * as unknownToString from './unknown-to-string/index.js'

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

@@ -1,51 +1,51 @@
-export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
+export * as add from './add/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 clone from './clone/index.js'
-export * as call from './call/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
+export * as call from './call/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 getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
-export * as if from './if/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 getproperties from './getproperties/index.js'
 export * as length from './length/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 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'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
+export * as notrailing from './notrailing/index.js'
 export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
-export * as replace from './replace/index.js'
 export * as renameproperty from './renameproperty/index.js'
-export * as set from './set/index.js'
-export * as setattribute from './setattribute/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 setproperty from './setproperty/index.js'
-export * as sorton from './sorton/index.js'
+export * as setattribute from './setattribute/index.js'
 export * as split from './split/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 spread from './spread/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 tonumber from './tonumber/index.js'
 export * as tonull from './tonull/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 torecord from './torecord/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,51 +1,51 @@
-export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
+export * as add from './add/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 clone from './clone/index.js'
-export * as call from './call/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
+export * as call from './call/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 getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
-export * as if from './if/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 getproperties from './getproperties/index.js'
 export * as length from './length/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 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'
 export * as push from './push/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
+export * as notrailing from './notrailing/index.js'
 export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
-export * as replace from './replace/index.js'
 export * as renameproperty from './renameproperty/index.js'
-export * as set from './set/index.js'
-export * as setattribute from './setattribute/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 setproperty from './setproperty/index.js'
-export * as sorton from './sorton/index.js'
+export * as setattribute from './setattribute/index.js'
 export * as split from './split/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 spread from './spread/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 tonumber from './tonumber/index.js'
 export * as tonull from './tonull/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 torecord from './torecord/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/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 boolean from './boolean/index.js'
 export * as get from './get/index.js'
 export * as guess from './guess/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
+export * as number from './number/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
-export * as number from './number/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

@@ -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 boolean from './boolean/index.js'
 export * as get from './get/index.js'
 export * as guess from './guess/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
+export * as number from './number/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
-export * as number from './number/index.js'
 export * as string from './string/index.js'
 export * as text from './text/index.js'

package/agnostic/html/index.d.ts

@@ -3,8 +3,8 @@ export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
+export * as placeholders from './placeholders/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
+export * as replaceInElement from './replace-in-element/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
-export * as placeholders from './placeholders/index.js'

package/agnostic/html/index.js

@@ -3,8 +3,8 @@ export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
 export * as hyperJson from './hyper-json/index.js'
 export * as insertNode from './insert-node/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
+export * as placeholders from './placeholders/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
+export * as replaceInElement from './replace-in-element/index.js'
 export * as stringToNodes from './string-to-nodes/index.js'
 export * as watchSelection from './watch-selection/index.js'
-export * as placeholders from './placeholders/index.js'

package/agnostic/index.d.ts

@@ -1,5 +1,5 @@
-export * as arrays from './arrays/index.js'
 export * as booleans from './booleans/index.js'
+export * as arrays from './arrays/index.js'
 export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
@@ -8,10 +8,10 @@ export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/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 random from './random/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 subtitles from './subtitles/index.js'

package/agnostic/index.js

@@ -1,5 +1,5 @@
-export * as arrays from './arrays/index.js'
 export * as booleans from './booleans/index.js'
+export * as arrays from './arrays/index.js'
 export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
@@ -8,10 +8,10 @@ export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/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 random from './random/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 subtitles from './subtitles/index.js'

package/agnostic/misc/index.d.ts

@@ -1,12 +1,12 @@
-export * as cast from './cast/index.js'
 export * as assert from './assert/index.js'
+export * as cast from './cast/index.js'
 export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
-export * as isConstructorFunction from './is-constructor-function/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 outcome from './outcome/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 cast from './cast/index.js'
 export * as assert from './assert/index.js'
+export * as cast from './cast/index.js'
 export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
-export * as isConstructorFunction from './is-constructor-function/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 outcome from './outcome/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 makeTextBlock from './make-text-block/index.js'
 export * as logger from './logger/index.js'
+export * as makeTextBlock from './make-text-block/index.js'
 export * as styles from './styles/index.js'

package/agnostic/misc/logs/index.js

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

package/agnostic/numbers/index.d.ts

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

package/agnostic/numbers/index.js

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

package/agnostic/objects/index.d.ts

@@ -1,8 +1,8 @@
 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 isObject from './is-object/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as recordMap from './record-map/index.js'

package/agnostic/objects/index.js

@@ -1,8 +1,8 @@
 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 isObject from './is-object/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as recordMap from './record-map/index.js'

package/agnostic/optim/index.d.ts

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

package/agnostic/optim/index.js

@@ -1,2 +1,2 @@
-export * as throttleDebounce from './throttle-debounce/index.js'
 export * as memoize from './memoize/index.js'
+export * as throttleDebounce from './throttle-debounce/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 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'
+export * as replaceAll from './replace-all/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 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'
+export * as replaceAll from './replace-all/index.js'

package/components/Lightbox/index.d.ts

@@ -8,11 +8,12 @@ import type { WithClassName } from '../utils/types.js';
  * one a click on this member opens; the others only matter when another member opens
  * them. Declaring none makes it a group of its own.
  * @property closeBtnContent - Content rendered inside the close button.
- * @property openBtnContent - Content rendered inside the open button. No content, no
- * button: the lightbox is then opened by whatever the consumer wires up.
- * @property prevBtnContent - Content rendered inside the previous button, shown only
- * when the open group holds more than one member.
- * @property nextBtnContent - Content rendered inside the next button, same condition.
+ * @property openBtnContent - Content rendered inside the open button. Left empty, the
+ * button is still rendered: a stylesheet hides an empty control with `:empty`, and the
+ * lightbox is then opened by whatever the consumer wires up.
+ * @property prevBtnContent - Content rendered inside the previous button. The button is
+ * always rendered; the root's `navigable` modifier says whether it has anywhere to go.
+ * @property nextBtnContent - Content rendered inside the next button, same.
  * @property isOn - Controlled state. When defined, this member is driven by the
  * parent and the shared registry never opens or closes it.
  * @property defaultIsOn - Whether the lightbox starts open, in uncontrolled mode.
@@ -22,6 +23,9 @@ import type { WithClassName } from '../utils/types.js';
  * the open group. Only has an effect on a group of more than one member.
  * @property exitOnBgClick - When `true`, clicking the backdrop, and not its
  * content, closes it.
+ * @property openOnClick - When `true`, clicking the content opens the lightbox. An
+ * affordance layered on the open button, never a replacement for it: a click is
+ * mouse and touch only, and the button is what a keyboard reaches.
  * @property onOpenButtonClicked - Called when the open button is clicked, before the
  * lightbox reacts, with the state as it was.
  * @property onCloseButtonClicked - Same, for the close button.
@@ -29,6 +33,8 @@ import type { WithClassName } from '../utils/types.js';
  * @property onNextButtonClicked - Same, for the next button.
  * @property onBackgroundClicked - Called when the backdrop is clicked (only
  * while `exitOnBgClick` is `true`), before the lightbox reacts.
+ * @property onContentClicked - Called when the content is clicked while closed (only
+ * while `openOnClick` is `true`), before the lightbox reacts.
  * @property onEscapePressed - Called when `Escape` is pressed while the lightbox is open
  * (only while `exitOnEscape` is `true`), before the lightbox reacts.
  * @property onPrevArrowPressed - Called when the left arrow is pressed while the lightbox
@@ -50,12 +56,14 @@ export type Props = PropsWithChildren<WithClassName<{
     defaultIsOn?: boolean;
     exitOnEscape?: boolean;
     exitOnBgClick?: boolean;
+    openOnClick?: boolean;
     navOnArrowKeys?: boolean;
     onOpenButtonClicked?: (isOn: boolean) => void;
     onCloseButtonClicked?: (isOn: boolean) => void;
     onPrevButtonClicked?: (isOn: boolean) => void;
     onNextButtonClicked?: (isOn: boolean) => void;
     onBackgroundClicked?: (isOn: boolean) => void;
+    onContentClicked?: (isOn: boolean) => void;
     onEscapePressed?: (isOn: boolean) => void;
     onPrevArrowPressed?: (isOn: boolean) => void;
     onNextArrowPressed?: (isOn: boolean) => void;
@@ -68,7 +76,11 @@ export type Props = PropsWithChildren<WithClassName<{
  * ### CSS modifiers
  * - `on` - this member is open.
  * - `off` - it is not.
- * - `grouped` - it belongs to a group it did not invent, so navigation is possible.
+ * - `grouped` - it belongs to a group it did not invent.
+ * - `navigable` - that group holds someone else, so the previous and next controls
+ *   have somewhere to go.
+ * - `open-on-click` - the content itself opens the lightbox, so a stylesheet can say
+ *   so with a cursor. Named after the prop it mirrors, as modifiers are.
  *
  * ### CSS elements
  * - `placeholder` - holds the content's last measured size while it is out of flow.
@@ -93,9 +105,13 @@ export type Props = PropsWithChildren<WithClassName<{
  * - **A placeholder keeps the layout still.** Its size is the content's last measured
  *   one, read while closed; without it the article would collapse around the hole left
  *   once the backdrop goes out of flow.
- * - **[WIP]** A `position: fixed` backdrop is trapped by the first ancestor carrying a
- *   `transform`, a `filter` or a `contain`, which becomes its containing block. Inside
- *   a slot, that ancestor is the consumer's own to avoid.
+ * - **A `position: fixed` backdrop is contained by the first ancestor carrying a
+ *   `transform`, a `filter` or a `contain`**, which becomes its containing block. That
+ *   is wanted, not suffered: where several articles are preloaded side by side and
+ *   slid through by a transformed container, containment is what keeps an offscreen
+ *   article's lightbox offscreen. The top layer - `<dialog>` with `showModal()`, or
+ *   the popover API - would do the opposite, being document-wide and above
+ *   everything, and paint over whichever article is being read.
  * - **Groups are held outside React**, in `./store.ts`: a consumer may render each
  *   component in a root of its own, in which case members of a group share no tree
  *   and a context could not reach from one to the other.

package/components/Lightbox/index.js

@@ -1,7 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { isNotNullish } from '../../agnostic/misc/is-nullish/index.js';
 import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
 import { lightbox as publicClassName } from '../public-classnames.js';
 import { close as closeLightbox, getState, membersOf, open as openLightbox, register, soloGroupOf, step, subscribe, unregister } from './store.js';
@@ -13,7 +12,11 @@ import cssModule from './styles.module.css';
  * ### CSS modifiers
  * - `on` - this member is open.
  * - `off` - it is not.
- * - `grouped` - it belongs to a group it did not invent, so navigation is possible.
+ * - `grouped` - it belongs to a group it did not invent.
+ * - `navigable` - that group holds someone else, so the previous and next controls
+ *   have somewhere to go.
+ * - `open-on-click` - the content itself opens the lightbox, so a stylesheet can say
+ *   so with a cursor. Named after the prop it mirrors, as modifiers are.
  *
  * ### CSS elements
  * - `placeholder` - holds the content's last measured size while it is out of flow.
@@ -38,9 +41,13 @@ import cssModule from './styles.module.css';
  * - **A placeholder keeps the layout still.** Its size is the content's last measured
  *   one, read while closed; without it the article would collapse around the hole left
  *   once the backdrop goes out of flow.
- * - **[WIP]** A `position: fixed` backdrop is trapped by the first ancestor carrying a
- *   `transform`, a `filter` or a `contain`, which becomes its containing block. Inside
- *   a slot, that ancestor is the consumer's own to avoid.
+ * - **A `position: fixed` backdrop is contained by the first ancestor carrying a
+ *   `transform`, a `filter` or a `contain`**, which becomes its containing block. That
+ *   is wanted, not suffered: where several articles are preloaded side by side and
+ *   slid through by a transformed container, containment is what keeps an offscreen
+ *   article's lightbox offscreen. The top layer - `<dialog>` with `showModal()`, or
+ *   the popover API - would do the opposite, being document-wide and above
+ *   everything, and paint over whichever article is being read.
  * - **Groups are held outside React**, in `./store.ts`: a consumer may render each
  *   component in a root of its own, in which case members of a group share no tree
  *   and a context could not reach from one to the other.
@@ -51,7 +58,7 @@ import cssModule from './styles.module.css';
  *   buttons are the consumer stylesheet's business. Without one, the content is moved
  *   to the end of the document and nothing looks like a lightbox.
  */
-export const Lightbox = ({ group, closeBtnContent, openBtnContent, prevBtnContent, nextBtnContent, isOn: isOnProp, defaultIsOn = false, exitOnEscape, exitOnBgClick, navOnArrowKeys, onOpenButtonClicked, onCloseButtonClicked, onPrevButtonClicked, onNextButtonClicked, onBackgroundClicked, onEscapePressed, onPrevArrowPressed, onNextArrowPressed, onIsOnChanged, children, className }) => {
+export const Lightbox = ({ group, closeBtnContent, openBtnContent, prevBtnContent, nextBtnContent, isOn: isOnProp, defaultIsOn = false, exitOnEscape, exitOnBgClick, openOnClick, navOnArrowKeys, onOpenButtonClicked, onCloseButtonClicked, onPrevButtonClicked, onNextButtonClicked, onBackgroundClicked, onContentClicked, onEscapePressed, onPrevArrowPressed, onNextArrowPressed, onIsOnChanged, children, className }) => {
     // State & refs
     const id = useId();
     const rootRef = useRef(null);
@@ -124,6 +131,12 @@ export const Lightbox = ({ group, closeBtnContent, openBtnContent, prevBtnConten
         onNextButtonClicked?.(isOn);
         step(1);
     };
+    const handleContentClick = () => {
+        if (openOnClick !== true || isOn)
+            return;
+        onContentClicked?.(isOn);
+        requestOpen();
+    };
     const handleBackdropClick = e => {
         if (exitOnBgClick !== true)
             return;
@@ -181,13 +194,16 @@ export const Lightbox = ({ group, closeBtnContent, openBtnContent, prevBtnConten
     const rootClss = mergeClassNames(c(null, {
         on: isOn,
         off: !isOn,
-        grouped: isGrouped
+        grouped: isGrouped,
+        navigable: siblingsCount > 1,
+        'open-on-click': openOnClick === true && !isOn
     }), className);
     const size = sizeRef.current;
-    // Every child keeps its position in the tree whatever the state: the placeholder and
-    // the backdrop are always rendered, and the buttons come after the content rather
-    // than around it. React reconciles by position, so moving `children` from one branch
-    // to another would unmount and remount them - the very thing this component exists
-    // to avoid.
-    return _jsxs("div", { className: rootClss, ref: rootRef, children: [_jsx("div", { className: c('placeholder'), style: isOn && size !== null ? { width: size.width, height: size.height } : undefined }), _jsxs("div", { className: c('backdrop'), onClick: handleBackdropClick, ref: backdropRef, children: [_jsx("div", { className: c('content'), children: children }), isOn && _jsxs(_Fragment, { children: [_jsx("button", { type: 'button', className: c('close-btn'), onClick: handleCloseButtonClick, children: closeBtnContent }), siblingsCount > 1 && _jsxs(_Fragment, { children: [_jsx("button", { type: 'button', className: c('prev-btn'), onClick: handlePrevButtonClick, children: prevBtnContent }), _jsx("button", { type: 'button', className: c('next-btn'), onClick: handleNextButtonClick, children: nextBtnContent })] })] })] }), !isOn && isNotNullish(openBtnContent) && _jsx("button", { type: 'button', className: c('open-btn'), onClick: handleOpenButtonClick, children: openBtnContent })] });
+    // Nothing here is conditional. React reconciles by position, so a branch that
+    // appears and disappears shifts what follows it - and moving `children` between two
+    // positions would unmount and remount them, the very thing this component exists to
+    // avoid. Which control is reachable, and when, is the stylesheet's business: the
+    // root carries a modifier per state, and `:empty` tells a control with no content
+    // from one that has some.
+    return _jsxs("div", { className: rootClss, ref: rootRef, children: [_jsx("div", { className: c('placeholder'), style: isOn && size !== null ? { width: size.width, height: size.height } : undefined }), _jsxs("div", { className: c('backdrop'), onClick: handleBackdropClick, ref: backdropRef, children: [_jsx("div", { className: c('content'), onClick: handleContentClick, children: children }), _jsx("button", { type: 'button', className: c('close-btn'), onClick: handleCloseButtonClick, children: closeBtnContent }), _jsx("button", { type: 'button', className: c('prev-btn'), onClick: handlePrevButtonClick, children: prevBtnContent }), _jsx("button", { type: 'button', className: c('next-btn'), onClick: handleNextButtonClick, children: nextBtnContent })] }), _jsx("button", { type: 'button', className: c('open-btn'), onClick: handleOpenButtonClick, children: openBtnContent })] });
 };

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,8 +2,8 @@ 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 getMetadata from './get-metadata/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'

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

@@ -2,8 +2,8 @@ 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 getMetadata from './get-metadata/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as revokeSignedUrls from './revoke-signed-urls/index.js'

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 removeDir from './remove-dir/index.js'
 export * as moveDir from './move-dir/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 removeDir from './remove-dir/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as removeDir from './remove-dir/index.js'

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

@@ -7,8 +7,8 @@ export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
 export * as hue from './hue/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 lighten from './lighten/index.js'
 export * as overlay from './overlay/index.js'
 export * as resize from './resize/index.js'
 export * as rotate from './rotate/index.js'

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

@@ -7,8 +7,8 @@ export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
 export * as hue from './hue/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 lighten from './lighten/index.js'
 export * as overlay from './overlay/index.js'
 export * as resize from './resize/index.js'
 export * as rotate from './rotate/index.js'

package/node/index.d.ts

@@ -1,11 +1,11 @@
 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 encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'
-export * as cloudStorage from './cloud-storage/index.js'
 export * as images from './images/index.js'
 export * as process from './process/index.js'
 export * as sftp from './sftp/index.js'

package/node/index.js

@@ -1,11 +1,11 @@
 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 encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'
-export * as cloudStorage from './cloud-storage/index.js'
 export * as images from './images/index.js'
 export * as process from './process/index.js'
 export * as sftp from './sftp/index.js'

package/node/process/spawner/index.d.ts

@@ -5,9 +5,33 @@ type Output = {
     stderr: string;
     err: unknown;
 };
+/**
+ * How much a spawned command says about itself.
+ *
+ * Three levels rather than a boolean, because three are genuinely useful in a
+ * deployment script:
+ *
+ * - `'full'` — the label, the echoed command line, and the child's own output as it
+ *   streams. The default, and what to use for anything whose output is news: a build
+ *   log, an rsync diff.
+ * - `'command'` — the label and the echoed command line, without the child's output.
+ *   **The level for a probe** — `gcloud projects list`, `npm config get registry` —
+ *   whose `stdout` is parsed rather than read, and whose two hundred lines of table
+ *   would bury the narration around it. The echo stays: it is the audit trail, and
+ *   the last thing worth losing.
+ * - `'silent'` — nothing at all. Only for a call already narrated by whatever step
+ *   contains it.
+ *
+ * Nothing here is read from the environment on purpose. A deployment that can be run
+ * quietly is a deployment whose log you do not have when it breaks, so the choice is
+ * made per call, in the source, by whoever knows what that call prints.
+ */
+export type Verbosity = 'full' | 'command' | 'silent';
 type ThisOptions = {
     argsPrintFormat?: (args: string[]) => string[];
     throwOnError?: boolean;
+    /** How much to print. Defaults to `'full'`. See {@link Verbosity}. */
+    verbosity?: Verbosity;
 };
 /**
  * Options for the asynchronous `spawner` function.
@@ -18,6 +42,7 @@ type ThisOptions = {
  *   before they are printed to the console (does not affect execution).
  * - `throwOnError`: If `true`, the function throws when the spawned process exits
  *   with a non-zero status instead of returning a failure outcome.
+ * - `verbosity`: How much to print — see {@link Verbosity}. Defaults to `'full'`.
  */
 export type Options = SpawnOptions & ThisOptions;
 /**
@@ -29,6 +54,7 @@ export type Options = SpawnOptions & ThisOptions;
  *   before they are printed to the console (does not affect execution).
  * - `throwOnError`: If `true`, the function throws when the spawned process exits
  *   with a non-zero status instead of returning a failure outcome.
+ * - `verbosity`: How much to print — see {@link Verbosity}. Defaults to `'full'`.
  */
 export type SyncOptions = SpawnSyncOptions & ThisOptions;
 /**

package/node/process/spawner/index.js

@@ -22,13 +22,17 @@ import { unknownToString } from '../../../agnostic/errors/unknown-to-string/inde
  *   - failure: `{ stdout, stderr, err }` when the command exits with a non-zero code
  */
 export async function spawner(label, command, args, options) {
+    const verbosity = options?.verbosity ?? 'full';
+    const printsCommand = verbosity !== 'silent';
+    const printsOutput = verbosity === 'full';
     return await new Promise((resolve, reject) => {
-        if (label !== null)
+        if (label !== null && printsCommand)
             console.log(`\n${styles.info(label)}\n`);
         const printableArgs = options?.argsPrintFormat !== undefined
             ? options.argsPrintFormat(args)
             : args;
-        console.log(styles.light(`> ${command} ${printableArgs.join(' ')}\n`));
+        if (printsCommand)
+            console.log(styles.light(`> ${command} ${printableArgs.join(' ')}\n`));
         const prcss = spawn(command, args, { stdio: 'pipe', ...options });
         let stdout = '';
         let stderr = '';
@@ -36,13 +40,17 @@ export async function spawner(label, command, args, options) {
         prcss.stdout?.on('data', data => {
             const strData = unknownToString(data);
             stdout += strData;
-            console.log(styles.light(strData.replace(ansiRegex(), '').trim()));
+            if (printsOutput)
+                console.log(styles.light(strData.replace(ansiRegex(), '').trim()));
         });
         prcss.stderr?.on('data', data => {
             const strData = unknownToString(data);
             stderr += strData;
-            console.log(styles.warning(strData.replace(ansiRegex(), '').trim()));
+            if (printsOutput)
+                console.log(styles.warning(strData.replace(ansiRegex(), '').trim()));
         });
+        // An error is always printed, whatever the verbosity: a command that could not be
+        // spawned at all is never the noise the caller asked to be spared.
         prcss.on('error', e => {
             err = e;
             console.log(styles.error(unknownToString(err).replace(ansiRegex(), '').trim()));
@@ -75,27 +83,32 @@ export async function spawner(label, command, args, options) {
  * @throws Error if `throwOnError` is `true` and the process exits with a non-zero status
  */
 export function spawnerSync(label, command, args, options) {
-    if (label !== null)
+    const verbosity = options?.verbosity ?? 'full';
+    const printsCommand = verbosity !== 'silent';
+    const printsOutput = verbosity === 'full';
+    if (label !== null && printsCommand)
         console.log(`\n${styles.info(label)}\n}`);
     const printableArgs = options?.argsPrintFormat !== undefined
         ? options.argsPrintFormat(args)
         : args;
-    console.log(styles.light(`> ${command} ${printableArgs.join(' ')}\n`));
+    if (printsCommand)
+        console.log(styles.light(`> ${command} ${printableArgs.join(' ')}\n`));
     const result = spawnSync(command, args, { stdio: 'pipe', encoding: 'utf8', ...options });
     const stderr = result.stderr.toString().trim();
     const stdout = result.stdout.toString().trim();
     const err = result.error;
+    // Always printed, whatever the verbosity — see the async twin.
     if (err !== undefined) {
         console.log(styles.light(chalk.italic('err:\n')));
         console.log(styles.error(unknownToString(err).replace(ansiRegex(), '')));
         console.log('');
     }
-    if (stderr !== '') {
+    if (stderr !== '' && printsOutput) {
         console.log(styles.light(chalk.italic('stderr:\n')));
         console.log(styles.warning(stderr.replace(ansiRegex(), '')));
         console.log('');
     }
-    if (stdout !== '') {
+    if (stdout !== '' && printsOutput) {
         console.log(styles.light(chalk.italic('stdout:\n')));
         console.log(styles.light(stdout.replace(ansiRegex(), '')));
         console.log('');

package/node/sftp/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/sftp/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/package.json

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