react-cheminfo 0.10.0 → 0.12.0

package/src/ecosystem/core/sites.ts

@@ -1,72 +1,12 @@
 // tokens-ok: file — every site's two colours are declared here.
-/** The sites the menu links to, in the order they are listed. */
-export type SiteId =
-  | 'learn'
-  | 'inchi'
-  | 'vcl'
-  | 'smiles'
-  | 'chemcalc'
-  | 'nmrium'
-  | 'derepflow'
-  | 'surge'
-  | 'tex'
-  | 'lcao'
-  | 'regexp'
-  | 'pdb'
-  | 'elucidation'
-  | 'equilibrium'
-  | 'polycarp'
-  | '3d'
-  | 'periodic-table'
-  | 'database';
+import type { EcosystemSite } from './types.ts';
 
-export interface SiteName {
-  /** First half of the name, set in the site's leading colour. */
-  lead: string;
-  /** Second half, set in the site's answering colour. */
-  alt: string;
-  /**
-   * Whether a faint dot separates the two halves, as an address-shaped name
-   * takes and a product-shaped one does not.
-   * @default false
-   */
-  dot?: boolean;
-}
-
-export interface EcosystemSite {
-  id: SiteId;
-  /** The name, split the way the site's own wordmark splits it. */
-  name: SiteName;
-  /** Where the site lives, written the way it is typed. */
-  host: string;
-  /** Where the sources live, and what a Source link opens. */
-  repository: string;
-  /** One line on what the site does. */
-  tagline: string;
-  /** The colour the first half of the name is set in. */
-  brand: string;
-  /**
-   * The colour the second half is set in. It is the site's answering colour
-   * darkened until it is readable on white, because several of those are
-   * yellows and ambers that sit around 2:1 there.
-   */
-  brandAlt: string;
-  /** The plate of the site's mark, and the colour one element of it carries. */
-  mark: SiteMarkColors;
-}
-
-export interface SiteMarkColors {
-  /** The rounded square the mark is drawn on. */
-  plate: string;
-  /** The colour exactly one element of the mark takes. */
-  accent: string;
-  /**
-   * The hairline a plate as light as the tile behind it needs, so it still
-   * reads as a plate rather than as a drawing floating on the row.
-   * @default undefined
-   */
-  edge?: string;
-}
+export type {
+  EcosystemSite,
+  SiteId,
+  SiteMarkColors,
+  SiteName,
+} from './types.ts';
 
 /**
  * Every site of the family, each with the two colours it owns. The marks that
@@ -79,6 +19,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'learn.cheminfo.org',
     repository: 'https://github.com/cheminfo/learn.cheminfo.org',
     tagline: 'Arrange the tools into a course and hand out its link.',
+    group: 'computing',
     brand: '#0d9488',
     brandAlt: '#b45309',
     mark: { plate: '#0d9488', accent: '#f59e0b' },
@@ -89,6 +30,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'inchi.cheminfo.org',
     repository: 'https://github.com/cheminfo/inchi.cheminfo.org',
     tagline: 'InChI and InChIKey from a structure, in the browser.',
+    group: 'structures',
     brand: '#5b21b6',
     brandAlt: '#a16207',
     mark: { plate: '#5b21b6', accent: '#fcd34d' },
@@ -99,6 +41,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'vcl.cheminfo.org',
     repository: 'https://github.com/cheminfo/vcl.cheminfo.org',
     tagline: 'Combine a core and fragments into a screened library.',
+    group: 'research',
     brand: '#2d72d2',
     brandAlt: '#9a3412',
     mark: { plate: '#2d72d2', accent: '#eb6847' },
@@ -109,16 +52,29 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'smiles.cheminfo.org',
     repository: 'https://github.com/cheminfo/smiles.cheminfo.org',
     tagline: 'Draw a structure, read its SMILES, learn the notation.',
+    group: 'structures',
     brand: '#1c6e42',
     brandAlt: '#9a3412',
     mark: { plate: '#1c6e42', accent: '#ea580c' },
   },
+  {
+    id: 'openbabel',
+    name: { lead: 'openbabel', alt: 'cheminfo', dot: true },
+    host: 'openbabel.cheminfo.org',
+    repository: 'https://github.com/cheminfo/openbabel.cheminfo.org',
+    tagline: 'Convert a structure between any pair of chemical file formats.',
+    group: 'structures',
+    brand: '#0f766e',
+    brandAlt: '#c2410c',
+    mark: { plate: '#0f766e', accent: '#fb923c' },
+  },
   {
     id: 'chemcalc',
     name: { lead: 'Chem', alt: 'Calc' },
     host: 'www.chemcalc.org',
     repository: 'https://github.com/cheminfo/chemcalc.org',
     tagline: 'Molecular formula, exact mass and isotopic distribution.',
+    group: 'basics',
     brand: '#5b52e0',
     brandAlt: '#d63384',
     mark: { plate: '#5b52e0', accent: '#ff8ac2' },
@@ -129,19 +85,35 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'www.nmrium.org',
     repository: 'https://github.com/cheminfo/nmrium',
     tagline: 'Process and assign NMR spectra in the browser.',
+    group: 'spectra',
     brand: '#ea580c',
     brandAlt: '#2b143e',
     mark: { plate: '#2b143e', accent: '#ea580c' },
   },
+  {
+    id: 'metabo',
+    // Not `.cheminfo`: the second half of a one-word name is the domain the
+    // site actually lives at, and this one is a sibling of NMRium rather than
+    // of the cheminfo tools.
+    name: { lead: 'metabo', alt: 'nmrium', dot: true },
+    host: 'metabo.nmrium.com',
+    repository: 'https://github.com/cheminfo/metabo',
+    tagline: 'Turn a batch of NMR spectra into a map of your samples.',
+    group: 'spectra',
+    brand: '#4d7c0f',
+    brandAlt: '#b91c1c',
+    mark: { plate: '#4d7c0f', accent: '#b91c1c' },
+  },
   {
     id: 'derepflow',
-    name: { lead: 'Derep', alt: 'Flow' },
+    name: { lead: 'Derep', alt: 'Flow', ink: 'lead' },
     host: 'derepflow.cheminfo.org',
     repository: 'https://github.com/cheminfo/derepflow',
     tagline: 'Identify the constituents of a mixture from its ¹³C spectrum.',
-    brand: '#be185d',
-    brandAlt: '#0f766e',
-    mark: { plate: '#be185d', accent: '#0d9488' },
+    group: 'spectra',
+    brand: '#127ba3',
+    brandAlt: '#1e293b',
+    mark: { plate: '#1e293b', accent: '#127ba3' },
   },
   {
     id: 'surge',
@@ -149,6 +121,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'surge.cheminfo.org',
     repository: 'https://github.com/cheminfo/surge.cheminfo.org',
     tagline: 'Every constitutional isomer of a molecular formula.',
+    group: 'structures',
     brand: '#4338ca',
     brandAlt: '#be123c',
     mark: { plate: '#4338ca', accent: '#e11d48' },
@@ -159,6 +132,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'tex.cheminfo.org',
     repository: 'https://github.com/cheminfo/tex.cheminfo.org',
     tagline: 'LaTeX formulas rendered to SVG or PNG from a URL.',
+    group: 'computing',
     brand: '#a21caf',
     brandAlt: '#a16207',
     mark: { plate: '#a21caf', accent: '#facc15' },
@@ -169,6 +143,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'lcao.cheminfo.org',
     repository: 'https://github.com/cheminfo/lcao.cheminfo.org',
     tagline: 'Combine atomic orbitals into molecular ones.',
+    group: 'basics',
     brand: '#1565c0',
     brandAlt: '#c62828',
     mark: { plate: '#ffffff', accent: '#c62828', edge: '#dfe3e8' },
@@ -179,6 +154,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'regexp.cheminfo.org',
     repository: 'https://github.com/cheminfo/regexp.cheminfo.org',
     tagline: 'Learn regular expressions in a live playground.',
+    group: 'computing',
     brand: '#1e3a8a',
     brandAlt: '#a16207',
     mark: { plate: '#1e3a8a', accent: '#fde047' },
@@ -189,6 +165,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'pdb.cheminfo.org',
     repository: 'https://github.com/cheminfo/pdb.cheminfo.org',
     tagline: 'A fast look at any Protein Data Bank entry.',
+    group: 'research',
     brand: '#2563eb',
     brandAlt: '#b45309',
     mark: { plate: '#2563eb', accent: '#fbbf24' },
@@ -199,6 +176,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'elucidation.cheminfo.org',
     repository: 'https://github.com/cheminfo/elucidation.cheminfo.org',
     tagline: 'A structure from a 1H NMR spectrum and a formula.',
+    group: 'spectra',
     brand: '#7e22ce',
     brandAlt: '#b45309',
     mark: { plate: '#7e22ce', accent: '#f59e0b' },
@@ -209,6 +187,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'equilibrium.cheminfo.org',
     repository: 'https://github.com/cheminfo/equilibrium.cheminfo.org',
     tagline: 'Chemical equilibria: pH, speciation and titration curves.',
+    group: 'basics',
     brand: '#0b5754',
     brandAlt: '#a56600',
     mark: { plate: '#0b5754', accent: '#f2a71b' },
@@ -219,6 +198,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'polycarp.cheminfo.org',
     repository: 'https://github.com/cheminfo/polycarp.cheminfo.org',
     tagline: 'Predict the microstructure of a radical copolymerisation.',
+    group: 'research',
     brand: '#701a75',
     brandAlt: '#4d7c0f',
     mark: { plate: '#701a75', accent: '#a3e635' },
@@ -229,6 +209,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: '3d.cheminfo.org',
     repository: 'https://github.com/cheminfo/3d.cheminfo.org',
     tagline: 'Conformers in 3D from a structure you draw.',
+    group: 'structures',
     brand: '#155e75',
     brandAlt: '#b45309',
     mark: { plate: '#155e75', accent: '#f97316' },
@@ -239,6 +220,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'periodic-table.cheminfo.org',
     repository: 'https://github.com/cheminfo/periodic-table.cheminfo.org',
     tagline: 'The periodic table, coloured, plotted and taken apart.',
+    group: 'basics',
     brand: '#15803d',
     brandAlt: '#a16207',
     mark: { plate: '#15803d', accent: '#fbbf24' },
@@ -249,6 +231,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     host: 'database.cheminfo.org',
     repository: 'https://github.com/cheminfo/database.cheminfo.org',
     tagline: 'Query a real chemical dataset in SQL and in Mango.',
+    group: 'research',
     brand: '#7c2d12',
     brandAlt: '#0b6e85',
     mark: { plate: '#7c2d12', accent: '#06b6d4' },

package/src/ecosystem/core/tokens.ts

@@ -30,17 +30,6 @@ export function siteTokensCss(id: SiteId): string {
   return `:root {\n  ${declarations.join('\n  ')}\n}\n`;
 }
 
-/**
- * What a browser paints its own chrome with on that site — the address bar on
- * Android, the title bar of an installed page — which is the site's leading
- * colour.
- * @param id - The site whose colour is wanted.
- * @returns The colour, as the `<meta name="theme-color">` content.
- */
-export function siteThemeColor(id: SiteId): string {
-  return siteById(id).brand;
-}
-
 // The second colour as the site's mark draws it: on the accent element, unless
 // the mark inverts the pair and gives the plate the answering colour instead.
 function answeringColor(site: EcosystemSite): string {

package/src/ecosystem/core/types.ts

@@ -0,0 +1,94 @@
+import type { SiteGroupId } from './groups.ts';
+
+/** The sites the menu links to. */
+export type SiteId =
+  | 'learn'
+  | 'inchi'
+  | 'vcl'
+  | 'smiles'
+  | 'openbabel'
+  | 'chemcalc'
+  | 'nmrium'
+  | 'metabo'
+  | 'derepflow'
+  | 'surge'
+  | 'tex'
+  | 'lcao'
+  | 'regexp'
+  | 'pdb'
+  | 'elucidation'
+  | 'equilibrium'
+  | 'polycarp'
+  | '3d'
+  | 'periodic-table'
+  | 'database';
+
+/** A site's name, split the way its own wordmark splits it. */
+export interface SiteName {
+  /**
+   * First half of the name, set in the site's leading colour unless `ink`
+   * names it.
+   */
+  lead: string;
+  /** Second half, set in the site's answering colour. */
+  alt: string;
+  /**
+   * Whether a faint dot separates the two halves, as an address-shaped name
+   * takes and a product-shaped one does not.
+   * @default false
+   */
+  dot?: boolean;
+  /**
+   * The half a site's own wordmark sets in the family's ink rather than in a
+   * colour. The other half then carries `brand`, so a site whose logo spends
+   * its one colour on the second half is written the way it is drawn.
+   * @default undefined
+   */
+  ink?: 'lead' | 'alt';
+}
+
+/** One site of the family: its name, address, topic and two colours. */
+export interface EcosystemSite {
+  /** The identifier every component and helper names the site by. */
+  id: SiteId;
+  /** The name, split the way the site's own wordmark splits it. */
+  name: SiteName;
+  /** Where the site lives, written the way it is typed. */
+  host: string;
+  /** Where the sources live, and what a Source link opens. */
+  repository: string;
+  /** One line on what the site does. */
+  tagline: string;
+  /**
+   * The topic the site is written under, which is what decides where it sits
+   * in the menu and in the footer.
+   */
+  group: SiteGroupId;
+  /**
+   * The colour the name is written in — the first half, or the second when
+   * `name.ink` leaves the first in the family's ink.
+   */
+  brand: string;
+  /**
+   * The colour the second half is set in. It is the site's answering colour
+   * darkened until it is readable on white, because several of those are
+   * yellows and ambers that sit around 2:1 there.
+   */
+  brandAlt: string;
+  /** The plate of the site's mark, and the colour one element of it carries. */
+  mark: SiteMarkColors;
+}
+
+/** The colours a site's mark is drawn in. */
+export interface SiteMarkColors {
+  /** The rounded square the mark is drawn on. */
+  plate: string;
+  /** The colour exactly one element of the mark takes. */
+  accent: string;
+  /**
+   * The hairline a plate as light as the tile behind it needs, so it still
+   * reads as a plate rather than as a drawing floating on the row.
+   * @default undefined
+   */
+  edge?: string;
+}

package/src/ecosystem/ui/EcosystemButton.tsx

@@ -2,10 +2,12 @@ import type { ReactElement } from 'react';
 
 import type { HeaderButtonProps } from '../../shared/ui/MenuButton.tsx';
 import { MenuButton } from '../../shared/ui/MenuButton.tsx';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { SiteId } from '../core/sites.ts';
 
 import { EcosystemMenu } from './EcosystemMenu.tsx';
 
+/** What the Tools entry of a header needs. */
 export interface EcosystemButtonProps extends HeaderButtonProps {
   /**
    * The site this button sits on, which is shown but never linked.
@@ -18,6 +20,11 @@ export interface EcosystemButtonProps extends HeaderButtonProps {
    * @default 'Tools'
    */
   label?: string;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -27,12 +34,12 @@ export interface EcosystemButtonProps extends HeaderButtonProps {
  * @returns The button and its menu.
  */
 export function EcosystemButton(props: EcosystemButtonProps): ReactElement {
-  const { currentSiteId, label = 'Tools', ...rest } = props;
+  const { currentSiteId, label = 'Tools', className, ...rest } = props;
 
   return (
     <MenuButton
       {...rest}
-      className="ecosystem-button"
+      className={joinClassNames('ecosystem-button', className)}
       icon="grid-view"
       label={label}
       menu={<EcosystemMenu currentSiteId={currentSiteId} />}

package/src/ecosystem/ui/EcosystemLinks.tsx

@@ -1,36 +1,42 @@
 import type { CSSProperties, ReactElement } from 'react';
 
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+import { groupedSites } from '../core/lookup.ts';
 import type { SiteId } from '../core/sites.ts';
-import { ECOSYSTEM_SITES, siteUrl } from '../core/sites.ts';
+import { siteUrl } from '../core/sites.ts';
 
-import { SiteTile } from './SiteTile.tsx';
+import { SiteGroupGrid } from './SiteGroupGrid.tsx';
+import { ECOSYSTEM_HEADING_STYLE } from './ecosystemStyles.ts';
 
 // The menu of `EcosystemMenu` lives inside a popover, so its links only enter
 // the document once somebody clicks. A crawler never clicks, so these are the
 // links that carry the family: always rendered, in the page, followed — and
 // each one carrying the name and the one line that says what it opens, as real
-// text rather than a `title` a crawler ignores.
+// text rather than a `title` a crawler ignores. The topic headings give it the
+// one thing a flat list of addresses cannot: what they have in common.
 const SECTION_STYLE: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
   gap: 8,
 };
-const HEADING_STYLE: CSSProperties = {
-  margin: 0,
-  color: 'var(--text-muted, #5b6875)',
-  fontSize: '0.75rem',
-  fontWeight: 600,
-};
-const GRID_STYLE: CSSProperties = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))',
-  gap: 2,
+const ROWS_STYLE: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 6,
 };
 const ROW_STYLE: CSSProperties = {
   display: 'flex',
   flexWrap: 'wrap',
   alignItems: 'baseline',
-  gap: '0.35rem 0.9rem',
+  gap: '0.3rem 0.85rem',
+};
+const ROW_LABEL_STYLE: CSSProperties = {
+  color: TOKEN.textFaint,
+  fontSize: '0.6875rem',
+  fontWeight: 700,
+  letterSpacing: '0.06em',
+  textTransform: 'uppercase',
 };
 const LINK_STYLE: CSSProperties = {
   fontSize: '0.8125rem',
@@ -40,10 +46,11 @@ const LINK_STYLE: CSSProperties = {
 };
 const CURRENT_STYLE: CSSProperties = {
   ...LINK_STYLE,
-  color: 'var(--text-faint, #8a96a3)',
+  color: TOKEN.textFaint,
   cursor: 'default',
 };
 
+/** What the footer's list of the family needs. */
 export interface EcosystemLinksProps {
   /**
    * The site the visitor is already on, which is written but never linked.
@@ -58,55 +65,66 @@ export interface EcosystemLinksProps {
   /**
    * How much of each site is written. `grid` gives every site its mark, its
    * name and the line saying what it does — which is what a crawler reads to
-   * know what it is following, so it is the default. `row` writes the names
-   * only, for a footer with no room.
+   * know what it is following, so it is the default. `row` writes one line per
+   * topic, the names only, for a footer with no room.
    * @default 'grid'
    */
   layout?: 'grid' | 'row';
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
- * Every site of the family as a plain link, for the footer of a site. It is
- * what lets a crawler — and a visitor with no patience for menus — walk from
- * one of our tools to the next, so it is rendered on every page rather than
- * behind a button.
+ * Every site of the family as a plain link, gathered under its topic, for the
+ * footer of a site. It is what lets a crawler — and a visitor with no patience
+ * for menus — walk from one of our tools to the next, so it is rendered on
+ * every page rather than behind a button.
  * @param props - The site it sits on, what introduces the section, and how much
  * of each site is written.
  * @returns The section of links.
  */
 export function EcosystemLinks(props: EcosystemLinksProps): ReactElement {
-  const { currentSiteId, heading = 'Our other tools', layout = 'grid' } = props;
+  const {
+    className,
+    currentSiteId,
+    heading = 'Our other tools',
+    layout = 'grid',
+  } = props;
 
   return (
-    <nav className="ecosystem-links" style={SECTION_STYLE} aria-label={heading}>
-      <h2 style={HEADING_STYLE}>{heading}</h2>
+    <nav
+      className={joinClassNames('ecosystem-links', className)}
+      style={SECTION_STYLE}
+      aria-label={heading}
+    >
+      <h2 style={ECOSYSTEM_HEADING_STYLE}>{heading}</h2>
       {layout === 'grid' ? (
-        <div style={GRID_STYLE}>
-          {ECOSYSTEM_SITES.map((site) => (
-            <SiteTile
-              key={site.id}
-              site={site}
-              isCurrent={site.id === currentSiteId}
-            />
-          ))}
-        </div>
+        <SiteGroupGrid currentSiteId={currentSiteId} />
       ) : (
-        <div style={ROW_STYLE}>
-          {ECOSYSTEM_SITES.map((site) =>
-            site.id === currentSiteId ? (
-              <span key={site.id} style={CURRENT_STYLE}>
-                {site.host}
-              </span>
-            ) : (
-              <a
-                key={site.id}
-                style={{ ...LINK_STYLE, color: site.brand }}
-                href={siteUrl(site)}
-              >
-                {site.host}
-              </a>
-            ),
-          )}
+        <div style={ROWS_STYLE}>
+          {groupedSites().map(({ group, sites }) => (
+            <div key={group.id} style={ROW_STYLE}>
+              <span style={ROW_LABEL_STYLE}>{group.label}</span>
+              {sites.map((site) =>
+                site.id === currentSiteId ? (
+                  <span key={site.id} style={CURRENT_STYLE}>
+                    {site.host}
+                  </span>
+                ) : (
+                  <a
+                    key={site.id}
+                    style={{ ...LINK_STYLE, color: site.brand }}
+                    href={siteUrl(site)}
+                  >
+                    {site.host}
+                  </a>
+                ),
+              )}
+            </div>
+          ))}
         </div>
       )}
     </nav>

package/src/ecosystem/ui/EcosystemMenu.tsx

@@ -1,64 +1,57 @@
 import type { CSSProperties, ReactElement } from 'react';
-import { useState } from 'react';
 
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { SiteId } from '../core/sites.ts';
-import { ECOSYSTEM_SITES } from '../core/sites.ts';
 
-import { SiteTile } from './SiteTile.tsx';
+import { SiteGroupGrid } from './SiteGroupGrid.tsx';
+import { ECOSYSTEM_HEADING_STYLE } from './ecosystemStyles.ts';
 
 const PANEL_STYLE: CSSProperties = {
   display: 'flex',
-  width: 'min(34rem, 90vw)',
+  width: 'min(62rem, 92vw)',
+  maxHeight: 'min(72vh, 44rem)',
   flexDirection: 'column',
-  padding: 12,
-  gap: 8,
-};
-const HEADING_STYLE: CSSProperties = {
-  color: 'var(--text-muted, #5b6875)',
-  fontSize: '0.75rem',
-  fontWeight: 600,
-};
-const GRID_STYLE: CSSProperties = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))',
-  gap: 2,
+  padding: '12px 16px 4px',
+  gap: 10,
+  overflowY: 'auto',
 };
 
+/** What the Tools menu needs. */
 export interface EcosystemMenuProps {
   /**
    * The site the visitor is already on, which is shown but never linked.
    * @default undefined
    */
   currentSiteId?: SiteId;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
- * What the ecosystem button opens: every site of the family, each behind its
- * own little logo and the two colours it owns. It lives in a popover, so a
- * crawler never reaches it — `EcosystemLinks` is what carries the family
- * through the page itself.
+ * What the ecosystem button opens: every site of the family, gathered under the
+ * topic it belongs to, each behind its own little logo and the two colours it
+ * owns.
+ *
+ * The topics are what make the menu answer a question a flat grid of tiles
+ * never could — which of these is for a first-year course, and which for
+ * a research project. It lives in a popover, so a crawler never reaches it;
+ * `EcosystemLinks` is what carries the family through the page itself.
  * @param props - The site the visitor is already on.
- * @returns The grid of sites.
+ * @returns The topics and their sites.
  */
 export function EcosystemMenu(props: EcosystemMenuProps): ReactElement {
-  const { currentSiteId } = props;
-  const [hovered, setHovered] = useState<SiteId | null>(null);
+  const { className, currentSiteId } = props;
 
   return (
-    <div className="ecosystem-menu" style={PANEL_STYLE}>
-      <div style={HEADING_STYLE}>Our other tools, all in the browser</div>
-      <div style={GRID_STYLE}>
-        {ECOSYSTEM_SITES.map((site) => (
-          <SiteTile
-            key={site.id}
-            site={site}
-            isCurrent={site.id === currentSiteId}
-            isHovered={hovered === site.id}
-            onHover={setHovered}
-            newTab
-          />
-        ))}
-      </div>
+    <div
+      className={joinClassNames('ecosystem-menu', className)}
+      style={PANEL_STYLE}
+    >
+      <div style={ECOSYSTEM_HEADING_STYLE}>Our tools, all in the browser</div>
+      <SiteGroupGrid currentSiteId={currentSiteId} lit newTab />
     </div>
   );
 }