@design-edito/tools 0.5.37 → 0.5.39

package/components/Clippable/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames } from '../utils/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/index.js';
 import { clippable as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /** How long the `clipped` modifier stays on after a successful write. */

package/components/Disclaimer/index.d.ts

@@ -3,7 +3,7 @@ import type { WithClassName } from '../utils/types.js';
 /**
  * Props for the {@link Disclaimer} component.
  *
- * @property children - The content the disclaimer gates, rendered below the panel.
+ * @property children - The content the disclaimer withholds, rendered below the panel.
  * @property undisclosedContent - Content displayed inside the disclaimer panel,
  * until it is dismissed.
  * @property togglerContent - Content rendered inside the dismiss toggler.
@@ -41,7 +41,7 @@ export type Props = PropsWithChildren<WithClassName<{
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A root `<div>` holding the disclaimer panel and the gated content.
+ * @returns A root `<div>` holding the disclaimer panel and the withheld content.
  *
  * @remarks
  * - In controlled mode (`isOn` defined), visibility is fully driven by the

package/components/Disclaimer/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { useStateChangeDispatch } from '../../agnostic/@react/effects/use-state-change-dispatch/index.js';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/index.js';
 import { disclaimer as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**
@@ -19,7 +20,7 @@ import cssModule from './styles.module.css';
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @returns A root `<div>` holding the disclaimer panel and the gated content.
+ * @returns A root `<div>` holding the disclaimer panel and the withheld content.
  *
  * @remarks
  * - In controlled mode (`isOn` defined), visibility is fully driven by the
@@ -34,7 +35,7 @@ export const Disclaimer = ({ children, undisclosedContent, togglerContent, isOn:
     const isControlled = isOnProp !== undefined;
     const isOn = isOnProp ?? internalIsOn;
     // State dispatch
-    useChangeDispatch(isOn, onIsOnChanged);
+    useStateChangeDispatch(isOn, onIsOnChanged);
     // User action handlers
     const handleDismissClick = () => {
         onDismissClicked?.(isOn);

package/components/Drawer/index.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from 'react';
+import { useStateChangeDispatch } from '../../agnostic/@react/effects/use-state-change-dispatch/index.js';
 import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/index.js';
 import { ResizeObserverComponent } from '../ResizeObserver/index.js';
-import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
 import { drawer as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**
@@ -130,8 +131,8 @@ export const Drawer = ({ openerContent, closerContent, openerBtnSelector, closer
     useToggleMarking(openerRef, openerBtnSelector, openerBtnClss, openerContent);
     useToggleMarking(closerRef, resolvedCloserBtnSelector, closerBtnClss, resolvedCloserContent);
     // State dispatch
-    useChangeDispatch(isOpened, onIsOpenedChanged);
-    useChangeDispatch(contentDimensions, dimensions => { if (dimensions !== undefined)
+    useStateChangeDispatch(isOpened, onIsOpenedChanged);
+    useStateChangeDispatch(contentDimensions, dimensions => { if (dimensions !== undefined)
         onContentResized?.(dimensions); }, (a, b) => a?.width === b?.width && a?.height === b?.height);
     // User action handlers
     const handleOpenerClick = (event) => {

package/components/EventListener/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames } from '../utils/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/index.js';
 import { eventListener as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**

package/components/Gallery/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, useCallback, useEffect, useRef, useState } from 'react';
+import { useStateChangeDispatch } from '../../agnostic/@react/effects/use-state-change-dispatch/index.js';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/index.js';
 import { gallery as publicClassName } from '../public-classnames.js';
 import { EMPTY_GEOMETRY, measureGeometry, readActiveIndex, readReach } from './utils.js';
 import cssModule from './styles.module.css';
@@ -53,9 +54,9 @@ export const Gallery = ({ offsetLeft, offsetRight, offset, prevButtonContent, ne
     // gallery was told to be, rather than where a smooth scroll has got to so far.
     const activeIndex = active ?? scrolledIndex;
     // State dispatch
-    useChangeDispatch(activeIndex, onActiveSlotChanged);
-    useChangeDispatch(canGoLeft, onCanGoLeftChanged);
-    useChangeDispatch(canGoRight, onCanGoRightChanged);
+    useStateChangeDispatch(activeIndex, onActiveSlotChanged);
+    useStateChangeDispatch(canGoLeft, onCanGoLeftChanged);
+    useStateChangeDispatch(canGoRight, onCanGoRightChanged);
     const readScroll = useCallback(() => {
         const scrollerElt = scrollerRef.current;
         if (scrollerElt === null)

package/components/Iframe/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
 import { randomHash } from '../../agnostic/random/uuid/index.js';
-import { mergeClassNames } from '../utils/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/index.js';
 import { iframe as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 const innerAutoHeightNotifier = (messageType) => `<script>

package/components/Image/index.d.ts

@@ -12,7 +12,7 @@ import type { WithClassName } from '../utils/types.js';
  * `<source>` inside a `<video>` carries `src` and nothing else useful, where this one
  * carries `srcSet`, `media` and `sizes`, and neither element accepts the other's
  * attributes. What the two do share is how a list of them is read — see
- * `parseSourceList` in `components/utils`, whose `stringKey` is exactly that difference.
+ * `parseSrcSetSourcesList` in `Video/utils`, whose `stringKey` is exactly that difference.
  */
 type SourceData = {
     srcSet?: string;

package/components/Image/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames, parseSourceList } from '../utils/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/index.js';
+import { parseSrcSetSourcesList } from '../Video/utils.js';
 import { image as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**
@@ -19,7 +20,7 @@ import cssModule from './styles.module.css';
  */
 export const Image = ({ sources, className, ...intrinsicImgAttributes }) => {
     // State
-    const parsedSources = useMemo(() => parseSourceList(sources, 'srcSet'), [sources]);
+    const parsedSources = useMemo(() => parseSrcSetSourcesList(sources, 'srcSet'), [sources]);
     // Rendering
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(), className);

package/components/Input/index.js

@@ -3,7 +3,7 @@ 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 { mergeClassNames } from '../utils/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/index.js';
 import { input as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**

package/components/IntersectionObserver/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames } from '../utils/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/index.js';
 import { intersectionObserver as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
 /**

package/components/JsonEditor/index.js

@@ -3,10 +3,10 @@ import { useState } from 'react';
 import { ZodError } from 'zod';
 import { randomHash } from '../../agnostic/random/uuid/index.js';
 import { isNonNullObject } from '../../agnostic/objects/is-object/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/index.js';
 import { Input } from '../Input/index.js';
 import { Select } from '../Select/index.js';
 import { Textarea } from '../Textarea/index.js';
-import { mergeClassNames } from '../utils/index.js';
 import { c, getValueType } from './utils.js';
 /**
  * Interactive JSON editor component.

package/components/JsonEditor/types.d.ts

@@ -1,11 +1,5 @@
-/** A JSON value that contains no other value. */
 export type JsonPrimitive = string | number | boolean | null;
-/** Any value `JSON.parse` can produce, and the type the editor reads and emits. */
 export type JsonValue = JsonPrimitive | JsonValue[] | {
     [k: string]: JsonValue;
 };
-/**
- * The editor's name for a value's kind. It is what the type selector offers, and
- * what modifies the `value` class name on each node.
- */
 export type ValueType = 'string' | 'number' | 'boolean' | 'null' | 'array' | 'record';

package/components/JsonEditor/utils.d.ts

@@ -1,8 +1,3 @@
 import type { JsonValue, ValueType } from './types.js';
-/**
- * Shared by every editor in the tree — they all emit class names under the same
- * public prefix, so a single instance is what keeps them consistent.
- */
 export declare const c: import("../../agnostic/css/clss/index.js").ClssMaker;
-/** Which {@link ValueType} a value belongs to. */
 export declare function getValueType(value: JsonValue): ValueType;

package/components/JsonEditor/utils.js

@@ -2,12 +2,7 @@ import { clss } from '../../agnostic/css/clss/index.js';
 import { isNonNullObject } from '../../agnostic/objects/is-object/index.js';
 import { jsonEditor as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
-/**
- * Shared by every editor in the tree — they all emit class names under the same
- * public prefix, so a single instance is what keeps them consistent.
- */
 export const c = clss(publicClassName, { cssModule });
-/** Which {@link ValueType} a value belongs to. */
 export function getValueType(value) {
     if (value === null)
         return 'null';

package/components/Lightbox/index.d.ts

@@ -3,10 +3,10 @@ import type { WithClassName } from '../utils/types.js';
 /**
  * Props for the {@link Lightbox} component.
  *
- * @property group - The group(s) this lightbox belongs to. Members of a group share
- * one lightbox and are navigable from it, in document order. The **first** group is the
- * one a click on this member opens; the others only matter when another member opens
- * them. Declaring none makes it a group of its own.
+ * @property group - The group(s) this lightbox belongs to. The lightboxes of a group
+ * are navigable from one another, in document order. The **first** group is the one a
+ * click on this lightbox opens; the others only matter when another lightbox of them is
+ * opened. Declaring none makes it a group of its own.
  * @property closeBtnContent - Content rendered inside the close button.
  * @property openBtnContent - Content rendered inside the open button. Left empty, the
  * button is still rendered: a stylesheet hides an empty control with `:empty`, and the
@@ -14,13 +14,13 @@ import type { WithClassName } from '../utils/types.js';
  * @property prevBtnContent - Content rendered inside the previous button. The button is
  * always rendered; the root's `navigable` modifier says whether it has anywhere to go.
  * @property nextBtnContent - Content rendered inside the next button, same.
- * @property isOn - Controlled state. When defined, this member is driven by the
- * parent and the shared registry never opens or closes it.
+ * @property isOn - Controlled state. When defined, this lightbox is driven by the
+ * parent and the shared store never opens or closes it.
  * @property defaultIsOn - Whether the lightbox starts open, in uncontrolled mode.
  * Ignored when `isOn` is provided. Defaults to `false`.
  * @property exitOnEscape - When `true`, pressing `Escape` closes the lightbox.
  * @property navOnArrowKeys - When `true`, the left and right arrow keys move through
- * the open group. Only has an effect on a group of more than one member.
+ * the open group. Only has an effect on a group of more than one lightbox.
  * @property exitOnBgClick - When `true`, clicking the backdrop, and not its
  * content, closes it.
  * @property openOnClick - When `true`, clicking the content opens the lightbox. An
@@ -40,7 +40,7 @@ import type { WithClassName } from '../utils/types.js';
  * @property onPrevArrowPressed - Called when the left arrow is pressed while the lightbox
  * is open (only while `navOnArrowKeys` is `true`), before the lightbox reacts.
  * @property onNextArrowPressed - Same, for the right arrow.
- * @property onIsOnChanged - Called after this member's state changed, with the new
+ * @property onIsOnChanged - Called after this lightbox's state changed, with the new
  * value.
  * @property className - Optional additional class name(s) applied to the root element.
  * @property children - The content, rendered in place while closed and moved onto the
@@ -74,7 +74,7 @@ export type Props = PropsWithChildren<WithClassName<{
  * when opened.
  *
  * ### CSS modifiers
- * - `on` - this member is open.
+ * - `on` - this lightbox is open.
  * - `off` - it is not.
  * - `grouped` - it belongs to a group it did not invent.
  * - `navigable` - that group holds someone else, so the previous and next controls
@@ -113,9 +113,9 @@ export type Props = PropsWithChildren<WithClassName<{
  *   the popover API - would do the opposite, being document-wide and above
  *   everything, and paint over whichever article is being read.
  * - **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.
+ *   component in a root of its own, in which case the lightboxes of a group share no
+ *   tree and a context could not reach from one to the other.
+ * - Every lightbox 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

package/components/Lightbox/index.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { useStateChangeDispatch } from '../../agnostic/@react/effects/use-state-change-dispatch/index.js';
 import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
+import { mergeClassNames } from '../../agnostic/css/merge-class-names/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 { closeLightbox, getGroupLightboxes, getLightboxesStoreState, navigateOpenGroupBy, openLightbox, registerLightbox, unregisterLightbox, watchLightboxesStoreState } 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.
+ * - `on` - this lightbox is open.
  * - `off` - it is not.
  * - `grouped` - it belongs to a group it did not invent.
  * - `navigable` - that group holds someone else, so the previous and next controls
@@ -49,9 +50,9 @@ import cssModule from './styles.module.css';
  *   the popover API - would do the opposite, being document-wide and above
  *   everything, and paint over whichever article is being read.
  * - **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.
+ *   component in a root of its own, in which case the lightboxes of a group share no
+ *   tree and a context could not reach from one to the other.
+ * - Every lightbox 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
@@ -66,26 +67,27 @@ export const Lightbox = ({ group, closeBtnContent, openBtnContent, prevBtnConten
     const sizeRef = useRef(null);
     const [hasAppliedDefault, setHasAppliedDefault] = useState(false);
     const isControlled = isOnProp !== undefined;
-    const declaredGroups = group === undefined
-        ? []
-        : (Array.isArray(group) ? group : [group]);
+    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.
+    const groups = isGrouped ? declaredGroups : [`solo:${id}`];
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const ownGroup = groups[0];
+    const primaryGroup = groups[0];
     const groupsKey = groups.join(' ');
-    const storeState = useSyncExternalStore(subscribe, getState, getState);
-    const isOn = isOnProp ?? (storeState.openMemberId === id);
+    const [storeState, setStoreState] = useState(getLightboxesStoreState);
+    // Fx. dep. none - The read catches a store that moved before this effect ran.
+    useEffect(() => {
+        setStoreState(getLightboxesStoreState());
+        return watchLightboxesStoreState(() => setStoreState(getLightboxesStoreState()));
+    }, []);
+    const isOn = isOnProp ?? (storeState.openLightboxId === 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
+    const openGroupSize = isOn && openGroup !== null ? getGroupLightboxes(openGroup).length : 0;
+    // Fx. dep. id, groupsKey - Joins the store, which is what lets another lightbox of
+    // the group reach this one. `getElement` rather than the element itself: the store
     // reads it when it needs to order the group, and never holds it.
     useEffect(() => {
-        register({ id, groups, getElement: () => rootRef.current });
-        return () => unregister(id);
+        registerLightbox({ id, groups, getElement: () => rootRef.current });
+        return () => unregisterLightbox(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
@@ -103,13 +105,13 @@ export const Lightbox = ({ group, closeBtnContent, openBtnContent, prevBtnConten
         sizeRef.current = { width, height };
     });
     // State dispatch
-    useChangeDispatch(isOn, onIsOnChanged);
+    useStateChangeDispatch(isOn, onIsOnChanged);
     // User action handlers
     const requestOpen = useCallback(() => {
         if (isControlled)
             return;
-        openLightbox(ownGroup, id);
-    }, [isControlled, ownGroup, id]);
+        openLightbox(primaryGroup, id);
+    }, [isControlled, primaryGroup, id]);
     const requestClose = useCallback(() => {
         if (isControlled)
             return;
@@ -125,11 +127,11 @@ export const Lightbox = ({ group, closeBtnContent, openBtnContent, prevBtnConten
     };
     const handlePrevButtonClick = () => {
         onPrevButtonClicked?.(isOn);
-        step(-1);
+        navigateOpenGroupBy(-1);
     };
     const handleNextButtonClick = () => {
         onNextButtonClicked?.(isOn);
-        step(1);
+        navigateOpenGroupBy(1);
     };
     const handleContentClick = () => {
         if (openOnClick !== true || isOn)
@@ -160,42 +162,42 @@ export const Lightbox = ({ group, closeBtnContent, openBtnContent, prevBtnConten
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [exitOnEscape, isOn, requestClose, onEscapePressed]);
-    // Fx. dep. navOnArrowKeys, isOn, siblingsCount, onPrevArrowPressed,
+    // Fx. dep. navOnArrowKeys, isOn, openGroupSize, 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)
+        if (navOnArrowKeys !== true || !isOn || openGroupSize < 2)
             return;
         const handleKeyDown = (e) => {
             if (e.key === 'ArrowLeft') {
                 onPrevArrowPressed?.(isOn);
-                step(-1);
+                navigateOpenGroupBy(-1);
             }
             else if (e.key === 'ArrowRight') {
                 onNextArrowPressed?.(isOn);
-                step(1);
+                navigateOpenGroupBy(1);
             }
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [navOnArrowKeys, isOn, siblingsCount, onPrevArrowPressed, onNextArrowPressed]);
-    // Fx. dep. hasAppliedDefault, isControlled, defaultIsOn, ownGroup, id - An
+    }, [navOnArrowKeys, isOn, openGroupSize, onPrevArrowPressed, onNextArrowPressed]);
+    // Fx. dep. hasAppliedDefault, isControlled, defaultIsOn, primaryGroup, 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]);
+        openLightbox(primaryGroup, id);
+    }, [hasAppliedDefault, isControlled, defaultIsOn, primaryGroup, id]);
     // Rendering
     const c = clss(publicClassName, { cssModule });
     const rootClss = mergeClassNames(c(null, {
         on: isOn,
         off: !isOn,
         grouped: isGrouped,
-        navigable: siblingsCount > 1,
+        navigable: openGroupSize > 1,
         'open-on-click': openOnClick === true && !isOn
     }), className);
     const size = sizeRef.current;

package/components/Lightbox/store.d.ts

@@ -1,43 +1,9 @@
-/**
- * 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;
+import type { LightboxesStoreState, RegisteredLightbox } from './types.js';
+export declare const getLightboxesStoreState: () => LightboxesStoreState;
+export declare function watchLightboxesStoreState(onStoreStateChange: () => void): () => void;
+export declare function registerLightbox(lightbox: RegisteredLightbox): void;
+export declare function unregisterLightbox(lightboxId: string): void;
+export declare function getGroupLightboxes(group: string): RegisteredLightbox[];
+export declare function openLightbox(group: string, lightboxId: string): void;
+export declare function closeLightbox(): void;
+export declare function navigateOpenGroupBy(offset: number): void;