@design-edito/tools 0.4.4 → 0.4.6

package/components/ScrollListener/utils.js

@@ -0,0 +1,51 @@
+export const globalDocumentScrollListener = () => {
+    const win = {
+        height: window.innerHeight,
+        width: window.innerWidth
+    };
+    const html = {
+        width: document.body.parentElement?.offsetWidth ?? 0,
+        height: document.body.parentElement?.offsetHeight ?? 0
+    };
+    const scroll = {
+        x: window.scrollX,
+        y: window.scrollY
+    };
+    const viewport = {
+        minX: scroll.x,
+        minY: scroll.y,
+        maxX: scroll.x + win.width,
+        maxY: scroll.y + win.height
+    };
+    return { win, html, scroll, viewport };
+};
+export const localElementScrollListener = (div) => {
+    const offsetX = div.offsetLeft;
+    const offsetY = div.offsetTop;
+    const width = div.offsetWidth;
+    const height = div.offsetHeight;
+    return {
+        offsetX,
+        offsetY,
+        width,
+        height
+    };
+};
+window.addEventListener('scroll', () => {
+    const global = globalDocumentScrollListener();
+    Array.from(registeredIds).forEach(([, item]) => {
+        const { rootRef, setData } = item;
+        if (rootRef.current === null)
+            return;
+        const local = localElementScrollListener(rootRef.current);
+        setData({ global, local });
+    });
+});
+export const registeredIds = new Map();
+export const register = (props) => {
+    const { id, rootRef, setData } = props;
+    registeredIds.set(id, { id, rootRef, setData });
+};
+export const unregister = (id) => {
+    registeredIds.delete(id);
+};

package/components/Sequencer/index.controlled.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { sequencer as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Controlled sequencer component. Renders each child inside a classifier
+ * wrapper and assigns step-relative modifiers based on `step` and the optional
+ * `activateOnStep` override map.
+ *
+ * This component is purely presentational and holds no internal state.
+ * It is designed to be driven by the uncontrolled wrapper, which handles
+ * timing, playback events, and derives the props passed here.
+ *
+ * ### Root element modifiers
+ * The root `<div>` receives the public class name defined by `sequencer` and
+ * the following BEM-style modifier classes, sourced from `_modifiers`:
+ * - `--playing` — when the sequence is actively progressing.
+ * - `--at-start` — when the current step is the first step.
+ * - `--at-end` — when the current step is the last step.
+ *
+ * ### Data attributes on the root element
+ * Derived from `_dataAttributes`, each key is prefixed with `data-`:
+ * - `data-tempo` — current playback tempo, when provided.
+ *
+ * ### Child wrapper elements
+ * Each child is wrapped in a `<div>` with the `__child` element class and
+ * exactly one of the following mutually exclusive modifiers:
+ * - `--active` — this child corresponds to the current step (or is included
+ * in `activateOnStep[step]`).
+ * - `--previous` — this child was active in a prior step.
+ * - `--next` — this child has not yet been reached.
+ *
+ * @param props - Component properties.
+ * @see {@link ControlledProps}
+ * @returns A root `<div>` containing one classifier wrapper per child.
+ */
+export const SequencerControlled = ({ step = 0, activateOnStep, _modifiers, _dataAttributes, className, children }) => {
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, _modifiers), className);
+    const rootAttributes = Object
+        .entries({ ..._dataAttributes })
+        .reduce((acc, [key, val]) => ({ ...acc, [`data-${key}`]: val }), { 'data-step': step });
+    return _jsx("div", { className: rootClss, ...rootAttributes, children: Children.toArray(children)
+            .map((child, childPos) => {
+            const thisStepActivateOnStep = activateOnStep?.[step];
+            const isPrevious = activateOnStep === undefined
+                ? childPos < step
+                : [...activateOnStep]
+                    .slice(0, step)
+                    .some(list => list.includes(childPos));
+            const isCurrent = activateOnStep === undefined
+                ? childPos === step
+                : Array.isArray(thisStepActivateOnStep)
+                    ? thisStepActivateOnStep.includes(childPos)
+                    : thisStepActivateOnStep === childPos;
+            const isNext = !isPrevious && !isCurrent;
+            const childClss = c('child', {
+                current: isCurrent,
+                prev: isPrevious,
+                next: isNext
+            });
+            return _jsx("div", { className: childClss, children: child });
+        }) });
+};

package/components/Sequencer/index.js

@@ -1,164 +1,109 @@
-import {
-  absoluteModulo
-} from "../../chunks/chunk-DNIOWD7K.js";
-import {
-  clamp
-} from "../../chunks/chunk-OSAXBA7G.js";
-import {
-  IntersectionObserverComponent
-} from "../../chunks/chunk-F2YJXIT7.js";
-import {
-  sequencer
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
-
-// src/components/Sequencer/index.tsx
-import {
-  useState,
-  useEffect,
-  useCallback,
-  Children as Children2,
-  useRef
-} from "react";
-
-// src/components/Sequencer/index.controlled.tsx
-import {
-  Children
-} from "react";
-import cssModule from "./styles.module.css";
-import { jsx } from "react/jsx-runtime";
-var SequencerControlled = ({
-  step = 0,
-  activateOnStep,
-  _modifiers,
-  _dataAttributes,
-  className,
-  children
-}) => {
-  const c = clss(sequencer, { cssModule });
-  const rootClss = mergeClassNames(c(null, _modifiers), className);
-  const rootAttributes = Object.entries({ ..._dataAttributes }).reduce(
-    (acc, [key, val]) => ({ ...acc, [`data-${key}`]: val }),
-    { "data-step": step }
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: rootClss,
-      ...rootAttributes,
-      children: Children.toArray(children).map((child, childPos) => {
-        const thisStepActivateOnStep = activateOnStep?.[step];
-        const isPrevious = activateOnStep === void 0 ? childPos < step : [...activateOnStep].slice(0, step).some((list) => list.includes(childPos));
-        const isCurrent = activateOnStep === void 0 ? childPos === step : Array.isArray(thisStepActivateOnStep) ? thisStepActivateOnStep.includes(childPos) : thisStepActivateOnStep === childPos;
-        const isNext = !isPrevious && !isCurrent;
-        const childClss = c("child", {
-          current: isCurrent,
-          prev: isPrevious,
-          next: isNext
-        });
-        return /* @__PURE__ */ jsx("div", { className: childClss, children: child });
-      })
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, Children, useRef } from 'react';
+import { absoluteModulo } from '../../agnostic/numbers/absolute-modulo/index.js';
+import { clamp } from '../../agnostic/numbers/clamp/index.js';
+import { IntersectionObserverComponent } from '../IntersectionObserver/index.js';
+import { SequencerControlled } from './index.controlled.js';
+/**
+ * Uncontrolled, self-advancing sequencer component. Drives a
+ * {@link SequencerControlled} instance with an internal tempo-based interval,
+ * optional loop/clamp boundary behaviour, and viewport-driven play/reset triggers
+ * via an {@link IntersectionObserverComponent}.
+ *
+ * Supports mixed controlled/uncontrolled usage: passing `step` disables the
+ * internal interval while still applying loop/clamp arithmetic before forwarding
+ * to the controlled layer. Passing `play` disables internal play state management
+ * while still allowing viewport handlers to fire `actionHandlers.intersected`.
+ *
+ * ### Forwarded modifiers to {@link SequencerControlled}
+ * The following `_modifiers` are computed and injected automatically:
+ * - `playing` — `true` when the effective play state is active.
+ * - `at-start` — `true` when the forwarded step is `0`.
+ * - `at-end` — `true` when the forwarded step equals `stepsCount - 1`.
+ *
+ * ### Forwarded data attributes to {@link SequencerControlled}
+ * - `data-tempo` — the current `tempo` value.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @see {@link SequencerControlled}
+ * @returns An {@link IntersectionObserverComponent} wrapping a
+ * {@link SequencerControlled} with the computed step and modifiers applied.
+ */
+export const Sequencer = ({ defaultStep, tempo = 60, play, loop, clampFirst, clampLast, resetOnVisible, resetOnHidden, playOnVisible, pauseOnHidden, actionHandlers, stateHandlers, ...controlledProps }) => {
+    // State
+    const { step, activateOnStep, children } = controlledProps;
+    const [internalPlay, setInternalPlay] = useState(play ?? false);
+    const [internalStep, setInternalStep] = useState(step ?? defaultStep ?? 0);
+    const actualPlay = play ?? internalPlay;
+    const actualStep = step ?? internalStep;
+    const actualPlayRef = useRef(actualPlay);
+    // Effects
+    useEffect(() => {
+        const clampedTempo = Math.max(tempo, 1);
+        if (!actualPlay || step !== undefined)
+            return;
+        const interval = window.setInterval(() => {
+            setInternalStep(s => s + 1);
+        }, 1000 / (clampedTempo / 60));
+        return () => window.clearInterval(interval);
+    }, [actualPlay, tempo, step]);
+    // Forwarded step calculation
+    const stepsCount = activateOnStep !== undefined
+        ? activateOnStep.length
+        : Children.toArray(children).length;
+    let forwardedStep;
+    if (loop === true) {
+        forwardedStep = absoluteModulo(actualStep, stepsCount);
     }
-  );
-};
-
-// src/components/Sequencer/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Sequencer = ({
-  defaultStep,
-  tempo = 60,
-  play,
-  loop,
-  clampFirst,
-  clampLast,
-  resetOnVisible,
-  resetOnHidden,
-  playOnVisible,
-  pauseOnHidden,
-  actionHandlers,
-  stateHandlers,
-  ...controlledProps
-}) => {
-  const { step, activateOnStep, children } = controlledProps;
-  const [internalPlay, setInternalPlay] = useState(play ?? false);
-  const [internalStep, setInternalStep] = useState(step ?? defaultStep ?? 0);
-  const actualPlay = play ?? internalPlay;
-  const actualStep = step ?? internalStep;
-  const actualPlayRef = useRef(actualPlay);
-  useEffect(() => {
-    const clampedTempo = Math.max(tempo, 1);
-    if (!actualPlay || step !== void 0) return;
-    const interval = window.setInterval(() => {
-      setInternalStep((s) => s + 1);
-    }, 1e3 / (clampedTempo / 60));
-    return () => window.clearInterval(interval);
-  }, [actualPlay, tempo, step]);
-  const stepsCount = activateOnStep !== void 0 ? activateOnStep.length : Children2.toArray(children).length;
-  let forwardedStep;
-  if (loop === true) {
-    forwardedStep = absoluteModulo(actualStep, stepsCount);
-  } else {
-    const leftClamp = clampFirst === true ? 0 : -Infinity;
-    const rightClamp = clampLast === true ? stepsCount - 1 : Infinity;
-    forwardedStep = clamp(actualStep, leftClamp, rightClamp);
-  }
-  const forwardedStepRef = useRef(forwardedStep);
-  useEffect(() => {
-    if (actualPlay !== actualPlayRef.current) {
-      actualPlayRef.current = actualPlay;
-      stateHandlers?.isPlaying?.(actualPlay);
-    }
-    if (forwardedStep !== forwardedStepRef.current) {
-      forwardedStepRef.current = forwardedStep;
-      stateHandlers?.stepChanged?.(forwardedStep);
+    else {
+        const leftClamp = clampFirst === true ? 0 : -Infinity;
+        const rightClamp = clampLast === true ? stepsCount - 1 : Infinity;
+        forwardedStep = clamp(actualStep, leftClamp, rightClamp);
     }
-  }, [actualPlay, forwardedStep]);
-  const handleIntersection = useCallback(({ ioEntry, observer }) => {
-    if (play === true || step !== void 0) return;
-    const { isIntersecting } = ioEntry ?? {};
-    actionHandlers?.intersected?.({ ioEntry, observer });
-    if (isIntersecting === true) {
-      if (resetOnVisible === true) setInternalStep(0);
-      if (playOnVisible === true) setInternalPlay(true);
-    } else {
-      if (resetOnHidden === true) setInternalStep(0);
-      if (pauseOnHidden === true) setInternalPlay(false);
-    }
-  }, [
-    resetOnVisible,
-    playOnVisible,
-    resetOnHidden,
-    pauseOnHidden,
-    play,
-    step,
-    actionHandlers
-  ]);
-  return /* @__PURE__ */ jsx2(
-    IntersectionObserverComponent,
-    {
-      onIntersected: handleIntersection,
-      children: /* @__PURE__ */ jsx2(
-        SequencerControlled,
-        {
-          ...controlledProps,
-          step: forwardedStep,
-          _modifiers: {
-            playing: actualPlay,
-            "at-start": forwardedStep === 0,
-            "at-end": forwardedStep === stepsCount - 1
-          },
-          _dataAttributes: { tempo }
+    const forwardedStepRef = useRef(forwardedStep);
+    // State change handlers
+    useEffect(() => {
+        if (actualPlay !== actualPlayRef.current) {
+            actualPlayRef.current = actualPlay;
+            stateHandlers?.isPlaying?.(actualPlay);
         }
-      )
-    }
-  );
-};
-export {
-  Sequencer
+        if (forwardedStep !== forwardedStepRef.current) {
+            forwardedStepRef.current = forwardedStep;
+            stateHandlers?.stepChanged?.(forwardedStep);
+        }
+    }, [actualPlay, forwardedStep]);
+    // Action handlers
+    const handleIntersection = useCallback(({ ioEntry, observer }) => {
+        if (play === true || step !== undefined)
+            return;
+        const { isIntersecting } = ioEntry ?? {};
+        actionHandlers?.intersected?.({ ioEntry, observer });
+        if (isIntersecting === true) {
+            if (resetOnVisible === true)
+                setInternalStep(0);
+            if (playOnVisible === true)
+                setInternalPlay(true);
+        }
+        else {
+            if (resetOnHidden === true)
+                setInternalStep(0);
+            if (pauseOnHidden === true)
+                setInternalPlay(false);
+        }
+    }, [
+        resetOnVisible,
+        playOnVisible,
+        resetOnHidden,
+        pauseOnHidden,
+        play,
+        step,
+        actionHandlers
+    ]);
+    // Rendering
+    return _jsx(IntersectionObserverComponent, { onIntersected: handleIntersection, children: _jsx(SequencerControlled, { ...controlledProps, step: forwardedStep, _modifiers: {
+                playing: actualPlay,
+                'at-start': forwardedStep === 0,
+                'at-end': forwardedStep === stepsCount - 1
+            }, _dataAttributes: { tempo } }) });
 };

package/components/ShadowRoot/index.js

@@ -1,64 +1,43 @@
-import {
-  shadowRoot
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
-
-// src/components/ShadowRoot/index.tsx
-import {
-  useRef,
-  useEffect,
-  useState
-} from "react";
-import { createPortal } from "react-dom";
-import cssModule from "./styles.module.css";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var ShadowRootComponent = ({
-  mode = "open",
-  delegatesFocus,
-  slotAssignment,
-  adoptedStyleSheets,
-  injectedStyles,
-  className,
-  children
-}) => {
-  const hostRef = useRef(null);
-  const [shadowRoot2, setShadowRoot] = useState(null);
-  const [styles, setStyles] = useState(injectedStyles);
-  useEffect(() => {
-    if (hostRef.current === null || shadowRoot2 !== null) return;
-    const root = hostRef.current.attachShadow({ mode, delegatesFocus, slotAssignment });
-    if (adoptedStyleSheets !== void 0 && "adoptedStyleSheets" in root) {
-      root.adoptedStyleSheets = adoptedStyleSheets;
-    }
-    if (injectedStyles !== void 0) setStyles(injectedStyles);
-    setShadowRoot(root);
-  }, [
-    mode,
-    delegatesFocus,
-    slotAssignment,
-    adoptedStyleSheets,
-    injectedStyles
-  ]);
-  const c = clss(shadowRoot, { cssModule });
-  const rootClss = mergeClassNames(c(), className);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: hostRef,
-      className: rootClss,
-      children: shadowRoot2 !== null && createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
-        styles !== void 0 && /* @__PURE__ */ jsx("style", { children: styles }),
-        children
-      ] }), shadowRoot2)
-    }
-  );
-};
-export {
-  ShadowRootComponent
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { shadowRoot as publicClassName } from '../public-classnames.js';
+import { mergeClassNames } from '../utils/index.js';
+import cssModule from './styles.module.css';
+/**
+ * Component that creates a Shadow Root on its host element and renders
+ * its children inside that Shadow Root using a React portal.
+ *
+ * @param props - Component properties
+ * @see {@link Props}
+ * @returns A host `div` element that owns the created Shadow Root.
+ */
+export const ShadowRootComponent = ({ mode = 'open', delegatesFocus, slotAssignment, adoptedStyleSheets, injectedStyles, className, children }) => {
+    // Refs, state & effects
+    const hostRef = useRef(null);
+    const [shadowRoot, setShadowRoot] = useState(null);
+    const [styles, setStyles] = useState(injectedStyles);
+    useEffect(() => {
+        if (hostRef.current === null || shadowRoot !== null)
+            return;
+        const root = hostRef.current.attachShadow({ mode, delegatesFocus, slotAssignment });
+        if (adoptedStyleSheets !== undefined
+            && 'adoptedStyleSheets' in root) {
+            root.adoptedStyleSheets = adoptedStyleSheets;
+        }
+        if (injectedStyles !== undefined)
+            setStyles(injectedStyles);
+        setShadowRoot(root);
+    }, [
+        mode,
+        delegatesFocus,
+        slotAssignment,
+        adoptedStyleSheets,
+        injectedStyles
+    ]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    return _jsx("div", { ref: hostRef, className: rootClss, children: shadowRoot !== null && createPortal(_jsxs(_Fragment, { children: [styles !== undefined && _jsx("style", { children: styles }), children] }), shadowRoot) });
 };

package/components/Subtitles/index.js

@@ -1,14 +1,108 @@
-import {
-  Subtitles
-} from "../../chunks/chunk-PYJKFOMV.js";
-import "../../chunks/chunk-YWSXCFYY.js";
-import "../../chunks/chunk-PUQUSA6S.js";
-import "../../chunks/chunk-QXAJXTXV.js";
-import "../../chunks/chunk-HC6ZOHCS.js";
-import "../../chunks/chunk-IEZ3O5OF.js";
-import "../../chunks/chunk-TRFZSKNB.js";
-import "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
-export {
-  Subtitles
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { toError } from '../../agnostic/misc/cast/index.js';
+import { unknownToString } from '../../agnostic/errors/unknown-to-string/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { subtitles as publicClassName } from '../public-classnames.js';
+import { computeSubGroupsWithBoundaries, getCurrentGroup, parseSubs } from './utils.js';
+import cssModule from './styles.module.css';
+/**
+ * Subtitle synchronization component. Fetches or receives an SRT source, parses it,
+ * and renders subtitle groups whose individual spans are styled according to the
+ * current media timecode.
+ *
+ * ### Group elements
+ * Each subtitle group is a `<div>` with the following:
+ * - `--curr` modifier when the group contains the subtitle at the current timecode.
+ * - `data-start-sub-pos` — ID of the first subtitle in the group.
+ * - `data-end-sub-pos` — ID of the last subtitle in the group.
+ *
+ * ### Subtitle span elements
+ * Each individual subtitle is a `<span>` with the following:
+ * - `--prev` modifier when the subtitle's start time is at or before the last elapsed subtitle.
+ * - `--curr` modifier when `timecodeMs` falls within the subtitle's `[start, end]` interval.
+ * - `data-sub-pos` — the subtitle's numeric ID from the SRT source.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A root `<div>` containing the rendered subtitle groups, or an empty `<div>`
+ * when `timecodeMs` is undefined or no subtitles have been parsed yet.
+ */
+export const Subtitles = ({ src, srtFileContent, subsGroups, timecodeMs, isEnded, className, onLoaded, onParsed, onLoadFailed }) => {
+    // State
+    const [isLoading, setIsLoading] = useState(false);
+    const [loadError, setLoadError] = useState(null);
+    const [parsedSubs, setParsedSubs] = useState([]);
+    const pParsedSubs = useRef(parsedSubs);
+    // State change handlers
+    useEffect(() => {
+        if (pParsedSubs.current === parsedSubs)
+            return;
+        onParsed?.(parsedSubs);
+    }, [parsedSubs]);
+    // Effects
+    const fetchAndParseSubs = useCallback(async (src, srtFileContent) => {
+        if (src === undefined)
+            return;
+        if (srtFileContent !== undefined)
+            return setParsedSubs(parseSubs(srtFileContent));
+        setIsLoading(true);
+        setLoadError(null);
+        try {
+            const response = await fetch(src);
+            const srtContent = await response.text();
+            onLoaded?.(srtContent);
+            const parsedSubs = parseSubs(srtContent);
+            setParsedSubs(parsedSubs);
+        }
+        catch (error) {
+            setLoadError(error instanceof Error
+                ? error
+                : new Error(unknownToString(error)));
+            console.error(error);
+            onLoadFailed?.(toError(error));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [onLoadFailed, onLoaded]);
+    useEffect(() => {
+        fetchAndParseSubs(src, srtFileContent)
+            .catch((error) => { console.error(error); });
+    }, [fetchAndParseSubs, src, srtFileContent]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, {
+        loading: isLoading,
+        error: loadError !== null
+    }), className);
+    const prevSubs = parsedSubs.filter(({ start }) => start != null && start < (timecodeMs ?? 0));
+    const lastPrevSub = prevSubs[prevSubs.length - 1];
+    const highestSubId = Math.max(...parsedSubs.map(sub => sub.id));
+    const subsGroupsWithBoundaries = computeSubGroupsWithBoundaries(subsGroups, highestSubId);
+    const currentGroup = getCurrentGroup(subsGroupsWithBoundaries, lastPrevSub?.id, isEnded);
+    return _jsx("div", { className: rootClss, children: timecodeMs !== undefined
+            && parsedSubs.length > 0
+            && subsGroupsWithBoundaries.map(group => {
+                const groupSubs = parsedSubs.filter(sub => sub.id >= group.startId && sub.id <= group.endId);
+                const totalSubs = groupSubs.length;
+                const groupClass = c('group', { curr: currentGroup?.startId === group.startId });
+                const subsNodes = groupSubs.map((sub, subIndex) => {
+                    let subText = sub.content?.trim() ?? '';
+                    if (subIndex !== totalSubs - 1)
+                        subText += ' ';
+                    const subClass = c('sub', {
+                        prev: sub.start !== undefined
+                            && lastPrevSub?.start !== undefined
+                            && sub.start <= lastPrevSub.start,
+                        curr: sub.start !== undefined
+                            && timecodeMs >= sub.start
+                            && sub.end !== undefined
+                            && timecodeMs <= sub.end
+                    });
+                    return _jsx("span", { className: subClass, "data-sub-pos": sub.id, children: subText }, sub.id);
+                });
+                return _jsx("div", { className: groupClass, "data-start-sub-pos": group.startId, "data-end-sub-pos": group.endId, children: subsNodes }, group.startId);
+            }) });
 };

package/components/Subtitles/types.js

@@ -0,0 +1 @@
+export {};