react-cheminfo 0.28.0 → 0.30.0

package/lib/ir/ui/IrCommandTooltip.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TooltipHelpContent } from 'react-science/ui';
+import { irCommands } from "../core/irCommands.js";
+/**
+ * One command's tooltip: its title, what it does, and every way to do it.
+ *
+ * `TooltipHelpContent` from react-science, which is what NMRium's tooltips are,
+ * so a page holding this viewer beside NMRium or the glycan editor explains
+ * itself the same way in all three.
+ * @param props - Component props.
+ * @returns The tooltip's content.
+ */
+export function IrCommandTooltip(props) {
+    const { id } = props;
+    const entry = irCommands[id];
+    const shortcuts = entry.shortcut?.label ?? entry.shortcut?.keys;
+    return (_jsx(TooltipHelpContent, { title: entry.title, description: entry.description, shortcuts: shortcuts === undefined ? undefined : [...shortcuts], subTitles: entry.gestures?.map((gesture) => ({
+            title: gesture.title,
+            shortcuts: [...gesture.shortcuts],
+        })) }));
+}
+//# sourceMappingURL=IrCommandTooltip.js.map

package/lib/ir/ui/IrCommandTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrCommandTooltip.js","sourceRoot":"","sources":["../../../src/ir/ui/IrCommandTooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAOnD;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC;IACrB,MAAM,KAAK,GAAG,UAAU,CAAC,EAAE,CAAc,CAAC;IAC1C,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;IAEhE,OAAO,CACL,KAAC,kBAAkB,IACjB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAC/D,SAAS,EAAE,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YAC3C,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,SAAS,EAAE,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC;SAClC,CAAC,CAAC,GACH,CACH,CAAC;AACJ,CAAC"}

package/lib/ir/ui/IrDocumentationDialog.d.ts

@@ -0,0 +1,18 @@
+export interface IrDocumentationDialogProps {
+    /** Whether the dialog is open. */
+    isOpen: boolean;
+    /** Close it. */
+    onClose: () => void;
+}
+/**
+ * How to use the viewer, written in the viewer.
+ *
+ * In the component rather than on a site, so there is nowhere to leave for and
+ * nothing to keep in step: every key in the table below is read out of the same
+ * `irCommands` the toolbar and the key handler read, so a shortcut cannot be
+ * documented as one thing and bound as another.
+ * @param props - Component props.
+ * @returns The dialog.
+ */
+export declare function IrDocumentationDialog(props: IrDocumentationDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=IrDocumentationDialog.d.ts.map

package/lib/ir/ui/IrDocumentationDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrDocumentationDialog.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrDocumentationDialog.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,0BAA0B;IACzC,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,+BAmEtE"}

package/lib/ir/ui/IrDocumentationDialog.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogBody } from '@blueprintjs/core';
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { irCommands } from "../core/irCommands.js";
+import { IR_MODE_RULES } from "../core/irMode.js";
+import { IrLogo } from "./IrLogo.js";
+/**
+ * How to use the viewer, written in the viewer.
+ *
+ * In the component rather than on a site, so there is nowhere to leave for and
+ * nothing to keep in step: every key in the table below is read out of the same
+ * `irCommands` the toolbar and the key handler read, so a shortcut cannot be
+ * documented as one thing and bound as another.
+ * @param props - Component props.
+ * @returns The dialog.
+ */
+export function IrDocumentationDialog(props) {
+    const { isOpen, onClose } = props;
+    return (_jsx(Dialog, { isOpen: isOpen, onClose: onClose, title: "Using the infrared viewer", icon: _jsx(IrLogo, { size: 20 }), style: dialogStyle, children: _jsxs(DialogBody, { children: [_jsx("h4", { style: headingStyle, children: "Opening a spectrum" }), _jsxs("p", { style: paragraphStyle, children: ["JCAMP-DX (", _jsx("code", { children: ".jdx" }), ", ", _jsx("code", { children: ".dx" }), ") and Thermo Galactic SPC (", _jsx("code", { children: ".spc" }), ") are read. A file holding several blocks \u2014 a sample beside its background, or an infrared spectrum beside a Raman one \u2014 gives one spectrum per infrared block; the others are left to their own viewers. Two columns of numbers are not read yet."] }), _jsx("h4", { style: headingStyle, children: "The axis runs backwards" }), _jsx("p", { style: paragraphStyle, children: "Wavenumber decreases to the right, from 4000 cm\u207B\u00B9 down to 400, which is how infrared spectra have been printed since the instruments scanned that way. Every window is still stated low end first." }), _jsx("h4", { style: headingStyle, children: "Absorbance or transmittance" }), _jsxs("p", { style: paragraphStyle, children: ["The same measurement, read the other way up \u2014 the file carries both, whichever it was written in. In", ' ', _jsx("strong", { children: IR_MODE_RULES.transmittance.title }), " the bands hang down from a baseline near 100; in", ' ', _jsx("strong", { children: IR_MODE_RULES.absorbance.title }), " they stand up out of zero. The labels and the marks follow, so the pair reads the same way up in either."] }), _jsx("h4", { style: headingStyle, children: "Reading the bands" }), _jsxs("p", { style: paragraphStyle, children: ["The bands of the ", _jsx("em", { children: "selected" }), " spectrum are picked, marked on the chart, and listed in the bands panel with", ' ', _jsx("strong", { children: "every vibration whose range contains them" }), " \u2014 narrowest claim first. That is deliberate: a band at 1715 cm\u207B\u00B9 really is a ketone, an aldehyde and a carboxylic acid until something else decides between them, and the note on each candidate is what tells them apart. Hovering a row marks the band on the chart, and hovering the chart lights the row."] }), _jsx("p", { style: paragraphStyle, children: "A band is reported at the sampled point it peaked on, so on a 4 cm\u207B\u00B9 grid a carbonyl centred at 1710 reads 1708 or 1712. Do not quote one as though it were measured to the wavenumber." }), _jsx("h4", { style: headingStyle, children: "Gestures and keys" }), _jsx("table", { style: tableStyle, children: _jsx("tbody", { children: Object.keys(irCommands).map((id) => (_jsx(CommandRow, { id: id }, id))) }) })] }) }));
+}
+/**
+ * One command: what it is called, its key, and what it does.
+ * @param props - Component props.
+ * @returns The row.
+ */
+function CommandRow(props) {
+    const { id } = props;
+    const entry = irCommands[id];
+    const keys = entry.shortcut?.label ?? entry.shortcut?.keys;
+    return (_jsxs("tr", { children: [_jsx("th", { style: commandCellStyle, children: entry.title }), _jsxs("td", { style: keyCellStyle, children: [keys === undefined
+                        ? null
+                        : keys.map((key) => (_jsx("kbd", { style: keyStyle, children: key }, key))), entry.gestures?.map((gesture) => (_jsx("span", { style: gestureStyle, children: gesture.shortcuts.join(', ') }, gesture.title)))] }), _jsx("td", { style: descriptionCellStyle, children: entry.description })] }));
+}
+const dialogStyle = { width: 'min(760px, 92vw)' };
+const headingStyle = { margin: '14px 0 4px' };
+const paragraphStyle = { margin: '0 0 6px' };
+const tableStyle = {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontSize: 13,
+};
+const commandCellStyle = {
+    textAlign: 'left',
+    fontWeight: 600,
+    verticalAlign: 'top',
+    padding: '3px 8px 3px 0',
+    whiteSpace: 'nowrap',
+};
+const keyCellStyle = {
+    verticalAlign: 'top',
+    padding: '3px 8px 3px 0',
+    whiteSpace: 'nowrap',
+};
+const descriptionCellStyle = {
+    verticalAlign: 'top',
+    padding: '3px 0',
+};
+const keyStyle = {
+    display: 'inline-block',
+    marginRight: 3,
+    padding: '0 4px',
+    border: `1px solid ${TOKEN.border}`,
+    borderRadius: 3,
+    background: TOKEN.surfaceSunken,
+    fontSize: 11,
+};
+const gestureStyle = { opacity: 0.7, fontSize: 12 };
+//# sourceMappingURL=IrDocumentationDialog.js.map

package/lib/ir/ui/IrDocumentationDialog.js.map

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

package/lib/ir/ui/IrEditor.d.ts

@@ -0,0 +1,60 @@
+import type { Ref } from 'react';
+import type { IrEditorHandle } from '../core/irEditorApi.ts';
+import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrMode, IrSpectrum } from '../core/irSpectrum.ts';
+export interface IrEditorProps {
+    /**
+     * The spectra to open on. Read when the viewer opens and never again: what is
+     * on the chart belongs to the viewer from then on, so a host re-rendering with
+     * another array does not silently replace what somebody is looking at. The
+     * `ref` handle is how spectra arrive afterwards.
+     * @default []
+     */
+    data?: IrSpectrum[];
+    /**
+     * Called whenever the spectra open change — one loaded, one closed, the chart
+     * cleared — with the spectra now open.
+     *
+     * The document only. A zoom, a selection, a rename and a colour change what is
+     * being looked at rather than what is loaded, and a host told about those would
+     * be told on every drag of the mouse.
+     * @default undefined
+     */
+    onChange?: (spectra: IrSpectrum[]) => void;
+    /**
+     * Which value axis to open in.
+     * @default 'transmittance'
+     */
+    mode?: IrMode;
+    /**
+     * The side panels open to begin with.
+     * @default DEFAULT_SIDE_PANELS
+     */
+    defaultPanelIds?: IrSidePanelId[];
+    /**
+     * The handle a host drives the viewer through: take these spectra, frame this
+     * wavenumber, select that one.
+     * @default undefined
+     */
+    ref?: Ref<IrEditorHandle>;
+}
+/**
+ * An infrared spectrum viewer: a header across the top, the chart in the middle,
+ * the tools down the left, and the panels that interrogate it down the right.
+ *
+ * The same shape as the mass viewer, deliberately — a page may well hold both,
+ * and a chemist who has learned one should not have to learn the other. The chart
+ * is where a spectrum is read and the panels are where it is questioned, which is
+ * why the panels are switched on from the activity bar on the far right: a
+ * spectrum is mostly chart, and a panel is worth its width only while it is being
+ * used.
+ *
+ * It is sealed the way NMRium is sealed: the spectra go in as `data` and come back
+ * through `onChange`, and everything else a host wants — frame this band, take
+ * these spectra — is a gesture on the `ref` rather than a prop that has to change
+ * to be obeyed.
+ * @param props - Component props.
+ * @returns The viewer.
+ */
+export declare function IrEditor(props: IrEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=IrEditor.d.ts.map

package/lib/ir/ui/IrEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrEditor.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAMhE,MAAM,WAAW,aAAa;IAC5B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC3C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAsB5C"}

package/lib/ir/ui/IrEditor.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RootLayout } from 'react-science/ui';
+import { IrShell } from "./IrShell.js";
+import { IrStateProvider } from "./IrStateProvider.js";
+import { useIrEditor } from "./useIrEditor.js";
+/**
+ * An infrared spectrum viewer: a header across the top, the chart in the middle,
+ * the tools down the left, and the panels that interrogate it down the right.
+ *
+ * The same shape as the mass viewer, deliberately — a page may well hold both,
+ * and a chemist who has learned one should not have to learn the other. The chart
+ * is where a spectrum is read and the panels are where it is questioned, which is
+ * why the panels are switched on from the activity bar on the far right: a
+ * spectrum is mostly chart, and a panel is worth its width only while it is being
+ * used.
+ *
+ * It is sealed the way NMRium is sealed: the spectra go in as `data` and come back
+ * through `onChange`, and everything else a host wants — frame this band, take
+ * these spectra — is a gesture on the `ref` rather than a prop that has to change
+ * to be obeyed.
+ * @param props - Component props.
+ * @returns The viewer.
+ */
+export function IrEditor(props) {
+    const { data = NO_SPECTRA, onChange, mode, defaultPanelIds, ref } = props;
+    const editor = useIrEditor({
+        spectra: data,
+        settings: mode === undefined ? undefined : { mode },
+        panelIds: defaultPanelIds,
+        onChange,
+    });
+    return (_jsx(IrStateProvider, { editor: editor, children: _jsx(RootLayout, { style: rootLayoutStyle, children: _jsx(IrShell, { handle: ref }) }) }));
+}
+/**
+ * The viewer fills what it is given, and its own children scroll rather than
+ * push: `react-science` lays its root out as a column of full width and height,
+ * and a flex column with no `minHeight` grows past its parent instead.
+ */
+const rootLayoutStyle = { minHeight: 0 };
+/** What a viewer opens on when it is handed nothing, kept stable for the memo. */
+const NO_SPECTRA = [];
+//# sourceMappingURL=IrEditor.js.map

package/lib/ir/ui/IrEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrEditor.js","sourceRoot":"","sources":["../../../src/ir/ui/IrEditor.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAuC/C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,IAAI,GAAG,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAE1E,MAAM,MAAM,GAAG,WAAW,CAAC;QACzB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE;QACnD,QAAQ,EAAE,eAAe;QACzB,QAAQ;KACT,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,YAM7B,KAAC,UAAU,IAAC,KAAK,EAAE,eAAe,YAChC,KAAC,OAAO,IAAC,MAAM,EAAE,GAAG,GAAI,GACb,GACG,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,EAAE,SAAS,EAAE,CAAC,EAAW,CAAC;AAElD,kFAAkF;AAClF,MAAM,UAAU,GAAiB,EAAE,CAAC"}

package/lib/ir/ui/IrHeader.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The bar across the top: the mark on the left, the viewer on the right.
+ *
+ * Nothing that is done to the spectra is here — that is the rail down the left
+ * and the panels down the right — only what is asked of the viewer itself. The
+ * mark is the About button, in the corner `react-mass` and `react-glycan` put
+ * theirs in, so a chemist switching between the three tools looks in one place
+ * for what they are in; and help then full screen close the bar, hard against
+ * the right edge, in all three.
+ * @returns The header.
+ */
+export declare function IrHeader(): import("react").JSX.Element;
+//# sourceMappingURL=IrHeader.d.ts.map

package/lib/ir/ui/IrHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrHeader.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrHeader.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,gCAsBvB"}

package/lib/ir/ui/IrHeader.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Header, Toolbar, useFullscreen } from 'react-science/ui';
+import { IrLogo } from "./IrLogo.js";
+import { useIrCommandProps } from "./irCommandContext.js";
+/**
+ * The bar across the top: the mark on the left, the viewer on the right.
+ *
+ * Nothing that is done to the spectra is here — that is the rail down the left
+ * and the panels down the right — only what is asked of the viewer itself. The
+ * mark is the About button, in the corner `react-mass` and `react-glycan` put
+ * theirs in, so a chemist switching between the three tools looks in one place
+ * for what they are in; and help then full screen close the bar, hard against
+ * the right edge, in all three.
+ * @returns The header.
+ */
+export function IrHeader() {
+    const command = useIrCommandProps();
+    const { isFullScreen } = useFullscreen();
+    return (_jsxs(Header, { children: [_jsx(Toolbar, { "aria-label": "Infrared spectrum viewer", children: _jsx(Toolbar.Item, { icon: _jsx(IrLogo, { size: 16 }), ...command('about') }) }), _jsxs(Toolbar, { "aria-label": "Infrared spectrum viewer help", children: [_jsx(Toolbar.Item, { icon: "help", ...command('documentation') }), _jsx(Toolbar.Item, { icon: "fullscreen", active: isFullScreen, ...command('fullScreen') })] })] }));
+}
+//# sourceMappingURL=IrHeader.js.map

package/lib/ir/ui/IrHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrHeader.js","sourceRoot":"","sources":["../../../src/ir/ui/IrHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAc,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAwB,CAAC;AAE3D;;;;;;;;;;GAUG;AACH,MAAM,UAAU,QAAQ;IACtB,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAC;IAEzC,OAAO,CACL,MAAC,MAAM,eACL,KAAC,OAAO,kBAAY,0BAA0B,YAC5C,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,EAAE,GAAI,KAAM,OAAO,CAAC,OAAO,CAAC,GAAI,GAC1D,EACV,MAAC,OAAO,kBAAY,+BAA+B,aACjD,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,MAAM,KAAK,OAAO,CAAC,eAAe,CAAC,GAAI,EAI1D,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,YAAY,KAChB,OAAO,CAAC,YAAY,CAAC,GACzB,IACM,IACH,CACV,CAAC;AACJ,CAAC"}

package/lib/ir/ui/IrLogo.d.ts

@@ -0,0 +1,20 @@
+export interface IrLogoProps {
+    /**
+     * How big to draw it, in pixels.
+     * @default 16
+     */
+    size?: number;
+}
+/**
+ * The viewer's mark: three bands hanging from a baseline.
+ *
+ * Drawn from the domain's own primitives rather than being a picture of a chart —
+ * a transmittance baseline near the top with a strong band, a medium one and a
+ * weak one dropping out of it, which is what an infrared spectrum looks like at a
+ * glance and what nothing else looks like. Three elements, because that is what
+ * survives 16 pixels.
+ * @param props - Component props.
+ * @returns The mark, as SVG.
+ */
+export declare function IrLogo(props: IrLogoProps): import("react").JSX.Element;
+//# sourceMappingURL=IrLogo.d.ts.map

package/lib/ir/ui/IrLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrLogo.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrLogo.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BA6BxC"}

package/lib/ir/ui/IrLogo.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The viewer's mark: three bands hanging from a baseline.
+ *
+ * Drawn from the domain's own primitives rather than being a picture of a chart —
+ * a transmittance baseline near the top with a strong band, a medium one and a
+ * weak one dropping out of it, which is what an infrared spectrum looks like at a
+ * glance and what nothing else looks like. Three elements, because that is what
+ * survives 16 pixels.
+ * @param props - Component props.
+ * @returns The mark, as SVG.
+ */
+export function IrLogo(props) {
+    const { size = 16 } = props;
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", role: "img", "aria-label": "Infrared viewer", children: [_jsx("path", { d: "M1 3H15", fill: "none", stroke: "#94a3b8", strokeWidth: 1, strokeLinecap: "round" }), _jsx("path", { d: "M3 3V13M8 3V8.5M12.5 3V6", fill: "none", stroke: "#0072b2", strokeWidth: 2, strokeLinecap: "round" })] }));
+}
+//# sourceMappingURL=IrLogo.js.map

package/lib/ir/ui/IrLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrLogo.js","sourceRoot":"","sources":["../../../src/ir/ui/IrLogo.tsx"],"names":[],"mappings":";AAQA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAE5B,OAAO,CACL,eACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,KAAK,gBACC,iBAAiB,aAG5B,eACE,CAAC,EAAC,SAAS,EACX,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,GACrB,EAEF,eACE,CAAC,EAAC,0BAA0B,EAC5B,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,GACrB,IACE,CACP,CAAC;AACJ,CAAC"}

package/lib/ir/ui/IrPointerTracker.d.ts

@@ -0,0 +1,29 @@
+import type { ReactElement } from 'react';
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartPoint } from '../../chart/core/svgPoint.ts';
+import type { IrReadout } from './useIrPointer.ts';
+export interface IrPointerTrackerProps {
+    /** Where the pointer is, `null` whenever it is off the plot. */
+    position: ChartPoint | null;
+    /** What the axes read under it, `null` whenever it is off the plot. */
+    readout: IrReadout | null;
+    /** Where the plot sits inside the SVG. */
+    plot: PlotRect;
+}
+/**
+ * The crosshair, and what the axes say under it.
+ *
+ * Drawn last of everything, so it is never occluded by what it is being used to
+ * read. Where the text goes is `readoutPlacement` in the shared chart, which
+ * flips it to the left of the pointer near the right edge and holds it inside the
+ * plot at the top — the same placement the mass viewer uses, because the awkward
+ * places are the same places in any chart.
+ *
+ * A third line names the band under the pointer when there is one, which is what
+ * makes the crosshair worth having on an infrared chart: the wavenumber alone is
+ * a number a reader then has to look up.
+ * @param props - Component props.
+ * @returns The crosshair and its readout, or nothing while the pointer is away.
+ */
+export declare function IrPointerTracker(props: IrPointerTrackerProps): ReactElement | null;
+//# sourceMappingURL=IrPointerTracker.d.ts.map

package/lib/ir/ui/IrPointerTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrPointerTracker.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrPointerTracker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAMlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAQ/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,qBAAqB;IACpC,gEAAgE;IAChE,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5B,uEAAuE;IACvE,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,qBAAqB,GAC3B,YAAY,GAAG,IAAI,CA2CrB"}

package/lib/ir/ui/IrPointerTracker.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CHART_COLORS, CHART_FONT, LABEL_HALO, } from "../../chart/core/chartTheme.js";
+import { readoutPlacement } from "../../chart/core/trackerReadout.js";
+import { formatIrValue, formatWavenumber, shortModeLabel, } from "../core/irFormat.js";
+/**
+ * The crosshair, and what the axes say under it.
+ *
+ * Drawn last of everything, so it is never occluded by what it is being used to
+ * read. Where the text goes is `readoutPlacement` in the shared chart, which
+ * flips it to the left of the pointer near the right edge and holds it inside the
+ * plot at the top — the same placement the mass viewer uses, because the awkward
+ * places are the same places in any chart.
+ *
+ * A third line names the band under the pointer when there is one, which is what
+ * makes the crosshair worth having on an infrared chart: the wavenumber alone is
+ * a number a reader then has to look up.
+ * @param props - Component props.
+ * @returns The crosshair and its readout, or nothing while the pointer is away.
+ */
+export function IrPointerTracker(props) {
+    const { position, readout, plot } = props;
+    if (position === null || readout === null)
+        return null;
+    const band = readout.band;
+    const lines = [
+        `${formatWavenumber(readout.wavenumber)} cm⁻¹`,
+        `${shortModeLabel(readout.mode)} ${formatIrValue(readout.value, readout.mode)}`,
+    ];
+    if (band !== null) {
+        lines.push(`band ${formatWavenumber(band.wavenumber)} (${band.strength})`);
+    }
+    const place = readoutPlacement(position, plot, lines.length);
+    return (_jsxs("g", { pointerEvents: "none", children: [_jsx("line", { x1: position.x, y1: plot.top, x2: position.x, y2: plot.bottom, style: crosshairStyle }), _jsx("line", { x1: plot.left, y1: position.y, x2: plot.right, y2: position.y, style: crosshairStyle }), lines.map((line, index) => (_jsx("text", { x: place.x, y: place.y + index * CHART_FONT.readout, textAnchor: place.anchor, style: readoutStyle, children: line }, line)))] }));
+}
+const crosshairStyle = {
+    stroke: CHART_COLORS.tracker,
+    strokeDasharray: '3 3',
+};
+const readoutStyle = {
+    fill: CHART_COLORS.trackerText,
+    fontSize: CHART_FONT.readout,
+    // Haloed like every other label written onto the plot, and it needs it more
+    // than any of them: the pointer is put wherever the question is, which is over
+    // the trace rather than beside it.
+    ...LABEL_HALO,
+};
+//# sourceMappingURL=IrPointerTracker.js.map

package/lib/ir/ui/IrPointerTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrPointerTracker.js","sourceRoot":"","sources":["../../../src/ir/ui/IrPointerTracker.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,YAAY,EACZ,UAAU,EACV,UAAU,GACX,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,cAAc,GACf,MAAM,qBAAqB,CAAC;AAa7B;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAA4B;IAE5B,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,IAAI,QAAQ,KAAK,IAAI,IAAI,OAAO,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAC1B,MAAM,KAAK,GAAG;QACZ,GAAG,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QAC9C,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE;KAChF,CAAC;IACF,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;QAClB,KAAK,CAAC,IAAI,CAAC,QAAQ,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC7E,CAAC;IACD,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7D,OAAO,CACL,aAAG,aAAa,EAAC,MAAM,aACrB,eACE,EAAE,EAAE,QAAQ,CAAC,CAAC,EACd,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,EAAE,EAAE,QAAQ,CAAC,CAAC,EACd,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,KAAK,EAAE,cAAc,GACrB,EACF,eACE,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,EAAE,EAAE,QAAQ,CAAC,CAAC,EACd,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,EAAE,EAAE,QAAQ,CAAC,CAAC,EACd,KAAK,EAAE,cAAc,GACrB,EACD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,eAEE,CAAC,EAAE,KAAK,CAAC,CAAC,EACV,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,GAAG,UAAU,CAAC,OAAO,EACvC,UAAU,EAAE,KAAK,CAAC,MAAM,EACxB,KAAK,EAAE,YAAY,YAElB,IAAI,IANA,IAAI,CAOJ,CACR,CAAC,IACA,CACL,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG;IACrB,MAAM,EAAE,YAAY,CAAC,OAAO;IAC5B,eAAe,EAAE,KAAK;CACd,CAAC;AAEX,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,YAAY,CAAC,WAAW;IAC9B,QAAQ,EAAE,UAAU,CAAC,OAAO;IAC5B,4EAA4E;IAC5E,+EAA+E;IAC/E,mCAAmC;IACnC,GAAG,UAAU;CACL,CAAC"}

package/lib/ir/ui/IrShell.d.ts

@@ -0,0 +1,25 @@
+import type { Ref } from 'react';
+import type { IrEditorHandle } from '../core/irEditorApi.ts';
+export interface IrShellProps {
+    /**
+     * The handle to fill in, once there is a state for it to act on.
+     * @default undefined
+     */
+    handle?: Ref<IrEditorHandle>;
+}
+/**
+ * The viewer's screen: a header, the rails, and the split between the chart and
+ * the panels.
+ *
+ * Kept apart from `IrEditor` so that the handle, the commands and the highlight —
+ * all of which need the state — sit below the providers rather than beside them,
+ * and so the sealed component above is nothing but its props.
+ *
+ * The panels run to the bottom edge while the status bar stops at the splitter,
+ * which is what says the bar belongs to the chart and the panels are their own
+ * column.
+ * @param props - Component props.
+ * @returns The screen.
+ */
+export declare function IrShell(props: IrShellProps): import("react").JSX.Element;
+//# sourceMappingURL=IrShell.d.ts.map

package/lib/ir/ui/IrShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrShell.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAWjC,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,wBAAwB,CAAC;AAgBhF,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,+BAuL1C"}

package/lib/ir/ui/IrShell.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import { SplitPane, useFullscreen } from 'react-science/ui';
+import { sanitizeFileName } from "../../download/core/sanitizeFileName.js";
+import { ExportImageDialog } from "../../download/ui/ExportImageDialog.js";
+import { useDrawingBox } from "../../download/ui/useDrawingBox.js";
+import { PanelRail } from "../../panel/ui/PanelRail.js";
+import { fullDomain } from "../core/irDomain.js";
+import { otherIrMode, yAxisRules } from "../core/irMode.js";
+import { irSidePanels } from "../core/irSidePanels.js";
+import { DEFAULT_SIDE_PANEL } from "../core/irState.js";
+import { IrAboutDialog } from "./IrAboutDialog.js";
+import { IrCanvas } from "./IrCanvas.js";
+import { IrCommandProvider } from "./IrCommandProvider.js";
+import { IrDocumentationDialog } from "./IrDocumentationDialog.js";
+import { IrHeader } from "./IrHeader.js";
+import { IrSidePanel } from "./IrSidePanel.js";
+import { IrToolbar } from "./IrToolbar.js";
+import { useIrActions, useIrEditorState } from "./irStateContext.js";
+import { useIrShortcuts } from "./useIrShortcuts.js";
+/**
+ * The viewer's screen: a header, the rails, and the split between the chart and
+ * the panels.
+ *
+ * Kept apart from `IrEditor` so that the handle, the commands and the highlight —
+ * all of which need the state — sit below the providers rather than beside them,
+ * and so the sealed component above is nothing but its props.
+ *
+ * The panels run to the bottom edge while the status bar stops at the splitter,
+ * which is what says the bar belongs to the chart and the panels are their own
+ * column.
+ * @param props - Component props.
+ * @returns The screen.
+ */
+export function IrShell(props) {
+    const { handle } = props;
+    const { state, visibleSpectra, selectedSpectrum } = useIrEditorState();
+    const actions = useIrActions();
+    const { toggle: toggleFullScreen } = useFullscreen();
+    const { openPanelIds, tool, domain } = state.view;
+    const { mode, pickBands, showAssignments } = state.settings;
+    const [isAboutOpen, setIsAboutOpen] = useState(false);
+    const [isDocumentationOpen, setIsDocumentationOpen] = useState(false);
+    const [isExportImageOpen, setIsExportImageOpen] = useState(false);
+    // The chart is the picture, so the box it is drawn in is what the export
+    // dialog is pointed at: the viewer around it is full of SVG — every icon in
+    // every toolbar is one — and the first found there would be a magnifier.
+    const chart = useDrawingBox();
+    // The highlight is held here rather than in the reducer: what the pointer is
+    // resting on is not part of the document and changes on every move across the
+    // chart, so putting it through the reducer would run every panel's memo sixty
+    // times a second.
+    const [highlight, setHighlight] = useState(null);
+    /**
+     * ChartScale the value axis by a factor, about the baseline the mode hangs from.
+     * @param factor - Above one to zoom out.
+     */
+    const scaleValueAxis = useCallback((factor) => {
+        const shown = domain ?? fullDomain(visibleSpectra, mode);
+        // Asked of the mode rather than written out again here: the baseline a
+        // value axis is scaled about is `irMode`'s to know, and a second copy of
+        // it is a second thing to get wrong.
+        const { baseline = 0 } = yAxisRules(mode);
+        actions.setDomain({
+            x: shown.x,
+            y: [
+                baseline + (shown.y[0] - baseline) * factor,
+                baseline + (shown.y[1] - baseline) * factor,
+            ],
+        });
+    }, [actions, domain, visibleSpectra, mode]);
+    const commands = useMemo(() => ({
+        about: () => setIsAboutOpen(true),
+        documentation: () => setIsDocumentationOpen(true),
+        fullScreen: toggleFullScreen,
+        readTool: () => actions.setTool('read'),
+        boxTool: () => actions.setTool(tool === 'box' ? 'read' : 'box'),
+        zoomIn: () => scaleValueAxis(1 / ZOOM_STEP),
+        zoomOut: () => scaleValueAxis(ZOOM_STEP),
+        resetZoom: () => actions.resetDomain(),
+        toggleMode: () => actions.setSettings({ mode: otherIrMode(mode) }),
+        togglePicking: () => actions.setSettings({ pickBands: !pickBands }),
+        toggleAssignments: () => actions.setSettings({ showAssignments: !showAssignments }),
+        exportImage: () => setIsExportImageOpen(true),
+        clear: () => actions.clear(),
+    }), [
+        actions,
+        tool,
+        mode,
+        pickBands,
+        showAssignments,
+        scaleValueAxis,
+        toggleFullScreen,
+    ]);
+    // The root is held as state rather than in a ref because the keys are bound to
+    // it from an effect: a ref filled in during the commit would leave the effect
+    // with nothing to listen on for the first render, and no reason ever to run
+    // again.
+    const [root, setRoot] = useState(null);
+    useIrShortcuts(root, commands);
+    useImperativeHandle(handle, () => ({
+        getSpectra: () => state.data.spectra,
+        setSpectra: (spectra) => actions.setSpectra(spectra),
+        addSpectra: (spectra) => actions.addSpectra(spectra),
+        clear: () => actions.clear(),
+        setDomain: (next) => actions.setDomain(next),
+        resetDomain: () => actions.resetDomain(),
+        zoomToWavenumber: (wavenumber, options = {}) => {
+            const { width = DEFAULT_FRAME_WIDTH } = options;
+            const shown = domain ?? fullDomain(visibleSpectra, mode);
+            actions.setDomain({
+                x: [wavenumber - width / 2, wavenumber + width / 2],
+                y: shown.y,
+            });
+        },
+        selectSpectrum: (id) => actions.selectSpectrum(id),
+    }), [state.data.spectra, actions, domain, visibleSpectra, mode]);
+    /**
+     * Open or close the side, as the splitter is dragged shut and back open.
+     * @param open - Whether the side is now open.
+     */
+    function setSideOpen(open) {
+        if (!open) {
+            for (const panelId of openPanelIds)
+                actions.togglePanel(panelId);
+            return;
+        }
+        // Dragging the splitter back open must land on something, or it opens on an
+        // empty column and reads as broken.
+        if (openPanelIds.length === 0)
+            actions.togglePanel(DEFAULT_SIDE_PANEL);
+    }
+    return (_jsxs(IrCommandProvider, { handlers: commands, children: [_jsxs("div", { ref: setRoot, tabIndex: -1, style: rootStyle, children: [_jsx(IrHeader, {}), _jsxs("div", { style: mainStyle, children: [_jsx("div", { style: railStyle, children: _jsx(IrToolbar, {}) }), _jsxs(SplitPane, { direction: "horizontal", controlledSide: "end", defaultSize: "360px", open: openPanelIds.length > 0, onOpenChange: setSideOpen, children: [_jsx(IrCanvas, { highlight: highlight, onHighlight: setHighlight, attachChart: chart.attach }), _jsx(IrSidePanel, { highlight: highlight, onHighlight: setHighlight })] }), _jsx("div", { style: railStyle, children: _jsx(PanelRail, { panels: irSidePanels, openIds: openPanelIds, onToggle: actions.togglePanel }) })] })] }), _jsx(IrAboutDialog, { isOpen: isAboutOpen, onClose: () => setIsAboutOpen(false) }), _jsx(IrDocumentationDialog, { isOpen: isDocumentationOpen, onClose: () => setIsDocumentationOpen(false) }), _jsx(ExportImageDialog, { isOpen: isExportImageOpen, getDrawing: chart.getDrawing, frame: "element", filename: pictureName(visibleSpectra, selectedSpectrum), label: "Infrared spectrum", onClose: () => setIsExportImageOpen(false) })] }));
+}
+/**
+ * What one press of zoom in or out is worth.
+ *
+ * A fifth, which is about what one notch of a mouse wheel does — so the button
+ * and the wheel feel like the same gesture at two speeds rather than two
+ * different ones.
+ */
+const ZOOM_STEP = 1.2;
+/** How wide a window a host gets when it asks to frame a band without saying. */
+const DEFAULT_FRAME_WIDTH = 200;
+/**
+ * What a picture of the chart is called before anything is typed in the box.
+ *
+ * The spectrum being looked at, since a figure of the chart is a figure of that
+ * spectrum, and a chemist who has one run open should not have to work out
+ * which of their downloads `spectra.png` was. A chart holding several and
+ * pointing at none of them is named after the lot.
+ * @param spectra - What is drawn.
+ * @param selected - The one being looked at, `null` when none is.
+ * @returns The name, without its extension.
+ */
+function pictureName(spectra, selected) {
+    const named = selected ?? (spectra.length === 1 ? spectra[0] : undefined);
+    return named === undefined
+        ? 'spectra'
+        : sanitizeFileName(named.name, 'spectrum');
+}
+const rootStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 1px',
+    width: '100%',
+    height: '100%',
+    minHeight: 0,
+    outline: 'none',
+};
+const mainStyle = {
+    display: 'flex',
+    flex: '1 1 1px',
+    minWidth: 0,
+    minHeight: 0,
+};
+const railStyle = { flex: 'none' };
+//# sourceMappingURL=IrShell.js.map