react-cheminfo 0.34.0 → 0.36.0

package/src/locales/it.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Cosa si può fare qui",
   "about.builtOn": "Costruito su",
   "about.howToCite": "Come citare",
-  "about.licenceAndSource": "Licenza e codice sorgente",
-  "about.licence": "{license}, © cheminfo. Si può usare in un corso, farne un fork, o riprenderne un pezzo per altro. Il codice è su {sources}.",
-  "about.foundAProblem": "Ha trovato un problema?",
-  "about.reportIt": "Ce lo dica: una segnalazione che indichi cosa ha scritto e cosa ha ottenuto è la correzione più rapida che esista. {tracker}.",
   "about.citeWork": "Citare {what}",
   "about.built": "Compilato {builtAt}.",
   "about.builtFromCommit": "Compilato {builtAt} dal commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Un SVG che contiene un'immagine di {pixels}: una scena 3D non ha forma vettoriale.",
   "download.hintSvg": "Si apre a {pixels}, e resta nitido a qualsiasi dimensione.",
   "download.hintPng": "Salvato {pixels}.",
+  "download.hintCopied": "Copiato negli appunti: PNG di {pixels}.",
+  "download.copyUnsupported": "Questo browser non può mettere un'immagine negli appunti. Salvala invece.",
   "download.size": "Dimensione",
   "download.sizeHelp": "La forma con cui la figura viene disegnata per il file. Viene ricomposta, così gli assi e le etichette si adattano a quella forma invece di essere stirati. Una colonna di rivista è larga 8,5 cm, e il suo testo si stampa alla dimensione con cui si legge sullo schermo.",
   "download.sizeScreen": "Come mostrata",

package/src/overlay/ui/OverlayPanel.tsx

@@ -78,6 +78,12 @@ export interface OverlayPanelProps {
    * @default derived from the type size — 88 at the compact size
    */
   nameWidth?: number;
+  /**
+   * Fixed width of the panel, for one whose hint changes with its choices:
+   * left to its content, it would resize under the pointer at every pick.
+   * @default undefined — as wide as its content
+   */
+  width?: number | string;
   /**
    * Value of the `data-testid` attribute of the panel.
    * @default undefined
@@ -104,7 +110,7 @@ export interface OverlayPanelProps {
 export function OverlayPanel(props: OverlayPanelProps): ReactElement {
   const { title, children, onReset, resetLabel, help } = props;
   const t = useChromeT();
-  const { actions, hint, nameWidth, testId } = props;
+  const { actions, hint, nameWidth, width: panelWidth, testId } = props;
   const { metrics } = useOverlaySurface();
   const titleId = useId();
   const reset = useOverlayInteraction();
@@ -120,7 +126,7 @@ export function OverlayPanel(props: OverlayPanelProps): ReactElement {
       role="group"
       aria-labelledby={titleId}
       data-testid={testId}
-      style={overlayPanelSurfaceStyle(metrics)}
+      style={overlayPanelSurfaceStyle(metrics, panelWidth)}
     >
       <div style={overlayPanelHeaderStyle(metrics)}>
         <span style={overlayPanelTitleStyle(metrics)}>

package/src/overlay/ui/overlayPanelStyles.ts

@@ -26,14 +26,17 @@ import { overlayFocusRing } from './overlayValueStyles.ts';
  * The panel itself: a header, a body, and whatever the figure can be told to
  * do at the foot.
  * @param metrics - The measurements the card is drawn from.
+ * @param width - A fixed width, or `undefined` for as wide as its content.
  * @returns The panel's rules.
  */
 export function overlayPanelSurfaceStyle(
   metrics: OverlayMetrics,
+  width?: number | string,
 ): CSSProperties {
   return {
     display: 'flex',
     flexDirection: 'column',
+    width,
     minWidth: OVERLAY_PANEL_MIN_WIDTH,
     color: 'var(--text)',
     fontSize: metrics.fontSize,

package/src/periodic/ui/ElementCell.tsx

@@ -37,12 +37,6 @@ export interface ElementCellProps {
    * @default '' — nothing is written
    */
   detail?: string;
-  /**
-   * Whether the table this cell belongs to writes a third line at all. A table
-   * that writes none gives the room to the symbol, and its rows are shorter.
-   * @default whether this cell has one
-   */
-  writesDetail?: boolean;
   /**
    * Whether the cell is the one the tools are pointed at.
    * @default false
@@ -82,7 +76,6 @@ export function ElementCell(props: ElementCellProps): ReactElement {
     row,
     onSelect,
     detail = '',
-    writesDetail = detail !== '',
     isSelected = false,
     isIncluded = true,
     onHover,
@@ -137,7 +130,7 @@ export function ElementCell(props: ElementCellProps): ReactElement {
       <span
         style={{
           ...symbolStyle,
-          fontSize: symbolFontSize(symbol, writesDetail),
+          fontSize: symbolFontSize(symbol),
         }}
       >
         {symbol}
@@ -158,12 +151,10 @@ export function ElementCell(props: ElementCellProps): ReactElement {
  * ones whose second letter is an `m` — which are written a tenth smaller
  * rather than run into the edges of their cell.
  * @param symbol - The chemical symbol.
- * @param writesDetail - Whether the table writes a third line under it.
  * @returns A CSS length.
  */
-function symbolFontSize(symbol: string, writesDetail: boolean): string {
-  const cap = writesDetail ? SYMBOL_CQW : SYMBOL_ALONE_CQW;
-  return fitted(symbolWidthInEm(symbol), cap, '0.5rem');
+function symbolFontSize(symbol: string): string {
+  return fitted(symbolWidthInEm(symbol), SYMBOL_CQW, '0.5rem');
 }
 
 /**
@@ -233,17 +224,24 @@ 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';
 
-/** The same, in a table that writes nothing under the symbol. */
-const SYMBOL_ALONE_CQW = '2.8cqw';
-
 /**
  * The tallest the third line is ever written, as a share of the table.
  *
- * Close to three quarters of the symbol: the symbol is how a cell is found,
- * but 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.
+ * Close to two thirds of the symbol: the symbol is how a cell is found, but
+ * 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';
+
+/**
+ * The band at each end of a cell: the atomic number at the top, whatever the
+ * tool writes at the bottom.
+ *
+ * They are one length, not two, and that is what makes the symbol between them
+ * 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 DETAIL_CQW = '1.75cqw';
+const EDGE_BAND = '1.8cqw';
 
 /** How wide one column is, as a share of the table's width. */
 const CELL_CQW = '4.85cqw';
@@ -251,49 +249,48 @@ const CELL_CQW = '4.85cqw';
 /** What the border and the padding of a cell take off that width. */
 const CELL_CHROME = '4px';
 
+/**
+ * A cell is three bands of its own, and every cell has all three.
+ *
+ * The atomic number is in the top band, against its left edge; the symbol is
+ * centred in the middle one; whatever the tool writes is centred in the
+ * bottom one. The bands keep their height whether or not anything is written
+ * in the last of them, so a number sits at one height across the whole table
+ * and a symbol at one other — before this, both rode on a stack the cell
+ * centred and moved whenever a neighbour's value was written smaller.
+ */
 const cellStyle = {
-  alignItems: 'center',
   border: '1px solid rgb(255 255 255 / 0.55)',
   borderRadius: 3,
   cursor: 'pointer',
-  display: 'flex',
-  flexDirection: 'column',
+  display: 'grid',
   font: 'inherit',
-  justifyContent: 'center',
+  gridTemplateRows: `${EDGE_BAND} 1fr ${EDGE_BAND}`,
+  justifyItems: 'center',
   minWidth: 0,
   overflow: 'hidden',
   padding: '1px',
-  // The corner the atomic number is pinned into.
-  position: 'relative',
   transition: 'opacity 120ms ease, filter 120ms ease',
 } as const satisfies CSSProperties;
 
-/**
- * The atomic number sits out of the flow, in the corner.
- *
- * In the flow it rode on top of a stack the cell centres, so it moved down
- * whenever what is written under the symbol was written smaller — the numbers
- * of a row then sat at as many heights as the row had word lengths. Out of it,
- * the number is in the same corner of every cell, and the symbol is centred in
- * the cell rather than in what is left of it.
- */
 const numberStyle = {
+  alignSelf: 'start',
   fontSize: 'max(0.33rem, 1.1cqw)',
   fontVariantNumeric: 'tabular-nums',
-  left: 'max(1px, 0.14cqw)',
+  justifySelf: 'start',
   lineHeight: 1,
   opacity: 0.8,
-  position: 'absolute',
-  top: 'max(1px, 0.14cqw)',
 } as const satisfies CSSProperties;
 
 const symbolStyle = {
+  alignSelf: 'center',
   fontWeight: 700,
   letterSpacing: '-0.02em',
   lineHeight: 1.02,
 } as const satisfies CSSProperties;
 
 const detailStyle = {
+  alignSelf: 'center',
   fontVariantNumeric: 'tabular-nums',
   lineHeight: 1,
   maxWidth: '100%',

package/src/periodic/ui/PeriodicTable.tsx

@@ -147,7 +147,6 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   } = props;
 
   const t = useChromeT();
-  const writesDetail = detailOf !== undefined;
   const gridRef = useRef<HTMLDivElement>(null);
   const cameFromKeyRef = useRef(false);
   const offset = headers ? 1 : 0;
@@ -178,7 +177,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
         role="grid"
         aria-label={t('periodic.table')}
         data-testid="periodic-table"
-        style={gridStyle(headers, writesDetail)}
+        style={gridStyle(headers)}
         onKeyDown={handleKeyDown}
       >
         {headers ? <HeaderStrips onSelectRange={onSelectRange} /> : null}
@@ -193,7 +192,6 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
             symbol={element.symbol}
             name={nameOf(element)}
             detail={detailOf?.(element)}
-            writesDetail={writesDetail}
             swatch={swatchOf(element)}
             isSelected={element.symbol === selected}
             isIncluded={isIncluded?.(element)}
@@ -218,8 +216,9 @@ function insetStyle(offset: number): CSSProperties {
   return {
     alignItems: 'center',
     display: 'flex',
-    // Narrower than the block so the writing never touches the cells beside it.
-    padding: '0 1cqw',
+    // 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',
     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:
@@ -251,14 +250,13 @@ const MIN_WIDTH = 280;
 /**
  * How tall one row of elements is, as a share of the table's width.
  *
- * A column is about 5.4% of that width, so a cell is a seventh taller than it
- * is wide — the proportion of a wall chart, and the room the three lines of a
- * cell need to be written at a size a class can read.
+ * A column is about 5.2% of that width, so a cell is a third taller than it is
+ * wide — the proportion of a wall chart, and the room the three bands of a
+ * cell need to be read from the back of a room. It is the same height in every
+ * table: a cell keeps the band it writes a value in whether or not that table
+ * writes one.
  */
-const ROW_HEIGHT = '6.1cqw';
-
-/** The same, in a table that writes nothing under the symbol. */
-const ROW_HEIGHT_ALONE = '4.9cqw';
+const ROW_HEIGHT = '6.8cqw';
 
 /** The band the two inner-transition series were lifted out across. */
 const SERIES_GAP = 'max(6px, 1.1cqw)';
@@ -285,14 +283,11 @@ const baseGridStyle = {
  * The grid the cells are placed on.
  * @param headers - Whether a leading column and row hold the period and group
  * numbers.
- * @param writesDetail - Whether a cell writes a third line, which is what a
- * row is tall enough for.
  * @returns The style of the grid.
  */
-function gridStyle(headers: boolean, writesDetail: boolean): CSSProperties {
-  const row = writesDetail ? ROW_HEIGHT : ROW_HEIGHT_ALONE;
+function gridStyle(headers: boolean): CSSProperties {
   // The eighth row is the gap the inner-transition series are lifted out into.
-  const rows = `repeat(7, ${row}) ${SERIES_GAP} repeat(2, ${row})`;
+  const rows = `repeat(7, ${ROW_HEIGHT}) ${SERIES_GAP} repeat(2, ${ROW_HEIGHT})`;
   if (!headers) {
     return {
       ...baseGridStyle,

package/src/seo/core/alternates.ts

@@ -0,0 +1,65 @@
+/**
+ * The tags that tell a search engine five addresses are one page written five
+ * times.
+ *
+ * Without them a translated site is read as five sites that happen to look
+ * alike: the French tutorial competes with the English one instead of being
+ * offered to a French reader, and a search engine picks one of them to keep.
+ * With them each address is served to the audience it was written for, and the
+ * four it was not stop diluting it.
+ *
+ * Every page names **every** language including itself — a set that does not
+ * list the page it is on is ignored whole — plus `x-default`, which is where a
+ * reader whose language we do not speak is sent.
+ */
+
+import type { Language } from '../../i18n/core/languages.ts';
+import { DEFAULT_LANGUAGE } from '../../i18n/core/languages.ts';
+import { withLanguagePath } from '../../language/core/languagePath.ts';
+import { escapeAttribute } from '../../share/core/escape.ts';
+
+/** Which page, in which languages, served from where. */
+export interface AlternateOptions {
+  /**
+   * Where the site is served, mount path included and no trailing slash, e.g.
+   * `https://3d.cheminfo.org`.
+   */
+  origin: string;
+  /**
+   * The page, from the site's own root and with no language prefix on it, e.g.
+   * `/tutorial`.
+   */
+  path: string;
+  /**
+   * Every language the site is written in. One language alone means there is
+   * nothing to point at, and no tag is written.
+   */
+  languages: readonly Language[];
+}
+
+/**
+ * The `rel="alternate"` block for one page of a translated site.
+ * @param options - The page, its languages and where the site is served.
+ * @returns The tags, one per line, or `''` when the site speaks one language.
+ */
+export function alternateLinkTags(options: AlternateOptions): string {
+  const { origin, path, languages } = options;
+  if (languages.length < 2) return '';
+
+  const tags: string[] = [];
+  for (const language of languages) {
+    tags.push(linkTag(language, address(origin, language, path)));
+  }
+  // A reader we have no language for gets the unprefixed address, which is the
+  // one every link handed out before the site was translated already points at.
+  tags.push(linkTag('x-default', address(origin, DEFAULT_LANGUAGE, path)));
+  return tags.join('\n');
+}
+
+function address(origin: string, language: Language, path: string): string {
+  return `${origin}${withLanguagePath(language, path)}`;
+}
+
+function linkTag(hreflang: string, href: string): string {
+  return `<link rel="alternate" hreflang="${escapeAttribute(hreflang)}" href="${escapeAttribute(href)}" />`;
+}

package/src/seo/core/index.ts

@@ -10,10 +10,13 @@ export type {
 export { noscriptIndex } from './noscript.ts';
 export type { PageMetaOptions } from './pageMeta.ts';
 export { injectPageMeta, pageDocumentMeta, pageHeadTags } from './pageMeta.ts';
+export type { PageContent, PageSection, PageTable } from './pageProse.ts';
+export { pageProseHtml } from './pageProse.ts';
 export type { PlainDescriptionOptions } from './plainDescription.ts';
 export { plainDescription, plainProse } from './plainDescription.ts';
 export type { RobotsDisallow } from './robots.ts';
 export { robotsTxt } from './robots.ts';
+export { routeProblems, withheldPhrase } from './routeProblems.ts';
 export type { RouteMeta } from './routes.ts';
 export { assertRoutes, homeRoute, pageMetaFor, routeFor } from './routes.ts';
 export type { SiteFilesOptions } from './siteFiles.ts';

package/src/seo/core/noscript.ts

@@ -12,6 +12,8 @@ import { ECOSYSTEM_SITES, siteUrl } from '../../ecosystem/core/sites.ts';
 import { joinBasePath } from '../../router/core/basePath.ts';
 import { escapeAttribute, escapeText } from '../../share/core/escape.ts';
 
+import type { PageContent } from './pageProse.ts';
+import { pageProseHtml } from './pageProse.ts';
 import type { RouteMeta } from './routes.ts';
 import type { SiteFilesOptions } from './siteFiles.ts';
 import { mountPathOf, resolveSite } from './siteFiles.ts';
@@ -93,6 +95,14 @@ export interface NoscriptOptions
   extends Omit<SiteFilesOptions, 'routes'>, Omit<NoscriptText, 'routes'> {
   /** The addresses it links, each with the label it is linked under. */
   routes: readonly NoscriptRoute[];
+  /**
+   * What the page being written says, above the crawl path. The block is the
+   * only text a crawler is handed before anything runs, so a page with nothing
+   * of its own here is indexed on its title and on this site's menu — which
+   * every other page of the site carries too.
+   * @default undefined — the block is the menu alone
+   */
+  content?: PageContent;
 }
 
 /**
@@ -111,14 +121,20 @@ export function noscriptIndex(options: NoscriptOptions): string {
   const site = resolveSite(options.site);
   const hrefs = options.hrefs ?? 'absolute';
   const mount = hrefs === 'absolute' ? mountPathOf(options) : '';
-  const heading = escapeText(options.heading ?? siteDisplayName(site));
+  const content = options.content;
+  // The page's own name answers the title it is indexed under, so it wins over
+  // a heading the site writes for every one of its pages at once.
+  const heading = escapeText(
+    content?.heading ?? options.heading ?? siteDisplayName(site),
+  );
   const intro = escapeText(
     options.intro ??
       `${site.tagline} This tool needs JavaScript; these are the pages it offers:`,
   );
+  const prose = content === undefined ? '' : pageProseHtml(content, '  ');
 
   return `<noscript>
-  <h1>${heading}</h1>
+  <h1>${heading}</h1>${prose}
   <p>${intro}</p>${pageList(options.routes, mount, hrefs, '  ')}${familyList(site.id, options.ecosystem)}
 </noscript>`;
 }

package/src/seo/core/pageMeta.ts

@@ -14,14 +14,26 @@
 
 import { siteDisplayName } from '../../ecosystem/core/lookup.ts';
 import type { SiteId, SiteRecord } from '../../ecosystem/core/sites.ts';
+import type { Language } from '../../i18n/core/languages.ts';
+import { DEFAULT_LANGUAGE } from '../../i18n/core/languages.ts';
+import {
+  readLanguagePath,
+  withLanguagePath,
+} from '../../language/core/languagePath.ts';
+import { withoutQueryOrFragment } from '../../router/core/address.ts';
+import { stripBasePath } from '../../router/core/basePath.ts';
 import { escapeAttribute, escapeText } from '../../share/core/escape.ts';
 
+import { alternateLinkTags } from './alternates.ts';
 import type { DocumentMeta } from './documentMeta.ts';
 import type { RouteMeta } from './routes.ts';
 import { pageMetaFor } from './routes.ts';
 import { mountPathOf, originOf, resolveSite } from './siteFiles.ts';
 import { PAGE_HEAD_MARKER, fill } from './template.ts';
 
+// A scheme and an authority: what `location.href` hands out.
+const ABSOLUTE_URL = /^[a-z][\d+.a-z-]*:\/\//i;
+
 /** Which site is being served, and what it answers. */
 export interface PageMetaOptions {
   /** The site, named or passed. */
@@ -48,6 +60,17 @@ export interface PageMetaOptions {
    * @default '/og.png'
    */
   image?: string;
+  /**
+   * Every language the site is written in, the default one included.
+   *
+   * The language is read off the address — `/fr/tutorial` is the French
+   * tutorial — so the canonical, the card and the `hreflang` set are written
+   * for the page actually being served, and the routes passed are the table in
+   * that language. A site writing one language leaves this out and nothing
+   * about its head changes.
+   * @default [the default language]
+   */
+  languages?: readonly Language[];
 }
 
 /**
@@ -74,12 +97,27 @@ export function injectPageMeta(html: string, options: PageMetaOptions): string {
  */
 export function pageHeadTags(options: PageMetaOptions): string {
   const name = siteDisplayName(resolveSite(options.site));
-  const description = routeMetaOf(options).description;
+  const route = routeMetaOf(options);
+  const description = route.description;
   const origin = originOf(options);
   const { title, canonical } = pageDocumentMeta(options);
   const image = absolute(options.image ?? '/og.png', origin);
+  const alternates = alternateLinkTags({
+    origin,
+    path: route.path,
+    languages: languagesOf(options),
+  });
+
+  // A maintenance screen says so on the page itself. `robots.txt` cannot: it
+  // stops the crawl, and an address nobody crawled is still listed from
+  // whatever links to it, with no description to show for it.
+  const robots =
+    route.indexed === false
+      ? ['<meta name="robots" content="noindex, nofollow" />']
+      : [];
 
   return [
+    ...robots,
     `<title>${escapeText(title)}</title>`,
     `<meta name="description" content="${escapeAttribute(description)}" />`,
     `<link rel="canonical" href="${escapeAttribute(canonical)}" />`,
@@ -90,6 +128,7 @@ export function pageHeadTags(options: PageMetaOptions): string {
     `<meta property="og:url" content="${escapeAttribute(canonical)}" />`,
     `<meta property="og:image" content="${escapeAttribute(image)}" />`,
     '<meta name="twitter:card" content="summary_large_image" />',
+    ...(alternates === '' ? [] : [alternates]),
   ].join('\n');
 }
 
@@ -112,15 +151,47 @@ export function pageDocumentMeta(
   return {
     title: `${meta.title} — ${siteDisplayName(site)}`,
     description: meta.description,
-    canonical: `${originOf(options)}${meta.path}`,
+    canonical: `${originOf(options)}${withLanguagePath(pageLanguage(options), meta.path)}`,
   };
 }
 
+/**
+ * The language an address is being served in.
+ *
+ * Read off the address itself rather than passed beside it, so the catalog a
+ * server picks and the canonical it writes cannot disagree.
+ * @param options - Which site, which address, and the languages it speaks.
+ * @returns The language named by the address, or the default one.
+ * @throws {Error} When the deployment names an origin that is not an absolute
+ * address.
+ */
+export function pageLanguage(options: PageMetaOptions): Language {
+  return readLanguagePath(ownPath(options), languagesOf(options)).language;
+}
+
 // A server behind a mount is handed the address the browser asked for, and the
 // route table is written from the site's own root, so the mount the origin
 // carries is taken off it before the table is read.
 function routeMetaOf(options: PageMetaOptions): RouteMeta {
-  return pageMetaFor(options.routes, options.url, mountPathOf(options));
+  const { path } = readLanguagePath(ownPath(options), languagesOf(options));
+  return pageMetaFor(options.routes, path);
+}
+
+// The address from the site's own root, the mount taken off, with the query
+// string and the fragment gone: what the language prefix is read off. An app
+// handing over `location.href` is answered too, so the one reading serves a
+// server, a build and a click alike.
+function ownPath(options: PageMetaOptions): string {
+  const url = options.url;
+  const path =
+    ABSOLUTE_URL.test(url) && URL.canParse(url)
+      ? new URL(url).pathname
+      : withoutQueryOrFragment(url);
+  return stripBasePath(mountPathOf(options), path);
+}
+
+function languagesOf(options: PageMetaOptions): readonly Language[] {
+  return options.languages ?? [DEFAULT_LANGUAGE];
 }
 
 function absolute(target: string, origin: string): string {