react-cheminfo 0.59.0 → 0.61.0

package/src/chrome/ui/SiteHeader.tsx

@@ -10,7 +10,7 @@ import { SiteMark } from '../../ecosystem/ui/marks.tsx';
 import { useLanguage } from '../../i18n/ui/useLanguage.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 
-import { NavLink } from './NavLink.tsx';
+import { NavEntry } from './NavEntry.tsx';
 import { NavMenuButton } from './NavMenuButton.tsx';
 import type { NavItem } from './navItem.ts';
 import { isModifiedClick } from './navItem.ts';
@@ -42,13 +42,20 @@ export interface SiteHeaderProps {
    */
   activeId?: string;
   /**
-   * The utilities pushed to the right edge — About, Cite, Tools, the language,
-   * sign in; Share has a prop of its own, so it always comes last. They
-   * arrive dressed as bar items, so a plain `nav-link` and a `CiteButton` read
-   * alike beside each other.
+   * The utilities pushed to the right edge — About, Cite, Tools, the language;
+   * Share and the account have props of their own, so they always come last.
+   * They arrive dressed as bar items, so a plain `nav-link` and a `CiteButton`
+   * read alike beside each other.
    * @default undefined
    */
   actions?: ReactNode;
+  /**
+   * Who is signed in, drawn at the extreme right, after Share — usually an
+   * `AccountButton`. A site passes it only while somebody is signed in: signing
+   * in starts on the About (`AboutPage`'s `signIn`), never in the bar.
+   * @default undefined
+   */
+  account?: ReactNode;
   /**
    * The Share entry, which closes the utilities on every site, after the
    * Contact entry. A site passes its own when it wraps the shared `ShareButton`
@@ -133,6 +140,7 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
     activeId,
     actions,
     share,
+    account,
     contact,
     renderNavItem,
     embedded = false,
@@ -195,6 +203,7 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
         <span className="spacer" />
         {actions === undefined &&
         share === undefined &&
+        account === undefined &&
         contactForm === '' ? null : (
           <div className="app-header-actions">
             {actions}
@@ -202,6 +211,7 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
               <ContactButton siteId={site.id} formUrl={contactForm} />
             )}
             {share}
+            {account}
           </div>
         )}
       </div>
@@ -209,42 +219,6 @@ export function SiteHeader(props: SiteHeaderProps): ReactElement | null {
   );
 }
 
-/**
- * One page of the bar: a link, or the menu it opens when the entry folds pages
- * of its own. A menu stands where its pages would, among them and not among the
- * utilities, because picking one of them changes what the page shows.
- * @param props - The entry and the page on show.
- * @param props.item - The entry.
- * @param props.activeId - The page on show.
- * @returns The entry.
- */
-function NavEntry(props: {
-  item: NavItem;
-  activeId: string | undefined;
-}): ReactElement {
-  const { item, activeId } = props;
-  if (item.items === undefined) {
-    return <NavLink item={item} active={item.id === activeId} />;
-  }
-
-  return (
-    <NavMenuButton
-      label={menuLabel(item)}
-      icon={typeof item.icon === 'string' ? item.icon : undefined}
-      items={item.items}
-      activeId={activeId}
-      placement="bottom-start"
-    />
-  );
-}
-
-// The trigger names itself to a screen reader, so an entry drawn as a glyph
-// alone says what it opens through its title rather than through its id.
-function menuLabel(item: NavItem): string {
-  if (typeof item.label === 'string') return item.label;
-  return item.title ?? item.id;
-}
-
 /** The two widths the bar's contents run at, as the classes that set them. */
 const INNER_CLASS = {
   page: 'app-header__inner',

package/src/core.ts

@@ -14,6 +14,7 @@ export * from './error/core/index.ts';
 export * from './format/core/index.ts';
 export * from './i18n/core/index.ts';
 export * from './language/core/index.ts';
+export * from './moleculesSources/core/index.ts';
 export * from './moleculesToken/core/index.ts';
 export * from './number/core/index.ts';
 export * from './orbital/core/index.ts';

package/src/locales/de.json

@@ -107,10 +107,11 @@
   "about.providedBy": "Bereitgestellt von",
   "about.whatYouCanDo": "Was Sie hier tun können",
   "about.builtOn": "Aufgebaut auf",
+  "about.buildVersion": "Version {version}",
+  "about.buildBuilt": "Erstellt",
+  "about.buildCommit": "Commit",
   "about.howToCite": "Wie zu zitieren",
   "about.citeWork": "{what} zitieren",
-  "about.built": "Erstellt {builtAt}.",
-  "about.builtFromCommit": "Erstellt {builtAt} aus Commit {commit}.",
   "about.nameList": "{names} und {last}",
   "help.label": "Hilfe",
   "help.learnMore": "Mehr erfahren",
@@ -618,5 +619,12 @@
   "moleculesToken.refusedDetail": "nie ausgestellt oder widerrufen",
   "moleculesToken.unsetDetail": "Setzen Sie {variable} in der .env des Servers.",
   "moleculesToken.uncheckableDetail": "Dieses molecules.cheminfo.org kann noch keine Tokens prüfen.",
-  "moleculesToken.howToChange": "Ein Token wird in der .env des Servers geändert und beim Neustart des Dienstes neu gelesen. molecules.cheminfo.org stellt einen neuen aus mit"
+  "moleculesToken.howToChange": "Ein Token wird in der .env des Servers geändert und beim Neustart des Dienstes neu gelesen. molecules.cheminfo.org stellt einen neuen aus mit",
+  "moleculesToken.fix.title": "Setzen Sie ein gültiges Token in {variables}",
+  "moleculesToken.fix.issueOne": "Stellen Sie ein Token auf der Admin-Seite von molecules.cheminfo.org aus:",
+  "moleculesToken.fix.issueMany": "Stellen Sie ein Token pro Quelle auf der Admin-Seite von molecules.cheminfo.org aus:",
+  "moleculesToken.fix.issueOnServer": "Oder auf dem Server von molecules.cheminfo.org:",
+  "moleculesToken.fix.envOne": "Tragen Sie es in die .env des Servers dieser Website ein:",
+  "moleculesToken.fix.envMany": "Tragen Sie sie in die .env des Servers dieser Website ein:",
+  "moleculesToken.fix.restart": "Starten Sie die Dienste neu, da sie die .env nur beim Start lesen:"
 }

package/src/locales/en.json

@@ -107,10 +107,11 @@
   "about.providedBy": "Provided by",
   "about.whatYouCanDo": "What you can do here",
   "about.builtOn": "Built on",
+  "about.buildVersion": "Version {version}",
+  "about.buildBuilt": "Built",
+  "about.buildCommit": "Commit",
   "about.howToCite": "How to cite",
   "about.citeWork": "Cite {what}",
-  "about.built": "Built {builtAt}.",
-  "about.builtFromCommit": "Built {builtAt} from commit {commit}.",
   "about.nameList": "{names} and {last}",
   "credits.openbabel.description": "reads and writes the chemical file formats, and does the conversion itself.",
   "credits.openchemlib.description": "reads and writes structures, and computes their properties in the browser.",
@@ -618,5 +619,12 @@
   "moleculesToken.refusedDetail": "never issued, or revoked",
   "moleculesToken.unsetDetail": "Set {variable} in the server's .env.",
   "moleculesToken.uncheckableDetail": "This molecules.cheminfo.org cannot check a token yet.",
-  "moleculesToken.howToChange": "A token is changed in the server's .env and read again when the service restarts. molecules.cheminfo.org issues a new one with"
+  "moleculesToken.howToChange": "A token is changed in the server's .env and read again when the service restarts. molecules.cheminfo.org issues a new one with",
+  "moleculesToken.fix.title": "Set a valid token in {variables}",
+  "moleculesToken.fix.issueOne": "Issue a token on the Admin page of molecules.cheminfo.org:",
+  "moleculesToken.fix.issueMany": "Issue one token per source on the Admin page of molecules.cheminfo.org:",
+  "moleculesToken.fix.issueOnServer": "Or, on the server of molecules.cheminfo.org:",
+  "moleculesToken.fix.envOne": "Write it in the .env of this site's server:",
+  "moleculesToken.fix.envMany": "Write them in the .env of this site's server:",
+  "moleculesToken.fix.restart": "Restart the services, which read the .env only when they start:"
 }

package/src/locales/es.json

@@ -107,10 +107,11 @@
   "about.providedBy": "Ofrecido por",
   "about.whatYouCanDo": "Lo que puede hacer aquí",
   "about.builtOn": "Construido sobre",
+  "about.buildVersion": "Versión {version}",
+  "about.buildBuilt": "Compilado",
+  "about.buildCommit": "Commit",
   "about.howToCite": "Cómo citar",
   "about.citeWork": "Citar {what}",
-  "about.built": "Compilado {builtAt}.",
-  "about.builtFromCommit": "Compilado {builtAt} desde el commit {commit}.",
   "about.nameList": "{names} y {last}",
   "help.label": "Ayuda",
   "help.learnMore": "Saber más",
@@ -618,5 +619,12 @@
   "moleculesToken.refusedDetail": "nunca emitido, o revocado",
   "moleculesToken.unsetDetail": "Defina {variable} en el .env del servidor.",
   "moleculesToken.uncheckableDetail": "Este molecules.cheminfo.org aún no puede comprobar un token.",
-  "moleculesToken.howToChange": "Un token se cambia en el .env del servidor y se vuelve a leer cuando el servicio se reinicia. molecules.cheminfo.org emite uno nuevo con"
+  "moleculesToken.howToChange": "Un token se cambia en el .env del servidor y se vuelve a leer cuando el servicio se reinicia. molecules.cheminfo.org emite uno nuevo con",
+  "moleculesToken.fix.title": "Defina un token válido en {variables}",
+  "moleculesToken.fix.issueOne": "Emita un token en la página Admin de molecules.cheminfo.org:",
+  "moleculesToken.fix.issueMany": "Emita un token por fuente en la página Admin de molecules.cheminfo.org:",
+  "moleculesToken.fix.issueOnServer": "O, en el servidor de molecules.cheminfo.org:",
+  "moleculesToken.fix.envOne": "Escríbalo en el .env del servidor de este sitio:",
+  "moleculesToken.fix.envMany": "Escríbalos en el .env del servidor de este sitio:",
+  "moleculesToken.fix.restart": "Reinicie los servicios, que solo leen el .env al arrancar:"
 }

package/src/locales/fr.json

@@ -107,10 +107,11 @@
   "about.providedBy": "Proposé par",
   "about.whatYouCanDo": "Ce que vous pouvez faire ici",
   "about.builtOn": "Construit sur",
+  "about.buildVersion": "Version {version}",
+  "about.buildBuilt": "Compilé",
+  "about.buildCommit": "Commit",
   "about.howToCite": "Comment citer",
   "about.citeWork": "Citer {what}",
-  "about.built": "Compilé {builtAt}.",
-  "about.builtFromCommit": "Compilé {builtAt} depuis le commit {commit}.",
   "about.nameList": "{names} et {last}",
   "help.label": "Aide",
   "help.learnMore": "En savoir plus",
@@ -618,5 +619,12 @@
   "moleculesToken.refusedDetail": "jamais émis, ou révoqué",
   "moleculesToken.unsetDetail": "Définissez {variable} dans le fichier .env du serveur.",
   "moleculesToken.uncheckableDetail": "Ce molecules.cheminfo.org ne sait pas encore vérifier un jeton.",
-  "moleculesToken.howToChange": "Un jeton se change dans le fichier .env du serveur, et est relu au redémarrage du service. molecules.cheminfo.org en émet un nouveau avec"
+  "moleculesToken.howToChange": "Un jeton se change dans le fichier .env du serveur, et est relu au redémarrage du service. molecules.cheminfo.org en émet un nouveau avec",
+  "moleculesToken.fix.title": "Définissez un jeton valide dans {variables}",
+  "moleculesToken.fix.issueOne": "Émettez un jeton sur la page Admin de molecules.cheminfo.org :",
+  "moleculesToken.fix.issueMany": "Émettez un jeton par source sur la page Admin de molecules.cheminfo.org :",
+  "moleculesToken.fix.issueOnServer": "Ou, sur le serveur de molecules.cheminfo.org :",
+  "moleculesToken.fix.envOne": "Écrivez-le dans le fichier .env du serveur de ce site :",
+  "moleculesToken.fix.envMany": "Écrivez-les dans le fichier .env du serveur de ce site :",
+  "moleculesToken.fix.restart": "Redémarrez les services, qui ne lisent le fichier .env qu'à leur démarrage :"
 }

package/src/locales/it.json

@@ -107,10 +107,11 @@
   "about.providedBy": "Offerto da",
   "about.whatYouCanDo": "Cosa si può fare qui",
   "about.builtOn": "Costruito su",
+  "about.buildVersion": "Versione {version}",
+  "about.buildBuilt": "Compilato",
+  "about.buildCommit": "Commit",
   "about.howToCite": "Come citare",
   "about.citeWork": "Citare {what}",
-  "about.built": "Compilato {builtAt}.",
-  "about.builtFromCommit": "Compilato {builtAt} dal commit {commit}.",
   "about.nameList": "{names} e {last}",
   "credits.openbabel.description": "legge e scrive i formati di file chimici, ed esegue la conversione stessa.",
   "credits.openchemlib.description": "legge e scrive strutture, e ne calcola le proprietà nel browser.",
@@ -618,5 +619,12 @@
   "moleculesToken.refusedDetail": "mai emesso, o revocato",
   "moleculesToken.unsetDetail": "Impostare {variable} nel file .env del server.",
   "moleculesToken.uncheckableDetail": "Questo molecules.cheminfo.org non sa ancora verificare un token.",
-  "moleculesToken.howToChange": "Un token si cambia nel file .env del server e viene riletto al riavvio del servizio. molecules.cheminfo.org ne emette uno nuovo con"
+  "moleculesToken.howToChange": "Un token si cambia nel file .env del server e viene riletto al riavvio del servizio. molecules.cheminfo.org ne emette uno nuovo con",
+  "moleculesToken.fix.title": "Impostare un token valido in {variables}",
+  "moleculesToken.fix.issueOne": "Emettere un token nella pagina Admin di molecules.cheminfo.org:",
+  "moleculesToken.fix.issueMany": "Emettere un token per fonte nella pagina Admin di molecules.cheminfo.org:",
+  "moleculesToken.fix.issueOnServer": "Oppure, sul server di molecules.cheminfo.org:",
+  "moleculesToken.fix.envOne": "Scriverlo nel file .env del server di questo sito:",
+  "moleculesToken.fix.envMany": "Scriverli nel file .env del server di questo sito:",
+  "moleculesToken.fix.restart": "Riavviare i servizi, che leggono il file .env solo all'avvio:"
 }

package/src/moleculesSources/core/index.ts

@@ -0,0 +1,11 @@
+export type {
+  FetchSourceLooksOptions,
+  SourceLook,
+  SourceLooks,
+} from './moleculesSources.ts';
+export {
+  MOLECULES_URL,
+  fetchSourceLooks,
+  readSourceLooks,
+  sourceLook,
+} from './moleculesSources.ts';

package/src/moleculesSources/core/moleculesSources.ts

@@ -0,0 +1,102 @@
+/** Where molecules.cheminfo.org answers, which holds the family's sources. */
+export const MOLECULES_URL = 'https://molecules.cheminfo.org';
+
+/**
+ * How a source is drawn wherever the family names it — PubChem, ChEBI, COCONUT
+ * — as molecules.cheminfo.org publishes it. molecules is where a source's
+ * colour and logo are kept and edited, so every site reads them from there
+ * rather than keeping a copy that drifts the first time one is changed.
+ */
+export interface SourceLook {
+  /** What the source is called, as molecules writes it: `ChEBI`. */
+  name: string;
+  /** The colour its badges are drawn in, as `#rrggbb`; null for none. */
+  color: string | null;
+  /** The absolute address of its little logo; null when it has none. */
+  logo: string | null;
+}
+
+/** Every source molecules publishes, by its name in lower case. */
+export type SourceLooks = ReadonlyMap<string, SourceLook>;
+
+/**
+ * The sources a `/v1/sources` answer describes, each logo made absolute
+ * against the address it was read from, so the badge draws it on any site.
+ * Anything not shaped like a source is left out rather than trusted.
+ * @param body - The parsed answer of `/v1/sources`.
+ * @param baseUrl - Where it was read from.
+ * @returns The looks, by lower-case name.
+ */
+export function readSourceLooks(body: unknown, baseUrl: string): SourceLooks {
+  const looks = new Map<string, SourceLook>();
+  const sources = isRecord(body) ? body.sources : undefined;
+  if (!Array.isArray(sources)) return looks;
+  for (const source of sources) {
+    if (!isRecord(source) || typeof source.name !== 'string') continue;
+    const { name, color, logo } = source;
+    looks.set(name.toLowerCase(), {
+      name,
+      color: typeof color === 'string' && HEX_COLOR.test(color) ? color : null,
+      logo: typeof logo === 'string' ? absolute(logo, baseUrl) : null,
+    });
+  }
+  return looks;
+}
+
+/**
+ * The look of one source, named in any case.
+ * @param looks - What molecules publishes, or null while it is being read.
+ * @param name - The source's name or key: `chebi`, `ChEBI`.
+ * @returns Its look, or `undefined` when molecules does not know it (yet).
+ */
+export function sourceLook(
+  looks: SourceLooks | null,
+  name: string,
+): SourceLook | undefined {
+  return looks?.get(name.toLowerCase());
+}
+
+/** Where and how {@link fetchSourceLooks} reads. */
+export interface FetchSourceLooksOptions {
+  /**
+   * Where molecules answers.
+   * @default MOLECULES_URL
+   */
+  url?: string;
+  /**
+   * Aborts the read.
+   * @default undefined
+   */
+  signal?: AbortSignal;
+}
+
+/**
+ * Read every source's look from molecules.cheminfo.org.
+ * @param options - See {@link FetchSourceLooksOptions}.
+ * @returns The looks, by lower-case name.
+ * @throws {Error} When molecules does not answer, or answers with an error.
+ */
+export async function fetchSourceLooks(
+  options: FetchSourceLooksOptions = {},
+): Promise<SourceLooks> {
+  const { url = MOLECULES_URL, signal } = options;
+  const response = await fetch(`${url}/v1/sources`, { signal });
+  if (!response.ok) {
+    throw new Error(`${url} answered ${response.status} for its sources`);
+  }
+  return readSourceLooks(await response.json(), url);
+}
+
+const HEX_COLOR = /^#[\da-f]{6}$/i;
+
+function absolute(address: string, baseUrl: string): string | null {
+  try {
+    return new URL(address, baseUrl).href;
+  } catch {
+    return null;
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}

package/src/moleculesSources/ui/MoleculesSourceBadge.tsx

@@ -0,0 +1,44 @@
+import type { ReactElement } from 'react';
+
+import { MOLECULES_URL, sourceLook } from '../core/moleculesSources.ts';
+
+import type { SourceBadgeProps } from './SourceBadge.tsx';
+import { SourceBadge } from './SourceBadge.tsx';
+import { useSourceLooks } from './useSourceLooks.ts';
+
+export interface MoleculesSourceBadgeProps extends Omit<
+  SourceBadgeProps,
+  'color' | 'logo'
+> {
+  /**
+   * Where molecules answers, for a site that reads another instance.
+   * @default MOLECULES_URL
+   */
+  moleculesUrl?: string;
+}
+
+/**
+ * A source named by a site that does not keep its look: the colour and the
+ * logo come from molecules.cheminfo.org, where they are edited. A source
+ * molecules does not know — or until it has answered — is drawn neutral.
+ * @param props - The source, by its name in any case, and the entry it holds.
+ * @returns The badge.
+ */
+export function MoleculesSourceBadge(
+  props: MoleculesSourceBadgeProps,
+): ReactElement {
+  const { moleculesUrl = MOLECULES_URL, ...badge } = props;
+  const look = sourceLook(useSourceLooks(moleculesUrl), badge.name);
+  if (look === undefined) return <SourceBadge {...badge} />;
+
+  return (
+    <SourceBadge
+      {...badge}
+      label={badge.label ?? look.name}
+      // A source molecules draws in no colour of its own is drawn neutral
+      // here: the site naming it is not that source.
+      color={look.color ?? undefined}
+      logo={look.logo}
+    />
+  );
+}

package/src/moleculesSources/ui/SourceBadge.tsx

@@ -0,0 +1,117 @@
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+
+export interface SourceBadgeProps {
+  /** What the source is called, read in the badge's tooltip. */
+  name: string;
+  /**
+   * What the badge says.
+   * @default name
+   */
+  label?: ReactNode;
+  /**
+   * The source's own colour, as `#rrggbb`. `null` draws it in the site's own
+   * colour, which is how a site marks a source that is itself.
+   * @default undefined — a neutral grey, for a source with no look
+   */
+  color?: string | null;
+  /**
+   * The absolute address of its little logo.
+   * @default null
+   */
+  logo?: string | null;
+  /**
+   * The entry's identifier there, written after the name.
+   * @default null
+   */
+  identifier?: string | null;
+  /**
+   * How many entries the source holds, written after the name when more than
+   * one.
+   * @default 1
+   */
+  count?: number;
+  /**
+   * Where the badge leads, opened in a new tab.
+   * @default null — the badge names the source and leads nowhere
+   */
+  href?: string | null;
+  /**
+   * The tooltip.
+   * @default the name, then the identifier
+   */
+  title?: string;
+  /**
+   * The smaller badge of a dense list, whose identifier goes in the tooltip
+   * only.
+   * @default false
+   */
+  compact?: boolean;
+}
+
+/**
+ * A source, as a badge: its name in its own colour, its little logo on a white
+ * chip, and the entry it holds — the same badge on every site of the family
+ * that names where a molecule comes from.
+ * @param props - See {@link SourceBadgeProps}.
+ * @returns The badge.
+ */
+export function SourceBadge(props: SourceBadgeProps): ReactElement {
+  const {
+    name,
+    label = name,
+    color,
+    logo = null,
+    identifier = null,
+    count = 1,
+    href = null,
+    compact = false,
+  } = props;
+  const title =
+    props.title ?? (identifier === null ? name : `${name} ${identifier}`);
+  const className = [
+    'source-badge',
+    compact ? 'source-badge--compact' : '',
+    color === undefined ? 'source-badge--neutral' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+  // A source with no colour of its own takes the site's, from the stylesheet.
+  const style =
+    typeof color === 'string'
+      ? ({ '--source': color } as CSSProperties)
+      : undefined;
+  const content = (
+    <>
+      {logo === null ? null : (
+        <span className="source-badge__logo">
+          <img src={logo} alt="" />
+        </span>
+      )}
+      <span className="source-badge__name">{label}</span>
+      {compact || identifier === null ? null : (
+        <span className="source-badge__id">{identifier}</span>
+      )}
+      {count > 1 ? <span className="source-badge__count">{count}</span> : null}
+    </>
+  );
+
+  if (href === null) {
+    return (
+      <span className={className} style={style} title={title}>
+        {content}
+      </span>
+    );
+  }
+  return (
+    <a
+      className={className}
+      style={style}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={title}
+    >
+      {content}
+    </a>
+  );
+}

package/src/moleculesSources/ui/index.ts

@@ -0,0 +1,6 @@
+export type { MoleculesSourceBadgeProps } from './MoleculesSourceBadge.tsx';
+export { MoleculesSourceBadge } from './MoleculesSourceBadge.tsx';
+export type { SourceBadgeProps } from './SourceBadge.tsx';
+export { SourceBadge } from './SourceBadge.tsx';
+export type { SourceLooksStore } from './useSourceLooks.ts';
+export { sourceLooksStore, useSourceLooks } from './useSourceLooks.ts';

package/src/moleculesSources/ui/useSourceLooks.ts

@@ -0,0 +1,70 @@
+import { useSyncExternalStore } from 'react';
+
+import type { SourceLooks } from '../core/moleculesSources.ts';
+import { MOLECULES_URL, fetchSourceLooks } from '../core/moleculesSources.ts';
+
+/**
+ * Every source's look, read from molecules.cheminfo.org once per page however
+ * many badges ask for it.
+ * @param url - Where molecules answers.
+ * @returns The looks by lower-case name, or null until molecules has answered;
+ * an empty map when it could not be read, so the badges stop waiting and stay
+ * neutral.
+ */
+export function useSourceLooks(
+  url: string = MOLECULES_URL,
+): SourceLooks | null {
+  const store = sourceLooksStore(url);
+  return useSyncExternalStore(store.subscribe, store.read, notYet);
+}
+
+/** The one read of a molecules address, shared by every badge on the page. */
+export interface SourceLooksStore {
+  /** Follow the read, starting it on the first call. */
+  subscribe: (listener: () => void) => () => void;
+  /** What has been read so far. */
+  read: () => SourceLooks | null;
+}
+
+/**
+ * The store behind {@link useSourceLooks}: one per address, read once.
+ * @param url - Where molecules answers.
+ * @returns The store.
+ */
+export function sourceLooksStore(url: string): SourceLooksStore {
+  let store = STORES.get(url);
+  if (store === undefined) {
+    store = createStore(url);
+    STORES.set(url, store);
+  }
+  return store;
+}
+
+const STORES = new Map<string, SourceLooksStore>();
+
+function createStore(url: string): SourceLooksStore {
+  let looks: SourceLooks | null = null;
+  let started = false;
+  const listeners = new Set<() => void>();
+
+  function settle(value: SourceLooks): void {
+    looks = value;
+    for (const listener of listeners) listener();
+  }
+
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      if (!started) {
+        started = true;
+        fetchSourceLooks({ url }).then(settle, () => settle(new Map()));
+      }
+      return () => listeners.delete(listener);
+    },
+    read: () => looks,
+  };
+}
+
+function notYet(): null {
+  return null;
+}

package/src/moleculesToken/core/index.ts

@@ -9,3 +9,4 @@ export {
   checkMoleculesTokens,
   publicTokenCheck,
 } from './moleculesToken.ts';
+export { issueTokenCommand, tokensToFix } from './tokenFix.ts';

package/src/moleculesToken/core/tokenFix.ts

@@ -0,0 +1,37 @@
+import type {
+  MoleculesTokenCheck,
+  MoleculesTokenVerdict,
+} from './moleculesToken.ts';
+
+/** The verdicts only a new token, written in the server's `.env`, fixes. */
+const NEEDS_NEW_TOKEN: ReadonlySet<MoleculesTokenVerdict> = new Set([
+  'unset',
+  'refused',
+  'otherSource',
+]);
+
+/**
+ * The checks whose token has to be replaced: none is set, molecules.cheminfo.org
+ * refuses it, or it was issued for another source. A token that could not be
+ * checked is not among them, since nothing written in the `.env` fixes that.
+ * @param checks - The last checks.
+ * @returns Those to fix, in the order given.
+ */
+export function tokensToFix(
+  checks: readonly MoleculesTokenCheck[],
+): MoleculesTokenCheck[] {
+  return checks.filter((check) => NEEDS_NEW_TOKEN.has(check.verdict));
+}
+
+/**
+ * The command molecules.cheminfo.org issues a check's token with, on its
+ * server. The source is quoted, since a name like `NP Atlas` holds a space;
+ * the email is left for the reader to write.
+ * @param check - The check, whose first source the token is issued for.
+ * @returns The command.
+ */
+export function issueTokenCommand(
+  check: Pick<MoleculesTokenCheck, 'sources'>,
+): string {
+  return `npm run tokens -- issue '${check.sources[0] ?? 'SOURCE'}' EMAIL`;
+}