react-cheminfo 0.31.0 → 0.33.0

package/src/periodic/ui/ElementCell.tsx

@@ -4,9 +4,14 @@
  *
  * A cell is a real `<button>`, so Tab reaches it, Enter and Space activate it,
  * and a screen reader reads the element's name rather than its symbol.
+ *
+ * Everything written in it is sized in container-query units, so a cell shows
+ * the same proportions at 280px beside a chart and across a lecture-hall
+ * screen — the table a class reads is the same drawing, larger.
  */
 
 import type { CSSProperties, ReactElement } from 'react';
+import { useState } from 'react';
 
 import type { Swatch } from '../../color/core/interpolate.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
@@ -32,6 +37,12 @@ export interface ElementCellProps {
    * @default '' — nothing is written
    */
   detail?: string;
+  /**
+   * Whether the table this cell belongs to writes a third line at all. A table
+   * that writes none gives the room to the symbol, and its rows are shorter.
+   * @default whether this cell has one
+   */
+  writesDetail?: boolean;
   /**
    * Whether the cell is the one the tools are pointed at.
    * @default false
@@ -71,11 +82,13 @@ export function ElementCell(props: ElementCellProps): ReactElement {
     row,
     onSelect,
     detail = '',
+    writesDetail = detail !== '',
     isSelected = false,
     isIncluded = true,
     onHover,
   } = props;
   const t = useChromeT();
+  const [isHovered, setIsHovered] = useState(false);
 
   return (
     <button
@@ -83,6 +96,7 @@ export function ElementCell(props: ElementCellProps): ReactElement {
       className={className}
       data-testid={`element-${symbol}`}
       data-symbol={symbol}
+      title={detail === '' ? name : `${name} · ${detail}`}
       aria-label={t('periodic.cellLabel', {
         name,
         symbol,
@@ -92,8 +106,14 @@ export function ElementCell(props: ElementCellProps): ReactElement {
       onClick={() => {
         onSelect(symbol);
       }}
-      onPointerEnter={() => onHover?.(symbol)}
-      onPointerLeave={() => onHover?.(null)}
+      onPointerEnter={() => {
+        setIsHovered(true);
+        onHover?.(symbol);
+      }}
+      onPointerLeave={() => {
+        setIsHovered(false);
+        onHover?.(null);
+      }}
       style={{
         ...cellStyle,
         gridColumn: column,
@@ -103,17 +123,134 @@ export function ElementCell(props: ElementCellProps): ReactElement {
         opacity: isIncluded ? 1 : 0.28,
         // An outline rather than a fill: a table coloured by a property must
         // keep saying what the value is while a cell is selected.
-        outline: isSelected ? `2px solid ${swatch.foreground}` : 'none',
-        outlineOffset: -3,
+        outlineStyle: isSelected ? 'solid' : 'none',
+        outlineColor: swatch.foreground,
+        // Thick enough to be seen from the back of a room, and drawn inside
+        // the cell so a neighbour never covers it.
+        outlineWidth: 'max(2px, 0.3cqw)',
+        outlineOffset: 'max(-3px, -0.4cqw)',
+        // The cell the pointer is on, for a class following a demonstration.
+        filter: isHovered ? 'brightness(1.08)' : undefined,
       }}
     >
       <span style={numberStyle}>{atomicNumber}</span>
-      <span style={symbolStyle}>{symbol}</span>
-      {detail === '' ? null : <span style={detailStyle}>{detail}</span>}
+      <span
+        style={{
+          ...symbolStyle,
+          fontSize: symbolFontSize(symbol, writesDetail),
+        }}
+      >
+        {symbol}
+      </span>
+      {detail === '' ? null : (
+        <span style={{ ...detailStyle, fontSize: detailFontSize(detail) }}>
+          {detail}
+        </span>
+      )}
     </button>
   );
 }
 
+/**
+ * The size the symbol is written at.
+ *
+ * Every symbol is written at the same size, except the widest of them — the
+ * ones whose second letter is an `m` — which are written a tenth smaller
+ * rather than run into the edges of their cell.
+ * @param symbol - The chemical symbol.
+ * @param writesDetail - Whether the table writes a third line under it.
+ * @returns A CSS length.
+ */
+function symbolFontSize(symbol: string, writesDetail: boolean): string {
+  const cap = writesDetail ? SYMBOL_CQW : SYMBOL_ALONE_CQW;
+  return fitted(symbolWidthInEm(symbol), cap, '0.5rem');
+}
+
+/**
+ * The size the third line takes so the whole of it is written.
+ *
+ * A value cut short by an ellipsis is a wrong value — `0.0899` read as `0.0…`
+ * is worse than not writing it at all — so a long string is written smaller
+ * rather than trimmed.
+ * @param detail - What the third line says.
+ * @returns A CSS length.
+ */
+function detailFontSize(detail: string): string {
+  return fitted(detailWidthInEm(detail), DETAIL_CQW, '0.25rem');
+}
+
+/**
+ * The largest size a string of the given width fits its cell at.
+ *
+ * The room a cell leaves is a share of the table's width less its border and
+ * its padding, which are the same few pixels at every size — hence the two
+ * units in one expression.
+ * @param widthInEm - How wide the string is, in ems of its own size.
+ * @param cap - The size it is written at when it has room to spare.
+ * @param floor - The size under which it is not shrunk any further.
+ * @returns A CSS length.
+ */
+function fitted(widthInEm: number, cap: string, floor: string): string {
+  const room = `calc((${CELL_CQW} - ${CELL_CHROME}) / ${widthInEm.toFixed(2)})`;
+  return `max(${floor}, min(${cap}, ${room}))`;
+}
+
+/**
+ * How wide a symbol is, in ems of its own size.
+ * @param symbol - The chemical symbol.
+ * @returns Its width, never zero.
+ */
+function symbolWidthInEm(symbol: string): number {
+  let width = 0;
+  for (const character of symbol) {
+    if (character === 'm' || character === 'w') {
+      width += 0.95;
+    } else if (character >= 'a' && character <= 'z') {
+      width += 0.63;
+    } else {
+      width += 0.85;
+    }
+  }
+  return Math.max(width, 0.85);
+}
+
+/**
+ * How wide the third line is, in ems of its own size.
+ *
+ * It is written with tabular figures, where every glyph — the decimal point
+ * and the minus of an exponent included — advances the same width, so counting
+ * the characters is the measurement.
+ * @param detail - What the third line says.
+ * @returns Its width, never zero.
+ */
+function detailWidthInEm(detail: string): number {
+  return Math.max(detail.length, 1) * TABULAR_EM;
+}
+
+/** What one tabular glyph advances, as a share of its own size. */
+const TABULAR_EM = 0.6;
+
+/** The size the symbol is written at wherever it fits, as a share of the table. */
+const SYMBOL_CQW = '2.4cqw';
+
+/** The same, in a table that writes nothing under the symbol. */
+const SYMBOL_ALONE_CQW = '2.8cqw';
+
+/**
+ * The tallest the third line is ever written, as a share of the table.
+ *
+ * Close to three quarters of the symbol: the symbol is how a cell is found,
+ * but the value is what the table is being read for, and a value half the size
+ * of the symbol is the one thing on the cell a class cannot make out.
+ */
+const DETAIL_CQW = '1.75cqw';
+
+/** How wide one column is, as a share of the table's width. */
+const CELL_CQW = '4.85cqw';
+
+/** What the border and the padding of a cell take off that width. */
+const CELL_CHROME = '4px';
+
 const cellStyle = {
   alignItems: 'center',
   border: '1px solid rgb(255 255 255 / 0.55)',
@@ -123,29 +260,31 @@ const cellStyle = {
   flexDirection: 'column',
   font: 'inherit',
   justifyContent: 'center',
-  lineHeight: 1.05,
   minWidth: 0,
   overflow: 'hidden',
-  padding: 1,
-  transition: 'opacity 120ms ease',
+  padding: '1px',
+  transition: 'opacity 120ms ease, filter 120ms ease',
 } as const satisfies CSSProperties;
 
 const numberStyle = {
   alignSelf: 'flex-start',
-  fontSize: 'clamp(0.34rem, 1.6cqw, 0.5rem)',
+  fontSize: 'max(0.33rem, 1.2cqw)',
+  fontVariantNumeric: 'tabular-nums',
+  lineHeight: 1,
   opacity: 0.8,
-  paddingLeft: 2,
+  paddingLeft: '0.15cqw',
 } as const satisfies CSSProperties;
 
 const symbolStyle = {
-  fontSize: 'clamp(0.55rem, 3.3cqw, 1.05rem)',
   fontWeight: 700,
+  letterSpacing: '-0.02em',
+  lineHeight: 1.02,
 } as const satisfies CSSProperties;
 
 const detailStyle = {
-  fontSize: 'clamp(0.34rem, 1.6cqw, 0.5rem)',
+  fontVariantNumeric: 'tabular-nums',
+  lineHeight: 1,
   maxWidth: '100%',
   overflow: 'hidden',
-  textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
 } as const satisfies CSSProperties;

package/src/periodic/ui/PeriodicTable.tsx

@@ -129,6 +129,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   } = props;
 
   const t = useChromeT();
+  const writesDetail = detailOf !== undefined;
   const gridRef = useRef<HTMLDivElement>(null);
   const cameFromKeyRef = useRef(false);
   const offset = headers ? 1 : 0;
@@ -159,7 +160,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
         role="grid"
         aria-label={t('periodic.table')}
         data-testid="periodic-table"
-        style={headers ? gridWithHeadersStyle : gridStyle}
+        style={gridStyle(headers, writesDetail)}
         onKeyDown={handleKeyDown}
       >
         {headers ? <HeaderStrips onSelectRange={onSelectRange} /> : null}
@@ -171,6 +172,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
             symbol={element.symbol}
             name={nameOf(element)}
             detail={detailOf?.(element)}
+            writesDetail={writesDetail}
             swatch={swatchOf(element)}
             isSelected={element.symbol === selected}
             isIncluded={isIncluded?.(element)}
@@ -199,37 +201,64 @@ function noop(): void {
   // keyboard and a screen reader still reach every element.
 }
 
+/** Narrowest the table is ever drawn; under it the type stops being readable. */
+const MIN_WIDTH = 280;
+
+/**
+ * How tall one row of elements is, as a share of the table's width.
+ *
+ * A column is about 5.4% of that width, so a cell is a seventh taller than it
+ * is wide — the proportion of a wall chart, and the room the three lines of a
+ * cell need to be written at a size a class can read.
+ */
+const ROW_HEIGHT = '6.1cqw';
+
+/** The same, in a table that writes nothing under the symbol. */
+const ROW_HEIGHT_ALONE = '4.9cqw';
+
+/** The band the two inner-transition series were lifted out across. */
+const SERIES_GAP = 'max(6px, 1.1cqw)';
+
 const rootStyle = {
   display: 'flex',
   flexDirection: 'column',
   gap: 8,
+  minWidth: MIN_WIDTH,
+  // Everything inside — the height of a row as much as the type in a cell — is
+  // a share of this box rather than of the page, so the same table reads at
+  // 280px beside a chart and fills a lecture-hall screen at twice that.
+  containerType: 'inline-size',
 } as const satisfies CSSProperties;
 
 const baseGridStyle = {
   display: 'grid',
   gap: 2,
+  minWidth: MIN_WIDTH,
   width: '100%',
-  // The cells size their type against this box rather than against the page,
-  // so the same table reads at 320px beside a chart and at 900px on its own.
-  containerType: 'inline-size',
 } as const satisfies CSSProperties;
 
-const gridStyle = {
-  ...baseGridStyle,
+/**
+ * The grid the cells are placed on.
+ * @param headers - Whether a leading column and row hold the period and group
+ * numbers.
+ * @param writesDetail - Whether a cell writes a third line, which is what a
+ * row is tall enough for.
+ * @returns The style of the grid.
+ */
+function gridStyle(headers: boolean, writesDetail: boolean): CSSProperties {
+  const row = writesDetail ? ROW_HEIGHT : ROW_HEIGHT_ALONE;
   // The eighth row is the gap the inner-transition series are lifted out into.
-  gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-  gridTemplateRows:
-    'repeat(7, minmax(0, 1fr)) 0.5rem repeat(2, minmax(0, 1fr))',
-  aspectRatio: `${String(COLUMN_COUNT)} / 9.7`,
-  minWidth: 280,
-} as const satisfies CSSProperties;
-
-const gridWithHeadersStyle = {
-  ...baseGridStyle,
-  // A leading column and a leading row hold the period and group numbers.
-  gridTemplateColumns: `1.4rem repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-  gridTemplateRows:
-    '1rem repeat(7, minmax(0, 1fr)) 0.5rem repeat(2, minmax(0, 1fr))',
-  aspectRatio: `${String(COLUMN_COUNT + 1.2)} / 10.6`,
-  minWidth: 280,
-} as const satisfies CSSProperties;
+  const rows = `repeat(7, ${row}) ${SERIES_GAP} repeat(2, ${row})`;
+  if (!headers) {
+    return {
+      ...baseGridStyle,
+      gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+      gridTemplateRows: rows,
+    };
+  }
+  return {
+    ...baseGridStyle,
+    gridTemplateColumns: `max(14px, 2.4cqw) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+    gridTemplateRows: `max(12px, 2cqw) ${rows}`,
+  };
+}

package/src/periodic/ui/PeriodicTableChrome.tsx

@@ -150,7 +150,7 @@ const headerStyle = {
   alignItems: 'center',
   color: TOKEN.textMuted,
   display: 'flex',
-  fontSize: 'clamp(0.4rem, 1.9cqw, 0.62rem)',
+  fontSize: 'max(0.45rem, 1.35cqw)',
   justifyContent: 'center',
   padding: 0,
 } as const satisfies CSSProperties;
@@ -168,6 +168,6 @@ const markerStyle = {
   borderRadius: 3,
   color: TOKEN.textMuted,
   display: 'flex',
-  fontSize: 'clamp(0.36rem, 1.7cqw, 0.55rem)',
+  fontSize: 'max(0.4rem, 1.15cqw)',
   justifyContent: 'center',
 } as const satisfies CSSProperties;

package/src/spectra/ui/NumberField.tsx

@@ -1,6 +1,6 @@
-import { InputGroup } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
-import { useState } from 'react';
+
+import { NumberInput } from '../../number/ui/NumberInput.tsx';
 
 import { HELP_STYLE, LABEL_STYLE, sizedFieldStyle } from './fieldStyles.ts';
 
@@ -35,77 +35,30 @@ interface NumberFieldProps {
 /**
  * One number of the settings.
  *
- * The box keeps what was typed rather than what parsed, because a reader
- * halfway through `1e-` has typed something no number can hold yet; clearing it
- * under them would make the field unusable. Nothing is handed up until the text
- * reads as a number, and emptying the box hands up nothing at all — which is
- * how a reader gets back to upstream's default after typing over it.
+ * Emptying the box hands up nothing at all, which is how a reader gets back to
+ * upstream's default after typing over it.
  * @param props - See {@link NumberFieldProps}.
  * @returns The labelled box.
  */
 export function NumberField(props: NumberFieldProps): ReactElement {
   const { label, value, placeholder, onChange, integer = false, help } = props;
-  const [draft, setDraft] = useState(() => ({
-    text: asText(value),
-    held: value,
-  }));
-
-  // The settings changed from somewhere else — a preset, a reset, a pasted
-  // configuration — so the box has to follow rather than hold the old text.
-  // `held` is what this box last handed up, not the prop it was rendered with:
-  // comparing against the prop would make the box's own edit look external and
-  // rewrite `-0.` as `0` under the caret before the reader reaches the digits.
-  if (draft.held !== value) setDraft({ text: asText(value), held: value });
 
   return (
     <label style={FIELD_STYLE}>
       <span style={LABEL_STYLE}>{label}</span>
-      <InputGroup
-        size="small"
+      <NumberInput
+        allowEmpty
+        buttons={false}
         fill
-        inputMode={integer ? 'numeric' : 'decimal'}
-        value={draft.text}
+        size="small"
+        value={value}
         placeholder={placeholder}
-        spellCheck={false}
-        autoComplete="off"
-        onValueChange={(text) => {
-          const parsed = read(text, integer);
-          const emptied = text.trim() === '';
-          setDraft({ text, held: emptied ? undefined : (parsed ?? value) });
-          if (emptied) {
-            onChange(undefined);
-          } else if (parsed !== undefined) {
-            onChange(parsed);
-          }
-        }}
+        integer={integer}
+        onChange={onChange}
       />
       {help === undefined ? null : <span style={HELP_STYLE}>{help}</span>}
     </label>
   );
 }
 
-/**
- * The number as the box shows it.
- * @param value - What the settings hold.
- * @returns Its text, empty when nothing is held.
- */
-function asText(value: number | undefined): string {
-  return value === undefined ? '' : String(value);
-}
-
-/**
- * The text as a number, when it reads as one.
- * @param text - What was typed.
- * @param integer - Whether only whole numbers make sense.
- * @returns The number, or undefined while the text is not one yet.
- */
-function read(text: string, integer: boolean): number | undefined {
-  const trimmed = text.trim();
-  if (trimmed === '') return undefined;
-  const parsed = Number(trimmed);
-  if (!Number.isFinite(parsed)) return undefined;
-  if (integer && !Number.isInteger(parsed)) return undefined;
-  return parsed;
-}
-
 const FIELD_STYLE = sizedFieldStyle(120);

package/src/ui.ts

@@ -16,6 +16,7 @@ export * from './help/ui/index.ts';
 export * from './hooks/ui/index.ts';
 export * from './i18n/ui/index.ts';
 export * from './language/ui/index.ts';
+export * from './number/ui/index.ts';
 export * from './overlay/ui/index.ts';
 export * from './panel/ui/index.ts';
 export * from './parallel/ui/index.ts';