react-cheminfo 0.44.0 → 0.46.0

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.46.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/chart/core/chartDomain.ts

@@ -80,18 +80,29 @@ export const DEFAULT_Y_AXIS_RULES: Required<YAxisRules> = {
  * between forty and sixty percent", so a drag narrows the horizontal axis and
  * leaves the height alone unless it is released past the baseline.
  *
+ * `dual` is the same reading gesture with a gate a reader can predict: a drag
+ * kept level narrows the horizontal axis alone, and one taken far enough up or
+ * down brings the height with it. It is what `xAxis` cannot be on a chart whose
+ * vertical axis has no baseline to cross — a titration curve climbing from pH 2
+ * to pH 12, a speciation diagram drawn over decades — where "has the pointer
+ * passed zero" is a question about the margin rather than about the data, and
+ * the answer to it is no for every drag made inside the plot. Here both windows
+ * are asked for where the curve is, and the preview changes shape as the
+ * threshold is crossed, so the rectangle is found by the hand that was already
+ * drawing one.
+ *
  * `box` is the tool: while it is chosen, the rectangle dragged out is the window,
  * both axes at once. It is a mode rather than a modifier because it is used in
  * runs — a baseline being examined is examined several times over — and a
  * modifier held down through each of them is a worse gesture than a tool pressed
  * once.
  *
- * The two are named apart from the whole of `DragMode` so that a chart offering
- * nothing but zoom tools can say so in its own signature — which is what stops
- * `select`, the one drag that moves no axis, from reaching a chart with no
- * handler for it.
+ * The three are named apart from the whole of `DragMode` so that a chart
+ * offering nothing but zoom tools can say so in its own signature — which is
+ * what stops `select`, the one drag that moves no axis, from reaching a chart
+ * with no handler for it.
  */
-export type ZoomDragMode = 'xAxis' | 'box';
+export type ZoomDragMode = 'xAxis' | 'dual' | 'box';
 
 /**
  * What a drag across the plot asks for.

package/src/chart/core/index.ts

@@ -169,7 +169,9 @@ export {
 } from './viewTransform.ts';
 export type { DragBox, ZoomSelection } from './zoomDomain.ts';
 export {
+  DUAL_ZOOM_TRAVEL,
   MINIMUM_DRAG,
+  draggedBeyondLevel,
   releasedBeyondBaseline,
   scaledYAxis,
   zoomSelection,

package/src/chart/core/selectionGeometry.ts

@@ -34,9 +34,10 @@ export interface SelectionRectangle {
  * A drag that takes the y axis with it is drawn at the height of the drag
  * itself, and one that asks for the x axis alone spans the whole plot.
  * That is the gesture announcing itself before the button is let go: the
- * rectangle changing shape as the pointer crosses the baseline is the only
- * warning a user gets that the release is about to move both axes, and it is one
- * they can still act on.
+ * rectangle changing shape — as the pointer crosses the baseline, or as a
+ * `dual` drag leaves the level it started on — is the only warning a user gets
+ * that the release is about to move both axes, and it is one they can still act
+ * on.
  *
  * A drag too short to zoom draws nothing at all. Below `MINIMUM_DRAG` the
  * release does nothing — most clicks made on a trackpad wobble by a pixel or two

package/src/chart/core/zoomDomain.ts

@@ -10,7 +10,7 @@
 
 import { clamp } from '../../format/core/clamp.ts';
 
-import type { ChartDomain, ZoomRules } from './chartDomain.ts';
+import type { ChartDomain, DragMode, ZoomRules } from './chartDomain.ts';
 import { DEFAULT_Y_AXIS_RULES } from './chartDomain.ts';
 import type { PlotRect } from './chartGeometry.ts';
 import type { ChartScale } from './chartScale.ts';
@@ -30,6 +30,19 @@ import { chartPixel, chartValue } from './chartScale.ts';
  */
 export const MINIMUM_DRAG = 4;
 
+/**
+ * How far a `dual` drag has to travel vertically before it brings the y axis
+ * with it, in user units of the SVG.
+ *
+ * Far enough above `MINIMUM_DRAG` that no drag meant to stay level reaches it by
+ * the tremor of a hand or the slope of a trackpad swipe, and near enough that
+ * the rectangle a reader wants costs one gesture rather than a reach for the
+ * margin. The preview changes shape on the pixel it is crossed, so the number
+ * itself never has to be learnt: the first drag that crosses it teaches the
+ * gesture, and the first that recrosses it back shows the way out.
+ */
+export const DUAL_ZOOM_TRAVEL = 24;
+
 /** The two corners of a drag, in the user units of the SVG. */
 export interface DragBox {
   /** Where the press landed, horizontally. */
@@ -58,9 +71,9 @@ export interface ZoomSelection extends DragBox {
  * than by the rectangle itself — so what the preview promises and what letting
  * go actually does are the same test rather than two that have to agree.
  *
- * A `select` drag is therefore always a band, however far past the baseline it
- * strays: its answer is two numbers on one axis, so a preview that grew into a
- * rectangle would promise a height nobody is ever told about.
+ * Which answer a mode gives is `takesYAxis`'s business, so a `select` drag is
+ * always a band however far past the baseline it strays, and a `dual` drag
+ * becomes a rectangle the moment it has travelled `DUAL_ZOOM_TRAVEL`.
  * @param drag - The drag being made, `null` when none is.
  * @param yScale - The y axis as it is currently zoomed.
  * @param rules - How the y axis behaves and what a drag means, defaulting to a
@@ -83,16 +96,26 @@ export function zoomSelection(
     fromY: drag.fromY,
     toX: drag.toX,
     toY: drag.toY,
-    // The box tool takes the height always, so the preview is a rectangle from
-    // the first pixel of the gesture rather than a full-height band that
-    // suddenly becomes one; a select drag never takes it at all.
-    zoomsYAxis:
-      mode === 'box' ||
-      (mode !== 'select' &&
-        releasedBeyondBaseline(drag.toY, yScale, baseline, pointsDown)),
+    zoomsYAxis: takesYAxis(drag, mode, yScale, baseline, pointsDown),
   };
 }
 
+/**
+ * Whether a drag has left the level it started on by enough to ask for the y
+ * axis as well.
+ *
+ * Measured as the hand made it, before any clamping to the plot: a drag that ran
+ * out over the tick labels travelled however far it travelled. Nothing is
+ * latched — the answer is read off the two corners and nothing else — so a
+ * reader who drifted down and came back up is promised a band again, and the
+ * preview says so while the button is still down.
+ * @param drag - The drag being made or released, in user units of the SVG.
+ * @returns Whether the height comes along.
+ */
+export function draggedBeyondLevel(drag: DragBox): boolean {
+  return Math.abs(drag.toY - drag.fromY) >= DUAL_ZOOM_TRAVEL;
+}
+
 /**
  * Whether a drag let go here asks for the y axis as well.
  *
@@ -178,24 +201,19 @@ export function zoomedDomain(
     Math.min(firstX, secondX),
     Math.max(firstX, secondX),
   ];
-  // The box tool is asked for the rectangle it was given, wherever it was let
-  // go; the reading gesture takes the height only when it crossed the baseline.
-  if (
-    mode !== 'box' &&
-    !releasedBeyondBaseline(drag.toY, yScale, baseline, pointsDown)
-  ) {
+  if (!takesYAxis(drag, mode, yScale, baseline, pointsDown)) {
     return { x, y: current.y };
   }
 
   const fromY = chartValue(yScale, clamp(drag.fromY, plot.top, plot.bottom));
   const toY = chartValue(yScale, clamp(drag.toY, plot.top, plot.bottom));
   // Both ends, so a baseline the data runs *down* from — 100 percent
-  // transmittance — is kept as surely as one it stands on. The box tool holds no
-  // baseline at all: a rectangle dragged round a feature is a promise about
-  // exactly that rectangle, and a viewer whose axis rules keep its baseline
-  // would otherwise see the tool quietly return a taller window than the one
-  // drawn.
-  const holdBaseline = keepBaseline && mode !== 'box';
+  // transmittance — is kept as surely as one it stands on. Only the reading
+  // gesture holds a baseline: a rectangle dragged out deliberately, by the box
+  // tool or by a `dual` drag that left its level, is a promise about exactly
+  // that rectangle, and a viewer whose axis rules keep its baseline would
+  // otherwise see a taller window than the one drawn.
+  const holdBaseline = keepBaseline && mode === 'xAxis';
   const bottom = holdBaseline
     ? Math.min(baseline, fromY, toY)
     : Math.min(fromY, toY);
@@ -233,3 +251,36 @@ export function scaledYAxis(
   ];
   return y[1] > y[0] ? { x: current.x, y } : current;
 }
+
+/**
+ * Whether a drag brings the y axis with it, which is the one question the
+ * preview and the release must never answer differently.
+ *
+ * Asked once, here, rather than by each of them: a rectangle that promises a
+ * height the release then refuses teaches a reader that the chart is
+ * unreliable, and two copies of this test are how that comes about.
+ *
+ * The box tool takes the height always, so its preview is a rectangle from the
+ * first pixel of the gesture rather than a full-height band that suddenly
+ * becomes one. A `select` drag never takes it at all: its answer is two numbers
+ * on one axis, and a preview that grew into a rectangle would promise a height
+ * nobody is ever told about.
+ * @param drag - The drag being made or released, in user units of the SVG.
+ * @param mode - What a drag on this chart asks for.
+ * @param yScale - The y axis as it is currently zoomed.
+ * @param baseline - The value the reading gesture is judged against.
+ * @param pointsDown - Whether the data hangs below that baseline.
+ * @returns Whether the height comes along.
+ */
+function takesYAxis(
+  drag: DragBox,
+  mode: DragMode,
+  yScale: ChartScale,
+  baseline: number,
+  pointsDown: boolean,
+): boolean {
+  if (mode === 'box') return true;
+  if (mode === 'select') return false;
+  if (mode === 'dual') return draggedBeyondLevel(drag);
+  return releasedBeyondBaseline(drag.toY, yScale, baseline, pointsDown);
+}

package/src/chart/ui/SelectionRect.tsx

@@ -36,6 +36,10 @@ export function SelectionRect(props: SelectionRectProps): ReactElement | null {
 
   return (
     <rect
+      // Named, because the shape of this rectangle is the whole promise a drag
+      // makes — a band for the x axis alone, the drawn height for both — and
+      // the only way to check the promise is to measure it mid-drag.
+      data-testid="chart-selection"
       x={rectangle.x}
       y={rectangle.y}
       width={rectangle.width}

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 });
+}