react-cheminfo 0.32.0 → 0.34.0

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

package/src/ui.ts

@@ -1,4 +1,5 @@
 export * from './about/ui/index.ts';
+export * from './axis/ui/index.ts';
 export * from './capsule/ui/index.ts';
 export * from './chart/ui/index.ts';
 export * from './chrome/ui/index.ts';

package/styles/chrome.css

@@ -570,6 +570,77 @@ select,
   }
 }
 
+/* ── Help ────────────────────────────────────────────────────────────────── */
+
+/*
+  Every piece of help in the family opens as the same card, so a reader who has
+  met one on one site has met them all: the page's own surface, its border, its
+  radius and its shadow. Blueprint's navy slab is a hole in a light page, and
+  its 14px body turns an explanation into a wall — the same words at 12.5px
+  over 1.55 read as prose.
+*/
+.help-tooltip .bp6-popover-content {
+  /*
+    One measure for every card, so two opened in a row are the same shape.
+    Left to itself the popover is shrink-wrapped around its own longest line.
+  */
+  width: 300px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  box-shadow: none;
+  color: var(--text);
+  font-size: 12.5px;
+  line-height: 1.55;
+  text-wrap: pretty;
+}
+
+/*
+  Blueprint opens a tooltip by transitioning it from `scale(0.8)`, and under
+  React 19 that transition is created but never ticks: it sits at time zero for
+  as long as the card is open, so the card and its type stay at four fifths of
+  the size they were drawn at. Help opens without an animation instead.
+*/
+.help-tooltip.bp6-tooltip {
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
+  transform: scale(1);
+  transition: none;
+}
+
+/* The arrow is a corner of the same card, so it carries the same two colours. */
+.help-tooltip .bp6-popover-arrow-fill {
+  fill: var(--surface);
+}
+
+.help-tooltip .bp6-popover-arrow-border {
+  fill: var(--border);
+  fill-opacity: 1;
+}
+
+.help-tooltip .bp6-popover-arrow::before {
+  box-shadow: none;
+}
+
+.help-tooltip .help-body a {
+  color: var(--accent);
+}
+
+/*
+  The glyph that opens it. How it sits in its row is the site's business — it
+  follows a label on one and a heading on another — so only its ink is set
+  here.
+*/
+.help-icon {
+  color: var(--text-faint);
+  cursor: help;
+}
+
+.help-icon:hover {
+  color: var(--accent);
+}
+
 /* ── Printing ────────────────────────────────────────────────────────────── */
 
 /* Students print the cheatsheet. Let them, without the chrome. */