react-cheminfo 0.73.0 → 0.75.0

package/lib/structure/ui/useStructureSearchModes.js

@@ -0,0 +1,36 @@
+import { useChromeT } from "../../i18n/ui/useT.js";
+import { STRUCTURE_SEARCH_MODES } from "../core/structureSearch.js";
+const MODE_KEYS = {
+    substructure: [
+        'structure.search.substructure',
+        'structure.search.substructureHelp',
+    ],
+    similarity: [
+        'structure.search.similarity',
+        'structure.search.similarityHelp',
+    ],
+    exact: ['structure.search.exact', 'structure.search.exactHelp'],
+    exactNoStereo: [
+        'structure.search.exactNoStereo',
+        'structure.search.exactNoStereoHelp',
+    ],
+    exactNoStereoTautomer: [
+        'structure.search.exactNoStereoTautomer',
+        'structure.search.exactNoStereoTautomerHelp',
+    ],
+};
+/**
+ * The modes in the reader's language, for a site that shows the mode in force
+ * beside the drawing.
+ * @param modes - The modes, in order.
+ * @returns Each mode with its label and its one-line help.
+ */
+export function useStructureSearchModes(modes = STRUCTURE_SEARCH_MODES) {
+    const t = useChromeT();
+    return modes.map((mode) => ({
+        mode,
+        label: t(MODE_KEYS[mode][0]),
+        help: t(MODE_KEYS[mode][1]),
+    }));
+}
+//# sourceMappingURL=useStructureSearchModes.js.map

package/lib/structure/ui/useStructureSearchModes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStructureSearchModes.js","sourceRoot":"","sources":["../../../src/structure/ui/useStructureSearchModes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAYpE,MAAM,SAAS,GAAwD;IACrE,YAAY,EAAE;QACZ,+BAA+B;QAC/B,mCAAmC;KACpC;IACD,UAAU,EAAE;QACV,6BAA6B;QAC7B,iCAAiC;KAClC;IACD,KAAK,EAAE,CAAC,wBAAwB,EAAE,4BAA4B,CAAC;IAC/D,aAAa,EAAE;QACb,gCAAgC;QAChC,oCAAoC;KACrC;IACD,qBAAqB,EAAE;QACrB,wCAAwC;QACxC,4CAA4C;KAC7C;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,uBAAuB,CACrC,QAAwC,sBAAsB;IAE9D,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC1B,IAAI;QACJ,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;KAC5B,CAAC,CAAC,CAAC;AACN,CAAC"}

package/lib/structure/ui/useToolbarFloor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToolbarFloor.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/useToolbarFloor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,0CAA0C;AAC1C,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,GAAE,mBAAwB,GAChC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAyBlC"}
+{"version":3,"file":"useToolbarFloor.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/useToolbarFloor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,0CAA0C;AAC1C,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,GAAE,mBAAwB,GAChC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAmClC"}

package/lib/structure/ui/useToolbarFloor.js

@@ -18,19 +18,29 @@ export function useToolbarFloor(options = {}) {
         if (container === null)
             return;
         return watchToolbar(container, (toolbar) => {
+            let frame = 0;
             const size = new ResizeObserver(() => {
-                // offsetHeight, because a dialog opens under a scaling transform and a
-                // measured rectangle would be that of the half drawn toolbar.
-                const height = toolbar.offsetHeight;
-                // Zero is a toolbar being torn down or not yet laid out, never a
-                // toolbar that needs no room: writing the fallback for it would undo a
-                // correct floor and leave the palette cut off.
-                if (height === 0)
-                    return;
-                container.style.minHeight = `${toolbarFloorHeight(height, minHeight)}px`;
+                // Written on the next frame: growing the box from inside this callback
+                // resizes the editor element above the toolbar, whose own observer the
+                // browser then drops with a "ResizeObserver loop" error.
+                cancelAnimationFrame(frame);
+                frame = requestAnimationFrame(() => {
+                    // offsetHeight, because a dialog opens under a scaling transform and
+                    // a measured rectangle would be that of the half drawn toolbar.
+                    const height = toolbar.offsetHeight;
+                    // Zero is a toolbar being torn down or not yet laid out, never a
+                    // toolbar that needs no room: writing the fallback for it would undo
+                    // a correct floor and leave the palette cut off.
+                    if (height === 0)
+                        return;
+                    container.style.minHeight = `${toolbarFloorHeight(height, minHeight)}px`;
+                });
             });
             size.observe(toolbar);
-            return () => size.disconnect();
+            return () => {
+                cancelAnimationFrame(frame);
+                size.disconnect();
+            };
         });
     }, [minHeight, revision]);
     return containerRef;

package/lib/structure/ui/useToolbarFloor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToolbarFloor.js","sourceRoot":"","sources":["../../../src/structure/ui/useToolbarFloor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAkBjD;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAC7B,UAA+B,EAAE;IAEjC,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,QAAQ,GAAG,CAAC,EAAE,GAAG,OAAO,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO;QAE/B,OAAO,YAAY,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE;YACzC,MAAM,IAAI,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBACnC,uEAAuE;gBACvE,8DAA8D;gBAC9D,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;gBACpC,iEAAiE;gBACjE,uEAAuE;gBACvE,+CAA+C;gBAC/C,IAAI,MAAM,KAAK,CAAC;oBAAE,OAAO;gBACzB,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,kBAAkB,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC;YAC3E,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACtB,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,YAAY,CAAC;AACtB,CAAC"}
+{"version":3,"file":"useToolbarFloor.js","sourceRoot":"","sources":["../../../src/structure/ui/useToolbarFloor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAkBjD;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAC7B,UAA+B,EAAE;IAEjC,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,QAAQ,GAAG,CAAC,EAAE,GAAG,OAAO,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO;QAE/B,OAAO,YAAY,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE;YACzC,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,MAAM,IAAI,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBACnC,uEAAuE;gBACvE,uEAAuE;gBACvE,yDAAyD;gBACzD,oBAAoB,CAAC,KAAK,CAAC,CAAC;gBAC5B,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;oBACjC,qEAAqE;oBACrE,gEAAgE;oBAChE,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;oBACpC,iEAAiE;oBACjE,qEAAqE;oBACrE,iDAAiD;oBACjD,IAAI,MAAM,KAAK,CAAC;wBAAE,OAAO;oBACzB,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,kBAAkB,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC;gBAC3E,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACtB,OAAO,GAAG,EAAE;gBACV,oBAAoB,CAAC,KAAK,CAAC,CAAC;gBAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,YAAY,CAAC;AACtB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.73.0",
+  "version": "0.75.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",
@@ -82,6 +82,7 @@
     "ir-spectrum": "^4.2.0",
     "jcampconverter": "^12.5.11",
     "leven": "^4.1.0",
+    "mf-finder": "^3.4.25",
     "mf-parser": "^3.9.3",
     "ml-peak-shape-generator": "^5.6.0",
     "ml-spectra-processing": "^14.35.1",
@@ -112,7 +113,7 @@
     "@zakodium/tsconfig": "^1.0.5",
     "benchmark": "^2.1.4",
     "chemical-elements": "^2.3.2",
-    "cheminfo-mcp-server": "^0.6.2",
+    "cheminfo-mcp-server": "^0.7.0",
     "eslint": "^9.39.5",
     "eslint-config-cheminfo-react": "^20.1.0",
     "eslint-config-cheminfo-typescript": "^22.1.0",
@@ -140,7 +141,7 @@
     "@blueprintjs/core": "^6.18.0",
     "@fastify/static": "^10.0.0",
     "@fastify/type-provider-typebox": "^6.0.0",
-    "cheminfo-mcp-server": "^0.6.2",
+    "cheminfo-mcp-server": "^0.6.2 || ^0.7.0",
     "fastify": "^5.0.0",
     "ml-pca": "^4.1.1",
     "ml-signal-processing": "^2.2.2",

package/src/ecosystem/core/sites.ts

@@ -200,6 +200,20 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#b45309',
     mark: { plate: '#7e22ce', accent: '#f59e0b' },
   },
+  {
+    id: 'spectroscopy',
+    name: { lead: 'spectroscopy', alt: 'cheminfo', dot: true },
+    host: 'spectroscopy.cheminfo.org',
+    tagline: 'Find a structure from its IR, mass and NMR spectra.',
+    group: 'spectra',
+    // The violet end of the spectrum: the greens a spectrum would suggest are
+    // already smiles', equilibrium's and openbabel's.
+    brand: '#744d9f',
+    // The lime the mark's ring is drawn in sits at 1.5:1 on white, so the
+    // second half of the wordmark takes this darkened form, at 5.0:1.
+    brandAlt: '#4d7c0f',
+    mark: { plate: '#744d9f', accent: '#a3e635' },
+  },
   {
     id: 'equilibrium',
     name: { lead: 'Equi', alt: 'Librium' },
@@ -324,6 +338,18 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#1d4ed8',
     mark: { plate: '#c8460d', accent: '#1d4ed8' },
   },
+  {
+    id: 'vibrations',
+    name: { lead: 'vibrations', alt: 'cheminfo', dot: true },
+    host: 'vibrations.cheminfo.org',
+    tagline: 'IR and Raman spectra computed in the browser.',
+    group: 'spectra',
+    brand: '#0072b2',
+    // The amber of the mark sits at 2.3:1 on white, so the wordmark sets its
+    // second half in the darker amber, at 4.9:1.
+    brandAlt: '#a16207',
+    mark: { plate: '#0072b2', accent: '#e69f00' },
+  },
 ];
 
 /** How a link to a site is written, beyond the site itself. */

package/src/ecosystem/core/types.ts

@@ -19,6 +19,7 @@ export type SiteId =
   | 'regexp'
   | 'pdb'
   | 'elucidation'
+  | 'spectroscopy'
   | 'equilibrium'
   | 'polycarp'
   | '3d'
@@ -33,7 +34,8 @@ export type SiteId =
   | 'slides'
   | 'chembio'
   | 'wikidata'
-  | 'mz';
+  | 'mz'
+  | 'vibrations';
 
 /** A site's name, split the way its own wordmark splits it. */
 export interface SiteName {

package/src/ecosystem/ui/glyphs.tsx

@@ -308,6 +308,28 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <circle cx="19" cy="9" r="3" fill={alt} />
     </>
   ),
+  // Three peaks on a baseline and the ring they are read back to: the spectra
+  // are what a student is given, the structure is the answer, so the ring
+  // carries the answering colour.
+  spectroscopy: (alt) => (
+    <>
+      <path
+        d="M4 25h7l1.5-8 1.5 8h3l1.5-5 1.5 5h2l1.75-14 1.75 14H28"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 4 14.76 6.75V12.25L10 15 5.24 12.25V6.75Z"
+        fill="none"
+        stroke={alt}
+        strokeWidth="2.2"
+        strokeLinejoin="round"
+      />
+    </>
+  ),
   // The site's own favicon: the double harpoon, one direction per colour.
   equilibrium: (alt) => (
     <g
@@ -556,4 +578,28 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <rect x="6" y="24" width="14" height="4" rx="2" fill={alt} />
     </>
   ),
+  // Two atoms on a bond, caught mid-stretch, over the baseline of a spectrum.
+  // The lighter atom carries the answering colour.
+  vibrations: (alt) => (
+    <>
+      <line
+        x1="10"
+        y1="11"
+        x2="23"
+        y2="11"
+        stroke="#ffffff"
+        strokeWidth="2.5"
+      />
+      <circle cx="10" cy="11" r="5" fill="#ffffff" />
+      <circle cx="23" cy="11" r="3.5" fill={alt} />
+      <path
+        d="M4 26h4.5l2-5 2 5h4l2-8 2 8H28"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </>
+  ),
 };

package/src/formula/core/elementRanges.ts

@@ -0,0 +1,44 @@
+/** One element a formula search may use, and how many of its atoms. */
+export interface ElementRange {
+  /** The element symbol: `C`, `Cl`. */
+  readonly element: string;
+  /** Fewest atoms of it a formula carries. */
+  readonly min: number;
+  /** Most atoms of it a formula carries; `0` leaves the element out. */
+  readonly max: number;
+}
+
+/**
+ * The elements a formula lookup offers, with the range it opens on. Carbon and
+ * hydrogen are wide because every organic molecule holds both, and the
+ * heteroatoms open wide enough that a molecule carrying four of one of them is
+ * listed without the reader having to suspect it first.
+ */
+export const DEFAULT_ELEMENT_RANGES: readonly ElementRange[] = [
+  { element: 'C', min: 1, max: 30 },
+  { element: 'H', min: 1, max: 30 },
+  { element: 'O', min: 0, max: 6 },
+  { element: 'N', min: 0, max: 4 },
+  { element: 'S', min: 0, max: 4 },
+  { element: 'F', min: 0, max: 4 },
+  { element: 'Cl', min: 0, max: 4 },
+  { element: 'Br', min: 0, max: 4 },
+];
+
+/**
+ * The ranges as `mf-finder` reads them: `C1-30 H1-30 O0-6`. An element whose
+ * upper bound is zero is left out rather than written `F0-0`, and a bound below
+ * zero or past the other one is brought back inside it.
+ * @param ranges - The element ranges.
+ * @returns The range string, empty when no element is left.
+ */
+export function formatElementRanges(ranges: readonly ElementRange[]): string {
+  const parts: string[] = [];
+  for (const range of ranges) {
+    const max = Math.max(0, Math.trunc(range.max));
+    if (max === 0) continue;
+    const min = Math.min(Math.max(0, Math.trunc(range.min)), max);
+    parts.push(`${range.element}${min}-${max}`);
+  }
+  return parts.join(' ');
+}

package/src/formula/core/formulaCandidates.ts

@@ -0,0 +1,109 @@
+import type { MFResult } from 'mf-finder';
+
+import type { ElementRange } from './elementRanges.ts';
+import {
+  DEFAULT_ELEMENT_RANGES,
+  formatElementRanges,
+} from './elementRanges.ts';
+
+/**
+ * The window a formula lookup enumerates, in ppm. It is wide on purpose: the
+ * accuracy a spectrum was measured at is read off the ppm of each formula, so
+ * the window only has to hold the closest ones as a list rather than act as a
+ * filter.
+ */
+export const FORMULA_LOOKUP_PRECISION = 500;
+
+/** How many formulas a lookup lists, closest first. */
+export const FORMULA_LOOKUP_LIMIT = 100;
+
+/** A molecular formula whose monoisotopic mass is near the one searched. */
+export interface FormulaCandidate {
+  /** The formula of the neutral molecule: `C10H14O`. */
+  mf: string;
+  /** Its monoisotopic mass, in Da. */
+  em: number;
+  /** Its unsaturation: rings plus double bonds. */
+  unsaturation: number;
+  /** How far the searched mass is from it, in ppm; positive when heavier. */
+  ppm: number;
+}
+
+/** The formulas a search kept, and how many fit. */
+export interface FormulaCandidates {
+  /** The closest formulas, closest first. */
+  candidates: FormulaCandidate[];
+  /** How many formulas fit the window, the ones left out included. */
+  total: number;
+}
+
+/** What {@link findFormulaCandidates} searches. */
+export interface FormulaCandidateOptions {
+  /**
+   * The elements, and how many atoms of each a formula may carry.
+   * @default DEFAULT_ELEMENT_RANGES
+   */
+  ranges?: readonly ElementRange[];
+  /**
+   * The window around the mass, in ppm.
+   * @default FORMULA_LOOKUP_PRECISION
+   */
+  precision?: number;
+  /**
+   * How many formulas are kept, closest first.
+   * @default FORMULA_LOOKUP_LIMIT
+   */
+  limit?: number;
+}
+
+/**
+ * The neutral molecular formulas whose monoisotopic mass lies within the
+ * window of a mass, closest first. Only formulas with a whole, non-negative
+ * unsaturation are kept: a neutral, even-electron molecule has no other.
+ *
+ * `mf-finder` is loaded on the first search, so a page that only draws
+ * formulas never downloads it.
+ * @param mass - The monoisotopic mass of the neutral molecule, in Da.
+ * @param options - See {@link FormulaCandidateOptions}.
+ * @returns The closest formulas, and how many fit the window.
+ */
+export async function findFormulaCandidates(
+  mass: number,
+  options: FormulaCandidateOptions = {},
+): Promise<FormulaCandidates> {
+  const {
+    ranges = DEFAULT_ELEMENT_RANGES,
+    precision = FORMULA_LOOKUP_PRECISION,
+    limit = FORMULA_LOOKUP_LIMIT,
+  } = options;
+  const range = formatElementRanges(ranges);
+  const kept = Math.floor(limit);
+  if (!Number.isFinite(mass) || mass <= 0 || range === '' || !(kept > 0)) {
+    return { candidates: [], total: 0 };
+  }
+  const { findMFs } = await import('mf-finder');
+  // Declared as an array of results, `findMFs` resolves to `{ mfs, info }`.
+  const found = (await findMFs(mass, {
+    ranges: range,
+    precision,
+    limit: kept,
+    // Without it, a formula with no charge is never compared to the mass.
+    allowNeutral: true,
+    filter: { unsaturation: { min: 0, onlyInteger: true } },
+  })) as unknown as FinderAnswer;
+  const candidates: FormulaCandidate[] = [];
+  for (const result of found.mfs) {
+    candidates.push({
+      mf: result.mf,
+      em: result.em,
+      unsaturation: result.unsaturation,
+      ppm: result.ms.ppm,
+    });
+  }
+  return { candidates, total: found.info.numberResults };
+}
+
+interface FinderAnswer {
+  mfs: MFResult[];
+  info: { numberResults: number };
+}

package/src/formula/core/index.ts

@@ -1,3 +1,18 @@
+export type { ElementRange } from './elementRanges.ts';
+export {
+  DEFAULT_ELEMENT_RANGES,
+  formatElementRanges,
+} from './elementRanges.ts';
+export type {
+  FormulaCandidate,
+  FormulaCandidateOptions,
+  FormulaCandidates,
+} from './formulaCandidates.ts';
+export {
+  FORMULA_LOOKUP_LIMIT,
+  FORMULA_LOOKUP_PRECISION,
+  findFormulaCandidates,
+} from './formulaCandidates.ts';
 export type { CanonicalFormulaOptions } from './formulaText.ts';
 export {
   atomCounts,

package/src/formula/ui/ElementRangeFields.tsx

@@ -0,0 +1,65 @@
+import type { ReactElement } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { NumberInput } from '../../number/ui/NumberInput.tsx';
+import type { ElementRange } from '../core/elementRanges.ts';
+
+/** What {@link ElementRangeFields} edits. */
+export interface ElementRangeFieldsProps {
+  /** The elements, and their bounds as they stand. */
+  ranges: readonly ElementRange[];
+  /** Called with the element, the bound edited and its new value. */
+  onChange: (element: string, bound: 'min' | 'max', value: number) => void;
+}
+
+/**
+ * The bounds of each element, written as the range they are read as:
+ * `C 1 – 30`. The dash says which box is which, so the grid needs no heading
+ * row and fits two elements to a line; each box carries its own accessible
+ * name instead.
+ * @param props - See {@link ElementRangeFieldsProps}.
+ * @returns The grid of ranges.
+ */
+export function ElementRangeFields(
+  props: ElementRangeFieldsProps,
+): ReactElement {
+  const { ranges, onChange } = props;
+  const t = useChromeT();
+  return (
+    <div className="formula-lookup__ranges">
+      {ranges.map((range) => (
+        <div key={range.element} className="formula-lookup__range">
+          <span className="formula-lookup__element">{range.element}</span>
+          <NumberInput
+            size="small"
+            buttons={false}
+            fill
+            integer
+            min={0}
+            max={range.max}
+            value={range.min}
+            ariaLabel={t('formula.lookup.fewest', {
+              element: range.element,
+            })}
+            onChange={(value) => {
+              onChange(range.element, 'min', value);
+            }}
+          />
+          <span className="formula-lookup__dash">–</span>
+          <NumberInput
+            size="small"
+            buttons={false}
+            fill
+            integer
+            min={range.min}
+            value={range.max}
+            ariaLabel={t('formula.lookup.most', { element: range.element })}
+            onChange={(value) => {
+              onChange(range.element, 'max', value);
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/formula/ui/FormulaLookup.tsx

@@ -0,0 +1,184 @@
+import { Button } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+
+import { useAsync } from '../../hooks/ui/useAsync.ts';
+import { useDebouncedValue } from '../../hooks/ui/useDebouncedValue.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { NumberInput } from '../../number/ui/NumberInput.tsx';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import type { ElementRange } from '../core/elementRanges.ts';
+import { DEFAULT_ELEMENT_RANGES } from '../core/elementRanges.ts';
+import type { FormulaCandidates } from '../core/formulaCandidates.ts';
+import {
+  FORMULA_LOOKUP_LIMIT,
+  findFormulaCandidates,
+} from '../core/formulaCandidates.ts';
+
+import { ElementRangeFields } from './ElementRangeFields.tsx';
+import { FormulaLookupResults } from './FormulaLookupResults.tsx';
+
+/** What {@link FormulaLookup} opens on, and who owns the mass. */
+export interface FormulaLookupProps {
+  /**
+   * The elements offered and the range each opens on, read when the panel
+   * mounts and again when it is reset. Each bound is then the reader's to tune.
+   * @default DEFAULT_ELEMENT_RANGES — C 1–30, H 1–30, O 0–6, N, S, F, Cl and Br 0–4
+   */
+  ranges?: readonly ElementRange[];
+  /**
+   * How many formulas are listed, closest first.
+   * @default FORMULA_LOOKUP_LIMIT — 100
+   */
+  limit?: number;
+  /**
+   * The mass in the box, in Da. With `onMassChange` the page owns it and the
+   * box shows this value; without, it is only the mass the box opens on.
+   * @default undefined — the box opens empty
+   */
+  mass?: number;
+  /**
+   * Called with every mass typed, and with `undefined` when the box is emptied
+   * or the panel reset. Passing it makes the mass the page's.
+   * @default undefined — the panel keeps the mass itself
+   */
+  onMassChange?: (mass: number | undefined) => void;
+  /**
+   * Class the panel carries, in addition to `formula-lookup`: where it sits —
+   * a column, a sticky rail, a shadow — is the page's.
+   * @default undefined
+   */
+  className?: string;
+}
+
+/**
+ * The molecular formulas that fit a monoisotopic mass: the reader types the
+ * mass of the neutral molecule, tunes how many atoms of each element a formula
+ * may hold, and reads the closest formulas with their distance in ppm. Each
+ * formula is copied by a click.
+ *
+ * The ranges belong to the question on screen, so a page showing several
+ * questions mounts the panel with a `key` per question.
+ * @param props - See {@link FormulaLookupProps}.
+ * @returns The panel.
+ */
+export function FormulaLookup(props: FormulaLookupProps): ReactElement {
+  const {
+    ranges: openingRanges = DEFAULT_ELEMENT_RANGES,
+    limit = FORMULA_LOOKUP_LIMIT,
+    mass: massProp,
+    onMassChange,
+    className,
+  } = props;
+  const t = useChromeT();
+  const [ownMass, setOwnMass] = useState(massProp);
+  const [ranges, setRanges] = useState(openingRanges);
+  const mass = onMassChange === undefined ? ownMass : massProp;
+
+  function changeMass(next: number | undefined): void {
+    if (onMassChange === undefined) setOwnMass(next);
+    else onMassChange(next);
+  }
+
+  function changeRange(
+    element: string,
+    bound: 'min' | 'max',
+    value: number,
+  ): void {
+    setRanges((current) =>
+      current.map((range) =>
+        range.element === element ? { ...range, [bound]: value } : range,
+      ),
+    );
+  }
+
+  function reset(): void {
+    changeMass(undefined);
+    setRanges(openingRanges);
+  }
+
+  const search = useMemo(
+    () => ({ mass, ranges, limit }),
+    [mass, ranges, limit],
+  );
+  const settled = useDebouncedValue(search, SEARCH_DELAY_MS);
+  const task = useCallback(() => searchFormulas(settled), [settled]);
+  const answer = useAsync(task);
+
+  return (
+    <aside className={joinClassNames('formula-lookup', className)}>
+      <div className="formula-lookup__header">
+        <span>{t('formula.lookup.title')}</span>
+        <Button
+          size="small"
+          variant="minimal"
+          icon="reset"
+          className="no-print"
+          title={t('formula.lookup.reset')}
+          aria-label={t('formula.lookup.reset')}
+          onClick={reset}
+        />
+      </div>
+
+      <div className="formula-lookup__body">
+        <label className="formula-lookup__field">
+          <span>{t('formula.lookup.mass')}</span>
+          <NumberInput
+            size="small"
+            buttons={false}
+            fill
+            allowEmpty
+            min={0}
+            value={mass}
+            placeholder={t('formula.lookup.massPlaceholder')}
+            onChange={changeMass}
+          />
+        </label>
+        <span className="formula-lookup__hint">
+          {t('formula.lookup.neutral')}
+        </span>
+        <ElementRangeFields ranges={ranges} onChange={changeRange} />
+      </div>
+
+      <FormulaLookupResults
+        mass={mass}
+        answer={answer}
+        waiting={settled !== search || answer.pending}
+      />
+    </aside>
+  );
+}
+
+/**
+ * How long the inputs stay still before the formulas are searched again: a
+ * mass is typed a digit at a time, and only the last one is worth a search.
+ */
+const SEARCH_DELAY_MS = 250;
+
+const NO_CANDIDATES: FormulaCandidates = { candidates: [], total: 0 };
+
+interface Search {
+  mass: number | undefined;
+  ranges: readonly ElementRange[];
+  limit: number;
+}
+
+/**
+ * The formulas one search finds, or `null` when it gave up: ranges wide
+ * enough to exhaust the enumeration are the one way it fails.
+ * @param search - The mass, ranges and limit to search.
+ * @returns The formulas found.
+ */
+async function searchFormulas(
+  search: Search,
+): Promise<FormulaCandidates | null> {
+  if (search.mass === undefined) return NO_CANDIDATES;
+  try {
+    return await findFormulaCandidates(search.mass, {
+      ranges: search.ranges,
+      limit: search.limit,
+    });
+  } catch {
+    return null;
+  }
+}