react-cheminfo 0.46.0 → 0.47.0

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.46.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",

package/src/chart/core/chartDomain.ts

@@ -163,12 +163,27 @@ export interface ZoomGestures {
    * @default true
    */
   wheel?: boolean;
+  /**
+   * Whether the chart answers `f` with a window fitted to everything drawn.
+   *
+   * The same thing the double click does, reachable without a pointer — and the
+   * one gesture a reader cannot discover by trying, which is why the key is the
+   * same `f` on every chart of the family rather than each one choosing.
+   *
+   * Turned off by a viewer that already owns its keys: the infrared shell runs
+   * `f` through its own command table, where the key is listed in a toolbar
+   * tooltip and in the documentation panel, and fits every pane of a stack
+   * rather than the one chart the pointer is on.
+   * @default true
+   */
+  keys?: boolean;
 }
 
 /** What the gestures come to when a viewer states none of them. */
 export const DEFAULT_ZOOM_GESTURES: Required<ZoomGestures> = {
   drag: 'xAxis',
   wheel: true,
+  keys: true,
 };
 
 /**

package/src/chart/core/selectionGeometry.ts

@@ -31,8 +31,10 @@ export interface SelectionRectangle {
 /**
  * The rectangle to draw for a drag being made.
  *
- * 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.
+ * A drag that takes the y axis with it is drawn at the height `zoomSelection`
+ * worked out — the window the release will take, which is the drag's own height
+ * stretched to any baseline the viewer holds — 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, or as a
  * `dual` drag leaves the level it started on — is the only warning a user gets

package/src/chart/core/zoomDomain.ts

@@ -55,7 +55,17 @@ export interface DragBox {
   toY: number;
 }
 
-/** The drag as it is being made, for the preview rectangle to be drawn from. */
+/**
+ * The drag as it is being made, for the preview rectangle to be drawn from.
+ *
+ * Its **vertical corners are the window the release will take**, not the two
+ * places the hand passed through. The two differ by the baseline a viewer's
+ * rules hold: on a mirrored chart zero runs across the middle of the plot, so a
+ * drag made wholly inside the reflected half crosses the baseline without ever
+ * reaching it, and the release stretches the window back to zero. A rectangle
+ * drawn at the height of the hand would promise a band between two intensities
+ * that letting go does not give.
+ */
 export interface ZoomSelection extends DragBox {
   /**
    * Whether letting go here would take the y axis with it, which is what the
@@ -88,15 +98,22 @@ export function zoomSelection(
   if (drag === null) return null;
   const {
     baseline = DEFAULT_Y_AXIS_RULES.baseline,
+    keepBaseline = DEFAULT_Y_AXIS_RULES.keepBaseline,
     pointsDown = DEFAULT_Y_AXIS_RULES.pointsDown,
     drag: mode = 'xAxis',
   } = rules;
+  const zoomsYAxis = takesYAxis(drag, mode, yScale, baseline, pointsDown);
+  // Stretched in pixels rather than in values because the rectangle is drawn in
+  // pixels and the mapping is monotonic, so including the baseline's own pixel
+  // in the span is including the baseline in the window.
+  const held = zoomsYAxis && holdsBaseline(mode, keepBaseline);
+  const atBaseline = chartPixel(yScale, baseline);
   return {
     fromX: drag.fromX,
-    fromY: drag.fromY,
+    fromY: held ? Math.min(drag.fromY, drag.toY, atBaseline) : drag.fromY,
     toX: drag.toX,
-    toY: drag.toY,
-    zoomsYAxis: takesYAxis(drag, mode, yScale, baseline, pointsDown),
+    toY: held ? Math.max(drag.fromY, drag.toY, atBaseline) : drag.toY,
+    zoomsYAxis,
   };
 }
 
@@ -213,7 +230,7 @@ export function zoomedDomain(
   // 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 holdBaseline = holdsBaseline(mode, keepBaseline);
   const bottom = holdBaseline
     ? Math.min(baseline, fromY, toY)
     : Math.min(fromY, toY);
@@ -272,6 +289,21 @@ export function scaledYAxis(
  * @param pointsDown - Whether the data hangs below that baseline.
  * @returns Whether the height comes along.
  */
+/**
+ * Whether the window keeps the baseline whatever the drag asked for, which the
+ * preview and the release must agree on as surely as they agree on the height.
+ *
+ * Only the reading gesture holds it. 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.
+ * @param mode - What a drag on this chart asks for.
+ * @param keepBaseline - Whether the viewer's rules keep it.
+ * @returns Whether the baseline stays in the window.
+ */
+function holdsBaseline(mode: DragMode, keepBaseline: boolean): boolean {
+  return keepBaseline && mode === 'xAxis';
+}
+
 function takesYAxis(
   drag: DragBox,
   mode: DragMode,

package/src/chart/ui/chartGestures.ts

@@ -14,8 +14,12 @@
  * gesture reporting a range and a click for the same drag.
  */
 
-import type { PointerEvent as ReactPointerEvent } from 'react';
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+} from 'react';
 
+import { isEditingField } from '../../panel/core/isEditingField.ts';
 import type { ChartDomain, ZoomRules } from '../core/chartDomain.ts';
 import type { PlotRect } from '../core/chartGeometry.ts';
 import type { ChartScale } from '../core/chartScale.ts';
@@ -29,6 +33,7 @@ import { isInsidePlot } from './useChartPointer.ts';
 
 /** One gesture on the SVG, as React hands it over. */
 type PointerHandler = (event: ReactPointerEvent<SVGSVGElement>) => void;
+type KeyboardHandler = (event: ReactKeyboardEvent<SVGSVGElement>) => void;
 
 /**
  * Which keys were held as a click was let go.
@@ -56,6 +61,41 @@ export interface ChartZoomHandlers {
   onPointerUp: PointerHandler;
   onPointerCancel: PointerHandler;
   onDoubleClick: () => void;
+  onKeyDown: KeyboardHandler;
+  /**
+   * So the chart can hold the caret, which is what lets a key reach it.
+   *
+   * In the tab order rather than merely focusable by a click, because the chart
+   * is* the widget here: a reader who navigates by keyboard has no other way to
+   * reach it, and a chart nobody can focus answers no key at all. A viewer that
+   * answers none takes itself back out of the order.
+   */
+  tabIndex: number;
+}
+
+/** The key that fits the window to everything drawn, on every chart. */
+export const FIT_KEY = 'f';
+
+/**
+ * Whether a key press asks for the window to be fitted.
+ *
+ * A key pressed with a modifier belongs to the browser or to the page — Ctrl+F
+ * is a search, and a chart that swallowed it to fit itself would be a chart
+ * people stop typing near — and a key delivered to a field is part of what is
+ * being written. Compared case-insensitively, so a capital arriving from a held
+ * shift still fits.
+ * @param event - The key press, as React delivers it or as the DOM does.
+ * @returns Whether the chart should fit its window.
+ */
+export function asksToFit(
+  event: Pick<
+    KeyboardEvent,
+    'key' | 'ctrlKey' | 'metaKey' | 'altKey' | 'target'
+  >,
+): boolean {
+  if (event.ctrlKey || event.metaKey || event.altKey) return false;
+  if (isEditingField(event.target)) return false;
+  return event.key.toLowerCase() === FIT_KEY;
 }
 
 /** What a host asks to be told, beyond the window it is shown anyway. */

package/src/chart/ui/index.ts

@@ -47,7 +47,7 @@ export { SelectionRect } from './SelectionRect.tsx';
 export type { LegendEntry, TraceLegendProps } from './TraceLegend.tsx';
 export { TraceLegend } from './TraceLegend.tsx';
 export type { ChartClickModifiers } from './chartGestures.ts';
-export { NO_MODIFIERS } from './chartGestures.ts';
+export { FIT_KEY, NO_MODIFIERS, asksToFit } from './chartGestures.ts';
 export { chartSurfaceStyle } from './chartSurface.ts';
 export type { ChartPointer, ChartPointerOptions } from './useChartPointer.ts';
 export {

package/src/chart/ui/useChartZoom.ts

@@ -28,7 +28,11 @@
  * answer each viewer hands over.
  */
 
-import type { PointerEvent as ReactPointerEvent, RefObject } from 'react';
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+  RefObject,
+} from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
 import type {
@@ -50,6 +54,7 @@ import type {
 } from './chartGestures.ts';
 import {
   answeredRelease,
+  asksToFit,
   draggedTo,
   releaseDrag,
   startedDrag,
@@ -147,6 +152,7 @@ export function useChartZoom(options: ChartZoomOptions): ChartZoom {
   const pointsDown = yAxis?.pointsDown;
   const dragMode = gestures?.drag ?? DEFAULT_ZOOM_GESTURES.drag;
   const wheel = gestures?.wheel ?? DEFAULT_ZOOM_GESTURES.wheel;
+  const keys = gestures?.keys ?? DEFAULT_ZOOM_GESTURES.keys;
   const rules = useMemo<ZoomRules>(
     () => ({ baseline, keepBaseline, pointsDown, drag: dragMode }),
     [baseline, keepBaseline, pointsDown, dragMode],
@@ -236,6 +242,19 @@ export function useChartZoom(options: ChartZoomOptions): ChartZoom {
     [drag, yScale, rules],
   );
 
+  const onKeyDown = useCallback(
+    (event: ReactKeyboardEvent<SVGSVGElement>) => {
+      if (!keys || !asksToFit(event)) return;
+      // Taken rather than passed on, so the page under a chart does not scroll
+      // to its own next heading as well — and so a second chart mounted beside
+      // this one is not fitted by a key aimed at this one.
+      event.preventDefault();
+      event.stopPropagation();
+      reset();
+    },
+    [keys, reset],
+  );
+
   return {
     domain,
     xScale,
@@ -248,6 +267,11 @@ export function useChartZoom(options: ChartZoomOptions): ChartZoom {
       onPointerUp,
       onPointerCancel,
       onDoubleClick: reset,
+      onKeyDown,
+      // Out of the tab order again on a chart that answers no key: a stop on the
+      // way through a page that does nothing when it is reached is worse than no
+      // stop at all.
+      tabIndex: keys ? 0 : -1,
     },
   };
 }

package/src/ir/core/irMode.ts

@@ -168,7 +168,12 @@ export function zoomGestures(
   tool: ZoomDragMode = 'xAxis',
 ): Required<ZoomGestures> {
   const { boxZoomOnly, wheelZoom } = IR_MODE_RULES[mode];
-  return { drag: boxZoomOnly ? 'box' : tool, wheel: wheelZoom };
+  // The shell owns `f`: its own command table runs `resetDomain`, which fits
+  // every pane of a stack rather than the one chart the caret is in, and the key
+  // is written down in a toolbar tooltip and in the documentation panel. A chart
+  // answering it as well would fit one pane and swallow the key before the
+  // shell heard it.
+  return { drag: boxZoomOnly ? 'box' : tool, wheel: wheelZoom, keys: false };
 }
 
 /**

package/src/locales/de.json

@@ -266,6 +266,7 @@
   "periodic.table": "Periodensystem",
   "periodic.group": "Gruppe {group}",
   "periodic.period": "Periode {period}",
+  "periodic.allElements": "Alle Elemente",
   "periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
   "periodic.category.alkali-metal": "Alkalimetall",
   "periodic.category.alkaline-earth-metal": "Erdalkalimetall",

package/src/locales/en.json

@@ -412,6 +412,7 @@
   "periodic.table": "Periodic table",
   "periodic.group": "Group {group}",
   "periodic.period": "Period {period}",
+  "periodic.allElements": "All elements",
   "periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
   "periodic.category.alkali-metal": "Alkali metal",
   "periodic.category.alkaline-earth-metal": "Alkaline earth",

package/src/locales/es.json

@@ -266,6 +266,7 @@
   "periodic.table": "Tabla periódica",
   "periodic.group": "Grupo {group}",
   "periodic.period": "Periodo {period}",
+  "periodic.allElements": "Todos los elementos",
   "periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
   "periodic.category.alkali-metal": "Metal alcalino",
   "periodic.category.alkaline-earth-metal": "Alcalinotérreo",

package/src/locales/fr.json

@@ -266,6 +266,7 @@
   "periodic.table": "Tableau périodique",
   "periodic.group": "Groupe {group}",
   "periodic.period": "Période {period}",
+  "periodic.allElements": "Tous les éléments",
   "periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
   "periodic.category.alkali-metal": "Métal alcalin",
   "periodic.category.alkaline-earth-metal": "Alcalino-terreux",

package/src/locales/it.json

@@ -412,6 +412,7 @@
   "periodic.table": "Tavola periodica",
   "periodic.group": "Gruppo {group}",
   "periodic.period": "Periodo {period}",
+  "periodic.allElements": "Tutti gli elementi",
   "periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
   "periodic.category.alkali-metal": "Metallo alcalino",
   "periodic.category.alkaline-earth-metal": "Alcalino terroso",

package/src/periodic/core/index.ts

@@ -15,7 +15,7 @@ export {
   UNKNOWN_SWATCH,
   categorySwatch,
 } from './categories.ts';
-export type { Cell, ElementRange } from './layout.ts';
+export type { Cell, ElementPick, ElementRange } from './layout.ts';
 export {
   COLUMN_COUNT,
   EMPTY_BLOCK,

package/src/periodic/core/layout.ts

@@ -28,6 +28,18 @@ export interface ElementRange {
   additive: boolean;
 }
 
+/** One element, and what the click that picked it asked for. */
+export interface ElementPick {
+  /**
+   * Whether the click asked for this element on top of what was already
+   * chosen — Cmd on a Mac, Ctrl elsewhere — rather than in place of it. A tool
+   * whose plain click already means something of its own — reading one element
+   * into a card — tells the two apart by it, so one table both reads an
+   * element and builds a set of them.
+   */
+  additive: boolean;
+}
+
 /** A cell of the grid, one-based as CSS grid lines are. */
 export interface Cell {
   /** Grid column, one-based. */

package/src/periodic/ui/ElementCell.tsx

@@ -16,6 +16,7 @@ import { useState } from 'react';
 
 import type { Swatch } from '../../color/core/interpolate.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
+import type { ElementPick } from '../core/layout.ts';
 
 import {
   SHELLS_AIR,
@@ -53,8 +54,11 @@ export interface ElementCellProps {
   column: number;
   /** Row of the grid, one-based. */
   row: number;
-  /** Called with the symbol when the cell is chosen. */
-  onSelect: (symbol: string) => void;
+  /**
+   * Called with the symbol when the cell is chosen, and with what the click
+   * asked for: a plain one, or an additive one — Cmd or Ctrl held.
+   */
+  onSelect: (symbol: string, pick: ElementPick) => void;
   /**
    * Third line, under the symbol: the value the tool is showing.
    * @default '' — nothing is written
@@ -143,8 +147,8 @@ export function ElementCell(props: ElementCellProps): ReactElement {
         atomicNumber,
       })}
       aria-pressed={isSelected}
-      onClick={() => {
-        onSelect(symbol);
+      onClick={(event) => {
+        onSelect(symbol, { additive: event.metaKey || event.ctrlKey });
       }}
       onPointerEnter={() => {
         setIsHovered(true);