react-cheminfo 0.33.0 → 0.34.0

package/lib/periodic/core/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/periodic/core/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGtE,0DAA0D;AAC1D,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,2DAA2D;AAC3D,MAAM,WAAW,IAAI;IACnB,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,4BAA4B;AAC5B,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B,uEAAuE;AACvE,eAAO,MAAM,SAAS,KAAK,CAAC;AAc5B;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,CAIrD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,aAAa,CAAC;IAC9C,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC,CAUD;AAOD;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,EAAE,aAAa,CAAC;IACnD,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAGA,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAGA,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,GAAG,SAAS,GACvB,eAAe,GAAG,IAAI,CAgBxB"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/periodic/core/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGtE,0DAA0D;AAC1D,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,2DAA2D;AAC3D,MAAM,WAAW,IAAI;IACnB,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,4BAA4B;AAC5B,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B,uEAAuE;AACvE,eAAO,MAAM,SAAS,KAAK,CAAC;AAc5B;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,CAIrD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,aAAa,CAAC;IAC9C,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC,CAUD;AAOD;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE;IACxB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;CACmC,CAAC;AAEtD;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,EAAE,aAAa,CAAC;IACnD,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAGA,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAGA,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,GAAG,SAAS,GACvB,eAAe,GAAG,IAAI,CAgBxB"}

package/lib/periodic/core/layout.js

@@ -49,6 +49,15 @@ export function placedElements() {
     return placedCache;
 }
 let placedCache = null;
+/**
+ * The block of cells the table leaves empty, where no element belongs: logical
+ * columns 3 to 12 of the first three periods.
+ *
+ * It is a tenth of the drawing, in the middle of the top edge, and the one
+ * place a tool can write without covering an element — which is why a table
+ * printed on a wall puts its title or its key there.
+ */
+export const EMPTY_BLOCK = { column: 3, row: 1, columnSpan: 10, rowSpan: 3 };
 /**
  * The two cells the lanthanoids and the actinoids were lifted out of.
  *

package/lib/periodic/core/layout.js.map

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

package/lib/periodic/ui/ElementCell.js

@@ -147,15 +147,27 @@ const cellStyle = {
     minWidth: 0,
     overflow: 'hidden',
     padding: '1px',
+    // The corner the atomic number is pinned into.
+    position: 'relative',
     transition: 'opacity 120ms ease, filter 120ms ease',
 };
+/**
+ * The atomic number sits out of the flow, in the corner.
+ *
+ * In the flow it rode on top of a stack the cell centres, so it moved down
+ * whenever what is written under the symbol was written smaller — the numbers
+ * of a row then sat at as many heights as the row had word lengths. Out of it,
+ * the number is in the same corner of every cell, and the symbol is centred in
+ * the cell rather than in what is left of it.
+ */
 const numberStyle = {
-    alignSelf: 'flex-start',
-    fontSize: 'max(0.33rem, 1.2cqw)',
+    fontSize: 'max(0.33rem, 1.1cqw)',
     fontVariantNumeric: 'tabular-nums',
+    left: 'max(1px, 0.14cqw)',
     lineHeight: 1,
     opacity: 0.8,
-    paddingLeft: '0.15cqw',
+    position: 'absolute',
+    top: 'max(1px, 0.14cqw)',
 };
 const symbolStyle = {
     fontWeight: 700,

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

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

package/lib/periodic/ui/PeriodicTable.d.ts

@@ -9,7 +9,7 @@
  * Everything site-specific arrives through a callback keyed on the element, so
  * a site's own richer element record never has to cross into this component.
  */
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import type { Swatch } from '../../color/core/interpolate.ts';
 import type { PeriodicElement } from '../core/elements.ts';
 import type { ElementRange } from '../core/layout.ts';
@@ -48,6 +48,17 @@ export interface PeriodicTableProps {
      * @default every element is
      */
     isIncluded?: (element: PeriodicElement) => boolean;
+    /**
+     * What is written in the block the table leaves empty — columns 3 to 12 of
+     * the first three periods, in the middle of the top edge. A tool that reads
+     * one element off the table puts what it says about it there, where the eye
+     * already is, rather than under the grid.
+     *
+     * It is sized against the table, like everything else in the grid, so give
+     * it type in `em` and it scales with the drawing.
+     * @default undefined — the block stays empty
+     */
+    inset?: ReactNode;
     /**
      * Whether to draw the group and period strips.
      * @default false

package/lib/periodic/ui/PeriodicTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAgC,YAAY,EAAE,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA2ErE"}
+{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAGV,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAG9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAetD,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IACnD;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA+ErE"}

package/lib/periodic/ui/PeriodicTable.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { useChromeT } from "../../i18n/ui/useT.js";
 import { categorySwatch } from "../core/categories.js";
-import { COLUMN_COUNT, elementByArrowKey, placedElements, } from "../core/layout.js";
+import { COLUMN_COUNT, EMPTY_BLOCK, elementByArrowKey, placedElements, } from "../core/layout.js";
 import { CategoryLegend } from "./CategoryLegend.js";
 import { ElementCell } from "./ElementCell.js";
 import { HeaderStrips, InnerTransitionMarkers, } from "./PeriodicTableChrome.js";
@@ -12,7 +12,7 @@ import { HeaderStrips, InnerTransitionMarkers, } from "./PeriodicTableChrome.js"
  * @returns The grid, its optional chrome, and its optional legend.
  */
 export function PeriodicTable(props) {
-    const { selected, onSelect, swatchOf = defaultSwatchOf, detailOf, nameOf = defaultNameOf, isIncluded, headers = false, onSelectRange, legend = false, markers = true, keyboard = true, onHover, className, } = props;
+    const { selected, onSelect, swatchOf = defaultSwatchOf, detailOf, nameOf = defaultNameOf, isIncluded, inset, headers = false, onSelectRange, legend = false, markers = true, keyboard = true, onHover, className, } = props;
     const t = useChromeT();
     const writesDetail = detailOf !== undefined;
     const gridRef = useRef(null);
@@ -36,7 +36,29 @@ export function PeriodicTable(props) {
         cameFromKeyRef.current = true;
         onSelect(next.symbol);
     }
-    return (_jsxs("div", { className: className, style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": t('periodic.table'), "data-testid": "periodic-table", style: gridStyle(headers, writesDetail), onKeyDown: handleKeyDown, children: [headers ? _jsx(HeaderStrips, { onSelectRange: onSelectRange }) : null, markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placedElements().map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), writesDetail: writesDetail, swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
+    return (_jsxs("div", { className: className, style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": t('periodic.table'), "data-testid": "periodic-table", style: gridStyle(headers, writesDetail), onKeyDown: handleKeyDown, children: [headers ? _jsx(HeaderStrips, { onSelectRange: onSelectRange }) : null, inset === undefined ? null : (_jsx("div", { style: insetStyle(offset), children: inset })), markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placedElements().map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), writesDetail: writesDetail, swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
+}
+/**
+ * Where what the caller writes in the empty block is placed.
+ * @param offset - 1 when the table draws its header strips, 0 otherwise.
+ * @returns The style of the slot.
+ */
+function insetStyle(offset) {
+    return {
+        alignItems: 'center',
+        display: 'flex',
+        // Narrower than the block so the writing never touches the cells beside it.
+        padding: '0 1cqw',
+        gridColumn: `${String(EMPTY_BLOCK.column + offset)} / span ${String(EMPTY_BLOCK.columnSpan)}`,
+        gridRow: `${String(EMPTY_BLOCK.row + offset)} / span ${String(EMPTY_BLOCK.rowSpan)}`,
+        // A share of the table, with a floor, exactly as a cell sizes its symbol:
+        // the block holds the same three rows at every width, so what is written
+        // in it has to shrink with them.
+        fontSize: 'max(0.6rem, 1.8cqw)',
+        lineHeight: 1.35,
+        minWidth: 0,
+        overflow: 'hidden',
+    };
 }
 function defaultSwatchOf(element) {
     return categorySwatch(element.category);

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

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

package/lib/ui.d.ts

@@ -1,4 +1,5 @@
 export * from './about/ui/index.ts';
+export * from './axis/ui/index.ts';
 export * from './capsule/ui/index.ts';
 export * from './chart/ui/index.ts';
 export * from './chrome/ui/index.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,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,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,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"}

package/lib/ui.js

@@ -1,4 +1,5 @@
 export * from "./about/ui/index.js";
+export * from "./axis/ui/index.js";
 export * from "./capsule/ui/index.js";
 export * from "./chart/ui/index.js";
 export * from "./chrome/ui/index.js";

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,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,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.33.0",
+  "version": "0.34.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/axis/core/axisMarks.ts

@@ -0,0 +1,114 @@
+/**
+ * Where a figure's marks land inside its box, so something else can count them.
+ *
+ * `emptiestCorner` picks the corner a floating card can sit in without covering
+ * the cluster the reader came for, and it needs screen positions to do it. A
+ * chart drawn by a library builds its scales during its own render, where a
+ * caller cannot reach them, so the positions are worked out here from the same
+ * values and the same two transforms the axes use.
+ *
+ * It is an estimate, which is all a corner needs: the plot area is inset from
+ * the box by the margins, and a mark a few pixels from a corner counts for that
+ * corner either way.
+ */
+
+import type { AxisScale } from './axisScale.ts';
+
+/** A point of the figure, in the quantities its axes carry. */
+export interface AxisPoint {
+  x: number;
+  y: number;
+}
+
+/** Pixel positions of every mark, as `emptiestCorner` reads them. */
+export interface AxisMarkPositions {
+  x: Float64Array;
+  y: Float64Array;
+}
+
+/** What {@link axisMarkPositions} needs beyond the points and the box. */
+export interface AxisMarkPositionsOptions {
+  /**
+   * Width of the linear region of a logarithmic axis — d3's symmetric-log
+   * `constant`. Pass `0` for a true logarithmic axis.
+   * @default 1
+   */
+  constant?: number;
+}
+
+/**
+ * Place every point in the box the figure is drawn in.
+ * @param points - The points the figure draws.
+ * @param box - Its size, in pixels, normally from `useContainerSize`.
+ * @param box.width - How wide the figure is drawn.
+ * @param box.height - How tall it is drawn.
+ * @param scale - The scale each axis is drawn on, which the positions have to
+ *   follow to land where the marks do.
+ * @param scale.y - How the vertical axis is read.
+ * @param scale.x - How the horizontal axis is read.
+ * @param options - See {@link AxisMarkPositionsOptions}.
+ * @returns One position per point, in the order they were given.
+ */
+export function axisMarkPositions(
+  points: readonly AxisPoint[],
+  box: { width: number; height: number },
+  scale: { x: AxisScale; y: AxisScale },
+  options: AxisMarkPositionsOptions = {},
+): AxisMarkPositions {
+  const { constant = 1 } = options;
+  const x = new Float64Array(points.length);
+  const y = new Float64Array(points.length);
+
+  place(points, 'x', scale.x === 'log', constant, box.width, x);
+  place(points, 'y', scale.y === 'log', constant, box.height, y);
+  // The vertical axis grows upwards while the box is measured from its top.
+  for (let index = 0; index < y.length; index++) {
+    y[index] = box.height - (y[index] as number);
+  }
+  return { x, y };
+}
+
+function place(
+  points: readonly AxisPoint[],
+  axis: 'x' | 'y',
+  logarithmic: boolean,
+  constant: number,
+  extent: number,
+  into: Float64Array,
+): void {
+  let min = Infinity;
+  let max = -Infinity;
+  for (let index = 0; index < points.length; index++) {
+    const value = transform(
+      (points[index] as AxisPoint)[axis],
+      logarithmic,
+      constant,
+    );
+    into[index] = value;
+    if (value < min) min = value;
+    if (value > max) max = value;
+  }
+
+  const span = max - min;
+  for (let index = 0; index < into.length; index++) {
+    const value = (into[index] as number) - min;
+    into[index] = span === 0 ? extent / 2 : (value / span) * extent;
+  }
+}
+
+/**
+ * d3's symmetric log, which is the one a genuine zero survives.
+ * @param value - The value to place.
+ * @param logarithmic - Whether the axis is read logarithmically at all.
+ * @param constant - Width of its linear region.
+ * @returns The value in the units the axis is spaced in.
+ */
+function transform(
+  value: number,
+  logarithmic: boolean,
+  constant: number,
+): number {
+  if (!logarithmic) return value;
+  const width = constant > 0 ? constant : 1;
+  return Math.sign(value) * Math.log1p(Math.abs(value) / width);
+}

package/src/axis/core/axisScale.ts

@@ -0,0 +1,41 @@
+/**
+ * Which of the two scales a quantity is read on, and who decided.
+ *
+ * Every quantity has a scale it is usually read on — a concentration spanning
+ * ten decades is read logarithmically, a first ionisation energy linearly — and
+ * a reader may overrule it. The two are kept apart rather than collapsed into
+ * one boolean, because a figure that forgets which it is holding gets both of
+ * the following wrong: picking another quantity has to bring that quantity's
+ * own scale rather than carry the last one over, and a link has to stay silent
+ * about a scale nobody chose, so that it keeps opening the way the quantity is
+ * read even after the usual scale is reconsidered.
+ */
+
+/** The two scales an axis is drawn on. */
+export type AxisScale = 'linear' | 'log';
+
+/** A reader's choice, or `null` while they have not made one. */
+export type AxisScaleChoice = AxisScale | null;
+
+/**
+ * The scale an axis is actually drawn on.
+ * @param usual - How the quantity on the axis is normally read.
+ * @param chosen - What the reader asked for, or `null` to leave it to the
+ *   quantity.
+ * @returns The scale to draw.
+ */
+export function resolveAxisScale(
+  usual: AxisScale,
+  chosen: AxisScaleChoice,
+): AxisScale {
+  return chosen ?? usual;
+}
+
+/**
+ * Narrow an arbitrary string — one off a query parameter — to a scale.
+ * @param value - Candidate scale.
+ * @returns True when it is one of the two.
+ */
+export function isAxisScale(value: string): value is AxisScale {
+  return value === 'linear' || value === 'log';
+}

package/src/axis/core/index.ts

@@ -0,0 +1,20 @@
+/**
+ * How an axis is read: linearly or logarithmically, who decided, where it
+ * starts and ends, and where its marks land.
+ *
+ * It is a domain of its own rather than part of any chart, because the library
+ * draws figures with three different renderers and the sites draw more with
+ * libraries of their own — and the two things that go wrong on a logarithmic
+ * axis go wrong the same way in all of them.
+ */
+
+export type {
+  AxisMarkPositions,
+  AxisMarkPositionsOptions,
+  AxisPoint,
+} from './axisMarks.ts';
+export { axisMarkPositions } from './axisMarks.ts';
+export type { AxisScale, AxisScaleChoice } from './axisScale.ts';
+export { isAxisScale, resolveAxisScale } from './axisScale.ts';
+export type { LogAxisBounds, LogAxisBoundsOptions } from './logAxisBounds.ts';
+export { logAxisBounds } from './logAxisBounds.ts';

package/src/axis/core/logAxisBounds.ts

@@ -0,0 +1,198 @@
+/**
+ * The ends of a logarithmic axis, and the values it is graduated at.
+ *
+ * Both have to be stated rather than left to the charting library, and for two
+ * separate reasons.
+ *
+ * The ends, because a library that finds them itself may not look at every
+ * value. nivo is the measured case: it sorts and takes a true minimum and
+ * maximum only for a linear axis, and on a log or symmetric-log one `'auto'`
+ * resolves to the first value the data carries and the last — so the domain
+ * comes out in plotting order, upside down whenever the first point outweighs
+ * the last, and cutting off everything past the last point drawn.
+ *
+ * The graduations, because d3 rules a symmetric-log axis at evenly *spaced*
+ * values while placing them logarithmically, so the top of a wide axis collects
+ * every graduation it has into one unreadable line. Ruling it by decade spreads
+ * them evenly, which is also how such a quantity is read.
+ */
+
+/** What {@link logAxisBounds} answers. */
+export interface LogAxisBounds {
+  /** The low end of the axis. */
+  min: number;
+  /** The high end. */
+  max: number;
+  /**
+   * The values to rule it at, or `undefined` for an axis spanning too few
+   * decades to be worth ruling by them — there the library's own linear
+   * graduations read better, and there is no pile-up to undo.
+   */
+  tickValues?: number[];
+}
+
+/** What {@link logAxisBounds} needs beyond the values. */
+export interface LogAxisBoundsOptions {
+  /**
+   * Width of the linear region at the bottom of a symmetric-log axis — d3's
+   * `constant`. Everything smaller than it is placed almost on the zero line,
+   * so no graduation is written below it; a graduation there would land on top
+   * of the one before it, which is the pile-up this exists to prevent.
+   *
+   * Pass `0` for a true logarithmic axis, which has no such region — and which
+   * cannot place a zero or a negative at all, so those values are then left out
+   * of the ends rather than dragging them to nothing.
+   * @default 1
+   */
+  constant?: number;
+  /**
+   * Whether the ends are rounded outwards to whole powers of ten. An axis that
+   * ends on its own extreme values reads as though those were round numbers;
+   * one that ends on decades says what it is. Worth it on a true logarithmic
+   * axis, where every graduation is a decade anyway.
+   * @default false — the ends are the data's own
+   */
+  snapToDecades?: boolean;
+  /**
+   * How many decades the axis may span at most, counted down from its top. A
+   * quantity that reaches zero asymptotically has no meaningful bottom, and an
+   * axis given one spends most of its height on values nobody is reading.
+   * Only consulted with `snapToDecades`.
+   * @default Infinity — the axis spans whatever the data does
+   */
+  maxDecades?: number;
+  /**
+   * How many graduations the axis may carry. More than this is a smear however
+   * they are spread, so the decades are stepped over rather than written out.
+   * @default 10
+   */
+  mostTicks?: number;
+}
+
+/** Under this many decades the library's own graduations read better. */
+const RULE_PAST_DECADES = 3;
+
+/**
+ * Where a logarithmic axis starts and ends, and where it is graduated.
+ * @param values - Every value plotted on the axis. Anything not finite is
+ *   ignored, so a sheet's gaps need not be filtered out first.
+ * @param options - See {@link LogAxisBoundsOptions}.
+ * @returns The ends and the graduations, or `null` when no value can be drawn
+ *   and the caller should leave the axis to its library.
+ */
+export function logAxisBounds(
+  values: Iterable<number>,
+  options: LogAxisBoundsOptions = {},
+): LogAxisBounds | null {
+  const { constant = 1, snapToDecades = false } = options;
+  const { maxDecades = Infinity, mostTicks = 10 } = options;
+  // A true logarithmic axis has no room for a zero or a negative, so they are
+  // not what its bottom end is taken from.
+  const positiveOnly = constant === 0;
+
+  let min = Infinity;
+  let max = -Infinity;
+  for (const value of values) {
+    if (!Number.isFinite(value)) continue;
+    if (positiveOnly && value <= 0) continue;
+    if (value < min) min = value;
+    if (value > max) max = value;
+  }
+  if (min > max) return null;
+
+  if (snapToDecades) {
+    const top = Math.ceil(Math.log10(Math.abs(max) || 1));
+    const bottom = Math.max(
+      Math.floor(Math.log10(Math.abs(min) || 1)),
+      top - maxDecades,
+    );
+    return withTicks(decade(bottom), decade(top), constant, mostTicks);
+  }
+
+  // A lone value, or a column of identical ones, spans nothing: reach to the
+  // origin so it is read against a zero rather than filling the axis.
+  if (min === max) {
+    if (min === 0) return { min: -1, max: 1 };
+    return { min: Math.min(min, 0), max: Math.max(max, 0) };
+  }
+
+  return withTicks(min, max, constant, mostTicks);
+}
+
+/**
+ * The ends, with the graduations when they are worth writing.
+ * @param min
+ * @param max
+ * @param constant
+ * @param mostTicks
+ */
+function withTicks(
+  min: number,
+  max: number,
+  constant: number,
+  mostTicks: number,
+): LogAxisBounds {
+  const ticks = decadesBetween(min, max, constant, mostTicks);
+  return ticks === undefined ? { min, max } : { min, max, tickValues: ticks };
+}
+
+/**
+ * Zero, and the powers of ten the axis both reaches and can separate.
+ * @param min - The low end of the axis.
+ * @param max - Its high end.
+ * @param constant - Width of the linear region; see the options.
+ * @param mostTicks - How many graduations the axis may carry.
+ * @returns The values to rule it at, or nothing to leave it to the library.
+ */
+function decadesBetween(
+  min: number,
+  max: number,
+  constant: number,
+  mostTicks: number,
+): number[] | undefined {
+  const largest = Math.max(Math.abs(min), Math.abs(max));
+  if (largest === 0) return undefined;
+
+  // Below the linear region every decade lands on the same pixel, so the axis
+  // is ruled from there up rather than from its smallest value.
+  const floor = constant > 0 ? Math.log10(constant) : smallestDecade(min, max);
+  const bottom = Math.ceil(floor);
+  const top = Math.floor(Math.log10(largest));
+  // Under a few decades the library's own graduations read better — but only
+  // where it has linear ones to offer. On a true logarithmic axis every
+  // graduation is a decade, so a short one is still ruled by decade.
+  if (constant > 0 && top - bottom + 1 < RULE_PAST_DECADES) return undefined;
+
+  const step = Math.ceil((top - bottom + 1) / mostTicks);
+  const ticks = min <= 0 && max >= 0 ? [0] : [];
+  for (let power = bottom; power <= top; power += step) {
+    const tick = decade(power);
+    if (tick >= min && tick <= max) ticks.push(tick);
+  }
+  if (constant === 0) return ticks;
+  return ticks.length < RULE_PAST_DECADES ? undefined : ticks;
+}
+
+/**
+ * A whole power of ten.
+ * @param power - The exponent, a whole number.
+ * @returns Ten to that power, the same bits on every engine.
+ */
+function decade(power: number): number {
+  // Read as a decimal rather than computed: `10 ** power` goes through pow,
+  // which is not bit-exact across V8 versions — node 22 answers
+  // 0.00009999999999999999 for -4 and 1.0000000000000001e-20 for -20 — while a
+  // decimal literal is the correctly-rounded double everywhere.
+  return Number(`1e${power}`);
+}
+
+/**
+ * The decade of the smaller end, for an axis with no linear region.
+ * @param min - The low end of the axis.
+ * @param max - Its high end.
+ * @returns The base-ten logarithm of the smaller end that is not zero.
+ */
+function smallestDecade(min: number, max: number): number {
+  const ends = [Math.abs(min), Math.abs(max)].filter((end) => end > 0);
+  return Math.log10(Math.min(...ends));
+}