react-cheminfo 0.6.0 → 0.7.0

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.7.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 {

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/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/periodic/core/categories.ts

@@ -0,0 +1,83 @@
+/**
+ * What each family is called, and the colour it takes.
+ *
+ * Ten hues that stay distinguishable under deuteranopia and protanopia, and
+ * that keep the metals warm and the non-metals cool the way a wall chart does.
+ * Each is paired at load with the ink that stays readable on it, so a cell
+ * never has to compute a contrast while it renders.
+ */
+
+import { readableInk } from '../../color/core/contrast.ts';
+import type { Swatch } from '../../color/core/scale.ts';
+
+import type { ElementCategory } from './elements.ts';
+
+/** Families in the order a legend lists them, which is the order of the table. */
+export const CATEGORY_ORDER: readonly ElementCategory[] = [
+  'alkali-metal',
+  'alkaline-earth-metal',
+  'transition-metal',
+  'post-transition-metal',
+  'metalloid',
+  'nonmetal',
+  'halogen',
+  'noble-gas',
+  'lanthanoid',
+  'actinoid',
+];
+
+/** What each family is called in a legend. */
+export const CATEGORY_LABELS: Record<ElementCategory, string> = {
+  'alkali-metal': 'Alkali metal',
+  'alkaline-earth-metal': 'Alkaline earth',
+  'transition-metal': 'Transition metal',
+  'post-transition-metal': 'Post-transition',
+  metalloid: 'Metalloid',
+  nonmetal: 'Non-metal',
+  halogen: 'Halogen',
+  'noble-gas': 'Noble gas',
+  lanthanoid: 'Lanthanoid',
+  actinoid: 'Actinoid',
+};
+
+const CATEGORY_BACKGROUNDS: Record<ElementCategory, string> = {
+  'alkali-metal': '#f4a58a',
+  'alkaline-earth-metal': '#f6c98a',
+  'transition-metal': '#e8b7d4',
+  'post-transition-metal': '#c8c3ea',
+  metalloid: '#c9d67c',
+  nonmetal: '#7fd4a8',
+  halogen: '#8fd9d2',
+  'noble-gas': '#9ec9f0',
+  lanthanoid: '#f2d06b',
+  actinoid: '#e5a3a3',
+};
+
+/** The colour of each family, with the ink that stays readable on it. */
+export const CATEGORY_SWATCHES: Record<ElementCategory, Swatch> =
+  Object.fromEntries(
+    CATEGORY_ORDER.map((category) => [
+      category,
+      {
+        background: CATEGORY_BACKGROUNDS[category],
+        foreground: readableInk(CATEGORY_BACKGROUNDS[category]),
+      },
+    ]),
+  ) as Record<ElementCategory, Swatch>;
+
+const UNKNOWN_BACKGROUND = '#e4e8ee';
+
+/** Shown for a cell whose family is unknown. */
+export const UNKNOWN_SWATCH: Swatch = {
+  background: UNKNOWN_BACKGROUND,
+  foreground: readableInk(UNKNOWN_BACKGROUND),
+};
+
+/**
+ * The swatch of one family.
+ * @param category - Family to look up.
+ * @returns Its colour and the ink to write on it.
+ */
+export function categorySwatch(category: ElementCategory): Swatch {
+  return CATEGORY_SWATCHES[category] ?? UNKNOWN_SWATCH;
+}

package/src/periodic/core/elements.ts

@@ -0,0 +1,217 @@
+/**
+ * Where every element sits in the table, and which family it belongs to.
+ *
+ * Deliberately the *position* and nothing else: the masses, the isotopes and
+ * the exact monoisotopic masses are `chemical-elements`' subject, and a site
+ * that needs them reads them from there. Importing that package pulls its whole
+ * isotope table, which a site wanting only an element picker must not be made
+ * to carry — so the symbols and names are repeated here, and a test asserts
+ * they still agree with it.
+ *
+ * `block` follows the element's *position* in the table, which is what a
+ * student reads off it. The configuration is the authority on which subshell is
+ * actually filling, and the two disagree for a handful of elements — lanthanum
+ * fills 5d, not 4f. See `ELEMENT_ANOMALIES` in the orbital module.
+ */
+
+/** Region of the table an element sits in. */
+export type ElementBlock = 's' | 'p' | 'd' | 'f';
+
+/** Coarse family, used to colour the table. */
+export type ElementCategory =
+  | 'alkali-metal'
+  | 'alkaline-earth-metal'
+  | 'transition-metal'
+  | 'post-transition-metal'
+  | 'metalloid'
+  | 'nonmetal'
+  | 'halogen'
+  | 'noble-gas'
+  | 'lanthanoid'
+  | 'actinoid';
+
+/** One element, as the table places it. */
+export interface PeriodicElement {
+  /** Proton count, 1 to 118. */
+  atomicNumber: number;
+  /** Chemical symbol, e.g. `Fe`. */
+  symbol: string;
+  /** English name, spelled as `chemical-elements` spells it. */
+  name: string;
+  /** Row of the table, 1 to 7. */
+  period: number;
+  /** IUPAC column 1 to 18; `null` for the lanthanoids and the actinoids. */
+  group: number | null;
+  block: ElementBlock;
+  category: ElementCategory;
+}
+
+/** `[symbol, name, period, group, category]`; atomic number is the position. */
+type ElementRow = [string, string, number, number | null, ElementCategory];
+
+const ROWS: ElementRow[] = [
+  ['H', 'Hydrogen', 1, 1, 'nonmetal'],
+  ['He', 'Helium', 1, 18, 'noble-gas'],
+  ['Li', 'Lithium', 2, 1, 'alkali-metal'],
+  ['Be', 'Beryllium', 2, 2, 'alkaline-earth-metal'],
+  ['B', 'Boron', 2, 13, 'metalloid'],
+  ['C', 'Carbon', 2, 14, 'nonmetal'],
+  ['N', 'Nitrogen', 2, 15, 'nonmetal'],
+  ['O', 'Oxygen', 2, 16, 'nonmetal'],
+  ['F', 'Fluorine', 2, 17, 'halogen'],
+  ['Ne', 'Neon', 2, 18, 'noble-gas'],
+  ['Na', 'Sodium', 3, 1, 'alkali-metal'],
+  ['Mg', 'Magnesium', 3, 2, 'alkaline-earth-metal'],
+  ['Al', 'Aluminium', 3, 13, 'post-transition-metal'],
+  ['Si', 'Silicon', 3, 14, 'metalloid'],
+  ['P', 'Phosphorus', 3, 15, 'nonmetal'],
+  ['S', 'Sulfur', 3, 16, 'nonmetal'],
+  ['Cl', 'Chlorine', 3, 17, 'halogen'],
+  ['Ar', 'Argon', 3, 18, 'noble-gas'],
+  ['K', 'Potassium', 4, 1, 'alkali-metal'],
+  ['Ca', 'Calcium', 4, 2, 'alkaline-earth-metal'],
+  ['Sc', 'Scandium', 4, 3, 'transition-metal'],
+  ['Ti', 'Titanium', 4, 4, 'transition-metal'],
+  ['V', 'Vanadium', 4, 5, 'transition-metal'],
+  ['Cr', 'Chromium', 4, 6, 'transition-metal'],
+  ['Mn', 'Manganese', 4, 7, 'transition-metal'],
+  ['Fe', 'Iron', 4, 8, 'transition-metal'],
+  ['Co', 'Cobalt', 4, 9, 'transition-metal'],
+  ['Ni', 'Nickel', 4, 10, 'transition-metal'],
+  ['Cu', 'Copper', 4, 11, 'transition-metal'],
+  ['Zn', 'Zinc', 4, 12, 'transition-metal'],
+  ['Ga', 'Gallium', 4, 13, 'post-transition-metal'],
+  ['Ge', 'Germanium', 4, 14, 'metalloid'],
+  ['As', 'Arsenic', 4, 15, 'metalloid'],
+  ['Se', 'Selenium', 4, 16, 'nonmetal'],
+  ['Br', 'Bromine', 4, 17, 'halogen'],
+  ['Kr', 'Krypton', 4, 18, 'noble-gas'],
+  ['Rb', 'Rubidium', 5, 1, 'alkali-metal'],
+  ['Sr', 'Strontium', 5, 2, 'alkaline-earth-metal'],
+  ['Y', 'Yttrium', 5, 3, 'transition-metal'],
+  ['Zr', 'Zirconium', 5, 4, 'transition-metal'],
+  ['Nb', 'Niobium', 5, 5, 'transition-metal'],
+  ['Mo', 'Molybdenum', 5, 6, 'transition-metal'],
+  ['Tc', 'Technetium', 5, 7, 'transition-metal'],
+  ['Ru', 'Ruthenium', 5, 8, 'transition-metal'],
+  ['Rh', 'Rhodium', 5, 9, 'transition-metal'],
+  ['Pd', 'Palladium', 5, 10, 'transition-metal'],
+  ['Ag', 'Silver', 5, 11, 'transition-metal'],
+  ['Cd', 'Cadmium', 5, 12, 'transition-metal'],
+  ['In', 'Indium', 5, 13, 'post-transition-metal'],
+  ['Sn', 'Tin', 5, 14, 'post-transition-metal'],
+  ['Sb', 'Antimony', 5, 15, 'metalloid'],
+  ['Te', 'Tellurium', 5, 16, 'metalloid'],
+  ['I', 'Iodine', 5, 17, 'halogen'],
+  ['Xe', 'Xenon', 5, 18, 'noble-gas'],
+  ['Cs', 'Caesium', 6, 1, 'alkali-metal'],
+  ['Ba', 'Barium', 6, 2, 'alkaline-earth-metal'],
+  ['La', 'Lanthanum', 6, null, 'lanthanoid'],
+  ['Ce', 'Cerium', 6, null, 'lanthanoid'],
+  ['Pr', 'Praseodymium', 6, null, 'lanthanoid'],
+  ['Nd', 'Neodymium', 6, null, 'lanthanoid'],
+  ['Pm', 'Promethium', 6, null, 'lanthanoid'],
+  ['Sm', 'Samarium', 6, null, 'lanthanoid'],
+  ['Eu', 'Europium', 6, null, 'lanthanoid'],
+  ['Gd', 'Gadolinium', 6, null, 'lanthanoid'],
+  ['Tb', 'Terbium', 6, null, 'lanthanoid'],
+  ['Dy', 'Dysprosium', 6, null, 'lanthanoid'],
+  ['Ho', 'Holmium', 6, null, 'lanthanoid'],
+  ['Er', 'Erbium', 6, null, 'lanthanoid'],
+  ['Tm', 'Thulium', 6, null, 'lanthanoid'],
+  ['Yb', 'Ytterbium', 6, null, 'lanthanoid'],
+  ['Lu', 'Lutetium', 6, null, 'lanthanoid'],
+  ['Hf', 'Hafnium', 6, 4, 'transition-metal'],
+  ['Ta', 'Tantalum', 6, 5, 'transition-metal'],
+  ['W', 'Tungsten', 6, 6, 'transition-metal'],
+  ['Re', 'Rhenium', 6, 7, 'transition-metal'],
+  ['Os', 'Osmium', 6, 8, 'transition-metal'],
+  ['Ir', 'Iridium', 6, 9, 'transition-metal'],
+  ['Pt', 'Platinum', 6, 10, 'transition-metal'],
+  ['Au', 'Gold', 6, 11, 'transition-metal'],
+  ['Hg', 'Mercury', 6, 12, 'transition-metal'],
+  ['Tl', 'Thallium', 6, 13, 'post-transition-metal'],
+  ['Pb', 'Lead', 6, 14, 'post-transition-metal'],
+  ['Bi', 'Bismuth', 6, 15, 'post-transition-metal'],
+  ['Po', 'Polonium', 6, 16, 'post-transition-metal'],
+  ['At', 'Astatine', 6, 17, 'halogen'],
+  ['Rn', 'Radon', 6, 18, 'noble-gas'],
+  ['Fr', 'Francium', 7, 1, 'alkali-metal'],
+  ['Ra', 'Radium', 7, 2, 'alkaline-earth-metal'],
+  ['Ac', 'Actinium', 7, null, 'actinoid'],
+  ['Th', 'Thorium', 7, null, 'actinoid'],
+  ['Pa', 'Protactinium', 7, null, 'actinoid'],
+  ['U', 'Uranium', 7, null, 'actinoid'],
+  ['Np', 'Neptunium', 7, null, 'actinoid'],
+  ['Pu', 'Plutonium', 7, null, 'actinoid'],
+  ['Am', 'Americium', 7, null, 'actinoid'],
+  ['Cm', 'Curium', 7, null, 'actinoid'],
+  ['Bk', 'Berkelium', 7, null, 'actinoid'],
+  ['Cf', 'Californium', 7, null, 'actinoid'],
+  ['Es', 'Einsteinium', 7, null, 'actinoid'],
+  ['Fm', 'Fermium', 7, null, 'actinoid'],
+  ['Md', 'Mendelevium', 7, null, 'actinoid'],
+  ['No', 'Nobelium', 7, null, 'actinoid'],
+  ['Lr', 'Lawrencium', 7, null, 'actinoid'],
+  ['Rf', 'Rutherfordium', 7, 4, 'transition-metal'],
+  ['Db', 'Dubnium', 7, 5, 'transition-metal'],
+  ['Sg', 'Seaborgium', 7, 6, 'transition-metal'],
+  ['Bh', 'Bohrium', 7, 7, 'transition-metal'],
+  ['Hs', 'Hassium', 7, 8, 'transition-metal'],
+  ['Mt', 'Meitnerium', 7, 9, 'transition-metal'],
+  ['Ds', 'Darmstadtium', 7, 10, 'transition-metal'],
+  ['Rg', 'Roentgenium', 7, 11, 'transition-metal'],
+  ['Cn', 'Copernicium', 7, 12, 'transition-metal'],
+  ['Nh', 'Nihonium', 7, 13, 'post-transition-metal'],
+  ['Fl', 'Flerovium', 7, 14, 'post-transition-metal'],
+  ['Mc', 'Moscovium', 7, 15, 'post-transition-metal'],
+  ['Lv', 'Livermorium', 7, 16, 'post-transition-metal'],
+  ['Ts', 'Tennessine', 7, 17, 'halogen'],
+  ['Og', 'Oganesson', 7, 18, 'noble-gas'],
+];
+
+/** Every element, ordered by atomic number. */
+export const PERIODIC_ELEMENTS: readonly PeriodicElement[] = ROWS.map(
+  (row, index) => ({
+    atomicNumber: index + 1,
+    symbol: row[0],
+    name: row[1],
+    period: row[2],
+    group: row[3],
+    block: blockOf(index + 1, row[3]),
+    category: row[4],
+  }),
+);
+
+const BY_SYMBOL = new Map(
+  PERIODIC_ELEMENTS.map((element) => [element.symbol, element]),
+);
+
+/**
+ * Look up an element by its symbol.
+ * @param symbol - Chemical symbol, e.g. `Cl`. Case sensitive, as symbols are.
+ * @returns The element, or `undefined` when no element carries that symbol.
+ */
+export function elementBySymbol(symbol: string): PeriodicElement | undefined {
+  return BY_SYMBOL.get(symbol);
+}
+
+/**
+ * Look up an element by its atomic number.
+ * @param atomicNumber - Proton count, 1 to 118.
+ * @returns The element, or `undefined` when it is outside the table.
+ */
+export function elementByAtomicNumber(
+  atomicNumber: number,
+): PeriodicElement | undefined {
+  return PERIODIC_ELEMENTS[atomicNumber - 1];
+}
+
+function blockOf(atomicNumber: number, group: number | null): ElementBlock {
+  if (group === null) return 'f';
+  // Helium sits above the p block but its only electrons are 1s.
+  if (atomicNumber === 2) return 's';
+  if (group <= 2) return 's';
+  if (group <= 12) return 'd';
+  return 'p';
+}

package/src/periodic/core/index.ts

@@ -0,0 +1,27 @@
+export type {
+  ElementBlock,
+  ElementCategory,
+  PeriodicElement,
+} from './elements.ts';
+export {
+  PERIODIC_ELEMENTS,
+  elementByAtomicNumber,
+  elementBySymbol,
+} from './elements.ts';
+export {
+  CATEGORY_LABELS,
+  CATEGORY_ORDER,
+  CATEGORY_SWATCHES,
+  UNKNOWN_SWATCH,
+  categorySwatch,
+} from './categories.ts';
+export type { Cell, ElementRange } from './layout.ts';
+export {
+  COLUMN_COUNT,
+  INNER_TRANSITION_MARKERS,
+  INNER_TRANSITION_ROWS,
+  ROW_COUNT,
+  cellOf,
+  elementByArrowKey,
+  placedElements,
+} from './layout.ts';