react-cheminfo 0.10.0 → 0.12.0

package/src/color/ui/ColorScaleLegend.tsx

@@ -2,15 +2,22 @@ import type { CSSProperties, ReactElement } from 'react';
 import { useId } from 'react';
 
 import { formatTrimmed } from '../../format/core/numbers.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+import type { ColorScale } from '../core/interpolate.ts';
+import { evenScale, sampleScale } from '../core/interpolate.ts';
 
-const FALLBACK_STOPS: readonly string[] = ['#e4e8ee'];
 const BAR_HEIGHT = 12;
 const BAR_WIDTH = 100;
+const WHEEL_SAMPLES = 24;
 
 /** What {@link ColorScaleLegend} needs to draw a scale. */
 export interface ColorScaleLegendProps {
-  /** The scale's colours, from its low end to its high end. */
-  stops: readonly string[];
+  /**
+   * The scale: a `ColorScale` as the registry, the picker and the editor hand
+   * it over, or a plain list of colours spread evenly from the low end to the
+   * high end.
+   */
+  scale: ColorScale | readonly string[];
   /** The value the low end stands for. */
   min: number;
   /** The value the high end stands for. */
@@ -30,6 +37,11 @@ export interface ColorScaleLegendProps {
    * @default a rounding to three decimals with the trailing zeros dropped
    */
   formatValue?: (value: number) => string;
+  /**
+   * Class names added to the root element.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -39,13 +51,15 @@ export interface ColorScaleLegendProps {
  * The ramp is a real gradient rather than a row of buckets, and both ends
  * carry their value, so a figure lifted out of the page still says what it is
  * measuring. It is drawn as an SVG, which keeps it crisp in a print and in an
- * exported image.
+ * exported image. A scale that turns around the colour wheel is sampled, since
+ * an SVG gradient only mixes the straight line between two colours.
  * @param props - See {@link ColorScaleLegendProps}.
  * @returns The labelled gradient strip.
  */
 export function ColorScaleLegend(props: ColorScaleLegendProps): ReactElement {
   const {
-    stops,
+    className,
+    scale,
     min,
     max,
     unit = '',
@@ -54,12 +68,12 @@ export function ColorScaleLegend(props: ColorScaleLegendProps): ReactElement {
   } = props;
   const gradientId = useId();
 
-  const scale = stops.length === 0 ? FALLBACK_STOPS : stops;
+  const stops = gradientStops('stops' in scale ? scale : evenScale(scale));
   const low = withUnit(formatValue(min), unit);
   const high = withUnit(formatValue(max), unit);
 
   return (
-    <div style={ROW_STYLE}>
+    <div className={className} style={ROW_STYLE}>
       {label === '' ? null : <span style={LABEL_STYLE}>{label}</span>}
       <span style={VALUE_STYLE}>{low}</span>
       <svg
@@ -69,24 +83,27 @@ export function ColorScaleLegend(props: ColorScaleLegendProps): ReactElement {
         role="img"
         aria-label={`${label === '' ? 'Colour scale' : label} from ${low} to ${high}`}
       >
-        <defs>
-          <linearGradient id={gradientId} x1="0" y1="0" x2="1" y2="0">
-            {gradientStops(scale).map((stop) => (
-              <stop
-                key={stop.offset}
-                offset={stop.offset}
-                stopColor={stop.color}
-              />
-            ))}
-          </linearGradient>
-        </defs>
+        {stops.length === 0 ? null : (
+          <defs>
+            <linearGradient id={gradientId} x1="0" y1="0" x2="1" y2="0">
+              {stops.map((stop) => (
+                <stop
+                  key={stop.key}
+                  offset={stop.offset}
+                  stopColor={stop.color}
+                />
+              ))}
+            </linearGradient>
+          </defs>
+        )}
         <rect
           x="0"
           y="0"
           width={BAR_WIDTH}
           height={BAR_HEIGHT}
           rx="2"
-          fill={`url(#${gradientId})`}
+          fill={stops.length === 0 ? undefined : `url(#${gradientId})`}
+          style={stops.length === 0 ? EMPTY_BAR_STYLE : undefined}
         />
       </svg>
       <span style={VALUE_STYLE}>{high}</span>
@@ -94,23 +111,57 @@ export function ColorScaleLegend(props: ColorScaleLegendProps): ReactElement {
   );
 }
 
-function gradientStops(
-  stops: readonly string[],
-): Array<{ offset: number; color: string }> {
-  const last = stops.length - 1;
-  const rendered: Array<{ offset: number; color: string }> = [];
-  for (let index = 0; index < stops.length; index++) {
-    const color = stops[index];
-    if (color === undefined) continue;
-    rendered.push({ offset: last === 0 ? index : index / last, color });
+interface GradientStop {
+  /** Two anchors may share a position and a colour, so the rank is part of it. */
+  key: string;
+  offset: number;
+  color: string;
+}
+
+function gradientStops(scale: ColorScale): GradientStop[] {
+  if (scale.stops.length === 0) return [];
+  if (scale.interpolation !== 'rgb') {
+    const sampled = sampledStops(scale);
+    if (sampled !== null) return sampled;
+  }
+  const rendered: GradientStop[] = [];
+  let rank = 0;
+  for (const stop of scale.stops) {
+    rendered.push(gradientStop(rank, stop.position, stop.color));
+    rank += 1;
   }
   if (rendered.length === 1) {
-    const only = rendered[0];
-    if (only !== undefined) rendered.push({ offset: 1, color: only.color });
+    const color = rendered[0]?.color ?? '';
+    return [gradientStop(0, 0, color), gradientStop(1, 1, color)];
   }
   return rendered;
 }
 
+function gradientStop(
+  rank: number,
+  offset: number,
+  color: string,
+): GradientStop {
+  return { key: `${rank}:${offset}:${color}`, offset, color };
+}
+
+function sampledStops(scale: ColorScale): GradientStop[] | null {
+  let colors: string[];
+  try {
+    colors = sampleScale(scale, WHEEL_SAMPLES);
+  } catch {
+    // A colour that is not hex cannot be turned around the wheel; its anchors
+    // are still drawn as written.
+    return null;
+  }
+  const last = colors.length - 1;
+  const stops: GradientStop[] = [];
+  for (let index = 0; index < colors.length; index++) {
+    stops.push(gradientStop(index, index / last, colors[index] ?? ''));
+  }
+  return stops;
+}
+
 function defaultFormatValue(value: number): string {
   return formatTrimmed(value, 3);
 }
@@ -127,7 +178,7 @@ const ROW_STYLE = {
 } as const satisfies CSSProperties;
 
 const LABEL_STYLE = {
-  color: 'var(--text-muted, rgb(95 107 124))',
+  color: TOKEN.textMuted,
   fontSize: 12,
 } as const satisfies CSSProperties;
 
@@ -142,3 +193,7 @@ const BAR_STYLE = {
   maxWidth: 320,
   height: BAR_HEIGHT,
 } as const satisfies CSSProperties;
+
+const EMPTY_BAR_STYLE = {
+  fill: TOKEN.border,
+} as const satisfies CSSProperties;

package/src/color/ui/ColorScaleSelect.tsx

@@ -8,13 +8,13 @@ import {
 import type { CSSProperties, ReactElement } from 'react';
 import { useState } from 'react';
 
-import type { ColorScale } from '../core/interpolate.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import { formatColorScale, resolveColorScale } from '../core/scaleText.ts';
-import type { ColorScaleKind } from '../core/scales.ts';
-import { COLOR_SCALES, COLOR_SCALE_KIND_LABELS } from '../core/scales.ts';
+import { COLOR_SCALES } from '../core/scales.ts';
 
 import { ColorScaleBar } from './ColorScaleBar.tsx';
 import { ColorScaleEditor } from './ColorScaleEditor.tsx';
+import { ColorScaleEntry } from './ColorScaleEntry.tsx';
 
 const BUTTON_BAR_WIDTH = 72;
 
@@ -42,6 +42,11 @@ export interface ColorScaleSelectProps {
    * @default undefined
    */
   testId?: string;
+  /**
+   * Class names added to the root element.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -55,7 +60,14 @@ export interface ColorScaleSelectProps {
  * @returns The button, and the menu it opens.
  */
 export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
-  const { value, onChange, label = '', allowCustom = true, testId } = props;
+  const {
+    className,
+    value,
+    onChange,
+    label = '',
+    allowCustom = true,
+    testId,
+  } = props;
   const [isOpen, setOpen] = useState(false);
   const [isEditing, setEditing] = useState(false);
   const resolved = resolveColorScale(value);
@@ -91,7 +103,7 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
   ) : (
     <Menu style={MENU_STYLE}>
       {COLOR_SCALES.map((entry, index) => (
-        <ScaleEntry
+        <ColorScaleEntry
           key={entry.id}
           id={entry.id}
           label={entry.label}
@@ -120,7 +132,7 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
   );
 
   return (
-    <label style={FIELD_STYLE}>
+    <label className={className} style={FIELD_STYLE}>
       {label === '' ? null : <span style={CAPTION_STYLE}>{label}</span>}
       <PopoverNext
         // A fade, like the pickers a site puts beside this one: the default
@@ -157,57 +169,6 @@ export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
   );
 }
 
-/**
- * One line of the menu, under the heading of its kind when the kind changes.
- * @param props - The scale the line offers, and what precedes it.
- * @param props.id - Id of the scale, which is what a link carries.
- * @param props.label - What the line is called.
- * @param props.kind - What the scale is for, which is the heading it sits under.
- * @param props.description - One line on when to reach for it, read on hover.
- * @param props.previous - Kind of the line above, so a heading is written once.
- * @param props.selected - Whether it is the scale in force.
- * @param props.onChange - Called with the id when the line is chosen.
- * @returns The line, with its heading when it opens a kind.
- */
-function ScaleEntry(props: {
-  id: string;
-  label: string;
-  kind: ColorScaleKind;
-  description: string;
-  previous: ColorScaleKind | undefined;
-  selected: boolean;
-  onChange: (value: string) => void;
-}): ReactElement {
-  const { id, label, kind, description, previous, selected, onChange } = props;
-  const entry = (
-    <MenuItem
-      roleStructure="listoption"
-      selected={selected}
-      htmlTitle={description}
-      text={
-        <span style={ITEM_STYLE}>
-          <span>{label}</span>
-          <ColorScaleBar scale={scaleOf(id)} />
-        </span>
-      }
-      onClick={() => {
-        onChange(id);
-      }}
-    />
-  );
-  if (previous === kind) return entry;
-  return (
-    <>
-      <MenuDivider title={COLOR_SCALE_KIND_LABELS[kind]} />
-      {entry}
-    </>
-  );
-}
-
-function scaleOf(id: string): ColorScale {
-  return resolveColorScale(id).scale;
-}
-
 const FIELD_STYLE = {
   display: 'flex',
   flex: '1 1 auto',
@@ -218,7 +179,7 @@ const FIELD_STYLE = {
 } as const satisfies CSSProperties;
 
 const CAPTION_STYLE = {
-  color: 'var(--text-muted, #5b6875)',
+  color: TOKEN.textMuted,
   fontSize: 12,
   fontWeight: 600,
 } as const satisfies CSSProperties;
@@ -230,14 +191,6 @@ const BUTTON_TEXT_STYLE = {
   width: '100%',
 } as const satisfies CSSProperties;
 
-const ITEM_STYLE = {
-  display: 'grid',
-  gridTemplateColumns: '7rem 1fr',
-  alignItems: 'center',
-  gap: 10,
-  minWidth: 220,
-} as const satisfies CSSProperties;
-
 const MENU_STYLE = {
   maxHeight: '60vh',
   overflowY: 'auto',

package/src/confirm/ui/ConfirmButton.tsx

@@ -0,0 +1,83 @@
+import type { ButtonProps, IconName, Intent } from '@blueprintjs/core';
+import { Alert, Button } from '@blueprintjs/core';
+import type { ReactElement, ReactNode } from 'react';
+import { useState } from 'react';
+
+/** Props of {@link ConfirmButton}: a Blueprint button, and what it asks. */
+export interface ConfirmButtonProps extends Omit<ButtonProps, 'onClick'> {
+  /**
+   * What the alert asks before anything happens: what is lost, and whether it
+   * can be undone.
+   */
+  question: ReactNode;
+  /** Does the thing, once the alert is confirmed. */
+  onConfirm: () => void;
+  /**
+   * Text of the button that goes ahead: the verb of what happens, never `OK`.
+   * @default 'Delete'
+   */
+  confirmLabel?: string;
+  /**
+   * Text of the button that backs out.
+   * @default 'Cancel'
+   */
+  cancelLabel?: string;
+}
+
+/**
+ * A button whose action cannot be taken back, asked about in a real alert.
+ *
+ * Never `confirm()`: a browser may suppress it, it cannot be styled, and it is
+ * dismissed by reflex. The alert takes the colour and the icon of the button
+ * that opened it, so an amber "Replace the link" asks in amber and a red
+ * "Delete" in red, and Escape or a click outside backs out.
+ * @param props - The button, the question, and what confirming does.
+ * @returns The button, and the alert it opens.
+ */
+export function ConfirmButton(props: ConfirmButtonProps): ReactElement {
+  const {
+    question,
+    onConfirm,
+    confirmLabel = 'Delete',
+    cancelLabel = 'Cancel',
+    ...buttonProps
+  } = props;
+  const [asking, setAsking] = useState(false);
+
+  return (
+    <>
+      <Button
+        {...buttonProps}
+        onClick={() => {
+          setAsking(true);
+        }}
+      />
+      <Alert
+        isOpen={asking}
+        intent={alertIntent(buttonProps.intent)}
+        icon={alertIcon(buttonProps.icon)}
+        canEscapeKeyCancel
+        canOutsideClickCancel
+        cancelButtonText={cancelLabel}
+        confirmButtonText={confirmLabel}
+        onCancel={() => {
+          setAsking(false);
+        }}
+        onConfirm={() => {
+          setAsking(false);
+          onConfirm();
+        }}
+      >
+        {question}
+      </Alert>
+    </>
+  );
+}
+
+function alertIntent(intent: Intent | undefined): Intent {
+  return intent === undefined || intent === 'none' ? 'danger' : intent;
+}
+
+function alertIcon(icon: ButtonProps['icon']): IconName {
+  return typeof icon === 'string' ? icon : 'trash';
+}

package/src/confirm/ui/index.ts

@@ -0,0 +1,2 @@
+export type { ConfirmButtonProps } from './ConfirmButton.tsx';
+export { ConfirmButton } from './ConfirmButton.tsx';

package/src/core.ts

@@ -7,6 +7,7 @@ export * from './credits/core/index.ts';
 export * from './delimited/core/index.ts';
 export * from './download/core/index.ts';
 export * from './ecosystem/core/index.ts';
+export * from './error/core/index.ts';
 export * from './format/core/index.ts';
 export * from './orbital/core/index.ts';
 export * from './overlay/core/index.ts';
@@ -15,11 +16,15 @@ export * from './periodic/core/index.ts';
 export * from './projection/core/index.ts';
 export * from './router/core/index.ts';
 export * from './scatter/core/index.ts';
+export * from './scatter3d/core/index.ts';
 export * from './seo/core/index.ts';
 export * from './share/core/index.ts';
 // The deck format and its navigation are framework-free, so a backend can read
 // a manifest without loading React: `react-cheminfo/slides` is the player.
 export * from './slides/core/index.ts';
-export * from './spectra/core/index.ts';
+export * from './state/core/index.ts';
+// Framework-free molfile and editor-value helpers, so a worker can read a
+// molfile without loading the editor that `react-cheminfo/structure` exports.
+export * from './structure/core/index.ts';
 export * from './tokens/core/index.ts';
 export * from './worker/core/index.ts';

package/src/credits/core/credits.ts

@@ -21,9 +21,8 @@ export type CreditId = (typeof CREDITS)[number]['id'];
 /**
  * The borrowed works a site names, in the order it names them.
  *
- * An About dialog lists what the page stands on, and every site had been
- * writing that list itself — which is how two of them came to credit the same
- * project to two different organisations. One registry, one answer.
+ * An About dialog lists what the page stands on. The registry is the one place
+ * a work is named, so every site credits it to the same organisation.
  * @param ids - Which works to list, in display order.
  * @returns The entries, in that order.
  * @throws {Error} When an id is not in the registry: a credits list that
@@ -55,6 +54,14 @@ export function creditOf(id: string): CreditEntry | undefined {
  * it — checked against the package each site installs, not against habit.
  */
 export const CREDITS = [
+  {
+    id: 'openbabel',
+    name: 'Open Babel',
+    href: 'https://openbabel.org/',
+    description:
+      'reads and writes the chemical file formats, and does the conversion itself.',
+    license: 'GPL-2.0',
+  },
   {
     id: 'openchemlib',
     name: 'OpenChemLib',

package/src/credits/ui/CreditsList.tsx

@@ -1,5 +1,7 @@
 import type { CSSProperties, ReactElement } from 'react';
 
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { CreditEntry } from '../core/credits.ts';
 
 /** What a credits list draws. */
@@ -33,9 +35,7 @@ export function CreditsList(props: CreditsListProps): ReactElement {
 
   return (
     <ul
-      className={
-        className === undefined ? 'credits-list' : `credits-list ${className}`
-      }
+      className={joinClassNames('credits-list', className)}
       style={LIST_STYLE}
     >
       {entries.map((entry) => (
@@ -76,7 +76,7 @@ const ITEM_STYLE = {
 const NAME_STYLE = { fontWeight: 600 } as const satisfies CSSProperties;
 
 const LICENSE_STYLE = {
-  color: 'var(--text-muted, #5f6b7c)',
+  color: TOKEN.textMuted,
   fontSize: 11,
   margin: '0 6px',
 } as const satisfies CSSProperties;

package/src/delimited/core/index.ts

@@ -1,11 +1,10 @@
 export type { DelimiterChoice, DelimiterId } from './delimiters.ts';
-export { DEFAULT_DELIMITER, DELIMITER_CHOICES } from './delimiters.ts';
+export {
+  DEFAULT_DELIMITER,
+  DELIMITER_CHOICES,
+  delimiterChoice,
+} from './delimiters.ts';
 export type { ReadDelimitedOptions } from './readDelimited.ts';
 export { detectDelimiter, readDelimited } from './readDelimited.ts';
-export type {
-  DelimitedColumn,
-  RowsToDelimitedOptions,
-} from './rowsToDelimited.ts';
-export { rowsToDelimited } from './rowsToDelimited.ts';
 export type { ToDelimitedOptions } from './toDelimited.ts';
-export { toDelimited } from './toDelimited.ts';
+export { escapeCell, toDelimited } from './toDelimited.ts';

package/src/delimited/ui/DelimitedTextDialog.tsx

@@ -26,7 +26,13 @@ export interface DelimitedTextDialogProps extends DelimitedTextPanelProps {
 export function DelimitedTextDialog(
   props: DelimitedTextDialogProps,
 ): ReactElement {
-  const { isOpen, onClose, title = 'Copy the table', ...panel } = props;
+  const {
+    isOpen,
+    onClose,
+    title = 'Copy the table',
+    className,
+    ...panel
+  } = props;
 
   return (
     <Dialog
@@ -34,6 +40,7 @@ export function DelimitedTextDialog(
       onClose={onClose}
       title={title}
       icon="th"
+      className={className}
       style={DIALOG_STYLE}
     >
       <DialogBody>

package/src/delimited/ui/DelimitedTextPanel.tsx

@@ -1,10 +1,14 @@
-import { Button, Callout, SegmentedControl } from '@blueprintjs/core';
+import { Button, Callout, Classes, SegmentedControl } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import { useMemo, useState } from 'react';
 
 import { CopyButton } from '../../clipboard/ui/CopyButton.tsx';
 import { downloadText } from '../../download/core/downloadText.ts';
 import { sanitizeFileName } from '../../download/core/sanitizeFileName.ts';
+import { formatInteger } from '../../format/core/numbers.ts';
+import { pluralize } from '../../format/core/words.ts';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { DelimiterId } from '../core/delimiters.ts';
 import { DELIMITER_CHOICES, delimiterChoice } from '../core/delimiters.ts';
 import { toDelimited } from '../core/toDelimited.ts';
@@ -50,6 +54,11 @@ export interface DelimitedTextPanelProps {
    * @default 320
    */
   height?: number;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -66,6 +75,7 @@ export function DelimitedTextPanel(
   props: DelimitedTextPanelProps,
 ): ReactElement {
   const {
+    className,
     rows,
     header,
     description,
@@ -84,7 +94,7 @@ export function DelimitedTextPanel(
   );
 
   return (
-    <div className="delimited-text">
+    <div className={joinClassNames('delimited-text', className)}>
       <Callout intent="primary" compact icon="info-sign">
         {description ?? defaultDescription(rows.length)}
       </Callout>
@@ -121,7 +131,7 @@ export function DelimitedTextPanel(
         value={text}
         spellCheck={false}
         aria-label={label}
-        className="bp6-input"
+        className={Classes.INPUT}
         style={{ ...TEXT_STYLE, height }}
         onFocus={(event) => event.currentTarget.select()}
       />
@@ -130,7 +140,7 @@ export function DelimitedTextPanel(
 }
 
 function defaultDescription(rowCount: number): string {
-  const rows = rowCount === 1 ? '1 row' : `${rowCount.toLocaleString()} rows`;
+  const rows = `${formatInteger(rowCount)} ${pluralize(rowCount, 'row')}`;
   return `${rows}, one per line. Copy them, then paste into a spreadsheet.`;
 }
 
@@ -143,7 +153,7 @@ const CONTROLS_STYLE = {
 } as const satisfies CSSProperties;
 
 const LABEL_STYLE = {
-  color: 'var(--text-muted, #5f6b7c)',
+  color: TOKEN.textMuted,
   fontSize: 12,
 } as const satisfies CSSProperties;