@design-edito/tools 0.4.22 → 0.5.0

package/components/Input/index.d.ts

@@ -1,33 +1,37 @@
-import { type FunctionComponent, type InputHTMLAttributes, type ReactNode } from 'react';
-import type { WithClassName } from '../utils/types.js';
+import { type FunctionComponent } from 'react';
+import { type Props as ControlledProps } from './index.controlled.js';
 /**
  * Props for the {@link Input} component.
  *
- * Extends all native {@link InputHTMLAttributes} and {@link WithClassName}
- * with optional label and error content.
+ * Alias of {@link ControlledProps}.
  *
- * @property label - Content rendered as an associated `<label>`. When omitted, no label is rendered.
- * @property error - Content rendered as an error message below the input. When omitted, no error is rendered.
- * @property className - Additional class name(s) applied to the root element.
+ * All native input attributes remain available, including `value`
+ * and `onChange`, allowing the component to operate in either
+ * controlled or hybrid mode.
  */
-export type Props = InputHTMLAttributes<HTMLInputElement> & WithClassName<{
-    label?: ReactNode;
-    error?: ReactNode;
-}>;
+export type Props = ControlledProps;
 /**
- * Input field component with optional label and error message.
+ * Input field component supporting controlled and hybrid usage.
  *
- * Renders a native `<input>` element inside a wrapper, with a stable
- * auto-generated `id` used to associate the label via `htmlFor`.
- * All standard input attributes are forwarded to the underlying element.
+ * Wraps {@link ControlledInput} and automatically manages the input value
+ * when no `value` prop is provided.
  *
  * ### CSS elements
  * - `label`
- * - `input`
  * - `error`
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A labelled input wrapper with optional error feedback.
+ *
+ * @returns A labelled input with optional internal value management.
+ *
+ * @remarks
+ * - When `value` is defined, the component behaves as a controlled component:
+ *   displayed value updates are entirely driven by the parent component.
+ * - When `value` is omitted, the component behaves in hybrid mode:
+ *   it initializes an internal state from the initial `value` prop and
+ *   subsequently manages value updates itself.
+ * - In hybrid mode, the internal value is updated before forwarding
+ *   the `onChange` callback.
  */
 export declare const Input: FunctionComponent<Props>;

package/components/Input/index.js

@@ -1,30 +1,39 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { clss } from '../../agnostic/css/clss/index.js';
-import { isNotFalsy } from '../../agnostic/booleans/is-falsy/index.js';
-import { randomHash } from '../../agnostic/random/uuid/index.js';
-import { input as publicClassName } from '../public-classnames.js';
-import { mergeClassNames } from '../utils/index.js';
-import cssModule from './styles.module.css';
+import { ControlledInput } from './index.controlled.js';
 /**
- * Input field component with optional label and error message.
+ * Input field component supporting controlled and hybrid usage.
  *
- * Renders a native `<input>` element inside a wrapper, with a stable
- * auto-generated `id` used to associate the label via `htmlFor`.
- * All standard input attributes are forwarded to the underlying element.
+ * Wraps {@link ControlledInput} and automatically manages the input value
+ * when no `value` prop is provided.
  *
  * ### CSS elements
  * - `label`
- * - `input`
  * - `error`
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A labelled input wrapper with optional error feedback.
+ *
+ * @returns A labelled input with optional internal value management.
+ *
+ * @remarks
+ * - When `value` is defined, the component behaves as a controlled component:
+ *   displayed value updates are entirely driven by the parent component.
+ * - When `value` is omitted, the component behaves in hybrid mode:
+ *   it initializes an internal state from the initial `value` prop and
+ *   subsequently manages value updates itself.
+ * - In hybrid mode, the internal value is updated before forwarding
+ *   the `onChange` callback.
  */
-export const Input = ({ label, error, className, ...rest }) => {
-    const [id] = useState(`_${randomHash(12)}`);
-    const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(null), className);
-    return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("input", { ...rest, className: rootClss, id: id }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
+export const Input = (props) => {
+    const { value, defaultValue, onChange, ...rest } = props;
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = useState(defaultValue ?? '');
+    const currentValue = isControlled ? value : internal;
+    const handleChange = (e) => {
+        if (!isControlled)
+            setInternal(e.target.value);
+        onChange?.(e);
+    };
+    return _jsx(ControlledInput, { ...rest, value: currentValue, onChange: handleChange });
 };

package/components/IntersectionObserver/index.js

@@ -40,8 +40,11 @@ export const IntersectionObserverComponent = ({ onIntersected, root, rootMargin,
     }, []);
     useEffect(() => {
         const rootEl = rootRef.current;
-        if (rootEl === null)
-            return console.warn('rootRef.current should not be null');
+        if (rootEl === null) {
+            // eslint-disable-next-line no-console
+            console.warn('rootRef.current should not be null');
+            return;
+        }
         const observer = new IntersectionObserver(observation, { root, rootMargin, threshold });
         observerRef.current = observer;
         observer.observe(rootEl);

package/components/JsonEditor/index.js

@@ -102,7 +102,7 @@ export const ValueEditor = ({ defaultValue = {}, onChange, path = [] }) => {
         array: Array.isArray(value),
         record: !Array.isArray(value) && isNonNullObject(value)
     });
-    const pathStringDataAttr = (path ?? []).map(e => e.toString()).join('.');
+    const pathStringDataAttr = path.map(e => e.toString()).join('.');
     return _jsxs("span", { className: valueEditorClss, "data-path": pathStringDataAttr, children: [_jsxs(Select, { className: c('type'), onChange: handleTypeSelectChange, children: [_jsx("option", { value: 'string', selected: typeof value === 'string', children: "string" }), _jsx("option", { value: 'number', selected: typeof value === 'number', children: "number" }), _jsx("option", { value: 'boolean', selected: typeof value === 'boolean', children: "boolean" }), _jsx("option", { value: 'null', selected: value === null, children: "null" }), _jsx("option", { value: 'record', selected: isNonNullObject(value) && !Array.isArray(value), children: "record" }), _jsx("option", { value: 'array', selected: Array.isArray(value), children: "array" })] }), typeof value === 'string' && _jsx(StringEditor, { type: 'textarea', defaultValue: value, onChange: handleStringValueChange }), typeof value === 'number' && _jsx(NumberEditor, { defaultValue: value, onChange: handleNumberValueChange }), typeof value === 'boolean' && _jsx(BooleanEditor, { defaultValue: value, onChange: handleBooleanValueChange }), value === null && _jsx(NullEditor, { defaultValue: value }), isNonNullObject(value) && !Array.isArray(value) && _jsx(RecordEditor, { defaultValue: value, onChange: handleRecordValueChange, path: path }), Array.isArray(value) && _jsx(ArrayEditor, { defaultValue: value, onChange: handleArrayValueChange, path: path })] });
 };
 /* * * * * * * * * * * * * * * * *

package/components/Overlayer/index.d.ts

@@ -1,4 +1,4 @@
-import { type FunctionComponent, type PropsWithChildren, type ReactNode } from 'react';
+import type { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
 import type { WithClassName } from '../utils/types.js';
 /**
  * Describes a single overlay positioned over the base content.

package/components/ScrollListener/utils.d.ts

@@ -1,4 +1,12 @@
 import type { RefObject, Dispatch, SetStateAction } from 'react';
+/**
+ * Scroll-related measurements for the document and viewport.
+ *
+ * @property win - Window inner dimensions.
+ * @property html - Document root element dimensions.
+ * @property scroll - Current scroll position.
+ * @property viewport - Current viewport bounds in document coordinates.
+ */
 export type GlobalScrollData = {
     win: {
         height: number;
@@ -19,18 +27,39 @@ export type GlobalScrollData = {
         maxY: number;
     };
 };
+/**
+ * Position and size of a tracked element relative to the document.
+ *
+ * @property offsetX - Horizontal offset in pixels.
+ * @property offsetY - Vertical offset in pixels.
+ * @property width - Element width in pixels.
+ * @property height - Element height in pixels.
+ */
 export type LocalScrollData = {
     offsetX: number;
     offsetY: number;
     width: number;
     height: number;
 };
+/**
+ * Combined scroll state passed to each registered {@link ScrollListener}.
+ *
+ * @property global - Document-level scroll data.
+ * @property local - Element-level position data.
+ */
 export type ScrollState = {
     global: GlobalScrollData;
     local: LocalScrollData;
 };
 export declare const globalDocumentScrollListener: () => GlobalScrollData;
 export declare const localElementScrollListener: (div: HTMLDivElement) => LocalScrollData;
+/**
+ * An entry registered with the global scroll listener.
+ *
+ * @property id - Unique identifier for this registration.
+ * @property rootRef - Ref to the tracked DOM element.
+ * @property setData - State setter to update the component's scroll state.
+ */
 export type RegisterEntry = {
     id: string;
     rootRef: RefObject<HTMLDivElement | null>;

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

@@ -0,0 +1,43 @@
+import { type FunctionComponent, type SelectHTMLAttributes, type ReactNode, type PropsWithChildren } from 'react';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Props for the {@link ControlledSelect} component.
+ *
+ * Extends all native {@link SelectHTMLAttributes} and {@link WithClassName}
+ * with optional label, error content, and option children.
+ *
+ * @property label - Content rendered as an associated `<label>`. When omitted, no label is rendered.
+ * @property error - Content rendered as an error message below the select. When omitted, no error is rendered.
+ * @property className - Additional class name(s) applied to the select element.
+ * @property children - `<option>` or `<optgroup>` elements rendered inside the select.
+ */
+export type Props = SelectHTMLAttributes<HTMLSelectElement> & PropsWithChildren<WithClassName<{
+    label?: ReactNode;
+    error?: ReactNode;
+}>>;
+/**
+ * Controlled select field component.
+ *
+ * Renders a native `<select>` element with optional label and error feedback.
+ * The selected value is entirely driven by the provided `value` prop and all
+ * native select attributes are forwarded to the underlying element.
+ *
+ * A stable auto-generated `id` is created on mount and used to associate the
+ * rendered label through the `htmlFor` attribute.
+ *
+ * ### CSS elements
+ * - `label`
+ * - `error`
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ *
+ * @returns A labelled controlled select with optional error feedback.
+ *
+ * @remarks
+ * - The component does not manage its own selection state.
+ * - Consumers are responsible for updating `value` in response to `onChange`.
+ * - Additional `className` values are merged with the component public class name
+ *   and applied to the underlying `<select>` element.
+ */
+export declare const ControlledSelect: FunctionComponent<Props>;

package/components/Select/index.controlled.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isNotFalsy } from '../../agnostic/booleans/is-falsy/index.js';
+import { randomHash } from '../../agnostic/random/uuid/index.js';
+import { select as publicClassName } from '../public-classnames.js';
+import { mergeClassNames } from '../utils/index.js';
+import cssModule from './styles.module.css';
+/**
+ * Controlled select field component.
+ *
+ * Renders a native `<select>` element with optional label and error feedback.
+ * The selected value is entirely driven by the provided `value` prop and all
+ * native select attributes are forwarded to the underlying element.
+ *
+ * A stable auto-generated `id` is created on mount and used to associate the
+ * rendered label through the `htmlFor` attribute.
+ *
+ * ### CSS elements
+ * - `label`
+ * - `error`
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ *
+ * @returns A labelled controlled select with optional error feedback.
+ *
+ * @remarks
+ * - The component does not manage its own selection state.
+ * - Consumers are responsible for updating `value` in response to `onChange`.
+ * - Additional `className` values are merged with the component public class name
+ *   and applied to the underlying `<select>` element.
+ */
+export const ControlledSelect = ({ label, error, value, className, children, ...rest }) => {
+    const [id] = useState(`_${randomHash(12)}`);
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null), className);
+    return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("select", { ...rest, className: rootClss, id: id, value: value, onChange: e => {
+                    const { target } = e;
+                    rest.onChange?.(e);
+                    if (value === undefined)
+                        return;
+                    if (typeof value === 'number') {
+                        target.value = `${value}`;
+                    }
+                    else if (typeof value === 'string') {
+                        target.value = value;
+                    }
+                    else {
+                        // value is readonly string[]
+                        // not supported for <select>; ignore or normalize if needed
+                    }
+                }, children: children }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
+};

package/components/Select/index.d.ts

@@ -1,34 +1,38 @@
-import { type FunctionComponent, type SelectHTMLAttributes, type ReactNode, type PropsWithChildren } from 'react';
-import type { WithClassName } from '../utils/types.js';
+import { type FunctionComponent } from 'react';
+import { type Props as ControlledProps } from './index.controlled.js';
 /**
  * Props for the {@link Select} component.
  *
- * Extends all native {@link SelectHTMLAttributes} and {@link WithClassName}
- * with optional label, error content, and option children.
+ * Alias of {@link ControlledProps}.
  *
- * @property label - Content rendered as an associated `<label>`. When omitted, no label is rendered.
- * @property error - Content rendered as an error message below the select. When omitted, no error is rendered.
- * @property className - Additional class name(s) applied to the root element.
- * @property children - `<option>` or `<optgroup>` elements rendered inside the select.
+ * All native select attributes remain available, including `value`,
+ * `defaultValue`, and `onChange`, allowing the component to operate
+ * in either controlled or hybrid mode.
  */
-export type Props = SelectHTMLAttributes<HTMLSelectElement> & PropsWithChildren<WithClassName<{
-    label?: ReactNode;
-    error?: ReactNode;
-}>>;
+export type Props = ControlledProps;
 /**
- * Select field component with optional label and error message.
+ * Select field component supporting controlled and hybrid usage.
  *
- * Renders a native `<select>` element inside a wrapper, with a stable
- * auto-generated `id` used to associate the label via `htmlFor`.
- * All standard select attributes are forwarded to the underlying element.
+ * Wraps {@link ControlledSelect} and automatically manages the selected
+ * value when no `value` prop is provided.
  *
  * ### CSS elements
  * - `label`
- * - `select`
  * - `error`
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A labelled select wrapper with optional error feedback.
+ *
+ * @returns A labelled select with optional internal selection management.
+ *
+ * @remarks
+ * - In controlled mode (`value` defined), the selected value is fully driven
+ *   by the parent component and internal state is never updated.
+ * - In hybrid mode, internal state is initialized from `defaultValue` and
+ *   subsequently manages selection updates itself.
+ * - In hybrid mode, the internal value is updated before forwarding the
+ *   `onChange` callback.
+ * - `defaultValue` is only used to initialize internal state and is not
+ *   forwarded to the underlying controlled component.
  */
 export declare const Select: FunctionComponent<Props>;

package/components/Select/index.js

@@ -1,30 +1,39 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { clss } from '../../agnostic/css/clss/index.js';
-import { isNotFalsy } from '../../agnostic/booleans/is-falsy/index.js';
-import { randomHash } from '../../agnostic/random/uuid/index.js';
-import { select as publicClassName } from '../public-classnames.js';
-import { mergeClassNames } from '../utils/index.js';
-import cssModule from './styles.module.css';
+import { ControlledSelect } from './index.controlled.js';
 /**
- * Select field component with optional label and error message.
+ * Select field component supporting controlled and hybrid usage.
  *
- * Renders a native `<select>` element inside a wrapper, with a stable
- * auto-generated `id` used to associate the label via `htmlFor`.
- * All standard select attributes are forwarded to the underlying element.
+ * Wraps {@link ControlledSelect} and automatically manages the selected
+ * value when no `value` prop is provided.
  *
  * ### CSS elements
  * - `label`
- * - `select`
  * - `error`
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A labelled select wrapper with optional error feedback.
+ *
+ * @returns A labelled select with optional internal selection management.
+ *
+ * @remarks
+ * - In controlled mode (`value` defined), the selected value is fully driven
+ *   by the parent component and internal state is never updated.
+ * - In hybrid mode, internal state is initialized from `defaultValue` and
+ *   subsequently manages selection updates itself.
+ * - In hybrid mode, the internal value is updated before forwarding the
+ *   `onChange` callback.
+ * - `defaultValue` is only used to initialize internal state and is not
+ *   forwarded to the underlying controlled component.
  */
-export const Select = ({ label, error, className, children, ...rest }) => {
-    const [id] = useState(`_${randomHash(12)}`);
-    const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(null), className);
-    return _jsxs(_Fragment, { children: [isNotFalsy(label) && _jsx("label", { className: c('label'), htmlFor: id, children: label }), _jsx("select", { ...rest, className: rootClss, id: id, children: children }), isNotFalsy(error) && _jsx("span", { className: c('error'), children: error })] });
+export const Select = ({ defaultValue, value, onChange, ...rest }) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = useState(defaultValue ?? '');
+    const currentValue = isControlled ? value : internal;
+    const handleChange = (e) => {
+        if (!isControlled)
+            setInternal(e.target.value);
+        onChange?.(e);
+    };
+    return _jsx(ControlledSelect, { ...rest, value: currentValue, onChange: handleChange });
 };

package/components/Sequencer/index.controlled.js

@@ -55,7 +55,7 @@ export const SequencerControlled = ({ step = 0, activateOnStep, _modifiers, _dat
                 ? childPos === step
                 : Array.isArray(thisStepActivateOnStep)
                     ? thisStepActivateOnStep.includes(childPos)
-                    : thisStepActivateOnStep === childPos;
+                    : false;
             const isNext = !isPrevious && !isCurrent;
             const childClss = c('child', {
                 current: isCurrent,

package/components/Subtitles/index.js

@@ -60,6 +60,7 @@ export const Subtitles = ({ src, srtFileContent, subsGroups, timecodeMs, isEnded
             setLoadError(error instanceof Error
                 ? error
                 : new Error(unknownToString(error)));
+            // eslint-disable-next-line no-console
             console.error(error);
             onLoadFailed?.(toError(error));
         }
@@ -69,6 +70,7 @@ export const Subtitles = ({ src, srtFileContent, subsGroups, timecodeMs, isEnded
     }, [onLoadFailed, onLoaded]);
     useEffect(() => {
         fetchAndParseSubs(src, srtFileContent)
+            // eslint-disable-next-line no-console
             .catch((error) => { console.error(error); });
     }, [fetchAndParseSubs, src, srtFileContent]);
     // Rendering
@@ -77,7 +79,7 @@ export const Subtitles = ({ src, srtFileContent, subsGroups, timecodeMs, isEnded
         loading: isLoading,
         error: loadError !== null
     }), className);
-    const prevSubs = parsedSubs.filter(({ start }) => start != null && start < (timecodeMs ?? 0));
+    const prevSubs = parsedSubs.filter(({ start }) => start !== undefined && start < (timecodeMs ?? 0));
     const lastPrevSub = prevSubs[prevSubs.length - 1];
     const highestSubId = Math.max(...parsedSubs.map(sub => sub.id));
     const subsGroupsWithBoundaries = computeSubGroupsWithBoundaries(subsGroups, highestSubId);

package/components/Subtitles/types.d.ts

@@ -1,9 +1,23 @@
+/**
+ * A single parsed subtitle entry from an SRT file.
+ *
+ * @property id - Sequential subtitle number.
+ * @property start - Start time in milliseconds.
+ * @property end - End time in milliseconds.
+ * @property content - Subtitle text content.
+ */
 export type ParsedSub = {
     id: number;
     start?: number;
     end?: number;
     content?: string;
 };
+/**
+ * The inclusive ID boundaries of a subtitle group.
+ *
+ * @property startId - ID of the first subtitle in the group.
+ * @property endId - ID of the last subtitle in the group.
+ */
 export type SubGroupBoundaries = {
     startId: number;
     endId: number;

package/components/Subtitles/utils.d.ts

@@ -1,28 +1,32 @@
 import type { ParsedSub, SubGroupBoundaries } from './types.js';
 /**
- * Convertit un timecode au format SRT (hh:mm:ss,ms) en millisecondes.
- * @param timecode - Timecode sous forme de chaîne (ex: '00:01:23,456')
- * @returns Le temps en millisecondes
+ * Converts an SRT timecode (hh:mm:ss,ms) to milliseconds.
+ *
+ * @param timecode - Timecode string (e.g. '00:01:23,456').
+ * @returns The time in milliseconds.
  */
 export declare const getTimecodeToMs: (timecode: string) => number;
 /**
- * Parse un texte brut de sous-titres SRT en une liste d'objets ParsedSub.
- * @param rawSubs - Sous-titres bruts au format SRT
- * @returns Tableau d'objets ParsedSub
+ * Parses a raw SRT subtitle text into a list of {@link ParsedSub} objects.
+ *
+ * @param rawSubs - Raw subtitle content in SRT format.
+ * @returns Array of parsed subtitle entries.
  */
 export declare const parseSubs: (rawSubs: string) => ParsedSub[];
 /**
- * Calcule les groupes de sous-titres avec leurs bornes (startId, endId).
- * @param subsGroups - Tableau d'IDs de fin de groupe
- * @param highestSubId - ID le plus élevé des sous-titres
- * @returns Tableau de SubGroupBoundaries
+ * Computes subtitle groups with their boundaries (startId, endId).
+ *
+ * @param subsGroups - Array of group-end subtitle IDs.
+ * @param highestSubId - Highest subtitle ID in the track.
+ * @returns Array of {@link SubGroupBoundaries}.
  */
 export declare const computeSubGroupsWithBoundaries: (subsGroups: number[] | undefined, highestSubId: number) => SubGroupBoundaries[];
 /**
- * Retourne le groupe de sous-titres courant selon l'ID du dernier sous-titre précédent et l'état.
- * @param subsGroupsWithBoundaries - Tableau des groupes avec bornes
- * @param lastPrevSubId - ID du dernier sous-titre précédent
- * @param isEnded - Indique si la lecture est terminée
- * @returns Le groupe courant ou undefined
+ * Returns the current subtitle group based on the last preceding subtitle ID and playback state.
+ *
+ * @param subsGroupsWithBoundaries - Array of groups with their boundaries.
+ * @param lastPrevSubId - ID of the last subtitle that has already passed.
+ * @param isEnded - Whether playback has ended.
+ * @returns The current group, or `undefined` if none matches.
  */
 export declare const getCurrentGroup: (subsGroupsWithBoundaries: SubGroupBoundaries[], lastPrevSubId: number | undefined, isEnded: boolean | undefined) => SubGroupBoundaries | undefined;

package/components/Subtitles/utils.js

@@ -1,7 +1,8 @@
 /**
- * Convertit un timecode au format SRT (hh:mm:ss,ms) en millisecondes.
- * @param timecode - Timecode sous forme de chaîne (ex: '00:01:23,456')
- * @returns Le temps en millisecondes
+ * Converts an SRT timecode (hh:mm:ss,ms) to milliseconds.
+ *
+ * @param timecode - Timecode string (e.g. '00:01:23,456').
+ * @returns The time in milliseconds.
  */
 export const getTimecodeToMs = (timecode) => {
     const [hours = '0', minutes = '0', secondsAndMs = '0,0'] = timecode.split(':');
@@ -13,13 +14,14 @@ export const getTimecodeToMs = (timecode) => {
     return result;
 };
 /**
- * Parse un texte brut de sous-titres SRT en une liste d'objets ParsedSub.
- * @param rawSubs - Sous-titres bruts au format SRT
- * @returns Tableau d'objets ParsedSub
+ * Parses a raw SRT subtitle text into a list of {@link ParsedSub} objects.
+ *
+ * @param rawSubs - Raw subtitle content in SRT format.
+ * @returns Array of parsed subtitle entries.
  */
 export const parseSubs = (rawSubs) => {
-    const numberRegex = /^\d+$/;
-    const timecodeRegex = /^[0-9]+:[0-9]+:[0-9]+,[0-9]+\s*-->\s*[0-9]+:[0-9]+:[0-9]+,[0-9]+$/;
+    const numberRegex = /^\d+$/v;
+    const timecodeRegex = /^[0-9]+:[0-9]+:[0-9]+,[0-9]+\s*-->\s*[0-9]+:[0-9]+:[0-9]+,[0-9]+$/v;
     const parsedSubs = [];
     rawSubs.split('\n').forEach(line => {
         if (line.trim() === '')
@@ -49,10 +51,10 @@ export const parseSubs = (rawSubs) => {
         }
         // content
         if (lastParsedSub?.id !== undefined
-            && lastParsedSub?.start !== undefined
-            && lastParsedSub?.end !== undefined) {
-            if (lastParsedSub?.content !== undefined) {
-                lastParsedSub.content += '\n' + line;
+            && lastParsedSub.start !== undefined
+            && lastParsedSub.end !== undefined) {
+            if (lastParsedSub.content !== undefined) {
+                lastParsedSub.content += `\n${line}`;
                 return;
             }
             lastParsedSub.content = line;
@@ -61,21 +63,23 @@ export const parseSubs = (rawSubs) => {
     return parsedSubs;
 };
 /**
- * Calcule les groupes de sous-titres avec leurs bornes (startId, endId).
- * @param subsGroups - Tableau d'IDs de fin de groupe
- * @param highestSubId - ID le plus élevé des sous-titres
- * @returns Tableau de SubGroupBoundaries
+ * Computes subtitle groups with their boundaries (startId, endId).
+ *
+ * @param subsGroups - Array of group-end subtitle IDs.
+ * @param highestSubId - Highest subtitle ID in the track.
+ * @returns Array of {@link SubGroupBoundaries}.
  */
 export const computeSubGroupsWithBoundaries = (subsGroups, highestSubId) => {
     const fallback = [{ startId: 1, endId: highestSubId }];
     if (subsGroups === undefined || subsGroups.length === 0)
         return fallback;
     const emptySubGroupBoundaries = [];
-    return subsGroups?.reduce((acc, curr, currIndex) => {
+    return subsGroups.reduce((acc, curr, currIndex) => {
         const lastInAcc = acc[acc.length - 1];
         const startId = lastInAcc === undefined ? 1 : lastInAcc.endId + 1;
         const endId = curr;
-        if (currIndex === (subsGroups?.length ?? 0) - 1 && endId !== highestSubId) {
+        if (currIndex === subsGroups.length - 1
+            && endId !== highestSubId) {
             return [
                 ...acc,
                 { startId, endId },
@@ -83,14 +87,15 @@ export const computeSubGroupsWithBoundaries = (subsGroups, highestSubId) => {
             ];
         }
         return [...acc, { startId, endId }];
-    }, emptySubGroupBoundaries) ?? fallback;
+    }, emptySubGroupBoundaries);
 };
 /**
- * Retourne le groupe de sous-titres courant selon l'ID du dernier sous-titre précédent et l'état.
- * @param subsGroupsWithBoundaries - Tableau des groupes avec bornes
- * @param lastPrevSubId - ID du dernier sous-titre précédent
- * @param isEnded - Indique si la lecture est terminée
- * @returns Le groupe courant ou undefined
+ * Returns the current subtitle group based on the last preceding subtitle ID and playback state.
+ *
+ * @param subsGroupsWithBoundaries - Array of groups with their boundaries.
+ * @param lastPrevSubId - ID of the last subtitle that has already passed.
+ * @param isEnded - Whether playback has ended.
+ * @returns The current group, or `undefined` if none matches.
  */
 export const getCurrentGroup = (subsGroupsWithBoundaries, lastPrevSubId, isEnded) => {
     const previousGroups = subsGroupsWithBoundaries.filter(group => group.startId <= (lastPrevSubId ?? 0));