react-cheminfo 0.31.0 → 0.33.0

package/lib/periodic/ui/ElementCell.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useChromeT } from "../../i18n/ui/useT.js";
 /**
  * A single element of the table.
@@ -6,15 +7,22 @@ import { useChromeT } from "../../i18n/ui/useT.js";
  * @returns The cell.
  */
 export function ElementCell(props) {
-    const { className, atomicNumber, symbol, name, swatch, column, row, onSelect, detail = '', isSelected = false, isIncluded = true, onHover, } = props;
+    const { className, atomicNumber, symbol, name, swatch, column, row, onSelect, detail = '', writesDetail = detail !== '', isSelected = false, isIncluded = true, onHover, } = props;
     const t = useChromeT();
-    return (_jsxs("button", { type: "button", className: className, "data-testid": `element-${symbol}`, "data-symbol": symbol, "aria-label": t('periodic.cellLabel', {
+    const [isHovered, setIsHovered] = useState(false);
+    return (_jsxs("button", { type: "button", className: className, "data-testid": `element-${symbol}`, "data-symbol": symbol, title: detail === '' ? name : `${name} · ${detail}`, "aria-label": t('periodic.cellLabel', {
             name,
             symbol,
             atomicNumber,
         }), "aria-pressed": isSelected, onClick: () => {
             onSelect(symbol);
-        }, onPointerEnter: () => onHover?.(symbol), onPointerLeave: () => onHover?.(null), style: {
+        }, onPointerEnter: () => {
+            setIsHovered(true);
+            onHover?.(symbol);
+        }, onPointerLeave: () => {
+            setIsHovered(false);
+            onHover?.(null);
+        }, style: {
             ...cellStyle,
             gridColumn: column,
             gridRow: row,
@@ -23,10 +31,110 @@ export function ElementCell(props) {
             opacity: isIncluded ? 1 : 0.28,
             // An outline rather than a fill: a table coloured by a property must
             // keep saying what the value is while a cell is selected.
-            outline: isSelected ? `2px solid ${swatch.foreground}` : 'none',
-            outlineOffset: -3,
-        }, children: [_jsx("span", { style: numberStyle, children: atomicNumber }), _jsx("span", { style: symbolStyle, children: symbol }), detail === '' ? null : _jsx("span", { style: detailStyle, children: detail })] }));
+            outlineStyle: isSelected ? 'solid' : 'none',
+            outlineColor: swatch.foreground,
+            // Thick enough to be seen from the back of a room, and drawn inside
+            // the cell so a neighbour never covers it.
+            outlineWidth: 'max(2px, 0.3cqw)',
+            outlineOffset: 'max(-3px, -0.4cqw)',
+            // The cell the pointer is on, for a class following a demonstration.
+            filter: isHovered ? 'brightness(1.08)' : undefined,
+        }, children: [_jsx("span", { style: numberStyle, children: atomicNumber }), _jsx("span", { style: {
+                    ...symbolStyle,
+                    fontSize: symbolFontSize(symbol, writesDetail),
+                }, children: symbol }), detail === '' ? null : (_jsx("span", { style: { ...detailStyle, fontSize: detailFontSize(detail) }, children: detail }))] }));
 }
+/**
+ * The size the symbol is written at.
+ *
+ * Every symbol is written at the same size, except the widest of them — the
+ * ones whose second letter is an `m` — which are written a tenth smaller
+ * rather than run into the edges of their cell.
+ * @param symbol - The chemical symbol.
+ * @param writesDetail - Whether the table writes a third line under it.
+ * @returns A CSS length.
+ */
+function symbolFontSize(symbol, writesDetail) {
+    const cap = writesDetail ? SYMBOL_CQW : SYMBOL_ALONE_CQW;
+    return fitted(symbolWidthInEm(symbol), cap, '0.5rem');
+}
+/**
+ * The size the third line takes so the whole of it is written.
+ *
+ * A value cut short by an ellipsis is a wrong value — `0.0899` read as `0.0…`
+ * is worse than not writing it at all — so a long string is written smaller
+ * rather than trimmed.
+ * @param detail - What the third line says.
+ * @returns A CSS length.
+ */
+function detailFontSize(detail) {
+    return fitted(detailWidthInEm(detail), DETAIL_CQW, '0.25rem');
+}
+/**
+ * The largest size a string of the given width fits its cell at.
+ *
+ * The room a cell leaves is a share of the table's width less its border and
+ * its padding, which are the same few pixels at every size — hence the two
+ * units in one expression.
+ * @param widthInEm - How wide the string is, in ems of its own size.
+ * @param cap - The size it is written at when it has room to spare.
+ * @param floor - The size under which it is not shrunk any further.
+ * @returns A CSS length.
+ */
+function fitted(widthInEm, cap, floor) {
+    const room = `calc((${CELL_CQW} - ${CELL_CHROME}) / ${widthInEm.toFixed(2)})`;
+    return `max(${floor}, min(${cap}, ${room}))`;
+}
+/**
+ * How wide a symbol is, in ems of its own size.
+ * @param symbol - The chemical symbol.
+ * @returns Its width, never zero.
+ */
+function symbolWidthInEm(symbol) {
+    let width = 0;
+    for (const character of symbol) {
+        if (character === 'm' || character === 'w') {
+            width += 0.95;
+        }
+        else if (character >= 'a' && character <= 'z') {
+            width += 0.63;
+        }
+        else {
+            width += 0.85;
+        }
+    }
+    return Math.max(width, 0.85);
+}
+/**
+ * How wide the third line is, in ems of its own size.
+ *
+ * It is written with tabular figures, where every glyph — the decimal point
+ * and the minus of an exponent included — advances the same width, so counting
+ * the characters is the measurement.
+ * @param detail - What the third line says.
+ * @returns Its width, never zero.
+ */
+function detailWidthInEm(detail) {
+    return Math.max(detail.length, 1) * TABULAR_EM;
+}
+/** What one tabular glyph advances, as a share of its own size. */
+const TABULAR_EM = 0.6;
+/** The size the symbol is written at wherever it fits, as a share of the table. */
+const SYMBOL_CQW = '2.4cqw';
+/** The same, in a table that writes nothing under the symbol. */
+const SYMBOL_ALONE_CQW = '2.8cqw';
+/**
+ * The tallest the third line is ever written, as a share of the table.
+ *
+ * Close to three quarters of the symbol: the symbol is how a cell is found,
+ * but the value is what the table is being read for, and a value half the size
+ * of the symbol is the one thing on the cell a class cannot make out.
+ */
+const DETAIL_CQW = '1.75cqw';
+/** How wide one column is, as a share of the table's width. */
+const CELL_CQW = '4.85cqw';
+/** What the border and the padding of a cell take off that width. */
+const CELL_CHROME = '4px';
 const cellStyle = {
     alignItems: 'center',
     border: '1px solid rgb(255 255 255 / 0.55)',
@@ -36,27 +144,29 @@ const cellStyle = {
     flexDirection: 'column',
     font: 'inherit',
     justifyContent: 'center',
-    lineHeight: 1.05,
     minWidth: 0,
     overflow: 'hidden',
-    padding: 1,
-    transition: 'opacity 120ms ease',
+    padding: '1px',
+    transition: 'opacity 120ms ease, filter 120ms ease',
 };
 const numberStyle = {
     alignSelf: 'flex-start',
-    fontSize: 'clamp(0.34rem, 1.6cqw, 0.5rem)',
+    fontSize: 'max(0.33rem, 1.2cqw)',
+    fontVariantNumeric: 'tabular-nums',
+    lineHeight: 1,
     opacity: 0.8,
-    paddingLeft: 2,
+    paddingLeft: '0.15cqw',
 };
 const symbolStyle = {
-    fontSize: 'clamp(0.55rem, 3.3cqw, 1.05rem)',
     fontWeight: 700,
+    letterSpacing: '-0.02em',
+    lineHeight: 1.02,
 };
 const detailStyle = {
-    fontSize: 'clamp(0.34rem, 1.6cqw, 0.5rem)',
+    fontVariantNumeric: 'tabular-nums',
+    lineHeight: 1,
     maxWidth: '100%',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
 //# sourceMappingURL=ElementCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ElementCell.js","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AA8CnD;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,SAAS,EACT,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,MAAM,EACN,MAAM,EACN,GAAG,EACH,QAAQ,EACR,MAAM,GAAG,EAAE,EACX,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,IAAI,EACjB,OAAO,GACR,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IAEvB,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,iBACP,WAAW,MAAM,EAAE,iBACnB,MAAM,gBACP,CAAC,CAAC,oBAAoB,EAAE;YAClC,IAAI;YACJ,MAAM;YACN,YAAY;SACb,CAAC,kBACY,UAAU,EACxB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC,EACD,cAAc,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EACvC,cAAc,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EACrC,KAAK,EAAE;YACL,GAAG,SAAS;YACZ,UAAU,EAAE,MAAM;YAClB,OAAO,EAAE,GAAG;YACZ,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;YAC9B,qEAAqE;YACrE,0DAA0D;YAC1D,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,MAAM;YAC/D,aAAa,EAAE,CAAC,CAAC;SAClB,aAED,eAAM,KAAK,EAAE,WAAW,YAAG,YAAY,GAAQ,EAC/C,eAAM,KAAK,EAAE,WAAW,YAAG,MAAM,GAAQ,EACxC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAM,KAAK,EAAE,WAAW,YAAG,MAAM,GAAQ,IAC1D,CACV,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG;IAChB,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,mCAAmC;IAC3C,YAAY,EAAE,CAAC;IACf,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,IAAI,EAAE,SAAS;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,oBAAoB;CACA,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,gCAAgC;IAC1C,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,CAAC;CACkB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,QAAQ,EAAE,iCAAiC;IAC3C,UAAU,EAAE,GAAG;CACiB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,QAAQ,EAAE,gCAAgC;IAC1C,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;CACY,CAAC"}
+{"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.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,CAyErE"}
+{"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"}

package/lib/periodic/ui/PeriodicTable.js

@@ -14,6 +14,7 @@ import { HeaderStrips, InnerTransitionMarkers, } from "./PeriodicTableChrome.js"
 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 t = useChromeT();
+    const writesDetail = detailOf !== undefined;
     const gridRef = useRef(null);
     const cameFromKeyRef = useRef(false);
     const offset = headers ? 1 : 0;
@@ -35,7 +36,7 @@ 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: headers ? gridWithHeadersStyle : gridStyle, 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), 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, 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] }));
 }
 function defaultSwatchOf(element) {
     return categorySwatch(element.category);
@@ -47,33 +48,59 @@ function noop() {
     // A table with no `onSelect` is a figure; its cells stay buttons so the
     // keyboard and a screen reader still reach every element.
 }
+/** Narrowest the table is ever drawn; under it the type stops being readable. */
+const MIN_WIDTH = 280;
+/**
+ * How tall one row of elements is, as a share of the table's width.
+ *
+ * A column is about 5.4% of that width, so a cell is a seventh taller than it
+ * is wide — the proportion of a wall chart, and the room the three lines of a
+ * cell need to be written at a size a class can read.
+ */
+const ROW_HEIGHT = '6.1cqw';
+/** The same, in a table that writes nothing under the symbol. */
+const ROW_HEIGHT_ALONE = '4.9cqw';
+/** The band the two inner-transition series were lifted out across. */
+const SERIES_GAP = 'max(6px, 1.1cqw)';
 const rootStyle = {
     display: 'flex',
     flexDirection: 'column',
     gap: 8,
+    minWidth: MIN_WIDTH,
+    // Everything inside — the height of a row as much as the type in a cell — is
+    // a share of this box rather than of the page, so the same table reads at
+    // 280px beside a chart and fills a lecture-hall screen at twice that.
+    containerType: 'inline-size',
 };
 const baseGridStyle = {
     display: 'grid',
     gap: 2,
+    minWidth: MIN_WIDTH,
     width: '100%',
-    // The cells size their type against this box rather than against the page,
-    // so the same table reads at 320px beside a chart and at 900px on its own.
-    containerType: 'inline-size',
 };
-const gridStyle = {
-    ...baseGridStyle,
+/**
+ * The grid the cells are placed on.
+ * @param headers - Whether a leading column and row hold the period and group
+ * numbers.
+ * @param writesDetail - Whether a cell writes a third line, which is what a
+ * row is tall enough for.
+ * @returns The style of the grid.
+ */
+function gridStyle(headers, writesDetail) {
+    const row = writesDetail ? ROW_HEIGHT : ROW_HEIGHT_ALONE;
     // The eighth row is the gap the inner-transition series are lifted out into.
-    gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-    gridTemplateRows: 'repeat(7, minmax(0, 1fr)) 0.5rem repeat(2, minmax(0, 1fr))',
-    aspectRatio: `${String(COLUMN_COUNT)} / 9.7`,
-    minWidth: 280,
-};
-const gridWithHeadersStyle = {
-    ...baseGridStyle,
-    // A leading column and a leading row hold the period and group numbers.
-    gridTemplateColumns: `1.4rem repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-    gridTemplateRows: '1rem repeat(7, minmax(0, 1fr)) 0.5rem repeat(2, minmax(0, 1fr))',
-    aspectRatio: `${String(COLUMN_COUNT + 1.2)} / 10.6`,
-    minWidth: 280,
-};
+    const rows = `repeat(7, ${row}) ${SERIES_GAP} repeat(2, ${row})`;
+    if (!headers) {
+        return {
+            ...baseGridStyle,
+            gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+            gridTemplateRows: rows,
+        };
+    }
+    return {
+        ...baseGridStyle,
+        gridTemplateColumns: `max(14px, 2.4cqw) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+        gridTemplateRows: `max(12px, 2cqw) ${rows}`,
+    };
+}
 //# sourceMappingURL=PeriodicTable.js.map

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/periodic/ui/PeriodicTableChrome.js

@@ -53,7 +53,7 @@ const headerStyle = {
     alignItems: 'center',
     color: TOKEN.textMuted,
     display: 'flex',
-    fontSize: 'clamp(0.4rem, 1.9cqw, 0.62rem)',
+    fontSize: 'max(0.45rem, 1.35cqw)',
     justifyContent: 'center',
     padding: 0,
 };
@@ -69,7 +69,7 @@ const markerStyle = {
     borderRadius: 3,
     color: TOKEN.textMuted,
     display: 'flex',
-    fontSize: 'clamp(0.36rem, 1.7cqw, 0.55rem)',
+    fontSize: 'max(0.4rem, 1.15cqw)',
     justifyContent: 'center',
 };
 //# sourceMappingURL=PeriodicTableChrome.js.map

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/spectra/ui/NumberField.d.ts

@@ -29,11 +29,8 @@ interface NumberFieldProps {
 /**
  * One number of the settings.
  *
- * The box keeps what was typed rather than what parsed, because a reader
- * halfway through `1e-` has typed something no number can hold yet; clearing it
- * under them would make the field unusable. Nothing is handed up until the text
- * reads as a number, and emptying the box hands up nothing at all — which is
- * how a reader gets back to upstream's default after typing over it.
+ * Emptying the box hands up nothing at all, which is how a reader gets back to
+ * upstream's default after typing over it.
  * @param props - See {@link NumberFieldProps}.
  * @returns The labelled box.
  */

package/lib/spectra/ui/NumberField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/spectra/ui/NumberField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,sCAAsC;AACtC,UAAU,gBAAgB;IACxB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAuCjE"}
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/spectra/ui/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C,sCAAsC;AACtC,UAAU,gBAAgB;IACxB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAmBjE"}

package/lib/spectra/ui/NumberField.js

@@ -1,67 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InputGroup } from '@blueprintjs/core';
-import { useState } from 'react';
+import { NumberInput } from "../../number/ui/NumberInput.js";
 import { HELP_STYLE, LABEL_STYLE, sizedFieldStyle } from "./fieldStyles.js";
 /**
  * One number of the settings.
  *
- * The box keeps what was typed rather than what parsed, because a reader
- * halfway through `1e-` has typed something no number can hold yet; clearing it
- * under them would make the field unusable. Nothing is handed up until the text
- * reads as a number, and emptying the box hands up nothing at all — which is
- * how a reader gets back to upstream's default after typing over it.
+ * Emptying the box hands up nothing at all, which is how a reader gets back to
+ * upstream's default after typing over it.
  * @param props - See {@link NumberFieldProps}.
  * @returns The labelled box.
  */
 export function NumberField(props) {
     const { label, value, placeholder, onChange, integer = false, help } = props;
-    const [draft, setDraft] = useState(() => ({
-        text: asText(value),
-        held: value,
-    }));
-    // The settings changed from somewhere else — a preset, a reset, a pasted
-    // configuration — so the box has to follow rather than hold the old text.
-    // `held` is what this box last handed up, not the prop it was rendered with:
-    // comparing against the prop would make the box's own edit look external and
-    // rewrite `-0.` as `0` under the caret before the reader reaches the digits.
-    if (draft.held !== value)
-        setDraft({ text: asText(value), held: value });
-    return (_jsxs("label", { style: FIELD_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: label }), _jsx(InputGroup, { size: "small", fill: true, inputMode: integer ? 'numeric' : 'decimal', value: draft.text, placeholder: placeholder, spellCheck: false, autoComplete: "off", onValueChange: (text) => {
-                    const parsed = read(text, integer);
-                    const emptied = text.trim() === '';
-                    setDraft({ text, held: emptied ? undefined : (parsed ?? value) });
-                    if (emptied) {
-                        onChange(undefined);
-                    }
-                    else if (parsed !== undefined) {
-                        onChange(parsed);
-                    }
-                } }), help === undefined ? null : _jsx("span", { style: HELP_STYLE, children: help })] }));
-}
-/**
- * The number as the box shows it.
- * @param value - What the settings hold.
- * @returns Its text, empty when nothing is held.
- */
-function asText(value) {
-    return value === undefined ? '' : String(value);
-}
-/**
- * The text as a number, when it reads as one.
- * @param text - What was typed.
- * @param integer - Whether only whole numbers make sense.
- * @returns The number, or undefined while the text is not one yet.
- */
-function read(text, integer) {
-    const trimmed = text.trim();
-    if (trimmed === '')
-        return undefined;
-    const parsed = Number(trimmed);
-    if (!Number.isFinite(parsed))
-        return undefined;
-    if (integer && !Number.isInteger(parsed))
-        return undefined;
-    return parsed;
+    return (_jsxs("label", { style: FIELD_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: label }), _jsx(NumberInput, { allowEmpty: true, buttons: false, fill: true, size: "small", value: value, placeholder: placeholder, integer: integer, onChange: onChange }), help === undefined ? null : _jsx("span", { style: HELP_STYLE, children: help })] }));
 }
 const FIELD_STYLE = sizedFieldStyle(120);
 //# sourceMappingURL=NumberField.js.map

package/lib/spectra/ui/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../src/spectra/ui/NumberField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../src/spectra/ui/NumberField.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAiC,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AA8B5E;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAE7E,OAAO,CACL,iBAAO,KAAK,EAAE,WAAW,aACvB,eAAM,KAAK,EAAE,WAAW,YAAG,KAAK,GAAQ,EACxC,KAAC,WAAW,IACV,UAAU,QACV,OAAO,EAAE,KAAK,EACd,IAAI,QACJ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,EACD,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAM,KAAK,EAAE,UAAU,YAAG,IAAI,GAAQ,IAC7D,CACT,CAAC;AACJ,CAAC;AAED,MAAM,WAAW,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC"}

package/lib/ui.d.ts

@@ -16,6 +16,7 @@ export * from './help/ui/index.ts';
 export * from './hooks/ui/index.ts';
 export * from './i18n/ui/index.ts';
 export * from './language/ui/index.ts';
+export * from './number/ui/index.ts';
 export * from './overlay/ui/index.ts';
 export * from './panel/ui/index.ts';
 export * from './parallel/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,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,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

@@ -16,6 +16,7 @@ export * from "./help/ui/index.js";
 export * from "./hooks/ui/index.js";
 export * from "./i18n/ui/index.js";
 export * from "./language/ui/index.js";
+export * from "./number/ui/index.js";
 export * from "./overlay/ui/index.js";
 export * from "./panel/ui/index.js";
 export * from "./parallel/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,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,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.31.0",
+  "version": "0.33.0",
   "license": "MIT",
   "description": "React components, hooks and framework-free helpers shared by the cheminfo sites: site chrome, citations, sharing, routing, pedagogy, charts, and the structure, orbital and 3D molecule viewers",
   "author": "Luc Patiny",

package/src/core.ts

@@ -12,6 +12,7 @@ export * from './error/core/index.ts';
 export * from './format/core/index.ts';
 export * from './i18n/core/index.ts';
 export * from './language/core/index.ts';
+export * from './number/core/index.ts';
 export * from './orbital/core/index.ts';
 export * from './overlay/core/index.ts';
 export * from './panel/core/index.ts';

package/src/i18n/core/chromeCatalog.ts

@@ -19,7 +19,7 @@ export type ChromeKey = keyof typeof en;
 
 /**
  * The chrome's messages. English is part of the page because it is what a
- * missing message falls back to; the other three arrive as a chunk of their
+ * missing message falls back to; every other language arrives as a chunk of its
  * own, so a site read only in English downloads none of them.
  */
 export const CHROME_CATALOG = new MessageCatalog<ChromeKey>({
@@ -27,9 +27,15 @@ export const CHROME_CATALOG = new MessageCatalog<ChromeKey>({
   repository: 'cheminfo/react-cheminfo',
   directory: 'src/locales',
   source: en,
+  // No `with { type: 'json' }` on these: Vite turns a JSON file into a real
+  // JavaScript module, and the attribute makes the browser refuse the chunk it
+  // serves for being `text/javascript` — the chrome then stays in English with
+  // nothing failing at build or type-check time. The English import above is
+  // static, so the bundler resolves it before a browser ever sees it.
   translations: {
-    fr: () => import('../../locales/fr.json', { with: { type: 'json' } }),
-    de: () => import('../../locales/de.json', { with: { type: 'json' } }),
-    es: () => import('../../locales/es.json', { with: { type: 'json' } }),
+    fr: () => import('../../locales/fr.json'),
+    de: () => import('../../locales/de.json'),
+    es: () => import('../../locales/es.json'),
+    it: () => import('../../locales/it.json'),
   },
 });

package/src/i18n/core/index.ts

@@ -15,6 +15,8 @@ export type {
 } from './messageCatalog.ts';
 export { MessageCatalog } from './messageCatalog.ts';
 export type { MessageValues } from './messageValues.ts';
+export type { ProsePiece } from './prose.ts';
+export { splitProse } from './prose.ts';
 export type { MessageSession } from './session.ts';
 export {
   messageSession,

package/src/i18n/core/languages.ts

@@ -1,13 +1,13 @@
 /**
  * The languages the family speaks.
  *
- * Four, decided together rather than site by site: a visitor who switches to
- * German on one tool and follows a link to the next must land in German there
- * too, and a list that differs between two sites makes that impossible.
+ * Decided together rather than site by site: a visitor who switches to German
+ * on one tool and follows a link to the next must land in German there too, and
+ * a list that differs between two sites makes that impossible.
  */
 
 /** Every language a site of the family is written in. */
-export const LANGUAGES = ['en', 'fr', 'de', 'es'] as const;
+export const LANGUAGES = ['en', 'fr', 'de', 'es', 'it'] as const;
 
 /** One of {@link LANGUAGES}. */
 export type Language = (typeof LANGUAGES)[number];
@@ -31,6 +31,7 @@ export const LANGUAGE_LABELS: Record<Language, string> = {
   fr: 'Français',
   de: 'Deutsch',
   es: 'Español',
+  it: 'Italiano',
 };
 
 /**