react-cheminfo 0.6.0 → 0.8.0

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

@@ -0,0 +1,90 @@
+/**
+ * The periodic table.
+ *
+ * It knows nothing about what it is showing: the caller says what colour each
+ * cell takes and what is written in it, and gets back which element was
+ * clicked. That is what lets the same grid be an element picker, a property
+ * map, and a chart's selection control.
+ *
+ * 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 { Swatch } from '../../color/core/scale.ts';
+import type { PeriodicElement } from '../core/elements.ts';
+import type { ElementRange } from '../core/layout.ts';
+/** What {@link PeriodicTable} needs. */
+export interface PeriodicTableProps {
+    /**
+     * Symbol of the element the tools are pointed at.
+     * @default undefined — none is
+     */
+    selected?: string;
+    /**
+     * Called with the symbol of the element that was clicked, and by the arrow
+     * keys.
+     * @default undefined — the table is a figure rather than a control
+     */
+    onSelect?: (symbol: string) => void;
+    /**
+     * The colour each cell takes.
+     * @default the family colour
+     */
+    swatchOf?: (element: PeriodicElement) => Swatch;
+    /**
+     * What is written under the symbol; an empty string writes nothing.
+     * @default nothing is written
+     */
+    detailOf?: (element: PeriodicElement) => string;
+    /**
+     * How an element is named, for the label a screen reader reads. The hook a
+     * site translating the table writes its own names through.
+     * @default the English name
+     */
+    nameOf?: (element: PeriodicElement) => string;
+    /**
+     * Whether an element is inside the set the tool is showing. Everything
+     * outside it is dimmed rather than removed, so the table keeps its shape.
+     * @default every element is
+     */
+    isIncluded?: (element: PeriodicElement) => boolean;
+    /**
+     * Whether to draw the group and period strips.
+     * @default false
+     */
+    headers?: boolean;
+    /**
+     * Called when a whole group or period header is clicked. Without it the
+     * strips are labels rather than buttons.
+     * @default undefined
+     */
+    onSelectRange?: (range: ElementRange) => void;
+    /**
+     * Whether to draw the family legend under the grid.
+     * @default false
+     */
+    legend?: boolean;
+    /**
+     * Whether the dashed markers stand where the two inner-transition series were
+     * lifted out of the main block.
+     * @default true
+     */
+    markers?: boolean;
+    /**
+     * Whether the arrow keys walk the table by atomic number.
+     * @default true
+     */
+    keyboard?: boolean;
+    /**
+     * Called on pointer enter with the symbol, and on leave with `null`.
+     * @default undefined
+     */
+    onHover?: (symbol: string | null) => void;
+}
+/**
+ * The 118 elements, laid out as the table.
+ * @param props - See {@link PeriodicTableProps}.
+ * @returns The grid, its optional chrome, and its optional legend.
+ */
+export declare function PeriodicTable(props: PeriodicTableProps): ReactElement;
+//# sourceMappingURL=PeriodicTable.d.ts.map

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

@@ -0,0 +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,2BAA2B,CAAC;AAExD,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;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAuErE"}

package/lib/periodic/ui/PeriodicTable.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { categorySwatch } from "../core/categories.js";
+import { COLUMN_COUNT, elementByArrowKey, placedElements, } from "../core/layout.js";
+import { CategoryLegend } from "./CategoryLegend.js";
+import { ElementCell } from "./ElementCell.js";
+import { HeaderStrips, InnerTransitionMarkers, } from "./PeriodicTableChrome.js";
+/**
+ * The 118 elements, laid out as the table.
+ * @param props - See {@link PeriodicTableProps}.
+ * @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, } = props;
+    const gridRef = useRef(null);
+    const cameFromKeyRef = useRef(false);
+    const offset = headers ? 1 : 0;
+    useEffect(() => {
+        if (!cameFromKeyRef.current)
+            return;
+        cameFromKeyRef.current = false;
+        const cell = gridRef.current?.querySelector(`[data-symbol="${CSS.escape(selected ?? '')}"]`);
+        cell?.focus();
+        cell?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }, [selected]);
+    function handleKeyDown(event) {
+        if (!keyboard || onSelect === undefined)
+            return;
+        const next = elementByArrowKey(event.key, selected);
+        if (next === null)
+            return;
+        event.preventDefault();
+        cameFromKeyRef.current = true;
+        onSelect(next.symbol);
+    }
+    return (_jsxs("div", { style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": "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] }));
+}
+function defaultSwatchOf(element) {
+    return categorySwatch(element.category);
+}
+function defaultNameOf(element) {
+    return element.name;
+}
+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.
+}
+const rootStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+};
+const baseGridStyle = {
+    display: 'grid',
+    gap: 2,
+    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 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,
+};
+//# sourceMappingURL=PeriodicTable.js.map

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

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

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

@@ -0,0 +1,36 @@
+/**
+ * The furniture around the cells: the group and period strips, and the two
+ * markers the inner-transition series were lifted out of.
+ */
+import type { ReactElement } from 'react';
+import type { ElementRange } from '../core/layout.ts';
+/** What {@link HeaderStrips} needs. */
+export interface HeaderStripsProps {
+    /**
+     * Called with the run whose header was clicked. Without it the strips are
+     * labels rather than buttons.
+     * @default undefined
+     */
+    onSelectRange?: (range: ElementRange) => void;
+}
+/**
+ * The 1–18 strip along the top and the 1–7 strip down the left.
+ *
+ * They are buttons when the table takes a range: "plot period 3" is one click
+ * there and eight on the cells.
+ * @param props - See {@link HeaderStripsProps}.
+ * @returns The two strips, placed on the grid.
+ */
+export declare function HeaderStrips(props: HeaderStripsProps): ReactElement;
+/** What {@link InnerTransitionMarkers} needs. */
+export interface InnerTransitionMarkersProps {
+    /** 1 when the table draws its header strips, 0 otherwise. */
+    offset: number;
+}
+/**
+ * The two cells the lanthanoids and the actinoids were lifted out of.
+ * @param props - See {@link InnerTransitionMarkersProps}.
+ * @returns The markers, placed on the grid.
+ */
+export declare function InnerTransitionMarkers(props: InnerTransitionMarkersProps): ReactElement;
+//# sourceMappingURL=PeriodicTableChrome.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodicTableChrome.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTableChrome.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,uCAAuC;AACvC,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAqDnE;AAED,iDAAiD;AACjD,MAAM,WAAW,2BAA2B;IAC1C,6DAA6D;IAC7D,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,2BAA2B,GACjC,YAAY,CAmBd"}

package/lib/periodic/ui/PeriodicTableChrome.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { COLUMN_COUNT, INNER_TRANSITION_MARKERS, INNER_TRANSITION_ROWS, } from "../core/layout.js";
+/**
+ * The 1–18 strip along the top and the 1–7 strip down the left.
+ *
+ * They are buttons when the table takes a range: "plot period 3" is one click
+ * there and eight on the cells.
+ * @param props - See {@link HeaderStripsProps}.
+ * @returns The two strips, placed on the grid.
+ */
+export function HeaderStrips(props) {
+    const { onSelectRange } = props;
+    const groups = [];
+    for (let group = 1; group <= COLUMN_COUNT; group++) {
+        groups.push(_jsx(HeaderCell, { label: String(group), title: `Group ${String(group)}`, column: group + 1, row: 1, onClick: onSelectRange &&
+                (() => {
+                    onSelectRange({ kind: 'group', value: group });
+                }) }, `group-${String(group)}`));
+    }
+    const periods = [];
+    for (let period = 1; period <= 7; period++) {
+        periods.push(_jsx(HeaderCell, { label: String(period), title: `Period ${String(period)}`, column: 1, row: period + 1, onClick: onSelectRange &&
+                (() => {
+                    onSelectRange({ kind: 'period', value: period });
+                }) }, `period-${String(period)}`));
+    }
+    return (_jsxs(_Fragment, { children: [groups, periods, INNER_TRANSITION_ROWS.map(({ row, period }) => (_jsx("div", { style: { ...headerStyle, gridColumn: 1, gridRow: row + 1 }, children: period }, `inner-${String(row)}`)))] }));
+}
+/**
+ * The two cells the lanthanoids and the actinoids were lifted out of.
+ * @param props - See {@link InnerTransitionMarkersProps}.
+ * @returns The markers, placed on the grid.
+ */
+export function InnerTransitionMarkers(props) {
+    const { offset } = props;
+    return (_jsx(_Fragment, { children: INNER_TRANSITION_MARKERS.map(({ cell, label, category }) => (_jsx("div", { "aria-hidden": "true", style: {
+                ...markerStyle,
+                gridColumn: cell.column + offset,
+                gridRow: cell.row + offset,
+            }, children: label }, category))) }));
+}
+function HeaderCell(props) {
+    const { label, title, column, row, onClick } = props;
+    const style = { ...headerStyle, gridColumn: column, gridRow: row };
+    if (onClick === undefined)
+        return _jsx("div", { style: style, children: label });
+    return (_jsx("button", { type: "button", "aria-label": title, onClick: onClick, style: { ...style, ...headerButtonStyle }, children: label }));
+}
+const headerStyle = {
+    alignItems: 'center',
+    color: 'rgb(95 107 124)',
+    display: 'flex',
+    fontSize: 'clamp(0.4rem, 1.9cqw, 0.62rem)',
+    justifyContent: 'center',
+    padding: 0,
+};
+const headerButtonStyle = {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    font: 'inherit',
+};
+const markerStyle = {
+    alignItems: 'center',
+    border: '1px dashed rgb(182 191 204)',
+    borderRadius: 3,
+    color: 'rgb(95 107 124)',
+    display: 'flex',
+    fontSize: 'clamp(0.36rem, 1.7cqw, 0.55rem)',
+    justifyContent: 'center',
+};
+//# sourceMappingURL=PeriodicTableChrome.js.map

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

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

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

@@ -0,0 +1,7 @@
+export type { CategoryLegendProps } from './CategoryLegend.tsx';
+export { CategoryLegend } from './CategoryLegend.tsx';
+export type { ElementCellProps } from './ElementCell.tsx';
+export { ElementCell } from './ElementCell.tsx';
+export type { PeriodicTableProps } from './PeriodicTable.tsx';
+export { PeriodicTable } from './PeriodicTable.tsx';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/periodic/ui/index.js

@@ -0,0 +1,4 @@
+export { CategoryLegend } from "./CategoryLegend.js";
+export { ElementCell } from "./ElementCell.js";
+export { PeriodicTable } from "./PeriodicTable.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/periodic/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC"}

package/lib/ui.d.ts

@@ -11,6 +11,7 @@ export * from './error/ui/index.ts';
 export * from './help/ui/index.ts';
 export * from './hooks/ui/index.ts';
 export * from './pedagogy/ui/index.ts';
+export * from './periodic/ui/index.ts';
 export * from './share/ui/index.ts';
 export * from './shared/ui/index.ts';
 export * from './state/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,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/lib/ui.js

@@ -11,6 +11,7 @@ export * from "./error/ui/index.js";
 export * from "./help/ui/index.js";
 export * from "./hooks/ui/index.js";
 export * from "./pedagogy/ui/index.js";
+export * from "./periodic/ui/index.js";
 export * from "./share/ui/index.js";
 export * from "./shared/ui/index.js";
 export * from "./state/ui/index.js";

package/lib/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "license": "MIT",
   "description": "Assembled React components shared by the cheminfo sites: a Cite button and an ecosystem menu",
   "author": "Luc Patiny",
@@ -54,6 +54,7 @@
     "@types/react-dom": "^19.2.4",
     "@vitest/coverage-v8": "^4.1.10",
     "@zakodium/tsconfig": "^1.0.5",
+    "chemical-elements": "^2.3.2",
     "eslint": "^9.39.5",
     "eslint-config-cheminfo-react": "^20.1.0",
     "eslint-config-cheminfo-typescript": "^22.1.0",

package/src/citation/core/index.ts

@@ -12,6 +12,7 @@ export {
   citationFilename,
   formatCitation,
 } from './formats.ts';
+export { PLATFORM_PAPER, PLATFORM_WORK } from './platformPaper.ts';
 export type { Reference, ReferenceAuthor } from './reference.ts';
 export { doiUrl } from './reference.ts';
 export type {
@@ -20,6 +21,7 @@ export type {
   CitationStyleId,
 } from './segments.ts';
 export { CITATION_STYLES, citationSegments } from './segments.ts';
+export { TEACHING_PAPER, TEACHING_WORK } from './teachingPaper.ts';
 export type { CitedWork } from './works.ts';
 export {
   citationsFilename,

package/src/citation/core/platformPaper.ts

@@ -0,0 +1,32 @@
+import type { Reference } from './reference.ts';
+import type { CitedWork } from './works.ts';
+
+/**
+ * The platform every site of the family runs on: chemical data processed in the
+ * browser, which is what makes these applications rather than queues of jobs.
+ * One record holds it, so no site can name a different version of it.
+ */
+export const PLATFORM_PAPER: Reference = {
+  authors: [{ given: 'L.', family: 'Patiny' }],
+  title:
+    'Unlocking the Potential of Browser-Based Scientific Data Analysis: A 20-Year Journey of Expertise',
+  journal: 'CHIMIA',
+  journalAbbreviation: 'Chimia',
+  year: 2025,
+  volume: '79',
+  issue: '1-2',
+  firstPage: '66',
+  lastPage: '69',
+  doi: '10.2533/chimia.2025.66',
+  publisher: 'Swiss Chemical Society',
+};
+
+/**
+ * The platform paper as the second work a site asks to be cited, after the work
+ * the tool itself implements.
+ */
+export const PLATFORM_WORK: CitedWork = {
+  reference: PLATFORM_PAPER,
+  what: 'Data processing in the browser',
+  note: 'Cite it for the site itself, which runs in the browser.',
+};

package/src/citation/core/teachingPaper.ts

@@ -0,0 +1,36 @@
+import type { Reference } from './reference.ts';
+import type { CitedWork } from './works.ts';
+
+/**
+ * The twenty years of online teaching the pedagogic sites of the family come
+ * out of: the tutorials, the exercises and the marking are the web-based tools
+ * it describes. One record holds it, so no site can name a different version
+ * of it.
+ */
+export const TEACHING_PAPER: Reference = {
+  authors: [
+    { given: 'R.', family: 'Turin' },
+    { given: 'L.', family: 'Patiny' },
+  ],
+  title:
+    'Two Decades of Online Teaching: Trends, Challenges, and Future Directions',
+  journal: 'CHIMIA',
+  journalAbbreviation: 'Chimia',
+  year: 2023,
+  volume: '77',
+  issue: '10',
+  firstPage: '683',
+  lastPage: '687',
+  doi: '10.2533/chimia.2023.683',
+  publisher: 'Swiss Chemical Society',
+};
+
+/**
+ * The teaching paper as one of the works a site that teaches asks to be cited,
+ * beside `PLATFORM_WORK` and the work the tool itself implements.
+ */
+export const TEACHING_WORK: CitedWork = {
+  reference: TEACHING_PAPER,
+  what: 'Teaching chemistry online',
+  note: 'Cite it for the exercises, which are the web-based teaching it describes.',
+};

package/src/color/core/index.ts

@@ -1,4 +1,9 @@
 export type { ReadableInkOptions } from './contrast.ts';
 export { contrastRatio, readableInk, relativeLuminance } from './contrast.ts';
 export type { PositionInRangeOptions, Swatch } from './scale.ts';
-export { VIRIDIS_SCALE, positionInRange, swatchFromScale } from './scale.ts';
+export {
+  VIRIDIS_SCALE,
+  colorFromScale,
+  positionInRange,
+  swatchFromScale,
+} from './scale.ts';

package/src/core.ts

@@ -8,6 +8,7 @@ export * from './ecosystem/core/index.ts';
 export * from './format/core/index.ts';
 export * from './orbital/core/index.ts';
 export * from './pedagogy/core/index.ts';
+export * from './periodic/core/index.ts';
 export * from './router/core/index.ts';
 export * from './seo/core/index.ts';
 export * from './share/core/index.ts';

package/src/ecosystem/core/sites.ts

@@ -107,8 +107,8 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     repository: 'https://github.com/cheminfo/chemcalc.org',
     tagline: 'Molecular formula, exact mass and isotopic distribution.',
     brand: '#5b52e0',
-    brandAlt: '#0d9488',
-    mark: { plate: '#5b52e0', accent: '#09d3ac' },
+    brandAlt: '#d63384',
+    mark: { plate: '#5b52e0', accent: '#ff8ac2' },
   },
   {
     id: 'nmrium',
@@ -206,9 +206,9 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'polycarp.cheminfo.org',
     repository: 'https://github.com/cheminfo/polycarp.cheminfo.org',
     tagline: 'Predict the microstructure of a radical copolymerisation.',
-    brand: '#0d1d37',
-    brandAlt: '#0c9ba3',
-    mark: { plate: '#0d1d37', accent: '#0c9ba3' },
+    brand: '#701a75',
+    brandAlt: '#4d7c0f',
+    mark: { plate: '#701a75', accent: '#a3e635' },
   },
   {
     id: '3d',

package/src/orbital/core/index.ts

@@ -60,4 +60,4 @@ export type {
 } from './sample.ts';
 export { runAtomicSample } from './sample.ts';
 export type { Screening } from './screening.ts';
-export { slaterScreening } from './screening.ts';
+export { groupRank, slaterScreening } from './screening.ts';

package/src/pedagogy/ui/TutorialStepStrip.tsx

@@ -1,15 +1,29 @@
 import { Button, Tag, Tooltip } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
-import type { ExerciseLevel, TutorialStep } from '../core/types.ts';
+import type { ExerciseLevel } from '../core/types.ts';
 
 import { LEVEL_ORDER } from './exerciseMeta.ts';
 import type { TutorialLevelColours } from './tutorialLevels.ts';
 import { TUTORIAL_LEVEL_COLOURS } from './tutorialLevels.ts';
 
+/**
+ * The little a strip needs of a step: what to call it, and which coloured group
+ * it belongs to. A tool passes its own steps, whatever else they carry.
+ */
+export interface TutorialStripStep {
+  /**
+   * What keys the button, when the tool gives its steps one.
+   * @default undefined — the position in the tour keys it instead
+   */
+  id?: string;
+  title: string;
+  level: ExerciseLevel;
+}
+
 export interface TutorialStepStripProps {
   /** The whole tour, in teaching order. */
-  steps: readonly TutorialStep[];
+  steps: readonly TutorialStripStep[];
   /**
    * Which step is open, as its position in `steps`. A position outside the
    * tour is read as one of its ends, so a hand-edited link still opens.
@@ -110,7 +124,7 @@ export function TutorialStepStrip(props: TutorialStepStripProps): ReactElement {
 }
 
 interface LevelStripProps {
-  steps: readonly TutorialStep[];
+  steps: readonly TutorialStripStep[];
   positions: readonly number[];
   colours: TutorialLevelColours;
   label: string;
@@ -122,11 +136,11 @@ function LevelStrip(props: LevelStripProps): ReactElement {
   const { steps, positions, colours, label, activeIndex, onSelect } = props;
   const buttons: ReactNode[] = [];
   for (const position of positions) {
-    const step = steps[position] as TutorialStep;
+    const step = steps[position] as TutorialStripStep;
     const active = position === activeIndex;
     buttons.push(
       <Tooltip
-        key={step.id}
+        key={step.id ?? position}
         content={step.title}
         hoverOpenDelay={HOVER_OPEN_DELAY}
         placement="bottom"
@@ -155,7 +169,7 @@ function LevelStrip(props: LevelStripProps): ReactElement {
 }
 
 function positionsOfLevel(
-  steps: readonly TutorialStep[],
+  steps: readonly TutorialStripStep[],
   level: ExerciseLevel,
 ): number[] {
   const positions: number[] = [];
@@ -172,6 +186,9 @@ function clampIndex(index: number, total: number): number {
 
 /**
  * The open step takes the darker shade of its own level, plus a border.
+ *
+ * Every button is the same square whatever it holds, so the numbers of one
+ * strip stand above those of the next and the tour reads as a grid.
  * @param colours - The two shades of the level the step belongs to.
  * @param active - Whether this is the step on screen.
  * @returns The style of one numbered button.
@@ -181,20 +198,29 @@ function numberStyle(
   active: boolean,
 ): CSSProperties {
   return {
-    background: active ? colours.activeBackground : '#ffffff',
+    display: 'inline-flex',
+    width: STEP_SIZE,
+    height: STEP_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
     border: active ? '2px solid #1c2127' : '1px solid rgb(17 20 24 / 20%)',
     borderRadius: 4,
+    background: active ? colours.activeBackground : '#ffffff',
+    boxSizing: 'border-box',
     color: '#1c2127',
     cursor: 'pointer',
     font: 'inherit',
     fontSize: 12,
+    fontVariantNumeric: 'tabular-nums',
     fontWeight: active ? 700 : 500,
     lineHeight: 1,
-    minWidth: 26,
-    padding: active ? '5px 6px' : '6px 7px',
   };
 }
 
+/** Wide enough for two digits, which every tour of ours stays under a hundred of. */
+const STEP_SIZE = 28;
+
 /** Long enough that the pointer can cross the strip without opening a title. */
 const HOVER_OPEN_DELAY = 150;
 

package/src/pedagogy/ui/index.ts

@@ -31,7 +31,10 @@ export type {
 export { SyntaxTooltip } from './SyntaxTooltip.tsx';
 export type { TestCaseListProps } from './TestCaseList.tsx';
 export { TestCaseList } from './TestCaseList.tsx';
-export type { TutorialStepStripProps } from './TutorialStepStrip.tsx';
+export type {
+  TutorialStepStripProps,
+  TutorialStripStep,
+} from './TutorialStepStrip.tsx';
 export { TutorialStepStrip } from './TutorialStepStrip.tsx';
 export type { TutorialLevelColours } from './tutorialLevels.ts';
 export { TUTORIAL_LEVEL_COLOURS } from './tutorialLevels.ts';