react-cheminfo 0.10.0 → 0.12.0

package/lib/molecule3d/core/settings.js

@@ -0,0 +1,133 @@
+/**
+ * The display settings of the 3D molecule viewer and the toolbar it carries,
+ * free of React and molstar so a site can persist and validate them.
+ */
+/** Ways the model can be drawn, in the order the picker offers them. */
+export const REPRESENTATIONS = [
+    'ball-and-stick',
+    'spacefill',
+    'stick',
+];
+/** Human names for the representation picker. */
+export const REPRESENTATION_LABELS = {
+    'ball-and-stick': 'Ball and stick',
+    spacefill: 'Spacefill',
+    stick: 'Sticks',
+};
+/** Ways the surface can be coloured, in the order the picker offers them. */
+export const SURFACE_COLORINGS = ['uniform', 'element', 'polarity'];
+/** Human names for the surface colouring picker. */
+export const SURFACE_COLORING_LABELS = {
+    uniform: 'Uniform',
+    element: 'Element',
+    polarity: 'Polarity',
+};
+/**
+ * The colours of `polarity` mode. Positive: cations, and hydrogens bonded to
+ * nitrogen or oxygen. Negative: anions, nitrogen and oxygen. Neutral: the rest.
+ * Scene colours: WebGL cannot read a CSS custom property.
+ */
+export const SURFACE_CHARGE_COLORS = {
+    positive: '#dc2626', // tokens-ok
+    negative: '#2563eb', // tokens-ok
+    neutral: '#9ca3af', // tokens-ok
+};
+/** What the viewer draws when a site does not say. */
+export const DEFAULT_MOLECULE_3D_SETTINGS = {
+    representation: 'ball-and-stick',
+    sizeFactor: 1,
+    showSurface: false,
+    surfaceAlpha: 0.5,
+    probeRadius: 1.4,
+    surfaceColoring: 'uniform',
+    // A scene colour: WebGL cannot read a CSS custom property.
+    surfaceColor: '#94a3b8', // tokens-ok
+};
+/** The span, and the slider step, of every numeric setting. */
+export const MOLECULE_3D_RANGES = {
+    sizeFactor: { minimum: 0.2, maximum: 2, step: 0.1 },
+    surfaceAlpha: { minimum: 0.1, maximum: 1, step: 0.05 },
+    probeRadius: { minimum: 1, maximum: 3, step: 0.1 },
+};
+/** Every tool on. */
+export const DEFAULT_MOLECULE_3D_TOOLS = {
+    measure: true,
+    options: true,
+    spin: true,
+    surface: true,
+    reset: true,
+    export: true,
+    help: true,
+};
+/**
+ * Narrow an arbitrary string — a stored preference, a picker's value — to a
+ * representation.
+ * @param value - Candidate representation id.
+ * @returns True when it is one of {@link REPRESENTATIONS}.
+ */
+export function isRepresentationId(value) {
+    for (const representation of REPRESENTATIONS) {
+        if (representation === value)
+            return true;
+    }
+    return false;
+}
+/**
+ * Narrow an arbitrary string to a surface colouring.
+ * @param value - Candidate colouring id.
+ * @returns True when it is one of {@link SURFACE_COLORINGS}.
+ */
+export function isSurfaceColoringId(value) {
+    for (const coloring of SURFACE_COLORINGS) {
+        if (coloring === value)
+            return true;
+    }
+    return false;
+}
+/**
+ * Complete and repair settings from any source: missing fields take their
+ * default, numbers are clamped into {@link MOLECULE_3D_RANGES}, an unknown
+ * representation or colouring falls back to the default one, and a colour that
+ * is not `#rrggbb` to its default.
+ * @param settings - Whatever a site has, possibly read back from storage.
+ * @returns Settings the viewer can draw.
+ */
+export function normalizeMolecule3DSettings(settings = {}) {
+    const defaults = DEFAULT_MOLECULE_3D_SETTINGS;
+    const { representation, sizeFactor, showSurface, surfaceAlpha, probeRadius, surfaceColoring, surfaceColor, } = settings;
+    return {
+        representation: typeof representation === 'string' && isRepresentationId(representation)
+            ? representation
+            : defaults.representation,
+        sizeFactor: clamp(sizeFactor, 'sizeFactor'),
+        showSurface: typeof showSurface === 'boolean' ? showSurface : defaults.showSurface,
+        surfaceAlpha: clamp(surfaceAlpha, 'surfaceAlpha'),
+        probeRadius: clamp(probeRadius, 'probeRadius'),
+        surfaceColoring: typeof surfaceColoring === 'string' &&
+            isSurfaceColoringId(surfaceColoring)
+            ? surfaceColoring
+            : defaults.surfaceColoring,
+        surfaceColor: hexColor(surfaceColor, defaults.surfaceColor),
+    };
+}
+/**
+ * Complete a partial tool selection.
+ * @param tools - The tools a site switched on or off.
+ * @returns Every tool, those not named left on.
+ */
+export function resolveMolecule3DTools(tools = {}) {
+    return { ...DEFAULT_MOLECULE_3D_TOOLS, ...tools };
+}
+function hexColor(value, fallback) {
+    return typeof value === 'string' && /^#[\da-f]{6}$/i.test(value)
+        ? value.toLowerCase()
+        : fallback;
+}
+function clamp(value, key) {
+    if (typeof value !== 'number' || !Number.isFinite(value)) {
+        return DEFAULT_MOLECULE_3D_SETTINGS[key];
+    }
+    const { minimum, maximum } = MOLECULE_3D_RANGES[key];
+    return Math.min(Math.max(value, minimum), maximum);
+}
+//# sourceMappingURL=settings.js.map

package/lib/molecule3d/core/settings.js.map

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

package/lib/molecule3d/ui/Molecule3DExport.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The export popover of the molecule viewer: the family's figure-saving panel,
+ * fed by a render of the WebGL scene rather than by the SVG on the page.
+ */
+import type { ReactElement } from 'react';
+import type { FigureFormat } from '../../download/core/downloadFigure.ts';
+import type { FigurePixels } from '../../download/core/figureScale.ts';
+/** Props of {@link Molecule3DExport}. */
+export interface Molecule3DExportProps {
+    /** Reads the size of the canvas on screen, when the popover opens. */
+    getSize: () => FigurePixels | null;
+    /** Writes the file. */
+    onExport: (format: FigureFormat, scale: number) => Promise<void>;
+}
+/**
+ * The export panel.
+ * @param props - See {@link Molecule3DExportProps}.
+ * @returns The panel.
+ */
+export declare function Molecule3DExport(props: Molecule3DExportProps): ReactElement;
+//# sourceMappingURL=Molecule3DExport.d.ts.map

package/lib/molecule3d/ui/Molecule3DExport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Molecule3DExport.d.ts","sourceRoot":"","sources":["../../../src/molecule3d/ui/Molecule3DExport.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAOvE,yCAAyC;AACzC,MAAM,WAAW,qBAAqB;IACpC,sEAAsE;IACtE,OAAO,EAAE,MAAM,YAAY,GAAG,IAAI,CAAC;IACnC,uBAAuB;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAClE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAmC3E"}

package/lib/molecule3d/ui/Molecule3DExport.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DEFAULT_FIGURE_SCALE, FIGURE_SCALES, } from "../../download/core/figureScale.js";
+import { FigureDownloadPanel } from "../../download/ui/FigureDownloadPanel.js";
+/**
+ * The export panel.
+ * @param props - See {@link Molecule3DExportProps}.
+ * @returns The panel.
+ */
+export function Molecule3DExport(props) {
+    const { getSize, onExport } = props;
+    const [size] = useState(getSize);
+    const [format, setFormat] = useState('png');
+    const [scale, setScale] = useState(DEFAULT_FIGURE_SCALE);
+    const [failure, setFailure] = useState(null);
+    const [saving, setSaving] = useState(false);
+    async function save() {
+        setSaving(true);
+        try {
+            await onExport(format, scale);
+            setFailure(null);
+        }
+        catch (error) {
+            setFailure(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsx(FigureDownloadPanel, { title: "Export image", format: format, scale: scale, scales: FIGURE_SCALES, size: size, failure: failure, saving: saving, rasterSvg: true, onFormatChange: setFormat, onScaleChange: setScale, onSave: () => void save() }));
+}
+//# sourceMappingURL=Molecule3DExport.js.map

package/lib/molecule3d/ui/Molecule3DExport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Molecule3DExport.js","sourceRoot":"","sources":["../../../src/molecule3d/ui/Molecule3DExport.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjC,OAAO,EACL,oBAAoB,EACpB,aAAa,GACd,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA2C,CAAC;AAUhF;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IACjC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAe,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IACzD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC5D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,KAAK,UAAU,IAAI;QACjB,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,IAAI,CAAC;YACH,MAAM,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;YAC9B,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,UAAU,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QACrE,CAAC;gBAAS,CAAC;YACT,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,OAAO,CACL,KAAC,mBAAmB,IAClB,KAAK,EAAC,cAAc,EACpB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,aAAa,EACrB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,QACT,cAAc,EAAE,SAAS,EACzB,aAAa,EAAE,QAAQ,EACvB,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,IAAI,EAAE,GACzB,CACH,CAAC;AACJ,CAAC"}

package/lib/molecule3d/ui/Molecule3DHelp.d.ts

@@ -0,0 +1,11 @@
+/**
+ * What the mouse and the keyboard do on the molecule canvas, shown in the
+ * toolbar's help popover.
+ */
+import type { ReactElement } from 'react';
+/**
+ * The help panel.
+ * @returns The panel.
+ */
+export declare function Molecule3DHelp(): ReactElement;
+//# sourceMappingURL=Molecule3DHelp.d.ts.map

package/lib/molecule3d/ui/Molecule3DHelp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Molecule3DHelp.d.ts","sourceRoot":"","sources":["../../../src/molecule3d/ui/Molecule3DHelp.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAKzD;;;GAGG;AACH,wBAAgB,cAAc,IAAI,YAAY,CA2B7C"}

package/lib/molecule3d/ui/Molecule3DHelp.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What the mouse and the keyboard do on the molecule canvas, shown in the
+ * toolbar's help popover.
+ */
+import { Classes } from '@blueprintjs/core';
+import { MOLECULE_3D_GESTURES } from "../core/gestures.js";
+/**
+ * The help panel.
+ * @returns The panel.
+ */
+export function Molecule3DHelp() {
+    return (_jsxs("div", { style: PANEL_STYLE, "data-testid": "molecule3d-help", children: [_jsx("div", { style: GRID_STYLE, children: MOLECULE_3D_GESTURES.map(({ input, action }) => (_jsxs("div", { style: ROW_STYLE, children: [_jsx("span", { style: INPUT_STYLE, children: input.map((part) => typeof part === 'string' ? (_jsx("span", { children: part }, part)) : (_jsx("kbd", { className: Classes.KEY, children: part.key }, part.key))) }), _jsx("span", { children: action })] }, `${inputText(input)} ${action}`))) }), _jsx("p", { className: Classes.TEXT_MUTED, style: NOTE_STYLE, children: "Keys act while the pointer is over the molecule. On a Mac, Ctrl is the Control key, not \u2318. With a measuring tool on, a click picks an atom." })] }));
+}
+function inputText(input) {
+    return input
+        .map((part) => (typeof part === 'string' ? part : part.key))
+        .join(' ');
+}
+const PANEL_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    width: 360,
+    padding: 12,
+    fontSize: 12,
+};
+const GRID_STYLE = {
+    display: 'grid',
+    gridTemplateColumns: 'max-content minmax(0, 1fr)',
+    alignItems: 'center',
+    columnGap: 12,
+    rowGap: 6,
+};
+const ROW_STYLE = { display: 'contents' };
+const INPUT_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+    whiteSpace: 'nowrap',
+};
+const NOTE_STYLE = { margin: 0 };
+//# sourceMappingURL=Molecule3DHelp.js.map

package/lib/molecule3d/ui/Molecule3DHelp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Molecule3DHelp.js","sourceRoot":"","sources":["../../../src/molecule3d/ui/Molecule3DHelp.tsx"],"names":[],"mappings":";AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAI5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAE3D;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,CACL,eAAK,KAAK,EAAE,WAAW,iBAAc,iBAAiB,aACpD,cAAK,KAAK,EAAE,UAAU,YACnB,oBAAoB,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAC/C,eAA2C,KAAK,EAAE,SAAS,aACzD,eAAM,KAAK,EAAE,WAAW,YACrB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAClB,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,yBAAkB,IAAI,IAAX,IAAI,CAAe,CAC/B,CAAC,CAAC,CAAC,CACF,cAAoB,SAAS,EAAE,OAAO,CAAC,GAAG,YACvC,IAAI,CAAC,GAAG,IADD,IAAI,CAAC,GAAG,CAEZ,CACP,CACF,GACI,EACP,yBAAO,MAAM,GAAQ,KAZb,GAAG,SAAS,CAAC,KAAK,CAAC,IAAI,MAAM,EAAE,CAanC,CACP,CAAC,GACE,EACN,YAAG,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE,KAAK,EAAE,UAAU,iKAG/C,IACA,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAAiC;IAClD,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAC3D,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;AAED,MAAM,WAAW,GAAkB;IACjC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,EAAE;IACP,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,4BAA4B;IACjD,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,EAAE;IACb,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,SAAS,GAAkB,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;AAEzD,MAAM,WAAW,GAAkB;IACjC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;IACN,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF,MAAM,UAAU,GAAkB,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC"}

package/lib/molecule3d/ui/Molecule3DOptions.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The display options of the molecule viewer, shown in the toolbar's popover:
+ * the representation, the size, and the surface's opacity, solvent probe and
+ * colours.
+ */
+import type { ReactElement } from 'react';
+import type { Molecule3DSettings } from '../core/settings.ts';
+/** Props of {@link Molecule3DOptions}. */
+export interface Molecule3DOptionsProps {
+    settings: Molecule3DSettings;
+    onChange: (settings: Molecule3DSettings) => void;
+    /** Topological polar surface area in Ų, or `null` when unknown. */
+    polarSurfaceArea: number | null;
+}
+/**
+ * The options panel.
+ * @param props - See {@link Molecule3DOptionsProps}.
+ * @returns The panel.
+ */
+export declare function Molecule3DOptions(props: Molecule3DOptionsProps): ReactElement;
+//# sourceMappingURL=Molecule3DOptions.d.ts.map

package/lib/molecule3d/ui/Molecule3DOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Molecule3DOptions.d.ts","sourceRoot":"","sources":["../../../src/molecule3d/ui/Molecule3DOptions.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAU9D,0CAA0C;AAC1C,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,oEAAoE;IACpE,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA2D7E"}

package/lib/molecule3d/ui/Molecule3DOptions.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The display options of the molecule viewer, shown in the toolbar's popover:
+ * the representation, the size, and the surface's opacity, solvent probe and
+ * colours.
+ */
+import { SegmentedControl, Slider } from '@blueprintjs/core';
+import { formatDecimal } from "../../format/core/numbers.js";
+import { MOLECULE_3D_RANGES, REPRESENTATIONS, REPRESENTATION_LABELS, isRepresentationId, } from "../core/settings.js";
+import { Molecule3DSurfaceColors } from "./Molecule3DSurfaceColors.js";
+/**
+ * The options panel.
+ * @param props - See {@link Molecule3DOptionsProps}.
+ * @returns The panel.
+ */
+export function Molecule3DOptions(props) {
+    const { settings, onChange, polarSurfaceArea } = props;
+    return (_jsxs("div", { style: PANEL_STYLE, children: [_jsx(SegmentedControl, { fill: true, size: "small", intent: "primary", options: REPRESENTATION_OPTIONS, value: settings.representation, onValueChange: (value) => {
+                    if (isRepresentationId(value)) {
+                        onChange({ ...settings, representation: value });
+                    }
+                } }), _jsxs("div", { style: GRID_STYLE, children: [_jsx(SliderRow, { label: "Size", range: MOLECULE_3D_RANGES.sizeFactor, digits: 1, value: settings.sizeFactor, testId: "molecule3d-size-value", onChange: (sizeFactor) => {
+                            onChange({ ...settings, sizeFactor });
+                        } }), _jsx(SliderRow, { label: "Surface opacity", range: MOLECULE_3D_RANGES.surfaceAlpha, digits: 2, value: settings.surfaceAlpha, disabled: !settings.showSurface, testId: "molecule3d-opacity-value", onChange: (surfaceAlpha) => {
+                            onChange({ ...settings, surfaceAlpha });
+                        } }), _jsx(SliderRow, { label: "Solvent probe [\u00C5]", title: PROBE_HELP, range: MOLECULE_3D_RANGES.probeRadius, digits: 1, value: settings.probeRadius, disabled: !settings.showSurface, testId: "molecule3d-probe-value", onChange: (probeRadius) => {
+                            onChange({ ...settings, probeRadius });
+                        } })] }), _jsx(Molecule3DSurfaceColors, { settings: settings, onChange: onChange, polarSurfaceArea: polarSurfaceArea })] }));
+}
+/**
+ * Label, slider and value as three grid cells; tick labels would collide.
+ * @param props - See {@link SliderRowProps}.
+ * @returns The three cells.
+ */
+function SliderRow(props) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { style: LABEL_STYLE, title: props.title, children: props.label }), _jsx("span", { style: SLIDER_STYLE, children: _jsx(Slider, { min: props.range.minimum, max: props.range.maximum, stepSize: props.range.step, labelRenderer: false, disabled: props.disabled, value: props.value, onChange: props.onChange }) }), _jsx("span", { style: VALUE_STYLE, "data-testid": props.testId, children: formatDecimal(props.value, props.digits) })] }));
+}
+const REPRESENTATION_OPTIONS = REPRESENTATIONS.map((representation) => ({
+    value: representation,
+    label: REPRESENTATION_LABELS[representation],
+}));
+const PROBE_HELP = 'Radius of the solvent sphere rolled over the atoms. 1.4 Å is a water molecule; a larger probe smooths the surface and closes the narrow pockets.';
+const PANEL_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    width: 300,
+    padding: 12,
+};
+const GRID_STYLE = {
+    display: 'grid',
+    gridTemplateColumns: 'max-content minmax(0, 1fr) 3em',
+    alignItems: 'center',
+    columnGap: 10,
+    rowGap: 6,
+};
+const LABEL_STYLE = { fontSize: 12 };
+/** Room on both sides, so the handle is never clipped at either end. */
+const SLIDER_STYLE = { display: 'block', paddingInline: 8 };
+const VALUE_STYLE = {
+    fontSize: 12,
+    fontVariantNumeric: 'tabular-nums',
+    textAlign: 'right',
+};
+//# sourceMappingURL=Molecule3DOptions.js.map

package/lib/molecule3d/ui/Molecule3DOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Molecule3DOptions.js","sourceRoot":"","sources":["../../../src/molecule3d/ui/Molecule3DOptions.tsx"],"names":[],"mappings":"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"}

package/lib/molecule3d/ui/Molecule3DSurfaceColors.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The colour section of the options popover: how the surface is coloured, its
+ * colour in uniform mode, and the legend and polar surface area in polarity
+ * mode.
+ */
+import type { ReactElement } from 'react';
+import type { Molecule3DSettings } from '../core/settings.ts';
+/** Props of {@link Molecule3DSurfaceColors}. */
+export interface Molecule3DSurfaceColorsProps {
+    settings: Molecule3DSettings;
+    onChange: (settings: Molecule3DSettings) => void;
+    /** Topological polar surface area in Ų, or `null` when unknown. */
+    polarSurfaceArea: number | null;
+}
+/**
+ * The surface colour controls.
+ * @param props - See {@link Molecule3DSurfaceColorsProps}.
+ * @returns The section.
+ */
+export declare function Molecule3DSurfaceColors(props: Molecule3DSurfaceColorsProps): ReactElement;
+//# sourceMappingURL=Molecule3DSurfaceColors.d.ts.map

package/lib/molecule3d/ui/Molecule3DSurfaceColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Molecule3DSurfaceColors.d.ts","sourceRoot":"","sources":["../../../src/molecule3d/ui/Molecule3DSurfaceColors.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAQ9D,gDAAgD;AAChD,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,oEAAoE;IACpE,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,4BAA4B,GAClC,YAAY,CA4Dd"}

package/lib/molecule3d/ui/Molecule3DSurfaceColors.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The colour section of the options popover: how the surface is coloured, its
+ * colour in uniform mode, and the legend and polar surface area in polarity
+ * mode.
+ */
+import { SegmentedControl } from '@blueprintjs/core';
+import { ColorPickerDropdown } from 'react-science/ui';
+import { formatDecimal } from "../../format/core/numbers.js";
+import { SURFACE_CHARGE_COLORS, SURFACE_COLORINGS, SURFACE_COLORING_LABELS, isSurfaceColoringId, } from "../core/settings.js";
+/**
+ * The surface colour controls.
+ * @param props - See {@link Molecule3DSurfaceColorsProps}.
+ * @returns The section.
+ */
+export function Molecule3DSurfaceColors(props) {
+    const { settings, onChange, polarSurfaceArea } = props;
+    const disabled = !settings.showSurface;
+    const { surfaceColoring, surfaceColor } = settings;
+    return (_jsxs("div", { style: SECTION_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Surface colour" }), _jsx(SegmentedControl, { fill: true, size: "small", disabled: disabled, options: COLORING_OPTIONS, value: surfaceColoring, onValueChange: (value) => {
+                    if (isSurfaceColoringId(value)) {
+                        onChange({ ...settings, surfaceColoring: value });
+                    }
+                } }), surfaceColoring === 'uniform' && (_jsxs("span", { style: ROW_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Colour" }), disabled ? (_jsx("span", { style: { ...SWATCH_STYLE, background: surfaceColor } })) : (_jsx("span", { style: PICKER_STYLE, "data-testid": "molecule3d-surface-color", children: _jsx(ColorPickerDropdown, { color: { hex: surfaceColor }, disableAlpha: true, onChange: (result) => {
+                                onChange({ ...settings, surfaceColor: result.hex });
+                            } }) }))] })), surfaceColoring === 'polarity' && (_jsxs(_Fragment, { children: [_jsxs("span", { style: ROW_STYLE, "data-testid": "molecule3d-polarity-legend", children: [_jsx(LegendItem, { color: SURFACE_CHARGE_COLORS.positive, label: "\u03B4+" }), _jsx(LegendItem, { color: SURFACE_CHARGE_COLORS.negative, label: "\u03B4\u2212" }), _jsx(LegendItem, { color: SURFACE_CHARGE_COLORS.neutral, label: "neutral" })] }), _jsxs("span", { style: LABEL_STYLE, title: TPSA_HELP, "data-testid": "molecule3d-tpsa-value", children: ["TPSA:", ' ', polarSurfaceArea === null
+                                ? '—'
+                                : `${formatDecimal(polarSurfaceArea, 1)} Ų`] })] }))] }));
+}
+function LegendItem(props) {
+    return (_jsxs("span", { style: LEGEND_ITEM_STYLE, children: [_jsx("span", { style: { ...LEGEND_SWATCH_STYLE, background: props.color } }), _jsx("span", { style: LABEL_STYLE, children: props.label })] }));
+}
+const COLORING_OPTIONS = SURFACE_COLORINGS.map((coloring) => ({
+    value: coloring,
+    label: SURFACE_COLORING_LABELS[coloring],
+}));
+const TPSA_HELP = 'Topological polar surface area (Ertl): the area contributed by nitrogen, oxygen and their hydrogens, computed from the structure by openchemlib. It does not depend on the conformer or the probe.';
+const SECTION_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+};
+const ROW_STYLE = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 12,
+};
+const LABEL_STYLE = { fontSize: 12 };
+const PICKER_STYLE = { display: 'inline-block', width: 40 };
+const SWATCH_STYLE = {
+    display: 'inline-block',
+    width: 40,
+    height: 30,
+    borderRadius: 3,
+    opacity: 0.5,
+};
+const LEGEND_ITEM_STYLE = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 4,
+};
+const LEGEND_SWATCH_STYLE = {
+    display: 'inline-block',
+    width: 12,
+    height: 12,
+    borderRadius: 2,
+};
+//# sourceMappingURL=Molecule3DSurfaceColors.js.map

package/lib/molecule3d/ui/Molecule3DSurfaceColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Molecule3DSurfaceColors.js","sourceRoot":"","sources":["../../../src/molecule3d/ui/Molecule3DSurfaceColors.tsx"],"names":[],"mappings":"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"}

package/lib/molecule3d/ui/Molecule3DToolbar.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The toolbars floating over the molecule canvas: the view — reset, spin,
+ * surface, and the options, export and help popovers — in one vertical
+ * react-science `Toolbar`, and the measuring tools with their own clear button
+ * in a second one under it.
+ */
+import type { ReactElement } from 'react';
+import type { MeasurementKind } from '../core/measurement.ts';
+import type { Molecule3DTools } from '../core/settings.ts';
+/** Props of {@link Molecule3DToolbar}. */
+export interface Molecule3DToolbarProps {
+    tools: Molecule3DTools;
+    measureKind: MeasurementKind | null;
+    onMeasureKindChange: (kind: MeasurementKind | null) => void;
+    measurementCount: number;
+    onClearMeasurements: () => void;
+    spinning: boolean;
+    onSpinningChange: (spinning: boolean) => void;
+    showSurface: boolean;
+    onShowSurfaceChange: (showSurface: boolean) => void;
+    onResetView: () => void;
+    /** Content of the options popover. */
+    options: ReactElement;
+    /** Content of the export popover. */
+    exportPanel: ReactElement;
+}
+/**
+ * The two toolbars; either is left out when none of its tools is on.
+ * @param props - See {@link Molecule3DToolbarProps}.
+ * @returns The toolbars, stacked.
+ */
+export declare function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement;
+//# sourceMappingURL=Molecule3DToolbar.d.ts.map

package/lib/molecule3d/ui/Molecule3DToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Molecule3DToolbar.d.ts","sourceRoot":"","sources":["../../../src/molecule3d/ui/Molecule3DToolbar.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAS3D,0CAA0C;AAC1C,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,eAAe,CAAC;IACvB,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,mBAAmB,EAAE,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,sCAAsC;IACtC,OAAO,EAAE,YAAY,CAAC;IACtB,qCAAqC;IACrC,WAAW,EAAE,YAAY,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAiI7E"}

package/lib/molecule3d/ui/Molecule3DToolbar.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The toolbars floating over the molecule canvas: the view — reset, spin,
+ * surface, and the options, export and help popovers — in one vertical
+ * react-science `Toolbar`, and the measuring tools with their own clear button
+ * in a second one under it.
+ */
+import { Card } from '@blueprintjs/core';
+import { Toolbar } from 'react-science/ui';
+import { MEASUREMENT_ATOM_COUNTS, MEASUREMENT_KINDS, MEASUREMENT_LABELS, } from "../core/measurement.js";
+import { Molecule3DHelp } from "./Molecule3DHelp.js";
+import { ClearMeasurementsIcon, MeasureIcon, SurfaceIcon, } from "./molecule3dIcons.js";
+/**
+ * The two toolbars; either is left out when none of its tools is on.
+ * @param props - See {@link Molecule3DToolbarProps}.
+ * @returns The toolbars, stacked.
+ */
+export function Molecule3DToolbar(props) {
+    const { tools, measureKind, onMeasureKindChange, measurementCount, onClearMeasurements, spinning, onSpinningChange, showSurface, onShowSurfaceChange, onResetView, options, exportPanel, } = props;
+    const hasView = tools.spin ||
+        tools.surface ||
+        tools.reset ||
+        tools.options ||
+        tools.export ||
+        tools.help;
+    return (_jsxs("div", { style: COLUMN_STYLE, children: [hasView && (_jsx(Card, { elevation: 1, style: CARD_STYLE, children: _jsxs(Toolbar, { vertical: true, "aria-label": "View", children: [tools.reset && (_jsx(Toolbar.Item, { icon: "zoom-to-fit", "aria-label": "Reset view", tooltip: "Reset view", tooltipProps: TOOLTIP_PROPS, onClick: onResetView })), tools.spin && (_jsx(Toolbar.Item, { icon: "refresh", active: spinning, "aria-label": "Spin", tooltip: "Spin", tooltipProps: TOOLTIP_PROPS, onClick: () => {
+                                onSpinningChange(!spinning);
+                            } })), tools.surface && (_jsx(Toolbar.Item, { icon: _jsx(SurfaceIcon, {}), active: showSurface, "aria-label": "Surface", tooltip: "Molecular surface", tooltipProps: TOOLTIP_PROPS, onClick: () => {
+                                onShowSurfaceChange(!showSurface);
+                            } })), tools.options && (_jsx(Toolbar.PopoverItem, { placement: "right-start", content: options, itemProps: {
+                                icon: 'cog',
+                                'aria-label': 'Display options',
+                                tooltip: 'Display options',
+                                tooltipProps: TOOLTIP_PROPS,
+                            } })), tools.export && (_jsx(Toolbar.PopoverItem, { placement: "right-start", content: exportPanel, itemProps: {
+                                icon: 'download',
+                                'aria-label': 'Export image',
+                                tooltip: 'Export image',
+                                tooltipProps: TOOLTIP_PROPS,
+                            } })), tools.help && (_jsx(Toolbar.PopoverItem, { placement: "right-start", content: _jsx(Molecule3DHelp, {}), itemProps: {
+                                icon: 'help',
+                                'aria-label': 'Mouse and keyboard',
+                                tooltip: 'Mouse and keyboard',
+                                tooltipProps: TOOLTIP_PROPS,
+                            } }))] }) })), tools.measure && (_jsx(Card, { elevation: 1, style: CARD_STYLE, children: _jsxs(Toolbar, { vertical: true, "aria-label": "Measure", children: [MEASUREMENT_KINDS.map((kind) => (_jsx(Toolbar.Item, { icon: _jsx(MeasureIcon, { kind: kind }), active: measureKind === kind, "aria-label": MEASUREMENT_LABELS[kind], tooltip: `${MEASUREMENT_LABELS[kind]}: click ${MEASUREMENT_ATOM_COUNTS[kind]} atoms`, tooltipProps: TOOLTIP_PROPS, onClick: () => {
+                                onMeasureKindChange(measureKind === kind ? null : kind);
+                            } }, kind))), _jsx(Toolbar.Item, { icon: _jsx(ClearMeasurementsIcon, {}), disabled: measurementCount === 0, "aria-label": "Remove all measurements", tooltip: "Remove all measurements", tooltipProps: TOOLTIP_PROPS, onClick: onClearMeasurements })] }) }))] }));
+}
+const TOOLTIP_PROPS = { placement: 'right' };
+const COLUMN_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+    pointerEvents: 'auto',
+};
+const CARD_STYLE = { padding: 0 };
+//# sourceMappingURL=Molecule3DToolbar.js.map

package/lib/molecule3d/ui/Molecule3DToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Molecule3DToolbar.js","sourceRoot":"","sources":["../../../src/molecule3d/ui/Molecule3DToolbar.tsx"],"names":[],"mappings":"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"}

package/lib/molecule3d/ui/MoleculeCanvas3D.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The molstar canvas of `MoleculeViewer3D`, with its toolbars over it.
+ *
+ * Reached through `React.lazy`, so a page that never shows a molecule never
+ * downloads molstar.
+ */
+import type { ReactElement } from 'react';
+import type { MoleculeViewer3DProps } from './moleculeViewer3DProps.ts';
+/** Props of {@link MoleculeCanvas3D}. */
+export interface MoleculeCanvas3DProps extends Omit<MoleculeViewer3DProps, 'fallback' | 'renderUnsupported'> {
+    /** Called with a drawing failure, and with `null` once a draw succeeds. */
+    onFailureChange: (message: string | null) => void;
+}
+/**
+ * Mount one molstar canvas and keep it showing what the props describe.
+ * @param props - See {@link MoleculeCanvas3DProps}.
+ * @returns The canvas with its toolbars.
+ */
+export declare function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement;
+//# sourceMappingURL=MoleculeCanvas3D.d.ts.map

package/lib/molecule3d/ui/MoleculeCanvas3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoleculeCanvas3D.d.ts","sourceRoot":"","sources":["../../../src/molecule3d/ui/MoleculeCanvas3D.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAezD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAOxE,yCAAyC;AACzC,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,qBAAqB,EACrB,UAAU,GAAG,mBAAmB,CACjC;IACC,2EAA2E;IAC3E,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAuK3E"}