react-cheminfo 0.28.0 → 0.29.0

package/src/ir/ui/irChartProps.ts

@@ -0,0 +1,118 @@
+/**
+ * What a consumer hands the chart, and what the chart tells it back.
+ *
+ * Held apart from the component because it is the whole of the chart's public
+ * API — every spectrum drawn, every band marked on it and every gesture that
+ * comes back out is one of these — while the component behind it is an assembly
+ * of half a dozen layers nobody needs to read in order to mount one.
+ *
+ * Everything arrives as a prop and nothing is reached for: the chart reads no
+ * context and no store, so the same component serves an editor, a report page
+ * that only ever draws one spectrum, and a test.
+ */
+
+import type { ReactNode } from 'react';
+
+import type { ZoomDragMode } from '../../chart/core/chartDomain.ts';
+import type { AssignedBand } from '../core/assignBands.ts';
+import type { IrBand } from '../core/irBand.ts';
+import type { IrDomain, IrMode, IrSpectrum } from '../core/irSpectrum.ts';
+
+export interface IrChartProps {
+  /** The spectra to draw, each saying in itself whether it is drawn. */
+  spectra: readonly IrSpectrum[];
+  /**
+   * Which value axis to draw them in.
+   *
+   * A prop rather than state, so the switch lives with whoever owns the toolbar
+   * that flips it — and so two charts of the same spectra can be shown side by
+   * side, one in each, which is the clearest way to see what the pair means.
+   * @default 'transmittance'
+   */
+  mode?: IrMode;
+  /**
+   * The bands to mark, with whatever the correlation table said about them.
+   *
+   * Handed in rather than picked here, because the same bands answer the chart,
+   * a table beside it and any assignment count — and picking three times over
+   * would let them disagree.
+   * @default no bands
+   */
+  assigned?: readonly AssignedBand[];
+  /**
+   * Whether each band label names its assignment as well as its wavenumber.
+   * @default false
+   */
+  showAssignments?: boolean;
+  /**
+   * At most how many bands are labelled; all of them are still marked.
+   * @default 12
+   */
+  labelLimit?: number;
+  /**
+   * The band the pointer has come to rest on, wherever it was hovered. The chart
+   * draws its mark larger, which is how a band hovered in a panel beside the
+   * chart shows up on the trace.
+   * @default null
+   */
+  highlight?: IrBand | null;
+  /**
+   * Told which band the pointer has come to rest on, and told `null` when it
+   * leaves — called only when the answer changes, so it is safe to hang a
+   * highlight that redraws half the page on it.
+   * @default undefined
+   */
+  onHighlight?: (band: IrBand | null) => void;
+  /**
+   * The window to show, `null` to let the chart show what fits.
+   *
+   * The chart holds a window of its own — where you are looking is neither saved
+   * nor undone — so this is an override rather than the chart's state. Every
+   * window a gesture arrives at is reported through `onDomainChange`, and a host
+   * that keeps one is expected to hand back what it is told. Handing back `null`
+   * where a window was is how a host asks for the fit again, which is what "zoom
+   * to fit" on a toolbar comes down to.
+   *
+   * `x` is in wavenumbers and runs low to high, whichever way the axis is drawn.
+   * @default null
+   */
+  domain?: IrDomain | null;
+  /**
+   * Told the window the chart has come to show, whenever it changes — a drag, a
+   * turn of the wheel, the double click that fits everything again, or a refit
+   * after what is drawn changed.
+   * @default undefined
+   */
+  onDomainChange?: (domain: IrDomain) => void;
+  /**
+   * What a drag across the plot asks for: the wavenumber axis alone, or exactly
+   * the rectangle it sweeps out. A viewer offering a square-zoom tool switches
+   * this while the tool is chosen.
+   * @default 'xAxis'
+   */
+  drag?: ZoomDragMode;
+  /**
+   * Identity of the spectrum drawn thicker than the rest, `null` for none.
+   * @default null
+   */
+  emphasisedId?: string | null;
+  /**
+   * How wide the chart is drawn, in pixels. Left out, it fills the box it is
+   * given and follows it as that box is resized.
+   * @default the width of its container
+   */
+  width?: number;
+  /**
+   * How tall it is drawn, in pixels.
+   * @default the height of its container
+   */
+  height?: number;
+  /**
+   * Anything else to draw over the spectra, in the same pixels and under the
+   * same clip — a band marking a region of interest, a second producer's layer,
+   * a ruler. It is rendered last inside the plot, so a host adds to the chart
+   * instead of forking it.
+   * @default undefined
+   */
+  children?: ReactNode;
+}

package/src/ir/ui/irCommandContext.tsx

@@ -0,0 +1,62 @@
+/**
+ * How a component reaches the commands, and what a toolbar item needs to be one.
+ *
+ * The hooks and the context object, with no component of its own — see
+ * `irCommands.ts` for why the four files are split the way they are.
+ */
+
+import { createContext, useContext } from 'react';
+
+import type {
+  IrCommandHandlers,
+  IrCommandId,
+  RunIrCommand,
+} from '../core/irCommands.ts';
+import { irCommandLabel } from '../core/irCommands.ts';
+
+import { IrCommandTooltip } from './IrCommandTooltip.tsx';
+
+/** What the provider holds. */
+export interface IrCommandContextValue {
+  /** What each command does. */
+  handlers: IrCommandHandlers;
+  /** Run one. */
+  run: RunIrCommand;
+}
+
+/** Where the provider puts it. */
+export const commandContext = createContext<IrCommandContextValue | null>(null);
+
+/**
+ * Run a command from anywhere inside the viewer.
+ * @returns The runner; a command nothing handles does nothing.
+ */
+export function useIrCommand(): RunIrCommand {
+  const value = useContext(commandContext);
+  return value?.run ?? noRun;
+}
+
+/**
+ * Everything a toolbar item needs to be one command, in one spread.
+ *
+ * The tooltip, the label a screen reader is given and the click handler all come
+ * from the same table entry, so a button cannot end up titled one thing and
+ * doing another.
+ * @returns A function from a command's identity to the props for its button.
+ */
+export function useIrCommandProps() {
+  const run = useIrCommand();
+  return function command(id: IrCommandId) {
+    return {
+      tooltip: <IrCommandTooltip id={id} />,
+      'aria-label': irCommandLabel(id),
+      onClick: () => run(id),
+    };
+  };
+}
+
+/** What running a command comes to outside a provider: nothing at all. */
+function noRun(): void {
+  // Deliberately empty: a chart mounted without the shell has no commands, and
+  // a missing provider is not a reason to throw at a button press.
+}

package/src/ir/ui/irStateContext.ts

@@ -0,0 +1,48 @@
+/**
+ * How a panel reaches the viewer it is inside.
+ *
+ * Two contexts rather than one, because the actions never change while the state
+ * changes on every pointer move: a panel that only ever acts — a toolbar button —
+ * reads the second and is not re-rendered by the first.
+ */
+
+import { createContext, useContext } from 'react';
+
+import type { IrEditorActions } from './irActions.ts';
+import type { IrEditorApi } from './useIrEditor.ts';
+
+/** Everything one viewer knows, as the provider holds it. */
+export const stateContext = createContext<IrEditorApi | null>(null);
+
+/** Everything that changes it, as the provider holds it. */
+export const actionsContext = createContext<IrEditorActions | null>(null);
+
+/**
+ * Everything the viewer knows, from inside it.
+ * @returns The state and what follows from it.
+ * @throws {Error} When read outside an `IrStateProvider`.
+ */
+export function useIrEditorState(): IrEditorApi {
+  const editor = useContext(stateContext);
+  if (editor === null) {
+    throw new Error(
+      'The infrared viewer state was read outside an IrStateProvider',
+    );
+  }
+  return editor;
+}
+
+/**
+ * Everything to do, from inside the viewer.
+ * @returns The actions.
+ * @throws {Error} When read outside an `IrStateProvider`.
+ */
+export function useIrActions(): IrEditorActions {
+  const actions = useContext(actionsContext);
+  if (actions === null) {
+    throw new Error(
+      'The infrared viewer actions were read outside an IrStateProvider',
+    );
+  }
+  return actions;
+}

package/src/ir/ui/useIrEditor.ts

@@ -0,0 +1,139 @@
+/**
+ * One viewer's state, and everything derived from it.
+ *
+ * The bands are derived here rather than held, and that is the one structural
+ * decision in this file. Picking is a pure function of a spectrum and the
+ * picking settings, so a band held in state would be an answer that has to be
+ * invalidated by hand every time either changes — and the version that is wrong
+ * is the one drawn on the chart. Derived, a stale band cannot exist.
+ *
+ * It is memoised on the selected spectrum rather than on all of them: picking
+ * runs a peak detection over a few thousand points, and doing it for six loaded
+ * spectra when the panels only ever show one would cost six times what it needs
+ * to on every change of a threshold.
+ */
+
+import { useEffect, useMemo, useReducer, useRef } from 'react';
+
+import type { AssignedBand } from '../core/assignBands.ts';
+import { assignBands } from '../core/assignBands.ts';
+import type { CreateIrStateOptions } from '../core/irReducer.ts';
+import { createIrState, irReducer } from '../core/irReducer.ts';
+import type { IrSpectrum } from '../core/irSpectrum.ts';
+import type { IrState } from '../core/irState.ts';
+import { pickBands } from '../core/pickBands.ts';
+
+import type { IrEditorActions } from './irActions.ts';
+import { createIrActions } from './irActions.ts';
+
+/** What a viewer opens on, and who to tell when the spectra change. */
+export interface UseIrEditorOptions extends CreateIrStateOptions {
+  /**
+   * Called whenever the spectra open change — one loaded, one closed, the chart
+   * cleared — with the spectra now open.
+   * @default undefined
+   */
+  onChange?: (spectra: IrSpectrum[]) => void;
+}
+
+/** What a component drives the viewer through. */
+export interface IrEditorApi {
+  /** Everything the viewer knows, in its three buckets. */
+  state: IrState;
+  /** The spectra currently drawn, in the order they were loaded. */
+  visibleSpectra: IrSpectrum[];
+  /** The spectrum the panels act on, `null` while none is selected. */
+  selectedSpectrum: IrSpectrum | null;
+  /**
+   * The bands of the selected spectrum, with everything each might be. Empty
+   * while nothing is selected or while picking is switched off.
+   */
+  assigned: AssignedBand[];
+  /** Everything to do. */
+  actions: IrEditorActions;
+}
+
+/**
+ * Hold one viewer's state.
+ * @param options - What it opens on.
+ * @returns The state, what follows from it, and everything to do.
+ */
+export function useIrEditor(options: UseIrEditorOptions = {}): IrEditorApi {
+  const { onChange, ...initial } = options;
+
+  const [state, dispatch] = useReducer(irReducer, initial, createIrState);
+  const actions = useMemo(() => createIrActions(dispatch), [dispatch]);
+
+  const { spectra } = state.data;
+  const { selectedId } = state.view;
+  const { pickBands: picking, picking: pickingOptions } = state.settings;
+  const { assignmentTolerance } = state.settings;
+
+  const visibleSpectra = useMemo(() => {
+    const visible: IrSpectrum[] = [];
+    for (const spectrum of spectra) {
+      if (spectrum.visible) visible.push(spectrum);
+    }
+    return visible;
+  }, [spectra]);
+
+  const selectedSpectrum = useMemo(() => {
+    if (selectedId === null) return null;
+    for (const spectrum of spectra) {
+      if (spectrum.id === selectedId) return spectrum;
+    }
+    return null;
+  }, [spectra, selectedId]);
+
+  const bands = useMemo(
+    () =>
+      selectedSpectrum === null || !picking
+        ? []
+        : pickBands(selectedSpectrum, pickingOptions),
+    [selectedSpectrum, picking, pickingOptions],
+  );
+
+  // Assigning is a walk of thirty ranges per band, which is nothing beside the
+  // picking — so it is a memo of its own, and moving the tolerance does not
+  // re-pick.
+  const assigned = useMemo(
+    () => assignBands(bands, { tolerance: assignmentTolerance }),
+    [bands, assignmentTolerance],
+  );
+
+  // What was reported last, so a host passing a fresh callback on every render
+  // is not told about spectra that did not change. The identities are compared
+  // rather than the array: every edit replaces it, including the ones that only
+  // change how a spectrum is drawn.
+  const reported = useRef(spectra);
+  useEffect(() => {
+    if (sameSpectra(reported.current, spectra)) return;
+    reported.current = spectra;
+    onChange?.(spectra);
+  }, [spectra, onChange]);
+
+  return useMemo(
+    () => ({ state, visibleSpectra, selectedSpectrum, assigned, actions }),
+    [state, visibleSpectra, selectedSpectrum, assigned, actions],
+  );
+}
+
+/**
+ * Whether two lists hold the same spectra, by identity and in order.
+ * @param current - What was reported last.
+ * @param next - What is open now.
+ * @returns Whether the report can be skipped.
+ */
+function sameSpectra(
+  current: readonly IrSpectrum[],
+  next: readonly IrSpectrum[],
+): boolean {
+  if (current === next) return true;
+  if (current.length !== next.length) return false;
+  for (let index = 0; index < current.length; index++) {
+    if ((current[index] as IrSpectrum).id !== (next[index] as IrSpectrum).id) {
+      return false;
+    }
+  }
+  return true;
+}

package/src/ir/ui/useIrPointer.ts

@@ -0,0 +1,109 @@
+/**
+ * What an infrared chart reads under the pointer, and which band it is asking
+ * about.
+ *
+ * Following the pointer at all is `useChartPointer` in the shared chart.
+ * What it *reads* there is the part that is about infrared, and is the whole of
+ * this file — the wavenumber, the value in whichever axis is drawn, and the band
+ * within reach.
+ */
+
+import type { RefObject } from 'react';
+import { useCallback, useMemo } from 'react';
+
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartScale } from '../../chart/core/chartScale.ts';
+import { chartValue } from '../../chart/core/chartScale.ts';
+import type { ChartPoint } from '../../chart/core/svgPoint.ts';
+import type { ChartPointer } from '../../chart/ui/useChartPointer.ts';
+import { useChartPointer } from '../../chart/ui/useChartPointer.ts';
+import type { IrBand } from '../core/irBand.ts';
+import { sameIrBand } from '../core/irBand.ts';
+import type { IrMode } from '../core/irSpectrum.ts';
+import { nearestBandAt } from '../core/nearestBand.ts';
+
+/** What the axes say under the pointer, which is what a readout prints. */
+export interface IrReadout {
+  /** What the wavenumber axis reads there, in cm⁻¹. */
+  wavenumber: number;
+  /** What the value axis reads there, in whichever mode is drawn. */
+  value: number;
+  /** Which axis that value is in, so a readout can label it. */
+  mode: IrMode;
+  /** The band within reach of the pointer, `null` when none is. */
+  band: IrBand | null;
+}
+
+export interface IrPointerOptions {
+  /** The SVG the chart is drawn on, as it was handed to its `ref`. */
+  svgRef: RefObject<SVGSVGElement | null>;
+  /** Where the plot sits inside that SVG. */
+  plot: PlotRect;
+  /** The wavenumber axis as it is currently zoomed, running right to left. */
+  xScale: ChartScale;
+  /** The value axis as it is currently zoomed. */
+  yScale: ChartScale;
+  /** Which value axis is being drawn. */
+  mode: IrMode;
+  /** The bands of every drawn spectrum, for the one under the pointer. */
+  bands: readonly IrBand[];
+  /**
+   * Told which band the pointer has come to rest on, and told `null` when it
+   * leaves one — called only when the answer changes, so it is safe to hang a
+   * highlight that redraws half the page on it.
+   * @default undefined
+   */
+  onBand?: (band: IrBand | null) => void;
+}
+
+/**
+ * Follow the pointer over an infrared chart.
+ * @param options - The chart, its axes and the bands it is showing.
+ * @returns Where the pointer is and what it reads, both `null` while it is
+ * anywhere but over the plot.
+ */
+export function useIrPointer(
+  options: IrPointerOptions,
+): ChartPointer<IrReadout> {
+  const { svgRef, plot, xScale, yScale, mode, bands, onBand } = options;
+
+  const read = useCallback(
+    (point: ChartPoint): IrReadout => ({
+      wavenumber: chartValue(xScale, point.x),
+      value: chartValue(yScale, point.y),
+      mode,
+      band: nearestBandAt(bands, xScale, point.x),
+    }),
+    [xScale, yScale, mode, bands],
+  );
+
+  const onReadout = useMemo(
+    () =>
+      onBand === undefined
+        ? undefined
+        : (readout: IrReadout | null) => onBand(readout?.band ?? null),
+    [onBand],
+  );
+
+  return useChartPointer({
+    svgRef,
+    plot,
+    read,
+    sameReadout: sameIrReadout,
+    onReadout,
+  });
+}
+
+/**
+ * Whether two readings are about the same band.
+ *
+ * The band alone, and never the wavenumber under the crosshair: that fractional
+ * value changes on every pixel the pointer moves, and comparing it would report a
+ * new answer for every tremor of a hand resting on one band.
+ * @param current - What was last read.
+ * @param next - What has just been read.
+ * @returns Whether both are about the same band.
+ */
+export function sameIrReadout(current: IrReadout, next: IrReadout): boolean {
+  return sameIrBand(current.band, next.band);
+}

package/src/ir/ui/useIrShortcuts.ts

@@ -0,0 +1,95 @@
+/**
+ * The keys, heard on the viewer's own root rather than on the document.
+ *
+ * On its own root and with `stopPropagation`, which is the deliberate half of a
+ * decision the repo has already taken once: two viewers on one page must not both
+ * answer `f`, and a page that holds this beside a glycan editor must not have its
+ * own keys eaten. So the viewer hears a key only while it holds the caret — the
+ * root carries `tabIndex={-1}` so a click anywhere in it does — and a key it
+ * acted on goes no further.
+ */
+
+import type { RefObject } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
+
+import { isEditingField } from '../../panel/core/isEditingField.ts';
+import type {
+  IrCommand,
+  IrCommandHandlers,
+  IrCommandId,
+} from '../core/irCommands.ts';
+import { irCommands } from '../core/irCommands.ts';
+
+/**
+ * Fire the viewer's commands from the keyboard.
+ *
+ * The handlers are read live through a ref rather than closed over, so the
+ * listener is attached once for the life of the viewer instead of being torn down
+ * and rebuilt on every render — and the chart re-renders on every move of the
+ * pointer across it.
+ * @param root - The viewer's root, as it was handed to its `ref`.
+ * @param handlers - What each command does.
+ */
+export function useIrShortcuts(
+  root: RefObject<HTMLElement | null> | HTMLElement | null,
+  handlers: IrCommandHandlers,
+): void {
+  const latest = useRef(handlers);
+
+  useLayoutEffect(() => {
+    latest.current = handlers;
+  });
+
+  const element = root === null || root instanceof HTMLElement ? root : null;
+
+  useEffect(() => {
+    if (element === null) return;
+
+    function onKeyDown(event: KeyboardEvent): void {
+      // A key pressed with a modifier belongs to the browser or to the page:
+      // Ctrl+F is a search, and a viewer that swallowed it to fit its chart
+      // would be a viewer people stop typing in.
+      if (event.ctrlKey || event.metaKey || event.altKey) return;
+      // Never while a name is being typed into the spectra panel.
+      if (isEditingField(event.target)) return;
+
+      const id = commandFor(event.key);
+      if (id === undefined) return;
+      const handler = latest.current[id];
+      if (handler === undefined) return;
+
+      event.preventDefault();
+      // So the same key does not also reach a viewer mounted beside this one.
+      event.stopPropagation();
+      handler();
+    }
+
+    element.addEventListener('keydown', onKeyDown);
+    return () => {
+      element.removeEventListener('keydown', onKeyDown);
+    };
+  }, [element]);
+}
+
+/**
+ * Which command a key runs, if any.
+ *
+ * Built once from the command table rather than looked up by walking it, and
+ * compared case-insensitively so a capital arriving from a held shift still
+ * reaches the command a lowercase key names.
+ * @param key - The `event.key` that arrived.
+ * @returns The command, or `undefined` when the key names none.
+ */
+function commandFor(key: string): IrCommandId | undefined {
+  return KEYS.get(key.toLowerCase());
+}
+
+/** Every key the viewer answers to, against the command it runs. */
+const KEYS = new Map<string, IrCommandId>(
+  Object.entries(irCommands as Record<string, IrCommand>).flatMap(
+    ([id, command]) =>
+      (command.shortcut?.keys ?? []).map(
+        (key) => [key.toLowerCase(), id as IrCommandId] as const,
+      ),
+  ),
+);

package/src/ir/ui/useIrZoom.ts

@@ -0,0 +1,86 @@
+/**
+ * The generic zoom, told what an infrared window is fitted to and how its value
+ * axis behaves.
+ *
+ * Every gesture is `useChartZoom` in the shared chart and none of it is
+ * written here. What is about infrared is the three things handed in: the fit,
+ * which has to refit when the mode changes because the value axis is replaced
+ * rather than nudged; the y axis rules, which are where percent transmittance
+ * says that its baseline is 100 and not zero; and which gestures the mode
+ * answers at all, which is where it says that a rectangle is the only drag worth
+ * making on it and that the wheel belongs to the page.
+ */
+
+import type { RefObject } from 'react';
+import { useMemo } from 'react';
+
+import type { ZoomDragMode } from '../../chart/core/chartDomain.ts';
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartZoom } from '../../chart/ui/useChartZoom.ts';
+import { useChartZoom } from '../../chart/ui/useChartZoom.ts';
+import { fittedTo, fullDomain } from '../core/irDomain.ts';
+import { yAxisRules, zoomGestures } from '../core/irMode.ts';
+import type { IrDomain, IrMode, IrSpectrum } from '../core/irSpectrum.ts';
+
+export interface IrZoomOptions {
+  /** Everything the chart holds, which is what the window is fitted to. */
+  spectra: readonly IrSpectrum[];
+  /** Which value axis is being drawn. */
+  mode: IrMode;
+  /** The SVG the gestures are made on, as it was handed to its `ref`. */
+  svgRef: RefObject<SVGSVGElement | null>;
+  /** Where the plot sits inside that SVG, which the axes are laid over. */
+  plot: PlotRect;
+  /**
+   * The window a host is imposing, `null` while it imposes none. Handed straight
+   * through; `useChartZoom` documents what imposing one does.
+   * @default null
+   */
+  domain?: IrDomain | null;
+  /**
+   * What a drag asks for **where the mode leaves the choice open** — the
+   * wavenumber axis, or the rectangle swept out. Percent transmittance takes the
+   * rectangle whatever this says; `zoomGestures` is where that is decided.
+   * @default 'xAxis'
+   */
+  drag?: ZoomDragMode;
+}
+
+/**
+ * Zoom an infrared chart by dragging it, and — reading absorbance — by the wheel.
+ *
+ * A double click always fits everything again, in either mode: it is the way
+ * back from a zoom, and a chart that offers a gesture has to offer the way out
+ * of it.
+ * @param options - The chart, what it holds and which axis it is read in.
+ * @returns The window and the gestures that move it.
+ */
+export function useIrZoom(options: IrZoomOptions): ChartZoom {
+  const {
+    spectra,
+    mode,
+    svgRef,
+    plot,
+    domain = null,
+    drag = 'xAxis',
+  } = options;
+
+  const fitted = useMemo(() => fullDomain(spectra, mode), [spectra, mode]);
+  const fitKey = useMemo(() => fittedTo(spectra, mode), [spectra, mode]);
+  const yAxis = useMemo(() => yAxisRules(mode), [mode]);
+  const gestures = useMemo(() => zoomGestures(mode, drag), [mode, drag]);
+
+  // `reverseX` is not decoration: the hook measures every gesture by inverting a
+  // pixel through the scale it builds, so it has to build the same reversed one
+  // the chart draws with.
+  return useChartZoom({
+    fitted,
+    fitKey,
+    svgRef,
+    plot,
+    yAxis,
+    domain,
+    gestures,
+    reverseX: true,
+  });
+}

package/src/ir.ts

@@ -0,0 +1,13 @@
+/**
+ * Displaying and assigning infrared spectra: the chart, the band table and the
+ * whole editor.
+ *
+ * A door of its own, and not part of `react-cheminfo/core` or
+ * `react-cheminfo/ui`, because reading a spectrum drags the formats it may
+ * arrive in — `ir-spectrum` for the band correlations, `convert-to-jcamp` for
+ * writing them back out, and a JCAMP or SPC reader fetched only once the bytes
+ * turn out to need it. A site with no spectra to look at installs none of it.
+ */
+
+export * from './ir/core/index.ts';
+export * from './ir/ui/index.ts';

package/src/panel/core/dialogStyles.ts

@@ -0,0 +1,11 @@
+/** What a paragraph inside a dialog section looks like. */
+export const paragraphStyle = { margin: 0 } as const;
+
+/** What a list of things a panel holds looks like. */
+export const listStyle = {
+  margin: 0,
+  paddingLeft: 18,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+} as const;