react-cheminfo 0.10.0 → 0.12.0

package/lib/worker/core/workerChannelTypes.d.ts

@@ -0,0 +1,118 @@
+import type { WorkerLike } from './messages.ts';
+/**
+ * How a channel schedules the jobs it is asked for.
+ *
+ * - `parallel`: every request is posted at once, and several run side by side.
+ * - `latest`: one job runs at a time. A new request supersedes every request
+ *   still waiting, whose promises reject with a `CancelledRequestError`; the
+ *   job already running finishes, its answer is dropped, and only the newest
+ *   request is posted after it — so dragging a slider costs one extra job, not
+ *   forty queued ones.
+ * - `restart`: like `latest`, but the running job is ended at once by
+ *   terminating its worker, and the newest request starts on a fresh one. It
+ *   needs a channel built from a function that creates the worker.
+ */
+export type WorkerSchedule = 'parallel' | 'latest' | 'restart';
+/** A worker, or the function that creates one when the first request comes. */
+export type WorkerSource = WorkerLike | (() => WorkerLike);
+/** What a job is handed besides its request, in a worker or in-process. */
+export interface WorkerJobContext<TProgress = never> {
+    /**
+     * Aborted once nobody waits for the job: it was cancelled, superseded or
+     * timed out. A long job checks it between steps and stops.
+     */
+    signal: AbortSignal;
+    /**
+     * Tell the caller how far the job is; ignored once nobody waits for it.
+     * @param progress - The news, in the shape both sides agreed on.
+     */
+    reportProgress: (progress: TProgress) => void;
+}
+/** How a channel names itself, waits and schedules. */
+export interface WorkerChannelOptions<TRequest, TResponse, TProgress = never> {
+    /**
+     * What the channel is called in the message of an error it raises, e.g.
+     * `conformers`.
+     * @default 'worker'
+     */
+    name?: string;
+    /**
+     * Milliseconds a request waits before it is given up on, when the call passes
+     * no budget of its own. A value that is not a positive finite number falls
+     * back to two minutes.
+     * @default 120000
+     */
+    defaultTimeoutMs?: number;
+    /**
+     * How requests share the worker. See {@link WorkerSchedule}.
+     * @default 'parallel'
+     */
+    schedule?: WorkerSchedule;
+    /**
+     * Whether a request nobody waits for any more is followed by a
+     * `{ id, cancel: true }` message, so a worker served by
+     * `serveWorkerRequests` aborts the job's signal and can stop early. Off by
+     * default, because a worker that does not know the message would read it as
+     * a job.
+     * @default false
+     */
+    cooperativeCancel?: boolean;
+    /**
+     * The same job run on this thread, used instead of the worker where the page
+     * has no `Worker` at all — Node.js, a unit test. Only a channel built from a
+     * function that creates the worker falls back to it.
+     * @default undefined — every job goes to the worker
+     */
+    runInProcess?: (request: TRequest, context: WorkerJobContext<TProgress>) => Promise<TResponse>;
+}
+/** What one call may ask of the channel. */
+export interface WorkerRequestOptions<TProgress = never> {
+    /**
+     * Abort the call. Its promise then rejects with a `CancelledRequestError`;
+     * the job itself is only stopped by a worker that listens for cancellation.
+     * @default undefined
+     */
+    signal?: AbortSignal;
+    /**
+     * Milliseconds this call alone waits, overriding the channel default —
+     * a calculation budget is often a user preference. A value that is not a
+     * positive finite number falls back to the channel default.
+     * @default the channel's defaultTimeoutMs
+     */
+    timeoutMs?: number;
+    /**
+     * Called with every progress message the worker posts about this call.
+     * @default undefined
+     */
+    onProgress?: (progress: TProgress) => void;
+    /**
+     * Buffers handed over to the worker rather than copied, e.g. the bytes of a
+     * file of several megabytes. They are unusable on this side afterwards.
+     * @default undefined — everything is copied
+     */
+    transfer?: Transferable[];
+}
+/** A channel to one worker, over which jobs are requested and awaited. */
+export interface WorkerChannel<TRequest, TResponse, TProgress = never> {
+    /**
+     * Post one job and wait for the answer that carries its identifier.
+     * @param payload - The job.
+     * @param options - Per-call signal, budget, progress and transfer.
+     * @returns What the worker answered.
+     */
+    request: (payload: TRequest, options?: WorkerRequestOptions<TProgress>) => Promise<TResponse>;
+    /** How many requests are still waiting for an answer. */
+    readonly pendingCount: number;
+    /**
+     * Reject every waiting request with a `CancelledRequestError`, leaving the
+     * worker alive.
+     */
+    cancel: () => void;
+    /**
+     * Terminate the worker, rejecting everything still waiting with a
+     * `CancelledRequestError`. A channel built from a function starts a new
+     * worker on its next request; one handed a worker accepts no further request.
+     */
+    terminate: () => void;
+}
+//# sourceMappingURL=workerChannelTypes.d.ts.map

package/lib/worker/core/workerChannelTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workerChannelTypes.d.ts","sourceRoot":"","sources":["../../../src/worker/core/workerChannelTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/D,+EAA+E;AAC/E,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,CAAC,MAAM,UAAU,CAAC,CAAC;AAE3D,2EAA2E;AAC3E,MAAM,WAAW,gBAAgB,CAAC,SAAS,GAAG,KAAK;IACjD;;;OAGG;IACH,MAAM,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,cAAc,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,IAAI,CAAC;CAC/C;AAED,uDAAuD;AACvD,MAAM,WAAW,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK;IAC1E;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,KACjC,OAAO,CAAC,SAAS,CAAC,CAAC;CACzB;AAED,4CAA4C;AAC5C,MAAM,WAAW,oBAAoB,CAAC,SAAS,GAAG,KAAK;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,0EAA0E;AAC1E,MAAM,WAAW,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK;IACnE;;;;;OAKG;IACH,OAAO,EAAE,CACP,OAAO,EAAE,QAAQ,EACjB,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,KACtC,OAAO,CAAC,SAAS,CAAC,CAAC;IACxB,yDAAyD;IACzD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB;;;;OAIG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB"}

package/lib/worker/core/workerChannelTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=workerChannelTypes.js.map

package/lib/worker/core/workerChannelTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workerChannelTypes.js","sourceRoot":"","sources":["../../../src/worker/core/workerChannelTypes.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "react-cheminfo",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "license": "MIT",
-  "description": "Assembled React components shared by the cheminfo sites: a Cite button and an ecosystem menu",
+  "description": "React components, hooks and framework-free helpers shared by the cheminfo sites: site chrome, citations, sharing, routing, pedagogy, charts, and the structure, orbital and 3D molecule viewers",
   "author": "Luc Patiny",
   "keywords": [
     "react",
@@ -11,16 +11,22 @@
     "components"
   ],
   "type": "module",
+  "sideEffects": [
+    "./styles/*.css"
+  ],
   "exports": {
     "./core": "./lib/core.js",
+    "./molecule3d": "./lib/molecule3d.js",
     "./orbital": "./lib/orbital.js",
     "./slides": "./lib/slides.js",
+    "./spectra": "./lib/spectra.js",
     "./structure": "./lib/structure.js",
     "./ui": "./lib/ui.js",
     "./vite": "./lib/vite.js",
     "./styles/*.css": "./styles/*.css"
   },
   "bin": {
+    "cheminfo-check-deploy": "bin/check-deploy.mjs",
     "cheminfo-check-tokens": "bin/check-tokens.mjs"
   },
   "files": [
@@ -31,7 +37,7 @@
   ],
   "scripts": {
     "build-storybook": "storybook build",
-    "check-tokens": "node bin/check-tokens.mjs styles src",
+    "check-tokens": "node scripts/check-tokens.mjs --fallbacks styles src",
     "check-types": "tsc --noEmit",
     "clean": "rimraf coverage lib storybook-static",
     "dev": "storybook dev -p 10815",
@@ -50,7 +56,9 @@
   "dependencies": {
     "cheminfo-font": "^1.28.0",
     "react-markdown": "^10.1.0",
-    "rehype-raw": "^7.0.0"
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "yaml": "^2.9.1"
   },
   "devDependencies": {
     "@blueprintjs/core": "^6.18.0",
@@ -62,6 +70,7 @@
     "@types/react-dom": "^19.2.4",
     "@vitest/coverage-v8": "^4.1.10",
     "@zakodium/tsconfig": "^1.0.5",
+    "benchmark": "^2.1.4",
     "chemical-elements": "^2.3.2",
     "eslint": "^9.39.5",
     "eslint-config-cheminfo-react": "^20.1.0",
@@ -89,8 +98,8 @@
     "ml-signal-processing": "^2.2.2",
     "molstar": "^5.11.0",
     "openchemlib": "^9.24.0",
-    "react": "^18.3.1 || >=19",
-    "react-dom": "^18.3.1 || >=19",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0",
     "react-ocl": "^8.7.1",
     "react-science": "^20.6.2 || ^21.0.0 || ^22.0.0 || ^23.0.0",
     "spectra-processor": "^5.0.0",

package/src/about/core/about.ts

@@ -4,6 +4,9 @@ import { credits } from '../../credits/core/credits.ts';
 import { siteById } from '../../ecosystem/core/lookup.ts';
 import type { EcosystemSite, SiteId } from '../../ecosystem/core/sites.ts';
 
+import type { ProviderEntry, ProviderId } from './providers.ts';
+import { providers } from './providers.ts';
+
 /**
  * What a site says about itself: the one page a visitor opens to find out what
  * the tool is, what it stands on, and who to tell when it breaks.
@@ -33,6 +36,18 @@ export interface AboutContent {
    * @default undefined — the site asks for no citation of its own
    */
   cite?: readonly CitedWork[];
+  /**
+   * Who provides the site, named under "Provided by"; a role, when given,
+   * is listed under the names.
+   * @default undefined
+   */
+  people?: readonly AboutPerson[];
+  /**
+   * Ids into the provider registry: the institutions that provide the site,
+   * drawn as logos under "Provided by".
+   * @default undefined
+   */
+  providedBy?: readonly ProviderId[];
   /**
    * Licence the site itself is published under.
    * @default 'MIT'
@@ -55,6 +70,17 @@ export interface AboutContent {
   issues?: string;
 }
 
+/** One person who made a site. */
+export interface AboutPerson {
+  /** Their name, as they write it. */
+  name: string;
+  /**
+   * What they contributed, in one line.
+   * @default undefined
+   */
+  role?: string;
+}
+
 /**
  * The same record with nothing left to look up: every default filled in, and
  * every credit id replaced by the entry it names.
@@ -70,6 +96,10 @@ export interface ResolvedAbout {
   credits: CreditEntry[];
   /** The works to cite, empty when the site asks for none. */
   cite: readonly CitedWork[];
+  /** Who made the site, empty when the site names nobody. */
+  people: readonly AboutPerson[];
+  /** The institutions providing the site, empty when the site names none. */
+  providedBy: ProviderEntry[];
   license: string;
   repository: string;
   /** The running version, or `undefined` when the site does not know it. */
@@ -96,6 +126,8 @@ export function resolveAbout(content: AboutContent): ResolvedAbout {
     can: content.can,
     credits: credits(content.credits),
     cite: content.cite ?? [],
+    people: content.people ?? [],
+    providedBy: providers(content.providedBy ?? []),
     license: content.license ?? DEFAULT_LICENSE,
     repository,
     version: content.version,

package/src/about/core/index.ts

@@ -1,2 +1,4 @@
-export type { AboutContent, ResolvedAbout } from './about.ts';
+export type { AboutContent, AboutPerson, ResolvedAbout } from './about.ts';
 export { aboutProblems, resolveAbout } from './about.ts';
+export type { ProviderEntry, ProviderId } from './providers.ts';
+export { PROVIDERS, providers } from './providers.ts';

package/src/about/core/providers.ts

@@ -0,0 +1,45 @@
+/** An institution that provides a site: hosts it, pays for it, employs who writes it. */
+export interface ProviderEntry {
+  /** How a site names the institution in its record. */
+  id: string;
+  /** The short name, spelled the way the institution spells it. */
+  name: string;
+  /** The full name, read by a screen reader and shown on hover. */
+  fullName: string;
+  /** Where the institution lives. */
+  href: string;
+  /** City and country, as written under the institution's name. */
+  location: string;
+}
+
+/** An id the provider registry answers to. */
+export type ProviderId = (typeof PROVIDERS)[number]['id'];
+
+/**
+ * The institutions a site names as its providers, in the order it names them.
+ * @param ids - Which institutions, in display order.
+ * @returns The entries, in that order.
+ * @throws {Error} When an id is not in the registry.
+ */
+export function providers(ids: readonly ProviderId[]): ProviderEntry[] {
+  const listed: ProviderEntry[] = [];
+  for (const id of ids) {
+    const entry = PROVIDERS.find((candidate) => candidate.id === id);
+    if (entry === undefined) {
+      throw new Error(`unknown provider: ${id}`);
+    }
+    listed.push(entry);
+  }
+  return listed;
+}
+
+/** Every institution a site of the family may name as its provider. */
+export const PROVIDERS = [
+  {
+    id: 'epfl',
+    name: 'EPFL',
+    fullName: 'École polytechnique fédérale de Lausanne',
+    href: 'https://www.epfl.ch',
+    location: 'Lausanne, Switzerland',
+  },
+] as const satisfies readonly ProviderEntry[];

package/src/about/ui/AboutCitations.tsx

@@ -1,9 +1,7 @@
 import type { CSSProperties, ReactElement } from 'react';
 
-import { DEFAULT_CITATION_STYLE } from '../../citation/core/formats.ts';
-import { doiUrl } from '../../citation/core/reference.ts';
 import type { CitedWork } from '../../citation/core/works.ts';
-import { CitationPreview } from '../../citation/ui/CitationPreview.tsx';
+import { CiteButton } from '../../citation/ui/CiteButton.tsx';
 
 export interface AboutCitationsProps {
   /** The works the site asks for, in the order it names them. */
@@ -12,9 +10,11 @@ export interface AboutCitationsProps {
 
 /**
  * What to cite, and what citing each work credits: a reader handed two
- * references has to be told which is which before they can pick one.
+ * references has to be told which is which before they can pick one. Each
+ * work is cited through the shared Cite button, so the page offers the same
+ * article link, styles and reference-manager files as the header does.
  * @param props - See {@link AboutCitationsProps}.
- * @returns The works, each with its reference and its DOI.
+ * @returns The works, each with its Cite button.
  */
 export function AboutCitations(props: AboutCitationsProps): ReactElement {
   const { works } = props;
@@ -27,21 +27,11 @@ export function AboutCitations(props: AboutCitationsProps): ReactElement {
           {work.note === undefined ? null : (
             <p style={NOTE_STYLE}>{work.note}</p>
           )}
-          <div style={PLATE_STYLE}>
-            <CitationPreview
-              reference={work.reference}
-              format="text"
-              style={DEFAULT_CITATION_STYLE}
-            />
-          </div>
-          <a
-            href={doiUrl(work.reference)}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={DOI_STYLE}
-          >
-            doi:{work.reference.doi}
-          </a>
+          <CiteButton
+            reference={work.reference}
+            label={`Cite ${work.what}`}
+            placement="bottom-start"
+          />
         </div>
       ))}
     </div>
@@ -61,19 +51,3 @@ const NOTE_STYLE = {
   color: 'var(--text-muted)',
   fontSize: 13,
 } as const satisfies CSSProperties;
-
-// The preview is set in the light ink of the tooltip it was drawn for, so it
-// is given the dark plate that ink is legible on.
-const PLATE_STYLE = {
-  padding: '8px 10px',
-  borderRadius: 'var(--radius)',
-  background: 'var(--text)',
-  overflow: 'auto',
-} as const satisfies CSSProperties;
-
-const DOI_STYLE = {
-  display: 'inline-block',
-  marginTop: 6,
-  color: 'var(--accent)',
-  fontSize: 12,
-} as const satisfies CSSProperties;

package/src/about/ui/AboutPage.tsx

@@ -7,6 +7,7 @@ import type { AboutContent } from '../core/about.ts';
 import { resolveAbout } from '../core/about.ts';
 
 import { AboutCitations } from './AboutCitations.tsx';
+import { AboutProvidedBy } from './AboutProvidedBy.tsx';
 import { AboutSection } from './AboutSection.tsx';
 
 export interface AboutPageProps {
@@ -24,12 +25,20 @@ export interface AboutPageProps {
    * @default undefined
    */
   children?: ReactNode;
+  /**
+   * The site's own drawn lockup, for a site that has one. It stands in the
+   * hero in place of the mark and the written name, above the tagline, and
+   * must therefore carry the name itself. Anything else about the hero stays
+   * where a reader of our other About pages expects it.
+   * @default undefined
+   */
+  logo?: ReactNode;
 }
 
 /**
- * The About page of a site of the family: what the tool is, what a visitor can
- * do with it, what it is built on, how to cite it, and where to report a
- * problem — always in that order.
+ * The About page of a site of the family: what the tool is, who provides it,
+ * what a visitor can do with it, what it is built on, how to cite it, and where
+ * to report a problem — always in that order.
  *
  * The order is the point. A reader who has read one of our About pages knows
  * where the credits are on the other thirteen, and a site that writes its own
@@ -39,7 +48,7 @@ export interface AboutPageProps {
  * @throws {Error} When the record names a site or a credit that does not exist.
  */
 export function AboutPage(props: AboutPageProps): ReactElement {
-  const { content, className, children } = props;
+  const { content, className, children, logo } = props;
   const about = resolveAbout(content);
   const site = about.site;
 
@@ -50,17 +59,26 @@ export function AboutPage(props: AboutPageProps): ReactElement {
       }
       style={PAGE_STYLE}
     >
-      <header className="about-hero" style={HERO_STYLE}>
-        <SiteMark siteId={site.id} size={56} />
+      <header
+        className="about-hero"
+        style={logo === undefined ? HERO_STYLE : LOGO_HERO_STYLE}
+      >
+        {logo === undefined ? <SiteMark siteId={site.id} size={56} /> : null}
         <div>
-          <h1 style={NAME_STYLE}>
-            <Wordmark siteId={site.id} size={26} />
+          <h1 style={logo === undefined ? NAME_STYLE : LOGO_NAME_STYLE}>
+            {logo ?? <Wordmark siteId={site.id} size={26} />}
           </h1>
           <p style={TAGLINE_STYLE}>{site.tagline}</p>
           <p style={WHAT_STYLE}>{about.what}</p>
         </div>
       </header>
 
+      {about.people.length === 0 && about.providedBy.length === 0 ? null : (
+        <AboutSection title="Provided by" className="about-provided-by">
+          <AboutProvidedBy people={about.people} providers={about.providedBy} />
+        </AboutSection>
+      )}
+
       <AboutSection title="What you can do here" className="about-can">
         <ul style={CAN_LIST_STYLE}>
           {about.can.map((line) => (
@@ -153,6 +171,17 @@ const NAME_STYLE = {
   fontWeight: 700,
 } as const satisfies CSSProperties;
 
+// A drawn lockup already carries the mark and the name at its own proportions,
+// so the hero gives it the full width rather than a column beside a mark.
+const LOGO_HERO_STYLE = {
+  ...HERO_STYLE,
+  display: 'block',
+} as const satisfies CSSProperties;
+
+const LOGO_NAME_STYLE = {
+  margin: '0 0 4px',
+} as const satisfies CSSProperties;
+
 const TAGLINE_STYLE = {
   margin: '2px 0 8px',
   color: 'var(--text-muted)',

package/src/about/ui/AboutProvidedBy.tsx

@@ -0,0 +1,165 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { AboutPerson } from '../core/about.ts';
+import type { ProviderEntry } from '../core/providers.ts';
+
+export interface AboutProvidedByProps {
+  /** Who provides the site, in display order. */
+  people: readonly AboutPerson[];
+  /** The institutions providing the site, drawn as linked logos. */
+  providers: readonly ProviderEntry[];
+}
+
+/**
+ * The lockup of who provides a site: the institution's logo, then the names
+ * and the institution they work at, and under it what each one contributed
+ * when the site says so.
+ * @param props - See {@link AboutProvidedByProps}.
+ * @returns The lockup.
+ */
+export function AboutProvidedBy(props: AboutProvidedByProps): ReactElement {
+  const { people, providers } = props;
+  const withRoles = people.filter((person) => person.role !== undefined);
+
+  return (
+    <div>
+      <div style={LOCKUP_STYLE}>
+        {providers.map((provider) => (
+          <a
+            key={provider.id}
+            href={provider.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={provider.fullName}
+            style={LOGO_TILE_STYLE}
+          >
+            <ProviderLogo provider={provider} />
+          </a>
+        ))}
+        <div
+          style={
+            providers.length === 0 ? IDENTITY_STYLE : DIVIDED_IDENTITY_STYLE
+          }
+        >
+          {people.length === 0 ? null : (
+            <p style={NAMES_STYLE}>{joinNames(people)}</p>
+          )}
+          {providers.map((provider) => (
+            <p key={provider.id} style={INSTITUTION_STYLE}>
+              {provider.fullName}
+              <span style={LOCATION_STYLE}>{provider.location}</span>
+            </p>
+          ))}
+        </div>
+      </div>
+      {withRoles.length === 0 ? null : (
+        <ul style={ROLES_STYLE}>
+          {withRoles.map((person) => (
+            <li key={person.name}>
+              <strong>{person.name}</strong> — {person.role}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function joinNames(people: readonly AboutPerson[]): string {
+  const names = people.map((person) => person.name);
+  if (names.length < 2) return names.join('');
+  return `${names.slice(0, -1).join(', ')} and ${names.at(-1)}`;
+}
+
+function ProviderLogo(props: { provider: ProviderEntry }): ReactElement {
+  const { provider } = props;
+  const label = `${provider.name} — ${provider.fullName}`;
+
+  switch (provider.id) {
+    case 'epfl':
+      return <EpflLogo label={label} />;
+    default:
+      return <span>{provider.name}</span>;
+  }
+}
+
+function EpflLogo(props: { label: string }): ReactElement {
+  return (
+    <svg
+      width={112}
+      height={(112 * 53) / 182.4}
+      viewBox="0 0 182.4 53"
+      role="img"
+      aria-label={props.label}
+      style={{ display: 'block' }}
+    >
+      {/* The institution's own colour, not a family token. */}
+      <g fill="red">
+        <polygon points="0 21.6 11.43 21.6 11.43 9.8 38.34 9.8 38.34 0 0 0 0 21.6" />
+        <polygon points="0 53 38.34 53 38.34 43.2 11.43 43.2 11.43 31.4 0 31.4 0 53" />
+        <rect x="11.43" y="21.6" width="24.61" height="9.8" />
+        <path d="M86,4.87a16.12,16.12,0,0,0-5.68-3.53A23.76,23.76,0,0,0,71.82,0H48.14V53H59.57V31.4H71.82a23.76,23.76,0,0,0,8.46-1.34A16.12,16.12,0,0,0,86,26.53a13.43,13.43,0,0,0,3.19-5,17.38,17.38,0,0,0,0-11.62A13.52,13.52,0,0,0,86,4.87ZM78,18.73a5.7,5.7,0,0,1-2.26,1.8,11.33,11.33,0,0,1-3.27.85,32,32,0,0,1-3.86.22H59.57V9.8h9.05a32,32,0,0,1,3.86.22,11,11,0,0,1,3.27.86A5.59,5.59,0,0,1,78,12.67a5,5,0,0,1,.86,3A5,5,0,0,1,78,18.73Z" />
+        <polygon points="155.47 43.2 155.47 0 144.04 0 144.04 53 182.38 53 182.38 43.2 155.47 43.2" />
+        <polygon points="97.42 21.6 108.85 21.6 108.85 9.8 135.76 9.8 135.76 0 97.42 0 97.42 21.6" />
+        <rect x="97.42" y="31.4" width="11.43" height="21.6" />
+        <rect x="108.85" y="21.6" width="24.61" height="9.8" />
+      </g>
+    </svg>
+  );
+}
+
+const LOCKUP_STYLE = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  gap: 20,
+} as const satisfies CSSProperties;
+
+const LOGO_TILE_STYLE = {
+  flex: '0 0 auto',
+  display: 'inline-block',
+  // Logos are drawn for a white page, so they keep one on a dark theme.
+  background: 'white',
+  border: '1px solid var(--border)',
+  borderRadius: 'var(--radius)',
+  padding: '14px 18px',
+} as const satisfies CSSProperties;
+
+const IDENTITY_STYLE = {
+  flex: '1 1 14rem',
+  minWidth: 0,
+} as const satisfies CSSProperties;
+
+const DIVIDED_IDENTITY_STYLE = {
+  ...IDENTITY_STYLE,
+  borderLeft: '3px solid var(--accent)',
+  paddingLeft: 16,
+} as const satisfies CSSProperties;
+
+const NAMES_STYLE = {
+  margin: 0,
+  color: 'var(--text)',
+  fontSize: 19,
+  fontWeight: 600,
+  lineHeight: 1.3,
+} as const satisfies CSSProperties;
+
+const INSTITUTION_STYLE = {
+  margin: '4px 0 0',
+  color: 'var(--text-muted)',
+  fontSize: 14,
+  lineHeight: 1.4,
+} as const satisfies CSSProperties;
+
+const LOCATION_STYLE = {
+  display: 'block',
+  color: 'var(--text-faint)',
+  fontSize: 13,
+} as const satisfies CSSProperties;
+
+const ROLES_STYLE = {
+  margin: '16px 0 0',
+  paddingTop: 12,
+  paddingLeft: 20,
+  borderTop: '1px solid var(--border)',
+} as const satisfies CSSProperties;

package/src/about/ui/index.ts

@@ -2,5 +2,7 @@ export type { AboutCitationsProps } from './AboutCitations.tsx';
 export { AboutCitations } from './AboutCitations.tsx';
 export type { AboutPageProps } from './AboutPage.tsx';
 export { AboutPage } from './AboutPage.tsx';
+export type { AboutProvidedByProps } from './AboutProvidedBy.tsx';
+export { AboutProvidedBy } from './AboutProvidedBy.tsx';
 export type { AboutSectionProps } from './AboutSection.tsx';
 export { AboutSection } from './AboutSection.tsx';