react-cheminfo 0.47.0 → 0.48.0

package/src/locales/de.json

@@ -505,5 +505,59 @@
   "range.noLowerBound": "{label}: keine Untergrenze",
   "range.noUpperBound": "{label}: keine Obergrenze",
   "range.typeValue": "Klicken, um einen Wert einzugeben",
-  "range.clear": "{label} zurücksetzen"
+  "range.clear": "{label} zurücksetzen",
+  "taxonomy.lineage": "Abstammungslinie",
+  "taxonomy.rankNote": "({rank})",
+  "taxonomy.ncbi": "NCBI Taxonomy",
+  "taxonomy.ncbiTitle": "{name} im NCBI-Taxonomy-Browser öffnen",
+  "taxonomy.rank.realm": "Realm",
+  "taxonomy.rank.domain": "Domäne",
+  "taxonomy.rank.superkingdom": "Überreich",
+  "taxonomy.rank.kingdom": "Reich",
+  "taxonomy.rank.subkingdom": "Unterreich",
+  "taxonomy.rank.superphylum": "Überphylum",
+  "taxonomy.rank.phylum": "Phylum",
+  "taxonomy.rank.subphylum": "Subphylum",
+  "taxonomy.rank.superclass": "Überklasse",
+  "taxonomy.rank.class": "Klasse",
+  "taxonomy.rank.subclass": "Unterklasse",
+  "taxonomy.rank.infraclass": "Teilklasse",
+  "taxonomy.rank.cohort": "Kohorte",
+  "taxonomy.rank.subcohort": "Unterkohorte",
+  "taxonomy.rank.superorder": "Überordnung",
+  "taxonomy.rank.order": "Ordnung",
+  "taxonomy.rank.suborder": "Unterordnung",
+  "taxonomy.rank.infraorder": "Teilordnung",
+  "taxonomy.rank.parvorder": "Kleinordnung",
+  "taxonomy.rank.superfamily": "Überfamilie",
+  "taxonomy.rank.family": "Familie",
+  "taxonomy.rank.subfamily": "Unterfamilie",
+  "taxonomy.rank.tribe": "Tribus",
+  "taxonomy.rank.subtribe": "Subtribus",
+  "taxonomy.rank.genus": "Gattung",
+  "taxonomy.rank.subgenus": "Untergattung",
+  "taxonomy.rank.section": "Sektion",
+  "taxonomy.rank.subsection": "Untersektion",
+  "taxonomy.rank.series": "Serie",
+  "taxonomy.rank.subseries": "Unterserie",
+  "taxonomy.rank.speciesGroup": "Artengruppe",
+  "taxonomy.rank.speciesSubgroup": "Artenuntergruppe",
+  "taxonomy.rank.species": "Art",
+  "taxonomy.rank.formaSpecialis": "Forma specialis",
+  "taxonomy.rank.subspecies": "Unterart",
+  "taxonomy.rank.varietas": "Varietät",
+  "taxonomy.rank.subvariety": "Subvarietät",
+  "taxonomy.rank.forma": "Form",
+  "taxonomy.rank.pathogroup": "Pathogruppe",
+  "taxonomy.rank.serogroup": "Serogruppe",
+  "taxonomy.rank.serotype": "Serotyp",
+  "taxonomy.rank.biotype": "Biotyp",
+  "taxonomy.rank.genotype": "Genotyp",
+  "taxonomy.rank.morph": "Morphe",
+  "taxonomy.rank.strain": "Stamm",
+  "taxonomy.rank.isolate": "Isolat",
+  "taxonomy.rank.noRank": "ohne Rang",
+  "taxonomy.rank.clade": "Klade",
+  "taxonomy.rank.cellularRoot": "zelluläre Wurzel",
+  "taxonomy.rank.acellularRoot": "azelluläre Wurzel"
 }

package/src/locales/en.json

@@ -505,5 +505,59 @@
   "range.noLowerBound": "{label}: no lower bound",
   "range.noUpperBound": "{label}: no upper bound",
   "range.typeValue": "Click to type a value",
-  "range.clear": "Clear {label}"
+  "range.clear": "Clear {label}",
+  "taxonomy.lineage": "Lineage",
+  "taxonomy.rankNote": "({rank})",
+  "taxonomy.ncbi": "NCBI Taxonomy",
+  "taxonomy.ncbiTitle": "Open {name} in the NCBI Taxonomy Browser",
+  "taxonomy.rank.realm": "realm",
+  "taxonomy.rank.domain": "domain",
+  "taxonomy.rank.superkingdom": "superkingdom",
+  "taxonomy.rank.kingdom": "kingdom",
+  "taxonomy.rank.subkingdom": "subkingdom",
+  "taxonomy.rank.superphylum": "superphylum",
+  "taxonomy.rank.phylum": "phylum",
+  "taxonomy.rank.subphylum": "subphylum",
+  "taxonomy.rank.superclass": "superclass",
+  "taxonomy.rank.class": "class",
+  "taxonomy.rank.subclass": "subclass",
+  "taxonomy.rank.infraclass": "infraclass",
+  "taxonomy.rank.cohort": "cohort",
+  "taxonomy.rank.subcohort": "subcohort",
+  "taxonomy.rank.superorder": "superorder",
+  "taxonomy.rank.order": "order",
+  "taxonomy.rank.suborder": "suborder",
+  "taxonomy.rank.infraorder": "infraorder",
+  "taxonomy.rank.parvorder": "parvorder",
+  "taxonomy.rank.superfamily": "superfamily",
+  "taxonomy.rank.family": "family",
+  "taxonomy.rank.subfamily": "subfamily",
+  "taxonomy.rank.tribe": "tribe",
+  "taxonomy.rank.subtribe": "subtribe",
+  "taxonomy.rank.genus": "genus",
+  "taxonomy.rank.subgenus": "subgenus",
+  "taxonomy.rank.section": "section",
+  "taxonomy.rank.subsection": "subsection",
+  "taxonomy.rank.series": "series",
+  "taxonomy.rank.subseries": "subseries",
+  "taxonomy.rank.speciesGroup": "species group",
+  "taxonomy.rank.speciesSubgroup": "species subgroup",
+  "taxonomy.rank.species": "species",
+  "taxonomy.rank.formaSpecialis": "forma specialis",
+  "taxonomy.rank.subspecies": "subspecies",
+  "taxonomy.rank.varietas": "variety",
+  "taxonomy.rank.subvariety": "subvariety",
+  "taxonomy.rank.forma": "form",
+  "taxonomy.rank.pathogroup": "pathogroup",
+  "taxonomy.rank.serogroup": "serogroup",
+  "taxonomy.rank.serotype": "serotype",
+  "taxonomy.rank.biotype": "biotype",
+  "taxonomy.rank.genotype": "genotype",
+  "taxonomy.rank.morph": "morph",
+  "taxonomy.rank.strain": "strain",
+  "taxonomy.rank.isolate": "isolate",
+  "taxonomy.rank.noRank": "no rank",
+  "taxonomy.rank.clade": "clade",
+  "taxonomy.rank.cellularRoot": "cellular root",
+  "taxonomy.rank.acellularRoot": "acellular root"
 }

package/src/locales/es.json

@@ -505,5 +505,59 @@
   "range.noLowerBound": "{label}: sin límite inferior",
   "range.noUpperBound": "{label}: sin límite superior",
   "range.typeValue": "Haga clic para escribir un valor",
-  "range.clear": "Borrar {label}"
+  "range.clear": "Borrar {label}",
+  "taxonomy.lineage": "Linaje",
+  "taxonomy.rankNote": "({rank})",
+  "taxonomy.ncbi": "NCBI Taxonomy",
+  "taxonomy.ncbiTitle": "Abrir {name} en el navegador NCBI Taxonomy",
+  "taxonomy.rank.realm": "dominio viral",
+  "taxonomy.rank.domain": "dominio",
+  "taxonomy.rank.superkingdom": "superreino",
+  "taxonomy.rank.kingdom": "reino",
+  "taxonomy.rank.subkingdom": "subreino",
+  "taxonomy.rank.superphylum": "superfilo",
+  "taxonomy.rank.phylum": "filo",
+  "taxonomy.rank.subphylum": "subfilo",
+  "taxonomy.rank.superclass": "superclase",
+  "taxonomy.rank.class": "clase",
+  "taxonomy.rank.subclass": "subclase",
+  "taxonomy.rank.infraclass": "infraclase",
+  "taxonomy.rank.cohort": "cohorte",
+  "taxonomy.rank.subcohort": "subcohorte",
+  "taxonomy.rank.superorder": "superorden",
+  "taxonomy.rank.order": "orden",
+  "taxonomy.rank.suborder": "suborden",
+  "taxonomy.rank.infraorder": "infraorden",
+  "taxonomy.rank.parvorder": "parvorden",
+  "taxonomy.rank.superfamily": "superfamilia",
+  "taxonomy.rank.family": "familia",
+  "taxonomy.rank.subfamily": "subfamilia",
+  "taxonomy.rank.tribe": "tribu",
+  "taxonomy.rank.subtribe": "subtribu",
+  "taxonomy.rank.genus": "género",
+  "taxonomy.rank.subgenus": "subgénero",
+  "taxonomy.rank.section": "sección",
+  "taxonomy.rank.subsection": "subsección",
+  "taxonomy.rank.series": "serie",
+  "taxonomy.rank.subseries": "subserie",
+  "taxonomy.rank.speciesGroup": "grupo de especies",
+  "taxonomy.rank.speciesSubgroup": "subgrupo de especies",
+  "taxonomy.rank.species": "especie",
+  "taxonomy.rank.formaSpecialis": "forma specialis",
+  "taxonomy.rank.subspecies": "subespecie",
+  "taxonomy.rank.varietas": "variedad",
+  "taxonomy.rank.subvariety": "subvariedad",
+  "taxonomy.rank.forma": "forma",
+  "taxonomy.rank.pathogroup": "patogrupo",
+  "taxonomy.rank.serogroup": "serogrupo",
+  "taxonomy.rank.serotype": "serotipo",
+  "taxonomy.rank.biotype": "biotipo",
+  "taxonomy.rank.genotype": "genotipo",
+  "taxonomy.rank.morph": "morfo",
+  "taxonomy.rank.strain": "cepa",
+  "taxonomy.rank.isolate": "aislado",
+  "taxonomy.rank.noRank": "sin rango",
+  "taxonomy.rank.clade": "clado",
+  "taxonomy.rank.cellularRoot": "raíz celular",
+  "taxonomy.rank.acellularRoot": "raíz acelular"
 }

package/src/locales/fr.json

@@ -505,5 +505,59 @@
   "range.noLowerBound": "{label} : pas de borne inférieure",
   "range.noUpperBound": "{label} : pas de borne supérieure",
   "range.typeValue": "Cliquer pour saisir une valeur",
-  "range.clear": "Effacer {label}"
+  "range.clear": "Effacer {label}",
+  "taxonomy.lineage": "Lignée",
+  "taxonomy.rankNote": "({rank})",
+  "taxonomy.ncbi": "NCBI Taxonomy",
+  "taxonomy.ncbiTitle": "Ouvrir {name} dans le navigateur NCBI Taxonomy",
+  "taxonomy.rank.realm": "domaine viral",
+  "taxonomy.rank.domain": "domaine",
+  "taxonomy.rank.superkingdom": "superrègne",
+  "taxonomy.rank.kingdom": "règne",
+  "taxonomy.rank.subkingdom": "sous-règne",
+  "taxonomy.rank.superphylum": "super-embranchement",
+  "taxonomy.rank.phylum": "embranchement",
+  "taxonomy.rank.subphylum": "sous-embranchement",
+  "taxonomy.rank.superclass": "super-classe",
+  "taxonomy.rank.class": "classe",
+  "taxonomy.rank.subclass": "sous-classe",
+  "taxonomy.rank.infraclass": "infra-classe",
+  "taxonomy.rank.cohort": "cohorte",
+  "taxonomy.rank.subcohort": "sous-cohorte",
+  "taxonomy.rank.superorder": "super-ordre",
+  "taxonomy.rank.order": "ordre",
+  "taxonomy.rank.suborder": "sous-ordre",
+  "taxonomy.rank.infraorder": "infra-ordre",
+  "taxonomy.rank.parvorder": "micro-ordre",
+  "taxonomy.rank.superfamily": "super-famille",
+  "taxonomy.rank.family": "famille",
+  "taxonomy.rank.subfamily": "sous-famille",
+  "taxonomy.rank.tribe": "tribu",
+  "taxonomy.rank.subtribe": "sous-tribu",
+  "taxonomy.rank.genus": "genre",
+  "taxonomy.rank.subgenus": "sous-genre",
+  "taxonomy.rank.section": "section",
+  "taxonomy.rank.subsection": "sous-section",
+  "taxonomy.rank.series": "série",
+  "taxonomy.rank.subseries": "sous-série",
+  "taxonomy.rank.speciesGroup": "groupe d’espèces",
+  "taxonomy.rank.speciesSubgroup": "sous-groupe d’espèces",
+  "taxonomy.rank.species": "espèce",
+  "taxonomy.rank.formaSpecialis": "forma specialis",
+  "taxonomy.rank.subspecies": "sous-espèce",
+  "taxonomy.rank.varietas": "variété",
+  "taxonomy.rank.subvariety": "sous-variété",
+  "taxonomy.rank.forma": "forme",
+  "taxonomy.rank.pathogroup": "pathogroupe",
+  "taxonomy.rank.serogroup": "sérogroupe",
+  "taxonomy.rank.serotype": "sérotype",
+  "taxonomy.rank.biotype": "biotype",
+  "taxonomy.rank.genotype": "génotype",
+  "taxonomy.rank.morph": "morphe",
+  "taxonomy.rank.strain": "souche",
+  "taxonomy.rank.isolate": "isolat",
+  "taxonomy.rank.noRank": "sans rang",
+  "taxonomy.rank.clade": "clade",
+  "taxonomy.rank.cellularRoot": "racine cellulaire",
+  "taxonomy.rank.acellularRoot": "racine acellulaire"
 }

package/src/locales/it.json

@@ -505,5 +505,59 @@
   "range.noLowerBound": "{label}: nessun limite inferiore",
   "range.noUpperBound": "{label}: nessun limite superiore",
   "range.typeValue": "Fai clic per inserire un valore",
-  "range.clear": "Cancella {label}"
+  "range.clear": "Cancella {label}",
+  "taxonomy.lineage": "Lignaggio",
+  "taxonomy.rankNote": "({rank})",
+  "taxonomy.ncbi": "NCBI Taxonomy",
+  "taxonomy.ncbiTitle": "Apri {name} nel browser NCBI Taxonomy",
+  "taxonomy.rank.realm": "dominio virale",
+  "taxonomy.rank.domain": "dominio",
+  "taxonomy.rank.superkingdom": "superregno",
+  "taxonomy.rank.kingdom": "regno",
+  "taxonomy.rank.subkingdom": "sottoregno",
+  "taxonomy.rank.superphylum": "superphylum",
+  "taxonomy.rank.phylum": "phylum",
+  "taxonomy.rank.subphylum": "subphylum",
+  "taxonomy.rank.superclass": "superclasse",
+  "taxonomy.rank.class": "classe",
+  "taxonomy.rank.subclass": "sottoclasse",
+  "taxonomy.rank.infraclass": "infraclasse",
+  "taxonomy.rank.cohort": "coorte",
+  "taxonomy.rank.subcohort": "sottocoorte",
+  "taxonomy.rank.superorder": "superordine",
+  "taxonomy.rank.order": "ordine",
+  "taxonomy.rank.suborder": "sottordine",
+  "taxonomy.rank.infraorder": "infraordine",
+  "taxonomy.rank.parvorder": "parvordine",
+  "taxonomy.rank.superfamily": "superfamiglia",
+  "taxonomy.rank.family": "famiglia",
+  "taxonomy.rank.subfamily": "sottofamiglia",
+  "taxonomy.rank.tribe": "tribù",
+  "taxonomy.rank.subtribe": "sottotribù",
+  "taxonomy.rank.genus": "genere",
+  "taxonomy.rank.subgenus": "sottogenere",
+  "taxonomy.rank.section": "sezione",
+  "taxonomy.rank.subsection": "sottosezione",
+  "taxonomy.rank.series": "serie",
+  "taxonomy.rank.subseries": "sottoserie",
+  "taxonomy.rank.speciesGroup": "gruppo di specie",
+  "taxonomy.rank.speciesSubgroup": "sottogruppo di specie",
+  "taxonomy.rank.species": "specie",
+  "taxonomy.rank.formaSpecialis": "forma specialis",
+  "taxonomy.rank.subspecies": "sottospecie",
+  "taxonomy.rank.varietas": "varietà",
+  "taxonomy.rank.subvariety": "sottovarietà",
+  "taxonomy.rank.forma": "forma",
+  "taxonomy.rank.pathogroup": "patogruppo",
+  "taxonomy.rank.serogroup": "sierogruppo",
+  "taxonomy.rank.serotype": "sierotipo",
+  "taxonomy.rank.biotype": "biotipo",
+  "taxonomy.rank.genotype": "genotipo",
+  "taxonomy.rank.morph": "morfo",
+  "taxonomy.rank.strain": "ceppo",
+  "taxonomy.rank.isolate": "isolato",
+  "taxonomy.rank.noRank": "senza rango",
+  "taxonomy.rank.clade": "clade",
+  "taxonomy.rank.cellularRoot": "radice cellulare",
+  "taxonomy.rank.acellularRoot": "radice acellulare"
 }

package/src/periodic/ui/PeriodicTable.tsx

@@ -10,12 +10,7 @@
  * a site's own richer element record never has to cross into this component.
  */
 
-import type {
-  CSSProperties,
-  KeyboardEvent,
-  ReactElement,
-  ReactNode,
-} from 'react';
+import type { KeyboardEvent, ReactElement } from 'react';
 import { useEffect, useRef } from 'react';
 
 import type { Swatch } from '../../color/core/interpolate.ts';
@@ -23,13 +18,8 @@ import { useResizeObserver } from '../../hooks/ui/useResizeObserver.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import { categorySwatch } from '../core/categories.ts';
 import type { PeriodicElement } from '../core/elements.ts';
-import type { ElementPick, ElementRange } from '../core/layout.ts';
-import {
-  COLUMN_COUNT,
-  EMPTY_BLOCK,
-  elementByArrowKey,
-  placedElements,
-} from '../core/layout.ts';
+import type { ElementPick } from '../core/layout.ts';
+import { elementByArrowKey, placedElements } from '../core/layout.ts';
 
 import { CategoryLegend } from './CategoryLegend.tsx';
 import { ElementCell } from './ElementCell.tsx';
@@ -38,117 +28,16 @@ import {
   InnerTransitionMarkers,
 } from './PeriodicTableChrome.tsx';
 import {
-  ROW_SHARE,
   SHELLS_RESERVED,
   detailType,
   shellFontSize,
   textWidthInEm,
 } from './cellType.ts';
-import { UNIT_PROPERTY, ofWidth, unitValue } from './unit.ts';
+import type { PeriodicTableProps } from './periodicTableProps.ts';
+import { gridStyle, insetStyle, rootStyle } from './tableLayout.ts';
+import { UNIT_PROPERTY, unitValue } from './unit.ts';
 
-/** What {@link PeriodicTable} needs. */
-export interface PeriodicTableProps {
-  /**
-   * Symbol of the element the tools are pointed at.
-   * @default undefined — none is
-   */
-  selected?: string;
-  /**
-   * Called with the symbol of the element that was clicked, and by the arrow
-   * keys. The pick says whether the click was additive — Cmd or Ctrl held — so
-   * a tool whose plain click already reads one element into a card can let the
-   * same table build a set of them.
-   * @default undefined — the table is a figure rather than a control
-   */
-  onSelect?: (symbol: string, pick: ElementPick) => void;
-  /**
-   * The colour each cell takes.
-   * @default the family colour
-   */
-  swatchOf?: (element: PeriodicElement) => Swatch;
-  /**
-   * What is written under the symbol; an empty string writes nothing.
-   * @default nothing is written
-   */
-  detailOf?: (element: PeriodicElement) => string;
-  /**
-   * How an element is named, for the label a screen reader reads. The hook a
-   * site translating the table writes its own names through.
-   * @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.
-   * @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
-   */
-  headers?: boolean;
-  /**
-   * Called when a whole group or period header is clicked. The run says
-   * whether the click was additive — Cmd or Ctrl held — so a tool can let a
-   * reader put two periods on one chart. Without it the strips are labels
-   * rather than buttons.
-   * @default undefined
-   */
-  onSelectRange?: (range: ElementRange) => void;
-  /**
-   * Called when the corner where the two header strips meet is clicked, which
-   * is how a reader takes the whole table back. Without it the corner stays
-   * empty.
-   * @default undefined
-   */
-  onSelectAll?: () => void;
-  /**
-   * Whether to draw the family legend under the grid.
-   * @default false
-   */
-  legend?: boolean;
-  /**
-   * Whether the dashed markers stand where the two inner-transition series were
-   * lifted out of the main block.
-   * @default true
-   */
-  markers?: boolean;
-  /**
-   * Whether the arrow keys walk the grid: down from carbon is silicon, and
-   * right from the end of a period is the start of the next.
-   * @default true
-   */
-  keyboard?: boolean;
-  /**
-   * Called on pointer enter with the symbol, and on leave with `null`.
-   * @default undefined
-   */
-  onHover?: (symbol: string | null) => void;
-  /**
-   * Class of the outermost element.
-   * @default undefined
-   */
-  className?: string;
-}
+export type { PeriodicTableProps } from './periodicTableProps.ts';
 
 /**
  * The 118 elements, laid out as the table.
@@ -229,7 +118,15 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   const shellSize = shellFontSize(deepest);
 
   return (
-    <div ref={rootRef} className={className} style={rootStyle}>
+    <div
+      ref={rootRef}
+      className={className}
+      // Drawn in HTML so every cell is a button, and saved by being painted
+      // from where the browser put it: a site saves the table by pointing
+      // `FigureDownload` at any box around it.
+      data-figure="html"
+      style={rootStyle}
+    >
       <div
         ref={gridRef}
         role="grid"
@@ -273,30 +170,6 @@ 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',
-    // A column of air on each side, so the writing reads as sitting in the
-    // block rather than as running into the cells beside it.
-    padding: `0 ${ofWidth(2.4)}`,
-    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, ${ofWidth(1.8)})`,
-    lineHeight: 1.35,
-    minWidth: 0,
-    overflow: 'hidden',
-  };
-}
-
 function defaultSwatchOf(element: PeriodicElement): Swatch {
   return categorySwatch(element.category);
 }
@@ -312,64 +185,3 @@ function noop(): void {
   // A table with no `onSelect` is a figure; its cells stay buttons so the
   // 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.2% of that width, so a cell is a third taller than it is
- * wide — the proportion of a wall chart, and the room the three bands of a
- * cell need to be read from the back of a room. It is the same height in every
- * table: a cell keeps the band it writes a value in whether or not that table
- * writes one.
- */
-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)})`;
-
-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. The
-  // share is measured (see `unit.ts`); the container is what the `1cqw`
-  // fallback and a site's own `@container` rules are answered by, and it keeps
-  // this box's width independent of what is written inside it.
-  containerType: 'inline-size',
-} as const satisfies CSSProperties;
-
-const baseGridStyle = {
-  display: 'grid',
-  gap: 2,
-  minWidth: MIN_WIDTH,
-  width: '100%',
-} as const satisfies CSSProperties;
-
-/**
- * The grid the cells are placed on.
- * @param headers - Whether a leading column and row hold the period and group
- * numbers.
- * @returns The style of the grid.
- */
-function gridStyle(headers: boolean): CSSProperties {
-  // The eighth row is the gap the inner-transition series are lifted out into.
-  const rows = `repeat(7, ${ROW_HEIGHT}) ${SERIES_GAP} repeat(2, ${ROW_HEIGHT})`;
-  if (!headers) {
-    return {
-      ...baseGridStyle,
-      gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-      gridTemplateRows: rows,
-    };
-  }
-  return {
-    ...baseGridStyle,
-    gridTemplateColumns: `max(14px, ${ofWidth(2.4)}) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-    gridTemplateRows: `max(12px, ${ofWidth(2)}) ${rows}`,
-  };
-}

package/src/periodic/ui/PeriodicTableChrome.tsx

@@ -14,6 +14,8 @@ import {
   INNER_TRANSITION_ROWS,
 } from '../core/layout.ts';
 
+import { SelectAllCorner } from './SelectAllCorner.tsx';
+import { headerButtonStyle, headerStyle } from './headerStyles.ts';
 import { ofWidth } from './unit.ts';
 
 /** What {@link HeaderStrips} needs. */
@@ -95,15 +97,8 @@ export function HeaderStrips(props: HeaderStripsProps): ReactElement {
   return (
     <>
       {onSelectAll === undefined ? null : (
-        <HeaderCell
-          // The glyph points into the grid it takes, as a spreadsheet's does.
-          // It is a mark rather than a word because the corner is a
-          // seventeenth of the table's width, and the word differs in every
-          // language the chrome speaks.
-          label="◢"
+        <SelectAllCorner
           title={t('periodic.allElements')}
-          column={1}
-          row={1}
           onClick={onSelectAll}
         />
       )}
@@ -191,22 +186,6 @@ function HeaderCell(props: HeaderCellProps): ReactElement {
   );
 }
 
-const headerStyle = {
-  alignItems: 'center',
-  color: TOKEN.textMuted,
-  display: 'flex',
-  fontSize: `max(0.45rem, ${ofWidth(1.35)})`,
-  justifyContent: 'center',
-  padding: 0,
-} as const satisfies CSSProperties;
-
-const headerButtonStyle = {
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  font: 'inherit',
-} as const satisfies CSSProperties;
-
 const markerStyle = {
   alignItems: 'center',
   border: `1px dashed ${TOKEN.borderStrong}`,