react-cheminfo 0.65.0 → 0.66.0

package/src/ir/ui/IrAboutDialog.tsx

@@ -1,12 +1,24 @@
 import { Dialog, DialogBody } from '@blueprintjs/core';
 
+import { Prose } from '../../i18n/ui/Prose.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { irCommands } from '../core/irCommands.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
+
 import { IrLogo } from './IrLogo.tsx';
+import { useIrText } from './useIrText.ts';
 
 export interface IrAboutDialogProps {
   /** Whether the dialog is open. */
   isOpen: boolean;
   /** Close it. */
   onClose: () => void;
+  /**
+   * What the spectra were measured with, which decides what the viewer says it
+   * does and whom it credits for it.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
 }
 
 /**
@@ -20,42 +32,63 @@ export interface IrAboutDialogProps {
  * @returns The dialog.
  */
 export function IrAboutDialog(props: IrAboutDialogProps) {
-  const { isOpen, onClose } = props;
+  const { isOpen, onClose, technique = 'infrared' } = props;
+  const t = useChromeT();
+  const title = (useIrText(technique).command('about') ?? irCommands.about)
+    .title;
+  const raman = technique === 'raman';
 
   return (
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
-      title="About the infrared viewer"
-      icon={<IrLogo size={20} />}
+      title={title}
+      icon={<IrLogo size={20} technique={technique} />}
       style={dialogStyle}
     >
       <DialogBody>
         <div style={brandStyle}>
-          <IrLogo size={64} />
+          <IrLogo size={64} technique={technique} />
           <div>
-            <p style={leadStyle}>react-cheminfo/ir</p>
-            <p style={paragraphStyle}>
-              Draws an infrared spectrum the way infrared is printed, reads it
-              as absorbance or as percent transmittance, picks its bands and
-              offers every functional group each band could be.
-            </p>
+            <p style={leadStyle}>{DOORS[technique]}</p>
+            {raman ? (
+              <p style={paragraphStyle}>{t('ir.raman.aboutLead')}</p>
+            ) : (
+              <p style={paragraphStyle}>
+                Draws an infrared spectrum the way infrared is printed, reads it
+                as absorbance or as percent transmittance, picks its bands and
+                offers every functional group each band could be.
+              </p>
+            )}
           </div>
         </div>
 
         <h4 style={headingStyle}>Credits</h4>
         <ul style={listStyle}>
-          <li>
-            <strong>ir-spectrum</strong> (cheminfo, MIT) reads the JCAMP-DX and
-            SPC files, derives the absorbance/transmittance pair, and picks the
-            bands. This package deliberately does none of that arithmetic
-            itself.
-          </li>
-          <li>
-            <strong>common-spectrum</strong>, <strong>jcampconverter</strong>{' '}
-            and <strong>spc-parser</strong> (cheminfo, MIT) are what it reads
-            through.
-          </li>
+          {raman ? (
+            <>
+              <li>
+                <Prose text={t('ir.raman.credit.picking')} />
+              </li>
+              <li>
+                <Prose text={t('ir.raman.credit.jcamp')} />
+              </li>
+            </>
+          ) : (
+            <>
+              <li>
+                <strong>ir-spectrum</strong> (cheminfo, MIT) reads the JCAMP-DX
+                and SPC files, derives the absorbance/transmittance pair, and
+                picks the bands. This package deliberately does none of that
+                arithmetic itself.
+              </li>
+              <li>
+                <strong>common-spectrum</strong>,{' '}
+                <strong>jcampconverter</strong> and <strong>spc-parser</strong>{' '}
+                (cheminfo, MIT) are what it reads through.
+              </li>
+            </>
+          )}
           <li>
             <strong>ml-spectra-processing</strong> (mljs, MIT) for the array
             work.
@@ -69,13 +102,15 @@ export function IrAboutDialog(props: IrAboutDialogProps) {
             <strong>react-science</strong> and <strong>BlueprintJS</strong>
             (zakodium, Palantir) for the shell this viewer is shaped like.
           </li>
-          <li>
-            The <strong>correlation table</strong> is the conventional teaching
-            set of group frequencies, as any introductory spectroscopy text
-            tabulates them. The ranges are deliberately the rounded, generous
-            ones: narrowing them to look precise would rule out assignments that
-            are genuinely possible.
-          </li>
+          {raman ? null : (
+            <li>
+              The <strong>correlation table</strong> is the conventional
+              teaching set of group frequencies, as any introductory
+              spectroscopy text tabulates them. The ranges are deliberately the
+              rounded, generous ones: narrowing them to look precise would rule
+              out assignments that are genuinely possible.
+            </li>
+          )}
           <li>
             The <strong>colours</strong> are Okabe and Ito&apos;s
             colour-universal palette, so two traces stay distinguishable for a
@@ -87,6 +122,12 @@ export function IrAboutDialog(props: IrAboutDialogProps) {
   );
 }
 
+/** The entry point each technique's viewer is imported from. */
+const DOORS: Record<IrTechnique, string> = {
+  infrared: 'react-cheminfo/ir',
+  raman: 'react-cheminfo/raman',
+};
+
 const dialogStyle = { width: 'min(680px, 92vw)' } as const;
 
 const brandStyle = {

package/src/ir/ui/IrCanvas.tsx

@@ -54,7 +54,7 @@ export function IrCanvas(props: IrCanvasProps) {
   const { state, visibleSpectra, assigned } = useIrEditorState();
   const actions = useIrActions();
   const { domain, tool, selectedId } = state.view;
-  const { mode, showAssignments, labelLimit } = state.settings;
+  const { technique, mode, showAssignments, labelLimit } = state.settings;
 
   const onDomainChange = useCallback(
     (next: IrDomain) => {
@@ -68,6 +68,7 @@ export function IrCanvas(props: IrCanvasProps) {
       <div ref={attachChart} id={chartId} style={chartStyle}>
         <IrChart
           spectra={visibleSpectra}
+          technique={technique}
           mode={mode}
           assigned={assigned}
           showAssignments={showAssignments}

package/src/ir/ui/IrChart.tsx

@@ -9,14 +9,14 @@ import { chartSurfaceStyle } from '../../chart/ui/chartSurface.ts';
 import { useChartSize } from '../../chart/ui/useChartSize.ts';
 import type { AssignedBand } from '../core/assignBands.ts';
 import type { IrBand } from '../core/irBand.ts';
-import { boxZoomOnly, yAxisTitle } from '../core/irMode.ts';
-import type { IrMode } from '../core/irSpectrum.ts';
+import { irModeFor } from '../core/irTechnique.ts';
 
 import { BandMarks } from './BandMarks.tsx';
 import { IrPointerTracker } from './IrPointerTracker.tsx';
 import { IrTraces } from './IrTraces.tsx';
 import type { IrChartProps } from './irChartProps.ts';
 import { useIrPointer } from './useIrPointer.ts';
+import { useIrText } from './useIrText.ts';
 import { useIrZoom } from './useIrZoom.ts';
 
 /**
@@ -28,7 +28,8 @@ import { useIrZoom } from './useIrZoom.ts';
  * building the scale onto a reversed pixel range and nothing else: the data stays
  * in ascending wavenumbers, every window stays low end first, and no other piece
  * of arithmetic in either package has to know. That is the whole reason
- * `createScale` takes its range rather than deriving it.
+ * `createScale` takes its range rather than deriving it. A Raman spectrum is
+ * drawn the other way, low shifts at the left, by the same means.
  *
  * The axes go under the data, so a grid line is never read as a band. Only the
  * data band is clipped, so a zoomed trace stops at the plot edge while the
@@ -46,7 +47,8 @@ import { useIrZoom } from './useIrZoom.ts';
 export function IrChart(props: IrChartProps): ReactElement {
   const {
     spectra,
-    mode = 'transmittance',
+    technique = 'infrared',
+    mode: asked,
     assigned = NO_BANDS,
     showAssignments = false,
     labelLimit,
@@ -61,6 +63,8 @@ export function IrChart(props: IrChartProps): ReactElement {
     children,
   } = props;
 
+  const mode = irModeFor(technique, asked);
+  const text = useIrText(technique);
   const [containerRef, measured] = useChartSize<HTMLDivElement>();
   const svgRef = useRef<SVGSVGElement | null>(null);
 
@@ -79,7 +83,15 @@ export function IrChart(props: IrChartProps): ReactElement {
 
   // The host's window goes *into* the zoom rather than over it, so a drag is
   // always measured against what is on screen.
-  const zoom = useIrZoom({ spectra, mode, svgRef, plot, domain, drag });
+  const zoom = useIrZoom({
+    spectra,
+    technique,
+    mode,
+    svgRef,
+    plot,
+    domain,
+    drag,
+  });
 
   // The scales the zoom measured its gestures against — the x one running right
   // to left. Taken from the hook rather than built here, because two scales over
@@ -128,7 +140,7 @@ export function IrChart(props: IrChartProps): ReactElement {
       <svg
         ref={svgRef}
         role="img"
-        aria-label={chartLabel(mode)}
+        aria-label={text.chart(mode)}
         width={frameWidth}
         height={frameHeight}
         viewBox={`0 0 ${frameWidth} ${frameHeight}`}
@@ -154,8 +166,8 @@ export function IrChart(props: IrChartProps): ReactElement {
           yDomain={shown.y}
           xScale={xScale}
           yScale={yScale}
-          xTitle="wavenumber (cm⁻¹)"
-          yTitle={yAxisTitle(mode)}
+          xTitle={text.xTitle}
+          yTitle={text.yTitle(mode)}
         />
 
         <g clipPath={`url(#${clipId})`}>
@@ -192,22 +204,6 @@ export function IrChart(props: IrChartProps): ReactElement {
   );
 }
 
-/**
- * What the chart is, and what can be done to it, for whoever cannot see it.
- *
- * The gestures differ by mode, so the sentence does too — a label promising the
- * wheel to a reader who cannot watch it fail to do anything is worse than no
- * label at all.
- * @param mode - Which value axis is being drawn.
- * @returns The label.
- */
-function chartLabel(mode: IrMode): string {
-  const axis = `Infrared spectrum read as ${yAxisTitle(mode)}, wavenumber running from high at the left to low at the right.`;
-  return boxZoomOnly(mode)
-    ? `${axis} Drag a rectangle over it to zoom to that rectangle, and double click to fit everything again.`
-    : `${axis} Drag across it to zoom the wavenumber axis, drag past the baseline to take the value axis with it, turn the wheel to scale the value axis, and double click to fit everything again.`;
-}
-
 /** What a chart nobody has picked any bands for marks. */
 const NO_BANDS: readonly AssignedBand[] = Object.freeze([]);
 

package/src/ir/ui/IrCommandProvider.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
 import type { IrCommandHandlers } from '../core/irCommands.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
 
 import type { IrCommandContextValue } from './irCommandContext.tsx';
 import { commandContext } from './irCommandContext.tsx';
@@ -9,6 +10,12 @@ import { commandContext } from './irCommandContext.tsx';
 export interface IrCommandProviderProps {
   /** What each command does. */
   handlers: IrCommandHandlers;
+  /**
+   * What the spectra were measured with, which decides how each command is
+   * worded in its tooltip and its label.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
   /** The viewer. */
   children: ReactNode;
 }
@@ -19,11 +26,11 @@ export interface IrCommandProviderProps {
  * @returns The provider.
  */
 export function IrCommandProvider(props: IrCommandProviderProps) {
-  const { handlers, children } = props;
+  const { handlers, technique = 'infrared', children } = props;
 
   const value = useMemo<IrCommandContextValue>(
-    () => ({ handlers, run: (id) => handlers[id]?.() }),
-    [handlers],
+    () => ({ handlers, technique, run: (id) => handlers[id]?.() }),
+    [handlers, technique],
   );
 
   return (

package/src/ir/ui/IrCommandTooltip.tsx

@@ -2,10 +2,19 @@ import { TooltipHelpContent } from 'react-science/ui';
 
 import type { IrCommand, IrCommandId } from '../core/irCommands.ts';
 import { irCommands } from '../core/irCommands.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
+
+import { useIrText } from './useIrText.ts';
 
 export interface IrCommandTooltipProps {
   /** Which command the tooltip is about. */
   id: IrCommandId;
+  /**
+   * What the spectra were measured with, which decides how the command is
+   * worded.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
 }
 
 /**
@@ -18,8 +27,8 @@ export interface IrCommandTooltipProps {
  * @returns The tooltip's content.
  */
 export function IrCommandTooltip(props: IrCommandTooltipProps) {
-  const { id } = props;
-  const entry = irCommands[id] as IrCommand;
+  const { id, technique = 'infrared' } = props;
+  const entry: IrCommand = useIrText(technique).command(id) ?? irCommands[id];
   const shortcuts = entry.shortcut?.label ?? entry.shortcut?.keys;
 
   return (

package/src/ir/ui/IrDocumentationDialog.tsx

@@ -1,17 +1,27 @@
 import { Dialog, DialogBody } from '@blueprintjs/core';
 
+import { Prose } from '../../i18n/ui/Prose.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { IrCommand, IrCommandId } from '../core/irCommands.ts';
-import { irCommands } from '../core/irCommands.ts';
 import { IR_MODE_RULES } from '../core/irMode.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
+import { irCommandsFor } from '../core/irTechniqueCommands.ts';
 
 import { IrLogo } from './IrLogo.tsx';
+import { useIrText } from './useIrText.ts';
 
 export interface IrDocumentationDialogProps {
   /** Whether the dialog is open. */
   isOpen: boolean;
   /** Close it. */
   onClose: () => void;
+  /**
+   * What the spectra were measured with, which decides what the guide says:
+   * only what is true of the technique, and only the commands it offers.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
 }
 
 /**
@@ -19,73 +29,36 @@ export interface IrDocumentationDialogProps {
  *
  * 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
+ * command table 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: IrDocumentationDialogProps) {
-  const { isOpen, onClose } = props;
+  const { isOpen, onClose, technique = 'infrared' } = props;
+  const text = useIrText(technique);
+  const ids = Object.keys(irCommandsFor(technique)) as IrCommandId[];
 
   return (
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
-      title="Using the infrared viewer"
-      icon={<IrLogo size={20} />}
+      title={text.documentation}
+      icon={<IrLogo size={20} technique={technique} />}
       style={dialogStyle}
     >
       <DialogBody>
-        <h4 style={headingStyle}>Opening a spectrum</h4>
-        <p style={paragraphStyle}>
-          JCAMP-DX (<code>.jdx</code>, <code>.dx</code>) and Thermo Galactic SPC
-          (<code>.spc</code>) are read. A file holding several blocks — a sample
-          beside its background, or an infrared spectrum beside a Raman one —
-          gives one spectrum per infrared block; the others are left to their
-          own viewers. Two columns of numbers are not read yet.
-        </p>
-
-        <h4 style={headingStyle}>The axis runs backwards</h4>
-        <p style={paragraphStyle}>
-          Wavenumber decreases to the right, from 4000 cm⁻¹ 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.
-        </p>
-
-        <h4 style={headingStyle}>Absorbance or transmittance</h4>
-        <p style={paragraphStyle}>
-          The same measurement, read the other way up — the file carries both,
-          whichever it was written in. In{' '}
-          <strong>{IR_MODE_RULES.transmittance.title}</strong> the bands hang
-          down from a baseline near 100; in{' '}
-          <strong>{IR_MODE_RULES.absorbance.title}</strong> they stand up out of
-          zero. The labels and the marks follow, so the pair reads the same way
-          up in either.
-        </p>
-
-        <h4 style={headingStyle}>Reading the bands</h4>
-        <p style={paragraphStyle}>
-          The bands of the <em>selected</em> spectrum are picked, marked on the
-          chart, and listed in the bands panel with{' '}
-          <strong>every vibration whose range contains them</strong> — narrowest
-          claim first. That is deliberate: a band at 1715 cm⁻¹ 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.
-        </p>
-        <p style={paragraphStyle}>
-          A band is reported at the sampled point it peaked on, so on a 4 cm⁻¹
-          grid a carbonyl centred at 1710 reads 1708 or 1712. Do not quote one
-          as though it were measured to the wavenumber.
-        </p>
+        {technique === 'raman' ? <RamanGuide /> : <InfraredGuide />}
 
         <h4 style={headingStyle}>Gestures and keys</h4>
         <table style={tableStyle}>
           <tbody>
-            {(Object.keys(irCommands) as IrCommandId[]).map((id) => (
-              <CommandRow key={id} id={id} />
-            ))}
+            {ids.map((id) => {
+              const entry = text.command(id);
+              return entry === undefined ? null : (
+                <CommandRow key={id} entry={entry} />
+              );
+            })}
           </tbody>
         </table>
       </DialogBody>
@@ -93,9 +66,81 @@ export function IrDocumentationDialog(props: IrDocumentationDialogProps) {
   );
 }
 
+/**
+ * What is true of reading an infrared spectrum here.
+ * @returns The sections.
+ */
+function InfraredGuide() {
+  return (
+    <>
+      <h4 style={headingStyle}>Opening a spectrum</h4>
+      <p style={paragraphStyle}>
+        JCAMP-DX (<code>.jdx</code>, <code>.dx</code>) and Thermo Galactic SPC (
+        <code>.spc</code>) are read. A file holding several blocks — a sample
+        beside its background, or an infrared spectrum beside a Raman one —
+        gives one spectrum per infrared block; the others are left to their own
+        viewers. Two columns of numbers are not read yet.
+      </p>
+
+      <h4 style={headingStyle}>The axis runs backwards</h4>
+      <p style={paragraphStyle}>
+        Wavenumber decreases to the right, from 4000 cm⁻¹ 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.
+      </p>
+
+      <h4 style={headingStyle}>Absorbance or transmittance</h4>
+      <p style={paragraphStyle}>
+        The same measurement, read the other way up — the file carries both,
+        whichever it was written in. In{' '}
+        <strong>{IR_MODE_RULES.transmittance.title}</strong> the bands hang down
+        from a baseline near 100; in{' '}
+        <strong>{IR_MODE_RULES.absorbance.title}</strong> they stand up out of
+        zero. The labels and the marks follow, so the pair reads the same way up
+        in either.
+      </p>
+
+      <h4 style={headingStyle}>Reading the bands</h4>
+      <p style={paragraphStyle}>
+        The bands of the <em>selected</em> spectrum are picked, marked on the
+        chart, and listed in the bands panel with{' '}
+        <strong>every vibration whose range contains them</strong> — narrowest
+        claim first. That is deliberate: a band at 1715 cm⁻¹ 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.
+      </p>
+      <p style={paragraphStyle}>
+        A band is reported at the sampled point it peaked on, so on a 4 cm⁻¹
+        grid a carbonyl centred at 1710 reads 1708 or 1712. Do not quote one as
+        though it were measured to the wavenumber.
+      </p>
+    </>
+  );
+}
+
+/**
+ * What is true of reading a Raman spectrum here: only the bands, since it has
+ * one value axis, runs the usual way, and is not assigned.
+ * @returns The section.
+ */
+function RamanGuide() {
+  const t = useChromeT();
+  return (
+    <>
+      <h4 style={headingStyle}>Reading the bands</h4>
+      <p style={paragraphStyle}>
+        <Prose text={t('ir.raman.doc.bands')} />
+      </p>
+      <p style={paragraphStyle}>{t('ir.raman.doc.sampled')}</p>
+    </>
+  );
+}
+
 interface CommandRowProps {
-  /** Which command the row is about. */
-  id: IrCommandId;
+  /** The command, as the viewer words it. */
+  entry: IrCommand;
 }
 
 /**
@@ -104,8 +149,7 @@ interface CommandRowProps {
  * @returns The row.
  */
 function CommandRow(props: CommandRowProps) {
-  const { id } = props;
-  const entry = irCommands[id] as IrCommand;
+  const { entry } = props;
   const keys = entry.shortcut?.label ?? entry.shortcut?.keys;
 
   return (

package/src/ir/ui/IrEditor.tsx

@@ -1,13 +1,10 @@
 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 { IrShell } from './IrShell.tsx';
-import { IrStateProvider } from './IrStateProvider.tsx';
-import { useIrEditor } from './useIrEditor.ts';
+import { VibrationalEditor } from './VibrationalEditor.tsx';
 
 export interface IrEditorProps {
   /**
@@ -29,7 +26,8 @@ export interface IrEditorProps {
    */
   onChange?: (spectra: IrSpectrum[]) => void;
   /**
-   * Which value axis to open in.
+   * Which value axis to open in: transmittance or absorbance. Intensity, which
+   * infrared does not offer, opens transmittance instead.
    * @default 'transmittance'
    */
   mode?: IrMode;
@@ -49,6 +47,7 @@ export interface IrEditorProps {
 /**
  * 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.
+ * `RamanEditor`, from `react-cheminfo/raman`, is the same viewer for Raman.
  *
  * 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
@@ -65,35 +64,5 @@ export interface IrEditorProps {
  * @returns The viewer.
  */
 export function IrEditor(props: IrEditorProps) {
-  const { data = NO_SPECTRA, onChange, mode, defaultPanelIds, ref } = props;
-
-  const editor = useIrEditor({
-    spectra: data,
-    settings: mode === undefined ? 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>
-  );
+  return <VibrationalEditor technique="infrared" {...props} />;
 }
-
-/**
- * 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[] = [];

package/src/ir/ui/IrHeader.tsx

@@ -2,6 +2,8 @@ import { Header, Toolbar, useFullscreen } from 'react-science/ui';
 
 import { IrLogo } from './IrLogo.tsx';
 import { useIrCommandProps } from './irCommandContext.tsx';
+import { useIrEditorState } from './irStateContext.ts';
+import { useIrText } from './useIrText.ts';
 
 /**
  * The bar across the top: the mark on the left, the viewer on the right.
@@ -17,13 +19,18 @@ import { useIrCommandProps } from './irCommandContext.tsx';
 export function IrHeader() {
   const command = useIrCommandProps();
   const { isFullScreen } = useFullscreen();
+  const { technique } = useIrEditorState().state.settings;
+  const text = useIrText(technique);
 
   return (
     <Header>
-      <Toolbar aria-label="Infrared spectrum viewer">
-        <Toolbar.Item icon={<IrLogo size={16} />} {...command('about')} />
+      <Toolbar aria-label={text.viewer}>
+        <Toolbar.Item
+          icon={<IrLogo size={16} technique={technique} />}
+          {...command('about')}
+        />
       </Toolbar>
-      <Toolbar aria-label="Infrared spectrum viewer help">
+      <Toolbar aria-label={text.viewerHelp}>
         <Toolbar.Item icon="help" {...command('documentation')} />
         {/* Always the last thing in the bar, hard against the right edge: the
             corner a window is made bigger from is the corner it is looked for