react-cheminfo 0.36.0 → 0.38.0

package/lib/seo/vite/prerender.js

@@ -18,6 +18,9 @@
  */
 import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { dirname, join, resolve } from 'node:path';
+import { CHROME_CATALOG } from "../../i18n/core/chromeCatalog.js";
+import { DEFAULT_LANGUAGE } from "../../i18n/core/languages.js";
+import { withLanguagePath } from "../../language/core/languagePath.js";
 import { trimTrailingSlash } from "../../router/core/address.js";
 import { noscriptIndex } from "../core/noscript.js";
 import { pageHeadTags } from "../core/pageMeta.js";
@@ -34,15 +37,35 @@ import { PAGE_BODY_MARKER, PAGE_HEAD_MARKER, fill } from "../core/template.js";
  * is not a path, or when the origin is not an absolute address.
  */
 export function cheminfoPrerender(options) {
-    const { site, routes, origin, robots = [] } = options;
+    const { site, origin, robots = [] } = options;
+    const languages = options.languages ?? [DEFAULT_LANGUAGE];
+    const tableFor = (language) => typeof options.routes === 'function'
+        ? options.routes(language)
+        : options.routes;
+    // Every language answers the same addresses, so each table is checked and
+    // they are checked against each other: a translation that renames a path or
+    // drops a page writes a file the sitemap of another language names, and the
+    // `hreflang` set would point at an address that is not there.
+    const routes = tableFor(DEFAULT_LANGUAGE);
     assertRoutes(routes);
-    const structuredData = structuredDataOf(options);
+    for (const language of languages) {
+        if (language === DEFAULT_LANGUAGE)
+            continue;
+        assertSamePaths(routes, tableFor(language), language);
+    }
+    const structuredData = structuredDataOf(options, routes);
     let out = 'dist';
     let serve = false;
     let logger = null;
-    const page = (template, route) => {
-        const head = fill(template, PAGE_HEAD_MARKER, `${pageHeadTags({ site, routes, origin, url: route.path })}${structuredData}`);
-        const crawlPath = crawlPathOf(options, route);
+    const page = (template, route, language) => {
+        const head = fill(withHtmlLang(template, language), PAGE_HEAD_MARKER, `${pageHeadTags({
+            site,
+            routes: tableFor(language),
+            origin,
+            languages,
+            url: withLanguagePath(language, route.path),
+        })}${structuredData}`);
+        const crawlPath = crawlPathOf(options, route, language, tableFor(language));
         return crawlPath === '' ? head : fill(head, PAGE_BODY_MARKER, crawlPath);
     };
     return {
@@ -56,43 +79,59 @@ export function cheminfoPrerender(options) {
         // from the home route rather than shipped with its markers showing.
         transformIndexHtml: {
             order: 'post',
-            handler: (html) => (serve ? page(html, homeRoute(routes)) : html),
+            handler: (html) => serve ? page(html, homeRoute(routes), DEFAULT_LANGUAGE) : html,
         },
-        closeBundle() {
+        async closeBundle() {
             if (serve)
                 return;
+            // The crawl path names the family in the chrome's own words, and every
+            // language but the default arrives as a chunk of its own, so they are all
+            // fetched before a single file is written.
+            await Promise.all(languages
+                .filter((language) => language !== DEFAULT_LANGUAGE)
+                .map((language) => CHROME_CATALOG.load(language)));
             const template = readFileSync(join(out, 'index.html'), 'utf8');
-            const write = (route, file) => {
+            const write = (route, language, file) => {
                 mkdirSync(dirname(file), { recursive: true });
-                writeFileSync(file, page(template, route));
+                writeFileSync(file, page(template, route, language));
             };
-            let root = false;
-            for (const route of routes) {
-                const address = trimTrailingSlash(route.path);
-                if (address === '/')
-                    root = true;
-                write(route, address === '/'
-                    ? join(out, 'index.html')
-                    : join(out, address.slice(1), 'index.html'));
+            let written = 0;
+            for (const language of languages) {
+                const table = tableFor(language);
+                let root = false;
+                for (const route of table) {
+                    const address = trimTrailingSlash(withLanguagePath(language, route.path));
+                    if (address === '/')
+                        root = true;
+                    write(route, language, address === '/'
+                        ? join(out, 'index.html')
+                        : join(out, address.slice(1), 'index.html'));
+                    written++;
+                }
+                // The file a static server hands out for the mount itself. A table
+                // naming no root would otherwise leave the template vite built, and
+                // ship a site whose front page carries its markers instead of a head.
+                // A language other than the default already has its own front page at
+                // `/<language>`, so only the unprefixed one is ever missing.
+                if (!root && language === DEFAULT_LANGUAGE) {
+                    write(homeRoute(table), language, join(out, 'index.html'));
+                    written++;
+                }
             }
-            // The file a static server hands out for the mount itself. A table naming
-            // no root would otherwise leave the template vite built, and ship a site
-            // whose front page carries its markers instead of a head.
-            if (!root)
-                write(homeRoute(routes), join(out, 'index.html'));
-            writeFileSync(join(out, 'sitemap.xml'), sitemapXml({ site, routes, origin }));
+            writeFileSync(join(out, 'sitemap.xml'), sitemapXml({ site, routes, origin, languages }));
             if (robots !== false) {
                 writeFileSync(join(out, 'robots.txt'), robotsTxt({ site, routes, origin }, robots));
             }
-            logger?.info(`${routes.length} pages prerendered, and listed in sitemap.xml`);
+            const spoken = languages.length > 1 ? ` in ${languages.length} languages` : '';
+            logger?.info(`${written} pages prerendered${spoken}, and listed in sitemap.xml`);
         },
     };
 }
-function structuredDataOf(options) {
+function structuredDataOf(options, routes) {
     const { category, ...rest } = options;
     if (category === false)
         return '';
-    const { site, routes, origin } = rest;
+    const { site, origin } = rest;
     const { operatingSystem, description, browserRequirements, currency } = rest;
     return `\n${structuredDataScript({
         site,
@@ -105,18 +144,49 @@ function structuredDataOf(options) {
         currency,
     })}`;
 }
-function crawlPathOf(options, route) {
-    const { site, routes, origin, noscript = true } = options;
+function crawlPathOf(options, route, language, routes) {
+    const { site, origin } = options;
+    // The crawl path of a translated page is that language's: its heading, its
+    // intro and the label under every link. Declared as a function of the
+    // language, the site writes each of them from its own catalog; declared as a
+    // record, it is the same words on every language, which is what a site that
+    // speaks one wants and is what it used to be.
+    const declared = options.noscript ?? true;
+    const noscript = typeof declared === 'function' ? declared(language) : declared;
     if (noscript === false)
         return '';
-    const content = options.content?.(route);
+    const content = options.content?.(route, language);
     const { routes: listed, ...prose } = noscript === true ? {} : noscript;
+    // The crawl path of a translated page links to that language's addresses: a
+    // French page listing the English ones is a crawler's only route out of it,
+    // and it would lead straight back out of the translation.
+    const menu = (listed ?? routes).map((entry) => ({
+        ...entry,
+        path: withLanguagePath(language, entry.path),
+    }));
     return noscriptIndex({
         site,
         origin,
         ...prose,
-        routes: listed ?? routes,
+        routes: menu,
         content,
+        language,
     });
 }
+// Two tables of one site answer the same addresses. A translated table that
+// renames or drops a path leaves the `hreflang` set of every other language
+// pointing at an address nothing wrote, which is a soft 404 on each of them.
+function assertSamePaths(source, translated, language) {
+    const wanted = source.map((route) => route.path).join(' ');
+    const written = translated.map((route) => route.path).join(' ');
+    if (wanted !== written) {
+        throw new Error(`the ${language} route table answers different addresses than the source one: an address is the same in every language`);
+    }
+}
+// The template is written in the default language, so each file says which
+// language it is actually in. A page whose `lang` lies is read aloud wrong and
+// offered to the wrong reader.
+function withHtmlLang(template, language) {
+    return template.replace(/<html(?<attributes>[^>]*)\slang="[^"]*"/i, `<html$<attributes> lang="${language}"`);
+}
 //# sourceMappingURL=prerender.js.map

package/lib/seo/vite/prerender.js.map

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

package/lib/ui.d.ts

@@ -24,6 +24,7 @@ export * from './parallel/ui/index.ts';
 export * from './pedagogy/ui/index.ts';
 export * from './periodic/ui/index.ts';
 export * from './projection/ui/index.ts';
+export * from './range/ui/index.ts';
 export * from './router/ui/index.ts';
 export * from './scatter/ui/index.ts';
 export * from './scatter3d/ui/index.ts';

package/lib/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AAKrC,YAAY,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,eAAe,GAChB,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AAKrC,YAAY,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,eAAe,GAChB,MAAM,oCAAoC,CAAC"}

package/lib/ui.js

@@ -24,6 +24,7 @@ export * from "./parallel/ui/index.js";
 export * from "./pedagogy/ui/index.js";
 export * from "./periodic/ui/index.js";
 export * from "./projection/ui/index.js";
+export * from "./range/ui/index.js";
 export * from "./router/ui/index.js";
 export * from "./scatter/ui/index.js";
 export * from "./scatter3d/ui/index.js";

package/lib/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AAMrC,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAmC,CAAC;AAEnE,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,eAAe,GAChB,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AAMrC,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAmC,CAAC;AAEnE,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,eAAe,GAChB,MAAM,oCAAoC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.36.0",
+  "version": "0.38.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/core.ts

@@ -21,6 +21,7 @@ export * from './parallel/core/index.ts';
 export * from './pedagogy/core/index.ts';
 export * from './periodic/core/index.ts';
 export * from './projection/core/index.ts';
+export * from './range/core/index.ts';
 export * from './router/core/index.ts';
 export * from './scatter/core/index.ts';
 export * from './scatter3d/core/index.ts';

package/src/ecosystem/core/sites.ts

@@ -56,6 +56,23 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#9a3412',
     mark: { plate: '#1c6e42', accent: '#ea580c' },
   },
+  {
+    id: 'iupac-name',
+    // The name splits on its own hyphen, so it carries no domain and no dot,
+    // and the hyphen stays with the first half so the address reads as typed.
+    name: { lead: 'iupac-', alt: 'name' },
+    host: 'iupac-name.cheminfo.org',
+    tagline: 'The IUPAC name of a structure, and the structure a name denotes.',
+    group: 'structures',
+    // The blue of the IUPAC Blue Book, whose 2013 recommendations are what the
+    // site names by. A violet would repeat the lead inchi already owns.
+    brand: '#1e40af',
+    // The amber the mark's locant 1 is drawn in sits at 3.2:1 on white, short
+    // of the 4.5:1 of body text, so the second half of the wordmark takes this
+    // darkened form instead, at 7.1:1.
+    brandAlt: '#92400e',
+    mark: { plate: '#1e40af', accent: '#d97706' },
+  },
   {
     id: 'openbabel',
     name: { lead: 'openbabel', alt: 'cheminfo', dot: true },

package/src/ecosystem/core/types.ts

@@ -6,6 +6,7 @@ export type SiteId =
   | 'inchi'
   | 'vcl'
   | 'smiles'
+  | 'iupac-name'
   | 'openbabel'
   | 'chemcalc'
   | 'dbe'

package/src/ecosystem/ui/glyphs.tsx

@@ -106,6 +106,22 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       />
     </>
   ),
+  // A parent chain numbered from the end nearest its group: the atom that
+  // takes locant 1 carries the colour, because the numbering is what a name
+  // is built on.
+  'iupac-name': (alt) => (
+    <>
+      <path
+        d="M8 20.5 14 10l6 10.5L26 10"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx="8" cy="20.5" r="3.4" fill={alt} />
+    </>
+  ),
   // Two arrows crossing in opposite directions: one notation turned into
   // another and back, which is the whole of what this one does.
   openbabel: (alt) => (

package/src/locales/de.json

@@ -459,5 +459,13 @@
   "molecule3d.input.clickBackground": "Den Hintergrund anklicken",
   "molecule3d.helpNote": "Die Tasten wirken, solange der Zeiger über dem Molekül ist. Auf dem Mac ist Ctrl die Control-Taste, nicht ⌘. Bei eingeschaltetem Messwerkzeug wählt ein Klick ein Atom.",
   "number.increment": "Erhöhen",
-  "number.decrement": "Verringern"
+  "number.decrement": "Verringern",
+  "range.lowest": "{label}, Minimum",
+  "range.highest": "{label}, Maximum",
+  "range.lowestIs": "{label}, Minimum: {value}",
+  "range.highestIs": "{label}, Maximum: {value}",
+  "range.noLowerBound": "{label}: keine Untergrenze",
+  "range.noUpperBound": "{label}: keine Obergrenze",
+  "range.typeValue": "Klicken, um einen Wert einzugeben",
+  "range.clear": "{label} zurücksetzen"
 }

package/src/locales/en.json

@@ -459,5 +459,13 @@
   "conformers.strategyDetail.likely-systematic": "Walks the torsion combinations in decreasing likelihood, so the first conformers are the most probable ones and the set is reproducible.",
   "conformers.minimisation.none": "None (no energies)",
   "number.increment": "Increase",
-  "number.decrement": "Decrease"
+  "number.decrement": "Decrease",
+  "range.lowest": "{label}, lowest",
+  "range.highest": "{label}, highest",
+  "range.lowestIs": "{label}, lowest: {value}",
+  "range.highestIs": "{label}, highest: {value}",
+  "range.noLowerBound": "{label}: no lower bound",
+  "range.noUpperBound": "{label}: no upper bound",
+  "range.typeValue": "Click to type a value",
+  "range.clear": "Clear {label}"
 }

package/src/locales/es.json

@@ -459,5 +459,13 @@
   "molecule3d.input.clickBackground": "Hacer clic en el fondo",
   "molecule3d.helpNote": "Las teclas actúan mientras el puntero está sobre la molécula. En un Mac, Ctrl es la tecla Control, no ⌘. Con una herramienta de medida activa, un clic elige un átomo.",
   "number.increment": "Aumentar",
-  "number.decrement": "Disminuir"
+  "number.decrement": "Disminuir",
+  "range.lowest": "{label}, mínimo",
+  "range.highest": "{label}, máximo",
+  "range.lowestIs": "{label}, mínimo: {value}",
+  "range.highestIs": "{label}, máximo: {value}",
+  "range.noLowerBound": "{label}: sin límite inferior",
+  "range.noUpperBound": "{label}: sin límite superior",
+  "range.typeValue": "Haga clic para escribir un valor",
+  "range.clear": "Borrar {label}"
 }

package/src/locales/fr.json

@@ -459,5 +459,13 @@
   "molecule3d.input.clickBackground": "Cliquer le fond",
   "molecule3d.helpNote": "Les touches agissent tant que le pointeur est sur la molécule. Sur un Mac, Ctrl est la touche Contrôle, pas ⌘. Avec un outil de mesure actif, un clic choisit un atome.",
   "number.increment": "Augmenter",
-  "number.decrement": "Diminuer"
+  "number.decrement": "Diminuer",
+  "range.lowest": "{label}, minimum",
+  "range.highest": "{label}, maximum",
+  "range.lowestIs": "{label}, minimum : {value}",
+  "range.highestIs": "{label}, maximum : {value}",
+  "range.noLowerBound": "{label} : pas de borne inférieure",
+  "range.noUpperBound": "{label} : pas de borne supérieure",
+  "range.typeValue": "Cliquer pour saisir une valeur",
+  "range.clear": "Effacer {label}"
 }

package/src/locales/it.json

@@ -459,5 +459,13 @@
   "conformers.strategyDetail.likely-systematic": "Percorre le combinazioni di torsioni per probabilità decrescente, così i primi conformeri sono i più probabili e l'insieme è riproducibile.",
   "conformers.minimisation.none": "Nessuna (senza energie)",
   "number.increment": "Aumenta",
-  "number.decrement": "Diminuisci"
+  "number.decrement": "Diminuisci",
+  "range.lowest": "{label}, minimo",
+  "range.highest": "{label}, massimo",
+  "range.lowestIs": "{label}, minimo: {value}",
+  "range.highestIs": "{label}, massimo: {value}",
+  "range.noLowerBound": "{label}: nessun limite inferiore",
+  "range.noUpperBound": "{label}: nessun limite superiore",
+  "range.typeValue": "Fai clic per inserire un valore",
+  "range.clear": "Cancella {label}"
 }

package/src/number/core/index.ts

@@ -2,5 +2,6 @@ export {
   isPartialNumber,
   numberText,
   readNumber,
+  snapToStep,
   stepNumber,
 } from './numberText.ts';

package/src/number/core/numberText.ts

@@ -78,6 +78,26 @@ export function stepNumber(value: number, delta: number): number {
   return Math.round(moved * factor) / factor;
 }
 
+/**
+ * A number moved onto the grid of steps laid from an origin.
+ *
+ * Rounded to the decimals the step and the origin carry, for the reason
+ * {@link stepNumber} is: a slider dragged in steps of `0.1` must report `0.3`,
+ * because that is what ends up written in the link.
+ * @param value - Where the number is now.
+ * @param step - The spacing of the grid. A step that is not above zero leaves
+ * the number where it is.
+ * @param origin - A point the grid passes through. Defaults to `0`.
+ * @returns The grid point nearest the number.
+ */
+export function snapToStep(value: number, step: number, origin = 0): number {
+  if (!(step > 0) || !Number.isFinite(value)) return value;
+  const snapped = origin + Math.round((value - origin) / step) * step;
+  const decimals = Math.max(decimalsOf(step), decimalsOf(origin));
+  const factor = 10 ** decimals;
+  return Math.round(snapped * factor) / factor;
+}
+
 /**
  * How many decimals a number is written with.
  * @param value - The number.

package/src/range/core/index.ts

@@ -0,0 +1,11 @@
+export type { RangeBounds, RangeDomain, RangeHandles } from './rangeBounds.ts';
+export {
+  OPEN_RANGE,
+  isRangeBounded,
+  isRangeDomain,
+  movedRange,
+  rangeHandles,
+  sameRange,
+  settleHandles,
+} from './rangeBounds.ts';
+export { rangeHistogramPath } from './rangeHistogram.ts';

package/src/range/core/rangeBounds.ts

@@ -0,0 +1,143 @@
+/**
+ * What a range filter keeps, and how its two handles map to it.
+ *
+ * A filter is two bounds, either of which may be left open. A handle parked at
+ * the end of the track is an open side rather than a bound at the track's end,
+ * because the track only covers the values the page knows about: a molecule
+ * heavier than the heaviest one in the statistics must not be cut by a filter
+ * nobody touched.
+ */
+
+import { clamp } from '../../format/core/clamp.ts';
+import { snapToStep } from '../../number/core/numberText.ts';
+
+/** A lowest and a highest value kept, either of which may be left open. */
+export interface RangeBounds {
+  /** The lowest value kept, or `null` when nothing is cut from below. */
+  readonly min: number | null;
+  /** The highest value kept, or `null` when nothing is cut from above. */
+  readonly max: number | null;
+}
+
+/** The two ends of a slider's track, low first. */
+export type RangeDomain = readonly [number, number];
+
+/** Where the two handles of a slider stand, low first. */
+export type RangeHandles = readonly [number, number];
+
+/** A range that keeps everything. */
+export const OPEN_RANGE: RangeBounds = Object.freeze({ min: null, max: null });
+
+/**
+ * Whether a range cuts anything at all.
+ * @param range - The range.
+ * @returns Whether either side carries a bound.
+ */
+export function isRangeBounded(range: RangeBounds): boolean {
+  return range.min !== null || range.max !== null;
+}
+
+/**
+ * Whether two ranges keep the same values.
+ * @param left - One range.
+ * @param right - The other.
+ * @returns Whether both sides agree, an open side matching only an open side.
+ */
+export function sameRange(left: RangeBounds, right: RangeBounds): boolean {
+  return Object.is(left.min, right.min) && Object.is(left.max, right.max);
+}
+
+/**
+ * Whether a track can be drawn: two finite ends, the high one above the low.
+ * Statistics that have not arrived yet are usually a track of `[0, 0]`.
+ * @param domain - The two ends.
+ * @returns Whether a slider can be laid along it.
+ */
+export function isRangeDomain(domain: RangeDomain): boolean {
+  const [low, high] = domain;
+  return Number.isFinite(low) && Number.isFinite(high) && high > low;
+}
+
+/**
+ * Where the handles stand for a range: an open side at the end of the track,
+ * and a bound past the track held at its end.
+ * @param range - The range.
+ * @param domain - The track, already checked with {@link isRangeDomain}.
+ * @returns The two handle positions, low first.
+ */
+export function rangeHandles(
+  range: RangeBounds,
+  domain: RangeDomain,
+): RangeHandles {
+  const [low, high] = domain;
+  const start = range.min === null ? low : clamp(range.min, low, high);
+  const end = range.max === null ? high : clamp(range.max, low, high);
+  return start <= end ? [start, end] : [end, start];
+}
+
+/**
+ * The range two handles stand for once they have moved.
+ *
+ * Only a handle that moved changes its side. A bound past the end of the track
+ * sits at that end, and dragging the other handle must not turn it into an
+ * open side; a handle the reader took to the end of the track, on the other
+ * hand, opens its side.
+ * @param from - The range before the handles moved.
+ * @param handles - Where the handles are now.
+ * @param domain - The track.
+ * @returns The range the reader asked for.
+ */
+export function movedRange(
+  from: RangeBounds,
+  handles: RangeHandles,
+  domain: RangeDomain,
+): RangeBounds {
+  const [low, high] = domain;
+  const [start, end] = rangeHandles(from, domain);
+  return {
+    min:
+      handles[0] === start ? from.min : handles[0] <= low ? null : handles[0],
+    max: handles[1] === end ? from.max : handles[1] >= high ? null : handles[1],
+  };
+}
+
+/**
+ * Where handles settle while they are dragged: a moved handle onto the step
+ * grid laid from the low end of the track, an untouched one where it stood.
+ *
+ * Snapping the untouched handle too would move a bound the reader typed, say
+ * `1.23` on a track stepped by `0.5`, the moment the other handle is dragged.
+ * The ends of the track are kept even when they are off the grid, since an end
+ * is what opens a side.
+ * @param next - Where the slider reports the handles.
+ * @param from - The range before the drag started.
+ * @param step - The grid spacing.
+ * @param domain - The track.
+ * @returns The handle positions to draw and to report.
+ */
+export function settleHandles(
+  next: RangeHandles,
+  from: RangeBounds,
+  step: number,
+  domain: RangeDomain,
+): RangeHandles {
+  const [start, end] = rangeHandles(from, domain);
+  return [
+    next[0] === start ? start : snapHandle(next[0], step, domain),
+    next[1] === end ? end : snapHandle(next[1], step, domain),
+  ];
+}
+
+/**
+ * One handle moved onto the step grid, the ends of the track kept as they are.
+ * @param value - Where the handle was dropped.
+ * @param step - The grid spacing.
+ * @param domain - The track.
+ * @returns The position the handle settles on.
+ */
+function snapHandle(value: number, step: number, domain: RangeDomain): number {
+  const [low, high] = domain;
+  if (value <= low) return low;
+  if (value >= high) return high;
+  return clamp(snapToStep(value, step, low), low, high);
+}

package/src/range/core/rangeHistogram.ts

@@ -0,0 +1,38 @@
+/**
+ * The outline of a histogram whose bins split the track into equal widths, as
+ * SVG path data in a box one unit wide and one unit tall.
+ *
+ * One stepped outline rather than a rectangle per bin: adjacent rectangles
+ * leave a hairline seam between them wherever their shared edge falls between
+ * two pixels, and a thousand bins would be two thousand elements.
+ * @param counts - One count per bin, from the low end of the track.
+ * @returns The path data, the tallest bin reaching the top; empty when nothing
+ * was counted.
+ */
+export function rangeHistogramPath(counts: ArrayLike<number>): string {
+  const bins = counts.length;
+  let tallest = 0;
+  for (let index = 0; index < bins; index++) {
+    const count = counts[index] as number;
+    if (count > tallest) tallest = count;
+  }
+  if (tallest <= 0) return '';
+
+  let path = 'M0 1';
+  for (let index = 0; index < bins; index++) {
+    const count = counts[index] as number;
+    const height = count > 0 ? count / tallest : 0;
+    path += `V${trim(1 - height)}H${trim((index + 1) / bins)}`;
+  }
+  return `${path}V1Z`;
+}
+
+/**
+ * A coordinate written with the five decimals a box of a few hundred pixels
+ * can use.
+ * @param value - The coordinate.
+ * @returns Its text.
+ */
+function trim(value: number): string {
+  return String(Math.round(value * 1e5) / 1e5);
+}