@design-edito/tools 0.5.9 → 0.5.10

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 make from './make/index.js'
+export * as dedupe from './dedupe/index.js'
 export * as shuffle from './shuffle/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 make from './make/index.js'
+export * as dedupe from './dedupe/index.js'
 export * as shuffle from './shuffle/index.js'

package/agnostic/colors/index.d.ts

@@ -1,12 +1,12 @@
-export * as channels from './channels/index.js'
 export * as contrast from './contrast/index.js'
 export * as convert from './convert/index.js'
+export * as channels from './channels/index.js'
 export * as distance from './distance/index.js'
-export * as grayscale from './grayscale/index.js'
 export * as invert from './invert/index.js'
 export * as lerp from './lerp/index.js'
 export * as luminance from './luminance/index.js'
-export * as palette from './palette/index.js'
 export * as rotate from './rotate/index.js'
+export * as palette from './palette/index.js'
 export * as tidy from './tidy/index.js'
 export * as typechecks from './typechecks/index.js'
+export * as grayscale from './grayscale/index.js'

package/agnostic/colors/index.js

@@ -1,12 +1,12 @@
-export * as channels from './channels/index.js'
 export * as contrast from './contrast/index.js'
 export * as convert from './convert/index.js'
+export * as channels from './channels/index.js'
 export * as distance from './distance/index.js'
-export * as grayscale from './grayscale/index.js'
 export * as invert from './invert/index.js'
 export * as lerp from './lerp/index.js'
 export * as luminance from './luminance/index.js'
-export * as palette from './palette/index.js'
 export * as rotate from './rotate/index.js'
+export * as palette from './palette/index.js'
 export * as tidy from './tidy/index.js'
 export * as typechecks from './typechecks/index.js'
+export * as grayscale from './grayscale/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 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 addclass from './addclass/index.js'
+export * as at from './at/index.js'
 export * as clone from './clone/index.js'
-export * as getattribute from './getattribute/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
+export * as getattribute from './getattribute/index.js'
+export * as equals from './equals/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
-export * as equals from './equals/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 hjparse from './hjparse/index.js'
-export * as map from './map/index.js'
 export * as length from './length/index.js'
+export * as map from './map/index.js'
+export * as join from './join/index.js'
+export * as negate from './negate/index.js'
+export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
 export * as populate from './populate/index.js'
 export * as print from './print/index.js'
-export * as negate from './negate/index.js'
 export * as pusheach from './pusheach/index.js'
 export * as recordtoarray from './recordtoarray/index.js'
-export * as removeattribute from './removeattribute/index.js'
-export * as notrailing from './notrailing/index.js'
-export * as removeclass from './removeclass/index.js'
 export * as push from './push/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 replace from './replace/index.js'
 export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
-export * as replace from './replace/index.js'
 export * as sorton from './sorton/index.js'
 export * as split from './split/index.js'
-export * as renameproperty from './renameproperty/index.js'
-export * as spread from './spread/index.js'
 export * as toarray from './toarray/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
+export * as toboolean from './toboolean/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 spread from './spread/index.js'
 export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
-export * as toref from './toref/index.js'
-export * as tonull from './tonull/index.js'
 export * as transformselected from './transformselected/index.js'
 export * as trim from './trim/index.js'

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

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

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

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

package/agnostic/html/index.d.ts

@@ -5,6 +5,6 @@ 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 stringToNodes from './string-to-nodes/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

@@ -5,6 +5,6 @@ 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 stringToNodes from './string-to-nodes/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,14 +1,14 @@
 export * as arrays from './arrays/index.js'
-export * as colors from './colors/index.js'
 export * as booleans from './booleans/index.js'
+export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'
 export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'
-export * as optim from './optim/index.js'
 export * as random from './random/index.js'
+export * as optim from './optim/index.js'
 export * as regexps from './regexps/index.js'
 export * as sanitization from './sanitization/index.js'
 export * as strings from './strings/index.js'

package/agnostic/index.js

@@ -1,14 +1,14 @@
 export * as arrays from './arrays/index.js'
-export * as colors from './colors/index.js'
 export * as booleans from './booleans/index.js'
+export * as colors from './colors/index.js'
 export * as css from './css/index.js'
 export * as errors from './errors/index.js'
 export * as html from './html/index.js'
 export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'
-export * as optim from './optim/index.js'
 export * as random from './random/index.js'
+export * as optim from './optim/index.js'
 export * as regexps from './regexps/index.js'
 export * as sanitization from './sanitization/index.js'
 export * as strings from './strings/index.js'

package/agnostic/misc/index.d.ts

@@ -1,10 +1,10 @@
-export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
 export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
 export * as dataSize from './data-size/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
+export * as assert from './assert/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'

package/agnostic/misc/index.js

@@ -1,10 +1,10 @@
-export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
 export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
 export * as dataSize from './data-size/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
+export * as assert from './assert/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'

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

@@ -1,3 +1,3 @@
 export * as logger from './logger/index.js'
-export * as styles from './styles/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 logger from './logger/index.js'
-export * as styles from './styles/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 clamp from './clamp/index.js'
-export * as geometricProgressions from './geometric-progressions/index.js'
 export * as interpolate from './interpolate/index.js'
 export * as round from './round/index.js'
+export * as geometricProgressions from './geometric-progressions/index.js'

package/agnostic/numbers/index.js

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

package/agnostic/objects/index.d.ts

@@ -5,5 +5,5 @@ export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as recordMap from './record-map/index.js'
-export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'
+export * as sortKeys from './sort-keys/index.js'

package/agnostic/objects/index.js

@@ -5,5 +5,5 @@ export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as recordMap from './record-map/index.js'
-export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'
+export * as sortKeys from './sort-keys/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 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 parseTable from './parse-table/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 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 parseTable from './parse-table/index.js'

package/agnostic/subtitles/index.d.ts

@@ -1,2 +1,2 @@
-export * as parseSrt from './parse-srt/index.js'
 export * as srtTimecodeToMs from './srt-timecode-to-ms/index.js'
+export * as parseSrt from './parse-srt/index.js'

package/agnostic/subtitles/index.js

@@ -1,2 +1,2 @@
-export * as parseSrt from './parse-srt/index.js'
 export * as srtTimecodeToMs from './srt-timecode-to-ms/index.js'
+export * as parseSrt from './parse-srt/index.js'

package/agnostic/time/index.d.ts

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

package/agnostic/time/index.js

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

package/components/Lightbox/index.d.ts

@@ -0,0 +1,106 @@
+import { type FunctionComponent, type PropsWithChildren, type ReactNode } from 'react';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Props for the {@link Lightbox} component.
+ *
+ * @property group - The group(s) this lightbox belongs to. Members of a group share
+ * one lightbox and are navigable from it, in document order. The **first** group is the
+ * 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.
+ * @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 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.
+ * Ignored when `isOn` is provided. Defaults to `false`.
+ * @property exitOnEscape - When `true`, pressing `Escape` closes the lightbox.
+ * @property navOnArrowKeys - When `true`, the left and right arrow keys move through
+ * 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 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.
+ * @property onPrevButtonClicked - Same, for the previous button.
+ * @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 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
+ * is open (only while `navOnArrowKeys` is `true`), before the lightbox reacts.
+ * @property onNextArrowPressed - Same, for the right arrow.
+ * @property onIsOnChanged - Called after this member's state changed, with the new
+ * value.
+ * @property className - Optional additional class name(s) applied to the root element.
+ * @property children - The content, rendered in place while closed and moved onto the
+ * inside the lightbox while open.
+ */
+export type Props = PropsWithChildren<WithClassName<{
+    group?: string | string[];
+    closeBtnContent?: ReactNode;
+    openBtnContent?: ReactNode;
+    prevBtnContent?: ReactNode;
+    nextBtnContent?: ReactNode;
+    isOn?: boolean;
+    defaultIsOn?: boolean;
+    exitOnEscape?: boolean;
+    exitOnBgClick?: boolean;
+    navOnArrowKeys?: boolean;
+    onOpenButtonClicked?: (isOn: boolean) => void;
+    onCloseButtonClicked?: (isOn: boolean) => void;
+    onPrevButtonClicked?: (isOn: boolean) => void;
+    onNextButtonClicked?: (isOn: boolean) => void;
+    onBackgroundClicked?: (isOn: boolean) => void;
+    onEscapePressed?: (isOn: boolean) => void;
+    onPrevArrowPressed?: (isOn: boolean) => void;
+    onNextArrowPressed?: (isOn: boolean) => void;
+    onIsOnChanged?: (isOn: boolean) => void;
+}>>;
+/**
+ * Lightbox component. Holds content in place until opened, then moves it into an
+ * overlay covering the page.
+ *
+ * ### 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.
+ *
+ * ### CSS elements
+ * - `placeholder` - holds the content's last measured size while it is away.
+ * - `backdrop` - the overlay, portalled to `document.body`, mounted only while open.
+ * - `content` - wraps the moved content inside the lightbox.
+ * - `open-btn`, `close-btn`, `prev-btn`, `next-btn`
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A root `<div>` holding the content or its placeholder, plus, while open, a
+ * lightbox portalled to the end of `document.body`.
+ *
+ * @remarks
+ * - **[WIP]** Moving a `<video>` keeps it playing on desktop browsers; iOS has been
+ *   known to pause on a DOM move. Not worth guarding against for now.
+ * - **The content is moved, not copied.** A portal relocates the DOM node without
+ *   changing the element's place in the React tree, so the instance is never
+ *   unmounted: a playing video keeps playing, at its timecode, and lands back where it
+ *   was on close. Rendering `children` twice would mount a second, fresh instance and
+ *   leave the first one running behind the lightbox.
+ * - **The lightbox is portalled to `document.body`.** A `position: fixed` overlay left in
+ *   the article would be trapped by the first ancestor carrying a `transform`, a
+ *   `filter` or a `contain`, which becomes its containing block.
+ * - **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 the
+ *   content leaves.
+ * - **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.
+ * - The lightbox is rendered by whichever member is on it, so navigating hands it over.
+ *   None of the content is remounted in the process.
+ * - This component ships **no appearance**: covering the page, the backdrop and the
+ *   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 declare const Lightbox: FunctionComponent<Props>;