react-cheminfo 0.45.0 → 0.47.0

package/lib/periodic/ui/PeriodicTableChrome.js

@@ -4,15 +4,17 @@ import { TOKEN } from "../../tokens/core/familyTokens.js";
 import { COLUMN_COUNT, INNER_TRANSITION_MARKERS, INNER_TRANSITION_ROWS, } from "../core/layout.js";
 import { ofWidth } from "./unit.js";
 /**
- * The 1–18 strip along the top and the 1–7 strip down the left.
+ * The 1–18 strip along the top, the 1–7 strip down the left, and the corner
+ * where they meet.
  *
  * They are buttons when the table takes a range: "plot period 3" is one click
- * there and eight on the cells.
+ * there and eight on the cells. The corner takes the whole table, which is the
+ * gesture a spreadsheet has taught everybody.
  * @param props - See {@link HeaderStripsProps}.
- * @returns The two strips, placed on the grid.
+ * @returns The two strips, the corner, and the inner-transition period numbers.
  */
 export function HeaderStrips(props) {
-    const { onSelectRange } = props;
+    const { onSelectRange, onSelectAll } = props;
     const t = useChromeT();
     const groups = [];
     for (let group = 1; group <= COLUMN_COUNT; group++) {
@@ -36,7 +38,17 @@ export function HeaderStrips(props) {
                     });
                 }) }, `period-${String(period)}`));
     }
-    return (_jsxs(_Fragment, { children: [groups, periods, INNER_TRANSITION_ROWS.map(({ row, period }) => (_jsx("div", { style: { ...headerStyle, gridColumn: 1, gridRow: row + 1 }, children: period }, `inner-${String(row)}`)))] }));
+    return (_jsxs(_Fragment, { children: [onSelectAll === undefined ? null : (_jsx(HeaderCell
+            // The glyph points into the grid it takes, as a spreadsheet's does.
+            // It is a mark rather than a word because the corner is a
+            // seventeenth of the table's width, and the word differs in every
+            // language the chrome speaks.
+            , { 
+                // The glyph points into the grid it takes, as a spreadsheet's does.
+                // It is a mark rather than a word because the corner is a
+                // seventeenth of the table's width, and the word differs in every
+                // language the chrome speaks.
+                label: "\u25E2", title: t('periodic.allElements'), column: 1, row: 1, onClick: onSelectAll })), groups, periods, INNER_TRANSITION_ROWS.map(({ row, period }) => (_jsx("div", { style: { ...headerStyle, gridColumn: 1, gridRow: row + 1 }, children: period }, `inner-${String(row)}`)))] }));
 }
 /**
  * The two cells the lanthanoids and the actinoids were lifted out of.
@@ -66,7 +78,7 @@ function HeaderCell(props) {
     const style = { ...headerStyle, gridColumn: column, gridRow: row };
     if (onClick === undefined)
         return _jsx("div", { style: style, children: label });
-    return (_jsx("button", { type: "button", "aria-label": title, onClick: onClick, style: { ...style, ...headerButtonStyle }, children: label }));
+    return (_jsx("button", { type: "button", "aria-label": title, title: title, onClick: onClick, style: { ...style, ...headerButtonStyle }, children: label }));
 }
 const headerStyle = {
     alignItems: 'center',

package/lib/periodic/ui/PeriodicTableChrome.js.map

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

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

@@ -0,0 +1,30 @@
+/**
+ * Two figures one above the other, with a splitter between them and the share
+ * each takes written into the address.
+ *
+ * The body is `splitPanes.tsx`, which `<SplitRow>` shares; its header is where
+ * the design is written down.
+ */
+import type { ReactElement } from 'react';
+import type { SplitPanesProps } from './splitPanes.tsx';
+/**
+ * Props of {@link SplitColumn}. `start` is the top pane, `end` the bottom one,
+ * and `stackBelow` a height.
+ */
+export type SplitColumnProps = SplitPanesProps;
+/**
+ * Two panes sharing a column, divided where the address says.
+ *
+ * **A share needs a height to be a share of.** Put this inside a box that has
+ * one — a workbench pane, a page that fills the viewport — not inside an
+ * ordinary page column, whose height is whatever its content comes to. Given
+ * no height to divide, it measures nothing, says nothing about it, and simply
+ * stacks the two panes with no splitter, which is what an ordinary page wanted
+ * anyway.
+ *
+ * @param props - See {@link SplitColumnProps}.
+ * @returns The two panes with the splitter between them, the two stacked where
+ * there is no height to divide, or whichever one a link left, alone.
+ */
+export declare function SplitColumn(props: SplitColumnProps): ReactElement | null;
+//# sourceMappingURL=SplitColumn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitColumn.d.ts","sourceRoot":"","sources":["../../../src/split/ui/SplitColumn.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC;AAE/C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAExE"}

package/lib/split/ui/SplitColumn.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SplitPanes } from "./splitPanes.js";
+/**
+ * Two panes sharing a column, divided where the address says.
+ *
+ * **A share needs a height to be a share of.** Put this inside a box that has
+ * one — a workbench pane, a page that fills the viewport — not inside an
+ * ordinary page column, whose height is whatever its content comes to. Given
+ * no height to divide, it measures nothing, says nothing about it, and simply
+ * stacks the two panes with no splitter, which is what an ordinary page wanted
+ * anyway.
+ *
+ * @param props - See {@link SplitColumnProps}.
+ * @returns The two panes with the splitter between them, the two stacked where
+ * there is no height to divide, or whichever one a link left, alone.
+ */
+export function SplitColumn(props) {
+    return _jsx(SplitPanes, { direction: "vertical", ...props });
+}
+//# sourceMappingURL=SplitColumn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitColumn.js","sourceRoot":"","sources":["../../../src/split/ui/SplitColumn.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAQ9C;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,KAAC,UAAU,IAAC,SAAS,EAAC,UAAU,KAAK,KAAK,GAAI,CAAC;AACxD,CAAC"}

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

@@ -2,62 +2,24 @@
  * 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.
+ * The body is `splitPanes.tsx`, which `<SplitColumn>` shares; its header is
+ * where the design is written down.
+ */
+import type { ReactElement } from 'react';
+import type { SplitPanesProps } from './splitPanes.tsx';
+/**
+ * Props of {@link SplitRow}. `start` is the left-hand pane, `end` the
+ * right-hand one, and `stackBelow` a width.
  */
-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;
-}
+export type SplitRowProps = SplitPanesProps;
 /**
  * Two panes sharing a row, divided where the address says.
+ *
+ * **Set `max` where the first pane stops being able to use the room.** A pane
+ * of forms dragged past about half the row does not grow: the labels stay put
+ * and the fields stretch to a width nobody types into, so the room becomes
+ * empty card. The figure beside it is what the drag exists to enlarge.
+ *
  * @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.

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

@@ -1 +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"}
+{"version":3,"file":"SplitRow.d.ts","sourceRoot":"","sources":["../../../src/split/ui/SplitRow.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,eAAe,CAAC;AAE5C;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,GAAG,IAAI,CAElE"}

package/lib/split/ui/SplitRow.js

@@ -1,99 +1,18 @@
-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";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SplitPanes } from "./splitPanes.js";
 /**
  * Two panes sharing a row, divided where the address says.
+ *
+ * **Set `max` where the first pane stops being able to use the room.** A pane
+ * of forms dragged past about half the row does not grow: the labels stay put
+ * and the fields stretch to a width nobody types into, so the room becomes
+ * empty card. The figure beside it is what the drag exists to enlarge.
+ *
  * @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,
-    };
+    return _jsx(SplitPanes, { direction: "horizontal", ...props });
 }
 //# sourceMappingURL=SplitRow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplitRow.js","sourceRoot":"","sources":["../../../src/split/ui/SplitRow.tsx"],"names":[],"mappings":";AAuBA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAsC9C;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,KAAK,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,EACH,GAAG,EACH,UAAU,GAAG,WAAW,EACxB,MAAM,GAAG,MAAM,EACf,UAAU,GAAG,WAAW,GACzB,GAAG,KAAK,CAAC;IACV,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAChD,2EAA2E;IAC3E,2EAA2E;IAC3E,0BAA0B;IAC1B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE5D,iBAAiB,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QAC9B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,IAAI,KAAK,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAEhD,MAAM,OAAO,GAAG,KAAK,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,GAAG,UAAU,CAAC;IACrE,MAAM,SAAS,GACb,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACtB,6BACc,aAAa,EACzB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,YAEzD,KAAK,GACF,CACP,CAAC;IACJ,MAAM,OAAO,GACX,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACpB,6BACc,WAAW,EACvB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,YAEvD,GAAG,GACA,CACP,CAAC;IAEJ,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,aAChD,SAAS,EACT,OAAO,IACJ,CACP,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,IAAI,KAAK,IAAI,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IAEzE,OAAO,CAGL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,WAAW,YAClC,MAAC,SAAS,IACR,SAAS,EAAC,YAAY,EACtB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAE,GAAG,KAAK,GAAG;YACjB,uEAAuE;YACvE,wEAAwE;YACxE,uEAAuE;YACvE,+DAA+D;YAC/D,IAAI,QACJ,YAAY,EAAE,GAAG,EAAE;gBACjB,UAAU,CAAC,IAAI,CAAC,CAAC;gBACjB,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,EACD,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE;gBACtB,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;YAClD,CAAC,EACD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,MAAM,MAAM,GAAG,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;gBACnD,UAAU,CAAC,IAAI,CAAC,CAAC;gBACjB,OAAO,CAAC,MAAM,CAAC,CAAC;YAClB,CAAC,aAEA,SAAS,EACT,OAAO,IACE,GACR,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,OAAO,CACd,KAAoB,EACpB,OAAe,EACf,KAAiB;IAEjB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACvC,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;AACrE,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,WAAW;IAClB,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC;IAClC,OAAO,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,GAAG,CAAC;QACrD,CAAC,CAAC,UAAU;QACZ,CAAC,CAAC,WAAW,CAAC;AAClB,CAAC;AAED,wDAAwD;AACxD,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,8DAA8D;AAC9D,MAAM,MAAM,GAAG,CAAC,CAAC;AAEjB,mEAAmE;AACnE,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB,MAAM,KAAK,GAAG;IACZ,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;CACS,CAAC;AAEnC,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE,CAAC;CACqB,CAAC;AAEnC,SAAS,SAAS,CAAC,IAAqB,EAAE,MAAc;IACtD,OAAO;QACL,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,QAAQ;QACd,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,CAAC;QACX,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,MAAM;KAC5D,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SplitRow.js","sourceRoot":"","sources":["../../../src/split/ui/SplitRow.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAQ9C;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,OAAO,KAAC,UAAU,IAAC,SAAS,EAAC,YAAY,KAAK,KAAK,GAAI,CAAC;AAC1D,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/split/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/split/ui/index.js

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

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

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

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

@@ -0,0 +1,73 @@
+/**
+ * Two figures with a splitter between them, and the share each takes written
+ * into the address. The body of `<SplitRow>` and `<SplitColumn>` both.
+ *
+ * How much room one half deserves beside the other 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 screen with no room
+ * for two the panes stack and no splitter is drawn; and a link that hid
+ * everything one pane holds leaves the other the whole of it rather than a
+ * share.
+ *
+ * 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';
+/** What both splitters take. */
+export interface SplitPanesProps extends SplitRange {
+    /**
+     * Share of the box the first pane takes, as a whole percentage, or `null`
+     * while the page sits at {@link SplitPanesProps.defaultRatio}.
+     */
+    ratio: number | null;
+    /** The share it 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 first pane — left, or top — or `null` when a link left nothing in it. */
+    start: ReactNode;
+    /** The second pane, or `null` when a link left nothing in it. */
+    end: ReactNode;
+    /**
+     * The smallest box that is still split, in pixels — a width for a row, a
+     * height for a column. Under it the two panes stack and no splitter is drawn.
+     * @default 860 across, 420 down
+     */
+    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;
+}
+/** What {@link SplitPanes} takes on top of the public props. */
+interface InternalProps extends SplitPanesProps {
+    /** Across the box, or down it. */
+    direction: 'horizontal' | 'vertical';
+}
+/**
+ * The two panes, divided where the address says.
+ *
+ * @param props - See {@link SplitPanesProps}.
+ * @returns The panes with the splitter between them, the two stacked where
+ * there is no room for both, or whichever one a link left, alone.
+ */
+export declare function SplitPanes(props: InternalProps): ReactElement | null;
+export {};
+//# sourceMappingURL=splitPanes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"splitPanes.d.ts","sourceRoot":"","sources":["../../../src/split/ui/splitPanes.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,gCAAgC;AAChC,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,GAAG,EAAE,SAAS,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,gEAAgE;AAChE,UAAU,aAAc,SAAQ,eAAe;IAC7C,kCAAkC;IAClC,SAAS,EAAE,YAAY,GAAG,UAAU,CAAC;CACtC;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,GAAG,IAAI,CA6FpE"}

package/lib/split/ui/splitPanes.js

@@ -0,0 +1,128 @@
+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";
+/**
+ * The two panes, divided where the address says.
+ *
+ * @param props - See {@link SplitPanesProps}.
+ * @returns The panes with the splitter between them, the two stacked where
+ * there is no room for both, or whichever one a link left, alone.
+ */
+export function SplitPanes(props) {
+    const { direction, ratio, defaultRatio, onRatio, start, end, min, max, stackBelow = direction === 'horizontal' ? STACK_ACROSS : STACK_DOWN, gutter = GUTTER, stackedGap = STACKED_GAP, } = props;
+    const across = direction === 'horizontal';
+    const box = useRef(null);
+    const [size, setSize] = useState(() => viewportSize(across, stackBelow));
+    // 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(box, (measured) => {
+        setSize(across ? measured.width : measured.height);
+    });
+    if (start === null && end === null)
+        return null;
+    // A column divided by a share needs a box of a definite height to take a
+    // share of; in an ordinary page-height one it would measure zero and both
+    // panes would collapse, so it stacks instead and says nothing about it.
+    const stacked = start === null || end === null || size < stackBelow;
+    const startPane = start === null ? null : (_jsx("div", { "data-testid": "split-start", style: stacked ? STACKED_PANE : paneStyle(across, 'start', gutter), children: start }));
+    const endPane = end === null ? null : (_jsx("div", { "data-testid": "split-end", style: stacked ? STACKED_PANE : paneStyle(across, 'end', gutter), children: end }));
+    if (stacked) {
+        return (_jsxs("div", { ref: box, style: { ...STACK, gap: stackedGap }, children: [startPane, endPane] }));
+    }
+    const share = clampSplit(dragged ?? ratio ?? defaultRatio, { min, max });
+    return (_jsx("div", { ref: box, className: "split-row", style: across ? undefined : FILL, children: _jsxs(SplitPane, { direction: direction, 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 box 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 big the window is, which is what the box 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.
+ *
+ * @param across - Whether the box is divided across or down.
+ * @param fallback - What to answer where there is no window to read — a test,
+ * or a page rendered to a string.
+ * @returns The size in pixels.
+ */
+function viewportSize(across, fallback) {
+    const measure = across ? globalThis.innerWidth : globalThis.innerHeight;
+    return typeof measure === 'number' && measure > 0 ? measure : fallback;
+}
+/** The narrowest box still divided across, in pixels. */
+const STACK_ACROSS = 860;
+/**
+ * The shortest box still divided down, in pixels. Two figures sharing less than
+ * this have about two hundred pixels each, which is under what any of them
+ * reads at.
+ */
+const STACK_DOWN = 420;
+/** 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',
+    minHeight: 0,
+};
+const STACKED_PANE = {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 0,
+    minHeight: 0,
+};
+/** A column takes the height it is given, so its share has something to divide. */
+const FILL = {
+    display: 'flex',
+    flex: '1 1 0%',
+    flexDirection: 'column',
+    minHeight: 0,
+};
+function paneStyle(across, side, gutter) {
+    const edge = across
+        ? side === 'start'
+            ? 'paddingRight'
+            : 'paddingLeft'
+        : side === 'start'
+            ? 'paddingBottom'
+            : 'paddingTop';
+    return {
+        display: 'flex',
+        flex: '1 1 0%',
+        flexDirection: 'column',
+        minWidth: 0,
+        minHeight: 0,
+        [edge]: gutter,
+    };
+}
+//# sourceMappingURL=splitPanes.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.45.0",
+  "version": "0.47.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",