react-cheminfo 0.65.0 → 0.67.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,10 @@ 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 { irSidePanels } from '../core/irSidePanels.ts';
-import type { IrDomain, IrSpectrum } from '../core/irSpectrum.ts';
-import { DEFAULT_SIDE_PANEL } from '../core/irState.ts';
+import type { IrEditorHandle, IrPlotClick } from '../core/irEditorApi.ts';
+import { otherIrMode } from '../core/irMode.ts';
+import type { IrSpectrum } from '../core/irSpectrum.ts';
+import { irCommandOffered } from '../core/irTechniqueCommands.ts';
 
 import { IrAboutDialog } from './IrAboutDialog.tsx';
 import { IrCanvas } from './IrCanvas.tsx';
@@ -27,8 +19,12 @@ import { IrDocumentationDialog } from './IrDocumentationDialog.tsx';
 import { IrHeader } from './IrHeader.tsx';
 import { IrSidePanel } from './IrSidePanel.tsx';
 import { IrToolbar } from './IrToolbar.tsx';
+import type { IrHostPanel } from './irHostPanels.ts';
 import { useIrActions, useIrEditorState } from './irStateContext.ts';
+import { useIrHandle } from './useIrHandle.ts';
 import { useIrShortcuts } from './useIrShortcuts.ts';
+import { useIrSide } from './useIrSide.ts';
+import { useValueAxisZoom } from './useValueAxisZoom.ts';
 
 export interface IrShellProps {
   /**
@@ -36,6 +32,13 @@ export interface IrShellProps {
    * @default undefined
    */
   handle?: Ref<IrEditorHandle>;
+  /** The panels the host adds to the viewer's own, ahead of them. */
+  panels: readonly IrHostPanel[];
+  /**
+   * Told of a click on the plot, with the spectrum selected at that moment.
+   * @default undefined
+   */
+  onPlotClick?: (click: IrPlotClick) => void;
 }
 
 /**
@@ -53,13 +56,14 @@ export interface IrShellProps {
  * @returns The screen.
  */
 export function IrShell(props: IrShellProps) {
-  const { handle } = props;
+  const { handle, panels, onPlotClick } = 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 { openPanelIds, tool } = state.view;
+  const side = useIrSide(panels);
+  const { mode, pickBands, showAssignments, technique } = state.settings;
 
   const [isAboutOpen, setIsAboutOpen] = useState(false);
   const [isDocumentationOpen, setIsDocumentationOpen] = useState(false);
@@ -79,27 +83,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 +92,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 +111,11 @@ export function IrShell(props: IrShellProps) {
       actions,
       tool,
       mode,
+      technique,
       pickBands,
       showAssignments,
-      scaleValueAxis,
+      zoomIn,
+      zoomOut,
       toggleFullScreen,
       isFigureOpen,
       setFigureOpen,
@@ -137,45 +128,10 @@ 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],
-  );
-
-  /**
-   * 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: boolean): void {
-    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);
-  }
+  useIrHandle(handle);
 
   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. */}
@@ -194,23 +150,28 @@ export function IrShell(props: IrShellProps) {
             direction="horizontal"
             controlledSide="end"
             defaultSize="360px"
-            open={openPanelIds.length > 0}
-            onOpenChange={setSideOpen}
+            open={side.isOpen}
+            onOpenChange={side.setOpen}
           >
             <IrCanvas
               highlight={highlight}
               onHighlight={setHighlight}
               chartId={chartId}
+              onPlotClick={onPlotClick}
             />
 
-            <IrSidePanel highlight={highlight} onHighlight={setHighlight} />
+            <IrSidePanel
+              panels={panels}
+              highlight={highlight}
+              onHighlight={setHighlight}
+            />
           </SplitPane>
 
           {/* Outside the split, so the icons stay put against the right edge
               while the panel beside them is resized or closed. */}
           <div style={railStyle}>
             <PanelRail
-              panels={irSidePanels}
+              panels={side.panels}
               openIds={openPanelIds}
               onToggle={actions.togglePanel}
             />
@@ -221,27 +182,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/IrSidePanel.tsx

@@ -1,14 +1,24 @@
+import { useMemo } from 'react';
+
+import { panelStyle } from '../../panel/core/panelStyles.ts';
 import { SidePanelStack } from '../../panel/ui/SidePanelStack.tsx';
 import type { IrBand } from '../core/irBand.ts';
 import type { IrSidePanelId } from '../core/irSidePanels.ts';
-import { irSidePanels } from '../core/irSidePanels.ts';
 
 import { BandsPanel } from './BandsPanel.tsx';
 import { MetadataPanel } from './MetadataPanel.tsx';
 import { SpectraPanel } from './SpectraPanel.tsx';
+import type { IrHostPanel } from './irHostPanels.ts';
+import { irStackPanels, isIrHostPanel } from './irHostPanels.ts';
 import { useIrActions, useIrEditorState } from './irStateContext.ts';
 
 export interface IrSidePanelProps {
+  /**
+   * The panels the host adds to the viewer's own, stacked above them in the
+   * order given.
+   * @default []
+   */
+  panels?: readonly IrHostPanel[];
   /**
    * The band the pointer is resting on.
    * @default null
@@ -29,28 +39,41 @@ export interface IrSidePanelProps {
  * bands are is one question asked of two panels. The header carries the close
  * button and nothing else — a panel's own actions are a toolbar inside its body,
  * so they travel with it.
+ *
+ * A host's panel is stacked like the viewer's own, and its body is laid out in
+ * the same column a built-in panel fills, so it takes its share of the height
+ * and scrolls within it rather than pushing the stack.
  * @param props - Component props.
  * @returns The panel stack.
  */
 export function IrSidePanel(props: IrSidePanelProps) {
-  const { highlight = null, onHighlight } = props;
+  const {
+    panels: hostPanels = NO_PANELS,
+    highlight = null,
+    onHighlight,
+  } = props;
   const { state } = useIrEditorState();
   const actions = useIrActions();
   const { openPanelIds } = state.view;
+  const panels = useMemo(() => irStackPanels(hostPanels), [hostPanels]);
 
   return (
     <SidePanelStack
-      panels={irSidePanels}
+      panels={panels}
       openPanelIds={openPanelIds}
       onClose={actions.togglePanel}
     >
-      {(panel) => (
-        <PanelBody
-          panelId={panel.id}
-          highlight={highlight}
-          onHighlight={onHighlight}
-        />
-      )}
+      {(panel) =>
+        isIrHostPanel(panel) ? (
+          <div style={panelStyle}>{panel.content}</div>
+        ) : (
+          <PanelBody
+            panelId={panel.id}
+            highlight={highlight}
+            onHighlight={onHighlight}
+          />
+        )
+      }
     </SidePanelStack>
   );
 }
@@ -76,3 +99,6 @@ function PanelBody(props: PanelBodyProps) {
   if (panelId === 'metadata') return <MetadataPanel />;
   return <BandsPanel highlight={highlight} onHighlight={onHighlight} />;
 }
+
+/** What a stack the host adds nothing to holds, kept stable for the memo. */
+const NO_PANELS: readonly IrHostPanel[] = [];

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,71 @@
+import type { Ref } from 'react';
+
+import type { IrEditorHandle, IrPlotClick } from '../core/irEditorApi.ts';
+import type { IrPanelId } from '../core/irSidePanels.ts';
+import type { IrSpectrum } from '../core/irSpectrum.ts';
+
+import { VibrationalEditor } from './VibrationalEditor.tsx';
+import type { IrHostPanel } from './irHostPanels.ts';
+
+/** 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: the viewer's own — `'spectra'`,
+   * `'bands'`, `'metadata'` — or the id of one of `panels`. An id no panel
+   * answers to is ignored.
+   * @default DEFAULT_SIDE_PANELS
+   */
+  defaultPanelIds?: readonly IrPanelId[];
+  /**
+   * Panels the host adds to the viewer's own. Their icons come first in the
+   * activity bar, in the order given, and each then behaves as a built-in panel
+   * does: toggled on its own, stacked in the same column with a share of its
+   * height, folded and closed from its header.
+   * @default []
+   */
+  panels?: readonly IrHostPanel[];
+  /**
+   * The plot was clicked at this Raman shift (a press that did not travel, i.e.
+   * not a zoom drag), with the spectrum selected at that moment. The shift is
+   * reported as `wavenumber`, the name both techniques share.
+   * @default undefined
+   */
+  onPlotClick?: (click: IrPlotClick) => void;
+  /**
+   * 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={() =>