react-cheminfo 0.76.0 → 0.78.0

package/src/host/core/resultKinds.ts

@@ -0,0 +1,65 @@
+/**
+ * The kinds a tool hands back to the page that frames it: a picture of what it
+ * shows, a name it worked out, a table of values it predicted.
+ *
+ * A host checks what comes back as a tool checks what it is sent: against the
+ * kind it asked for, stripped of the fields that kind does not name.
+ * `chem.name` is a category — a tool names its preferred IUPAC name
+ * `chem.name.iupac` — so a host asking for any name reads every one of them.
+ */
+
+/** `image.svg`: a picture, as an SVG document. */
+export interface SvgImageValue {
+  /** The SVG document, as text. */
+  svg: string;
+}
+
+/** `chem.name`: a name a structure goes by. */
+export interface NameValue {
+  /** The name, as written. */
+  name: string;
+}
+
+/** One cell of a `data.table`: a number, a text, or `null` where there is none. */
+export type TableCell = string | number | null;
+
+/** `data.table`: values laid out as a table, headings first. */
+export interface TableValue {
+  /** The heading of each column, in order. */
+  columns: string[];
+  /** The rows, each holding one cell per column. */
+  rows: TableCell[][];
+}
+
+/** The schema of `image.svg`. */
+export const SVG_IMAGE_SCHEMA = {
+  type: 'object',
+  properties: { svg: { type: 'string' } },
+  required: ['svg'],
+  additionalProperties: false,
+} as const;
+
+/** The schema of `chem.name`. */
+export const NAME_SCHEMA = {
+  type: 'object',
+  properties: { name: { type: 'string' } },
+  required: ['name'],
+  additionalProperties: false,
+} as const;
+
+/** The schema of `data.table`. */
+export const TABLE_SCHEMA = {
+  type: 'object',
+  properties: {
+    columns: { type: 'array', items: { type: 'string' } },
+    rows: {
+      type: 'array',
+      items: {
+        type: 'array',
+        items: { type: ['string', 'number', 'null'] },
+      },
+    },
+  },
+  required: ['columns', 'rows'],
+  additionalProperties: false,
+} as const;

package/src/host/core/toolMessages.ts

@@ -0,0 +1,160 @@
+/**
+ * What a framed tool sends its host, read as the untrusted input it is: the
+ * `hello` it posts to the window, and on the port the `result` of each request
+ * and the `output` it sends when a value the host takes back changes.
+ *
+ * Anything that is not well formed is `null` and is ignored, as a tool ignores
+ * a request it does not know: a newer tool talking, not an error.
+ */
+
+import {
+  MAX_LABEL_LENGTH,
+  isRecord,
+  readItems,
+  readStrings,
+} from './messageValues.ts';
+import type {
+  HelloMessage,
+  HostError,
+  HostErrorCode,
+  OutputMessage,
+  ResultMessage,
+  ToolInput,
+  ToolOutput,
+  UsedItem,
+} from './protocol.ts';
+import { HELLO_TYPE, PROTOCOL_VERSION } from './protocol.ts';
+
+/** What a tool says of itself in `hello`. */
+export type ToolHello = HelloMessage['tool'];
+
+/** How long the sentence of an error may be, in characters; the rest is cut. */
+const MAX_MESSAGE_LENGTH = 500;
+
+const ERROR_CODES: readonly HostErrorCode[] = [
+  'invalid',
+  'unreadable',
+  'no-input',
+  'no-output',
+];
+
+/**
+ * Read a tool's `hello`, in this version of the protocol.
+ * @param data - What the window delivered.
+ * @returns What the tool takes and gives, or `null` for anything else.
+ */
+export function readHello(data: unknown): ToolHello | null {
+  if (
+    !isRecord(data) ||
+    data.type !== HELLO_TYPE ||
+    data.version !== PROTOCOL_VERSION
+  ) {
+    return null;
+  }
+  const { tool } = data;
+  if (
+    !isRecord(tool) ||
+    typeof tool.name !== 'string' ||
+    typeof tool.origin !== 'string'
+  ) {
+    return null;
+  }
+  return {
+    name: tool.name.slice(0, MAX_LABEL_LENGTH),
+    origin: tool.origin,
+    build: tool.build ?? null,
+    inputs: readInputs(tool.inputs),
+    outputs: readOutputs(tool.outputs),
+  };
+}
+
+/**
+ * Read a message a tool sent through the port.
+ * @param data - What the port delivered.
+ * @returns The `result` or the `output`, or `null` for anything else.
+ */
+export function readToolMessage(
+  data: unknown,
+): ResultMessage | OutputMessage | null {
+  if (!isRecord(data)) return null;
+  if (data.type === 'output') {
+    if (typeof data.document !== 'string' || !Array.isArray(data.items)) {
+      return null;
+    }
+    return {
+      type: 'output',
+      document: data.document,
+      items: readItems(data.items),
+    };
+  }
+  if (data.type !== 'result') return null;
+  const { id, ok, items, used, error } = data;
+  if (typeof id !== 'string') return null;
+  if (ok === true) {
+    return Array.isArray(items)
+      ? { type: 'result', id, ok: true, items: readItems(items) }
+      : { type: 'result', id, ok: true, used: readUsed(used) };
+  }
+  return { type: 'result', id, ok: false, error: readError(error) };
+}
+
+function readInputs(value: unknown): ToolInput[] {
+  const inputs: ToolInput[] = [];
+  if (!Array.isArray(value)) return inputs;
+  for (const entry of value) {
+    if (!isRecord(entry) || typeof entry.key !== 'string') continue;
+    const input: ToolInput = {
+      key: entry.key,
+      kinds: readStrings(entry.kinds),
+    };
+    if (entry.many === true) input.many = true;
+    if (entry.optional === true) input.optional = true;
+    inputs.push(input);
+  }
+  return inputs;
+}
+
+function readOutputs(value: unknown): ToolOutput[] {
+  const outputs: ToolOutput[] = [];
+  if (!Array.isArray(value)) return outputs;
+  for (const entry of value) {
+    if (
+      isRecord(entry) &&
+      typeof entry.key === 'string' &&
+      typeof entry.kind === 'string'
+    ) {
+      outputs.push({ key: entry.key, kind: entry.kind });
+    }
+  }
+  return outputs;
+}
+
+function readUsed(value: unknown): UsedItem[] {
+  const used: UsedItem[] = [];
+  if (!Array.isArray(value)) return used;
+  for (const entry of value) {
+    if (
+      isRecord(entry) &&
+      typeof entry.key === 'string' &&
+      typeof entry.kind === 'string'
+    ) {
+      used.push({ key: entry.key, kind: entry.kind });
+    }
+  }
+  return used;
+}
+
+function readError(value: unknown): HostError {
+  const error: HostError = {
+    code: 'invalid',
+    message: 'The tool refused the request and gave no reason.',
+  };
+  if (!isRecord(value)) return error;
+  const code = ERROR_CODES.find((known) => known === value.code);
+  if (code !== undefined) error.code = code;
+  if (typeof value.message === 'string' && value.message.trim() !== '') {
+    error.message = value.message.slice(0, MAX_MESSAGE_LENGTH);
+  }
+  if (Array.isArray(value.errors)) error.errors = readStrings(value.errors);
+  return error;
+}

package/src/host/ui/index.ts

@@ -1,2 +1,8 @@
+export type {
+  FramedTool,
+  FramedToolOptions,
+  FramedToolStatus,
+} from './useFramedTool.ts';
+export { HELLO_TIMEOUT, useFramedTool } from './useFramedTool.ts';
 export type { HostHandlers } from './useHostConnection.ts';
 export { useHostConnection } from './useHostConnection.ts';

package/src/host/ui/useFramedTool.ts

@@ -0,0 +1,213 @@
+/**
+ * Frame a tool of the family and talk to it: hand it the document to show,
+ * keep what it sends back, and ask it for other values.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type {
+  LoadOutcome,
+  ToolConnection,
+  ToolDocument,
+} from '../core/connectTool.ts';
+import { connectTool } from '../core/connectTool.ts';
+import type { HostItem } from '../core/protocol.ts';
+import type { ToolHello } from '../core/toolMessages.ts';
+
+/** What {@link useFramedTool} frames, and what it hands over. */
+export interface FramedToolOptions {
+  /**
+   * The address the frame opens, `?embed=1` included. Its origin is the only
+   * one talked to.
+   */
+  url: string;
+  /** How the host introduces itself to the tool. */
+  host: string;
+  /**
+   * The document to show, or `null` while there is none. It is handed over
+   * whenever its `document` changes, and never twice in a row.
+   */
+  document: ToolDocument | null;
+  /**
+   * How long the tool has to say `hello` before it counts as unavailable, in
+   * milliseconds.
+   * @default HELLO_TIMEOUT
+   */
+  helloTimeout?: number;
+}
+
+/** Whether the tool answered: still loading, talking, or silent past the wait. */
+export type FramedToolStatus = 'connecting' | 'connected' | 'unavailable';
+
+/** A framed tool, as the host page sees it. */
+export interface FramedTool {
+  /**
+   * The callback ref of the `<iframe>`, rendered with the hook and given no
+   * `src` of its own: the address is set once this page listens, so the
+   * tool's `hello` cannot be missed.
+   */
+  attachFrame: (element: HTMLIFrameElement | null) => void;
+  /**
+   * Show the frame on the whole screen, from a click; Esc brings it back.
+   * Rejects where the browser will not.
+   */
+  fullscreen: () => Promise<void>;
+  /** Whether the tool answered. */
+  status: FramedToolStatus;
+  /** What the tool said it takes and gives, once it has. */
+  tool: ToolHello | null;
+  /** What became of the document on screen, once the tool answered. */
+  outcome: LoadOutcome | null;
+  /**
+   * The values the document's `accept` names, by output key: those the tool
+   * held once it showed the document, then every change it sent.
+   */
+  outputs: ReadonlyMap<string, HostItem>;
+  /** Ask for the current value of some outputs; rejects with the tool's reason. */
+  get: (keys: readonly string[]) => Promise<HostItem[]>;
+}
+
+/**
+ * How long a tool has to say `hello`, in milliseconds: a cold start fetches the
+ * tool's page, its scripts and its fonts, on a slow line as well.
+ */
+export const HELLO_TIMEOUT = 20_000;
+
+const NO_OUTPUTS: ReadonlyMap<string, HostItem> = new Map();
+
+/**
+ * Frame a tool, and keep it showing a document.
+ *
+ * The frame is opened once and stays: a new document goes to the tool through
+ * the protocol, the way a host hands over data, rather than as a new address
+ * that would reload the tool and lose what its visitor did in it. A tool that
+ * reloads all the same is handed the document again.
+ * @param options - See {@link FramedToolOptions}.
+ * @returns See {@link FramedTool}.
+ */
+export function useFramedTool(options: FramedToolOptions): FramedTool {
+  const { url, host, document, helloTimeout = HELLO_TIMEOUT } = options;
+  const frame = useRef<HTMLIFrameElement | null>(null);
+  const attachFrame = useCallback((element: HTMLIFrameElement | null) => {
+    frame.current = element;
+  }, []);
+  const connection = useRef<ToolConnection | null>(null);
+  const latest = useRef(document);
+  const [link, setLink] = useState<Link | null>(null);
+  const [answer, setAnswer] = useState<Answer | null>(null);
+  const [held, setHeld] = useState<Held | null>(null);
+
+  useEffect(() => {
+    latest.current = document;
+  });
+
+  useEffect(() => {
+    const element = frame.current;
+    if (element === null) return;
+    let greeted = false;
+    const opened = connectTool({
+      frame: () => element.contentWindow,
+      origin: new URL(url, globalThis.location.href).origin,
+      host: { name: host },
+      listen: (listener) => {
+        globalThis.addEventListener('message', listener);
+        return () => {
+          globalThis.removeEventListener('message', listener);
+        };
+      },
+      onHello: (tool) => {
+        greeted = true;
+        setLink({ url, status: 'connected', tool });
+      },
+      onOutput: (message) => {
+        setHeld((previous) =>
+          hold(previous, `${url}\n${message.document}`, message.items),
+        );
+      },
+    });
+    connection.current = opened;
+    const timer = setTimeout(() => {
+      if (!greeted) setLink({ url, status: 'unavailable', tool: null });
+    }, helloTimeout);
+    // Set once the listener exists, and again when the effect runs anew, so
+    // the tool greets this listener rather than one already closed.
+    element.src = url;
+    return () => {
+      clearTimeout(timer);
+      opened.close();
+      if (connection.current === opened) connection.current = null;
+    };
+  }, [url, host, helloTimeout]);
+
+  const name = document?.document ?? null;
+  useEffect(() => {
+    const opened = connection.current;
+    const shown = latest.current;
+    if (opened === null || shown === null) return;
+    const key = `${url}\n${shown.document}`;
+    void opened.load(shown).then(async (outcome) => {
+      setAnswer({ key, outcome });
+      const accept = shown.accept ?? [];
+      if (outcome.status !== 'loaded' || accept.length === 0) return;
+      // What the tool held once it showed the document is never sent unasked.
+      const items = await opened.get(accept).catch(() => []);
+      setHeld((previous) => hold(previous, key, items));
+    });
+  }, [name, url, host]);
+
+  const fullscreen = useCallback(async () => {
+    const element = frame.current;
+    if (element === null) throw new Error('The tool is not open.');
+    await element.requestFullscreen();
+  }, []);
+
+  const get = useCallback(async (keys: readonly string[]) => {
+    const opened = connection.current;
+    if (opened === null) {
+      throw new Error('The tool is not open, so it has nothing to give.');
+    }
+    return opened.get(keys);
+  }, []);
+
+  const key = name === null ? null : `${url}\n${name}`;
+  const current = link?.url === url ? link : null;
+  return {
+    attachFrame,
+    fullscreen,
+    status: current?.status ?? 'connecting',
+    tool: current?.tool ?? null,
+    outcome: answer !== null && answer.key === key ? answer.outcome : null,
+    outputs: held !== null && held.key === key ? held.outputs : NO_OUTPUTS,
+    get,
+  };
+}
+
+interface Link {
+  url: string;
+  status: Exclude<FramedToolStatus, 'connecting'>;
+  tool: ToolHello | null;
+}
+
+interface Answer {
+  key: string;
+  outcome: LoadOutcome;
+}
+
+interface Held {
+  key: string;
+  outputs: ReadonlyMap<string, HostItem>;
+}
+
+function hold(
+  previous: Held | null,
+  key: string,
+  items: readonly HostItem[],
+): Held {
+  const outputs = new Map(
+    previous?.key === key ? previous.outputs : NO_OUTPUTS,
+  );
+  for (const item of items) {
+    if (item.key !== undefined) outputs.set(item.key, item);
+  }
+  return { key, outputs };
+}

package/src/locales/de.json

@@ -114,6 +114,14 @@
   "site.atoms.tagline": "Elektronen, Neutronen, Lewis-Formeln und Oxidationszahlen.",
   "site.moles.tagline": "Eine Reaktion ausgleichen und ihre Massenzusammensetzung berechnen.",
   "site.inorganic.tagline": "Eine anorganische Verbindung benennen und ihre Formel schreiben.",
+  "site.iupac-name.tagline": "Der IUPAC-Name einer Struktur, und die Struktur, die ein Name bezeichnet.",
+  "site.slides.tagline": "Ein laufendes Werkzeug auf eine Folie setzen, mit dem Link seiner Schaltfläche Teilen.",
+  "site.vibrations.tagline": "IR- und Raman-Spektren, im Browser berechnet.",
+  "site.draw.tagline": "Strukturen in Publikationsqualität, als SVG, das die Chemie behält.",
+  "site.molecules.tagline": "Ein Molekül nachschlagen, mit seinen berechneten Eigenschaften und Quellen.",
+  "site.chembio.tagline": "Naturstoffe, und die Organismen, in denen sie gefunden wurden.",
+  "site.wikidata.tagline": "Die Chemie der Wikipedia-Infoboxen, nach Struktur durchsuchbar.",
+  "site.mz.tagline": "Massenspektren, danach geordnet, wie sie gemessen wurden.",
   "share.button": "Teilen",
   "share.buttonTitle": "Einen Link zu dieser Seite teilen oder sie in Ihre eigene Website einbetten",
   "share.dialogTitleFor": "{title} teilen oder einbetten",
@@ -282,10 +290,14 @@
   "download.resolution": "Auflösung",
   "download.resolutionHelp": "Wie viele Male größer als die Abbildung auf dem Bildschirm die Datei ist. Ein PNG bekommt entsprechend mehr Pixel: zwei passt für eine Folie, drei oder vier für den Druck. Ein SVG bleibt in jeder Größe scharf und öffnet sich entsprechend größer.",
   "download.resolutionExample": "Eine auf dem Bildschirm 640 Pixel breite Abbildung wird 1280 Pixel breit gespeichert.",
+  "download.resolutionDpiHelp": "Punkte pro Zoll, wenn die Abbildung in ihrer Größe auf der Seite gedruckt wird. 150 genügt für eine Folie, 300 für die Fotos einer Zeitschrift, 600 bis 1200 für Strichzeichnungen. Das PNG gibt sie an, sodass ein Dokument es in dieser Größe platziert.",
+  "download.resolutionDpiExample": "Eine 8,5 cm breite Abbildung wird 1004 Pixel breit gespeichert.",
   "download.noFigure": "Auf der Seite gibt es noch keine Abbildung zum Speichern.",
   "download.hintRasterSvg": "Ein SVG, das ein Bild von {pixels} enthält: eine 3D-Szene hat keine Vektorform.",
   "download.hintSvg": "Öffnet sich mit {pixels} und bleibt in jeder Größe scharf.",
   "download.hintPng": "Gespeichert {pixels}.",
+  "download.hintSvgDpi": "Wird {width} × {height} cm groß gedruckt und bleibt in jeder Größe scharf.",
+  "download.hintPngDpi": "Gespeichert {pixels}, gedruckt {width} × {height} cm.",
   "download.hintCopied": "In die Zwischenablage kopiert: PNG mit {pixels}.",
   "download.copyUnsupported": "Dieser Browser kann kein Bild in die Zwischenablage legen. Speichern Sie es stattdessen.",
   "download.size": "Größe",
@@ -794,5 +806,22 @@
   "ir.raman.doc.sampled": "Eine Bande wird an dem abgetasteten Punkt angegeben, an dem sie ihr Maximum hat: Ihre Lage ist nur so genau wie das Raster, auf dem das Spektrum aufgenommen wurde.",
   "ir.raman.aboutLead": "Zeichnet ein Raman-Spektrum, findet seine Banden und listet sie neben dem Diagramm auf.",
   "ir.raman.credit.picking": "**ir-spectrum** (cheminfo, MIT) findet die Banden, mit dem Peakfinder von **common-spectrum** und **ml-gsd**.",
-  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) schreibt die heruntergeladene JCAMP-DX-Datei."
+  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) schreibt die heruntergeladene JCAMP-DX-Datei.",
+  "panel.focus": "Auf das Panel „{panel}“ konzentrieren",
+  "panel.focusTooltip": "Auf dieses Panel konzentrieren: alle anderen einklappen",
+  "panel.unfocusTooltip": "Die anderen Panels wieder ausklappen",
+  "panel.fillScreen": "Panel „{panel}“ im Vollbild zeigen",
+  "panel.fillScreenTooltip": "Dieses Panel im Vollbild zeigen",
+  "panel.fold": "Panel „{panel}“ einklappen",
+  "panel.unfold": "Panel „{panel}“ ausklappen",
+  "panel.foldTooltip": "Dieses Panel einklappen",
+  "panel.unfoldTooltip": "Ausklappen",
+  "panel.close": "Panel „{panel}“ schließen",
+  "panel.closeTooltip": "Dieses Panel schließen",
+  "panel.leaveFullScreen": "Vollbild verlassen",
+  "panel.leaveFullScreenTooltip": "Vollbild verlassen (Esc)",
+  "panel.clearFilter": "Filter leeren",
+  "panel.colourOf": "Farbe von {name}",
+  "panel.drawIn": "{name} in {color} zeichnen",
+  "panel.changeColour": "Dieses Spektrum in einer anderen Farbe zeichnen"
 }

package/src/locales/en.json

@@ -114,6 +114,14 @@
   "site.atoms.tagline": "Electrons, neutrons, Lewis structures and oxidation states.",
   "site.moles.tagline": "Balance a reaction, and work out its mass composition.",
   "site.inorganic.tagline": "Name an inorganic compound, and write its formula.",
+  "site.iupac-name.tagline": "The IUPAC name of a structure, and the structure a name denotes.",
+  "site.slides.tagline": "Put a live tool on a slide, from the link its Share button gives.",
+  "site.vibrations.tagline": "IR and Raman spectra computed in the browser.",
+  "site.draw.tagline": "Journal-grade structures, in an SVG that keeps the chemistry.",
+  "site.molecules.tagline": "Look up a molecule, its computed properties and its sources.",
+  "site.chembio.tagline": "Natural products, and the organisms they were found in.",
+  "site.wikidata.tagline": "The chemistry of Wikipedia’s infoboxes, searchable by structure.",
+  "site.mz.tagline": "Mass spectra, classified by how they were measured.",
   "share.button": "Share",
   "share.buttonTitle": "Share a link to this page, or embed it in your own site",
   "share.dialogTitleFor": "Share or embed — {title}",
@@ -282,10 +290,14 @@
   "download.resolution": "Resolution",
   "download.resolutionHelp": "How many times the figure on screen the file is. A PNG gets that many more pixels: two is right for a slide, three or four for print. An SVG stays sharp at any size, and opens that many times larger.",
   "download.resolutionExample": "A figure 640 pixels wide on screen is saved 1280 pixels wide.",
+  "download.resolutionDpiHelp": "Dots per inch, with the figure printed at its size on the page. 150 is enough for a slide, 300 for a journal's photographs, 600 to 1200 for line art. The PNG states it, so a document places it at that size.",
+  "download.resolutionDpiExample": "A figure 8.5 cm wide is saved 1004 pixels wide.",
   "download.noFigure": "There is no figure on the page to save yet.",
   "download.hintRasterSvg": "An SVG holding a picture of {pixels}: a 3D scene has no vector form.",
   "download.hintSvg": "Opens at {pixels}, and stays sharp at any size.",
   "download.hintPng": "Saved {pixels}.",
+  "download.hintSvgDpi": "Prints {width} × {height} cm, and stays sharp at any size.",
+  "download.hintPngDpi": "Saved {pixels}, which print {width} × {height} cm.",
   "download.hintCopied": "Copied {pixels} to the clipboard, as a PNG.",
   "download.copyUnsupported": "This browser cannot put a picture on the clipboard. Save it instead.",
   "download.size": "Size",
@@ -794,5 +806,22 @@
   "ir.raman.doc.sampled": "A band is reported at the sampled point it peaked on, so its position is only as precise as the grid the spectrum was recorded on.",
   "ir.raman.aboutLead": "Draws a Raman spectrum, picks its bands and lists them beside the chart.",
   "ir.raman.credit.picking": "**ir-spectrum** (cheminfo, MIT) picks the bands, with the peak picker of **common-spectrum** and **ml-gsd**.",
-  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) writes the JCAMP-DX download."
+  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) writes the JCAMP-DX download.",
+  "panel.focus": "Focus on the {panel} panel",
+  "panel.focusTooltip": "Focus on this panel: fold every other one away",
+  "panel.unfocusTooltip": "Unfold the other panels again",
+  "panel.fillScreen": "Fill the screen with the {panel} panel",
+  "panel.fillScreenTooltip": "Fill the screen with this panel",
+  "panel.fold": "Fold the {panel} panel",
+  "panel.unfold": "Unfold the {panel} panel",
+  "panel.foldTooltip": "Fold this panel away",
+  "panel.unfoldTooltip": "Unfold it",
+  "panel.close": "Close the {panel} panel",
+  "panel.closeTooltip": "Close this panel",
+  "panel.leaveFullScreen": "Leave full screen",
+  "panel.leaveFullScreenTooltip": "Leave full screen (Esc)",
+  "panel.clearFilter": "Clear the filter",
+  "panel.colourOf": "Colour of {name}",
+  "panel.drawIn": "Draw {name} in {color}",
+  "panel.changeColour": "Draw this spectrum in another colour"
 }

package/src/locales/es.json

@@ -114,6 +114,14 @@
   "site.atoms.tagline": "Electrones, neutrones, estructuras de Lewis y números de oxidación.",
   "site.moles.tagline": "Ajustar una reacción y calcular su composición en masa.",
   "site.inorganic.tagline": "Nombrar un compuesto inorgánico y escribir su fórmula.",
+  "site.iupac-name.tagline": "El nombre IUPAC de una estructura, y la estructura que designa un nombre.",
+  "site.slides.tagline": "Poner una herramienta en vivo en una diapositiva, con el enlace que da su botón Compartir.",
+  "site.vibrations.tagline": "Espectros IR y Raman calculados en el navegador.",
+  "site.draw.tagline": "Estructuras con calidad de publicación, en un SVG que conserva la química.",
+  "site.molecules.tagline": "Buscar una molécula, sus propiedades calculadas y sus fuentes.",
+  "site.chembio.tagline": "Productos naturales, y los organismos en los que se encontraron.",
+  "site.wikidata.tagline": "La química de las fichas de Wikipedia, con búsqueda por estructura.",
+  "site.mz.tagline": "Espectros de masas, clasificados según cómo se midieron.",
   "share.button": "Compartir",
   "share.buttonTitle": "Compartir un enlace a esta página, o incrustarla en su propio sitio",
   "share.dialogTitleFor": "Compartir o incrustar — {title}",
@@ -282,10 +290,14 @@
   "download.resolution": "Resolución",
   "download.resolutionHelp": "Cuántas veces la figura en pantalla mide el archivo. Un PNG recibe tantos píxeles más: dos sirve para una diapositiva, tres o cuatro para imprimir. Un SVG se mantiene nítido a cualquier tamaño, y se abre tantas veces más grande.",
   "download.resolutionExample": "Una figura de 640 píxeles de ancho en pantalla se guarda con 1280 píxeles de ancho.",
+  "download.resolutionDpiHelp": "Puntos por pulgada, con la figura impresa a su tamaño en la página. 150 basta para una diapositiva, 300 para las fotografías de una revista, de 600 a 1200 para el dibujo de línea. El PNG lo indica, así un documento lo coloca a ese tamaño.",
+  "download.resolutionDpiExample": "Una figura de 8,5 cm de ancho se guarda con 1004 píxeles de ancho.",
   "download.noFigure": "Todavía no hay ninguna figura en la página que guardar.",
   "download.hintRasterSvg": "Un SVG que contiene una imagen de {pixels}: una escena 3D no tiene forma vectorial.",
   "download.hintSvg": "Se abre a {pixels}, y se mantiene nítido a cualquier tamaño.",
   "download.hintPng": "Guardado {pixels}.",
+  "download.hintSvgDpi": "Se imprime a {width} × {height} cm, y se mantiene nítido a cualquier tamaño.",
+  "download.hintPngDpi": "Guardado {pixels}, que se imprimen a {width} × {height} cm.",
   "download.hintCopied": "Copiado al portapapeles: PNG de {pixels}.",
   "download.copyUnsupported": "Este navegador no puede poner una imagen en el portapapeles. Guárdala en su lugar.",
   "download.size": "Tamaño",
@@ -794,5 +806,22 @@
   "ir.raman.doc.sampled": "Una banda se da en el punto muestreado donde alcanza su máximo: su posición no es más precisa que la rejilla en la que se registró el espectro.",
   "ir.raman.aboutLead": "Dibuja un espectro Raman, encuentra sus bandas y las enumera junto a la gráfica.",
   "ir.raman.credit.picking": "**ir-spectrum** (cheminfo, MIT) encuentra las bandas, con el detector de picos de **common-spectrum** y **ml-gsd**.",
-  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) escribe el archivo JCAMP-DX descargado."
+  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) escribe el archivo JCAMP-DX descargado.",
+  "panel.focus": "Centrarse en el panel {panel}",
+  "panel.focusTooltip": "Centrarse en este panel: plegar todos los demás",
+  "panel.unfocusTooltip": "Desplegar de nuevo los demás paneles",
+  "panel.fillScreen": "Mostrar el panel {panel} a pantalla completa",
+  "panel.fillScreenTooltip": "Mostrar este panel a pantalla completa",
+  "panel.fold": "Plegar el panel {panel}",
+  "panel.unfold": "Desplegar el panel {panel}",
+  "panel.foldTooltip": "Plegar este panel",
+  "panel.unfoldTooltip": "Desplegarlo",
+  "panel.close": "Cerrar el panel {panel}",
+  "panel.closeTooltip": "Cerrar este panel",
+  "panel.leaveFullScreen": "Salir de la pantalla completa",
+  "panel.leaveFullScreenTooltip": "Salir de la pantalla completa (Esc)",
+  "panel.clearFilter": "Borrar el filtro",
+  "panel.colourOf": "Color de {name}",
+  "panel.drawIn": "Dibujar {name} en {color}",
+  "panel.changeColour": "Dibujar este espectro en otro color"
 }

package/src/locales/fr.json

@@ -114,6 +114,14 @@
   "site.atoms.tagline": "Électrons, neutrons, structures de Lewis et nombres d'oxydation.",
   "site.moles.tagline": "Équilibrer une réaction, et en calculer la composition massique.",
   "site.inorganic.tagline": "Nommer un composé inorganique, et en écrire la formule.",
+  "site.iupac-name.tagline": "Le nom IUPAC d'une structure, et la structure que désigne un nom.",
+  "site.slides.tagline": "Mettre un outil vivant sur une diapositive, avec le lien que donne son bouton Partager.",
+  "site.vibrations.tagline": "Spectres IR et Raman calculés dans le navigateur.",
+  "site.draw.tagline": "Des structures de qualité publication, dans un SVG qui garde la chimie.",
+  "site.molecules.tagline": "Rechercher une molécule, ses propriétés calculées et ses sources.",
+  "site.chembio.tagline": "Les produits naturels, et les organismes où ils ont été trouvés.",
+  "site.wikidata.tagline": "La chimie des infobox de Wikipédia, interrogeable par structure.",
+  "site.mz.tagline": "Des spectres de masse, classés selon la façon dont ils ont été mesurés.",
   "share.button": "Partager",
   "share.buttonTitle": "Partager un lien vers cette page, ou l'intégrer à votre propre site",
   "share.dialogTitleFor": "Partager ou intégrer — {title}",
@@ -282,10 +290,14 @@
   "download.resolution": "Résolution",
   "download.resolutionHelp": "Combien de fois la figure à l'écran mesure le fichier. Un PNG reçoit d'autant plus de pixels : deux convient pour une diapositive, trois ou quatre pour l'impression. Un SVG reste net à toute taille, et s'ouvre d'autant plus grand.",
   "download.resolutionExample": "Une figure large de 640 pixels à l'écran est enregistrée large de 1280 pixels.",
+  "download.resolutionDpiHelp": "Points par pouce, la figure étant imprimée à sa taille sur la page. 150 suffit pour une diapositive, 300 pour les photographies d'une revue, 600 à 1200 pour un dessin au trait. Le PNG l'indique, si bien qu'un document le place à cette taille.",
+  "download.resolutionDpiExample": "Une figure large de 8,5 cm est enregistrée large de 1004 pixels.",
   "download.noFigure": "Il n'y a encore aucune figure à enregistrer sur la page.",
   "download.hintRasterSvg": "Un SVG contenant une image de {pixels} : une scène 3D n'a pas de forme vectorielle.",
   "download.hintSvg": "S'ouvre à {pixels}, et reste net à toute taille.",
   "download.hintPng": "Enregistré {pixels}.",
+  "download.hintSvgDpi": "S'imprime en {width} × {height} cm, et reste net à toute taille.",
+  "download.hintPngDpi": "Enregistré {pixels}, qui s'impriment en {width} × {height} cm.",
   "download.hintCopied": "Copié dans le presse-papiers : PNG de {pixels}.",
   "download.copyUnsupported": "Ce navigateur ne peut pas copier une image dans le presse-papiers. Enregistrez-la plutôt.",
   "download.size": "Taille",
@@ -794,5 +806,22 @@
   "ir.raman.doc.sampled": "Une bande est donnée au point échantillonné où elle culmine : sa position n'est pas plus précise que la grille sur laquelle le spectre a été enregistré.",
   "ir.raman.aboutLead": "Trace un spectre Raman, repère ses bandes et les liste à côté du graphique.",
   "ir.raman.credit.picking": "**ir-spectrum** (cheminfo, MIT) repère les bandes, avec le détecteur de pics de **common-spectrum** et **ml-gsd**.",
-  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) écrit le fichier JCAMP-DX téléchargé."
+  "ir.raman.credit.jcamp": "**convert-to-jcamp** (cheminfo, MIT) écrit le fichier JCAMP-DX téléchargé.",
+  "panel.focus": "Se concentrer sur le panneau {panel}",
+  "panel.focusTooltip": "Se concentrer sur ce panneau : replier tous les autres",
+  "panel.unfocusTooltip": "Déplier de nouveau les autres panneaux",
+  "panel.fillScreen": "Afficher le panneau {panel} en plein écran",
+  "panel.fillScreenTooltip": "Afficher ce panneau en plein écran",
+  "panel.fold": "Replier le panneau {panel}",
+  "panel.unfold": "Déplier le panneau {panel}",
+  "panel.foldTooltip": "Replier ce panneau",
+  "panel.unfoldTooltip": "Le déplier",
+  "panel.close": "Fermer le panneau {panel}",
+  "panel.closeTooltip": "Fermer ce panneau",
+  "panel.leaveFullScreen": "Quitter le plein écran",
+  "panel.leaveFullScreenTooltip": "Quitter le plein écran (Échap)",
+  "panel.clearFilter": "Effacer le filtre",
+  "panel.colourOf": "Couleur de {name}",
+  "panel.drawIn": "Tracer {name} en {color}",
+  "panel.changeColour": "Tracer ce spectre dans une autre couleur"
 }