@design-edito/tools 0.3.10 → 0.3.11

package/components/Sequencer/index.d.ts

@@ -0,0 +1,85 @@
+import { type FunctionComponent } from 'react';
+import { type Props as IOCompProps } from '../IntersectionObserver/index.js';
+import { type ControlledProps } from './index.controlled.js';
+/**
+ * Props for the {@link Sequencer} component.
+ *
+ * Extends {@link ControlledProps} (minus `_modifiers`, which are derived
+ * internally) with uncontrolled playback and viewport-driven behaviour.
+ *
+ * @property defaultStep - Initial step index when running in uncontrolled mode.
+ * Ignored if `step` is provided. Defaults to `0`.
+ * @property tempo - Playback speed in beats per minute. The interval between
+ * steps is derived as `1000 / (tempo / 60)` ms. Clamped to a minimum of `1`.
+ * Defaults to `60`.
+ * @property play - Controlled play state. When provided, overrides the internal
+ * play state. The auto-advance interval only runs when this is `true`.
+ * @property loop - When `true`, the step wraps around using absolute modulo so
+ * it never exceeds the number of steps.
+ * @property clampFirst - When `true` (and `loop` is `false`), clamps the step
+ * to `0` at the lower bound, preventing negative step values.
+ * @property clampLast - When `true` (and `loop` is `false`), clamps the step
+ * to `stepsCount - 1` at the upper bound, preventing overflow.
+ * @property resetOnVisible - When `true`, resets the internal step to `0` each
+ * time the component enters the viewport. No-op when `step` or `play` is controlled.
+ * @property resetOnHidden - When `true`, resets the internal step to `0` each
+ * time the component leaves the viewport. No-op when `step` or `play` is controlled.
+ * @property playOnVisible - When `true`, starts internal playback when the
+ * component enters the viewport. No-op when `play` is controlled.
+ * @property pauseOnHidden - When `true`, pauses internal playback when the
+ * component leaves the viewport. No-op when `play` is controlled.
+ * @property actionHandlers - Optional handlers for imperative actions triggered
+ * by external events:
+ * - `intersected` — forwarded verbatim to the internal
+ * {@link IntersectionObserverComponent}'s `onIntersected`, called on every
+ * intersection change regardless of controlled state.
+ * @property stateHandlers - Optional callbacks invoked when derived state changes:
+ * - `isPlaying` — called with the new play state whenever it changes.
+ * - `stepChanged` — called with the new forwarded step index whenever it changes.
+ */
+export type Props = Omit<ControlledProps, '_modifiers'> & {
+    defaultStep?: number;
+    tempo?: number;
+    play?: boolean;
+    loop?: boolean;
+    clampFirst?: boolean;
+    clampLast?: boolean;
+    resetOnVisible?: boolean;
+    resetOnHidden?: boolean;
+    playOnVisible?: boolean;
+    pauseOnHidden?: boolean;
+    actionHandlers?: {
+        intersected?: IOCompProps['onIntersected'];
+    };
+    stateHandlers?: {
+        isPlaying?: (isPlaying: boolean) => void;
+        stepChanged?: (step: number) => void;
+    };
+};
+/**
+ * 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 declare const Sequencer: FunctionComponent<Props>;

package/components/Sequencer/index.js

@@ -0,0 +1,109 @@
+// src/components/Sequencer/index.tsx
+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";
+import { jsx } 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 : Children.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);
+    }
+  }, [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__ */ jsx(
+    IntersectionObserverComponent,
+    {
+      onIntersected: handleIntersection,
+      children: /* @__PURE__ */ jsx(
+        SequencerControlled,
+        {
+          ...controlledProps,
+          step: forwardedStep,
+          _modifiers: {
+            playing: actualPlay,
+            "at-start": forwardedStep === 0,
+            "at-end": forwardedStep === stepsCount - 1
+          },
+          _dataAttributes: { tempo }
+        }
+      )
+    }
+  );
+};
+export {
+  Sequencer
+};

package/components/ShadowRoot/index.d.ts

@@ -0,0 +1,35 @@
+import { type PropsWithChildren, type FunctionComponent } from 'react';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Props for the ShadowRootComponent.
+ *
+ * @property className - Optional additional class name(s) applied to the host element
+ * that owns the Shadow Root.
+ * @property mode - Shadow DOM mode. `"open"` exposes the shadowRoot via `element.shadowRoot`,
+ * `"closed"` keeps it inaccessible from the outside. Defaults to `"open"`.
+ * @property delegatesFocus - When true, enables focus delegation from the host
+ * to the first focusable element inside the Shadow Root.
+ * @property slotAssignment - Slot assignment mode. `"named"` uses standard named slot behavior,
+ * `"manual"` requires manual slot assignment via `HTMLSlotElement.assign()`.
+ * @property adoptedStyleSheets - Array of constructable `CSSStyleSheet` instances
+ * assigned to `shadowRoot.adoptedStyleSheets` (if supported by the browser).
+ * @property injectedStyles - Raw CSS string injected into the Shadow Root inside a `<style>` element.
+ * Useful as a fallback when constructable stylesheets are not used.
+ * @property children - React children rendered inside the Shadow Root via a React portal.
+ */
+export type Props = PropsWithChildren<WithClassName<{
+    mode?: 'open' | 'closed';
+    delegatesFocus?: boolean;
+    slotAssignment?: 'named' | 'manual';
+    adoptedStyleSheets?: CSSStyleSheet[];
+    injectedStyles?: string;
+}>>;
+/**
+ * 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 declare const ShadowRootComponent: FunctionComponent<Props>;

package/components/ShadowRoot/index.js

@@ -0,0 +1,56 @@
+// src/components/ShadowRoot/index.tsx
+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";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ShadowRootComponent = ({
+  mode = "open",
+  delegatesFocus,
+  slotAssignment,
+  adoptedStyleSheets,
+  injectedStyles,
+  className,
+  children
+}) => {
+  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 !== void 0 && "adoptedStyleSheets" in root) {
+      root.adoptedStyleSheets = adoptedStyleSheets;
+    }
+    if (injectedStyles !== void 0) setStyles(injectedStyles);
+    setShadowRoot(root);
+  }, [
+    mode,
+    delegatesFocus,
+    slotAssignment,
+    adoptedStyleSheets,
+    injectedStyles
+  ]);
+  const c = clss(publicClassName, { cssModule });
+  const rootClss = mergeClassNames(c(), className);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      className: rootClss,
+      children: shadowRoot !== null && createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
+        styles !== void 0 && /* @__PURE__ */ jsx("style", { children: styles }),
+        children
+      ] }), shadowRoot)
+    }
+  );
+};
+export {
+  ShadowRootComponent
+};

package/components/Subtitles/index.d.ts

@@ -0,0 +1,58 @@
+import { type FunctionComponent, type PropsWithChildren } from 'react';
+import type { WithClassName } from '../utils/types.js';
+import type { ParsedSub } from './types.js';
+/**
+ * Props for the {@link Subtitles} component.
+ *
+ * @property src - URL of an SRT file to fetch. Ignored if `srtFileContent` is provided.
+ * If both are undefined, no subtitles are loaded.
+ * @property srtFileContent - Raw SRT string used directly, bypassing any network fetch.
+ * Takes precedence over `src`.
+ * @property subsGroups - Optional array of subtitle IDs that act as group boundaries,
+ * splitting the full subtitle list into named sections. If omitted, all subtitles
+ * belong to a single group.
+ * @property timecodeMs - Current media position in milliseconds. Drives which subtitles
+ * receive the `--prev` and `--curr` modifiers. When `undefined`, nothing is rendered.
+ * @property isEnded - When `true`, forces the last group to be treated as current,
+ * regardless of `timecodeMs`. Useful to keep the final subtitle group visible after
+ * media playback finishes.
+ * @property onLoaded - Callback invoked with the raw SRT string after a successful
+ * fetch and parse. Not called when `srtFileContent` is used directly.
+ * @property onParsed - Callback invoked with the raw SRT string has been parsed.
+ * @property onLoadFailed - Callback invoked with an `Error` if the fetch or parse step fails.
+ * @property className - Optional additional class name(s) applied to the root element.
+ * @property children - React children rendered inside the root element, after the subtitle groups.
+ */
+export type Props = PropsWithChildren<WithClassName<{
+    src?: string;
+    srtFileContent?: string;
+    subsGroups?: number[];
+    timecodeMs?: number;
+    isEnded?: boolean;
+    onLoaded?: (subs: string) => void;
+    onParsed?: (subs: ParsedSub[]) => void;
+    onLoadFailed?: (error: Error) => void;
+}>>;
+/**
+ * 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 declare const Subtitles: FunctionComponent<Props>;

package/components/Subtitles/index.js

@@ -0,0 +1,111 @@
+// src/components/Subtitles/index.tsx
+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";
+import { jsx } from "react/jsx-runtime";
+var Subtitles = ({
+  src,
+  srtFileContent,
+  subsGroups,
+  timecodeMs,
+  isEnded,
+  className,
+  onLoaded,
+  onParsed,
+  onLoadFailed
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadError, setLoadError] = useState(null);
+  const [parsedSubs, setParsedSubs] = useState([]);
+  const pParsedSubs = useRef(parsedSubs);
+  useEffect(() => {
+    if (pParsedSubs.current === parsedSubs) return;
+    onParsed?.(parsedSubs);
+  }, [parsedSubs]);
+  const fetchAndParseSubs = useCallback(async (src2, srtFileContent2) => {
+    if (src2 === void 0) return;
+    if (srtFileContent2 !== void 0) return setParsedSubs(parseSubs(srtFileContent2));
+    setIsLoading(true);
+    setLoadError(null);
+    try {
+      const response = await fetch(src2);
+      const srtContent = await response.text();
+      onLoaded?.(srtContent);
+      const parsedSubs2 = parseSubs(srtContent);
+      setParsedSubs(parsedSubs2);
+    } 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]);
+  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 /* @__PURE__ */ jsx("div", { className: rootClss, children: timecodeMs !== void 0 && 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 !== void 0 && lastPrevSub?.start !== void 0 && sub.start <= lastPrevSub.start,
+        curr: sub.start !== void 0 && timecodeMs >= sub.start && sub.end !== void 0 && timecodeMs <= sub.end
+      });
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: subClass,
+          "data-sub-pos": sub.id,
+          children: subText
+        },
+        sub.id
+      );
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: groupClass,
+        "data-start-sub-pos": group.startId,
+        "data-end-sub-pos": group.endId,
+        children: subsNodes
+      },
+      group.startId
+    );
+  }) });
+};
+export {
+  Subtitles
+};

package/components/Subtitles/types.d.ts

@@ -0,0 +1,10 @@
+export type ParsedSub = {
+    id: number;
+    start?: number;
+    end?: number;
+    content?: string;
+};
+export type SubGroupBoundaries = {
+    startId: number;
+    endId: number;
+};

package/components/Subtitles/utils.d.ts

@@ -0,0 +1,28 @@
+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
+ */
+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
+ */
+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
+ */
+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
+ */
+export declare const getCurrentGroup: (subsGroupsWithBoundaries: SubGroupBoundaries[], lastPrevSubId: number | undefined, isEnded: boolean | undefined) => SubGroupBoundaries | undefined;

package/components/Theatre/index.d.ts

@@ -0,0 +1,64 @@
+import { type FunctionComponent, type PropsWithChildren, type ReactNode } from 'react';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Props for the {@link Theatre} component.
+ *
+ * @property closeBtnContent - Custom content rendered inside the close/exit button.
+ * @property openBtnContent - Custom content rendered inside the open/enter button.
+ * @property isOn - Controlled theatre mode state. When provided, overrides the
+ * internal state. Use together with {@link Props.onToggleClick} for fully
+ * controlled usage.
+ * @property defaultIsOn - Default state for the theatre mode.
+ * @property exitOnEscape — When uncontrolled and on, toggles internal state to off when 'esc' key is pressed
+ * @property exitOnBgClick — When uncontrolled and on, toggles internal state to off when the background is clicked
+ * @property stateHandlers - Callbacks called after the internal state changed
+ * @property stateHandlers.toggled - Callback invoked after the state changed
+ * @property actionHandlers - Callbacks called after a user action on children elements
+ * @property actionHandlers.toggleTrigger - Callback invoked when either the open or close
+ * button is clicked, the 'esc' key pressed or the background clicked. Receives the theatre state value (`isOn`) at the time of the click,
+ * i.e. the previous state before the toggle.
+ * @property className - Optional additional class name(s) applied to the root element.
+ * @property children - Content rendered both in the default slot and, when theatre
+ * mode is active, duplicated inside the stage element.
+ */
+export type Props = PropsWithChildren<WithClassName<{
+    closeBtnContent?: ReactNode;
+    openBtnContent?: ReactNode;
+    isOn?: boolean;
+    defaultIsOn?: boolean;
+    exitOnEscape?: boolean;
+    exitOnBgClick?: boolean;
+    stateHandlers?: {
+        toggled?: (isOn: boolean) => void;
+    };
+    actionHandlers?: {
+        toggleTrigger?: (prevIsOn: boolean) => void;
+    };
+}>>;
+/**
+ * Theatre mode component. Wraps content in a toggleable fullscreen-like "stage"
+ * overlay. Supports both controlled and uncontrolled usage.
+ *
+ * When `isOn` is not provided the component manages its own open/closed state
+ * internally. When `isOn` is provided it acts as the source of truth and the
+ * internal state is ignored.
+ *
+ * ### Root element modifiers
+ * The root `<div>` receives the public class name defined by `theatre` and the
+ * following BEM-style modifier classes:
+ * - `--on` — when theatre mode is active.
+ * - `--off` — when theatre mode is inactive.
+ *
+ * ### Child elements
+ * - `__stage` — container rendered inside the root that holds the duplicated
+ * `children` when theatre mode is active. Only mounted when `isOn` is `true`.
+ * - `__open-btn` — clickable element that activates theatre mode.
+ * - `__close-btn` — clickable element that deactivates theatre mode.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A root `<div>` containing the children in their original position,
+ * a stage overlay with the duplicated children (when active), and the open/close
+ * toggle buttons.
+ */
+export declare const Theatre: FunctionComponent<Props>;

package/components/Theatre/index.js

@@ -0,0 +1,97 @@
+// src/components/Theatre/index.tsx
+import {
+  useEffect,
+  useState,
+  useRef
+} from "react";
+import { clss } from "../../agnostic/css/clss/index.js";
+import { mergeClassNames } from "../utils/index.js";
+import { theatre as publicClassName } from "../public-classnames.js";
+import cssModule from "./styles.module.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Theatre = ({
+  closeBtnContent,
+  openBtnContent,
+  isOn,
+  defaultIsOn,
+  exitOnEscape,
+  exitOnBgClick,
+  stateHandlers,
+  actionHandlers,
+  children,
+  className
+}) => {
+  const [internalIsOn, setInternalIsOn] = useState(defaultIsOn ?? false);
+  const stageRef = useRef(null);
+  const isTheatreOn = isOn ?? internalIsOn;
+  const prevIsTheatreOnRef = useRef(isTheatreOn);
+  const handleCloseBtnClick = () => {
+    actionHandlers?.toggleTrigger?.(isTheatreOn);
+    if (isOn === void 0) setInternalIsOn(false);
+  };
+  const handleOpenBtnClick = () => {
+    actionHandlers?.toggleTrigger?.(isTheatreOn);
+    if (isOn === void 0) setInternalIsOn(true);
+  };
+  const handleStageBgClick = (e) => {
+    if (exitOnBgClick !== true) return;
+    if (e.target !== stageRef.current) return;
+    actionHandlers?.toggleTrigger?.(isTheatreOn);
+    if (isOn === void 0) setInternalIsOn(false);
+  };
+  useEffect(() => {
+    if (prevIsTheatreOnRef.current !== isTheatreOn) {
+      stateHandlers?.toggled?.(isTheatreOn);
+      prevIsTheatreOnRef.current = isTheatreOn;
+    }
+  }, [isTheatreOn, stateHandlers]);
+  useEffect(() => {
+    if (exitOnEscape === true || !isTheatreOn || isOn !== void 0) return;
+    const listener = (e) => {
+      if (e.key !== "Escape") return;
+      actionHandlers?.toggleTrigger?.(isTheatreOn);
+      setInternalIsOn(false);
+    };
+    window.addEventListener("keydown", listener);
+    return () => window.removeEventListener("keydown", listener);
+  }, [exitOnEscape, isTheatreOn, isOn]);
+  const c = clss(publicClassName, { cssModule });
+  const rootClss = mergeClassNames(c(null, {
+    "on": isTheatreOn,
+    "off": !isTheatreOn
+  }), className);
+  const stageClass = c("stage");
+  const openBtnClass = c("open-btn");
+  const closeBtnClass = c("close-btn");
+  return /* @__PURE__ */ jsxs("div", { className: rootClss, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: stageClass,
+        onClick: handleStageBgClick,
+        ref: stageRef,
+        children: isTheatreOn && children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: closeBtnClass,
+        onClick: handleCloseBtnClick,
+        children: closeBtnContent
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: openBtnClass,
+        onClick: handleOpenBtnClick,
+        children: openBtnContent
+      }
+    )
+  ] });
+};
+export {
+  Theatre
+};