react-cheminfo 0.40.1 → 0.42.0

package/src/deploy/core/checkDeploy.ts

@@ -1,3 +1,4 @@
+import { readBuildGate } from './buildGate.ts';
 import { readComposeFile } from './composeFile.ts';
 import { readEnvExample } from './envExample.ts';
 import { readPageCache } from './pageCache.ts';
@@ -18,7 +19,8 @@ import { DEPLOY_COMPOSE_FILES } from './types.ts';
  * reports it healthy. So a repository has to hand it a selectable tag on every
  * image we build, an `IMAGE_NAME` that names the package our own workflow
  * publishes, a compose file that parses on a checkout with no `.env` yet, and a
- * health probe to read. It also has to publish that image in the first place:
+ * health probe to read, and a `build` that cannot write a bundle until the
+ * tests have passed. It also has to publish that image in the first place:
  * with no `latest` to pull the script builds from source on the deploy host,
  * and the install that follows must survive a blip in the registry. It also has to hand the browser a page the browser will
  * not keep, or the next deploy leaves returning visitors on a blank one. Each
@@ -84,6 +86,8 @@ export function findDeployProblems(
     readInstallRetries(dockerfile, problems);
   }
 
+  readBuildGate(byPath.get('package.json'), dockerfile, problems);
+
   readPublishedImage(byPath.get(DOCKER_IMAGE_WORKFLOW), problems);
 
   const gitignore = byPath.get('.gitignore');

package/src/deploy/core/index.ts

@@ -1,3 +1,4 @@
+export { readBuildGate } from './buildGate.ts';
 export { findDeployProblems } from './checkDeploy.ts';
 export type {
   CheckDeployOptions,

package/src/deploy/core/publishedImage.ts

@@ -53,7 +53,11 @@ export function readPublishedImage(
   }
 
   const value = match.groups.value ?? '';
-  if (value.includes('github.ref_name') && !value.includes('event_name')) {
+  // Either guard keeps a branch name out: `event_name == 'push'` fires only for
+  // the tag push, and `ref_type == 'tag'` only when the ref is one. What is
+  // refused is the bare ref, which a manual run hands over as a branch.
+  const guarded = value.includes('event_name') || value.includes('ref_type');
+  if (value.includes('github.ref_name') && !guarded) {
     problems.push({
       file: DOCKER_IMAGE_WORKFLOW,
       line: lineOf(workflow, TAG_VERSION),

package/src/deploy/core/types.ts

@@ -12,7 +12,11 @@ export type DeployProblemKind =
   | 'missing-deploy-ignore'
   | 'cacheable-page'
   | 'unpublishable-image'
-  | 'brittle-install';
+  | 'brittle-install'
+  | 'ungated-build'
+  | 'missing-build-only'
+  | 'test-runs-e2e'
+  | 'gated-image-build';
 
 /** One way a repository would fail, or silently mis-deploy, on the server. */
 export interface DeployProblem {

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}",

package/src/locales/fr.json

@@ -1,6 +1,8 @@
 {
   "language.label": "Langue",
   "chrome.pages": "Pages",
+  "chrome.about": "À propos",
+  "chrome.aboutTitle": "Ce qu'est ce site, sur quoi il est bâti et comment le citer",
   "account.signIn": "Se connecter",
   "account.signOut": "Se déconnecter",
   "account.signedInAs": "Connecté comme {name}",

package/src/locales/it.json

@@ -1,6 +1,8 @@
 {
   "language.label": "Lingua",
   "chrome.pages": "Pagine",
+  "chrome.about": "Informazioni",
+  "chrome.aboutTitle": "Cosa è questo sito, su cosa si basa e come citarlo",
   "account.signIn": "Accedi",
   "account.signOut": "Esci",
   "account.signedInAs": "Accesso effettuato come {name}",

package/src/periodic/ui/ElementCell.tsx

@@ -5,7 +5,7 @@
  * A cell is a real `<button>`, so Tab reaches it, Enter and Space activate it,
  * and a screen reader reads the element's name rather than its symbol.
  *
- * Everything written in it is sized in container-query units, so a cell shows
+ * Everything written in it is a share of the table's width, so a cell shows
  * the same proportions at 280px beside a chart and across a lecture-hall
  * screen — the table a class reads is the same drawing, larger.
  */
@@ -16,6 +16,8 @@ import { useState } from 'react';
 import type { Swatch } from '../../color/core/interpolate.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 
+import { UNIT, ofWidth } from './unit.ts';
+
 /** What {@link ElementCell} needs to draw one element. */
 export interface ElementCellProps {
   /** Atomic number, written small in the corner. */
@@ -120,8 +122,8 @@ export function ElementCell(props: ElementCellProps): ReactElement {
         outlineColor: swatch.foreground,
         // Thick enough to be seen from the back of a room, and drawn inside
         // the cell so a neighbour never covers it.
-        outlineWidth: 'max(2px, 0.3cqw)',
-        outlineOffset: 'max(-3px, -0.4cqw)',
+        outlineWidth: `max(2px, ${ofWidth(0.3)})`,
+        outlineOffset: `max(-3px, ${ofWidth(-0.4)})`,
         // The cell the pointer is on, for a class following a demonstration.
         filter: isHovered ? 'brightness(1.08)' : undefined,
       }}
@@ -154,7 +156,7 @@ export function ElementCell(props: ElementCellProps): ReactElement {
  * @returns A CSS length.
  */
 function symbolFontSize(symbol: string): string {
-  return fitted(symbolWidthInEm(symbol), SYMBOL_CQW, '0.5rem');
+  return fitted(symbolWidthInEm(symbol), SYMBOL_CAP, '0.5rem');
 }
 
 /**
@@ -167,7 +169,7 @@ function symbolFontSize(symbol: string): string {
  * @returns A CSS length.
  */
 function detailFontSize(detail: string): string {
-  return fitted(detailWidthInEm(detail), DETAIL_CQW, '0.25rem');
+  return fitted(detailWidthInEm(detail), DETAIL_CAP, '0.25rem');
 }
 
 /**
@@ -182,7 +184,7 @@ function detailFontSize(detail: string): string {
  * @returns A CSS length.
  */
 function fitted(widthInEm: number, cap: string, floor: string): string {
-  const room = `calc((${CELL_CQW} - ${CELL_CHROME}) / ${widthInEm.toFixed(2)})`;
+  const room = `calc((${UNIT} * ${String(CELL_SHARE)} - ${CELL_CHROME}) / ${widthInEm.toFixed(2)})`;
   return `max(${floor}, min(${cap}, ${room}))`;
 }
 
@@ -222,7 +224,7 @@ function detailWidthInEm(detail: string): number {
 const TABULAR_EM = 0.6;
 
 /** The size the symbol is written at wherever it fits, as a share of the table. */
-const SYMBOL_CQW = '2.4cqw';
+const SYMBOL_CAP = ofWidth(2.4);
 
 /**
  * The tallest the third line is ever written, as a share of the table.
@@ -231,7 +233,7 @@ const SYMBOL_CQW = '2.4cqw';
  * the value is what the table is being read for, and a value half the size of
  * the symbol is the one thing on the cell a class cannot make out.
  */
-const DETAIL_CQW = '1.6cqw';
+const DETAIL_CAP = ofWidth(1.6);
 
 /**
  * The band at each end of a cell: the atomic number at the top, whatever the
@@ -241,10 +243,10 @@ const DETAIL_CQW = '1.6cqw';
  * sit at the centre of the cell rather than near it — a bottom band wider than
  * the top one by a third lifted every symbol in the table two pixels.
  */
-const EDGE_BAND = '1.8cqw';
+const EDGE_BAND = ofWidth(1.8);
 
-/** How wide one column is, as a share of the table's width. */
-const CELL_CQW = '4.85cqw';
+/** How wide one column is, in per cent of the table's width. */
+const CELL_SHARE = 4.85;
 
 /** What the border and the padding of a cell take off that width. */
 const CELL_CHROME = '4px';
@@ -275,7 +277,7 @@ const cellStyle = {
 
 const numberStyle = {
   alignSelf: 'start',
-  fontSize: 'max(0.33rem, 1.1cqw)',
+  fontSize: `max(0.33rem, ${ofWidth(1.1)})`,
   fontVariantNumeric: 'tabular-nums',
   justifySelf: 'start',
   lineHeight: 1,

package/src/periodic/ui/PeriodicTable.tsx

@@ -19,6 +19,7 @@ import type {
 import { useEffect, useRef } from 'react';
 
 import type { Swatch } from '../../color/core/interpolate.ts';
+import { useResizeObserver } from '../../hooks/ui/useResizeObserver.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import { categorySwatch } from '../core/categories.ts';
 import type { PeriodicElement } from '../core/elements.ts';
@@ -36,6 +37,7 @@ import {
   HeaderStrips,
   InnerTransitionMarkers,
 } from './PeriodicTableChrome.tsx';
+import { UNIT_PROPERTY, ofWidth, unitValue } from './unit.ts';
 
 /** What {@link PeriodicTable} needs. */
 export interface PeriodicTableProps {
@@ -147,10 +149,22 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   } = props;
 
   const t = useChromeT();
+  const rootRef = useRef<HTMLDivElement>(null);
   const gridRef = useRef<HTMLDivElement>(null);
   const cameFromKeyRef = useRef(false);
   const offset = headers ? 1 : 0;
 
+  // The drawing is read off this one number, so it is written straight onto
+  // the element rather than held as state: a window being dragged would
+  // otherwise re-render all 118 cells per frame, and the engine recomputes
+  // every length from the custom property on its own. A width of zero is a
+  // table in a tab nobody has opened; the last measurement stands until it is
+  // shown, and the observer fires again then.
+  useResizeObserver(rootRef, ({ width }) => {
+    if (width === 0) return;
+    rootRef.current?.style.setProperty(UNIT_PROPERTY, unitValue(width));
+  });
+
   useEffect(() => {
     if (!cameFromKeyRef.current) return;
     cameFromKeyRef.current = false;
@@ -171,7 +185,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   }
 
   return (
-    <div className={className} style={rootStyle}>
+    <div ref={rootRef} className={className} style={rootStyle}>
       <div
         ref={gridRef}
         role="grid"
@@ -218,13 +232,13 @@ function insetStyle(offset: number): CSSProperties {
     display: 'flex',
     // A column of air on each side, so the writing reads as sitting in the
     // block rather than as running into the cells beside it.
-    padding: '0 2.4cqw',
+    padding: `0 ${ofWidth(2.4)}`,
     gridColumn: `${String(EMPTY_BLOCK.column + offset)} / span ${String(EMPTY_BLOCK.columnSpan)}`,
     gridRow: `${String(EMPTY_BLOCK.row + offset)} / span ${String(EMPTY_BLOCK.rowSpan)}`,
     // A share of the table, with a floor, exactly as a cell sizes its symbol:
     // the block holds the same three rows at every width, so what is written
     // in it has to shrink with them.
-    fontSize: 'max(0.6rem, 1.8cqw)',
+    fontSize: `max(0.6rem, ${ofWidth(1.8)})`,
     lineHeight: 1.35,
     minWidth: 0,
     overflow: 'hidden',
@@ -256,10 +270,10 @@ const MIN_WIDTH = 280;
  * table: a cell keeps the band it writes a value in whether or not that table
  * writes one.
  */
-const ROW_HEIGHT = '6.8cqw';
+const ROW_HEIGHT = ofWidth(6.8);
 
 /** The band the two inner-transition series were lifted out across. */
-const SERIES_GAP = 'max(6px, 1.1cqw)';
+const SERIES_GAP = `max(6px, ${ofWidth(1.1)})`;
 
 const rootStyle = {
   display: 'flex',
@@ -268,7 +282,10 @@ const rootStyle = {
   minWidth: MIN_WIDTH,
   // Everything inside — the height of a row as much as the type in a cell — is
   // a share of this box rather than of the page, so the same table reads at
-  // 280px beside a chart and fills a lecture-hall screen at twice that.
+  // 280px beside a chart and fills a lecture-hall screen at twice that. The
+  // share is measured (see `unit.ts`); the container is what the `1cqw`
+  // fallback and a site's own `@container` rules are answered by, and it keeps
+  // this box's width independent of what is written inside it.
   containerType: 'inline-size',
 } as const satisfies CSSProperties;
 
@@ -297,7 +314,7 @@ function gridStyle(headers: boolean): CSSProperties {
   }
   return {
     ...baseGridStyle,
-    gridTemplateColumns: `max(14px, 2.4cqw) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-    gridTemplateRows: `max(12px, 2cqw) ${rows}`,
+    gridTemplateColumns: `max(14px, ${ofWidth(2.4)}) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+    gridTemplateRows: `max(12px, ${ofWidth(2)}) ${rows}`,
   };
 }

package/src/periodic/ui/PeriodicTableChrome.tsx

@@ -14,6 +14,8 @@ import {
   INNER_TRANSITION_ROWS,
 } from '../core/layout.ts';
 
+import { ofWidth } from './unit.ts';
+
 /** What {@link HeaderStrips} needs. */
 interface HeaderStripsProps {
   /**
@@ -150,7 +152,7 @@ const headerStyle = {
   alignItems: 'center',
   color: TOKEN.textMuted,
   display: 'flex',
-  fontSize: 'max(0.45rem, 1.35cqw)',
+  fontSize: `max(0.45rem, ${ofWidth(1.35)})`,
   justifyContent: 'center',
   padding: 0,
 } as const satisfies CSSProperties;
@@ -168,6 +170,6 @@ const markerStyle = {
   borderRadius: 3,
   color: TOKEN.textMuted,
   display: 'flex',
-  fontSize: 'max(0.4rem, 1.15cqw)',
+  fontSize: `max(0.4rem, ${ofWidth(1.15)})`,
   justifyContent: 'center',
 } as const satisfies CSSProperties;

package/src/periodic/ui/unit.ts

@@ -0,0 +1,48 @@
+/**
+ * The length the whole table is drawn in multiples of.
+ *
+ * Every part of the drawing — the height of a row, the type in a cell, the
+ * band the inner-transition series were lifted out across — is a share of the
+ * table's own width, so the same table reads at 280px beside a chart and fills
+ * a lecture-hall screen at twice that.
+ *
+ * The share is a measured length rather than a container-query unit, because
+ * WebKit resolves `cqw` against the container's *zoomed* width and then applies
+ * the zoom to the result a second time: inside a host that zooms the page — a
+ * PowerPoint add-in frame runs at 1.34 — every cq length came out 34% too
+ * large, which fits none of the floors the type is held above and overran the
+ * cells. `ResizeObserver` reports the content box in the element's own CSS
+ * pixels, which is the space `font-size` is resolved in, so one hundredth of
+ * that number is the share, on every engine and at any zoom.
+ * `getBoundingClientRect` is not: it reports the zoomed width, which would
+ * reproduce the defect.
+ *
+ * `1cqw` stays as the fallback, so a render that never measures — a server
+ * render, a prerendered page before its script runs — is the drawing it has
+ * always been.
+ */
+
+/** The custom property the measured share is published as. */
+export const UNIT_PROPERTY = '--periodic-unit';
+
+/** One per cent of the table's width, as a CSS length. */
+export const UNIT = `var(${UNIT_PROPERTY}, 1cqw)`;
+
+/**
+ * A share of the table's width, as a CSS length.
+ * @param share - The share, in per cent of the width.
+ * @returns A CSS length, usable wherever a length is.
+ */
+export function ofWidth(share: number): string {
+  return `calc(${UNIT} * ${String(share)})`;
+}
+
+/**
+ * The value the custom property takes for a table of the given width.
+ * @param width - The content-box width, in CSS pixels, as `ResizeObserver`
+ * reports it.
+ * @returns The length one per cent of that width is.
+ */
+export function unitValue(width: number): string {
+  return `${(width / 100).toFixed(3)}px`;
+}

package/src/share/ui/SharePartRow.tsx

@@ -45,6 +45,7 @@ export function SharePartRow(props: SharePartRowProps): ReactElement {
   const { label, description, on, descriptions, onChange, onPointed } = props;
   const t = useChromeT();
   const id = useId();
+  const labelId = `${id}-label`;
 
   return (
     <div
@@ -54,7 +55,7 @@ export function SharePartRow(props: SharePartRowProps): ReactElement {
       onFocus={() => onPointed?.(true)}
       onBlur={() => onPointed?.(false)}
     >
-      <label className="share-part__label" htmlFor={id}>
+      <label className="share-part__label" htmlFor={id} id={labelId}>
         {label}
       </label>
       {descriptions === 'help' ? (
@@ -63,6 +64,10 @@ export function SharePartRow(props: SharePartRowProps): ReactElement {
       <Switch
         id={id}
         className="share-part__switch"
+        // Blueprint wraps the input in a label of its own carrying the On/Off
+        // text, and a wrapping label beats an `htmlFor` one: without this the
+        // switch is named "OnOff" and a screen reader never says what is on.
+        aria-labelledby={labelId}
         checked={on}
         innerLabel={t('share.off')}
         innerLabelChecked={t('share.on')}

package/styles/chrome.css

@@ -341,33 +341,42 @@ button {
   min-height: 0;
   flex: 1 1 auto;
   flex-direction: column;
-  padding: 12px 16px 0;
+  padding: 0 16px;
   gap: 12px;
 }
 
 /* The ready-made links and the three things one does with the link they write,
    on one row: the tabs say which link, the buttons act on it. A dialog too
-   narrow for both wraps the buttons under the tabs rather than cutting them. */
+   narrow for both wraps the buttons under the tabs rather than cutting them.
+
+   The band owns the space between the dialog's header and its rule — the body
+   does not pad above it — so the buttons centre in that whole band whether or
+   not the site has tabs to put beside them. */
 .share-dialog__top {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
   border-bottom: 1px solid var(--border);
   gap: 8px 16px;
 }
 
+/* The tabs end on the rule, where a tab strip's underline has to be, so they
+   are pulled through the band's lower half. */
 .share-dialog__top > .share-presets {
   flex: 1 1 auto;
   min-width: 0;
+  align-self: flex-end;
+  margin-bottom: -12px;
 }
 
-/* The buttons end on the rule, as the tabs do, so the two read as one row
-   rather than as a row with something floating over it. */
+/* The buttons keep the right edge on every site: a dialog with no tabs has
+   nothing to push them there. */
 .share-linkbar {
   display: flex;
   align-items: center;
   flex: 0 0 auto;
+  margin-left: auto;
   gap: 8px;
 }