react-cheminfo 0.65.0 → 0.66.0

package/src/ir/ui/IrLogo.tsx

@@ -1,24 +1,37 @@
+import type { IrTechnique } from '../core/irTechnique.ts';
+
+import { useIrText } from './useIrText.ts';
+
 export interface IrLogoProps {
   /**
    * How big to draw it, in pixels.
    * @default 16
    */
   size?: number;
+  /**
+   * What the spectra were measured with, which decides which way the bands
+   * point.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
 }
 
 /**
- * The viewer's mark: three bands hanging from a baseline.
+ * The viewer's mark: three bands meeting 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.
+ * glance and what nothing else looks like. A Raman spectrum's bands stand up from
+ * a baseline near the foot instead, so its mark is the same three bands rising.
+ * Three elements, because that is what survives 16 pixels.
  * @param props - Component props.
  * @returns The mark, as SVG.
  */
 export function IrLogo(props: IrLogoProps) {
-  const { size = 16 } = props;
+  const { size = 16, technique = 'infrared' } = props;
+  const { mark } = useIrText(technique);
+  const { baseline, bands } = MARKS[technique];
 
   return (
     <svg
@@ -26,19 +39,19 @@ export function IrLogo(props: IrLogoProps) {
       height={size}
       viewBox="0 0 16 16"
       role="img"
-      aria-label="Infrared viewer"
+      aria-label={mark}
     >
-      {/* The baseline, high up, where 100 % transmittance runs. */}
+      {/* The baseline: high up where 100 % transmittance runs, low for Raman. */}
       <path
-        d="M1 3H15"
+        d={baseline}
         fill="none"
         stroke="#94a3b8"
         strokeWidth={1}
         strokeLinecap="round"
       />
-      {/* Three bands dropping out of it, strong, medium, weak. */}
+      {/* Three bands meeting it, strong, medium, weak. */}
       <path
-        d="M3 3V13M8 3V8.5M12.5 3V6"
+        d={bands}
         fill="none"
         stroke="#0072b2"
         strokeWidth={2}
@@ -47,3 +60,9 @@ export function IrLogo(props: IrLogoProps) {
     </svg>
   );
 }
+
+/** The two strokes of each technique's mark. */
+const MARKS: Record<IrTechnique, { baseline: string; bands: string }> = {
+  infrared: { baseline: 'M1 3H15', bands: 'M3 3V13M8 3V8.5M12.5 3V6' },
+  raman: { baseline: 'M1 13H15', bands: 'M3 13V3M8 13V7.5M12.5 13V10' },
+};

package/src/ir/ui/IrShell.tsx

@@ -1,11 +1,5 @@
 import type { Ref } from 'react';
-import {
-  useCallback,
-  useId,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
+import { useId, useMemo, useState } from 'react';
 import { SplitPane, useFullscreen } from 'react-science/ui';
 
 import { sanitizeFileName } from '../../download/core/sanitizeFileName.ts';
@@ -13,12 +7,12 @@ import { useFigureDownload } from '../../download/ui/useFigureDownload.tsx';
 import { PanelRail } from '../../panel/ui/PanelRail.tsx';
 import type { IrBand } from '../core/irBand.ts';
 import type { IrCommandHandlers } from '../core/irCommands.ts';
-import { fullDomain } from '../core/irDomain.ts';
-import type { IrEditorHandle, ZoomToBandOptions } from '../core/irEditorApi.ts';
-import { otherIrMode, yAxisRules } from '../core/irMode.ts';
+import type { IrEditorHandle } from '../core/irEditorApi.ts';
+import { otherIrMode } from '../core/irMode.ts';
 import { irSidePanels } from '../core/irSidePanels.ts';
-import type { IrDomain, IrSpectrum } from '../core/irSpectrum.ts';
+import type { IrSpectrum } from '../core/irSpectrum.ts';
 import { DEFAULT_SIDE_PANEL } from '../core/irState.ts';
+import { irCommandOffered } from '../core/irTechniqueCommands.ts';
 
 import { IrAboutDialog } from './IrAboutDialog.tsx';
 import { IrCanvas } from './IrCanvas.tsx';
@@ -28,7 +22,9 @@ import { IrHeader } from './IrHeader.tsx';
 import { IrSidePanel } from './IrSidePanel.tsx';
 import { IrToolbar } from './IrToolbar.tsx';
 import { useIrActions, useIrEditorState } from './irStateContext.ts';
+import { useIrHandle } from './useIrHandle.ts';
 import { useIrShortcuts } from './useIrShortcuts.ts';
+import { useValueAxisZoom } from './useValueAxisZoom.ts';
 
 export interface IrShellProps {
   /**
@@ -58,8 +54,8 @@ export function IrShell(props: IrShellProps) {
   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 { openPanelIds, tool } = state.view;
+  const { mode, pickBands, showAssignments, technique } = state.settings;
 
   const [isAboutOpen, setIsAboutOpen] = useState(false);
   const [isDocumentationOpen, setIsDocumentationOpen] = useState(false);
@@ -79,27 +75,7 @@ export function IrShell(props: IrShellProps) {
   // times a second.
   const [highlight, setHighlight] = useState<IrBand | null>(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: number) => {
-      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 { zoomIn, zoomOut } = useValueAxisZoom();
 
   const commands = useMemo<IrCommandHandlers>(
     () => ({
@@ -108,13 +84,18 @@ export function IrShell(props: IrShellProps) {
       fullScreen: toggleFullScreen,
       readTool: () => actions.setTool('read'),
       boxTool: () => actions.setTool(tool === 'box' ? 'read' : 'box'),
-      zoomIn: () => scaleValueAxis(1 / ZOOM_STEP),
-      zoomOut: () => scaleValueAxis(ZOOM_STEP),
+      zoomIn,
+      zoomOut,
       resetZoom: () => actions.resetDomain(),
-      toggleMode: () => actions.setSettings({ mode: otherIrMode(mode) }),
+      // A command the technique does not offer has no handler, so its key
+      // stays with the page.
+      toggleMode: irCommandOffered(technique, 'toggleMode')
+        ? () => actions.setSettings({ mode: otherIrMode(mode, technique) })
+        : undefined,
       togglePicking: () => actions.setSettings({ pickBands: !pickBands }),
-      toggleAssignments: () =>
-        actions.setSettings({ showAssignments: !showAssignments }),
+      toggleAssignments: irCommandOffered(technique, 'toggleAssignments')
+        ? () => actions.setSettings({ showAssignments: !showAssignments })
+        : undefined,
       exportImage: () => setFigureOpen(!isFigureOpen),
       clear: () => actions.clear(),
     }),
@@ -122,9 +103,11 @@ export function IrShell(props: IrShellProps) {
       actions,
       tool,
       mode,
+      technique,
       pickBands,
       showAssignments,
-      scaleValueAxis,
+      zoomIn,
+      zoomOut,
       toggleFullScreen,
       isFigureOpen,
       setFigureOpen,
@@ -137,28 +120,7 @@ export function IrShell(props: IrShellProps) {
   // again.
   const [root, setRoot] = useState<HTMLElement | null>(null);
   useIrShortcuts(root, commands);
-
-  useImperativeHandle(
-    handle,
-    (): IrEditorHandle => ({
-      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: ZoomToBandOptions = {}) => {
-        const { width = DEFAULT_FRAME_WIDTH } = options;
-        const shown: IrDomain = 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],
-  );
+  useIrHandle(handle);
 
   /**
    * Open or close the side, as the splitter is dragged shut and back open.
@@ -175,7 +137,7 @@ export function IrShell(props: IrShellProps) {
   }
 
   return (
-    <IrCommandProvider handlers={commands}>
+    <IrCommandProvider handlers={commands} technique={technique}>
       {/* `tabIndex` so a click anywhere in the viewer makes this the target the
           shortcuts are heard on: keys are delivered to whatever holds the caret,
           and an SVG never does. */}
@@ -221,27 +183,17 @@ export function IrShell(props: IrShellProps) {
       <IrAboutDialog
         isOpen={isAboutOpen}
         onClose={() => setIsAboutOpen(false)}
+        technique={technique}
       />
       <IrDocumentationDialog
         isOpen={isDocumentationOpen}
         onClose={() => setIsDocumentationOpen(false)}
+        technique={technique}
       />
     </IrCommandProvider>
   );
 }
 
-/**
- * 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.
  *

package/src/ir/ui/IrStatusBar.tsx

@@ -8,18 +8,21 @@ import {
   statusSpacerStyle as spacerStyle,
 } from '../../panel/core/statusBar.ts';
 import { countAssigned } from '../core/assignBands.ts';
-import { formatWavenumber } from '../core/irFormat.ts';
-import { boxZoomOnly, yAxisTitle } from '../core/irMode.ts';
+import { formatWavenumberRange } from '../core/irFormat.ts';
+import { boxZoomOnly } from '../core/irMode.ts';
+import { IR_TECHNIQUE_RULES } from '../core/irTechnique.ts';
 
 import { useIrEditorState } from './irStateContext.ts';
+import { useIrText } from './useIrText.ts';
 
 /**
  * The one line under the chart: what is drawn, what was found, what went wrong.
  *
  * Everything in it is derived, so it is the cheapest place in the viewer to
  * answer "did that work" — how many spectra are drawn of those open, how many
- * bands the picking found and how many the table had something to say about, and
- * the range the selected spectrum covers.
+ * bands the picking found and how many the table had something to say about
+ * (where the table covers the technique), and the range the selected spectrum
+ * covers, in the order its axis is read.
  *
  * The refusal is last and is the only red in the shell, so the eye that has just
  * pressed something and seen nothing happen lands on the reason.
@@ -30,12 +33,14 @@ export function IrStatusBar() {
     useIrEditorState();
   const { spectra } = state.data;
   const { error, tool } = state.view;
-  const { mode, pickBands } = state.settings;
+  const { mode, pickBands, technique } = state.settings;
+  const { reverseX, assignments } = IR_TECHNIQUE_RULES[technique];
+  const text = useIrText(technique);
 
   const range =
-    selectedSpectrum === null || selectedSpectrum.wavenumber.length === 0
-      ? null
-      : `${formatWavenumber(selectedSpectrum.wavenumber.at(-1) as number)}–${formatWavenumber(selectedSpectrum.wavenumber[0] as number)} cm⁻¹`;
+    selectedSpectrum === null
+      ? ''
+      : formatWavenumberRange(selectedSpectrum.wavenumber, reverseX);
 
   return (
     <div style={barStyle}>
@@ -45,7 +50,7 @@ export function IrStatusBar() {
           : `${countLabel(visibleSpectra.length, 'spectrum', 'spectra')} drawn of ${spectra.length}`}
       </span>
 
-      <span style={itemStyle}>{yAxisTitle(mode)}</span>
+      <span style={itemStyle}>{text.yTitle(mode)}</span>
 
       {selectedSpectrum === null ? null : (
         <span style={nameStyle} title={selectedSpectrum.name}>
@@ -53,12 +58,12 @@ export function IrStatusBar() {
         </span>
       )}
 
-      {range === null ? null : <span style={mutedStyle}>{range}</span>}
+      {range === '' ? null : <span style={mutedStyle}>{range}</span>}
 
       {pickBands && assigned.length > 0 ? (
         <span style={itemStyle}>
-          {countLabel(assigned.length, 'band', 'bands')},{' '}
-          {countAssigned(assigned)} assigned
+          {countLabel(assigned.length, 'band', 'bands')}
+          {assignments ? `, ${countAssigned(assigned)} assigned` : null}
         </span>
       ) : null}
 

package/src/ir/ui/IrToolbar.tsx

@@ -1,10 +1,13 @@
 import { Toolbar } from 'react-science/ui';
 
 import type { FigureDownloadState } from '../../download/ui/useFigureDownload.tsx';
-import { boxZoomOnly } from '../core/irMode.ts';
+import { bandsPointDown, boxZoomOnly } from '../core/irMode.ts';
+import { defaultIrMode } from '../core/irTechnique.ts';
+import { irCommandOffered } from '../core/irTechniqueCommands.ts';
 
 import { useIrCommandProps } from './irCommandContext.tsx';
 import { useIrEditorState } from './irStateContext.ts';
+import { useIrText } from './useIrText.ts';
 
 /** What {@link IrToolbar} needs. */
 export interface IrToolbarProps {
@@ -29,6 +32,9 @@ export interface IrToolbarProps {
  * drag on that axis is a rectangle, so both buttons go dead with the square zoom
  * lit. Showing `read` as available there would offer a gesture the chart does not
  * make, and showing it as *active* would name the wrong one.
+ *
+ * A button whose command the technique does not offer is not drawn: a Raman
+ * spectrum has a single value axis and no assignment to name.
  * @param props - Component props.
  * @returns The toolbar.
  */
@@ -38,7 +44,8 @@ export function IrToolbar(props: IrToolbarProps) {
   const command = useIrCommandProps();
   const { spectra } = state.data;
   const { domain, tool } = state.view;
-  const { mode, pickBands, showAssignments } = state.settings;
+  const { mode, pickBands, showAssignments, technique } = state.settings;
+  const text = useIrText(technique);
 
   const isEmpty = spectra.length === 0;
   // The popover opens the panel itself, so the command's own click is left out.
@@ -49,7 +56,7 @@ export function IrToolbar(props: IrToolbarProps) {
     // `collapse`, not the default `wrap`: a wrapping vertical toolbar measures
     // itself and writes the result back as an inline width, so in a row short of
     // space it settles at half an icon and stays there.
-    <Toolbar vertical overflow="collapse" aria-label="Infrared spectrum tools">
+    <Toolbar vertical overflow="collapse" aria-label={text.tools}>
       <Toolbar.Item
         icon="trash"
         intent="danger"
@@ -83,24 +90,28 @@ export function IrToolbar(props: IrToolbarProps) {
         disabled={domain === null}
       />
 
-      <Toolbar.Item
-        icon={mode === 'absorbance' ? 'arrow-up' : 'arrow-down'}
-        active={mode === 'absorbance'}
-        {...command('toggleMode')}
-        disabled={isEmpty}
-      />
+      {irCommandOffered(technique, 'toggleMode') ? (
+        <Toolbar.Item
+          icon={bandsPointDown(mode) ? 'arrow-down' : 'arrow-up'}
+          active={mode !== defaultIrMode(technique)}
+          {...command('toggleMode')}
+          disabled={isEmpty}
+        />
+      ) : null}
       <Toolbar.Item
         icon="locate"
         active={pickBands}
         {...command('togglePicking')}
         disabled={selectedSpectrum === null}
       />
-      <Toolbar.Item
-        icon="label"
-        active={showAssignments}
-        {...command('toggleAssignments')}
-        disabled={!pickBands || selectedSpectrum === null}
-      />
+      {irCommandOffered(technique, 'toggleAssignments') ? (
+        <Toolbar.Item
+          icon="label"
+          active={showAssignments}
+          {...command('toggleAssignments')}
+          disabled={!pickBands || selectedSpectrum === null}
+        />
+      ) : null}
 
       {/* What the chart looks like right now is what a figure is of — the
           window it was dragged to, the way up it is being read, the

package/src/ir/ui/IrTraces.tsx

@@ -26,7 +26,10 @@ export interface IrTracesProps {
    * the *high* end, the opposite of what every other chart's does.
    */
   xDomain: readonly [number, number];
-  /** The wavenumber axis as it is currently zoomed, running right to left. */
+  /**
+   * The wavenumber axis as it is currently zoomed, running right to left for
+   * infrared.
+   */
   xScale: ChartScale;
   /** The value axis as it is currently zoomed. */
   yScale: ChartScale;
@@ -85,6 +88,7 @@ export function IrTraces(props: IrTracesProps): ReactElement {
     for (const spectrum of spectra) {
       if (!spectrum.visible) continue;
       const trace = traceOf(spectrum, mode);
+      if (trace === undefined) continue;
       const { x, y } = xyReduce(trace, { from, to, nbPoints: wanted });
       const d = profilePath(x, y, xScale, yScale);
       if (d !== '') drawn.push({ id: spectrum.id, color: spectrum.color, d });

package/src/ir/ui/RamanEditor.tsx

@@ -0,0 +1,53 @@
+import type { Ref } from 'react';
+
+import type { IrEditorHandle } from '../core/irEditorApi.ts';
+import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrSpectrum } from '../core/irSpectrum.ts';
+
+import { VibrationalEditor } from './VibrationalEditor.tsx';
+
+/** The handle a host drives a Raman viewer through: the infrared one's. */
+export type RamanEditorHandle = IrEditorHandle;
+
+export interface RamanEditorProps {
+  /**
+   * The spectra to open on, each carrying its `intensity`. Read when the viewer
+   * opens and never again: what is on the chart belongs to the viewer from then
+   * on. 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. Not called for a zoom, a selection, a
+   * rename or a colour.
+   * @default undefined
+   */
+  onChange?: (spectra: IrSpectrum[]) => void;
+  /**
+   * 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
+   * Raman shift, select that one.
+   * @default undefined
+   */
+  ref?: Ref<RamanEditorHandle>;
+}
+
+/**
+ * A Raman spectrum viewer: the infrared viewer's shell, panels, gestures and
+ * export, changed only where Raman is physically different.
+ *
+ * The spectra are read as intensity, their one value axis, so there is no mode
+ * to choose; the Raman shift runs from low at the left to high at the right;
+ * the bands are picked as maxima of intensity; and the infrared correlation
+ * table is not asked what a band might be.
+ * @param props - Component props.
+ * @returns The viewer.
+ */
+export function RamanEditor(props: RamanEditorProps) {
+  return <VibrationalEditor technique="raman" {...props} />;
+}

package/src/ir/ui/SpectraPanel.tsx

@@ -37,7 +37,7 @@ export function SpectraPanel() {
   const actions = useIrActions();
   const { spectra } = state.data;
   const { selectedId } = state.view;
-  const { mode } = state.settings;
+  const { mode, technique } = state.settings;
 
   const selected = spectra.find((spectrum) => spectrum.id === selectedId);
   const allDrawn = spectra.every((spectrum) => spectrum.visible);
@@ -96,6 +96,7 @@ export function SpectraPanel() {
             <SpectrumRow
               key={spectrum.id}
               spectrum={spectrum}
+              technique={technique}
               selected={spectrum.id === selectedId}
               onSelect={() => actions.selectSpectrum(spectrum.id)}
               onToggle={() =>

package/src/ir/ui/SpectrumRow.tsx

@@ -1,12 +1,20 @@
 import { Button } from 'react-science/ui';
 
 import { SpectrumColorSwatch } from '../../panel/ui/SpectrumColorSwatch.tsx';
-import { formatWavenumber } from '../core/irFormat.ts';
+import { formatWavenumberRange } from '../core/irFormat.ts';
 import type { IrSpectrum } from '../core/irSpectrum.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
+import { IR_TECHNIQUE_RULES } from '../core/irTechnique.ts';
 
 export interface SpectrumRowProps {
   /** The spectrum the row is about. */
   spectrum: IrSpectrum;
+  /**
+   * What it was measured with, which decides the order its range is written
+   * in: high to low for infrared, low to high for Raman.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
   /** Whether the panels are about it. */
   selected: boolean;
   /** Point the panels at it. */
@@ -31,6 +39,7 @@ export interface SpectrumRowProps {
 export function SpectrumRow(props: SpectrumRowProps) {
   const {
     spectrum,
+    technique = 'infrared',
     selected,
     onSelect,
     onToggle,
@@ -40,10 +49,10 @@ export function SpectrumRow(props: SpectrumRowProps) {
     onRename,
   } = props;
 
-  const range =
-    spectrum.wavenumber.length === 0
-      ? ''
-      : `${formatWavenumber(spectrum.wavenumber.at(-1) as number)}–${formatWavenumber(spectrum.wavenumber[0] as number)} cm⁻¹`;
+  const range = formatWavenumberRange(
+    spectrum.wavenumber,
+    IR_TECHNIQUE_RULES[technique].reverseX,
+  );
 
   return (
     <div

package/src/ir/ui/VibrationalEditor.tsx

@@ -0,0 +1,94 @@
+import type { Ref } from 'react';
+import { RootLayout } from 'react-science/ui';
+
+import type { IrEditorHandle } from '../core/irEditorApi.ts';
+import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrMode, IrSpectrum } from '../core/irSpectrum.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
+
+import { IrShell } from './IrShell.tsx';
+import { IrStateProvider } from './IrStateProvider.tsx';
+import { useIrEditor } from './useIrEditor.ts';
+
+export interface VibrationalEditorProps {
+  /**
+   * What the spectra were measured with. Read when the viewer opens and fixed
+   * from then on: it decides the value axes, the direction and name of the
+   * wavenumber axis, and whether the correlation table is asked about a band.
+   */
+  technique: IrTechnique;
+  /**
+   * The spectra to open on. Read when the viewer opens and never again.
+   * @default []
+   */
+  data?: IrSpectrum[];
+  /**
+   * Called whenever the spectra open change, with the spectra now open.
+   * @default undefined
+   */
+  onChange?: (spectra: IrSpectrum[]) => void;
+  /**
+   * Which value axis to open in; one the technique does not offer opens its
+   * first instead.
+   * @default the technique's first
+   */
+  mode?: IrMode;
+  /**
+   * The side panels open to begin with.
+   * @default DEFAULT_SIDE_PANELS
+   */
+  defaultPanelIds?: IrSidePanelId[];
+  /**
+   * The handle a host drives the viewer through.
+   * @default undefined
+   */
+  ref?: Ref<IrEditorHandle>;
+}
+
+/**
+ * The viewer `IrEditor` and `RamanEditor` both are: one shell, one set of
+ * panels and gestures, with what differs between the techniques read from
+ * `IR_TECHNIQUE_RULES` rather than written into either.
+ * @param props - Component props.
+ * @returns The viewer.
+ */
+export function VibrationalEditor(props: VibrationalEditorProps) {
+  const {
+    technique,
+    data = NO_SPECTRA,
+    onChange,
+    mode,
+    defaultPanelIds,
+    ref,
+  } = props;
+
+  const editor = useIrEditor({
+    spectra: data,
+    settings: { technique, ...(mode === undefined ? {} : { mode }) },
+    panelIds: defaultPanelIds,
+    onChange,
+  });
+
+  return (
+    <IrStateProvider editor={editor}>
+      {/* `react-science`'s own root: it holds the element the browser is asked
+          to show full screen, points Blueprint's portals at that element so
+          dialogs and tooltips are not left behind in `document.body`, and paints
+          the backdrop white. Above the shell rather than inside it, so the shell
+          can ask whether it is full screen and offer the way out. */}
+      <RootLayout style={rootLayoutStyle}>
+        <IrShell handle={ref} />
+      </RootLayout>
+    </IrStateProvider>
+  );
+}
+
+/**
+ * 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 } as const;
+
+/** What a viewer opens on when it is handed nothing, kept stable for the memo. */
+const NO_SPECTRA: IrSpectrum[] = [];