react-cheminfo 0.6.0 → 0.8.0

package/src/periodic/core/categories.ts

@@ -0,0 +1,83 @@
+/**
+ * What each family is called, and the colour it takes.
+ *
+ * Ten hues that stay distinguishable under deuteranopia and protanopia, and
+ * that keep the metals warm and the non-metals cool the way a wall chart does.
+ * Each is paired at load with the ink that stays readable on it, so a cell
+ * never has to compute a contrast while it renders.
+ */
+
+import { readableInk } from '../../color/core/contrast.ts';
+import type { Swatch } from '../../color/core/scale.ts';
+
+import type { ElementCategory } from './elements.ts';
+
+/** Families in the order a legend lists them, which is the order of the table. */
+export const CATEGORY_ORDER: readonly ElementCategory[] = [
+  'alkali-metal',
+  'alkaline-earth-metal',
+  'transition-metal',
+  'post-transition-metal',
+  'metalloid',
+  'nonmetal',
+  'halogen',
+  'noble-gas',
+  'lanthanoid',
+  'actinoid',
+];
+
+/** What each family is called in a legend. */
+export const CATEGORY_LABELS: Record<ElementCategory, string> = {
+  'alkali-metal': 'Alkali metal',
+  'alkaline-earth-metal': 'Alkaline earth',
+  'transition-metal': 'Transition metal',
+  'post-transition-metal': 'Post-transition',
+  metalloid: 'Metalloid',
+  nonmetal: 'Non-metal',
+  halogen: 'Halogen',
+  'noble-gas': 'Noble gas',
+  lanthanoid: 'Lanthanoid',
+  actinoid: 'Actinoid',
+};
+
+const CATEGORY_BACKGROUNDS: Record<ElementCategory, string> = {
+  'alkali-metal': '#f4a58a',
+  'alkaline-earth-metal': '#f6c98a',
+  'transition-metal': '#e8b7d4',
+  'post-transition-metal': '#c8c3ea',
+  metalloid: '#c9d67c',
+  nonmetal: '#7fd4a8',
+  halogen: '#8fd9d2',
+  'noble-gas': '#9ec9f0',
+  lanthanoid: '#f2d06b',
+  actinoid: '#e5a3a3',
+};
+
+/** The colour of each family, with the ink that stays readable on it. */
+export const CATEGORY_SWATCHES: Record<ElementCategory, Swatch> =
+  Object.fromEntries(
+    CATEGORY_ORDER.map((category) => [
+      category,
+      {
+        background: CATEGORY_BACKGROUNDS[category],
+        foreground: readableInk(CATEGORY_BACKGROUNDS[category]),
+      },
+    ]),
+  ) as Record<ElementCategory, Swatch>;
+
+const UNKNOWN_BACKGROUND = '#e4e8ee';
+
+/** Shown for a cell whose family is unknown. */
+export const UNKNOWN_SWATCH: Swatch = {
+  background: UNKNOWN_BACKGROUND,
+  foreground: readableInk(UNKNOWN_BACKGROUND),
+};
+
+/**
+ * The swatch of one family.
+ * @param category - Family to look up.
+ * @returns Its colour and the ink to write on it.
+ */
+export function categorySwatch(category: ElementCategory): Swatch {
+  return CATEGORY_SWATCHES[category] ?? UNKNOWN_SWATCH;
+}

package/src/periodic/core/elements.ts

@@ -0,0 +1,217 @@
+/**
+ * Where every element sits in the table, and which family it belongs to.
+ *
+ * Deliberately the *position* and nothing else: the masses, the isotopes and
+ * the exact monoisotopic masses are `chemical-elements`' subject, and a site
+ * that needs them reads them from there. Importing that package pulls its whole
+ * isotope table, which a site wanting only an element picker must not be made
+ * to carry — so the symbols and names are repeated here, and a test asserts
+ * they still agree with it.
+ *
+ * `block` follows the element's *position* in the table, which is what a
+ * student reads off it. The configuration is the authority on which subshell is
+ * actually filling, and the two disagree for a handful of elements — lanthanum
+ * fills 5d, not 4f. See `ELEMENT_ANOMALIES` in the orbital module.
+ */
+
+/** Region of the table an element sits in. */
+export type ElementBlock = 's' | 'p' | 'd' | 'f';
+
+/** Coarse family, used to colour the table. */
+export type ElementCategory =
+  | 'alkali-metal'
+  | 'alkaline-earth-metal'
+  | 'transition-metal'
+  | 'post-transition-metal'
+  | 'metalloid'
+  | 'nonmetal'
+  | 'halogen'
+  | 'noble-gas'
+  | 'lanthanoid'
+  | 'actinoid';
+
+/** One element, as the table places it. */
+export interface PeriodicElement {
+  /** Proton count, 1 to 118. */
+  atomicNumber: number;
+  /** Chemical symbol, e.g. `Fe`. */
+  symbol: string;
+  /** English name, spelled as `chemical-elements` spells it. */
+  name: string;
+  /** Row of the table, 1 to 7. */
+  period: number;
+  /** IUPAC column 1 to 18; `null` for the lanthanoids and the actinoids. */
+  group: number | null;
+  block: ElementBlock;
+  category: ElementCategory;
+}
+
+/** `[symbol, name, period, group, category]`; atomic number is the position. */
+type ElementRow = [string, string, number, number | null, ElementCategory];
+
+const ROWS: ElementRow[] = [
+  ['H', 'Hydrogen', 1, 1, 'nonmetal'],
+  ['He', 'Helium', 1, 18, 'noble-gas'],
+  ['Li', 'Lithium', 2, 1, 'alkali-metal'],
+  ['Be', 'Beryllium', 2, 2, 'alkaline-earth-metal'],
+  ['B', 'Boron', 2, 13, 'metalloid'],
+  ['C', 'Carbon', 2, 14, 'nonmetal'],
+  ['N', 'Nitrogen', 2, 15, 'nonmetal'],
+  ['O', 'Oxygen', 2, 16, 'nonmetal'],
+  ['F', 'Fluorine', 2, 17, 'halogen'],
+  ['Ne', 'Neon', 2, 18, 'noble-gas'],
+  ['Na', 'Sodium', 3, 1, 'alkali-metal'],
+  ['Mg', 'Magnesium', 3, 2, 'alkaline-earth-metal'],
+  ['Al', 'Aluminium', 3, 13, 'post-transition-metal'],
+  ['Si', 'Silicon', 3, 14, 'metalloid'],
+  ['P', 'Phosphorus', 3, 15, 'nonmetal'],
+  ['S', 'Sulfur', 3, 16, 'nonmetal'],
+  ['Cl', 'Chlorine', 3, 17, 'halogen'],
+  ['Ar', 'Argon', 3, 18, 'noble-gas'],
+  ['K', 'Potassium', 4, 1, 'alkali-metal'],
+  ['Ca', 'Calcium', 4, 2, 'alkaline-earth-metal'],
+  ['Sc', 'Scandium', 4, 3, 'transition-metal'],
+  ['Ti', 'Titanium', 4, 4, 'transition-metal'],
+  ['V', 'Vanadium', 4, 5, 'transition-metal'],
+  ['Cr', 'Chromium', 4, 6, 'transition-metal'],
+  ['Mn', 'Manganese', 4, 7, 'transition-metal'],
+  ['Fe', 'Iron', 4, 8, 'transition-metal'],
+  ['Co', 'Cobalt', 4, 9, 'transition-metal'],
+  ['Ni', 'Nickel', 4, 10, 'transition-metal'],
+  ['Cu', 'Copper', 4, 11, 'transition-metal'],
+  ['Zn', 'Zinc', 4, 12, 'transition-metal'],
+  ['Ga', 'Gallium', 4, 13, 'post-transition-metal'],
+  ['Ge', 'Germanium', 4, 14, 'metalloid'],
+  ['As', 'Arsenic', 4, 15, 'metalloid'],
+  ['Se', 'Selenium', 4, 16, 'nonmetal'],
+  ['Br', 'Bromine', 4, 17, 'halogen'],
+  ['Kr', 'Krypton', 4, 18, 'noble-gas'],
+  ['Rb', 'Rubidium', 5, 1, 'alkali-metal'],
+  ['Sr', 'Strontium', 5, 2, 'alkaline-earth-metal'],
+  ['Y', 'Yttrium', 5, 3, 'transition-metal'],
+  ['Zr', 'Zirconium', 5, 4, 'transition-metal'],
+  ['Nb', 'Niobium', 5, 5, 'transition-metal'],
+  ['Mo', 'Molybdenum', 5, 6, 'transition-metal'],
+  ['Tc', 'Technetium', 5, 7, 'transition-metal'],
+  ['Ru', 'Ruthenium', 5, 8, 'transition-metal'],
+  ['Rh', 'Rhodium', 5, 9, 'transition-metal'],
+  ['Pd', 'Palladium', 5, 10, 'transition-metal'],
+  ['Ag', 'Silver', 5, 11, 'transition-metal'],
+  ['Cd', 'Cadmium', 5, 12, 'transition-metal'],
+  ['In', 'Indium', 5, 13, 'post-transition-metal'],
+  ['Sn', 'Tin', 5, 14, 'post-transition-metal'],
+  ['Sb', 'Antimony', 5, 15, 'metalloid'],
+  ['Te', 'Tellurium', 5, 16, 'metalloid'],
+  ['I', 'Iodine', 5, 17, 'halogen'],
+  ['Xe', 'Xenon', 5, 18, 'noble-gas'],
+  ['Cs', 'Caesium', 6, 1, 'alkali-metal'],
+  ['Ba', 'Barium', 6, 2, 'alkaline-earth-metal'],
+  ['La', 'Lanthanum', 6, null, 'lanthanoid'],
+  ['Ce', 'Cerium', 6, null, 'lanthanoid'],
+  ['Pr', 'Praseodymium', 6, null, 'lanthanoid'],
+  ['Nd', 'Neodymium', 6, null, 'lanthanoid'],
+  ['Pm', 'Promethium', 6, null, 'lanthanoid'],
+  ['Sm', 'Samarium', 6, null, 'lanthanoid'],
+  ['Eu', 'Europium', 6, null, 'lanthanoid'],
+  ['Gd', 'Gadolinium', 6, null, 'lanthanoid'],
+  ['Tb', 'Terbium', 6, null, 'lanthanoid'],
+  ['Dy', 'Dysprosium', 6, null, 'lanthanoid'],
+  ['Ho', 'Holmium', 6, null, 'lanthanoid'],
+  ['Er', 'Erbium', 6, null, 'lanthanoid'],
+  ['Tm', 'Thulium', 6, null, 'lanthanoid'],
+  ['Yb', 'Ytterbium', 6, null, 'lanthanoid'],
+  ['Lu', 'Lutetium', 6, null, 'lanthanoid'],
+  ['Hf', 'Hafnium', 6, 4, 'transition-metal'],
+  ['Ta', 'Tantalum', 6, 5, 'transition-metal'],
+  ['W', 'Tungsten', 6, 6, 'transition-metal'],
+  ['Re', 'Rhenium', 6, 7, 'transition-metal'],
+  ['Os', 'Osmium', 6, 8, 'transition-metal'],
+  ['Ir', 'Iridium', 6, 9, 'transition-metal'],
+  ['Pt', 'Platinum', 6, 10, 'transition-metal'],
+  ['Au', 'Gold', 6, 11, 'transition-metal'],
+  ['Hg', 'Mercury', 6, 12, 'transition-metal'],
+  ['Tl', 'Thallium', 6, 13, 'post-transition-metal'],
+  ['Pb', 'Lead', 6, 14, 'post-transition-metal'],
+  ['Bi', 'Bismuth', 6, 15, 'post-transition-metal'],
+  ['Po', 'Polonium', 6, 16, 'post-transition-metal'],
+  ['At', 'Astatine', 6, 17, 'halogen'],
+  ['Rn', 'Radon', 6, 18, 'noble-gas'],
+  ['Fr', 'Francium', 7, 1, 'alkali-metal'],
+  ['Ra', 'Radium', 7, 2, 'alkaline-earth-metal'],
+  ['Ac', 'Actinium', 7, null, 'actinoid'],
+  ['Th', 'Thorium', 7, null, 'actinoid'],
+  ['Pa', 'Protactinium', 7, null, 'actinoid'],
+  ['U', 'Uranium', 7, null, 'actinoid'],
+  ['Np', 'Neptunium', 7, null, 'actinoid'],
+  ['Pu', 'Plutonium', 7, null, 'actinoid'],
+  ['Am', 'Americium', 7, null, 'actinoid'],
+  ['Cm', 'Curium', 7, null, 'actinoid'],
+  ['Bk', 'Berkelium', 7, null, 'actinoid'],
+  ['Cf', 'Californium', 7, null, 'actinoid'],
+  ['Es', 'Einsteinium', 7, null, 'actinoid'],
+  ['Fm', 'Fermium', 7, null, 'actinoid'],
+  ['Md', 'Mendelevium', 7, null, 'actinoid'],
+  ['No', 'Nobelium', 7, null, 'actinoid'],
+  ['Lr', 'Lawrencium', 7, null, 'actinoid'],
+  ['Rf', 'Rutherfordium', 7, 4, 'transition-metal'],
+  ['Db', 'Dubnium', 7, 5, 'transition-metal'],
+  ['Sg', 'Seaborgium', 7, 6, 'transition-metal'],
+  ['Bh', 'Bohrium', 7, 7, 'transition-metal'],
+  ['Hs', 'Hassium', 7, 8, 'transition-metal'],
+  ['Mt', 'Meitnerium', 7, 9, 'transition-metal'],
+  ['Ds', 'Darmstadtium', 7, 10, 'transition-metal'],
+  ['Rg', 'Roentgenium', 7, 11, 'transition-metal'],
+  ['Cn', 'Copernicium', 7, 12, 'transition-metal'],
+  ['Nh', 'Nihonium', 7, 13, 'post-transition-metal'],
+  ['Fl', 'Flerovium', 7, 14, 'post-transition-metal'],
+  ['Mc', 'Moscovium', 7, 15, 'post-transition-metal'],
+  ['Lv', 'Livermorium', 7, 16, 'post-transition-metal'],
+  ['Ts', 'Tennessine', 7, 17, 'halogen'],
+  ['Og', 'Oganesson', 7, 18, 'noble-gas'],
+];
+
+/** Every element, ordered by atomic number. */
+export const PERIODIC_ELEMENTS: readonly PeriodicElement[] = ROWS.map(
+  (row, index) => ({
+    atomicNumber: index + 1,
+    symbol: row[0],
+    name: row[1],
+    period: row[2],
+    group: row[3],
+    block: blockOf(index + 1, row[3]),
+    category: row[4],
+  }),
+);
+
+const BY_SYMBOL = new Map(
+  PERIODIC_ELEMENTS.map((element) => [element.symbol, element]),
+);
+
+/**
+ * Look up an element by its symbol.
+ * @param symbol - Chemical symbol, e.g. `Cl`. Case sensitive, as symbols are.
+ * @returns The element, or `undefined` when no element carries that symbol.
+ */
+export function elementBySymbol(symbol: string): PeriodicElement | undefined {
+  return BY_SYMBOL.get(symbol);
+}
+
+/**
+ * Look up an element by its atomic number.
+ * @param atomicNumber - Proton count, 1 to 118.
+ * @returns The element, or `undefined` when it is outside the table.
+ */
+export function elementByAtomicNumber(
+  atomicNumber: number,
+): PeriodicElement | undefined {
+  return PERIODIC_ELEMENTS[atomicNumber - 1];
+}
+
+function blockOf(atomicNumber: number, group: number | null): ElementBlock {
+  if (group === null) return 'f';
+  // Helium sits above the p block but its only electrons are 1s.
+  if (atomicNumber === 2) return 's';
+  if (group <= 2) return 's';
+  if (group <= 12) return 'd';
+  return 'p';
+}

package/src/periodic/core/index.ts

@@ -0,0 +1,27 @@
+export type {
+  ElementBlock,
+  ElementCategory,
+  PeriodicElement,
+} from './elements.ts';
+export {
+  PERIODIC_ELEMENTS,
+  elementByAtomicNumber,
+  elementBySymbol,
+} from './elements.ts';
+export {
+  CATEGORY_LABELS,
+  CATEGORY_ORDER,
+  CATEGORY_SWATCHES,
+  UNKNOWN_SWATCH,
+  categorySwatch,
+} from './categories.ts';
+export type { Cell, ElementRange } from './layout.ts';
+export {
+  COLUMN_COUNT,
+  INNER_TRANSITION_MARKERS,
+  INNER_TRANSITION_ROWS,
+  ROW_COUNT,
+  cellOf,
+  elementByArrowKey,
+  placedElements,
+} from './layout.ts';

package/src/periodic/core/layout.ts

@@ -0,0 +1,183 @@
+/**
+ * Where every element is drawn.
+ *
+ * The group and the period place the main block, but not the lanthanoids and
+ * the actinoids: those have no group, and are drawn on the two rows underneath.
+ * The grid is therefore 18 columns by 10 rows — seven periods, a blank spacer,
+ * and the two inner-transition rows.
+ *
+ * The cells here are the *logical* ones, so column 1 is group 1 and row 1 is
+ * period 1. A table drawn with the group and period header strips offsets them
+ * by one; nothing in this module needs to know that.
+ */
+
+import type { ElementCategory, PeriodicElement } from './elements.ts';
+import { PERIODIC_ELEMENTS, elementBySymbol } from './elements.ts';
+
+/** A whole run of the table: one group, or one period. */
+export interface ElementRange {
+  kind: 'group' | 'period';
+  value: number;
+}
+
+/** A cell of the grid, one-based as CSS grid lines are. */
+export interface Cell {
+  column: number;
+  row: number;
+}
+
+/** Columns of the table. */
+export const COLUMN_COUNT = 18;
+
+/** Rows of the table, the blank spacer between the blocks included. */
+export const ROW_COUNT = 10;
+
+/** Row the lanthanoids are drawn on, and the actinoids on the one below. */
+const INNER_TRANSITION_ROW = 9;
+
+/** Atomic number the lanthanoids and the actinoids start at. */
+const INNER_TRANSITION_STARTS = [57, 89] as const;
+
+/** How many elements each inner-transition series holds. */
+const INNER_TRANSITION_LENGTH = 15;
+
+/** Column the inner-transition rows start at, under the d block. */
+const INNER_TRANSITION_COLUMN = 3;
+
+/**
+ * The cell an element occupies.
+ * @param element - Element to place.
+ * @returns Its column and row, both one-based.
+ */
+export function cellOf(element: PeriodicElement): Cell {
+  const inner = innerTransitionCell(element);
+  if (inner !== null) return inner;
+  return { column: element.group ?? 1, row: element.period };
+}
+
+/**
+ * Every element with the cell it occupies, in reading order.
+ * @returns One entry per element, ordered by row then column, so a keyboard
+ * walk over the list moves the way the eye does.
+ */
+export function placedElements(): ReadonlyArray<{
+  element: PeriodicElement;
+  cell: Cell;
+}> {
+  PLACED ??= PERIODIC_ELEMENTS.map((element) => ({
+    element,
+    cell: cellOf(element),
+  })).toSorted((first, second) =>
+    first.cell.row === second.cell.row
+      ? first.cell.column - second.cell.column
+      : first.cell.row - second.cell.row,
+  );
+  return PLACED;
+}
+
+let PLACED: ReadonlyArray<{ element: PeriodicElement; cell: Cell }> | null =
+  null;
+
+/**
+ * The two cells the lanthanoids and the actinoids were lifted out of.
+ *
+ * Without them the main block has a hole in it and the two rows underneath
+ * belong nowhere; with them the reader can see where each series was taken
+ * from.
+ */
+export const INNER_TRANSITION_MARKERS: ReadonlyArray<{
+  cell: Cell;
+  label: string;
+  category: ElementCategory;
+}> = [
+  { cell: { column: 3, row: 6 }, label: '57–71', category: 'lanthanoid' },
+  { cell: { column: 3, row: 7 }, label: '89–103', category: 'actinoid' },
+];
+
+/** The period each inner-transition row belongs to, for its row label. */
+export const INNER_TRANSITION_ROWS: ReadonlyArray<{
+  row: number;
+  period: number;
+}> = [
+  { row: INNER_TRANSITION_ROW, period: 6 },
+  { row: INNER_TRANSITION_ROW + 1, period: 7 },
+];
+
+/**
+ * The element an arrow key walks to.
+ *
+ * The walk follows the grid, not the atomic number: down from carbon is
+ * silicon, the cell underneath it, and a step of 18 protons would instead be
+ * chromium because period 2 holds only eight elements. Left and right follow
+ * reading order, so the end of a period continues at the start of the next one
+ * and the two inner-transition rows come after the main block.
+ * @param key - The pressed key, as `KeyboardEvent.key` reports it.
+ * @param from - Symbol the walk starts at; any arrow lands on hydrogen when it names no element.
+ * @returns The element to move to, or `null` when the key is not an arrow or the table has no cell that way.
+ */
+export function elementByArrowKey(
+  key: string,
+  from: string | undefined,
+): PeriodicElement | null {
+  const direction = ARROW_DIRECTIONS[key];
+  if (direction === undefined) return null;
+
+  const placed = placedElements();
+  const start = from === undefined ? undefined : elementBySymbol(from);
+  if (start === undefined) return placed[0]?.element ?? null;
+
+  if (direction.column !== 0) {
+    const index = readingOrderIndex().get(start.symbol);
+    if (index === undefined) return null;
+    return placed[index + direction.column]?.element ?? null;
+  }
+
+  const cell = cellOf(start);
+  return byCell().get(cellKey(cell.column, cell.row + direction.row)) ?? null;
+}
+
+/** Which way each arrow key moves, in grid cells. */
+const ARROW_DIRECTIONS: Record<string, { column: number; row: number }> = {
+  ArrowRight: { column: 1, row: 0 },
+  ArrowLeft: { column: -1, row: 0 },
+  ArrowDown: { column: 0, row: 1 },
+  ArrowUp: { column: 0, row: -1 },
+};
+
+function readingOrderIndex(): Map<string, number> {
+  READING_ORDER ??= new Map(
+    placedElements().map(({ element }, index) => [element.symbol, index]),
+  );
+  return READING_ORDER;
+}
+
+let READING_ORDER: Map<string, number> | null = null;
+
+function byCell(): Map<string, PeriodicElement> {
+  BY_CELL ??= new Map(
+    placedElements().map(({ element, cell }) => [
+      cellKey(cell.column, cell.row),
+      element,
+    ]),
+  );
+  return BY_CELL;
+}
+
+let BY_CELL: Map<string, PeriodicElement> | null = null;
+
+function cellKey(column: number, row: number): string {
+  return `${String(column)}:${String(row)}`;
+}
+
+function innerTransitionCell(element: PeriodicElement): Cell | null {
+  for (const [index, start] of INNER_TRANSITION_STARTS.entries()) {
+    const offset = element.atomicNumber - start;
+    if (offset >= 0 && offset < INNER_TRANSITION_LENGTH) {
+      return {
+        column: INNER_TRANSITION_COLUMN + offset,
+        row: INNER_TRANSITION_ROW + index,
+      };
+    }
+  }
+  return null;
+}

package/src/periodic/ui/CategoryLegend.tsx

@@ -0,0 +1,105 @@
+/**
+ * The key to the family colours, under the table.
+ */
+
+import type { CSSProperties, ReactElement } from 'react';
+
+import {
+  CATEGORY_LABELS,
+  CATEGORY_ORDER,
+  categorySwatch,
+} from '../core/categories.ts';
+import type { ElementCategory } from '../core/elements.ts';
+
+/** What {@link CategoryLegend} needs. */
+export interface CategoryLegendProps {
+  /**
+   * Called with the family whose swatch was clicked. Without it the legend is
+   * a key rather than a control, and nothing in it is focusable.
+   * @default undefined
+   */
+  onSelect?: (category: ElementCategory) => void;
+  /**
+   * The family drawn as the active one.
+   * @default undefined — none is
+   */
+  selected?: ElementCategory;
+}
+
+/**
+ * The ten families, each with its colour.
+ * @param props - See {@link CategoryLegendProps}.
+ * @returns The legend.
+ */
+export function CategoryLegend(props: CategoryLegendProps): ReactElement {
+  const { onSelect, selected } = props;
+
+  return (
+    <div style={legendStyle}>
+      {CATEGORY_ORDER.map((category) => {
+        const swatch = categorySwatch(category);
+        const label = CATEGORY_LABELS[category];
+        const mark = (
+          <span style={{ ...swatchStyle, background: swatch.background }} />
+        );
+        if (onSelect === undefined) {
+          return (
+            <span key={category} style={itemStyle}>
+              {mark}
+              {label}
+            </span>
+          );
+        }
+        return (
+          <button
+            key={category}
+            type="button"
+            aria-pressed={category === selected}
+            onClick={() => {
+              onSelect(category);
+            }}
+            style={{
+              ...itemStyle,
+              ...buttonStyle,
+              fontWeight: category === selected ? 700 : 400,
+            }}
+          >
+            {mark}
+            {label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+const legendStyle = {
+  color: 'rgb(95 107 124)',
+  display: 'flex',
+  flexWrap: 'wrap',
+  fontSize: 11,
+  gap: '2px 10px',
+} as const satisfies CSSProperties;
+
+const itemStyle = {
+  alignItems: 'center',
+  display: 'inline-flex',
+  gap: 4,
+} as const satisfies CSSProperties;
+
+const buttonStyle = {
+  background: 'none',
+  border: 'none',
+  color: 'inherit',
+  cursor: 'pointer',
+  font: 'inherit',
+  padding: 0,
+} as const satisfies CSSProperties;
+
+const swatchStyle = {
+  border: '1px solid rgb(255 255 255 / 0.55)',
+  borderRadius: 2,
+  display: 'inline-block',
+  height: 10,
+  width: 10,
+} as const satisfies CSSProperties;