react-cheminfo 0.36.0 → 0.38.0

package/src/range/ui/RangeHistogram.tsx

@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import { useId, useMemo } from 'react';
+
+import { rangeHistogramPath } from '../core/rangeHistogram.ts';
+
+/** What the histogram over a range slider needs. */
+export interface RangeHistogramProps {
+  /** One count per bin, the bins splitting the track into equal widths. */
+  counts: ArrayLike<number>;
+  /** Where the kept part starts, as a fraction of the track. */
+  start: number;
+  /** Where it ends. */
+  end: number;
+}
+
+/**
+ * How the values are spread along the track, the part the handles keep drawn
+ * in the brand colour. The outline is drawn twice, the second copy clipped to
+ * the handles, so a drag moves one rectangle and the outline is never redrawn.
+ * @param props - See {@link RangeHistogramProps}.
+ * @returns The histogram, hidden from a screen reader: the values under the
+ * track already say what it keeps.
+ */
+export function RangeHistogram(props: RangeHistogramProps): ReactElement {
+  const { counts, start, end } = props;
+  const clip = `range-histogram-${useId().replaceAll(/\W/g, '')}`;
+  const outline = useMemo(() => rangeHistogramPath(counts), [counts]);
+
+  return (
+    <svg
+      className="range-slider__histogram"
+      viewBox="0 0 1 1"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+    >
+      <defs>
+        <clipPath id={clip}>
+          <rect x={start} y={0} width={Math.max(end - start, 0)} height={1} />
+        </clipPath>
+      </defs>
+      <path className="range-slider__bars" d={outline} />
+      <path
+        className="range-slider__bars range-slider__bars--kept"
+        d={outline}
+        clipPath={`url(#${clip})`}
+      />
+    </svg>
+  );
+}

package/src/range/ui/RangeSlider.tsx

@@ -0,0 +1,209 @@
+import type { NumberRange } from '@blueprintjs/core';
+import { Button, RangeSlider as BlueprintRangeSlider } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+import { useState } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { numberText } from '../../number/core/numberText.ts';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import type {
+  RangeBounds,
+  RangeDomain,
+  RangeHandles,
+} from '../core/rangeBounds.ts';
+import {
+  OPEN_RANGE,
+  isRangeBounded,
+  isRangeDomain,
+  movedRange,
+  rangeHandles,
+  sameRange,
+  settleHandles,
+} from '../core/rangeBounds.ts';
+
+import { RangeHistogram } from './RangeHistogram.tsx';
+import { RangeValue } from './RangeValue.tsx';
+
+/** What a `RangeSlider` needs. */
+export interface RangeSliderProps {
+  /** The quantity bounded, written over the track and read to a screen reader. */
+  label: string;
+  /**
+   * The unit written after the label, e.g. `g/mol`.
+   * @default undefined — nothing is written
+   */
+  unit?: string;
+  /**
+   * The two ends of the track, low first: usually the smallest and largest
+   * value the data holds. A handle at an end leaves that side open, so a value
+   * past the track is never cut by a filter nobody touched.
+   */
+  domain: RangeDomain;
+  /** The range in force; a `null` side is open. */
+  value: RangeBounds;
+  /**
+   * Called when the range settles: a handle released, a value typed, the range
+   * cleared. Never while a handle is being dragged, so a page fetching on it
+   * fetches once per gesture.
+   */
+  onChange: (range: RangeBounds) => void;
+  /**
+   * Called on every step of a drag, for what is cheap to redraw live — a count,
+   * a heatmap computed in the page. Nothing that fetches belongs here.
+   * @default undefined
+   */
+  onPreview?: (range: RangeBounds) => void;
+  /**
+   * The spacing the handles move by, from the low end of the track. Typed
+   * values are not held to it.
+   * @default 1
+   */
+  step?: number;
+  /**
+   * Whether only whole numbers can be typed. A typed decimal is rounded.
+   * @default false
+   */
+  integer?: boolean;
+  /**
+   * How a value is written under the track.
+   * @default the number as it is, with no grouping — a year is not `1,990`
+   */
+  format?: (value: number) => string;
+  /**
+   * How the values are spread along the track: one count per bin, the bins
+   * splitting the track into equal widths. Drawn over the track, the part the
+   * handles keep in the brand colour.
+   * @default undefined — no histogram
+   */
+  histogram?: ArrayLike<number>;
+  /** @default false */
+  disabled?: boolean;
+  /** @default undefined */
+  className?: string;
+  /**
+   * Value of the `data-testid` attribute of the wrapper.
+   * @default undefined
+   */
+  testId?: string;
+}
+
+/** The range before a drag began, and where its handles are now. */
+interface Drag {
+  from: RangeBounds;
+  handles: RangeHandles;
+}
+
+/**
+ * A range picked with two handles, its two values written under the track
+ * where a click turns either into a box to type an exact number.
+ *
+ * The handles are Blueprint's — the keyboard, the touch screen and the
+ * screen reader are already handled there — dressed in the family's colours.
+ * What this adds is the meaning of an end: a handle parked at the end of the
+ * track is an open side, not a bound at the track's end.
+ * @param props - See {@link RangeSliderProps}.
+ * @returns The label, the track and the two values.
+ */
+export function RangeSlider(props: RangeSliderProps): ReactElement {
+  const { label, unit, domain, value, onChange, onPreview } = props;
+  const { step = 1, integer = false, format = numberText } = props;
+  const { histogram, disabled = false, className, testId } = props;
+  const t = useChromeT();
+  const [drag, setDrag] = useState<Drag | null>(null);
+  const [editing, setEditing] = useState<'min' | 'max' | null>(null);
+  const spacing = step > 0 ? step : 1;
+  const drawable = isRangeDomain(domain);
+  const handles = drag?.handles ?? rangeHandles(value, domain);
+  const shown = drag === null ? value : movedRange(drag.from, handles, domain);
+
+  function move(next: NumberRange) {
+    const from = drag?.from ?? value;
+    const settled = settleHandles(next, from, spacing, domain);
+    setDrag({ from, handles: settled });
+    onPreview?.(movedRange(from, settled, domain));
+  }
+
+  function release(next: NumberRange) {
+    const from = drag?.from ?? value;
+    const settled = settleHandles(next, from, spacing, domain);
+    const range = movedRange(from, settled, domain);
+    setDrag(null);
+    if (!sameRange(range, from)) onChange(range);
+  }
+
+  function type(side: 'min' | 'max', typed: number | undefined) {
+    const range = { ...value, [side]: typed ?? null };
+    if (!sameRange(range, value)) onChange(range);
+  }
+
+  return (
+    <div
+      className={joinClassNames('range-slider', className)}
+      data-testid={testId}
+    >
+      <div className="range-slider__head">
+        <span className="range-slider__label">
+          {label}
+          {unit ? <span className="range-slider__unit"> ({unit})</span> : null}
+        </span>
+        {isRangeBounded(value) && !disabled ? (
+          <Button
+            variant="minimal"
+            size="small"
+            icon="cross"
+            aria-label={t('range.clear', { label })}
+            title={t('range.clear', { label })}
+            onClick={() => onChange(OPEN_RANGE)}
+          />
+        ) : null}
+      </div>
+      {drawable ? (
+        <div className="range-slider__track">
+          {histogram === undefined ? null : (
+            <RangeHistogram
+              counts={histogram}
+              start={(handles[0] - domain[0]) / (domain[1] - domain[0])}
+              end={(handles[1] - domain[0]) / (domain[1] - domain[0])}
+            />
+          )}
+          <BlueprintRangeSlider
+            min={domain[0]}
+            max={domain[1]}
+            stepSize={spacing}
+            labelRenderer={false}
+            disabled={disabled}
+            value={[handles[0], handles[1]]}
+            handleHtmlProps={{
+              start: { 'aria-label': t('range.lowest', { label }) },
+              end: { 'aria-label': t('range.highest', { label }) },
+            }}
+            onChange={move}
+            onRelease={release}
+          />
+        </div>
+      ) : null}
+      <div className="range-slider__values">
+        {(['min', 'max'] as const).map((side) => (
+          <RangeValue
+            key={side}
+            side={side}
+            bound={shown[side]}
+            end={side === 'min' ? domain[0] : domain[1]}
+            label={label}
+            format={format}
+            limit={side === 'min' ? value.max : value.min}
+            step={spacing}
+            integer={integer}
+            disabled={disabled}
+            editing={editing === side}
+            onEdit={() => setEditing(side)}
+            onDone={(typed, cancelled) => {
+              setEditing(null);
+              if (!cancelled) type(side, typed);
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/range/ui/RangeValue.tsx

@@ -0,0 +1,166 @@
+import type { KeyboardEvent, ReactElement } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { NumberInput } from '../../number/ui/NumberInput.tsx';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+
+/** What one end of a range slider's row of values needs. */
+export interface RangeValueProps {
+  /** Which end this is. */
+  side: 'min' | 'max';
+  /** The bound on this side, or `null` when the side is open. */
+  bound: number | null;
+  /** The end of the track on this side, shown faint while the side is open. */
+  end: number;
+  /** The quantity the slider bounds, for a screen reader. */
+  label: string;
+  /** How a number is written. */
+  format: (value: number) => string;
+  /** The bound on the other side, which a typed value may not cross. */
+  limit: number | null;
+  /** What one press of an arrow key adds in the box. */
+  step: number;
+  /** Whether only whole numbers are wanted. */
+  integer: boolean;
+  /** Whether the value can be edited. */
+  disabled: boolean;
+  /** Whether the box is open for typing. */
+  editing: boolean;
+  /** Open the box. */
+  onEdit: () => void;
+  /**
+   * Close the box, with what it holds — `undefined` for an emptied box — and
+   * whether Escape closed it, in which case nothing typed is kept.
+   */
+  onDone: (value: number | undefined, cancelled: boolean) => void;
+}
+
+/**
+ * One end of a range, written under the track: a bound, or the end of the
+ * track in faint ink when the side is open. A click turns it into a box, so a
+ * value the handles cannot land on is still one click and a few keystrokes
+ * away.
+ * @param props - See {@link RangeValueProps}.
+ * @returns The value, or the box it is typed into.
+ */
+export function RangeValue(props: RangeValueProps): ReactElement {
+  const { side, bound, end, label, format, disabled, editing, onEdit } = props;
+  const t = useChromeT();
+  if (editing) {
+    const { limit, step, integer, onDone } = props;
+    return (
+      <RangeValueEditor
+        side={side}
+        bound={bound}
+        end={end}
+        label={label}
+        format={format}
+        limit={limit}
+        step={step}
+        integer={integer}
+        onDone={onDone}
+      />
+    );
+  }
+
+  const open = bound === null;
+  const shown = open ? end : bound;
+  const text = Number.isFinite(shown) ? format(shown) : '–';
+  const name = open
+    ? t(side === 'min' ? 'range.noLowerBound' : 'range.noUpperBound', {
+        label,
+      })
+    : t(side === 'min' ? 'range.lowestIs' : 'range.highestIs', {
+        label,
+        value: text,
+      });
+
+  return (
+    <button
+      type="button"
+      className={joinClassNames(
+        'range-slider__value',
+        open && 'range-slider__value--open',
+      )}
+      disabled={disabled}
+      title={t('range.typeValue')}
+      aria-label={name}
+      onClick={onEdit}
+    >
+      {text}
+    </button>
+  );
+}
+
+/** What the box a value is typed into needs. */
+type RangeValueEditorProps = Omit<
+  RangeValueProps,
+  'disabled' | 'editing' | 'onEdit'
+>;
+
+/**
+ * The box a value is typed into. Enter or leaving it keeps what it holds;
+ * Escape drops it.
+ * @param props - See {@link RangeValueEditorProps}.
+ * @returns The box, focused and selected.
+ */
+function RangeValueEditor(props: RangeValueEditorProps): ReactElement {
+  const { side, bound, end, label, format, limit, step, integer } = props;
+  const { onDone } = props;
+  const t = useChromeT();
+  const [typed, setTyped] = useState<number | undefined>(bound ?? undefined);
+  // The box settles its number — rounded, held inside its bounds — as it is
+  // left, and that happens in the same blur this wrapper hears afterwards,
+  // before any re-render: refs are what carry it across.
+  const latest = useRef(typed);
+  const cancelled = useRef(false);
+  const host = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const input = host.current?.querySelector('input');
+    input?.focus();
+    input?.select();
+  }, []);
+
+  function press(event: KeyboardEvent<HTMLSpanElement>) {
+    if (event.key !== 'Enter' && event.key !== 'Escape') return;
+    event.preventDefault();
+    // An Escape that closes the box must not also close a dialog around it.
+    event.stopPropagation();
+    cancelled.current = event.key === 'Escape';
+    if (event.target instanceof HTMLElement) event.target.blur();
+  }
+
+  return (
+    <span
+      ref={host}
+      className={joinClassNames(
+        'range-slider__editor',
+        `range-slider__editor--${side}`,
+      )}
+      onKeyDown={press}
+      onBlur={() => onDone(latest.current, cancelled.current)}
+    >
+      <NumberInput
+        allowEmpty
+        size="small"
+        buttons={false}
+        fill
+        value={typed}
+        step={step}
+        integer={integer}
+        min={side === 'max' ? (limit ?? undefined) : undefined}
+        max={side === 'min' ? (limit ?? undefined) : undefined}
+        placeholder={Number.isFinite(end) ? format(end) : undefined}
+        ariaLabel={t(side === 'min' ? 'range.lowest' : 'range.highest', {
+          label,
+        })}
+        onChange={(next) => {
+          latest.current = next;
+          setTyped(next);
+        }}
+      />
+    </span>
+  );
+}

package/src/range/ui/index.ts

@@ -0,0 +1,2 @@
+export type { RangeSliderProps } from './RangeSlider.tsx';
+export { RangeSlider } from './RangeSlider.tsx';

package/src/seo/core/documentMeta.ts

@@ -15,6 +15,22 @@ export function writeDocumentMeta(meta: DocumentMeta): void {
   if (meta.title) documentTitle(meta.title);
   if (meta.description) metaDescription(meta.description);
   if (meta.canonical) canonicalLink(meta.canonical);
+  if (meta.language) documentLanguage(meta.language);
+}
+
+/**
+ * Say which language the page on screen is in.
+ *
+ * The file the build wrote already says it, and a click that switches language
+ * has to move it with the rest of the head: a page whose `lang` lies is read
+ * aloud wrong by a screen reader and offered to the wrong reader by a search
+ * engine, and nothing on screen shows it.
+ * @param language - The language tag, e.g. `fr`.
+ */
+export function documentLanguage(language: string): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  if (root) root.lang = language;
 }
 
 /**
@@ -71,6 +87,12 @@ export interface DocumentMeta {
    * @default undefined
    */
   canonical?: string;
+  /**
+   * The language the page is written in, for `<html lang>`. Left out, the one
+   * the page was served with stays as it is.
+   * @default undefined
+   */
+  language?: string;
 }
 
 function metaDescription(content: string): void {

package/src/seo/core/index.ts

@@ -1,3 +1,5 @@
+export type { AlternateOptions } from './alternates.ts';
+export { alternateLinkTags } from './alternates.ts';
 export type { DocumentMeta } from './documentMeta.ts';
 export { writeDocumentMeta } from './documentMeta.ts';
 export type {
@@ -9,7 +11,12 @@ export type {
 } from './noscript.ts';
 export { noscriptIndex } from './noscript.ts';
 export type { PageMetaOptions } from './pageMeta.ts';
-export { injectPageMeta, pageDocumentMeta, pageHeadTags } from './pageMeta.ts';
+export {
+  injectPageMeta,
+  pageDocumentMeta,
+  pageHeadTags,
+  pageLanguage,
+} from './pageMeta.ts';
 export type { PageContent, PageSection, PageTable } from './pageProse.ts';
 export { pageProseHtml } from './pageProse.ts';
 export type { PlainDescriptionOptions } from './plainDescription.ts';

package/src/seo/core/noscript.ts

@@ -9,6 +9,9 @@
 import { siteById, siteDisplayName } from '../../ecosystem/core/lookup.ts';
 import type { EcosystemSite, SiteId } from '../../ecosystem/core/sites.ts';
 import { ECOSYSTEM_SITES, siteUrl } from '../../ecosystem/core/sites.ts';
+import { CHROME_CATALOG } from '../../i18n/core/chromeCatalog.ts';
+import type { Language } from '../../i18n/core/languages.ts';
+import { DEFAULT_LANGUAGE } from '../../i18n/core/languages.ts';
 import { joinBasePath } from '../../router/core/basePath.ts';
 import { escapeAttribute, escapeText } from '../../share/core/escape.ts';
 
@@ -70,6 +73,13 @@ export interface NoscriptText {
    * @default false
    */
   ecosystem?: boolean | NoscriptEcosystem;
+  /**
+   * The language the block is written in, which is what the family list's own
+   * heading is translated into. The site's own prose is passed already written;
+   * this is only for the words that belong to the chrome.
+   * @default the default language
+   */
+  language?: Language;
   /**
    * How the site's own addresses are written. `'absolute'` writes them from the
    * root of the host, under the mount the origin names. `'relative'` writes
@@ -119,6 +129,7 @@ export interface NoscriptOptions
  */
 export function noscriptIndex(options: NoscriptOptions): string {
   const site = resolveSite(options.site);
+  const language = options.language ?? DEFAULT_LANGUAGE;
   const hrefs = options.hrefs ?? 'absolute';
   const mount = hrefs === 'absolute' ? mountPathOf(options) : '';
   const content = options.content;
@@ -135,7 +146,7 @@ export function noscriptIndex(options: NoscriptOptions): string {
 
   return `<noscript>
   <h1>${heading}</h1>${prose}
-  <p>${intro}</p>${pageList(options.routes, mount, hrefs, '  ')}${familyList(site.id, options.ecosystem)}
+  <p>${intro}</p>${pageList(options.routes, mount, hrefs, '  ')}${familyList(site.id, options.ecosystem, language)}
 </noscript>`;
 }
 
@@ -185,6 +196,7 @@ function labelOf(route: NoscriptRoute): string {
 function familyList(
   current: string,
   ecosystem: boolean | NoscriptEcosystem | undefined,
+  language: Language,
 ): string {
   if (ecosystem === undefined || ecosystem === false) return '';
   const listed = ecosystem === true ? {} : ecosystem;
@@ -198,8 +210,14 @@ function familyList(
     );
   }
   if (items.length === 0) return '';
+  // The chrome's own words, so one translation in this package writes the crawl
+  // path of every site of the family rather than eighteen catalogs carrying the
+  // same two words.
+  const heading = escapeText(
+    CHROME_CATALOG.translate('ecosystem.otherTools', language),
+  );
   return `
-  <h2>Our other tools</h2>
+  <h2>${heading}</h2>
   <ul>
 ${items.join('\n')}
   </ul>`;

package/src/seo/core/pageMeta.ts

@@ -38,8 +38,16 @@ const ABSOLUTE_URL = /^[a-z][\d+.a-z-]*:\/\//i;
 export interface PageMetaOptions {
   /** The site, named or passed. */
   site: SiteRecord | SiteId;
-  /** Every address it answers, each with its title and description. */
-  routes: readonly RouteMeta[];
+  /**
+   * Every address it answers, each with its title and description.
+   *
+   * A translated site passes a function instead, exactly as `cheminfoPrerender`
+   * takes it: the language is read off the address first, and that language's
+   * table is what the page is titled from. Passed as a value by a site whose
+   * prose is per-language, a language switch would leave the title and the
+   * description in whichever language the table was built in.
+   */
+  routes: readonly RouteMeta[] | ((language: Language) => readonly RouteMeta[]);
   /**
    * The address being written, query string included: a path, or the absolute
    * address an app reads off the page it is on.
@@ -148,10 +156,12 @@ export function pageDocumentMeta(
 ): Required<DocumentMeta> {
   const site = resolveSite(options.site);
   const meta = routeMetaOf(options);
+  const language = pageLanguage(options);
   return {
     title: `${meta.title} — ${siteDisplayName(site)}`,
     description: meta.description,
-    canonical: `${originOf(options)}${withLanguagePath(pageLanguage(options), meta.path)}`,
+    canonical: `${originOf(options)}${withLanguagePath(language, meta.path)}`,
+    language,
   };
 }
 
@@ -173,8 +183,22 @@ export function pageLanguage(options: PageMetaOptions): Language {
 // 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 {
-  const { path } = readLanguagePath(ownPath(options), languagesOf(options));
-  return pageMetaFor(options.routes, path);
+  const { language, path } = readLanguagePath(
+    ownPath(options),
+    languagesOf(options),
+  );
+  return pageMetaFor(tableOf(options, language), path);
+}
+
+// The table the page is titled from: the one the site passed, or the one its
+// function returns for the language the address names.
+function tableOf(
+  options: PageMetaOptions,
+  language: Language,
+): readonly RouteMeta[] {
+  return typeof options.routes === 'function'
+    ? options.routes(language)
+    : options.routes;
 }
 
 // The address from the site's own root, the mount taken off, with the query