react-cheminfo 0.11.0 → 0.12.0

package/src/pedagogy/ui/SyntaxTooltip.tsx

@@ -2,21 +2,15 @@ import type { Placement } from '@blueprintjs/core';
 import { Tooltip } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
-/** The one worked example a documented construct carries. */
-export interface SyntaxTooltipExample {
-  /** The construct in use: a pattern, a SMILES, a LaTeX fragment, a layer. */
-  code: string;
-  /**
-   * What it is shown working on, for a construct whose example takes an input.
-   * @default undefined — the example is about notation only
-   */
-  input?: string;
-  /**
-   * What the example demonstrates, in one line.
-   * @default undefined
-   */
-  note?: string;
-}
+import type { GlossaryExample } from '../core/glossary.ts';
+
+import { HOVER_OPEN_DELAY, MONOSPACE, PROSE_INK } from './pedagogyStyle.ts';
+
+/**
+ * The one worked example a documented construct carries: the same shape as
+ * the examples of a glossary entry.
+ */
+export type SyntaxTooltipExample = GlossaryExample;
 
 /** Everything the rich tooltip says about one construct. */
 export interface SyntaxTooltipContent {
@@ -33,9 +27,11 @@ export interface SyntaxTooltipContent {
   summary: string;
   /** The longer story, in a sentence or two. */
   detail: string;
+  /** The worked example shown under the detail. */
   example: SyntaxTooltipExample;
 }
 
+/** What {@link SyntaxTooltip} needs. */
 export interface SyntaxTooltipProps {
   /** What to explain. */
   content: SyntaxTooltipContent;
@@ -63,6 +59,11 @@ export interface SyntaxTooltipProps {
    * @default undefined — the tooltip follows the pointer
    */
   isOpen?: boolean;
+  /**
+   * Class names added to the root element.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -74,6 +75,7 @@ export interface SyntaxTooltipProps {
  */
 export function SyntaxTooltip(props: SyntaxTooltipProps): ReactElement {
   const {
+    className,
     content,
     children,
     placement = 'bottom',
@@ -84,6 +86,7 @@ export function SyntaxTooltip(props: SyntaxTooltipProps): ReactElement {
 
   return (
     <Tooltip
+      className={className}
       content={
         <SyntaxTooltipBody
           content={content}
@@ -100,7 +103,7 @@ export function SyntaxTooltip(props: SyntaxTooltipProps): ReactElement {
   );
 }
 
-export interface SyntaxTooltipBodyProps {
+interface SyntaxTooltipBodyProps {
   /** What to explain. */
   content: SyntaxTooltipContent;
   /**
@@ -155,11 +158,6 @@ export function SyntaxTooltipBody(props: SyntaxTooltipBodyProps): ReactElement {
   );
 }
 
-/** Long enough that the pointer can cross a row without opening it. */
-const HOVER_OPEN_DELAY = 150;
-
-const MONOSPACE = 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';
-
 const BODY_STYLE: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
@@ -175,7 +173,7 @@ const HEADER_STYLE: CSSProperties = {
 };
 
 const SYNTAX_STYLE: CSSProperties = {
-  background: 'rgb(255 255 255 / 15%)',
+  background: PROSE_INK.tooltip.rule,
   borderRadius: 3,
   color: '#ffffff',
   fontFamily: MONOSPACE,
@@ -186,18 +184,21 @@ const SYNTAX_STYLE: CSSProperties = {
 
 const NAME_STYLE: CSSProperties = { fontWeight: 600, fontSize: 13 };
 
-const TAG_STYLE: CSSProperties = { color: '#abb3bf', fontSize: 11 };
+const TAG_STYLE: CSSProperties = {
+  color: PROSE_INK.tooltip.muted,
+  fontSize: 11,
+};
 
 const SUMMARY_STYLE: CSSProperties = { fontSize: 12, lineHeight: 1.4 };
 
 const DETAIL_STYLE: CSSProperties = {
-  color: 'var(--border, #d3d8de)',
+  color: PROSE_INK.tooltip.text,
   fontSize: 12,
   lineHeight: 1.45,
 };
 
 const EXAMPLE_STYLE: CSSProperties = {
-  borderTop: '1px solid rgb(255 255 255 / 15%)',
+  borderTop: `1px solid ${PROSE_INK.tooltip.rule}`,
   display: 'flex',
   flexDirection: 'column',
   gap: 2,
@@ -206,16 +207,19 @@ const EXAMPLE_STYLE: CSSProperties = {
 
 const ROW_STYLE: CSSProperties = { display: 'flex', gap: 6, fontSize: 12 };
 
-const LABEL_STYLE: CSSProperties = { color: '#abb3bf', flex: '0 0 68px' };
+const LABEL_STYLE: CSSProperties = {
+  color: PROSE_INK.tooltip.muted,
+  flex: '0 0 68px',
+};
 
 const VALUE_STYLE: CSSProperties = {
-  color: 'var(--surface-sunken, #f6f7f9)',
+  color: PROSE_INK.tooltip.text,
   fontFamily: MONOSPACE,
   overflowWrap: 'anywhere',
 };
 
 const NOTE_STYLE: CSSProperties = {
-  color: '#abb3bf',
+  color: PROSE_INK.tooltip.muted,
   fontSize: 12,
   fontStyle: 'italic',
   marginTop: 2,

package/src/pedagogy/ui/TestCaseList.tsx

@@ -1,8 +1,10 @@
-import { Icon } from '@blueprintjs/core';
+import { Colors, Icon } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { TestCaseResult } from '../core/validation.ts';
 
+/** What {@link TestCaseList} needs. */
 export interface TestCaseListProps<
   TCase extends TestCaseResult = TestCaseResult,
 > {
@@ -95,7 +97,7 @@ function itemStyle(passed: boolean, pending: boolean): CSSProperties {
     gap: 8,
     padding: '4px 8px',
     borderRadius: 3,
-    borderLeft: `3px solid ${passed ? '#1c6e42' : failed ? '#cd4246' : '#c5cbd3'}`,
+    borderLeft: `3px solid ${passed ? Colors.GREEN2 : failed ? Colors.RED3 : Colors.GRAY5}`,
     background: passed
       ? 'rgb(236 253 245)'
       : failed
@@ -117,6 +119,6 @@ const LABEL_STYLE: CSSProperties = { marginRight: 6 };
 
 const REASON_STYLE: CSSProperties = {
   display: 'block',
-  color: 'rgb(65 75 90)',
+  color: TOKEN.textMuted,
   lineHeight: 1.4,
 };

package/src/pedagogy/ui/TutorialStepStrip.tsx

@@ -1,9 +1,12 @@
 import { Button, Tag, Tooltip } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
+import { clamp } from '../../format/core/clamp.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { ExerciseLevel } from '../core/types.ts';
 
 import { LEVEL_ORDER } from './exerciseMeta.ts';
+import { HOVER_OPEN_DELAY } from './pedagogyStyle.ts';
 import type { TutorialLevelColours } from './tutorialLevels.ts';
 import { TUTORIAL_LEVEL_COLOURS } from './tutorialLevels.ts';
 
@@ -17,10 +20,13 @@ export interface TutorialStripStep {
    * @default undefined — the position in the tour keys it instead
    */
   id?: string;
+  /** What the step is called. */
   title: string;
+  /** Which coloured strip the step sits in. */
   level: ExerciseLevel;
 }
 
+/** What {@link TutorialStepStrip} needs. */
 export interface TutorialStepStripProps {
   /** The whole tour, in teaching order. */
   steps: readonly TutorialStripStep[];
@@ -180,8 +186,7 @@ function positionsOfLevel(
 }
 
 function clampIndex(index: number, total: number): number {
-  if (!Number.isFinite(index) || index <= 0) return 0;
-  return Math.min(Math.floor(index), Math.max(total - 1, 0));
+  return Math.floor(clamp(index, 0, Math.max(total - 1, 0)));
 }
 
 /**
@@ -204,11 +209,13 @@ function numberStyle(
     alignItems: 'center',
     justifyContent: 'center',
     padding: 0,
-    border: active ? '2px solid #1c2127' : '1px solid rgb(17 20 24 / 20%)',
+    border: active
+      ? `2px solid ${TOKEN.text}`
+      : '1px solid rgb(17 20 24 / 20%)',
     borderRadius: 4,
-    background: active ? colours.activeBackground : '#ffffff',
+    background: active ? colours.activeBackground : TOKEN.surface,
     boxSizing: 'border-box',
-    color: '#1c2127',
+    color: TOKEN.text,
     cursor: 'pointer',
     font: 'inherit',
     fontSize: 12,
@@ -221,9 +228,6 @@ function numberStyle(
 /** 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;
-
 const ROOT_STYLE: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
@@ -243,7 +247,7 @@ const LABEL_STYLE: CSSProperties = {
   flex: '0 0 220px',
   fontSize: 12,
   fontWeight: 600,
-  color: '#1c2127',
+  color: TOKEN.text,
 };
 
 const PAGER_STYLE: CSSProperties = {
@@ -254,6 +258,6 @@ const PAGER_STYLE: CSSProperties = {
 };
 
 const HINT_STYLE: CSSProperties = {
-  color: 'var(--text-muted, #5b6875)',
+  color: TOKEN.textMuted,
   fontSize: 11,
 };

package/src/pedagogy/ui/exampleText.ts

@@ -0,0 +1,18 @@
+/**
+ * Read one text field of an example whose shape the component does not know.
+ *
+ * A glossary or a cheatsheet may carry its own example shape — a SMILES, a
+ * molecule and an observation — so the default drawing reads `code`, `input`
+ * and `note` only when they are strings, and draws nothing for what is absent.
+ * @param example - One example, of any shape.
+ * @param field - The field to read.
+ * @returns The text, or `undefined` when the example has no such string.
+ */
+export function exampleText(
+  example: unknown,
+  field: 'code' | 'input' | 'note',
+): string | undefined {
+  if (typeof example !== 'object' || example === null) return undefined;
+  const value = (example as Record<string, unknown>)[field];
+  return typeof value === 'string' ? value : undefined;
+}

package/src/pedagogy/ui/glossaryContext.ts

@@ -3,21 +3,41 @@
  *
  * Prose is rendered deep inside a card, a callout or a tooltip, and threading
  * the glossary down to each of those as a prop is what makes a site stop
- * linking its jargon. It is read from the surrounding provider instead.
+ * linking its jargon. It is read from the surrounding provider instead, with
+ * the way the site draws an example and a code span alongside it.
  */
 
+import type { ReactNode } from 'react';
 import { createContext, useContext } from 'react';
 
 import type { Glossary } from '../core/glossary.ts';
 
+/** What the surrounding `GlossaryProvider` hands to the prose below it. */
+export interface GlossaryContextValue {
+  /** Every term the site defines. */
+  glossary: Glossary<unknown>;
+  /**
+   * Draws the illustration of one example of the glossary.
+   * @default undefined — an example is drawn as its code and its input
+   */
+  renderExample?: (example: unknown) => ReactNode;
+  /**
+   * Draws a code span of the prose.
+   * @default undefined — a plain `<code>`
+   */
+  renderCode?: (code: string) => ReactNode;
+}
+
 /**
- * The glossary the surrounding provider holds.
- * @returns Every term the site defines, and no term at all when nothing wraps
- * the tree — prose then renders its markers as plain words.
+ * The glossary the surrounding provider holds, and how it draws what it shows.
+ * @returns The provider's value, and an empty glossary when nothing wraps the
+ * tree — prose then renders its markers as plain words.
  */
-export function useGlossary(): Glossary {
+export function useGlossary(): GlossaryContextValue {
   return useContext(GlossaryContext);
 }
 
 /** Holder of the glossary, written by `GlossaryProvider` and read by prose. */
-export const GlossaryContext = createContext<Glossary>({});
+export const GlossaryContext = createContext<GlossaryContextValue>({
+  glossary: {},
+});

package/src/pedagogy/ui/index.ts

@@ -7,14 +7,26 @@ export type {
   ExerciseStatusIconProps,
 } from './ExerciseTags.tsx';
 export { ExerciseLevelTag, ExerciseStatusIcon } from './ExerciseTags.tsx';
-export { LEVEL_INTENT, LEVEL_ORDER, STATUS_ICON } from './exerciseMeta.ts';
+export {
+  LEVEL_INTENT,
+  LEVEL_ORDER,
+  STATUS_ICON,
+  STATUS_INTENT,
+} from './exerciseMeta.ts';
+export type { GlossaryDefinitionProps } from './GlossaryDefinition.tsx';
+export { GlossaryDefinition } from './GlossaryDefinition.tsx';
+export type { GlossaryIndexProps } from './GlossaryIndex.tsx';
+export { GlossaryIndex } from './GlossaryIndex.tsx';
 export type { GlossaryProviderProps } from './GlossaryProvider.tsx';
 export { GlossaryProvider } from './GlossaryProvider.tsx';
 export type { GlossaryTextProps } from './GlossaryText.tsx';
 export { GlossaryText } from './GlossaryText.tsx';
+export type { GlossaryContextValue } from './glossaryContext.ts';
 export { useGlossary } from './glossaryContext.ts';
 export type { HintLadderProps } from './HintLadder.tsx';
 export { HintLadder } from './HintLadder.tsx';
+export type { InlineTextProps } from './InlineText.tsx';
+export { InlineText } from './InlineText.tsx';
 export type { ReferenceGridProps } from './ReferenceGrid.tsx';
 export { ReferenceGrid } from './ReferenceGrid.tsx';
 export type {
@@ -29,6 +41,7 @@ export type {
   SyntaxTooltipProps,
 } from './SyntaxTooltip.tsx';
 export { SyntaxTooltip } from './SyntaxTooltip.tsx';
+export type { ProseTone } from './pedagogyStyle.ts';
 export type { TestCaseListProps } from './TestCaseList.tsx';
 export { TestCaseList } from './TestCaseList.tsx';
 export type {

package/src/pedagogy/ui/inlineSegments.tsx

@@ -0,0 +1,69 @@
+import type { ReactElement, ReactNode } from 'react';
+import { Fragment } from 'react';
+
+import type { InlineSegment } from '../core/inlineMarks.ts';
+
+/** How the marks of parsed prose are drawn. */
+interface InlineRenderers {
+  /** Draws a code span, from the text between its backticks. */
+  code: (code: string) => ReactNode;
+  /**
+   * Draws a glossary marker, from its lowercased term and the text to show.
+   * @default undefined — the text, as plain prose
+   */
+  term?: (term: string, text: string) => ReactNode;
+}
+
+/**
+ * Turn parsed prose into React nodes, each keyed by where it starts.
+ * @param segments - What `parseInlineMarks` returned.
+ * @param renderers - How code spans and markers are drawn.
+ * @returns One node per segment.
+ */
+export function renderInlineSegments(
+  segments: readonly InlineSegment[],
+  renderers: InlineRenderers,
+): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  for (const segment of segments) {
+    nodes.push(
+      <Fragment key={segment.start}>
+        {renderSegment(segment, renderers)}
+      </Fragment>,
+    );
+  }
+  return nodes;
+}
+
+/**
+ * The code span of prose that asks for nothing more.
+ * @param code - The text between the backticks.
+ * @returns A plain `<code>`, styled by the page.
+ */
+export function plainCode(code: string): ReactElement {
+  return <code>{code}</code>;
+}
+
+function renderSegment(
+  segment: InlineSegment,
+  renderers: InlineRenderers,
+): ReactNode {
+  switch (segment.kind) {
+    case 'text':
+      return segment.text;
+    case 'code':
+      return renderers.code(segment.text);
+    case 'term':
+      return renderers.term === undefined
+        ? segment.text
+        : renderers.term(segment.term, segment.text);
+    case 'strong':
+      return (
+        <strong>{renderInlineSegments(segment.children, renderers)}</strong>
+      );
+    case 'emphasis':
+      return <em>{renderInlineSegments(segment.children, renderers)}</em>;
+    default:
+      return null;
+  }
+}

package/src/pedagogy/ui/pedagogyStyle.ts

@@ -0,0 +1,53 @@
+/**
+ * What the pedagogy components share about how they look: how long a pointer
+ * rests before a definition opens, the monospace stack, and the ink prose is
+ * set in on each of the two grounds it is shown on.
+ */
+
+import { Colors } from '@blueprintjs/core';
+
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+
+/** Long enough that the pointer can cross a chip or a row without opening it. */
+export const HOVER_OPEN_DELAY = 150;
+
+/** The stack every construct, pattern and formula is set in. */
+export const MONOSPACE =
+  'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';
+
+/** Where prose is drawn: on the dark plate of a tooltip, or on the page. */
+export type ProseTone = 'tooltip' | 'page';
+
+/** The colours prose is set in on one ground. */
+export interface ProseInk {
+  /** The body of a paragraph. */
+  text: string;
+  /** Notes, labels and provenance: what is read after the rest. */
+  muted: string;
+  /** Code quoted inside the prose. */
+  code: string;
+  /** A hairline between two parts, and the plate behind a chip. */
+  rule: string;
+}
+
+/**
+ * The ink of each ground.
+ *
+ * A Blueprint tooltip is the same dark plate on every site, so its ink is white
+ * at decreasing strength, read off the plate rather than off the family tokens,
+ * which are written for a light page. The page ink is the tokens.
+ */
+export const PROSE_INK: Readonly<Record<ProseTone, ProseInk>> = {
+  tooltip: {
+    text: 'rgb(255 255 255 / 82%)',
+    muted: 'rgb(255 255 255 / 62%)',
+    code: Colors.BLUE5,
+    rule: 'rgb(255 255 255 / 15%)',
+  },
+  page: {
+    text: TOKEN.text,
+    muted: TOKEN.textMuted,
+    code: TOKEN.text,
+    rule: TOKEN.border,
+  },
+};

package/src/periodic/core/categories.ts

@@ -8,7 +8,7 @@
  */
 
 import { readableInk } from '../../color/core/contrast.ts';
-import type { Swatch } from '../../color/core/scale.ts';
+import type { Swatch } from '../../color/core/interpolate.ts';
 
 import type { ElementCategory } from './elements.ts';
 

package/src/periodic/core/elements.ts

@@ -42,7 +42,9 @@ export interface PeriodicElement {
   period: number;
   /** IUPAC column 1 to 18; `null` for the lanthanoids and the actinoids. */
   group: number | null;
+  /** Block its outermost electrons fill, which is where the table puts it. */
   block: ElementBlock;
+  /** Family the table colours it by. */
   category: ElementCategory;
 }
 

package/src/periodic/core/layout.ts

@@ -16,13 +16,17 @@ import { PERIODIC_ELEMENTS, elementBySymbol } from './elements.ts';
 
 /** A whole run of the table: one group, or one period. */
 export interface ElementRange {
+  /** Whether the run is a group or a period. */
   kind: 'group' | 'period';
+  /** Its number: a group from 1 to 18, a period from 1 to 7. */
   value: number;
 }
 
 /** A cell of the grid, one-based as CSS grid lines are. */
 export interface Cell {
+  /** Grid column, one-based. */
   column: number;
+  /** Grid row, one-based. */
   row: number;
 }
 
@@ -64,7 +68,7 @@ export function placedElements(): ReadonlyArray<{
   element: PeriodicElement;
   cell: Cell;
 }> {
-  PLACED ??= PERIODIC_ELEMENTS.map((element) => ({
+  placedCache ??= PERIODIC_ELEMENTS.map((element) => ({
     element,
     cell: cellOf(element),
   })).toSorted((first, second) =>
@@ -72,11 +76,13 @@ export function placedElements(): ReadonlyArray<{
       ? first.cell.column - second.cell.column
       : first.cell.row - second.cell.row,
   );
-  return PLACED;
+  return placedCache;
 }
 
-let PLACED: ReadonlyArray<{ element: PeriodicElement; cell: Cell }> | null =
-  null;
+let placedCache: ReadonlyArray<{
+  element: PeriodicElement;
+  cell: Cell;
+}> | null = null;
 
 /**
  * The two cells the lanthanoids and the actinoids were lifted out of.
@@ -145,25 +151,25 @@ const ARROW_DIRECTIONS: Record<string, { column: number; row: number }> = {
 };
 
 function readingOrderIndex(): Map<string, number> {
-  READING_ORDER ??= new Map(
+  readingOrderCache ??= new Map(
     placedElements().map(({ element }, index) => [element.symbol, index]),
   );
-  return READING_ORDER;
+  return readingOrderCache;
 }
 
-let READING_ORDER: Map<string, number> | null = null;
+let readingOrderCache: Map<string, number> | null = null;
 
 function byCell(): Map<string, PeriodicElement> {
-  BY_CELL ??= new Map(
+  cellIndexCache ??= new Map(
     placedElements().map(({ element, cell }) => [
       cellKey(cell.column, cell.row),
       element,
     ]),
   );
-  return BY_CELL;
+  return cellIndexCache;
 }
 
-let BY_CELL: Map<string, PeriodicElement> | null = null;
+let cellIndexCache: Map<string, PeriodicElement> | null = null;
 
 function cellKey(column: number, row: number): string {
   return `${String(column)}:${String(row)}`;

package/src/periodic/ui/CategoryLegend.tsx

@@ -4,6 +4,7 @@
 
 import type { CSSProperties, ReactElement } from 'react';
 
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import {
   CATEGORY_LABELS,
   CATEGORY_ORDER,
@@ -24,6 +25,11 @@ export interface CategoryLegendProps {
    * @default undefined — none is
    */
   selected?: ElementCategory;
+  /**
+   * Class names added to the root element.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -32,10 +38,10 @@ export interface CategoryLegendProps {
  * @returns The legend.
  */
 export function CategoryLegend(props: CategoryLegendProps): ReactElement {
-  const { onSelect, selected } = props;
+  const { className, onSelect, selected } = props;
 
   return (
-    <div style={legendStyle}>
+    <div className={className} style={legendStyle}>
       {CATEGORY_ORDER.map((category) => {
         const swatch = categorySwatch(category);
         const label = CATEGORY_LABELS[category];
@@ -74,7 +80,7 @@ export function CategoryLegend(props: CategoryLegendProps): ReactElement {
 }
 
 const legendStyle = {
-  color: 'var(--text-muted, rgb(95 107 124))',
+  color: TOKEN.textMuted,
   display: 'flex',
   flexWrap: 'wrap',
   fontSize: 11,

package/src/periodic/ui/ElementCell.tsx

@@ -8,7 +8,7 @@
 
 import type { CSSProperties, ReactElement } from 'react';
 
-import type { Swatch } from '../../color/core/scale.ts';
+import type { Swatch } from '../../color/core/interpolate.ts';
 
 /** What {@link ElementCell} needs to draw one element. */
 export interface ElementCellProps {
@@ -24,6 +24,7 @@ export interface ElementCellProps {
   column: number;
   /** Row of the grid, one-based. */
   row: number;
+  /** Called with the symbol when the cell is chosen. */
   onSelect: (symbol: string) => void;
   /**
    * Third line, under the symbol: the value the tool is showing.
@@ -46,6 +47,11 @@ export interface ElementCellProps {
    * @default undefined
    */
   onHover?: (symbol: string | null) => void;
+  /**
+   * Class names added to the root element.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -55,6 +61,7 @@ export interface ElementCellProps {
  */
 export function ElementCell(props: ElementCellProps): ReactElement {
   const {
+    className,
     atomicNumber,
     symbol,
     name,
@@ -71,6 +78,7 @@ export function ElementCell(props: ElementCellProps): ReactElement {
   return (
     <button
       type="button"
+      className={className}
       data-testid={`element-${symbol}`}
       data-symbol={symbol}
       aria-label={`${name} (${symbol}, Z = ${String(atomicNumber)})`}