@design-edito/tools 0.5.9 → 0.5.11

package/components/Lightbox/index.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { isNotNullish } from '../../agnostic/misc/is-nullish/index.js';
+import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
+import { lightbox as publicClassName } from '../public-classnames.js';
+import { close as closeLightbox, getState, membersOf, open as openLightbox, register, soloGroupOf, step, subscribe, unregister } from './store.js';
+import cssModule from './styles.module.css';
+/**
+ * Lightbox component. Holds content in a box that a stylesheet lifts over the page
+ * when opened.
+ *
+ * ### CSS modifiers
+ * - `on` - this member is open.
+ * - `off` - it is not.
+ * - `grouped` - it belongs to a group it did not invent, so navigation is possible.
+ *
+ * ### CSS elements
+ * - `placeholder` - holds the content's last measured size while it is out of flow.
+ * - `backdrop` - the box the content always lives in; a stylesheet takes it out of
+ *   flow and over the page while the root carries `--on`.
+ * - `content` - wraps the content inside the backdrop.
+ * - `open-btn`, `close-btn`, `prev-btn`, `next-btn`
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A root `<div>` holding a placeholder, the backdrop the content lives in,
+ * and the controls.
+ *
+ * @remarks
+ * - **The content never moves.** It stays in the same box, at the same place in the
+ *   React tree, open or closed; only the box's positioning changes, and that is a
+ *   stylesheet's business. Nothing is unmounted, so a playing video keeps playing at
+ *   its timecode. Rendering `children` in two branches - one in place, one on a stage
+ *   - would mount a fresh instance on every flip, React reconciling by position.
+ * - **Nothing leaves the component's own subtree.** No portal, no `document.body`: a
+ *   component has no business writing outside the scope it was handed.
+ * - **A placeholder keeps the layout still.** Its size is the content's last measured
+ *   one, read while closed; without it the article would collapse around the hole left
+ *   once the backdrop goes out of flow.
+ * - **[WIP]** A `position: fixed` backdrop is trapped by the first ancestor carrying a
+ *   `transform`, a `filter` or a `contain`, which becomes its containing block. Inside
+ *   a slot, that ancestor is the consumer's own to avoid.
+ * - **Groups are held outside React**, in `./store.ts`: a consumer may render each
+ *   component in a root of its own, in which case members of a group share no tree
+ *   and a context could not reach from one to the other.
+ * - Every member holds its own backdrop; only the open one is lifted over the page.
+ *   Navigating a group therefore lowers one and lifts another, and neither one's
+ *   content is touched.
+ * - This component ships **no appearance**: covering the page, the backdrop and the
+ *   buttons are the consumer stylesheet's business. Without one, the content is moved
+ *   to the end of the document and nothing looks like a lightbox.
+ */
+export const Lightbox = ({ group, closeBtnContent, openBtnContent, prevBtnContent, nextBtnContent, isOn: isOnProp, defaultIsOn = false, exitOnEscape, exitOnBgClick, navOnArrowKeys, onOpenButtonClicked, onCloseButtonClicked, onPrevButtonClicked, onNextButtonClicked, onBackgroundClicked, onEscapePressed, onPrevArrowPressed, onNextArrowPressed, onIsOnChanged, children, className }) => {
+    // State & refs
+    const id = useId();
+    const rootRef = useRef(null);
+    const backdropRef = useRef(null);
+    const sizeRef = useRef(null);
+    const [hasAppliedDefault, setHasAppliedDefault] = useState(false);
+    const isControlled = isOnProp !== undefined;
+    const declaredGroups = group === undefined
+        ? []
+        : (Array.isArray(group) ? group : [group]);
+    const isGrouped = declaredGroups.length > 0;
+    // A member without a group still needs one to be opened through: its own.
+    const groups = isGrouped ? declaredGroups : [soloGroupOf(id)];
+    // `groups` is never empty: a member without a declared group gets its own.
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const ownGroup = groups[0];
+    const groupsKey = groups.join(' ');
+    const storeState = useSyncExternalStore(subscribe, getState, getState);
+    const isOn = isOnProp ?? (storeState.openMemberId === id);
+    const openGroup = storeState.openGroup;
+    const siblingsCount = isOn && openGroup !== null ? membersOf(openGroup).length : 0;
+    // Fx. dep. id, groupsKey - Joins the shared registry, which is what lets another
+    // member reach this one. `getElement` rather than the element itself: the registry
+    // reads it when it needs to order the group, and never holds it.
+    useEffect(() => {
+        register({ id, groups, getElement: () => rootRef.current });
+        return () => unregister(id);
+    }, [id, groupsKey]);
+    // Keeps the last size the content had in place, so the placeholder can hold it once
+    // the content is gone. Measured while closed only, on render rather than through a
+    // standing observer: the content of a lightbox rarely resizes, and one observer per
+    // image on a page is a cost with no return.
+    useLayoutEffect(() => {
+        if (isOn)
+            return;
+        const root = rootRef.current;
+        if (root === null)
+            return;
+        const { width, height } = root.getBoundingClientRect();
+        if (width === 0 && height === 0)
+            return;
+        sizeRef.current = { width, height };
+    });
+    // State dispatch
+    useChangeDispatch(isOn, onIsOnChanged);
+    // User action handlers
+    const requestOpen = useCallback(() => {
+        if (isControlled)
+            return;
+        openLightbox(ownGroup, id);
+    }, [isControlled, ownGroup, id]);
+    const requestClose = useCallback(() => {
+        if (isControlled)
+            return;
+        closeLightbox();
+    }, [isControlled]);
+    const handleOpenButtonClick = () => {
+        onOpenButtonClicked?.(isOn);
+        requestOpen();
+    };
+    const handleCloseButtonClick = () => {
+        onCloseButtonClicked?.(isOn);
+        requestClose();
+    };
+    const handlePrevButtonClick = () => {
+        onPrevButtonClicked?.(isOn);
+        step(-1);
+    };
+    const handleNextButtonClick = () => {
+        onNextButtonClicked?.(isOn);
+        step(1);
+    };
+    const handleBackdropClick = e => {
+        if (exitOnBgClick !== true)
+            return;
+        if (e.target !== backdropRef.current)
+            return;
+        onBackgroundClicked?.(isOn);
+        requestClose();
+    };
+    // Fx. dep. exitOnEscape, isOn, requestClose, onEscapePressed - Escape closes the
+    // lightbox. Listens only while open, so a page of closed lightboxes holds no
+    // listener.
+    useEffect(() => {
+        if (exitOnEscape !== true || !isOn)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            onEscapePressed?.(isOn);
+            requestClose();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [exitOnEscape, isOn, requestClose, onEscapePressed]);
+    // Fx. dep. navOnArrowKeys, isOn, siblingsCount, onPrevArrowPressed,
+    // onNextArrowPressed - The arrow keys walk the open group. Bound only while the
+    // lightbox is open and the group holds someone else, so the keys stay the page's the
+    // rest of the time.
+    useEffect(() => {
+        if (navOnArrowKeys !== true || !isOn || siblingsCount < 2)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'ArrowLeft') {
+                onPrevArrowPressed?.(isOn);
+                step(-1);
+            }
+            else if (e.key === 'ArrowRight') {
+                onNextArrowPressed?.(isOn);
+                step(1);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [navOnArrowKeys, isOn, siblingsCount, onPrevArrowPressed, onNextArrowPressed]);
+    // Fx. dep. hasAppliedDefault, isControlled, defaultIsOn, ownGroup, id - An
+    // uncontrolled lightbox asked to start open says so once, and never again: the
+    // registry owns the state from then on.
+    useEffect(() => {
+        if (hasAppliedDefault || isControlled || !defaultIsOn)
+            return;
+        setHasAppliedDefault(true);
+        openLightbox(ownGroup, id);
+    }, [hasAppliedDefault, isControlled, defaultIsOn, ownGroup, id]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, {
+        on: isOn,
+        off: !isOn,
+        grouped: isGrouped
+    }), className);
+    const size = sizeRef.current;
+    // Every child keeps its position in the tree whatever the state: the placeholder and
+    // the backdrop are always rendered, and the buttons come after the content rather
+    // than around it. React reconciles by position, so moving `children` from one branch
+    // to another would unmount and remount them - the very thing this component exists
+    // to avoid.
+    return _jsxs("div", { className: rootClss, ref: rootRef, children: [_jsx("div", { className: c('placeholder'), style: isOn && size !== null ? { width: size.width, height: size.height } : undefined }), _jsxs("div", { className: c('backdrop'), onClick: handleBackdropClick, ref: backdropRef, children: [_jsx("div", { className: c('content'), children: children }), isOn && _jsxs(_Fragment, { children: [_jsx("button", { type: 'button', className: c('close-btn'), onClick: handleCloseButtonClick, children: closeBtnContent }), siblingsCount > 1 && _jsxs(_Fragment, { children: [_jsx("button", { type: 'button', className: c('prev-btn'), onClick: handlePrevButtonClick, children: prevBtnContent }), _jsx("button", { type: 'button', className: c('next-btn'), onClick: handleNextButtonClick, children: nextBtnContent })] })] })] }), !isOn && isNotNullish(openBtnContent) && _jsx("button", { type: 'button', className: c('open-btn'), onClick: handleOpenButtonClick, children: openBtnContent })] });
+};

package/components/Lightbox/store.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The registry of lightbox groups, shared by every {@link Lightbox} on the page.
+ *
+ * Deliberately outside React. lm-link renders each component in its **own React
+ * root** — `renderInTarget` calls `createRoot` per component — so two `<lm-image>`
+ * in the same article never share a tree, and a context could not reach from one to
+ * the other. A module-level store can.
+ *
+ * Members are kept unordered here; the order that matters is the **document's**, and
+ * it is read from the DOM when a group opens. React's mount order is not it.
+ */
+/** What a member hands the store so the group can find and place it. */
+export type LightboxMember = {
+    id: string;
+    groups: string[];
+    /** The member's anchor in the page, for ordering. `null` before it mounts. */
+    getElement: () => HTMLElement | null;
+};
+export type LightboxState = {
+    /** The group currently open, `null` when nothing is. */
+    openGroup: string | null;
+    /** The member currently shown. */
+    openMemberId: string | null;
+};
+export declare function subscribe(listener: () => void): () => void;
+export declare function getState(): LightboxState;
+/** A member's own group, when it declared none: it is a group of one. */
+export declare function soloGroupOf(id: string): string;
+export declare function register(member: LightboxMember): void;
+export declare function unregister(id: string): void;
+/**
+ * The members of a group, in **document order**.
+ *
+ * `compareDocumentPosition` rather than mount order: React mounts a tree in its own
+ * order, and lm-link mounts each component in a root of its own, so nothing
+ * guarantees the two match. Only runs when a group opens or navigates, over a
+ * handful of members.
+ */
+export declare function membersOf(group: string): LightboxMember[];
+export declare function open(group: string, memberId: string): void;
+export declare function close(): void;
+/** Moves to another member of the open group by `offset`, clamped at both ends. */
+export declare function step(offset: number): void;

package/components/Lightbox/store.js

@@ -0,0 +1,94 @@
+/**
+ * The registry of lightbox groups, shared by every {@link Lightbox} on the page.
+ *
+ * Deliberately outside React. lm-link renders each component in its **own React
+ * root** — `renderInTarget` calls `createRoot` per component — so two `<lm-image>`
+ * in the same article never share a tree, and a context could not reach from one to
+ * the other. A module-level store can.
+ *
+ * Members are kept unordered here; the order that matters is the **document's**, and
+ * it is read from the DOM when a group opens. React's mount order is not it.
+ */
+const members = new Map();
+const listeners = new Set();
+let state = {
+    openGroup: null,
+    openMemberId: null
+};
+function emit() {
+    for (const listener of listeners)
+        listener();
+}
+function setState(next) {
+    if (next.openGroup === state.openGroup
+        && next.openMemberId === state.openMemberId)
+        return;
+    state = next;
+    emit();
+}
+export function subscribe(listener) {
+    listeners.add(listener);
+    return () => { listeners.delete(listener); };
+}
+export function getState() {
+    return state;
+}
+/** A member's own group, when it declared none: it is a group of one. */
+export function soloGroupOf(id) {
+    return `solo:${id}`;
+}
+export function register(member) {
+    members.set(member.id, member);
+    emit();
+}
+export function unregister(id) {
+    members.delete(id);
+    // A member leaving while it is the one shown would strand the group on nothing.
+    if (state.openMemberId === id)
+        setState({ openGroup: null, openMemberId: null });
+    else
+        emit();
+}
+/**
+ * The members of a group, in **document order**.
+ *
+ * `compareDocumentPosition` rather than mount order: React mounts a tree in its own
+ * order, and lm-link mounts each component in a root of its own, so nothing
+ * guarantees the two match. Only runs when a group opens or navigates, over a
+ * handful of members.
+ */
+export function membersOf(group) {
+    const found = [...members.values()].filter(member => member.groups.includes(group));
+    return found.sort((a, b) => {
+        const aElt = a.getElement();
+        const bElt = b.getElement();
+        if (aElt === null || bElt === null)
+            return 0;
+        const position = aElt.compareDocumentPosition(bElt);
+        if ((position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0)
+            return -1;
+        if ((position & Node.DOCUMENT_POSITION_PRECEDING) !== 0)
+            return 1;
+        return 0;
+    });
+}
+export function open(group, memberId) {
+    setState({ openGroup: group, openMemberId: memberId });
+}
+export function close() {
+    setState({ openGroup: null, openMemberId: null });
+}
+/** Moves to another member of the open group by `offset`, clamped at both ends. */
+export function step(offset) {
+    const { openGroup, openMemberId } = state;
+    if (openGroup === null || openMemberId === null)
+        return;
+    const ordered = membersOf(openGroup);
+    const current = ordered.findIndex(member => member.id === openMemberId);
+    if (current === -1)
+        return;
+    const target = ordered[Math.min(ordered.length - 1, Math.max(0, current + offset))];
+    if (target === undefined)
+        return;
+    setState({ openGroup, openMemberId: target.id });
+}

package/components/index.d.ts

@@ -10,6 +10,7 @@ export * as image from './Image/index.js'
 export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
+export * as lightbox from './Lightbox/index.js'
 export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
@@ -21,7 +22,6 @@ export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
 export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'
-export * as theatre from './Theatre/index.js'
 export * as uiModule from './UIModule/index.js'
 export * as video from './Video/index.js'
 export * as wipAudioQuote from './_WIP_AudioQuote/index.js'

package/components/index.js

@@ -10,6 +10,7 @@ export * as image from './Image/index.js'
 export * as input from './Input/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
 export * as jsonEditor from './JsonEditor/index.js'
+export * as lightbox from './Lightbox/index.js'
 export * as listLoader from './ListLoader/index.js'
 export * as overlayer from './Overlayer/index.js'
 export * as paginator from './Paginator/index.js'
@@ -21,7 +22,6 @@ export * as sequencer from './Sequencer/index.js'
 export * as shadowRoot from './ShadowRoot/index.js'
 export * as subtitles from './Subtitles/index.js'
 export * as textarea from './Textarea/index.js'
-export * as theatre from './Theatre/index.js'
 export * as uiModule from './UIModule/index.js'
 export * as video from './Video/index.js'
 export * as wipAudioQuote from './_WIP_AudioQuote/index.js'

package/components/public-classnames.d.ts

@@ -10,6 +10,7 @@ export declare const image = "lm-image";
 export declare const input = "lm-input";
 export declare const intersectionObserver = "lm-intersection-observer";
 export declare const jsonEditor = "lm-json-editor";
+export declare const lightbox = "lm-lightbox";
 export declare const listLoader = "lm-list-loader";
 export declare const overlayer = "lm-overlayer";
 export declare const paginator = "lm-paginator";
@@ -21,7 +22,6 @@ export declare const sequencer = "lm-sequencer";
 export declare const shadowRoot = "lm-shadow-root";
 export declare const subtitles = "lm-subtitles";
 export declare const textarea = "lm-textarea";
-export declare const theatre = "lm-theatre";
 export declare const uiModule = "lm-ui-module";
 export declare const video = "lm-video";
 export declare const videoWrapper = "lm-video-wrapper";

package/components/public-classnames.js

@@ -10,6 +10,7 @@ export const image = 'lm-image';
 export const input = 'lm-input';
 export const intersectionObserver = 'lm-intersection-observer';
 export const jsonEditor = 'lm-json-editor';
+export const lightbox = 'lm-lightbox';
 export const listLoader = 'lm-list-loader';
 export const overlayer = 'lm-overlayer';
 export const paginator = 'lm-paginator';
@@ -21,7 +22,6 @@ export const sequencer = 'lm-sequencer';
 export const shadowRoot = 'lm-shadow-root';
 export const subtitles = 'lm-subtitles';
 export const textarea = 'lm-textarea';
-export const theatre = 'lm-theatre';
 export const uiModule = 'lm-ui-module';
 export const video = 'lm-video';
 export const videoWrapper = 'lm-video-wrapper';

package/node/cloud-storage/operations/index.d.ts

@@ -4,8 +4,8 @@ export * as copyFile from './copy-file/index.js'
 export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'
-export * as removeDir from './remove-dir/index.js'
 export * as moveFile from './move-file/index.js'
+export * as removeDir from './remove-dir/index.js'
 export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'

package/node/cloud-storage/operations/index.js

@@ -4,8 +4,8 @@ export * as copyFile from './copy-file/index.js'
 export * as existsFile from './exists-file/index.js'
 export * as listDir from './list-dir/index.js'
 export * as moveDir from './move-dir/index.js'
-export * as removeDir from './remove-dir/index.js'
 export * as moveFile from './move-file/index.js'
+export * as removeDir from './remove-dir/index.js'
 export * as removeFile from './remove-file/index.js'
 export * as statFile from './stat-file/index.js'
 export * as uploadFile from './upload-file/index.js'

package/node/ftps/directory/index.d.ts

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as moveDir from './move-dir/index.js'

package/node/ftps/directory/index.js

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
 export * as list from './list/index.js'
-export * as moveDir from './move-dir/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as moveDir from './move-dir/index.js'

package/node/images/transform/operations/index.d.ts

@@ -1,12 +1,12 @@
 export * as blur from './blur/index.js'
-export * as extend from './extend/index.js'
 export * as brighten from './brighten/index.js'
+export * as extend from './extend/index.js'
 export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
 export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
-export * as level from './level/index.js'
 export * as hue from './hue/index.js'
+export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
 export * as normalize from './normalize/index.js'
 export * as overlay from './overlay/index.js'

package/node/images/transform/operations/index.js

@@ -1,12 +1,12 @@
 export * as blur from './blur/index.js'
-export * as extend from './extend/index.js'
 export * as brighten from './brighten/index.js'
+export * as extend from './extend/index.js'
 export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
 export * as flip from './flip/index.js'
 export * as flop from './flop/index.js'
-export * as level from './level/index.js'
 export * as hue from './hue/index.js'
+export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
 export * as normalize from './normalize/index.js'
 export * as overlay from './overlay/index.js'

package/node/index.d.ts

@@ -1,11 +1,11 @@
 export * as awsS3 from './@aws-s3/index.js'
-export * as express from './@express/index.js'
 export * as designEdito from './@design-edito/index.js'
+export * as express from './@express/index.js'
 export * as googleCloud from './@google-cloud/index.js'
-export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'
-export * as process from './process/index.js'
+export * as cloudStorage from './cloud-storage/index.js'
 export * as images from './images/index.js'
+export * as process from './process/index.js'
 export * as sftp from './sftp/index.js'

package/node/index.js

@@ -1,11 +1,11 @@
 export * as awsS3 from './@aws-s3/index.js'
-export * as express from './@express/index.js'
 export * as designEdito from './@design-edito/index.js'
+export * as express from './@express/index.js'
 export * as googleCloud from './@google-cloud/index.js'
-export * as cloudStorage from './cloud-storage/index.js'
 export * as encryption from './encryption/index.js'
 export * as files from './files/index.js'
 export * as ftps from './ftps/index.js'
-export * as process from './process/index.js'
+export * as cloudStorage from './cloud-storage/index.js'
 export * as images from './images/index.js'
+export * as process from './process/index.js'
 export * as sftp from './sftp/index.js'

package/node/sftp/index.d.ts

@@ -1,2 +1,2 @@
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/index.js'

package/node/sftp/index.js

@@ -1,2 +1,2 @@
-export * as directory from './directory/index.js'
 export * as file from './file/index.js'
+export * as directory from './directory/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "description": "",
   "author": "Maxime Fabas",
   "license": "ISC",
@@ -1495,6 +1495,13 @@
       "import": "./components/JsonEditor/types.js",
       "types": "./components/JsonEditor/types.d.ts"
     },
+    "./components/Lightbox": {
+      "import": "./components/Lightbox/index.js",
+      "types": "./components/Lightbox/index.d.ts"
+    },
+    "./components/Lightbox/index.js": {
+      "import": "./components/Lightbox/index.js"
+    },
     "./components/ListLoader": {
       "import": "./components/ListLoader/index.js",
       "types": "./components/ListLoader/index.d.ts"
@@ -1572,13 +1579,6 @@
     "./components/Textarea/index.js": {
       "import": "./components/Textarea/index.js"
     },
-    "./components/Theatre": {
-      "import": "./components/Theatre/index.js",
-      "types": "./components/Theatre/index.d.ts"
-    },
-    "./components/Theatre/index.js": {
-      "import": "./components/Theatre/index.js"
-    },
     "./components/UIModule": {
       "import": "./components/UIModule/index.js",
       "types": "./components/UIModule/index.d.ts"

package/components/Theatre/index.d.ts

@@ -1,70 +0,0 @@
-import { type FunctionComponent, type PropsWithChildren, type ReactNode } from 'react';
-import type { WithClassName } from '../utils/types.js';
-/**
- * Props for the {@link Theatre} component.
- *
- * @property closeBtnContent - Content rendered inside the close/exit button.
- * @property openBtnContent - Content rendered inside the open/enter button.
- * @property isOn - Controlled theatre mode state. When defined, the component
- * behaves as a controlled component and internal state is never updated.
- * @property defaultIsOn - Initial theatre mode state in uncontrolled mode.
- * Ignored when `isOn` is provided. Defaults to `false`.
- * @property exitOnEscape - When `true`, pressing `Escape` while the stage is
- * open counts as a toggle.
- * @property exitOnBgClick - When `true`, clicking the stage background — and
- * not its content — counts as a toggle.
- * @property onOpenButtonClicked - Called when the open button is clicked, before
- * the theatre reacts, with the state as it was.
- * @property onCloseButtonClicked - Called when the close button is clicked,
- * before the theatre reacts, with the state as it was.
- * @property onBackgroundClicked - Called when the stage background is clicked
- * (only while `exitOnBgClick` is `true`), before the theatre reacts, with the
- * state as it was.
- * @property onEscapePressed - Called when `Escape` is pressed while the stage is
- * open (only while `exitOnEscape` is `true`), before the theatre reacts, with
- * the state as it was.
- * @property onIsOnChanged - Called after the theatre mode changed, with the new
- * value.
- * @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;
-    onOpenButtonClicked?: (isOn: boolean) => void;
-    onCloseButtonClicked?: (isOn: boolean) => void;
-    onBackgroundClicked?: (isOn: boolean) => void;
-    onEscapePressed?: (isOn: boolean) => void;
-    onIsOnChanged?: (isOn: boolean) => void;
-}>>;
-/**
- * Theatre mode component. Wraps content in a toggleable fullscreen-like "stage"
- * overlay.
- *
- * ### CSS modifiers
- * - `on` — theatre mode is active.
- * - `off` — theatre mode is inactive.
- *
- * ### CSS elements
- * - `stage` — holds the duplicated `children`, mounted only when `isOn`.
- * - `open-btn`
- * - `close-btn`
- *
- * @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 both toggles.
- *
- * @remarks
- * - In controlled mode (`isOn` defined), the state is fully driven by the
- *   parent and internal state is never updated.
- * - The four toggle-source handlers fire in both modes — a controlled parent
- *   needs them to know a toggle was requested at all.
- * - `onIsOnChanged` fires in both modes too, and never on mount.
- */
-export declare const Theatre: FunctionComponent<Props>;