@design-edito/tools 0.5.17 → 0.5.19

package/agnostic/colors/index.d.ts

@@ -3,10 +3,10 @@ export * as contrast from './contrast/index.js'
 export * as convert from './convert/index.js'
 export * as distance from './distance/index.js'
 export * as grayscale from './grayscale/index.js'
-export * as lerp from './lerp/index.js'
 export * as 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 luminance from './luminance/index.js'

package/agnostic/colors/index.js

@@ -3,10 +3,10 @@ export * as contrast from './contrast/index.js'
 export * as convert from './convert/index.js'
 export * as distance from './distance/index.js'
 export * as grayscale from './grayscale/index.js'
-export * as lerp from './lerp/index.js'
 export * as 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 luminance from './luminance/index.js'

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

@@ -1,21 +1,21 @@
 export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
-export * as at from './at/index.js'
 export * as append from './append/index.js'
-export * as clone from './clone/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 equals from './equals/index.js'
+export * as clone from './clone/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
+export * as if from './if/index.js'
+export * as length from './length/index.js'
 export * as initialize from './initialize/index.js'
 export * as join from './join/index.js'
-export * as length from './length/index.js'
-export * as if from './if/index.js'
 export * as map from './map/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
@@ -23,30 +23,30 @@ 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 push from './push/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 removeclass from './removeclass/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
-export * as removeattribute from './removeattribute/index.js'
-export * as push from './push/index.js'
 export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
 export * as sorton from './sorton/index.js'
-export * as spread from './spread/index.js'
 export * as split from './split/index.js'
+export * as spread from './spread/index.js'
+export * as toboolean from './toboolean/index.js'
 export * as toarray from './toarray/index.js'
 export * as toelement from './toelement/index.js'
-export * as tonodelist from './tonodelist/index.js'
+export * as toggleclass from './toggleclass/index.js'
 export * as tonull from './tonull/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as tonumber from './tonumber/index.js'
+export * as tonodelist from './tonodelist/index.js'
 export * as torecord from './torecord/index.js'
 export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as transformselected from './transformselected/index.js'
-export * as totext from './totext/index.js'
 export * as trim from './trim/index.js'
+export * as totext from './totext/index.js'

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

@@ -1,21 +1,21 @@
 export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
 export * as and from './and/index.js'
-export * as at from './at/index.js'
 export * as append from './append/index.js'
-export * as clone from './clone/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 equals from './equals/index.js'
+export * as clone from './clone/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
 export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
+export * as if from './if/index.js'
+export * as length from './length/index.js'
 export * as initialize from './initialize/index.js'
 export * as join from './join/index.js'
-export * as length from './length/index.js'
-export * as if from './if/index.js'
 export * as map from './map/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
@@ -23,30 +23,30 @@ 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 push from './push/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 removeclass from './removeclass/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
-export * as removeattribute from './removeattribute/index.js'
-export * as push from './push/index.js'
 export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
 export * as sorton from './sorton/index.js'
-export * as spread from './spread/index.js'
 export * as split from './split/index.js'
+export * as spread from './spread/index.js'
+export * as toboolean from './toboolean/index.js'
 export * as toarray from './toarray/index.js'
 export * as toelement from './toelement/index.js'
-export * as tonodelist from './tonodelist/index.js'
+export * as toggleclass from './toggleclass/index.js'
 export * as tonull from './tonull/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as tonumber from './tonumber/index.js'
+export * as tonodelist from './tonodelist/index.js'
 export * as torecord from './torecord/index.js'
 export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as transformselected from './transformselected/index.js'
-export * as totext from './totext/index.js'
 export * as trim from './trim/index.js'
+export * as totext from './totext/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 any from './any/index.js'
 export * as element from './element/index.js'
-export * as guess from './guess/index.js'
-export * as nodelist from './nodelist/index.js'
 export * as get from './get/index.js'
+export * as nodelist from './nodelist/index.js'
+export * as guess from './guess/index.js'
 export * as null from './null/index.js'
+export * as boolean from './boolean/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 text from './text/index.js'
 export * as ref from './ref/index.js'
-export * as number from './number/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 any from './any/index.js'
 export * as element from './element/index.js'
-export * as guess from './guess/index.js'
-export * as nodelist from './nodelist/index.js'
 export * as get from './get/index.js'
+export * as nodelist from './nodelist/index.js'
+export * as guess from './guess/index.js'
 export * as null from './null/index.js'
+export * as boolean from './boolean/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 text from './text/index.js'
 export * as ref from './ref/index.js'
-export * as number from './number/index.js'
+export * as text from './text/index.js'

package/agnostic/html/index.d.ts

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

package/agnostic/misc/index.d.ts

@@ -1,12 +1,12 @@
 export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
-export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
+export * as connection from './connection/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
+export * as dataSize from './data-size/index.js'
+export * as isNullish from './is-nullish/index.js'
 export * as logs from './logs/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'
-export * as dataSize from './data-size/index.js'
-export * as isNullish from './is-nullish/index.js'

package/agnostic/misc/index.js

@@ -1,12 +1,12 @@
 export * as assert from './assert/index.js'
 export * as cast from './cast/index.js'
-export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
+export * as connection from './connection/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
+export * as dataSize from './data-size/index.js'
+export * as isNullish from './is-nullish/index.js'
 export * as logs from './logs/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'
-export * as dataSize from './data-size/index.js'
-export * as isNullish from './is-nullish/index.js'

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

@@ -1,3 +1,3 @@
-export * as logger from './logger/index.js'
 export * as makeTextBlock from './make-text-block/index.js'
+export * as logger from './logger/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 makeTextBlock from './make-text-block/index.js'
+export * as logger from './logger/index.js'
 export * as styles from './styles/index.js'

package/agnostic/numbers/index.d.ts

@@ -1,6 +1,6 @@
-export * as clamp from './clamp/index.js'
 export * as absoluteModulo from './absolute-modulo/index.js'
-export * as geometricProgressions from './geometric-progressions/index.js'
 export * as approximateRational from './approximate-rational/index.js'
-export * as round from './round/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'

package/agnostic/numbers/index.js

@@ -1,6 +1,6 @@
-export * as clamp from './clamp/index.js'
 export * as absoluteModulo from './absolute-modulo/index.js'
-export * as geometricProgressions from './geometric-progressions/index.js'
 export * as approximateRational from './approximate-rational/index.js'
-export * as round from './round/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'

package/agnostic/objects/index.d.ts

@@ -4,6 +4,6 @@ export * as flattenGetters from './flatten-getters/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as isObject from './is-object/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 recordMap from './record-map/index.js'

package/agnostic/objects/index.js

@@ -4,6 +4,6 @@ export * as flattenGetters from './flatten-getters/index.js'
 export * as isRecord from './is-record/index.js'
 export * as recordFormat from './record-format/index.js'
 export * as isObject from './is-object/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 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

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

package/agnostic/strings/index.js

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

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 wait from './wait/index.js'
+export * as dates from './dates/index.js'
 export * as transitions from './transitions/index.js'
+export * as wait from './wait/index.js'

package/agnostic/time/index.js

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

package/components/Image/index.d.ts

@@ -7,6 +7,12 @@ import type { WithClassName } from '../utils/types.js';
  * @property type - MIME type hint for the source (e.g. `'image/webp'`).
  * @property media - Media condition under which this source is selected (e.g. `'(max-width: 768px)'`).
  * @property sizes - Sizes attribute forwarded to the `<source>` element.
+ *
+ * **A picture source is not a video source.** `Video` keeps a shape of its own: a
+ * `<source>` inside a `<video>` carries `src` and nothing else useful, where this one
+ * carries `srcSet`, `media` and `sizes`, and neither element accepts the other's
+ * attributes. What the two do share is how a list of them is read — see
+ * `parseSourceList` in `components/utils`, whose `stringKey` is exactly that difference.
  */
 type SourceData = {
     srcSet?: string;

package/components/Image/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames } from '../utils/index.js';
+import { mergeClassNames, parseSourceList } from '../utils/index.js';
 import { image as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**
@@ -19,27 +19,12 @@ import cssModule from './styles.module.css';
  */
 export const Image = ({ sources, className, ...intrinsicImgAttributes }) => {
     // State
-    const parsedSources = useMemo(() => {
-        if (sources === undefined)
-            return [];
-        if (typeof sources === 'string')
-            return [{ srcSet: sources }];
-        if (Array.isArray(sources)) {
-            if (sources.length === 0)
-                return [];
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element sampled just above; array is expected to be homogeneous
-            if (typeof sources[0] === 'string')
-                return sources.map(srcSet => ({ srcSet }));
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element was checked not to be a string just above; array is expected to be homogeneous
-            return sources;
-        }
-        return [];
-    }, [sources]);
+    const parsedSources = useMemo(() => parseSourceList(sources, 'srcSet'), [sources]);
     // Rendering
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(), className);
     const pictureClss = c('picture');
     const imgClss = c('image');
-    const pictureContent = _jsxs("picture", { className: pictureClss, children: [parsedSources.map((source, index) => _jsx("source", { srcSet: typeof source === 'string' ? source : source.srcSet, type: typeof source === 'string' ? undefined : source.type, media: typeof source === 'string' ? undefined : source.media, sizes: typeof source === 'string' ? undefined : source.sizes }, index)), _jsx("img", { className: imgClss, ...intrinsicImgAttributes })] });
+    const pictureContent = _jsxs("picture", { className: pictureClss, children: [parsedSources.map((source, index) => _jsx("source", { srcSet: source.srcSet, type: source.type, media: source.media, sizes: source.sizes }, index)), _jsx("img", { className: imgClss, ...intrinsicImgAttributes })] });
     return _jsx("figure", { className: rootClss, children: pictureContent });
 };

package/components/Video/index.controlled.d.ts

@@ -1,32 +1,13 @@
-import { type FunctionComponent, type PropsWithChildren, type Ref, type VideoHTMLAttributes } from 'react';
+import { type FunctionComponent, type PropsWithChildren, type Ref, type RefObject, type VideoHTMLAttributes } from 'react';
 import type { WithClassName } from '../utils/types.js';
 import { type Props as SubsProps } from '../Subtitles/index.js';
+import { type SourceData, type TrackData } from './utils.js';
 /**
  * Describes a single video source.
  *
  * @property src - URL of the video file.
  * @property type - MIME type of the source (e.g. `'video/mp4'`).
  */
-type SourceData = {
-    src?: string;
-    type?: string;
-};
-/**
- * Describes a single text track (subtitles, captions, chapters, etc.).
- *
- * @property src - URL of the track file.
- * @property kind - Track type, maps directly to the `<track>` `kind` attribute.
- * @property srclang - Language of the track content (e.g. `'fr'`, `'en'`).
- * @property label - Human-readable label shown in the browser's track selector.
- * @property default - When `true`, marks this track as the default selection.
- */
-type TrackData = {
-    src?: string;
-    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-    srclang?: string;
-    label?: string;
-    default?: boolean;
-};
 /**
  * Props for the ControlledVideo component.
  *
@@ -114,6 +95,8 @@ type TrackData = {
  */
 export type Props = PropsWithChildren<WithClassName<{
     rootRef?: Ref<HTMLElement>;
+    videoRef?: RefObject<HTMLVideoElement | null>;
+    togglePlayOnClick?: boolean;
     sources?: string | string[] | SourceData[];
     tracks?: string | string[] | TrackData[];
     subtitles?: SubsProps;
@@ -140,6 +123,7 @@ export type Props = PropsWithChildren<WithClassName<{
     onFullscreenButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isFullscreen: boolean, video: HTMLVideoElement | null) => void;
     onSubtitlesButtonClicked?: (e: React.MouseEvent<HTMLButtonElement>, isSubtitlesOn: boolean, video: HTMLVideoElement | null) => void;
     onTimelineClicked?: (e: React.MouseEvent<HTMLDivElement>, targetTime: number, currentTime: number, video: HTMLVideoElement | null) => void;
+    onVideoClicked?: (e: React.MouseEvent<HTMLVideoElement>, isPlaying: boolean, video: HTMLVideoElement | null) => void;
     onIsPlayingChanged?: (isPlaying: boolean) => void;
     onIsFullscreenChanged?: (isFullscreen: boolean) => void;
     onIsLoudChanged?: (isLoud: boolean) => void;
@@ -194,4 +178,3 @@ export type Props = PropsWithChildren<WithClassName<{
  * subtitles.
  */
 export declare const ControlledVideo: FunctionComponent<Props>;
-export {};

package/components/Video/index.controlled.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
 import { formatDuration } from '../../agnostic/time/duration/format-duration/index.js';
-import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
+import { mergeClassNames, parseSourceList, useChangeDispatch } from '../utils/index.js';
 import cssModule from './styles.module.css';
 import { video as publicClassName } from '../public-classnames.js';
 import { Subtitles } from '../Subtitles/index.js';
@@ -57,8 +57,9 @@ subtitlesOn = true, mute, muted, volume = 1, playbackRate = 1, currentTimeMs: gi
 // Milliseconds by default, which is what this component has always rendered — a
 // default that changes under a consumer is a change nobody asked for. An article
 // usually wants `'{{mm}}:{{ss}}'` and says so.
-timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onSubtitlesButtonClicked, onTimelineClicked, onIsPlayingChanged, onIsFullscreenChanged, onIsLoudChanged, onIsSubtitlesOnChanged, onIsEndedChanged, onVolumeChanged, onPlaybackRateChanged, onCurrentTimeMsChanged, onFullscreenChange, children, className, rootRef, ...intrinsicVideoAttributes }) => {
-    const videoRef = useRef(null);
+timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked, onLoudButtonClicked, onMuteButtonClicked, onVolumeRangeChanged, onRateRangeChanged, onFullscreenButtonClicked, onSubtitlesButtonClicked, onTimelineClicked, onVideoClicked, togglePlayOnClick, onIsPlayingChanged, onIsFullscreenChanged, onIsLoudChanged, onIsSubtitlesOnChanged, onIsEndedChanged, onVolumeChanged, onPlaybackRateChanged, onCurrentTimeMsChanged, onFullscreenChange, children, className, rootRef, videoRef: givenVideoRef, ...intrinsicVideoAttributes }) => {
+    const ownVideoRef = useRef(null);
+    const videoRef = givenVideoRef ?? ownVideoRef;
     const [totalTime, setTotalTime] = useState(0);
     const totalTimeMs = useMemo(() => secondsToMs(totalTime), [totalTime]);
     const [internalCurrentTimeMs, setInternalCurrentTimeMs] = useState(0);
@@ -121,6 +122,20 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
         const wasPlaying = videoRef.current?.paused === false;
         onPlayButtonClicked?.(e, wasPlaying, videoRef.current);
     }, [onPlayButtonClicked]);
+    // The picture as a play/pause surface. It reports and nothing more, like every other
+    // control here: the uncontrolled layer above owns the play state.
+    //
+    // The listener sits on the element and not on the `<figure>`, so the controls painted
+    // over it are not part of the surface — a click on pause would otherwise toggle twice
+    // and cancel itself. No `role` and no `tabIndex` either: this is a **second** way to
+    // do what the play button already does, and giving it a focus stop would put the same
+    // action twice in the tab order.
+    const handleVideoClick = useCallback((e) => {
+        if (togglePlayOnClick !== true)
+            return;
+        const wasPlaying = videoRef.current?.paused === false;
+        onVideoClicked?.(e, wasPlaying, videoRef.current);
+    }, [togglePlayOnClick, onVideoClicked]);
     const handlePauseButtonClick = useCallback((e) => {
         const wasPlaying = videoRef.current?.paused === false;
         onPauseButtonClicked?.(e, wasPlaying, videoRef.current);
@@ -170,7 +185,11 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
         // caché, c'est l'absence d'un état. Une feuille qui veut viser ce cas le reconnaît à
         // ce qu'aucun des deux modifieurs n'est là.
         'subtitles-on': subtitles !== undefined && subtitlesOn,
-        'subtitles-off': subtitles !== undefined && !subtitlesOn
+        'subtitles-off': subtitles !== undefined && !subtitlesOn,
+        // A capability rather than a state, and it is here for the same reason the lightbox
+        // carries `--open-on-click`: a surface that answers a click has to be able to say so
+        // with a cursor.
+        'toggle-play-on-click': togglePlayOnClick === true
     }), className);
     // Guarded: the duration is unknown until the metadata lands, and an unguarded
     // division would expose the string 'NaN' on every render until then.
@@ -190,7 +209,8 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
         'data-playback-rate': playbackRate,
         'data-current-time-ms': currentTimeMs.toFixed(2),
         'data-current-time-ratio': currentTimeRatio.toFixed(8),
-        'data-total-time-ms': totalTimeMs
+        'data-total-time-ms': totalTimeMs,
+        'data-toggle-play-on-click': togglePlayOnClick === true ? '' : undefined
     };
     const rootStyles = {
         '--lm-video-current-time': `${currentTimeMs}ms`,
@@ -201,38 +221,8 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
         '--lm-video-volume-ratio': `${volume}`,
         '--lm-video-playback-rate': `${playbackRate}`
     };
-    const parsedSources = useMemo(() => {
-        if (sources === undefined)
-            return [];
-        if (typeof sources === 'string')
-            return [{ src: sources }];
-        if (Array.isArray(sources)) {
-            if (sources.length === 0)
-                return [];
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element sampled just above; array is expected to be homogeneous
-            if (typeof sources[0] === 'string')
-                return sources.map(src => ({ src }));
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element was checked not to be a string just above; array is expected to be homogeneous
-            return sources;
-        }
-        return [];
-    }, [sources]);
-    const parsedTracks = useMemo(() => {
-        if (tracks === undefined)
-            return [];
-        if (typeof tracks === 'string')
-            return [{ src: tracks }];
-        if (Array.isArray(tracks)) {
-            if (tracks.length === 0)
-                return [];
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element sampled just above; array is expected to be homogeneous
-            if (typeof tracks[0] === 'string')
-                return tracks.map(src => ({ src }));
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- first element was checked not to be a string just above; array is expected to be homogeneous
-            return tracks;
-        }
-        return [];
-    }, [tracks]);
+    const parsedSources = useMemo(() => parseSourceList(sources, 'src'), [sources]);
+    const parsedTracks = useMemo(() => parseSourceList(tracks, 'src'), [tracks]);
     const videoClss = c('video');
     const videoControlsClss = c('video-controls');
     const playBtnClss = c('play-btn');
@@ -318,9 +308,5 @@ timeFormat = '{{mm}}:{{ss}}:{{ms}}', onPlayButtonClicked, onPauseButtonClicked,
     useChangeDispatch(isEnded, onIsEndedChanged);
     useChangeDispatch(volume, onVolumeChanged);
     useChangeDispatch(playbackRate, onPlaybackRateChanged);
-    return _jsxs("figure", { ref: rootRef, className: rootClss, style: rootStyles, ...rootAttributes, children: [_jsxs("video", { ref: videoRef, className: videoClss, ...intrinsicVideoAttributes, autoPlay: isTimeControlled ? false : intrinsicVideoAttributes.autoPlay, onLoadedMetadata: handleMetadataLoadEvent, onTimeUpdate: handleOnTimeUpdateEvent, onEnded: handleEndedEvent, onPlay: handlePlayEvent, onPause: handlePauseEvent, children: [parsedSources.map((source, index) => typeof source === 'string'
-                        ? _jsx("source", { src: source }, index)
-                        : _jsx("source", { src: source.src, type: source.type }, index)), parsedTracks.map((track, index) => typeof track === 'string'
-                        ? _jsx("track", { src: track }, index)
-                        : _jsx("track", { src: track.src, kind: track.kind, srcLang: track.srclang, label: track.label, default: track.default }, index)), children] }), _jsxs("div", { className: videoControlsClss, children: [_jsx("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }), _jsx("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }), _jsx("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }), _jsx("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }), _jsx("input", { type: 'range', className: volumeRangeClss, value: volumePercent, onChange: handleVolumeRangeChange, min: 0, max: 100, step: 1 }), _jsx("span", { className: volumePcntClss, children: Math.round(volumePercent) }), _jsx("button", { className: fullscreenBtnClss, onClick: handleFullscreenButtonClick, children: fullscreenBtnContent }), subtitles !== undefined && _jsx("button", { className: subtitlesBtnClss, onClick: handleSubtitlesButtonClick, children: subtitlesBtnContent }), _jsx("input", { type: 'range', className: playbackRateRangeClss, value: playbackRate, onChange: handleRateRangeChange, min: 0.25, max: 4, step: 0.25 }), _jsx("span", { className: playbackRateClss, children: playbackRate })] }), _jsxs("div", { className: timeControlsClss, children: [_jsx("span", { className: currentTimeClss, children: formatDuration(currentTimeMs, timeFormat) }), _jsx("span", { className: totalTimeClss, children: formatDuration(totalTimeMs, timeFormat) }), _jsx("div", { className: timelineClss, onClick: handleTimelineClick })] }), subtitles !== undefined && _jsx(Subtitles, { ...subtitles, timecodeMs: currentTimeMs, isEnded: isEnded })] });
+    return _jsxs("figure", { ref: rootRef, className: rootClss, style: rootStyles, ...rootAttributes, children: [_jsxs("video", { ref: videoRef, className: videoClss, ...intrinsicVideoAttributes, autoPlay: isTimeControlled ? false : intrinsicVideoAttributes.autoPlay, onClick: handleVideoClick, onLoadedMetadata: handleMetadataLoadEvent, onTimeUpdate: handleOnTimeUpdateEvent, onEnded: handleEndedEvent, onPlay: handlePlayEvent, onPause: handlePauseEvent, children: [parsedSources.map((source, index) => _jsx("source", { src: source.src, type: source.type }, index)), parsedTracks.map((track, index) => _jsx("track", { src: track.src, kind: track.kind, srcLang: track.srclang, label: track.label, default: track.default }, index)), children] }), _jsxs("div", { className: videoControlsClss, children: [_jsx("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }), _jsx("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }), _jsx("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }), _jsx("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }), _jsx("input", { type: 'range', className: volumeRangeClss, value: volumePercent, onChange: handleVolumeRangeChange, min: 0, max: 100, step: 1 }), _jsx("span", { className: volumePcntClss, children: Math.round(volumePercent) }), _jsx("button", { className: fullscreenBtnClss, onClick: handleFullscreenButtonClick, children: fullscreenBtnContent }), subtitles !== undefined && _jsx("button", { className: subtitlesBtnClss, onClick: handleSubtitlesButtonClick, children: subtitlesBtnContent }), _jsx("input", { type: 'range', className: playbackRateRangeClss, value: playbackRate, onChange: handleRateRangeChange, min: 0.25, max: 4, step: 0.25 }), _jsx("span", { className: playbackRateClss, children: playbackRate })] }), _jsxs("div", { className: timeControlsClss, children: [_jsx("span", { className: currentTimeClss, children: formatDuration(currentTimeMs, timeFormat) }), _jsx("span", { className: totalTimeClss, children: formatDuration(totalTimeMs, timeFormat) }), _jsx("div", { className: timelineClss, onClick: handleTimelineClick })] }), subtitles !== undefined && _jsx(Subtitles, { ...subtitles, timecodeMs: currentTimeMs, isEnded: isEnded })] });
 };