react-cheminfo 0.18.0 → 0.20.0

package/lib/molecule3d/ui/viewer.d.ts

@@ -1,25 +1,17 @@
 /**
- * Lifecycle of one molstar molecule viewer.
+ * Lifecycle of one molstar molecule viewer: `createMolecule3DViewer` builds
+ * one, and every operation a component performs on it is a method here.
  *
- * `createMolecule3DViewer` is **synchronous** on purpose. React 19 runs an
- * effect, its cleanup and the effect again on every mount in development, so an
- * awaited constructor hands the cleanup nothing to dispose and leaks a WebGL
- * context per mount. Returning the handle immediately means `dispose()` can
- * always be called; the work is queued behind `ready`.
- *
- * molstar's own UI is not mounted: every control is the component's.
+ * The constructor returns before the canvas exists — see `createViewer.ts` —
+ * so every method queues its work behind `ready` and resolves to nothing once
+ * the viewer has been disposed. molstar's own UI is not mounted: every control
+ * is the component's.
  */
+import type { Molecule3DCamera } from '../core/camera.ts';
 import type { ImageSize } from '../core/exportImage.ts';
 import type { Measurement, MeasurementKind } from '../core/measurement.ts';
 import type { Molecule3DFile } from '../core/settings.ts';
 import type { Molecule3DViewerOptions, MoleculeStyle, SurfaceStyle } from './viewerTypes.ts';
-/**
- * Create a viewer inside `container` and start initialising it.
- * @param container - A positioned element; molstar inserts its canvas into it.
- * @param options - See {@link Molecule3DViewerOptions}.
- * @returns A handle that is safe to dispose immediately.
- */
-export declare function createMolecule3DViewer(container: HTMLElement, options?: Molecule3DViewerOptions): Molecule3DViewer;
 /**
  * One molstar canvas, and every operation the component performs on it. Every
  * method resolves to nothing once `dispose` has been called.
@@ -85,6 +77,20 @@ export declare class Molecule3DViewer {
      * @returns Nothing; resolves once the move has been ordered.
      */
     resetCamera(durationMilliseconds?: number, fromFront?: boolean): Promise<void>;
+    /**
+     * Put the camera where a link says it stood.
+     * @param camera - Where to stand.
+     * @param durationMilliseconds - Transition length; 0 jumps.
+     * @returns Nothing; resolves once the move has been ordered.
+     */
+    setCamera(camera: Molecule3DCamera, durationMilliseconds?: number): Promise<void>;
+    /**
+     * Follow the camera, however it moves.
+     * @param listener - Called after every move.
+     * @returns A function that stops calling the listener; safe to call before
+     * the canvas exists.
+     */
+    watchCamera(listener: (camera: Molecule3DCamera | null) => void): () => void;
     /**
      * Turn the automatic spin on or off.
      * @param spinning - Whether the scene should keep turning.

package/lib/molecule3d/ui/viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../../../src/molecule3d/ui/viewer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAQH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAe1D,OAAO,KAAK,EACV,uBAAuB,EACvB,aAAa,EACb,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,WAAW,EACtB,OAAO,GAAE,uBAA4B,GACpC,gBAAgB,CAElB;AAED;;;GAGG;AACH,qBAAa,gBAAgB;;IAK3B,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9B;;;;OAIG;gBACS,SAAS,EAAE,WAAW,EAAE,OAAO,GAAE,uBAA4B;IAyBzE;;;;;;OAMG;IACH,YAAY,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAO3E;;;OAGG;IACH,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAO7B;;;;OAIG;IACH,WAAW,CAAC,KAAK,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC;IAIhD;;;OAGG;IACH,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;IAI5B;;;;OAIG;IACH,gBAAgB,CAAC,YAAY,EAAE,SAAS,WAAW,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAIrE;;;;OAIG;IACH,cAAc,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAM3D;;;;;;OAMG;IACH,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;IAgB1D;;;;;OAKG;IACH,WAAW,CACT,oBAAoB,SAA0B,EAC9C,SAAS,UAAQ,GAChB,OAAO,CAAC,IAAI,CAAC;IAMhB;;;;;OAKG;IACH,OAAO,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,SAAqB,GAAG,OAAO,CAAC,IAAI,CAAC;IAMrE,kEAAkE;IAClE,YAAY,IAAI,IAAI;IAKpB,sEAAsE;IACtE,OAAO,IAAI,IAAI;CAwBhB"}
+{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../../../src/molecule3d/ui/viewer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAmB1D,OAAO,KAAK,EACV,uBAAuB,EACvB,aAAa,EACb,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B;;;GAGG;AACH,qBAAa,gBAAgB;;IAK3B,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9B;;;;OAIG;gBACS,SAAS,EAAE,WAAW,EAAE,OAAO,GAAE,uBAA4B;IAczE;;;;;;OAMG;IACH,YAAY,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAO3E;;;OAGG;IACH,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAO7B;;;;OAIG;IACH,WAAW,CAAC,KAAK,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC;IAIhD;;;OAGG;IACH,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;IAI5B;;;;OAIG;IACH,gBAAgB,CAAC,YAAY,EAAE,SAAS,WAAW,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAIrE;;;;OAIG;IACH,cAAc,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAM3D;;;;;;OAMG;IACH,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;IAI1D;;;;;OAKG;IACH,WAAW,CACT,oBAAoB,SAA0B,EAC9C,SAAS,UAAQ,GAChB,OAAO,CAAC,IAAI,CAAC;IAMhB;;;;;OAKG;IACH,SAAS,CAAC,MAAM,EAAE,gBAAgB,EAAE,oBAAoB,SAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAM5E;;;;;OAKG;IACH,WAAW,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,GAAG,MAAM,IAAI;IAa5E;;;;;OAKG;IACH,OAAO,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,SAAqB,GAAG,OAAO,CAAC,IAAI,CAAC;IAMrE,kEAAkE;IAClE,YAAY,IAAI,IAAI;IAKpB,sEAAsE;IACtE,OAAO,IAAI,IAAI;CAwBhB"}

package/lib/molecule3d/ui/viewer.js

@@ -1,31 +1,18 @@
 /**
- * Lifecycle of one molstar molecule viewer.
+ * Lifecycle of one molstar molecule viewer: `createMolecule3DViewer` builds
+ * one, and every operation a component performs on it is a method here.
  *
- * `createMolecule3DViewer` is **synchronous** on purpose. React 19 runs an
- * effect, its cleanup and the effect again on every mount in development, so an
- * awaited constructor hands the cleanup nothing to dispose and leaks a WebGL
- * context per mount. Returning the handle immediately means `dispose()` can
- * always be called; the work is queued behind `ready`.
- *
- * molstar's own UI is not mounted: every control is the component's.
+ * The constructor returns before the canvas exists — see `createViewer.ts` —
+ * so every method queues its work behind `ready` and resolves to nothing once
+ * the viewer has been disposed. molstar's own UI is not mounted: every control
+ * is the component's.
  */
-import { PluginViewModel } from 'molstar/lib/extensions/plugin/view-model.js';
-// Lowercased on import: it is a factory, not a constructor.
-import { DefaultPluginSpec as defaultPluginSpec } from 'molstar/lib/mol-plugin/spec.js';
-import { Color } from 'molstar/lib/mol-util/color/color.js';
-import { DEFAULT_CAMERA_DURATION, DEFAULT_SPIN_SPEED, resetCamera, setSpin, } from "./camera.js";
+import { DEFAULT_CAMERA_DURATION, DEFAULT_SPIN_SPEED, applyCamera, resetCamera, setSpin, watchCamera, } from "./camera.js";
+import { captureScene } from "./captureScene.js";
 import { MeasurementPicker, clearMeasurements, renderMeasurements, } from "./measurements.js";
 import { clearMolecule, renderMolecule } from "./renderMolecule.js";
 import { clearSurface, renderSurface } from "./renderSurface.js";
-/**
- * Create a viewer inside `container` and start initialising it.
- * @param container - A positioned element; molstar inserts its canvas into it.
- * @param options - See {@link Molecule3DViewerOptions}.
- * @returns A handle that is safe to dispose immediately.
- */
-export function createMolecule3DViewer(container, options = {}) {
-    return new Molecule3DViewer(container, options);
-}
+import { mountMolecule3DPlugin } from "./viewerSpec.js";
 /**
  * One molstar canvas, and every operation the component performs on it. Every
  * method resolves to nothing once `dispose` has been called.
@@ -44,18 +31,7 @@ export class Molecule3DViewer {
     constructor(container, options = {}) {
         const { background = '#ffffff', // tokens-ok: a WebGL clear colour
         onMeasure = ignore, } = options;
-        const spec = defaultPluginSpec();
-        this.#model = new PluginViewModel({
-            spec: {
-                ...spec,
-                canvas3d: {
-                    ...spec.canvas3d,
-                    renderer: { backgroundColor: Color.fromHexStyle(background) },
-                    camera: { helper: { axes: { name: 'off', params: {} } } },
-                },
-            },
-        });
-        this.#model.mount(container);
+        this.#model = mountMolecule3DPlugin(container, background);
         this.ready = this.#model.initialized;
         // Registered before any `#run`, so the picker exists by the time one runs.
         this.ready.then(() => {
@@ -128,19 +104,7 @@ export class Molecule3DViewer {
      * @throws {Error} When the plugin has no screenshot helper.
      */
     captureImage(size) {
-        return this.#run(async (plugin) => {
-            const helper = plugin.helpers.viewportScreenshot;
-            if (helper === undefined) {
-                throw new Error('This viewer cannot take a picture of its scene.');
-            }
-            helper.behaviors.values.next({
-                ...helper.values,
-                resolution: { name: 'custom', params: size },
-                axes: { name: 'off', params: {} },
-                transparent: false,
-            });
-            return helper.getImageDataUri();
-        });
+        return this.#run((plugin) => captureScene(plugin, size));
     }
     /**
      * Frame everything on screen.
@@ -153,6 +117,36 @@ export class Molecule3DViewer {
             resetCamera(plugin, durationMilliseconds, fromFront);
         });
     }
+    /**
+     * Put the camera where a link says it stood.
+     * @param camera - Where to stand.
+     * @param durationMilliseconds - Transition length; 0 jumps.
+     * @returns Nothing; resolves once the move has been ordered.
+     */
+    setCamera(camera, durationMilliseconds = 0) {
+        return this.#run((plugin) => {
+            applyCamera(plugin, camera, durationMilliseconds);
+        });
+    }
+    /**
+     * Follow the camera, however it moves.
+     * @param listener - Called after every move.
+     * @returns A function that stops calling the listener; safe to call before
+     * the canvas exists.
+     */
+    watchCamera(listener) {
+        let stop = null;
+        let cancelled = false;
+        void this.#run((plugin) => {
+            if (!cancelled)
+                stop = watchCamera(plugin, listener);
+        });
+        return () => {
+            cancelled = true;
+            stop?.();
+            stop = null;
+        };
+    }
     /**
      * Turn the automatic spin on or off.
      * @param spinning - Whether the scene should keep turning.

package/lib/molecule3d/ui/viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewer.js","sourceRoot":"","sources":["../../../src/molecule3d/ui/viewer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"viewer.js","sourceRoot":"","sources":["../../../src/molecule3d/ui/viewer.ts"],"names":[],"mappings":"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"}

package/lib/molecule3d/ui/viewerSpec.d.ts

@@ -0,0 +1,17 @@
+/**
+ * How the molecule viewer configures molstar: the plugin spec it mounts with.
+ *
+ * molstar's own UI is not mounted — every control is the component's — and the
+ * axes helper is off, since a molecule is read from its own shape rather than
+ * from the world axes.
+ */
+import { PluginViewModel } from 'molstar/lib/extensions/plugin/view-model.js';
+/**
+ * Build a view model for one canvas and mount it.
+ * @param container - A positioned element; molstar inserts its canvas into it.
+ * @param background - Scene background as `#rrggbb`; a WebGL clear colour, so
+ * it cannot be a CSS custom property.
+ * @returns The mounted view model, still initialising.
+ */
+export declare function mountMolecule3DPlugin(container: HTMLElement, background: string): PluginViewModel;
+//# sourceMappingURL=viewerSpec.d.ts.map

package/lib/molecule3d/ui/viewerSpec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewerSpec.d.ts","sourceRoot":"","sources":["../../../src/molecule3d/ui/viewerSpec.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAK9E;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,WAAW,EACtB,UAAU,EAAE,MAAM,GACjB,eAAe,CAcjB"}

package/lib/molecule3d/ui/viewerSpec.js

@@ -0,0 +1,34 @@
+/**
+ * How the molecule viewer configures molstar: the plugin spec it mounts with.
+ *
+ * molstar's own UI is not mounted — every control is the component's — and the
+ * axes helper is off, since a molecule is read from its own shape rather than
+ * from the world axes.
+ */
+import { PluginViewModel } from 'molstar/lib/extensions/plugin/view-model.js';
+// Lowercased on import: it is a factory, not a constructor.
+import { DefaultPluginSpec as defaultPluginSpec } from 'molstar/lib/mol-plugin/spec.js';
+import { Color } from 'molstar/lib/mol-util/color/color.js';
+/**
+ * Build a view model for one canvas and mount it.
+ * @param container - A positioned element; molstar inserts its canvas into it.
+ * @param background - Scene background as `#rrggbb`; a WebGL clear colour, so
+ * it cannot be a CSS custom property.
+ * @returns The mounted view model, still initialising.
+ */
+export function mountMolecule3DPlugin(container, background) {
+    const spec = defaultPluginSpec();
+    const model = new PluginViewModel({
+        spec: {
+            ...spec,
+            canvas3d: {
+                ...spec.canvas3d,
+                renderer: { backgroundColor: Color.fromHexStyle(background) },
+                camera: { helper: { axes: { name: 'off', params: {} } } },
+            },
+        },
+    });
+    model.mount(container);
+    return model;
+}
+//# sourceMappingURL=viewerSpec.js.map

package/lib/molecule3d/ui/viewerSpec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewerSpec.js","sourceRoot":"","sources":["../../../src/molecule3d/ui/viewerSpec.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAC9E,4DAA4D;AAC5D,OAAO,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxF,OAAO,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,UAAU,qBAAqB,CACnC,SAAsB,EACtB,UAAkB;IAElB,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;IACjC,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC;QAChC,IAAI,EAAE;YACJ,GAAG,IAAI;YACP,QAAQ,EAAE;gBACR,GAAG,IAAI,CAAC,QAAQ;gBAChB,QAAQ,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;gBAC7D,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE;aAC1D;SACF;KACF,CAAC,CAAC;IACH,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACvB,OAAO,KAAK,CAAC;AACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.18.0",
+  "version": "0.20.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",

package/src/about/core/about.ts

@@ -64,14 +64,22 @@ export interface AboutContent {
    */
   repository?: string;
   /**
-   * Which build is running, from `virtual:cheminfo-build-info` — never written
+   * Whether a visitor can open that repository. A site naming a repository of
+   * its own says so here too, since the family's record then describes another
+   * one.
+   * @default the `publicRepository` of the ECOSYSTEM_SITES record
+   */
+  publicRepository?: boolean;
+  /**
+   * Which build is running, from `react-cheminfo/build-info` — never written
    * by hand, which is what keeps it true after the next release.
    * @default undefined — the site's build does not publish one
    */
   build?: BuildInfo;
   /**
-   * Where a problem is reported.
-   * @default the repository's /issues
+   * Where a problem is reported: an address a visitor can actually open, so a
+   * site whose sources are private names one of its own or says nothing.
+   * @default the repository's /issues, and none at all when it is private
    */
   issues?: string;
 }
@@ -108,9 +116,12 @@ export interface ResolvedAbout {
   providedBy: ProviderEntry[];
   license: string;
   repository: string;
+  /** Whether a visitor can open the repository, and so whether it is named. */
+  publicRepository: boolean;
   /** Which build is running, or `undefined` when the site does not say. */
   build: BuildInfo | undefined;
-  issues: string;
+  /** Where a problem is reported, or `undefined` when there is nowhere open. */
+  issues: string | undefined;
 }
 
 /**
@@ -127,6 +138,8 @@ export function resolveAbout(content: AboutContent): ResolvedAbout {
       ? siteById(content.siteId)
       : content.siteId;
   const repository = content.repository ?? site.repository;
+  const publicRepository =
+    content.publicRepository ?? site.publicRepository ?? false;
 
   return {
     site,
@@ -139,8 +152,15 @@ export function resolveAbout(content: AboutContent): ResolvedAbout {
     providedBy: providers(content.providedBy ?? []),
     license: content.license ?? DEFAULT_LICENSE,
     repository,
+    publicRepository,
     build: content.build,
-    issues: content.issues ?? `${withoutTrailingSlash(repository)}/issues`,
+    // A tracker behind a private repository answers 404 to every visitor, so
+    // a site that names none of its own asks for a report nowhere.
+    issues:
+      content.issues ??
+      (publicRepository
+        ? `${withoutTrailingSlash(repository)}/issues`
+        : undefined),
   };
 }
 

package/src/about/core/index.ts

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

package/src/about/core/repository.ts

@@ -0,0 +1,22 @@
+/**
+ * What can be linked to inside a repository, and when.
+ *
+ * Only GitHub has the addresses the About page builds — a release tag, a
+ * commit — and only a repository a visitor can open is worth pointing them at.
+ */
+
+/** Where our repositories live, and the only host whose paths we know. */
+const GITHUB = 'https://github.com/';
+
+/**
+ * The sources as a base a release or a commit can be appended to.
+ * @param repository - Where the sources live.
+ * @returns The address without its trailing slash, or `undefined` when it is
+ * not a GitHub repository and nothing inside it can be addressed.
+ */
+export function githubSources(repository: string): string | undefined {
+  const sources = repository.endsWith('/')
+    ? repository.slice(0, -1)
+    : repository;
+  return sources.startsWith(GITHUB) ? sources : undefined;
+}

package/src/about/ui/AboutBuild.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
 import type { BuildInfo } from '../../build/core/buildInfo.ts';
 import { formatBuiltAt, shortCommit } from '../../build/core/buildInfo.ts';
+import { githubSources } from '../core/repository.ts';
 
 export interface AboutBuildProps {
   /** What the build published about itself. */
@@ -11,38 +12,32 @@ export interface AboutBuildProps {
 }
 
 /**
- * The one line that says which build of the site a visitor has open.
+ * The one line that says when the build a visitor has open was made.
  *
  * A report of something going wrong is worth answering only when we know what
- * was running, and a visitor cannot read that off the page otherwise. The
- * version and the commit link into the repository, so the change that caused a
- * problem is one click from the page that shows it.
+ * was running. The version itself is in the hero, where a reader is asked to
+ * quote it from; this line carries the rest, and the commit links into the
+ * repository, so the change that caused a problem is one click from the page
+ * that shows it.
  * @param props - See {@link AboutBuildProps}.
  * @returns The line.
  */
 export function AboutBuild(props: AboutBuildProps): ReactElement {
   const { build, repository } = props;
-  const sources = repository.endsWith('/')
-    ? repository.slice(0, -1)
-    : repository;
-  const onGitHub = sources.startsWith(GITHUB);
+  const sources = githubSources(repository);
 
   return (
     <p style={PARAGRAPH_STYLE}>
-      Running version{' '}
-      <Reference
-        href={
-          onGitHub ? `${sources}/releases/tag/v${build.version}` : undefined
-        }
-      >
-        {build.version}
-      </Reference>
-      , built {formatBuiltAt(build.builtAt)}
+      Built {formatBuiltAt(build.builtAt)}
       {build.commit === undefined ? null : (
         <>
           {' from commit '}
           <Reference
-            href={onGitHub ? `${sources}/commit/${build.commit}` : undefined}
+            href={
+              sources === undefined
+                ? undefined
+                : `${sources}/commit/${build.commit}`
+            }
           >
             {shortCommit(build.commit)}
           </Reference>
@@ -67,8 +62,6 @@ function Reference(props: {
   );
 }
 
-const GITHUB = 'https://github.com/';
-
 const PARAGRAPH_STYLE = {
   margin: '8px 0 0',
   color: 'var(--text-muted)',

package/src/about/ui/AboutPage.tsx

@@ -10,6 +10,7 @@ import { AboutBuild } from './AboutBuild.tsx';
 import { AboutCitations } from './AboutCitations.tsx';
 import { AboutProvidedBy } from './AboutProvidedBy.tsx';
 import { AboutSection } from './AboutSection.tsx';
+import { AboutVersion } from './AboutVersion.tsx';
 
 export interface AboutPageProps {
   /** What the site says about itself. */
@@ -67,20 +68,22 @@ export function AboutPage(props: AboutPageProps): ReactElement {
       }
       style={PAGE_STYLE}
     >
-      <header
-        className="about-hero"
-        style={logo === undefined ? HERO_STYLE : LOGO_HERO_STYLE}
-      >
+      <header className="about-hero" style={HERO_STYLE}>
         {logo === undefined
           ? (mark ?? <SiteMark site={site} size={56} />)
           : null}
-        <div>
+        <div style={HERO_BODY_STYLE}>
           <h1 style={logo === undefined ? NAME_STYLE : LOGO_NAME_STYLE}>
             {logo ?? <Wordmark site={site} size={26} />}
           </h1>
           <p style={TAGLINE_STYLE}>{site.tagline}</p>
           <p style={WHAT_STYLE}>{about.what}</p>
         </div>
+        <AboutVersion
+          build={about.build}
+          repository={about.repository}
+          publicRepository={about.publicRepository}
+        />
       </header>
 
       {about.people.length === 0 && about.providedBy.length === 0 ? null : (
@@ -122,23 +125,36 @@ export function AboutPage(props: AboutPageProps): ReactElement {
         </AboutSection>
       )}
 
-      <AboutSection title="Licence and source" className="about-licence">
-        <p style={FIRST_PARAGRAPH_STYLE}>
-          {about.license}, © cheminfo. Use it in a course, fork it, or lift a
-          piece of it into something else. The sources are at{' '}
-          <ExternalLink href={about.repository} />.
-        </p>
-        {about.build === undefined ? null : (
-          <AboutBuild build={about.build} repository={about.repository} />
-        )}
-      </AboutSection>
+      {/*
+        A repository nobody outside can open is named nowhere: a licence a
+        reader cannot act on and a link that answers 404 say less than silence.
+        The version stays in the hero, unlinked, so a report still names a build.
+      */}
+      {!about.publicRepository ? null : (
+        <AboutSection title="Licence and source" className="about-licence">
+          <p style={FIRST_PARAGRAPH_STYLE}>
+            {about.license}, © cheminfo. Use it in a course, fork it, or lift a
+            piece of it into something else. The sources are at{' '}
+            <ExternalLink href={about.repository} />.
+          </p>
+          {about.build === undefined ? null : (
+            <AboutBuild build={about.build} repository={about.repository} />
+          )}
+        </AboutSection>
+      )}
 
-      <AboutSection title="Found a problem?" className="about-issues">
-        <p style={FIRST_PARAGRAPH_STYLE}>
-          Tell us: a report naming what you typed and what came back is the
-          fastest fix there is. <ExternalLink href={about.issues} />.
-        </p>
-      </AboutSection>
+      {/*
+        Asking for a report is worth nothing without somewhere to send it, and
+        the tracker of a private repository answers 404 to every visitor.
+      */}
+      {about.issues === undefined ? null : (
+        <AboutSection title="Found a problem?" className="about-issues">
+          <p style={FIRST_PARAGRAPH_STYLE}>
+            Tell us: a report naming what you typed and what came back is the
+            fastest fix there is. <ExternalLink href={about.issues} />.
+          </p>
+        </AboutSection>
+      )}
     </div>
   );
 }
@@ -162,6 +178,11 @@ const PAGE_STYLE = {
   gap: 10,
 } as const satisfies CSSProperties;
 
+const HERO_BODY_STYLE = {
+  flex: '1 1 auto',
+  minWidth: 0,
+} as const satisfies CSSProperties;
+
 const HERO_STYLE = {
   display: 'flex',
   alignItems: 'flex-start',
@@ -179,13 +200,6 @@ 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;

package/src/about/ui/AboutVersion.tsx

@@ -0,0 +1,95 @@
+/**
+ * Which build of a site a visitor has open, in the corner of its hero.
+ *
+ * A report of something going wrong is worth answering only when we know what
+ * was running, and that is the one thing an About page cannot say from a
+ * hand-written record. It sits at the top of the page rather than at the
+ * bottom because it is the one line a reader is asked to quote back.
+ */
+
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { BuildInfo } from '../../build/core/buildInfo.ts';
+import {
+  buildLabel,
+  buildStamp,
+  buildSummary,
+  releasedVersion,
+} from '../../build/core/buildInfo.ts';
+import { githubSources } from '../core/repository.ts';
+
+export interface AboutVersionProps {
+  /** What the build published about itself, or `undefined` when it published none. */
+  build: BuildInfo | undefined;
+  /** Where the sources live, which is what the badge links into. */
+  repository: string;
+  /** Whether a visitor can open that repository, and so whether it is linked. */
+  publicRepository: boolean;
+}
+
+/**
+ * The build badge: the release a site is serving, or the commit it was built
+ * from while it has no release yet, and when it was made.
+ * @param props - See {@link AboutVersionProps}.
+ * @returns The badge, or `null` when the build says nothing worth showing.
+ */
+export function AboutVersion(props: AboutVersionProps): ReactElement | null {
+  const { build, repository, publicRepository } = props;
+  const label = buildLabel(build);
+  if (build === undefined || label === undefined) return null;
+  const href = publicRepository ? addressOf(build, repository) : undefined;
+  const summary = buildSummary(build);
+  // The instant belongs on the badge rather than in its hover: a version
+  // nobody can date says nothing about how old the page they read is.
+  const badge = `${label} · ${buildStamp(build.builtAt)}`;
+  if (href === undefined) {
+    return (
+      <span style={BADGE_STYLE} className="about-version" title={summary}>
+        {badge}
+      </span>
+    );
+  }
+
+  return (
+    <a
+      className="about-version"
+      href={href}
+      title={summary}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={LINK_BADGE_STYLE}
+    >
+      {badge}
+    </a>
+  );
+}
+
+/**
+ * What the badge opens: the release it names, or the commit it was built from.
+ * @param build - What the build published about itself.
+ * @param repository - Where the sources live.
+ * @returns The address, or `undefined` when nothing inside the repository can
+ * be addressed.
+ */
+function addressOf(build: BuildInfo, repository: string): string | undefined {
+  const sources = githubSources(repository);
+  if (sources === undefined) return undefined;
+  const version = releasedVersion(build);
+  if (version !== undefined) return `${sources}/releases/tag/v${version}`;
+  return build.commit === undefined
+    ? undefined
+    : `${sources}/commit/${build.commit}`;
+}
+
+const BADGE_STYLE = {
+  flex: '0 0 auto',
+  fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+  fontSize: 13,
+  color: 'var(--text-muted)',
+  whiteSpace: 'nowrap',
+} as const satisfies CSSProperties;
+
+const LINK_BADGE_STYLE = {
+  ...BADGE_STYLE,
+  color: 'var(--accent)',
+} as const satisfies CSSProperties;