react-cheminfo 0.33.0 → 0.34.0

package/src/axis/ui/AxisScaleControl.tsx

@@ -0,0 +1,103 @@
+/**
+ * The control that moves one axis between its two scales.
+ *
+ * It belongs on the figure rather than in the page around it: the scale is not
+ * a property of the page but of the picture, a reader decides to change it
+ * while looking at the picture, and a figure handed out on its own — embedded
+ * in a course page, pasted into a deck — takes its controls with it. So it is
+ * written as a control of an `OverlayBar`, floating in whichever corner the
+ * marks leave emptiest.
+ *
+ * Its two segments are named here rather than by each site, because `Linear`
+ * and `Log` are chrome: one translation reaches every figure in the family.
+ */
+
+import type { ReactElement } from 'react';
+
+import type { HelpContent } from '../../help/ui/HelpBody.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
+import type { AxisScale } from '../core/axisScale.ts';
+
+/** Which axis a control belongs to, which is how it names itself. */
+export type AxisScaleAxis = 'x' | 'y';
+
+/** What {@link AxisScaleControl} needs. */
+export interface AxisScaleControlProps {
+  /** The scale in force — what `resolveAxisScale` answered, not the choice. */
+  value: AxisScale;
+  /** Called with the scale the reader picked. */
+  onChange: (scale: AxisScale) => void;
+  /**
+   * Which axis it sets, which names it `X scale` or `Y scale`. Leave it out on
+   * a figure where only one axis offers the choice: the control is then simply
+   * `Scale`, because naming the axis is only worth the width when there are two
+   * of them to tell apart.
+   * @default undefined — the control is named `Scale`
+   */
+  axis?: AxisScaleAxis;
+  /**
+   * What it is called, overriding both of the above. For a figure whose axis
+   * has a name the reader already knows it by.
+   * @default the chrome's own word, in the language of the page
+   */
+  label?: string;
+  /**
+   * What the two scales do, in a sentence.
+   * @default the chrome's own explanation
+   */
+  help?: HelpContent;
+  /**
+   * Whether the name is announced but not written.
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * Whether the control is greyed and unreachable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Value of the `data-testid` attribute.
+   * @default undefined
+   */
+  testId?: string;
+}
+
+/**
+ * The two scales, the one in force pressed.
+ * @param props - See {@link AxisScaleControlProps}.
+ * @returns The named pair of segments.
+ */
+export function AxisScaleControl(props: AxisScaleControlProps): ReactElement {
+  const { value, onChange, axis, label, help, testId } = props;
+  const { hideLabel = false, disabled = false } = props;
+  const t = useChromeT();
+
+  const options: ReadonlyArray<OverlayOption<AxisScale>> = [
+    { value: 'linear', label: t('axis.linear') },
+    { value: 'log', label: t('axis.logarithmic') },
+  ];
+
+  return (
+    <OverlaySegmented<AxisScale>
+      label={label ?? t(nameOf(axis))}
+      help={help ?? { title: t('axis.scale'), body: t('axis.scaleHelp') }}
+      hideLabel={hideLabel}
+      disabled={disabled}
+      value={value}
+      options={options}
+      onChange={onChange}
+      testId={testId}
+    />
+  );
+}
+
+function nameOf(
+  axis: AxisScaleAxis | undefined,
+): 'axis.scale' | 'axis.xScale' | 'axis.yScale' {
+  if (axis === 'x') return 'axis.xScale';
+  if (axis === 'y') return 'axis.yScale';
+  return 'axis.scale';
+}

package/src/axis/ui/index.ts

@@ -0,0 +1,9 @@
+/**
+ * The controls that say how an axis is read.
+ */
+
+export type {
+  AxisScaleAxis,
+  AxisScaleControlProps,
+} from './AxisScaleControl.tsx';
+export { AxisScaleControl } from './AxisScaleControl.tsx';

package/src/core.ts

@@ -1,4 +1,5 @@
 export * from './about/core/index.ts';
+export * from './axis/core/index.ts';
 export * from './build/core/index.ts';
 export * from './chart/core/index.ts';
 export * from './citation/core/index.ts';

package/src/delimited/core/index.ts

@@ -8,3 +8,5 @@ export type { ReadDelimitedOptions } from './readDelimited.ts';
 export { detectDelimiter, readDelimited } from './readDelimited.ts';
 export type { ToDelimitedOptions } from './toDelimited.ts';
 export { escapeCell, toDelimited } from './toDelimited.ts';
+export type { TableRecord, TableRows, TableRowsOptions } from './tableRows.ts';
+export { columnsOf, tableRows } from './tableRows.ts';

package/src/delimited/core/tableRows.ts

@@ -0,0 +1,93 @@
+/**
+ * Turning a list of records into the cells a table is handed over as.
+ *
+ * Most pages hold their data as one object per row — a query result, a list of
+ * peaks, a row of properties — while a delimited table is cells. Every site
+ * that exports such a list wrote the same two loops, so they are here once.
+ */
+
+/** One record, as a page holds it before it becomes a row of cells. */
+export type TableRecord = Record<string, unknown>;
+
+/** How a record becomes cells. */
+export interface TableRowsOptions {
+  /**
+   * The columns to write, in order. A column no record carries comes out
+   * empty, which is what lets one caller pin the order of a table whose first
+   * record happens to be missing a field.
+   * @default the keys of the first record, in the order it declares them
+   */
+  columns?: readonly string[];
+  /**
+   * How a value becomes a cell.
+   * @default `String(value)`, with `null` and `undefined` written as nothing
+   */
+  format?: (value: unknown, column: string) => string;
+}
+
+/** The columns, and the cells under them. */
+export interface TableRows {
+  /** Column names, in the order the cells are written. */
+  header: string[];
+  /** One array of cells per record. */
+  rows: string[][];
+}
+
+/**
+ * The records as the header and cells of a table.
+ * @param records - The records, in the order they are shown.
+ * @param options - See {@link TableRowsOptions}.
+ * @returns See {@link TableRows}.
+ */
+export function tableRows(
+  records: readonly TableRecord[],
+  options: TableRowsOptions = {},
+): TableRows {
+  const { columns, format = defaultCell } = options;
+  const header = [...(columns ?? columnsOf(records))];
+  const rows: string[][] = [];
+  for (const record of records) {
+    const cells: string[] = [];
+    for (const column of header) cells.push(format(record[column], column));
+    rows.push(cells);
+  }
+  return { header, rows };
+}
+
+/**
+ * Every column the records carry, each named once, in the order first seen.
+ *
+ * Every record is read rather than only the first, because a list whose later
+ * records carry a field the first one happens to lack would otherwise be
+ * handed over with that column silently missing.
+ * @param records - The records.
+ * @returns The column names.
+ */
+export function columnsOf(records: readonly TableRecord[]): string[] {
+  const columns: string[] = [];
+  const seen = new Set<string>();
+  for (const record of records) {
+    for (const column of Object.keys(record)) {
+      if (seen.has(column)) continue;
+      seen.add(column);
+      columns.push(column);
+    }
+  }
+  return columns;
+}
+
+function defaultCell(value: unknown): string {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'string') return value;
+  if (
+    typeof value === 'number' ||
+    typeof value === 'bigint' ||
+    typeof value === 'boolean'
+  ) {
+    return String(value);
+  }
+  // Anything else left in a cell has no honest text form, and `[object Object]`
+  // is the one answer a spreadsheet can do nothing with. JSON at least says
+  // what was there; a caller who wants better passes `format`.
+  return JSON.stringify(value) ?? '';
+}

package/src/delimited/ui/DelimitedTextPanel.tsx

@@ -54,6 +54,15 @@ export interface DelimitedTextPanelProps {
    * @default 320
    */
   height?: number;
+  /**
+   * What is shown in place of the text area. A caller with more rows than a
+   * text area can hold — a spectrum of a hundred thousand points — passes its
+   * own virtualized table here; what is copied and what is saved stay the
+   * serialized text either way, so the preview can shorten a number the file
+   * keeps in full.
+   * @default undefined — the text itself, in a read-only text area
+   */
+  preview?: ReactNode;
   /**
    * Class names added to the root element, after the component's own.
    * @default undefined
@@ -84,6 +93,7 @@ export function DelimitedTextPanel(
     downloadable = true,
     label,
     height = 320,
+    preview,
   } = props;
   const t = useChromeT();
   const [delimiterId, setDelimiterId] = useState<string>(defaultDelimiter);
@@ -138,15 +148,19 @@ export function DelimitedTextPanel(
           small
         />
       </div>
-      <textarea
-        readOnly
-        value={text}
-        spellCheck={false}
-        aria-label={label ?? t('delimited.tableAsText')}
-        className={Classes.INPUT}
-        style={{ ...TEXT_STYLE, height }}
-        onFocus={(event) => event.currentTarget.select()}
-      />
+      {preview === undefined ? (
+        <textarea
+          readOnly
+          value={text}
+          spellCheck={false}
+          aria-label={label ?? t('delimited.tableAsText')}
+          className={Classes.INPUT}
+          style={{ ...TEXT_STYLE, height }}
+          onFocus={(event) => event.currentTarget.select()}
+        />
+      ) : (
+        <div style={PREVIEW_STYLE}>{preview}</div>
+      )}
     </div>
   );
 }
@@ -166,6 +180,8 @@ const LABEL_STYLE = {
 
 const SPACER_STYLE = { flex: 1 } as const satisfies CSSProperties;
 
+const PREVIEW_STYLE = { marginTop: 12 } as const satisfies CSSProperties;
+
 const TEXT_STYLE = {
   width: '100%',
   marginTop: 12,

package/src/delimited/ui/TableDataButton.tsx

@@ -0,0 +1,162 @@
+import type { IconName } from '@blueprintjs/core';
+import { Button } from '@blueprintjs/core';
+import type { ReactElement, ReactNode } from 'react';
+import { useState } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
+import type { DelimitedTextDialogProps } from './DelimitedTextDialog.tsx';
+import { DelimitedTextDialog } from './DelimitedTextDialog.tsx';
+
+/** The cells of a table, one array per line. */
+type TableRows = ReadonlyArray<readonly string[]>;
+
+/** What the shut dialog is handed, so it holds no copy of the last table. */
+const EMPTY: TableRows = [];
+
+/** What {@link TableDataButton} hands over, and how the button reads. */
+export interface TableDataButtonProps extends Omit<
+  DelimitedTextDialogProps,
+  'isOpen' | 'onClose' | 'rows'
+> {
+  /**
+   * The cells, one array per line. A function is called when the dialog opens
+   * and not before, which is what a table built out of a computation has to
+   * be: formatting a thousand points into strings on every render, for a
+   * button nobody may press, is a page that stutters while it is used.
+   */
+  rows: TableRows | (() => TableRows);
+  /**
+   * Text of the button. Left out for an icon-only button, which is what a
+   * dense toolbar over a table wants.
+   * @default undefined — the button is reduced to its icon
+   */
+  text?: string;
+  /**
+   * Glyph on the button.
+   * @default 'th'
+   */
+  icon?: IconName;
+  /**
+   * Whether the button drops its background, for a toolbar or a card header.
+   * @default true
+   */
+  minimal?: boolean;
+  /**
+   * Whether the button is the small size.
+   * @default false
+   */
+  small?: boolean;
+  /**
+   * What the pointer and a screen reader are told. The dialog's own `title`
+   * names the table — `Titration curve as a table` — while this names the
+   * affordance, and the two are deliberately not the same string: the heading
+   * is the site's to write, the button's name is the family's, so the control
+   * reads the same on every tool a visitor opens that week.
+   * @default the chrome's own line, in the language of the page
+   */
+  tooltip?: string;
+  /**
+   * Whether there is nothing to hand over. A table that has not been computed
+   * yet says so by being greyed rather than by opening an empty dialog.
+   * @default whether there are no rows — and `false` where `rows` is a
+   * function, which is not called to find out
+   */
+  disabled?: boolean;
+  /**
+   * Class the button carries, so a site can reach it from its stylesheet — a
+   * terminal whose green the chrome's muted grey is unreadable against, a
+   * toolbar with its own metrics.
+   * @default undefined
+   */
+  buttonClassName?: string;
+  /**
+   * Value of the `data-testid` attribute of the button.
+   * @default undefined
+   */
+  testId?: string;
+  /**
+   * The control in place of the Blueprint button, for a page whose chrome is
+   * not Blueprint's — a `react-science` toolbar, a site's own toolbar button.
+   * It is handed the function that opens the dialog.
+   *
+   * It exists so the dialog, the separator, the copy, the save and the wording
+   * are shared even where the button cannot be: a site that keeps its own
+   * trigger should not also be keeping its own dialog.
+   * @default a Blueprint button carrying the glyph and the text
+   */
+  trigger?: (open: () => void) => ReactNode;
+}
+
+/**
+ * The one control that takes a table off the page: copy it, or save it.
+ *
+ * It is a button and a dialog together rather than a dialog a site has to hold
+ * open itself, because the state behind it is the same three lines in every
+ * site and because the wording is not a site's to choose. An audit in
+ * September 2026 found the same affordance spelled `Export as TSV` on one
+ * site, `Copy as TSV` on another and `Copy or download data` on a third, which
+ * reads as three different features to anybody who uses two of our tools in a
+ * week.
+ *
+ * It is also deliberately not named after a separator. The dialog behind it
+ * writes tab-, comma- or semicolon-separated text, so a button that says TSV
+ * is wrong two times out of three — and a reader looking for CSV concludes the
+ * tool cannot give it to them.
+ * @param props - See {@link TableDataButtonProps}.
+ * @returns The button and its dialog.
+ */
+export function TableDataButton(props: TableDataButtonProps): ReactElement {
+  const {
+    rows,
+    text,
+    icon = 'th',
+    minimal = true,
+    small = false,
+    tooltip,
+    disabled,
+    testId,
+    trigger,
+    buttonClassName,
+    ...dialog
+  } = props;
+  const t = useChromeT();
+  // The cells are held rather than read on every render, so a `rows` function
+  // is called once per opening and the closed button costs nothing at all.
+  const [shown, setShown] = useState<TableRows | null>(null);
+
+  const told = tooltip ?? t('delimited.copyOrDownload');
+  const nothing =
+    disabled ?? (typeof rows === 'function' ? false : rows.length === 0);
+
+  function show(): void {
+    setShown(typeof rows === 'function' ? rows() : rows);
+  }
+
+  return (
+    <>
+      {trigger ? (
+        trigger(show)
+      ) : (
+        <Button
+          className={buttonClassName}
+          icon={icon}
+          text={text}
+          variant={minimal ? 'minimal' : 'solid'}
+          size={small ? 'small' : 'medium'}
+          disabled={nothing}
+          title={told}
+          aria-label={text ?? told}
+          data-testid={testId}
+          onClick={show}
+        />
+      )}
+      <DelimitedTextDialog
+        {...dialog}
+        rows={shown ?? EMPTY}
+        isOpen={shown !== null}
+        onClose={() => setShown(null)}
+      />
+    </>
+  );
+}

package/src/delimited/ui/index.ts

@@ -2,3 +2,5 @@ export type { DelimitedTextDialogProps } from './DelimitedTextDialog.tsx';
 export { DelimitedTextDialog } from './DelimitedTextDialog.tsx';
 export type { DelimitedTextPanelProps } from './DelimitedTextPanel.tsx';
 export { DelimitedTextPanel } from './DelimitedTextPanel.tsx';
+export type { TableDataButtonProps } from './TableDataButton.tsx';
+export { TableDataButton } from './TableDataButton.tsx';

package/src/locales/de.json

@@ -232,6 +232,12 @@
   "overlay.reset": "Zurücksetzen",
   "overlay.hoverAName": "Fahren Sie über einen Namen, um zu sehen, was er bewirkt.",
   "overlay.dismiss": "Schließen",
+  "axis.scale": "Skala",
+  "axis.xScale": "X-Skala",
+  "axis.yScale": "Y-Skala",
+  "axis.linear": "Linear",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Wie die Achse geteilt ist. Linear bekommt jede Einheit gleich viel Platz, so werden die größten Werte miteinander verglichen; logarithmisch bekommt jeder Faktor zehn gleich viel Platz, so sind die kleinen überhaupt sichtbar.",
   "delimited.copyTable": "Tabelle kopieren",
   "delimited.copyOrDownload": "Daten kopieren oder herunterladen",
   "delimited.close": "Schließen",

package/src/locales/en.json

@@ -232,6 +232,12 @@
   "overlay.reset": "Reset",
   "overlay.hoverAName": "Hover a name for what it does.",
   "overlay.dismiss": "Dismiss",
+  "axis.scale": "Scale",
+  "axis.xScale": "X scale",
+  "axis.yScale": "Y scale",
+  "axis.linear": "Linear",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "How the axis is spaced. Linear gives every unit the same room, so the largest values are read against each other; logarithmic gives every factor of ten the same room, so the small ones are visible at all.",
   "delimited.copyTable": "Copy the table",
   "delimited.copyOrDownload": "Copy or download data",
   "delimited.close": "Close",

package/src/locales/es.json

@@ -232,6 +232,12 @@
   "overlay.reset": "Reiniciar",
   "overlay.hoverAName": "Pase el puntero sobre un nombre para ver qué hace.",
   "overlay.dismiss": "Cerrar",
+  "axis.scale": "Escala",
+  "axis.xScale": "Escala X",
+  "axis.yScale": "Escala Y",
+  "axis.linear": "Lineal",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Cómo se gradúa el eje. En lineal cada unidad ocupa el mismo espacio, de modo que se comparan los valores mayores entre sí; en logarítmica cada factor diez ocupa el mismo espacio, de modo que los pequeños llegan a verse.",
   "delimited.copyTable": "Copiar la tabla",
   "delimited.copyOrDownload": "Copiar o descargar los datos",
   "delimited.close": "Cerrar",

package/src/locales/fr.json

@@ -232,6 +232,12 @@
   "overlay.reset": "Réinitialiser",
   "overlay.hoverAName": "Survolez un nom pour savoir ce qu'il fait.",
   "overlay.dismiss": "Fermer",
+  "axis.scale": "Échelle",
+  "axis.xScale": "Échelle X",
+  "axis.yScale": "Échelle Y",
+  "axis.linear": "Linéaire",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Comment l'axe est gradué. En linéaire, chaque unité occupe la même place, ce qui compare les grandes valeurs entre elles ; en logarithmique, chaque facteur dix occupe la même place, ce qui rend les petites visibles.",
   "delimited.copyTable": "Copier le tableau",
   "delimited.copyOrDownload": "Copier ou télécharger les données",
   "delimited.close": "Fermer",

package/src/locales/it.json

@@ -232,6 +232,12 @@
   "overlay.reset": "Ricomincia",
   "overlay.hoverAName": "Passare il puntatore su un nome per vedere cosa fa.",
   "overlay.dismiss": "Chiudi",
+  "axis.scale": "Scala",
+  "axis.xScale": "Scala X",
+  "axis.yScale": "Scala Y",
+  "axis.linear": "Lineare",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Come è graduato l'asse. In lineare ogni unità occupa lo stesso spazio, così si confrontano fra loro i valori più grandi; in logaritmica ogni fattore dieci occupa lo stesso spazio, così i piccoli si vedono.",
   "delimited.copyTable": "Copia la tabella",
   "delimited.copyOrDownload": "Copiare o scaricare i dati",
   "delimited.close": "Chiudi",

package/src/periodic/core/index.ts

@@ -18,6 +18,7 @@ export {
 export type { Cell, ElementRange } from './layout.ts';
 export {
   COLUMN_COUNT,
+  EMPTY_BLOCK,
   INNER_TRANSITION_MARKERS,
   INNER_TRANSITION_ROWS,
   ROW_COUNT,

package/src/periodic/core/layout.ts

@@ -84,6 +84,25 @@ let placedCache: ReadonlyArray<{
   cell: Cell;
 }> | null = null;
 
+/**
+ * The block of cells the table leaves empty, where no element belongs: logical
+ * columns 3 to 12 of the first three periods.
+ *
+ * It is a tenth of the drawing, in the middle of the top edge, and the one
+ * place a tool can write without covering an element — which is why a table
+ * printed on a wall puts its title or its key there.
+ */
+export const EMPTY_BLOCK: {
+  /** Leftmost column of the block, one-based. */
+  column: number;
+  /** Topmost row of the block, one-based. */
+  row: number;
+  /** How many columns it spans. */
+  columnSpan: number;
+  /** How many rows it spans. */
+  rowSpan: number;
+} = { column: 3, row: 1, columnSpan: 10, rowSpan: 3 };
+
 /**
  * The two cells the lanthanoids and the actinoids were lifted out of.
  *

package/src/periodic/ui/ElementCell.tsx

@@ -263,16 +263,28 @@ const cellStyle = {
   minWidth: 0,
   overflow: 'hidden',
   padding: '1px',
+  // The corner the atomic number is pinned into.
+  position: 'relative',
   transition: 'opacity 120ms ease, filter 120ms ease',
 } as const satisfies CSSProperties;
 
+/**
+ * The atomic number sits out of the flow, in the corner.
+ *
+ * In the flow it rode on top of a stack the cell centres, so it moved down
+ * whenever what is written under the symbol was written smaller — the numbers
+ * of a row then sat at as many heights as the row had word lengths. Out of it,
+ * the number is in the same corner of every cell, and the symbol is centred in
+ * the cell rather than in what is left of it.
+ */
 const numberStyle = {
-  alignSelf: 'flex-start',
-  fontSize: 'max(0.33rem, 1.2cqw)',
+  fontSize: 'max(0.33rem, 1.1cqw)',
   fontVariantNumeric: 'tabular-nums',
+  left: 'max(1px, 0.14cqw)',
   lineHeight: 1,
   opacity: 0.8,
-  paddingLeft: '0.15cqw',
+  position: 'absolute',
+  top: 'max(1px, 0.14cqw)',
 } as const satisfies CSSProperties;
 
 const symbolStyle = {

package/src/periodic/ui/PeriodicTable.tsx

@@ -10,7 +10,12 @@
  * a site's own richer element record never has to cross into this component.
  */
 
-import type { CSSProperties, KeyboardEvent, ReactElement } from 'react';
+import type {
+  CSSProperties,
+  KeyboardEvent,
+  ReactElement,
+  ReactNode,
+} from 'react';
 import { useEffect, useRef } from 'react';
 
 import type { Swatch } from '../../color/core/interpolate.ts';
@@ -20,6 +25,7 @@ import type { PeriodicElement } from '../core/elements.ts';
 import type { ElementRange } from '../core/layout.ts';
 import {
   COLUMN_COUNT,
+  EMPTY_BLOCK,
   elementByArrowKey,
   placedElements,
 } from '../core/layout.ts';
@@ -66,6 +72,17 @@ export interface PeriodicTableProps {
    * @default every element is
    */
   isIncluded?: (element: PeriodicElement) => boolean;
+  /**
+   * What is written in the block the table leaves empty — columns 3 to 12 of
+   * the first three periods, in the middle of the top edge. A tool that reads
+   * one element off the table puts what it says about it there, where the eye
+   * already is, rather than under the grid.
+   *
+   * It is sized against the table, like everything else in the grid, so give
+   * it type in `em` and it scales with the drawing.
+   * @default undefined — the block stays empty
+   */
+  inset?: ReactNode;
   /**
    * Whether to draw the group and period strips.
    * @default false
@@ -119,6 +136,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
     detailOf,
     nameOf = defaultNameOf,
     isIncluded,
+    inset,
     headers = false,
     onSelectRange,
     legend = false,
@@ -164,6 +182,9 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
         onKeyDown={handleKeyDown}
       >
         {headers ? <HeaderStrips onSelectRange={onSelectRange} /> : null}
+        {inset === undefined ? null : (
+          <div style={insetStyle(offset)}>{inset}</div>
+        )}
         {markers ? <InnerTransitionMarkers offset={offset} /> : null}
         {placedElements().map(({ element, cell }) => (
           <ElementCell
@@ -188,6 +209,29 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   );
 }
 
+/**
+ * Where what the caller writes in the empty block is placed.
+ * @param offset - 1 when the table draws its header strips, 0 otherwise.
+ * @returns The style of the slot.
+ */
+function insetStyle(offset: number): CSSProperties {
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    // Narrower than the block so the writing never touches the cells beside it.
+    padding: '0 1cqw',
+    gridColumn: `${String(EMPTY_BLOCK.column + offset)} / span ${String(EMPTY_BLOCK.columnSpan)}`,
+    gridRow: `${String(EMPTY_BLOCK.row + offset)} / span ${String(EMPTY_BLOCK.rowSpan)}`,
+    // A share of the table, with a floor, exactly as a cell sizes its symbol:
+    // the block holds the same three rows at every width, so what is written
+    // in it has to shrink with them.
+    fontSize: 'max(0.6rem, 1.8cqw)',
+    lineHeight: 1.35,
+    minWidth: 0,
+    overflow: 'hidden',
+  };
+}
+
 function defaultSwatchOf(element: PeriodicElement): Swatch {
   return categorySwatch(element.category);
 }