react-cheminfo 0.41.0 → 0.43.0

package/src/locales/fr.json

@@ -1,6 +1,8 @@
 {
   "language.label": "Langue",
   "chrome.pages": "Pages",
+  "chrome.about": "À propos",
+  "chrome.aboutTitle": "Ce qu'est ce site, sur quoi il est bâti et comment le citer",
   "account.signIn": "Se connecter",
   "account.signOut": "Se déconnecter",
   "account.signedInAs": "Connecté comme {name}",

package/src/locales/it.json

@@ -1,6 +1,8 @@
 {
   "language.label": "Lingua",
   "chrome.pages": "Pagine",
+  "chrome.about": "Informazioni",
+  "chrome.aboutTitle": "Cosa è questo sito, su cosa si basa e come citarlo",
   "account.signIn": "Accedi",
   "account.signOut": "Esci",
   "account.signedInAs": "Accesso effettuato come {name}",

package/src/periodic/ui/ElementCell.tsx

@@ -1,6 +1,7 @@
 /**
- * One cell of the periodic table: the atomic number, the symbol, and whatever
- * the tool asked to be written under it.
+ * One cell of the periodic table: the atomic number, the symbol, whatever the
+ * tool asked to be written under it, and — when the tool asks for them — the
+ * electrons of each shell down the right-hand edge.
  *
  * 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.
@@ -10,13 +11,33 @@
  * screen — the table a class reads is the same drawing, larger.
  */
 
-import type { CSSProperties, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { useState } from 'react';
 
 import type { Swatch } from '../../color/core/interpolate.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 
-import { UNIT, ofWidth } from './unit.ts';
+import {
+  SHELLS_AIR,
+  SHELLS_COLUMN,
+  cellStyle,
+  detailStyle,
+  numberStyle,
+  shellsStyle,
+  symbolStyle,
+} from './cellStyles.ts';
+import type { DetailType } from './cellType.ts';
+import {
+  SHELLS_RESERVED,
+  SYMBOL_CAP,
+  condensedScale,
+  detailType,
+  scaleX,
+  shellFontSize,
+  symbolFontSize,
+  textWidthInEm,
+} from './cellType.ts';
+import { ofWidth } from './unit.ts';
 
 /** What {@link ElementCell} needs to draw one element. */
 export interface ElementCellProps {
@@ -39,6 +60,24 @@ export interface ElementCellProps {
    * @default '' — nothing is written
    */
   detail?: string;
+  /**
+   * The size that line is written at, from {@link detailType}, so a whole
+   * table writes it at one size rather than each cell at its own.
+   * @default the largest size this cell's own line fits at
+   */
+  detailType?: DetailType;
+  /**
+   * Electrons in each shell, innermost first, written down the right-hand
+   * edge.
+   * @default undefined — nothing is written there
+   */
+  shells?: readonly number[];
+  /**
+   * The size they are written at, so the deepest stack in the table fits its
+   * cell and every other is written to match.
+   * @default the size this cell's own stack fits at
+   */
+  shellSize?: string;
   /**
    * Whether the cell is the one the tools are pointed at.
    * @default false
@@ -78,6 +117,7 @@ export function ElementCell(props: ElementCellProps): ReactElement {
     row,
     onSelect,
     detail = '',
+    shells,
     isSelected = false,
     isIncluded = true,
     onHover,
@@ -85,6 +125,11 @@ export function ElementCell(props: ElementCellProps): ReactElement {
   const t = useChromeT();
   const [isHovered, setIsHovered] = useState(false);
 
+  const detailWidth = textWidthInEm(detail);
+  const reserved = shells === undefined ? 0 : SHELLS_RESERVED;
+  const type = props.detailType ?? detailType([detailWidth], reserved);
+  const shellSize = props.shellSize ?? shellFontSize(shells?.length ?? 0);
+
   return (
     <button
       type="button"
@@ -113,6 +158,11 @@ export function ElementCell(props: ElementCellProps): ReactElement {
         ...cellStyle,
         gridColumn: column,
         gridRow: row,
+        // The electrons stand in a column of their own, so the symbol keeps
+        // the left of the cell rather than being pushed off its centre.
+        gridTemplateColumns:
+          shells === undefined ? '1fr' : `1fr ${SHELLS_COLUMN}`,
+        columnGap: shells === undefined ? undefined : SHELLS_AIR,
         background: swatch.background,
         color: swatch.foreground,
         opacity: isIncluded ? 1 : 0.28,
@@ -132,170 +182,29 @@ export function ElementCell(props: ElementCellProps): ReactElement {
       <span
         style={{
           ...symbolStyle,
-          fontSize: symbolFontSize(symbol),
+          fontSize: symbolFontSize(symbol, SYMBOL_CAP, reserved),
         }}
       >
         {symbol}
       </span>
       {detail === '' ? null : (
-        <span style={{ ...detailStyle, fontSize: detailFontSize(detail) }}>
+        <span
+          style={{
+            ...detailStyle,
+            fontSize: type.size,
+            // Condensed rather than written smaller, so every cell of the
+            // table says its name and its value in one type.
+            transform: scaleX(condensedScale(detailWidth, type, reserved)),
+          }}
+        >
           {detail}
         </span>
       )}
+      {shells === undefined ? null : (
+        <span style={{ ...shellsStyle, fontSize: shellSize }}>
+          {shells.join('\n')}
+        </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.
- * @returns A CSS length.
- */
-function symbolFontSize(symbol: string): string {
-  return fitted(symbolWidthInEm(symbol), 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_CAP, '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((${UNIT} * ${String(CELL_SHARE)} - ${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_CAP = ofWidth(2.4);
-
-/**
- * The tallest the third line is ever written, as a share of the table.
- *
- * Close to two thirds 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_CAP = ofWidth(1.6);
-
-/**
- * The band at each end of a cell: the atomic number at the top, whatever the
- * tool writes at the bottom.
- *
- * They are one length, not two, and that is what makes the symbol between them
- * sit at the centre of the cell rather than near it — a bottom band wider than
- * the top one by a third lifted every symbol in the table two pixels.
- */
-const EDGE_BAND = ofWidth(1.8);
-
-/** How wide one column is, in per cent of the table's width. */
-const CELL_SHARE = 4.85;
-
-/** What the border and the padding of a cell take off that width. */
-const CELL_CHROME = '4px';
-
-/**
- * A cell is three bands of its own, and every cell has all three.
- *
- * The atomic number is in the top band, against its left edge; the symbol is
- * centred in the middle one; whatever the tool writes is centred in the
- * bottom one. The bands keep their height whether or not anything is written
- * in the last of them, so a number sits at one height across the whole table
- * and a symbol at one other — before this, both rode on a stack the cell
- * centred and moved whenever a neighbour's value was written smaller.
- */
-const cellStyle = {
-  border: '1px solid rgb(255 255 255 / 0.55)',
-  borderRadius: 3,
-  cursor: 'pointer',
-  display: 'grid',
-  font: 'inherit',
-  gridTemplateRows: `${EDGE_BAND} 1fr ${EDGE_BAND}`,
-  justifyItems: 'center',
-  minWidth: 0,
-  overflow: 'hidden',
-  padding: '1px',
-  transition: 'opacity 120ms ease, filter 120ms ease',
-} as const satisfies CSSProperties;
-
-const numberStyle = {
-  alignSelf: 'start',
-  fontSize: `max(0.33rem, ${ofWidth(1.1)})`,
-  fontVariantNumeric: 'tabular-nums',
-  justifySelf: 'start',
-  lineHeight: 1,
-  opacity: 0.8,
-} as const satisfies CSSProperties;
-
-const symbolStyle = {
-  alignSelf: 'center',
-  fontWeight: 700,
-  letterSpacing: '-0.02em',
-  lineHeight: 1.02,
-} as const satisfies CSSProperties;
-
-const detailStyle = {
-  alignSelf: 'center',
-  fontVariantNumeric: 'tabular-nums',
-  lineHeight: 1,
-  maxWidth: '100%',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-} as const satisfies CSSProperties;

package/src/periodic/ui/PeriodicTable.tsx

@@ -37,6 +37,13 @@ import {
   HeaderStrips,
   InnerTransitionMarkers,
 } from './PeriodicTableChrome.tsx';
+import {
+  ROW_SHARE,
+  SHELLS_RESERVED,
+  detailType,
+  shellFontSize,
+  textWidthInEm,
+} from './cellType.ts';
 import { UNIT_PROPERTY, ofWidth, unitValue } from './unit.ts';
 
 /** What {@link PeriodicTable} needs. */
@@ -68,6 +75,13 @@ export interface PeriodicTableProps {
    * @default the English name
    */
   nameOf?: (element: PeriodicElement) => string;
+  /**
+   * Electrons in each shell of an element, innermost first, written down the
+   * right-hand edge of its cell. The energy levels, which a table is also read
+   * for: none of ours knows them, so the tool that does says so here.
+   * @default undefined — no cell writes any
+   */
+  shellsOf?: (element: PeriodicElement) => readonly number[] | undefined;
   /**
    * Whether an element is inside the set the tool is showing. Everything
    * outside it is dimmed rather than removed, so the table keeps its shape.
@@ -137,6 +151,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
     swatchOf = defaultSwatchOf,
     detailOf,
     nameOf = defaultNameOf,
+    shellsOf,
     isIncluded,
     inset,
     headers = false,
@@ -184,6 +199,23 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
     onSelect(next.symbol);
   }
 
+  // One size for the whole table rather than one per cell: a column of values
+  // written at eleven sizes is read as eleven things, and a name shrunk to a
+  // third of its neighbour's is the one a class cannot make out. The size is
+  // what the widest of them fits at, and anything wider than that is condensed
+  // by the cell rather than written smaller still.
+  const placed = placedElements();
+  const widths: number[] = [];
+  let deepest = 0;
+  for (const { element } of placed) {
+    widths.push(textWidthInEm(detailOf?.(element) ?? ''));
+    const stack = shellsOf?.(element);
+    if (stack !== undefined && stack.length > deepest) deepest = stack.length;
+  }
+  const reserved = deepest === 0 ? 0 : SHELLS_RESERVED;
+  const type = detailType(widths, reserved);
+  const shellSize = shellFontSize(deepest);
+
   return (
     <div ref={rootRef} className={className} style={rootStyle}>
       <div
@@ -199,13 +231,16 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
           <div style={insetStyle(offset)}>{inset}</div>
         )}
         {markers ? <InnerTransitionMarkers offset={offset} /> : null}
-        {placedElements().map(({ element, cell }) => (
+        {placed.map(({ element, cell }) => (
           <ElementCell
             key={element.symbol}
             atomicNumber={element.atomicNumber}
             symbol={element.symbol}
             name={nameOf(element)}
             detail={detailOf?.(element)}
+            detailType={type}
+            shells={shellsOf?.(element)}
+            shellSize={shellSize}
             swatch={swatchOf(element)}
             isSelected={element.symbol === selected}
             isIncluded={isIncluded?.(element)}
@@ -270,7 +305,7 @@ const MIN_WIDTH = 280;
  * table: a cell keeps the band it writes a value in whether or not that table
  * writes one.
  */
-const ROW_HEIGHT = ofWidth(6.8);
+const ROW_HEIGHT = ofWidth(ROW_SHARE);
 
 /** The band the two inner-transition series were lifted out across. */
 const SERIES_GAP = `max(6px, ${ofWidth(1.1)})`;

package/src/periodic/ui/cellStyles.ts

@@ -0,0 +1,100 @@
+/**
+ * The three bands a cell is laid out as, and the column the electrons stand in.
+ *
+ * Kept beside the cell rather than inside it, because what they say — where the
+ * atomic number sits, how tall a band is — is read far more often than the
+ * markup that carries them.
+ */
+
+import type { CSSProperties } from 'react';
+
+import { SHELLS_GAP, SHELLS_SHARE, SHELL_LEADING } from './cellType.ts';
+import { ofWidth } from './unit.ts';
+
+/** The column the electron counts stand in, as a CSS length. */
+export const SHELLS_COLUMN = ofWidth(SHELLS_SHARE);
+
+/** The air between the symbol and that column, as a CSS length. */
+export const SHELLS_AIR = ofWidth(SHELLS_GAP);
+
+/**
+ * The band at each end of a cell: the atomic number at the top, whatever the
+ * tool writes at the bottom.
+ *
+ * They are one length, not two, and that is what makes the symbol between them
+ * sit at the centre of the cell rather than near it — a bottom band wider than
+ * the top one by a third lifted every symbol in the table two pixels.
+ */
+const EDGE_BAND = ofWidth(1.8);
+
+/**
+ * A cell is three bands of its own, and every cell has all three.
+ *
+ * The atomic number is in the top band, against its left edge; the symbol is
+ * centred in the middle one; whatever the tool writes is centred in the
+ * bottom one. The bands keep their height whether or not anything is written
+ * in the last of them, so a number sits at one height across the whole table
+ * and a symbol at one other — before this, both rode on a stack the cell
+ * centred and moved whenever a neighbour's value was written smaller.
+ */
+export const cellStyle = {
+  border: '1px solid rgb(255 255 255 / 0.55)',
+  borderRadius: 3,
+  cursor: 'pointer',
+  display: 'grid',
+  font: 'inherit',
+  gridTemplateRows: `${EDGE_BAND} 1fr ${EDGE_BAND}`,
+  justifyItems: 'center',
+  minWidth: 0,
+  overflow: 'hidden',
+  padding: '1px',
+  transition: 'opacity 120ms ease, filter 120ms ease',
+} as const satisfies CSSProperties;
+
+export const numberStyle = {
+  alignSelf: 'start',
+  gridColumn: 1,
+  gridRow: 1,
+  fontSize: `max(0.33rem, ${ofWidth(1.1)})`,
+  fontVariantNumeric: 'tabular-nums',
+  justifySelf: 'start',
+  lineHeight: 1,
+  opacity: 0.8,
+} as const satisfies CSSProperties;
+
+export const symbolStyle = {
+  alignSelf: 'center',
+  gridColumn: 1,
+  gridRow: 2,
+  fontWeight: 700,
+  letterSpacing: '-0.02em',
+  lineHeight: 1.02,
+} as const satisfies CSSProperties;
+
+export const detailStyle = {
+  alignSelf: 'center',
+  gridColumn: 1,
+  gridRow: 3,
+  fontVariantNumeric: 'tabular-nums',
+  lineHeight: 1,
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+} as const satisfies CSSProperties;
+
+/**
+ * The electrons of each shell, innermost at the top, down the right-hand edge
+ * of the whole cell: the stack is as tall as the three bands together, which
+ * is what lets seven of them be read.
+ */
+export const shellsStyle = {
+  alignSelf: 'center',
+  gridColumn: 2,
+  gridRow: '1 / span 3',
+  fontVariantNumeric: 'tabular-nums',
+  justifySelf: 'end',
+  lineHeight: SHELL_LEADING,
+  opacity: 0.85,
+  paddingInlineEnd: `max(0.5px, ${ofWidth(0.15)})`,
+  textAlign: 'right',
+  whiteSpace: 'pre-line',
+} as const satisfies CSSProperties;