react-cheminfo 0.74.0 → 0.76.0

package/src/download/core/copySvg.ts

@@ -0,0 +1,40 @@
+import { writeClipboardItem } from '../../clipboard/core/clipboardItem.ts';
+import { writeToClipboard } from '../../clipboard/core/writeToClipboard.ts';
+
+/** The type a picture is put on the clipboard as: no `charset`, which it refuses. */
+const SVG_CLIPBOARD_TYPE = 'image/svg+xml';
+
+/**
+ * Put an SVG document on the clipboard, without ever throwing at the caller.
+ *
+ * Where the browser takes an SVG picture, the document goes on as one and as
+ * its text, in one item: a slide or a vector editor pastes the drawing, a text
+ * editor the markup. Elsewhere — Firefox and Safari take no SVG picture — the
+ * text alone, which a vector editor still pastes as a drawing.
+ * @param markup - The SVG document.
+ * @returns Whether the clipboard now holds it, at least as text.
+ */
+export async function copySvg(markup: string): Promise<boolean> {
+  if (takesSvgPicture()) {
+    const written = await writeClipboardItem({
+      [SVG_CLIPBOARD_TYPE]: new Blob([markup], { type: SVG_CLIPBOARD_TYPE }),
+      'text/plain': new Blob([markup], { type: 'text/plain' }),
+    });
+    if (written) return true;
+  }
+  return writeToClipboard(markup);
+}
+
+/**
+ * Whether the clipboard says it takes an SVG picture. Asked before writing:
+ * a write it refuses would spend the click, and the text after it would be
+ * refused too in Safari.
+ * @returns Whether `ClipboardItem.supports` names the SVG type.
+ */
+function takesSvgPicture(): boolean {
+  if (typeof ClipboardItem === 'undefined') return false;
+  const item = ClipboardItem as { supports?: (type: string) => boolean };
+  return (
+    typeof item.supports === 'function' && item.supports(SVG_CLIPBOARD_TYPE)
+  );
+}

package/src/download/core/index.ts

@@ -1,5 +1,6 @@
 export type { FigureNotice } from './copyFigure.ts';
 export { copyFigure } from './copyFigure.ts';
+export { copySvg } from './copySvg.ts';
 export { cssTokenNames, resolveCssTokens } from './cssTokens.ts';
 export { downloadBlob } from './downloadBlob.ts';
 export type { DownloadFigureOptions, FigureFormat } from './downloadFigure.ts';

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;
+  }
+}

package/src/formula/ui/FormulaLookupResults.tsx

@@ -0,0 +1,89 @@
+import type { ReactElement } from 'react';
+
+import { formatDecimal, formatInteger } from '../../format/core/numbers.ts';
+import type { AsyncResult } from '../../hooks/ui/useAsync.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import type { FormulaCandidates } from '../core/formulaCandidates.ts';
+
+import { CopyableFormula } from './CopyableFormula.tsx';
+
+/** What {@link FormulaLookupResults} lists. */
+export interface FormulaLookupResultsProps {
+  /** The mass in the box, `undefined` while it is empty. */
+  mass: number | undefined;
+  /** The latest search: its formulas, or `null` when it gave up. */
+  answer: AsyncResult<FormulaCandidates | null>;
+  /** Whether a newer search is still to come, so an empty answer is stale. */
+  waiting: boolean;
+}
+
+/**
+ * The formulas a lookup found, closest first, each with its distance in ppm
+ * and copied by a click; or the sentence saying why there are none.
+ * @param props - See {@link FormulaLookupResultsProps}.
+ * @returns The results.
+ */
+export function FormulaLookupResults(
+  props: FormulaLookupResultsProps,
+): ReactElement {
+  const { mass, answer, waiting } = props;
+  const t = useChromeT();
+  const found = answer.data;
+
+  if (mass === undefined) return hintOnly(t('formula.lookup.typeMass'));
+  if (found === null) return hintOnly(t('formula.lookup.tooWide'));
+  // A search still to come is not "nothing fits": the reader is mid-number.
+  if (found === undefined || (found.candidates.length === 0 && waiting)) {
+    return <div className="formula-lookup__results" />;
+  }
+
+  const { candidates, total } = found;
+  const count = formatInteger(candidates.length);
+  let heading: string = t('formula.lookup.countMany', { count });
+  if (candidates.length < total) {
+    heading = t('formula.lookup.closest', {
+      count,
+      total: formatInteger(total),
+    });
+  } else if (candidates.length === 1) {
+    heading = t('formula.lookup.countOne', { count });
+  }
+
+  return (
+    <div className="formula-lookup__results">
+      <span className="formula-lookup__count">{heading}</span>
+      {candidates.length === 0 ? (
+        <span className="formula-lookup__hint">
+          {t('formula.lookup.nothingFits')}
+        </span>
+      ) : (
+        <ul className="formula-lookup__list">
+          {candidates.map((candidate) => (
+            <li
+              key={candidate.mf}
+              title={t('formula.lookup.detail', {
+                mass: formatDecimal(candidate.em, 4),
+                unsaturation: formatInteger(candidate.unsaturation),
+              })}
+            >
+              <CopyableFormula formula={candidate.mf} />
+              <span className="formula-lookup__ppm">
+                {t('formula.lookup.ppm', {
+                  value: formatDecimal(candidate.ppm, 1),
+                })}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function hintOnly(hint: string): ReactElement {
+  return (
+    <div className="formula-lookup__results">
+      <span className="formula-lookup__hint">{hint}</span>
+    </div>
+  );
+}

package/src/formula/ui/index.ts

@@ -2,5 +2,7 @@ export type { CopyableFormulaProps } from './CopyableFormula.tsx';
 export { CopyableFormula } from './CopyableFormula.tsx';
 export type { FormulaInputProps } from './FormulaInput.tsx';
 export { FormulaInput } from './FormulaInput.tsx';
+export type { FormulaLookupProps } from './FormulaLookup.tsx';
+export { FormulaLookup } from './FormulaLookup.tsx';
 export type { QuestionFormulaProps } from './QuestionFormula.tsx';
 export { QuestionFormula } from './QuestionFormula.tsx';