react-cheminfo 0.44.0 → 0.45.0

package/lib/core.d.ts

@@ -28,6 +28,7 @@ export * from './scatter3d/core/index.ts';
 export * from './seo/core/index.ts';
 export * from './share/core/index.ts';
 export * from './slides/core/index.ts';
+export * from './split/core/index.ts';
 export * from './state/core/index.ts';
 export * from './structure/core/index.ts';
 export * from './tokens/core/index.ts';

package/lib/core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC"}

package/lib/core.js

@@ -30,6 +30,7 @@ export * from "./share/core/index.js";
 // The deck format and its navigation are framework-free, so a backend can read
 // a manifest without loading React: `react-cheminfo/slides` is the player.
 export * from "./slides/core/index.js";
+export * from "./split/core/index.js";
 export * from "./state/core/index.js";
 // Framework-free molfile and editor-value helpers, so a worker can read a
 // molfile without loading the editor that `react-cheminfo/structure` exports.

package/lib/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,+EAA+E;AAC/E,2EAA2E;AAC3E,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,0EAA0E;AAC1E,8EAA8E;AAC9E,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"core.js","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,+EAA+E;AAC/E,2EAA2E;AAC3E,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,0EAA0E;AAC1E,8EAA8E;AAC9E,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC"}

package/lib/split/core/index.d.ts

@@ -0,0 +1,3 @@
+export type { SplitRange } from './split.ts';
+export { MAX_SPLIT, MIN_SPLIT, SPLIT_PARAM, clampSplit, splitParam, } from './split.ts';
+//# sourceMappingURL=index.d.ts.map

package/lib/split/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/split/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,UAAU,EACV,UAAU,GACX,MAAM,YAAY,CAAC"}

package/lib/split/core/index.js

@@ -0,0 +1,2 @@
+export { MAX_SPLIT, MIN_SPLIT, SPLIT_PARAM, clampSplit, splitParam, } from "./split.js";
+//# sourceMappingURL=index.js.map

package/lib/split/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/split/core/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,UAAU,EACV,UAAU,GACX,MAAM,YAAY,CAAC"}

package/lib/split/core/split.d.ts

@@ -0,0 +1,52 @@
+/**
+ * How a row holding two figures is divided, and how that travels in a link.
+ *
+ * The share is the *first* pane's, as a whole percentage, because it is written
+ * into the address: `?split=35` is a number somebody can read off a link,
+ * retype into a slide and hand out. A link that names none opens the page at
+ * its own default, and nothing is written until a splitter has been dragged, so
+ * an ordinary link stays an ordinary link.
+ *
+ * One name across the family: a reader who has learned to widen the chart on
+ * one of our tools has learned it on all of them.
+ */
+import type { ShareParamCodec } from '../../share/core/params.ts';
+/** Query parameter a row's division is carried in, on every site. */
+export declare const SPLIT_PARAM = "split";
+/**
+ * The narrowest either pane is left at. Under a fifth of the row neither side
+ * is read, and a drag that lands there is one nobody can undo without the
+ * splitter they have just squeezed out of sight.
+ */
+export declare const MIN_SPLIT = 20;
+/** The widest the first pane goes, which is {@link MIN_SPLIT} from the other end. */
+export declare const MAX_SPLIT: number;
+/** The range a row may be divided in, where a page wants its own. */
+export interface SplitRange {
+    /**
+     * The narrowest the first pane is left at.
+     * @default 20
+     */
+    min?: number;
+    /**
+     * The widest the first pane is left at.
+     * @default 80
+     */
+    max?: number;
+}
+/**
+ * The share to keep, given one asked for by a drag or named by a link.
+ * @param value - The share asked for.
+ * @param range - The range this row is divided in.
+ * @returns A whole percentage inside it.
+ */
+export declare function clampSplit(value: number, range?: SplitRange): number;
+/**
+ * The codec a site reads `split=` with, for its share vocabulary or its route
+ * table. `null` is "the page's own share", which is what an absent parameter
+ * and an unreadable one both mean, and what writes no parameter at all.
+ * @param range - The range this row is divided in.
+ * @returns The codec.
+ */
+export declare function splitParam(range?: SplitRange): ShareParamCodec<number | null>;
+//# sourceMappingURL=split.d.ts.map

package/lib/split/core/split.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["../../../src/split/core/split.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,qEAAqE;AACrE,eAAO,MAAM,WAAW,UAAU,CAAC;AAEnC;;;;GAIG;AACH,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,qFAAqF;AACrF,eAAO,MAAM,SAAS,QAAkB,CAAC;AAEzC,qEAAqE;AACrE,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAE,UAAe,GAAG,MAAM,CAGxE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,KAAK,GAAE,UAAe,GACrB,eAAe,CAAC,MAAM,GAAG,IAAI,CAAC,CAGhC"}

package/lib/split/core/split.js

@@ -0,0 +1,45 @@
+/**
+ * How a row holding two figures is divided, and how that travels in a link.
+ *
+ * The share is the *first* pane's, as a whole percentage, because it is written
+ * into the address: `?split=35` is a number somebody can read off a link,
+ * retype into a slide and hand out. A link that names none opens the page at
+ * its own default, and nothing is written until a splitter has been dragged, so
+ * an ordinary link stays an ordinary link.
+ *
+ * One name across the family: a reader who has learned to widen the chart on
+ * one of our tools has learned it on all of them.
+ */
+import { integerParam } from "../../share/core/params.js";
+/** Query parameter a row's division is carried in, on every site. */
+export const SPLIT_PARAM = 'split';
+/**
+ * The narrowest either pane is left at. Under a fifth of the row neither side
+ * is read, and a drag that lands there is one nobody can undo without the
+ * splitter they have just squeezed out of sight.
+ */
+export const MIN_SPLIT = 20;
+/** The widest the first pane goes, which is {@link MIN_SPLIT} from the other end. */
+export const MAX_SPLIT = 100 - MIN_SPLIT;
+/**
+ * The share to keep, given one asked for by a drag or named by a link.
+ * @param value - The share asked for.
+ * @param range - The range this row is divided in.
+ * @returns A whole percentage inside it.
+ */
+export function clampSplit(value, range = {}) {
+    const { min = MIN_SPLIT, max = MAX_SPLIT } = range;
+    return Math.min(max, Math.max(min, Math.round(value)));
+}
+/**
+ * The codec a site reads `split=` with, for its share vocabulary or its route
+ * table. `null` is "the page's own share", which is what an absent parameter
+ * and an unreadable one both mean, and what writes no parameter at all.
+ * @param range - The range this row is divided in.
+ * @returns The codec.
+ */
+export function splitParam(range = {}) {
+    const { min = MIN_SPLIT, max = MAX_SPLIT } = range;
+    return integerParam({ min, max, default: null });
+}
+//# sourceMappingURL=split.js.map

package/lib/split/core/split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split.js","sourceRoot":"","sources":["../../../src/split/core/split.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,qEAAqE;AACrE,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,EAAE,CAAC;AAE5B,qFAAqF;AACrF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,GAAG,SAAS,CAAC;AAgBzC;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,KAAa,EAAE,QAAoB,EAAE;IAC9D,MAAM,EAAE,GAAG,GAAG,SAAS,EAAE,GAAG,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACzD,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CACxB,QAAoB,EAAE;IAEtB,MAAM,EAAE,GAAG,GAAG,SAAS,EAAE,GAAG,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,OAAO,YAAY,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACnD,CAAC"}

package/lib/split/ui/SplitRow.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Two figures side by side, with a splitter between them and the share each
+ * takes written into the address.
+ *
+ * How much room the tool deserves beside the figure it feeds is not ours to
+ * decide: somebody embedding the chart wants it nearly whole, somebody
+ * teaching off the picker wants the picker nearly whole, and both want the
+ * link they hand out to open the way they left it. So the splitter is dragged,
+ * the share it comes to rest at goes into `?split=`, and the address is the
+ * figure.
+ *
+ * Two things it cannot do, and must not pretend to: on a narrow screen there
+ * is no room for two columns at all, so the panes stack and no splitter is
+ * drawn; and a link that hid everything one pane holds leaves the other the
+ * whole width rather than a share of it.
+ *
+ * The bar itself is react-science's `SplitPane`, and it keeps react-science's
+ * look — barely visible on purpose, found by the pointer that changes over it
+ * rather than by the eye. All `chrome.css` says about it is that eleven pixels
+ * is more gutter than two figures need.
+ */
+import type { ReactElement, ReactNode } from 'react';
+import type { SplitRange } from '../core/split.ts';
+/** Props of {@link SplitRow}. */
+export interface SplitRowProps extends SplitRange {
+    /**
+     * Share of the row the first pane takes, as a whole percentage, or `null`
+     * while the page sits at {@link SplitRowProps.defaultRatio}.
+     */
+    ratio: number | null;
+    /** The share the row opens at when the address names none. */
+    defaultRatio: number;
+    /**
+     * Take the share a drag came to rest at, or `null` when the splitter was
+     * double-clicked back to the default.
+     */
+    onRatio: (ratio: number | null) => void;
+    /** The left-hand pane, or `null` when a link left nothing in it. */
+    start: ReactNode;
+    /** The right-hand pane, or `null` when a link left nothing in it. */
+    end: ReactNode;
+    /**
+     * The narrowest row that is still split; under it the two panes stack.
+     * @default 860
+     */
+    stackBelow?: number;
+    /**
+     * The gutter each pane keeps beside the splitter, in pixels, so neither
+     * figure is read against its edge.
+     * @default 6
+     */
+    gutter?: number;
+    /**
+     * The gap between the two panes once they have stacked, in pixels.
+     * @default 16
+     */
+    stackedGap?: number;
+}
+/**
+ * Two panes sharing a row, divided where the address says.
+ * @param props - See {@link SplitRowProps}.
+ * @returns The two panes with the splitter between them, the two stacked on a
+ * narrow screen, or whichever one a link left on the page, alone.
+ */
+export declare function SplitRow(props: SplitRowProps): ReactElement | null;
+//# sourceMappingURL=SplitRow.d.ts.map

package/lib/split/ui/SplitRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitRow.d.ts","sourceRoot":"","sources":["../../../src/split/ui/SplitRow.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,iCAAiC;AACjC,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,oEAAoE;IACpE,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,GAAG,EAAE,SAAS,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,GAAG,IAAI,CAwFlE"}

package/lib/split/ui/SplitRow.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { SplitPane } from 'react-science/ui';
+import { useResizeObserver } from "../../hooks/ui/useResizeObserver.js";
+import { clampSplit } from "../core/split.js";
+/**
+ * Two panes sharing a row, divided where the address says.
+ * @param props - See {@link SplitRowProps}.
+ * @returns The two panes with the splitter between them, the two stacked on a
+ * narrow screen, or whichever one a link left on the page, alone.
+ */
+export function SplitRow(props) {
+    const { ratio, defaultRatio, onRatio, start, end, min, max, stackBelow = STACK_BELOW, gutter = GUTTER, stackedGap = STACKED_GAP, } = props;
+    const row = useRef(null);
+    const [width, setWidth] = useState(windowWidth);
+    // The share under the pointer, which is not the one in the address: a drag
+    // reports every pixel it crosses, and the address is rewritten once, where
+    // the splitter is let go.
+    const [dragged, setDragged] = useState(null);
+    useResizeObserver(row, (size) => {
+        setWidth(size.width);
+    });
+    if (start === null && end === null)
+        return null;
+    const stacked = start === null || end === null || width < stackBelow;
+    const startPane = start === null ? null : (_jsx("div", { "data-testid": "split-start", style: stacked ? STACKED_PANE : paneStyle('start', gutter), children: start }));
+    const endPane = end === null ? null : (_jsx("div", { "data-testid": "split-end", style: stacked ? STACKED_PANE : paneStyle('end', gutter), children: end }));
+    if (stacked) {
+        return (_jsxs("div", { ref: row, style: { ...STACK, gap: stackedGap }, children: [startPane, endPane] }));
+    }
+    const share = clampSplit(dragged ?? ratio ?? defaultRatio, { min, max });
+    return (_jsx("div", { ref: row, className: "split-row", children: _jsxs(SplitPane, { direction: "horizontal", controlledSide: "start", size: `${share}%`, 
+            // Held open, so the only layout a visitor can reach is one the address
+            // describes: left to itself a double click collapses a pane, and a link
+            // shared from there would open with the pane back. The double click is
+            // answered here instead, by returning to the page's own share.
+            open: true, onOpenChange: () => {
+                setDragged(null);
+                onRatio(null);
+            }, onSizeChange: (asked) => {
+                setDragged(shareOf(asked, share, { min, max }));
+            }, onResize: (asked) => {
+                const rested = shareOf(asked, share, { min, max });
+                setDragged(null);
+                onRatio(rested);
+            }, children: [startPane, endPane] }) }));
+}
+/**
+ * The share a splitter asked for.
+ * @param asked - What it reported, a percentage because that is what it was
+ * given.
+ * @param current - The share in force, kept when the report is not a number.
+ * @param range - The range this row is divided in.
+ * @returns A whole percentage inside it.
+ */
+function shareOf(asked, current, range) {
+    const value = Number.parseFloat(asked);
+    return Number.isFinite(value) ? clampSplit(value, range) : current;
+}
+/**
+ * How wide the window is, which is what the row is taken to be until it has
+ * been measured. Reading it rather than starting at zero is what keeps a wide
+ * page from laying itself out stacked and splitting a frame later, which would
+ * build both figures twice on every load.
+ * @returns The width in pixels, or the threshold itself where there is no
+ * window to read — a test, or a page rendered to a string — which is the
+ * narrowest a row is still split at.
+ */
+function windowWidth() {
+    const { innerWidth } = globalThis;
+    return typeof innerWidth === 'number' && innerWidth > 0
+        ? innerWidth
+        : STACK_BELOW;
+}
+/** The narrowest row that is still split, in pixels. */
+const STACK_BELOW = 860;
+/** The gutter a pane keeps beside the splitter, in pixels. */
+const GUTTER = 6;
+/** The gap between the panes once they have stacked, in pixels. */
+const STACKED_GAP = 16;
+const STACK = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+const STACKED_PANE = {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 0,
+};
+function paneStyle(side, gutter) {
+    return {
+        display: 'flex',
+        flex: '1 1 0%',
+        flexDirection: 'column',
+        minWidth: 0,
+        [side === 'start' ? 'paddingRight' : 'paddingLeft']: gutter,
+    };
+}
+//# sourceMappingURL=SplitRow.js.map

package/lib/split/ui/SplitRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitRow.js","sourceRoot":"","sources":["../../../src/split/ui/SplitRow.tsx"],"names":[],"mappings":"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"}

package/lib/split/ui/index.d.ts

@@ -0,0 +1,3 @@
+export type { SplitRowProps } from './SplitRow.tsx';
+export { SplitRow } from './SplitRow.tsx';
+//# sourceMappingURL=index.d.ts.map

package/lib/split/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/split/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/split/ui/index.js

@@ -0,0 +1,2 @@
+export { SplitRow } from "./SplitRow.js";
+//# sourceMappingURL=index.js.map

package/lib/split/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/split/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC"}

package/lib/ui.d.ts

@@ -30,6 +30,7 @@ export * from './scatter/ui/index.ts';
 export * from './scatter3d/ui/index.ts';
 export * from './share/ui/index.ts';
 export * from './shared/ui/index.ts';
+export * from './split/ui/index.ts';
 export type { ConformerTableProps } from './structure/ui/ConformerTable.tsx';
 export { ConformerTable } from './structure/ui/ConformerTable.tsx';
 export type { ConformerColumn } from './structure/ui/conformerColumns.ts';

package/lib/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AAKrC,YAAY,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,eAAe,GAChB,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AAKpC,YAAY,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,eAAe,GAChB,MAAM,oCAAoC,CAAC"}

package/lib/ui.js

@@ -30,6 +30,7 @@ export * from "./scatter/ui/index.js";
 export * from "./scatter3d/ui/index.js";
 export * from "./share/ui/index.js";
 export * from "./shared/ui/index.js";
+export * from "./split/ui/index.js";
 export { ConformerTable } from "./structure/ui/ConformerTable.js";
 export { CONFORMER_COLUMN_LABELS, PICKER_COLUMNS, RANKING_COLUMNS, } from "./structure/ui/conformerColumns.js";
 //# sourceMappingURL=ui.js.map

package/lib/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AAMrC,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAmC,CAAC;AAEnE,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,eAAe,GAChB,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AAMpC,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAmC,CAAC;AAEnE,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,eAAe,GAChB,MAAM,oCAAoC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "license": "MIT",
   "description": "React components, hooks and framework-free helpers shared by the cheminfo sites: site chrome, citations, sharing, routing, pedagogy, charts, and the structure, orbital and 3D molecule viewers",
   "author": "Luc Patiny",

package/src/core.ts

@@ -30,6 +30,7 @@ export * from './share/core/index.ts';
 // The deck format and its navigation are framework-free, so a backend can read
 // a manifest without loading React: `react-cheminfo/slides` is the player.
 export * from './slides/core/index.ts';
+export * from './split/core/index.ts';
 export * from './state/core/index.ts';
 // Framework-free molfile and editor-value helpers, so a worker can read a
 // molfile without loading the editor that `react-cheminfo/structure` exports.

package/src/split/core/index.ts

@@ -0,0 +1,8 @@
+export type { SplitRange } from './split.ts';
+export {
+  MAX_SPLIT,
+  MIN_SPLIT,
+  SPLIT_PARAM,
+  clampSplit,
+  splitParam,
+} from './split.ts';

package/src/split/core/split.ts

@@ -0,0 +1,67 @@
+/**
+ * How a row holding two figures is divided, and how that travels in a link.
+ *
+ * The share is the *first* pane's, as a whole percentage, because it is written
+ * into the address: `?split=35` is a number somebody can read off a link,
+ * retype into a slide and hand out. A link that names none opens the page at
+ * its own default, and nothing is written until a splitter has been dragged, so
+ * an ordinary link stays an ordinary link.
+ *
+ * One name across the family: a reader who has learned to widen the chart on
+ * one of our tools has learned it on all of them.
+ */
+
+import type { ShareParamCodec } from '../../share/core/params.ts';
+import { integerParam } from '../../share/core/params.ts';
+
+/** Query parameter a row's division is carried in, on every site. */
+export const SPLIT_PARAM = 'split';
+
+/**
+ * The narrowest either pane is left at. Under a fifth of the row neither side
+ * is read, and a drag that lands there is one nobody can undo without the
+ * splitter they have just squeezed out of sight.
+ */
+export const MIN_SPLIT = 20;
+
+/** The widest the first pane goes, which is {@link MIN_SPLIT} from the other end. */
+export const MAX_SPLIT = 100 - MIN_SPLIT;
+
+/** The range a row may be divided in, where a page wants its own. */
+export interface SplitRange {
+  /**
+   * The narrowest the first pane is left at.
+   * @default 20
+   */
+  min?: number;
+  /**
+   * The widest the first pane is left at.
+   * @default 80
+   */
+  max?: number;
+}
+
+/**
+ * The share to keep, given one asked for by a drag or named by a link.
+ * @param value - The share asked for.
+ * @param range - The range this row is divided in.
+ * @returns A whole percentage inside it.
+ */
+export function clampSplit(value: number, range: SplitRange = {}): number {
+  const { min = MIN_SPLIT, max = MAX_SPLIT } = range;
+  return Math.min(max, Math.max(min, Math.round(value)));
+}
+
+/**
+ * The codec a site reads `split=` with, for its share vocabulary or its route
+ * table. `null` is "the page's own share", which is what an absent parameter
+ * and an unreadable one both mean, and what writes no parameter at all.
+ * @param range - The range this row is divided in.
+ * @returns The codec.
+ */
+export function splitParam(
+  range: SplitRange = {},
+): ShareParamCodec<number | null> {
+  const { min = MIN_SPLIT, max = MAX_SPLIT } = range;
+  return integerParam({ min, max, default: null });
+}

package/src/split/ui/SplitRow.tsx

@@ -0,0 +1,225 @@
+/**
+ * Two figures side by side, with a splitter between them and the share each
+ * takes written into the address.
+ *
+ * How much room the tool deserves beside the figure it feeds is not ours to
+ * decide: somebody embedding the chart wants it nearly whole, somebody
+ * teaching off the picker wants the picker nearly whole, and both want the
+ * link they hand out to open the way they left it. So the splitter is dragged,
+ * the share it comes to rest at goes into `?split=`, and the address is the
+ * figure.
+ *
+ * Two things it cannot do, and must not pretend to: on a narrow screen there
+ * is no room for two columns at all, so the panes stack and no splitter is
+ * drawn; and a link that hid everything one pane holds leaves the other the
+ * whole width rather than a share of it.
+ *
+ * The bar itself is react-science's `SplitPane`, and it keeps react-science's
+ * look — barely visible on purpose, found by the pointer that changes over it
+ * rather than by the eye. All `chrome.css` says about it is that eleven pixels
+ * is more gutter than two figures need.
+ */
+
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import { useRef, useState } from 'react';
+import type { SplitPaneSize } from 'react-science/ui';
+import { SplitPane } from 'react-science/ui';
+
+import { useResizeObserver } from '../../hooks/ui/useResizeObserver.ts';
+import type { SplitRange } from '../core/split.ts';
+import { clampSplit } from '../core/split.ts';
+
+/** Props of {@link SplitRow}. */
+export interface SplitRowProps extends SplitRange {
+  /**
+   * Share of the row the first pane takes, as a whole percentage, or `null`
+   * while the page sits at {@link SplitRowProps.defaultRatio}.
+   */
+  ratio: number | null;
+  /** The share the row opens at when the address names none. */
+  defaultRatio: number;
+  /**
+   * Take the share a drag came to rest at, or `null` when the splitter was
+   * double-clicked back to the default.
+   */
+  onRatio: (ratio: number | null) => void;
+  /** The left-hand pane, or `null` when a link left nothing in it. */
+  start: ReactNode;
+  /** The right-hand pane, or `null` when a link left nothing in it. */
+  end: ReactNode;
+  /**
+   * The narrowest row that is still split; under it the two panes stack.
+   * @default 860
+   */
+  stackBelow?: number;
+  /**
+   * The gutter each pane keeps beside the splitter, in pixels, so neither
+   * figure is read against its edge.
+   * @default 6
+   */
+  gutter?: number;
+  /**
+   * The gap between the two panes once they have stacked, in pixels.
+   * @default 16
+   */
+  stackedGap?: number;
+}
+
+/**
+ * Two panes sharing a row, divided where the address says.
+ * @param props - See {@link SplitRowProps}.
+ * @returns The two panes with the splitter between them, the two stacked on a
+ * narrow screen, or whichever one a link left on the page, alone.
+ */
+export function SplitRow(props: SplitRowProps): ReactElement | null {
+  const {
+    ratio,
+    defaultRatio,
+    onRatio,
+    start,
+    end,
+    min,
+    max,
+    stackBelow = STACK_BELOW,
+    gutter = GUTTER,
+    stackedGap = STACKED_GAP,
+  } = props;
+  const row = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(windowWidth);
+  // The share under the pointer, which is not the one in the address: a drag
+  // reports every pixel it crosses, and the address is rewritten once, where
+  // the splitter is let go.
+  const [dragged, setDragged] = useState<number | null>(null);
+
+  useResizeObserver(row, (size) => {
+    setWidth(size.width);
+  });
+
+  if (start === null && end === null) return null;
+
+  const stacked = start === null || end === null || width < stackBelow;
+  const startPane =
+    start === null ? null : (
+      <div
+        data-testid="split-start"
+        style={stacked ? STACKED_PANE : paneStyle('start', gutter)}
+      >
+        {start}
+      </div>
+    );
+  const endPane =
+    end === null ? null : (
+      <div
+        data-testid="split-end"
+        style={stacked ? STACKED_PANE : paneStyle('end', gutter)}
+      >
+        {end}
+      </div>
+    );
+
+  if (stacked) {
+    return (
+      <div ref={row} style={{ ...STACK, gap: stackedGap }}>
+        {startPane}
+        {endPane}
+      </div>
+    );
+  }
+
+  const share = clampSplit(dragged ?? ratio ?? defaultRatio, { min, max });
+
+  return (
+    // `split-row` is what `chrome.css` reaches the bar through: it is
+    // react-science's own element and carries no class of ours.
+    <div ref={row} className="split-row">
+      <SplitPane
+        direction="horizontal"
+        controlledSide="start"
+        size={`${share}%`}
+        // Held open, so the only layout a visitor can reach is one the address
+        // describes: left to itself a double click collapses a pane, and a link
+        // shared from there would open with the pane back. The double click is
+        // answered here instead, by returning to the page's own share.
+        open
+        onOpenChange={() => {
+          setDragged(null);
+          onRatio(null);
+        }}
+        onSizeChange={(asked) => {
+          setDragged(shareOf(asked, share, { min, max }));
+        }}
+        onResize={(asked) => {
+          const rested = shareOf(asked, share, { min, max });
+          setDragged(null);
+          onRatio(rested);
+        }}
+      >
+        {startPane}
+        {endPane}
+      </SplitPane>
+    </div>
+  );
+}
+
+/**
+ * The share a splitter asked for.
+ * @param asked - What it reported, a percentage because that is what it was
+ * given.
+ * @param current - The share in force, kept when the report is not a number.
+ * @param range - The range this row is divided in.
+ * @returns A whole percentage inside it.
+ */
+function shareOf(
+  asked: SplitPaneSize,
+  current: number,
+  range: SplitRange,
+): number {
+  const value = Number.parseFloat(asked);
+  return Number.isFinite(value) ? clampSplit(value, range) : current;
+}
+
+/**
+ * How wide the window is, which is what the row is taken to be until it has
+ * been measured. Reading it rather than starting at zero is what keeps a wide
+ * page from laying itself out stacked and splitting a frame later, which would
+ * build both figures twice on every load.
+ * @returns The width in pixels, or the threshold itself where there is no
+ * window to read — a test, or a page rendered to a string — which is the
+ * narrowest a row is still split at.
+ */
+function windowWidth(): number {
+  const { innerWidth } = globalThis;
+  return typeof innerWidth === 'number' && innerWidth > 0
+    ? innerWidth
+    : STACK_BELOW;
+}
+
+/** The narrowest row that is still split, in pixels. */
+const STACK_BELOW = 860;
+
+/** The gutter a pane keeps beside the splitter, in pixels. */
+const GUTTER = 6;
+
+/** The gap between the panes once they have stacked, in pixels. */
+const STACKED_GAP = 16;
+
+const STACK = {
+  display: 'flex',
+  flexDirection: 'column',
+} as const satisfies CSSProperties;
+
+const STACKED_PANE = {
+  display: 'flex',
+  flexDirection: 'column',
+  minWidth: 0,
+} as const satisfies CSSProperties;
+
+function paneStyle(side: 'start' | 'end', gutter: number): CSSProperties {
+  return {
+    display: 'flex',
+    flex: '1 1 0%',
+    flexDirection: 'column',
+    minWidth: 0,
+    [side === 'start' ? 'paddingRight' : 'paddingLeft']: gutter,
+  };
+}

package/src/split/ui/index.ts

@@ -0,0 +1,2 @@
+export type { SplitRowProps } from './SplitRow.tsx';
+export { SplitRow } from './SplitRow.tsx';

package/src/ui.ts

@@ -30,6 +30,7 @@ export * from './scatter/ui/index.ts';
 export * from './scatter3d/ui/index.ts';
 export * from './share/ui/index.ts';
 export * from './shared/ui/index.ts';
+export * from './split/ui/index.ts';
 // The conformer table, from the structure module's file rather than its
 // barrel: `structure/ui/index.ts` is the door that must never reach react-ocl,
 // and this component does not, but `react-cheminfo/conformers` is imported by

package/styles/chrome.css

@@ -1173,6 +1173,24 @@ select,
   color: var(--accent);
 }
 
+/* ── The splitter ───────────────────────────────────────────────────────── */
+
+/*
+  The bar between the two figures of a `<SplitRow>` is react-science's, and it
+  keeps react-science's look — the pale track with the grip written on it that
+  NMRium and every other tool of ours is divided by. It is barely visible on
+  purpose: what is read is the two figures, and the bar is found by the pointer
+  that changes over it rather than by the eye.
+
+  All this says is that eleven pixels is more gutter than two figures need.
+  `:nth-child(2)` is the bar: a split is only mounted with a pane on each side
+  of it, so the three children are always side, bar, side.
+*/
+.split-row > div > div:nth-child(2) {
+  width: 7px;
+  min-width: 7px;
+}
+
 /* ── Printing ────────────────────────────────────────────────────────────── */
 
 /*