react-cheminfo 0.41.0 → 0.43.0

package/lib/periodic/ui/glyphWidths.js

@@ -0,0 +1,69 @@
+/**
+ * What each letter advances, in ems, in the family's type.
+ *
+ * Read off the rendered page at 100px, rounded up, because sorting a glyph into
+ * one of four width classes puts `Tm` an eighth wider than it is — which is a
+ * symbol written an eighth smaller than its cell can take. A platform
+ * substituting another face moves these by a few per cent, which the safety
+ * margin of `cellType` covers.
+ */
+export const ADVANCE = {
+    a: 0.5,
+    b: 0.57,
+    c: 0.52,
+    d: 0.57,
+    e: 0.52,
+    f: 0.33,
+    g: 0.56,
+    h: 0.54,
+    i: 0.22,
+    j: 0.22,
+    k: 0.5,
+    l: 0.23,
+    m: 0.8,
+    n: 0.54,
+    o: 0.54,
+    p: 0.56,
+    q: 0.56,
+    r: 0.35,
+    s: 0.47,
+    t: 0.33,
+    u: 0.54,
+    v: 0.5,
+    w: 0.72,
+    x: 0.48,
+    y: 0.5,
+    z: 0.5,
+    A: 0.62,
+    B: 0.6,
+    C: 0.66,
+    D: 0.67,
+    E: 0.55,
+    F: 0.53,
+    G: 0.69,
+    H: 0.69,
+    I: 0.24,
+    J: 0.49,
+    K: 0.6,
+    L: 0.52,
+    M: 0.81,
+    N: 0.69,
+    O: 0.71,
+    P: 0.59,
+    Q: 0.71,
+    R: 0.6,
+    S: 0.59,
+    T: 0.59,
+    U: 0.68,
+    V: 0.62,
+    W: 0.9,
+    X: 0.62,
+    Y: 0.6,
+    Z: 0.61,
+    ' ': 0.27,
+    '-': 0.33,
+    '–': 0.54,
+    '.': 0.25,
+    ',': 0.25,
+};
+//# sourceMappingURL=glyphWidths.js.map

package/lib/periodic/ui/glyphWidths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyphWidths.js","sourceRoot":"","sources":["../../../src/periodic/ui/glyphWidths.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,OAAO,GAA2B;IAC7C,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,GAAG,EAAE,IAAI;IACT,GAAG,EAAE,IAAI;IACT,GAAG,EAAE,IAAI;IACT,GAAG,EAAE,IAAI;IACT,GAAG,EAAE,IAAI;CACV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.41.0",
+  "version": "0.43.0",
   "license": "MIT",
   "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",
@@ -76,6 +76,7 @@
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
+    "semver": "^7.8.5",
     "yaml": "^2.9.1"
   },
   "devDependencies": {
@@ -86,6 +87,7 @@
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
+    "@types/semver": "^7.8.0",
     "@vitest/coverage-v8": "^4.1.10",
     "@zakodium/tsconfig": "^1.0.5",
     "benchmark": "^2.1.4",
@@ -154,5 +156,11 @@
     "xtb-wasm": {
       "optional": true
     }
+  },
+  "overrides": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4"
   }
 }

package/src/chrome/ui/AboutButton.tsx

@@ -0,0 +1,90 @@
+import type { ReactElement } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
+import { NavLink } from './NavLink.tsx';
+
+/** What the About entry of a header needs. */
+export interface AboutButtonProps {
+  /**
+   * The site's About address, which the entry opens. It is written rather than
+   * assumed, because a deployment may sit under a mount path and a translated
+   * site under a language prefix.
+   */
+  href: string;
+  /**
+   * Whether the About is the page on show, which is what the brand tint is
+   * spent on.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * What the site does when the entry is picked, for a page that routes in
+   * place. A modified click is left to the browser.
+   * @default undefined
+   */
+  onSelect?: () => void;
+  /**
+   * What the entry reads. In a compact bar it is not written, but it stays what
+   * the pointer and a screen reader are told.
+   * @default the chrome's own word for it, in the language of the page
+   */
+  label?: string;
+  /**
+   * What the pointer is told.
+   * @default the chrome's own sentence, in the language of the page
+   */
+  title?: string;
+  /**
+   * What the active entry is named by, for a site whose router spells its
+   * addresses rather than its tabs.
+   * @default 'about'
+   */
+  id?: string;
+  /**
+   * Class names added after the component's own.
+   * @default undefined
+   */
+  className?: string;
+}
+
+/**
+ * The About entry, which leads the utilities on every site of the family: a
+ * real address rather than a dialog, so the page is indexed, linkable and
+ * printable.
+ *
+ * The glyph is `info-sign` on every site, and is not a site's to choose. It is
+ * what the entry keeps once a narrow bar drops the labels, and the site's own
+ * mark already stands at the other end of the same bar — drawn twice, nothing
+ * in the row says which one is the site and which one is about it.
+ * @param props - Where the About is, whether it is on show, and how the site
+ * opens it.
+ * @returns The entry.
+ */
+export function AboutButton(props: AboutButtonProps): ReactElement {
+  const {
+    href,
+    active = false,
+    onSelect,
+    label,
+    title,
+    id = 'about',
+    className,
+  } = props;
+  const t = useChromeT();
+
+  return (
+    <NavLink
+      item={{
+        id,
+        label: label ?? t('chrome.about'),
+        icon: 'info-sign',
+        href,
+        title: title ?? t('chrome.aboutTitle'),
+        onSelect,
+      }}
+      active={active}
+      className={className}
+    />
+  );
+}

package/src/chrome/ui/index.ts

@@ -1,3 +1,5 @@
+export type { AboutButtonProps } from './AboutButton.tsx';
+export { AboutButton } from './AboutButton.tsx';
 export type { AccountButtonProps, AccountIdentity } from './AccountButton.tsx';
 export { AccountButton } from './AccountButton.tsx';
 export type { HeaderToggleOption, HeaderToggleProps } from './HeaderToggle.tsx';

package/src/deploy/core/buildGate.ts

@@ -1,8 +1,6 @@
+import { lineOf, parseJsonObject, stringEntries } from './json.ts';
 import type { DeployProblem } from './types.ts';
 
-/** The scripts a repository's own `package.json` declares, as npm would run them. */
-type Scripts = Record<string, string>;
-
 /**
  * Report a repository that can bundle, and so publish, code nothing tested.
  *
@@ -24,8 +22,9 @@ export function readBuildGate(
   problems: DeployProblem[],
 ): void {
   if (packageJson === undefined) return;
-  const scripts = parseScripts(packageJson);
-  if (scripts === undefined) return;
+  const parsed = parseJsonObject(packageJson);
+  if (parsed === undefined) return;
+  const scripts = stringEntries(parsed.scripts);
 
   const build = scripts.build;
   if (build !== undefined && !/\bnpm run test\b/.test(build)) {
@@ -90,33 +89,3 @@ function gatedBuildLine(dockerfile: string): number | undefined {
   }
   return undefined;
 }
-
-/**
- * The scripts block of a `package.json`.
- * @param text - The file, unparsed.
- * @returns Its scripts, or undefined when the file is not readable as one.
- */
-function parseScripts(text: string): Scripts | undefined {
-  let parsed: unknown;
-  try {
-    parsed = JSON.parse(text);
-  } catch {
-    return undefined;
-  }
-  if (typeof parsed !== 'object' || parsed === null) return undefined;
-  const scripts = (parsed as { scripts?: unknown }).scripts;
-  if (typeof scripts !== 'object' || scripts === null) return {};
-  return scripts as Scripts;
-}
-
-/**
- * Where a report should point, so the reader lands on the script itself.
- * @param text - The file to search.
- * @param needle - The key to find.
- * @returns Its line, counting from 1, or 0 when it is not there.
- */
-function lineOf(text: string, needle: string): number {
-  const at = text.indexOf(needle);
-  if (at === -1) return 0;
-  return text.slice(0, at).split('\n').length;
-}

package/src/deploy/core/checkDeploy.ts

@@ -7,6 +7,7 @@ import {
   readInstallRetries,
   readPublishedImage,
 } from './publishedImage.ts';
+import { readReactCopies } from './reactCopies.ts';
 import type { CheckDeployOptions, DeployFile, DeployProblem } from './types.ts';
 import { DEPLOY_COMPOSE_FILES } from './types.ts';
 
@@ -88,6 +89,12 @@ export function findDeployProblems(
 
   readBuildGate(byPath.get('package.json'), dockerfile, problems);
 
+  readReactCopies(
+    byPath.get('package.json'),
+    byPath.get('package-lock.json'),
+    problems,
+  );
+
   readPublishedImage(byPath.get(DOCKER_IMAGE_WORKFLOW), problems);
 
   const gitignore = byPath.get('.gitignore');

package/src/deploy/core/index.ts

@@ -7,6 +7,7 @@ export type {
   DeployProblemKind,
 } from './types.ts';
 export { NGINX_CONFIG, PAGE_CACHE_CONFIG } from './pageCache.ts';
+export { REACT_MAJOR, readReactCopies } from './reactCopies.ts';
 export {
   DOCKER_IMAGE_WORKFLOW,
   readInstallRetries,

package/src/deploy/core/json.ts

@@ -0,0 +1,53 @@
+/**
+ * Reading the repository's own JSON files, which a checker must do without ever
+ * throwing: the absence of a file, and a file somebody has broken, are both
+ * things to report rather than to crash on.
+ */
+
+/**
+ * A JSON file the repository may not have, or may have broken.
+ * @param text - The file, unparsed.
+ * @returns Its object form, or undefined when it is neither.
+ */
+export function parseJsonObject(
+  text: string | undefined,
+): Record<string, unknown> | undefined {
+  if (text === undefined) return undefined;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return undefined;
+  }
+  if (typeof parsed !== 'object' || parsed === null) return undefined;
+  return parsed as Record<string, unknown>;
+}
+
+/**
+ * A block of a `package.json` as a map of strings, dropping any entry that is
+ * not one — the nested form of `overrides` pins something other than the
+ * package it is written under.
+ * @param value - The block, as parsed.
+ * @returns Its string entries.
+ */
+export function stringEntries(value: unknown): Record<string, string> {
+  if (typeof value !== 'object' || value === null) return {};
+  const found: Record<string, string> = {};
+  for (const [key, entry] of Object.entries(value)) {
+    if (typeof entry === 'string') found[key] = entry;
+  }
+  return found;
+}
+
+/**
+ * Where a report should point, so the reader lands on the line itself.
+ * @param text - The file to search, when there is one.
+ * @param needle - The literal to find.
+ * @returns Its line, counting from 1, or 0 when it is not there.
+ */
+export function lineOf(text: string | undefined, needle: string): number {
+  if (text === undefined) return 0;
+  const at = text.indexOf(needle);
+  if (at === -1) return 0;
+  return text.slice(0, at).split('\n').length;
+}

package/src/deploy/core/reactCopies.ts

@@ -0,0 +1,243 @@
+import semver from 'semver';
+
+import { lineOf, parseJsonObject, stringEntries } from './json.ts';
+import type { DeployProblem } from './types.ts';
+
+/**
+ * The React major the whole family runs. One number, in one place: a site that
+ * resolves anything else is reporting a resolution nobody asked for.
+ */
+export const REACT_MAJOR = 19;
+
+/**
+ * The packages that must resolve to exactly one copy. The two runtime ones
+ * because two copies are a blank page; the two type packages because two copies
+ * are a type error in a file nobody edited.
+ */
+const SINGLE_COPY = [
+  'react',
+  'react-dom',
+  '@types/react',
+  '@types/react-dom',
+] as const;
+
+/** One package as the lock file resolved it. */
+interface Resolved {
+  /** Where npm put it, as the lock keys it. */
+  path: string;
+  /** The exact version it resolved to. */
+  version: string;
+}
+
+/** What the root `package.json` says about a package. */
+interface Declared {
+  /** The range a direct dependency asks for, if it is one. */
+  dependency?: string;
+  /** The range the `overrides` block pins, if it pins one. */
+  override?: string;
+}
+
+/**
+ * Report every way a repository would resolve React twice, or resolve a React
+ * that is not the family's.
+ *
+ * Two physical copies of `react` make every component from the offending
+ * subtree call hooks against a dispatcher the active renderer never populated,
+ * and the app dies at first render on `Cannot read properties of null (reading
+ * 'useEffect')` — a blank page with the correct title and the correct CSS,
+ * which reads like a routing or a build bug and is neither. Two copies of
+ * `@types/react` are the same mistake one layer up: `tsc` rejects a component
+ * crossing between them, in a file nobody touched.
+ *
+ * The cause is almost never a direct dependency. It is a *transitive* peer
+ * range that stopped before the current major — `@blueprintjs/core` depends on
+ * `react-popper@2`, whose peers stop at `^18` — so npm honours the stale range,
+ * installs an older React for that subtree and hoists it. Nothing fails at
+ * install, nothing fails at build, and the bundle silently grows by a second
+ * copy of React. The fix is a pin in the root `overrides`, which is why a lock
+ * holding such a peer without one is reported even while the tree happens to be
+ * clean today: it is one fresh resolve away from not being.
+ * @param packageJson - The repository's root `package.json`, unparsed.
+ * @param packageLock - Its `package-lock.json`, unparsed.
+ * @param problems - Where each problem found is appended.
+ */
+export function readReactCopies(
+  packageJson: string | undefined,
+  packageLock: string | undefined,
+  problems: DeployProblem[],
+): void {
+  const lock = parseJsonObject(packageLock);
+  if (lock === undefined) return;
+  const packages = lock.packages;
+  if (typeof packages !== 'object' || packages === null) return;
+  const entries = Object.entries(packages as Record<string, unknown>);
+
+  const resolved = resolvedCopies(entries);
+  // A repository with no React at all is not a React repository.
+  if (resolved.get('react')?.length === undefined) return;
+
+  const declared = declarations(packageJson);
+
+  for (const name of SINGLE_COPY) {
+    const copies = resolved.get(name);
+    if (copies === undefined || copies.length === 0) continue;
+    if (copies.length > 1) {
+      problems.push({
+        file: 'package-lock.json',
+        line: lineOf(packageLock, `"${copies[1]?.path ?? name}"`),
+        kind: 'duplicate-react',
+        message: `${name} resolves to ${copies.length} copies: ${copies
+          .map((copy) => `${copy.version} at ${copy.path}`)
+          .join(', ')}`,
+        hint: `pin ${name} in the root overrides, then reinstall from scratch — npm install alone keeps the stale tree on disk`,
+      });
+    }
+    for (const copy of copies) {
+      const major = semver.major(semver.coerce(copy.version) ?? '0.0.0');
+      if (major !== REACT_MAJOR) {
+        problems.push({
+          file: 'package-lock.json',
+          line: lineOf(packageLock, `"${copy.path}"`),
+          kind: 'stray-react-major',
+          message: `${name} resolves to ${copy.version} at ${copy.path}, and the family runs React ${REACT_MAJOR}`,
+          hint: `declare ^${REACT_MAJOR} and pin it in the root overrides`,
+        });
+      }
+    }
+  }
+
+  const stale = stalePeer(entries);
+  if (stale !== undefined) {
+    for (const name of ['react', 'react-dom'] as const) {
+      if (declared.get(name)?.override !== undefined) continue;
+      problems.push({
+        file: 'package.json',
+        line: lineOf(packageJson, '"dependencies"'),
+        kind: 'unpinned-react',
+        message: `${stale.name} asks for ${stale.key} ${stale.range}, which excludes React ${REACT_MAJOR}, and nothing pins ${name}`,
+        hint: `add "overrides": { "react": "^${REACT_MAJOR}…", "react-dom": "^${REACT_MAJOR}…" } to the root package.json`,
+      });
+    }
+  }
+
+  for (const name of SINGLE_COPY) {
+    const entry = declared.get(name);
+    if (entry?.override === undefined || entry.dependency === undefined) {
+      continue;
+    }
+    if (entry.override !== entry.dependency) {
+      problems.push({
+        file: 'package.json',
+        line: lineOf(packageJson, `"${name}"`),
+        kind: 'conflicting-react-pin',
+        message: `${name} is pinned to ${entry.override} while it is depended on as ${entry.dependency}, so npm install fails with EOVERRIDE`,
+        hint: `write the same range in both: the override and the dependency are one decision`,
+      });
+    }
+  }
+}
+
+/**
+ * Every real copy of each tracked package, in lock order. A workspace link is
+ * not a copy — it is the repository pointing at itself.
+ * @param entries - The lock's `packages`, as entries.
+ * @returns The copies found, keyed by package name.
+ */
+function resolvedCopies(
+  entries: ReadonlyArray<[string, unknown]>,
+): Map<string, Resolved[]> {
+  const found = new Map<string, Resolved[]>();
+  for (const [path, value] of entries) {
+    if (typeof value !== 'object' || value === null) continue;
+    const entry = value as { version?: unknown; link?: unknown };
+    if (entry.link === true) continue;
+    if (typeof entry.version !== 'string') continue;
+    for (const name of SINGLE_COPY) {
+      if (
+        path !== `node_modules/${name}` &&
+        !path.endsWith(`/node_modules/${name}`)
+      ) {
+        continue;
+      }
+      const copies = found.get(name) ?? [];
+      copies.push({ path, version: entry.version });
+      found.set(name, copies);
+    }
+  }
+  return found;
+}
+
+/**
+ * The first package in the lock whose React peer stopped before the family's
+ * major — the thing that makes npm resolve a second copy.
+ * @param entries - The lock's `packages`, as entries.
+ * @returns What asks for what, or undefined when every peer admits the major.
+ */
+function stalePeer(
+  entries: ReadonlyArray<[string, unknown]>,
+): { name: string; key: string; range: string } | undefined {
+  for (const [path, value] of entries) {
+    if (typeof value !== 'object' || value === null) continue;
+    const entry = value as {
+      peerDependencies?: unknown;
+      peerDependenciesMeta?: unknown;
+    };
+    const peers = entry.peerDependencies;
+    if (typeof peers !== 'object' || peers === null) continue;
+    const meta = (entry.peerDependenciesMeta ?? {}) as Record<
+      string,
+      { optional?: unknown } | undefined
+    >;
+    for (const key of ['react', 'react-dom']) {
+      const range = (peers as Record<string, unknown>)[key];
+      if (typeof range !== 'string') continue;
+      if (meta[key]?.optional === true) continue;
+      if (admitsMajor(range)) continue;
+      return { name: path.replace(/^.*node_modules\//, ''), key, range };
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Whether a range admits any release of the family's React major. A range that
+ * cannot be parsed is given the benefit of the doubt: a checker that accuses on
+ * a spelling it does not know teaches people to ignore it.
+ * @param range - The peer range, as written.
+ * @returns True when some version of the major satisfies it.
+ */
+function admitsMajor(range: string): boolean {
+  try {
+    return (
+      semver.intersects(range, `>=${REACT_MAJOR}.0.0 <${REACT_MAJOR + 1}.0.0`, {
+        includePrerelease: true,
+      }) ||
+      semver.satisfies(`${REACT_MAJOR}.0.0`, range, { includePrerelease: true })
+    );
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * What the root `package.json` asks for and what it pins, per tracked package.
+ * @param packageJson - The file, unparsed.
+ * @returns The declaration of each tracked package that has one.
+ */
+function declarations(packageJson: string | undefined): Map<string, Declared> {
+  const found = new Map<string, Declared>();
+  const parsed = parseJsonObject(packageJson);
+  if (parsed === undefined) return found;
+  const dependencies = {
+    ...stringEntries(parsed.dependencies),
+    ...stringEntries(parsed.devDependencies),
+  };
+  const overrides = stringEntries(parsed.overrides);
+  for (const name of SINGLE_COPY) {
+    const dependency = dependencies[name];
+    const override = overrides[name];
+    if (dependency === undefined && override === undefined) continue;
+    found.set(name, { dependency, override });
+  }
+  return found;
+}

package/src/deploy/core/types.ts

@@ -16,7 +16,11 @@ export type DeployProblemKind =
   | 'ungated-build'
   | 'missing-build-only'
   | 'test-runs-e2e'
-  | 'gated-image-build';
+  | 'gated-image-build'
+  | 'duplicate-react'
+  | 'stray-react-major'
+  | 'unpinned-react'
+  | 'conflicting-react-pin';
 
 /** One way a repository would fail, or silently mis-deploy, on the server. */
 export interface DeployProblem {

package/src/ecosystem/core/sites.ts

@@ -311,6 +311,19 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#0e7490',
     mark: { plate: '#a3620a', accent: '#22d3ee' },
   },
+  {
+    id: 'powerpoint',
+    name: { lead: 'powerpoint', alt: 'cheminfo', dot: true },
+    host: 'powerpoint.cheminfo.org',
+    tagline:
+      'Put a live tool on a slide, from the link its Share button gives.',
+    group: 'computing',
+    brand: '#c8460d',
+    // The blue sits on the white slide of the mark, where it reads at 6.7:1,
+    // and is dark enough to set the second half of the wordmark in as well.
+    brandAlt: '#1d4ed8',
+    mark: { plate: '#c8460d', accent: '#1d4ed8' },
+  },
 ];
 
 /** How a link to a site is written, beyond the site itself. */

package/src/ecosystem/core/types.ts

@@ -28,7 +28,8 @@ export type SiteId =
   | 'osiris'
   | 'atoms'
   | 'moles'
-  | 'inorganic';
+  | 'inorganic'
+  | 'powerpoint';
 
 /** A site's name, split the way its own wordmark splits it. */
 export interface SiteName {

package/src/ecosystem/ui/glyphs.tsx

@@ -470,4 +470,20 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <circle cx="22.5" cy="22.5" r="4.3" fill={alt} />
     </>
   ),
+  // A slide on its stand, with a ring standing on it: the slide is the
+  // presentation and the ring is the live tool put on it, so the ring carries
+  // the answering colour.
+  powerpoint: (alt) => (
+    <>
+      <rect x="4.5" y="6.5" width="23" height="14.5" rx="1.6" fill="#ffffff" />
+      <path
+        d="M16 21v5M11.5 26.5h9"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+      />
+      <path d="M16 8.45 20.59 11.1V16.4L16 19.05 11.41 16.4V11.1Z" fill={alt} />
+    </>
+  ),
 };

package/src/locales/de.json

@@ -1,6 +1,8 @@
 {
   "language.label": "Sprache",
   "chrome.pages": "Seiten",
+  "chrome.about": "Über",
+  "chrome.aboutTitle": "Was diese Seite ist, worauf sie aufbaut und wie man sie zitiert",
   "account.signIn": "Anmelden",
   "account.signOut": "Abmelden",
   "account.signedInAs": "Angemeldet als {name}",

package/src/locales/en.json

@@ -1,6 +1,8 @@
 {
   "language.label": "Language",
   "chrome.pages": "Pages",
+  "chrome.about": "About",
+  "chrome.aboutTitle": "What this site is, what it is built on, and how to cite it",
   "account.signIn": "Sign in",
   "account.signOut": "Sign out",
   "account.signedInAs": "Signed in as {name}",

package/src/locales/es.json

@@ -1,6 +1,8 @@
 {
   "language.label": "Idioma",
   "chrome.pages": "Páginas",
+  "chrome.about": "Acerca de",
+  "chrome.aboutTitle": "Qué es este sitio, en qué se basa y cómo citarlo",
   "account.signIn": "Iniciar sesión",
   "account.signOut": "Cerrar sesión",
   "account.signedInAs": "Sesión iniciada como {name}",