react-cheminfo 0.32.0 → 0.34.0

package/src/axis/core/logAxisBounds.ts

@@ -0,0 +1,198 @@
+/**
+ * The ends of a logarithmic axis, and the values it is graduated at.
+ *
+ * Both have to be stated rather than left to the charting library, and for two
+ * separate reasons.
+ *
+ * The ends, because a library that finds them itself may not look at every
+ * value. nivo is the measured case: it sorts and takes a true minimum and
+ * maximum only for a linear axis, and on a log or symmetric-log one `'auto'`
+ * resolves to the first value the data carries and the last — so the domain
+ * comes out in plotting order, upside down whenever the first point outweighs
+ * the last, and cutting off everything past the last point drawn.
+ *
+ * The graduations, because d3 rules a symmetric-log axis at evenly *spaced*
+ * values while placing them logarithmically, so the top of a wide axis collects
+ * every graduation it has into one unreadable line. Ruling it by decade spreads
+ * them evenly, which is also how such a quantity is read.
+ */
+
+/** What {@link logAxisBounds} answers. */
+export interface LogAxisBounds {
+  /** The low end of the axis. */
+  min: number;
+  /** The high end. */
+  max: number;
+  /**
+   * The values to rule it at, or `undefined` for an axis spanning too few
+   * decades to be worth ruling by them — there the library's own linear
+   * graduations read better, and there is no pile-up to undo.
+   */
+  tickValues?: number[];
+}
+
+/** What {@link logAxisBounds} needs beyond the values. */
+export interface LogAxisBoundsOptions {
+  /**
+   * Width of the linear region at the bottom of a symmetric-log axis — d3's
+   * `constant`. Everything smaller than it is placed almost on the zero line,
+   * so no graduation is written below it; a graduation there would land on top
+   * of the one before it, which is the pile-up this exists to prevent.
+   *
+   * Pass `0` for a true logarithmic axis, which has no such region — and which
+   * cannot place a zero or a negative at all, so those values are then left out
+   * of the ends rather than dragging them to nothing.
+   * @default 1
+   */
+  constant?: number;
+  /**
+   * Whether the ends are rounded outwards to whole powers of ten. An axis that
+   * ends on its own extreme values reads as though those were round numbers;
+   * one that ends on decades says what it is. Worth it on a true logarithmic
+   * axis, where every graduation is a decade anyway.
+   * @default false — the ends are the data's own
+   */
+  snapToDecades?: boolean;
+  /**
+   * How many decades the axis may span at most, counted down from its top. A
+   * quantity that reaches zero asymptotically has no meaningful bottom, and an
+   * axis given one spends most of its height on values nobody is reading.
+   * Only consulted with `snapToDecades`.
+   * @default Infinity — the axis spans whatever the data does
+   */
+  maxDecades?: number;
+  /**
+   * How many graduations the axis may carry. More than this is a smear however
+   * they are spread, so the decades are stepped over rather than written out.
+   * @default 10
+   */
+  mostTicks?: number;
+}
+
+/** Under this many decades the library's own graduations read better. */
+const RULE_PAST_DECADES = 3;
+
+/**
+ * Where a logarithmic axis starts and ends, and where it is graduated.
+ * @param values - Every value plotted on the axis. Anything not finite is
+ *   ignored, so a sheet's gaps need not be filtered out first.
+ * @param options - See {@link LogAxisBoundsOptions}.
+ * @returns The ends and the graduations, or `null` when no value can be drawn
+ *   and the caller should leave the axis to its library.
+ */
+export function logAxisBounds(
+  values: Iterable<number>,
+  options: LogAxisBoundsOptions = {},
+): LogAxisBounds | null {
+  const { constant = 1, snapToDecades = false } = options;
+  const { maxDecades = Infinity, mostTicks = 10 } = options;
+  // A true logarithmic axis has no room for a zero or a negative, so they are
+  // not what its bottom end is taken from.
+  const positiveOnly = constant === 0;
+
+  let min = Infinity;
+  let max = -Infinity;
+  for (const value of values) {
+    if (!Number.isFinite(value)) continue;
+    if (positiveOnly && value <= 0) continue;
+    if (value < min) min = value;
+    if (value > max) max = value;
+  }
+  if (min > max) return null;
+
+  if (snapToDecades) {
+    const top = Math.ceil(Math.log10(Math.abs(max) || 1));
+    const bottom = Math.max(
+      Math.floor(Math.log10(Math.abs(min) || 1)),
+      top - maxDecades,
+    );
+    return withTicks(decade(bottom), decade(top), constant, mostTicks);
+  }
+
+  // A lone value, or a column of identical ones, spans nothing: reach to the
+  // origin so it is read against a zero rather than filling the axis.
+  if (min === max) {
+    if (min === 0) return { min: -1, max: 1 };
+    return { min: Math.min(min, 0), max: Math.max(max, 0) };
+  }
+
+  return withTicks(min, max, constant, mostTicks);
+}
+
+/**
+ * The ends, with the graduations when they are worth writing.
+ * @param min
+ * @param max
+ * @param constant
+ * @param mostTicks
+ */
+function withTicks(
+  min: number,
+  max: number,
+  constant: number,
+  mostTicks: number,
+): LogAxisBounds {
+  const ticks = decadesBetween(min, max, constant, mostTicks);
+  return ticks === undefined ? { min, max } : { min, max, tickValues: ticks };
+}
+
+/**
+ * Zero, and the powers of ten the axis both reaches and can separate.
+ * @param min - The low end of the axis.
+ * @param max - Its high end.
+ * @param constant - Width of the linear region; see the options.
+ * @param mostTicks - How many graduations the axis may carry.
+ * @returns The values to rule it at, or nothing to leave it to the library.
+ */
+function decadesBetween(
+  min: number,
+  max: number,
+  constant: number,
+  mostTicks: number,
+): number[] | undefined {
+  const largest = Math.max(Math.abs(min), Math.abs(max));
+  if (largest === 0) return undefined;
+
+  // Below the linear region every decade lands on the same pixel, so the axis
+  // is ruled from there up rather than from its smallest value.
+  const floor = constant > 0 ? Math.log10(constant) : smallestDecade(min, max);
+  const bottom = Math.ceil(floor);
+  const top = Math.floor(Math.log10(largest));
+  // Under a few decades the library's own graduations read better — but only
+  // where it has linear ones to offer. On a true logarithmic axis every
+  // graduation is a decade, so a short one is still ruled by decade.
+  if (constant > 0 && top - bottom + 1 < RULE_PAST_DECADES) return undefined;
+
+  const step = Math.ceil((top - bottom + 1) / mostTicks);
+  const ticks = min <= 0 && max >= 0 ? [0] : [];
+  for (let power = bottom; power <= top; power += step) {
+    const tick = decade(power);
+    if (tick >= min && tick <= max) ticks.push(tick);
+  }
+  if (constant === 0) return ticks;
+  return ticks.length < RULE_PAST_DECADES ? undefined : ticks;
+}
+
+/**
+ * A whole power of ten.
+ * @param power - The exponent, a whole number.
+ * @returns Ten to that power, the same bits on every engine.
+ */
+function decade(power: number): number {
+  // Read as a decimal rather than computed: `10 ** power` goes through pow,
+  // which is not bit-exact across V8 versions — node 22 answers
+  // 0.00009999999999999999 for -4 and 1.0000000000000001e-20 for -20 — while a
+  // decimal literal is the correctly-rounded double everywhere.
+  return Number(`1e${power}`);
+}
+
+/**
+ * The decade of the smaller end, for an axis with no linear region.
+ * @param min - The low end of the axis.
+ * @param max - Its high end.
+ * @returns The base-ten logarithm of the smaller end that is not zero.
+ */
+function smallestDecade(min: number, max: number): number {
+  const ends = [Math.abs(min), Math.abs(max)].filter((end) => end > 0);
+  return Math.log10(Math.min(...ends));
+}

package/src/axis/ui/AxisScaleControl.tsx

@@ -0,0 +1,103 @@
+/**
+ * The control that moves one axis between its two scales.
+ *
+ * It belongs on the figure rather than in the page around it: the scale is not
+ * a property of the page but of the picture, a reader decides to change it
+ * while looking at the picture, and a figure handed out on its own — embedded
+ * in a course page, pasted into a deck — takes its controls with it. So it is
+ * written as a control of an `OverlayBar`, floating in whichever corner the
+ * marks leave emptiest.
+ *
+ * Its two segments are named here rather than by each site, because `Linear`
+ * and `Log` are chrome: one translation reaches every figure in the family.
+ */
+
+import type { ReactElement } from 'react';
+
+import type { HelpContent } from '../../help/ui/HelpBody.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
+import type { AxisScale } from '../core/axisScale.ts';
+
+/** Which axis a control belongs to, which is how it names itself. */
+export type AxisScaleAxis = 'x' | 'y';
+
+/** What {@link AxisScaleControl} needs. */
+export interface AxisScaleControlProps {
+  /** The scale in force — what `resolveAxisScale` answered, not the choice. */
+  value: AxisScale;
+  /** Called with the scale the reader picked. */
+  onChange: (scale: AxisScale) => void;
+  /**
+   * Which axis it sets, which names it `X scale` or `Y scale`. Leave it out on
+   * a figure where only one axis offers the choice: the control is then simply
+   * `Scale`, because naming the axis is only worth the width when there are two
+   * of them to tell apart.
+   * @default undefined — the control is named `Scale`
+   */
+  axis?: AxisScaleAxis;
+  /**
+   * What it is called, overriding both of the above. For a figure whose axis
+   * has a name the reader already knows it by.
+   * @default the chrome's own word, in the language of the page
+   */
+  label?: string;
+  /**
+   * What the two scales do, in a sentence.
+   * @default the chrome's own explanation
+   */
+  help?: HelpContent;
+  /**
+   * Whether the name is announced but not written.
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * Whether the control is greyed and unreachable.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Value of the `data-testid` attribute.
+   * @default undefined
+   */
+  testId?: string;
+}
+
+/**
+ * The two scales, the one in force pressed.
+ * @param props - See {@link AxisScaleControlProps}.
+ * @returns The named pair of segments.
+ */
+export function AxisScaleControl(props: AxisScaleControlProps): ReactElement {
+  const { value, onChange, axis, label, help, testId } = props;
+  const { hideLabel = false, disabled = false } = props;
+  const t = useChromeT();
+
+  const options: ReadonlyArray<OverlayOption<AxisScale>> = [
+    { value: 'linear', label: t('axis.linear') },
+    { value: 'log', label: t('axis.logarithmic') },
+  ];
+
+  return (
+    <OverlaySegmented<AxisScale>
+      label={label ?? t(nameOf(axis))}
+      help={help ?? { title: t('axis.scale'), body: t('axis.scaleHelp') }}
+      hideLabel={hideLabel}
+      disabled={disabled}
+      value={value}
+      options={options}
+      onChange={onChange}
+      testId={testId}
+    />
+  );
+}
+
+function nameOf(
+  axis: AxisScaleAxis | undefined,
+): 'axis.scale' | 'axis.xScale' | 'axis.yScale' {
+  if (axis === 'x') return 'axis.xScale';
+  if (axis === 'y') return 'axis.yScale';
+  return 'axis.scale';
+}

package/src/axis/ui/index.ts

@@ -0,0 +1,9 @@
+/**
+ * The controls that say how an axis is read.
+ */
+
+export type {
+  AxisScaleAxis,
+  AxisScaleControlProps,
+} from './AxisScaleControl.tsx';
+export { AxisScaleControl } from './AxisScaleControl.tsx';

package/src/core.ts

@@ -1,4 +1,5 @@
 export * from './about/core/index.ts';
+export * from './axis/core/index.ts';
 export * from './build/core/index.ts';
 export * from './chart/core/index.ts';
 export * from './citation/core/index.ts';

package/src/delimited/core/index.ts

@@ -8,3 +8,5 @@ export type { ReadDelimitedOptions } from './readDelimited.ts';
 export { detectDelimiter, readDelimited } from './readDelimited.ts';
 export type { ToDelimitedOptions } from './toDelimited.ts';
 export { escapeCell, toDelimited } from './toDelimited.ts';
+export type { TableRecord, TableRows, TableRowsOptions } from './tableRows.ts';
+export { columnsOf, tableRows } from './tableRows.ts';

package/src/delimited/core/tableRows.ts

@@ -0,0 +1,93 @@
+/**
+ * Turning a list of records into the cells a table is handed over as.
+ *
+ * Most pages hold their data as one object per row — a query result, a list of
+ * peaks, a row of properties — while a delimited table is cells. Every site
+ * that exports such a list wrote the same two loops, so they are here once.
+ */
+
+/** One record, as a page holds it before it becomes a row of cells. */
+export type TableRecord = Record<string, unknown>;
+
+/** How a record becomes cells. */
+export interface TableRowsOptions {
+  /**
+   * The columns to write, in order. A column no record carries comes out
+   * empty, which is what lets one caller pin the order of a table whose first
+   * record happens to be missing a field.
+   * @default the keys of the first record, in the order it declares them
+   */
+  columns?: readonly string[];
+  /**
+   * How a value becomes a cell.
+   * @default `String(value)`, with `null` and `undefined` written as nothing
+   */
+  format?: (value: unknown, column: string) => string;
+}
+
+/** The columns, and the cells under them. */
+export interface TableRows {
+  /** Column names, in the order the cells are written. */
+  header: string[];
+  /** One array of cells per record. */
+  rows: string[][];
+}
+
+/**
+ * The records as the header and cells of a table.
+ * @param records - The records, in the order they are shown.
+ * @param options - See {@link TableRowsOptions}.
+ * @returns See {@link TableRows}.
+ */
+export function tableRows(
+  records: readonly TableRecord[],
+  options: TableRowsOptions = {},
+): TableRows {
+  const { columns, format = defaultCell } = options;
+  const header = [...(columns ?? columnsOf(records))];
+  const rows: string[][] = [];
+  for (const record of records) {
+    const cells: string[] = [];
+    for (const column of header) cells.push(format(record[column], column));
+    rows.push(cells);
+  }
+  return { header, rows };
+}
+
+/**
+ * Every column the records carry, each named once, in the order first seen.
+ *
+ * Every record is read rather than only the first, because a list whose later
+ * records carry a field the first one happens to lack would otherwise be
+ * handed over with that column silently missing.
+ * @param records - The records.
+ * @returns The column names.
+ */
+export function columnsOf(records: readonly TableRecord[]): string[] {
+  const columns: string[] = [];
+  const seen = new Set<string>();
+  for (const record of records) {
+    for (const column of Object.keys(record)) {
+      if (seen.has(column)) continue;
+      seen.add(column);
+      columns.push(column);
+    }
+  }
+  return columns;
+}
+
+function defaultCell(value: unknown): string {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'string') return value;
+  if (
+    typeof value === 'number' ||
+    typeof value === 'bigint' ||
+    typeof value === 'boolean'
+  ) {
+    return String(value);
+  }
+  // Anything else left in a cell has no honest text form, and `[object Object]`
+  // is the one answer a spreadsheet can do nothing with. JSON at least says
+  // what was there; a caller who wants better passes `format`.
+  return JSON.stringify(value) ?? '';
+}

package/src/delimited/ui/DelimitedTextPanel.tsx

@@ -54,6 +54,15 @@ export interface DelimitedTextPanelProps {
    * @default 320
    */
   height?: number;
+  /**
+   * What is shown in place of the text area. A caller with more rows than a
+   * text area can hold — a spectrum of a hundred thousand points — passes its
+   * own virtualized table here; what is copied and what is saved stay the
+   * serialized text either way, so the preview can shorten a number the file
+   * keeps in full.
+   * @default undefined — the text itself, in a read-only text area
+   */
+  preview?: ReactNode;
   /**
    * Class names added to the root element, after the component's own.
    * @default undefined
@@ -84,6 +93,7 @@ export function DelimitedTextPanel(
     downloadable = true,
     label,
     height = 320,
+    preview,
   } = props;
   const t = useChromeT();
   const [delimiterId, setDelimiterId] = useState<string>(defaultDelimiter);
@@ -138,15 +148,19 @@ export function DelimitedTextPanel(
           small
         />
       </div>
-      <textarea
-        readOnly
-        value={text}
-        spellCheck={false}
-        aria-label={label ?? t('delimited.tableAsText')}
-        className={Classes.INPUT}
-        style={{ ...TEXT_STYLE, height }}
-        onFocus={(event) => event.currentTarget.select()}
-      />
+      {preview === undefined ? (
+        <textarea
+          readOnly
+          value={text}
+          spellCheck={false}
+          aria-label={label ?? t('delimited.tableAsText')}
+          className={Classes.INPUT}
+          style={{ ...TEXT_STYLE, height }}
+          onFocus={(event) => event.currentTarget.select()}
+        />
+      ) : (
+        <div style={PREVIEW_STYLE}>{preview}</div>
+      )}
     </div>
   );
 }
@@ -166,6 +180,8 @@ const LABEL_STYLE = {
 
 const SPACER_STYLE = { flex: 1 } as const satisfies CSSProperties;
 
+const PREVIEW_STYLE = { marginTop: 12 } as const satisfies CSSProperties;
+
 const TEXT_STYLE = {
   width: '100%',
   marginTop: 12,

package/src/delimited/ui/TableDataButton.tsx

@@ -0,0 +1,162 @@
+import type { IconName } from '@blueprintjs/core';
+import { Button } from '@blueprintjs/core';
+import type { ReactElement, ReactNode } from 'react';
+import { useState } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
+import type { DelimitedTextDialogProps } from './DelimitedTextDialog.tsx';
+import { DelimitedTextDialog } from './DelimitedTextDialog.tsx';
+
+/** The cells of a table, one array per line. */
+type TableRows = ReadonlyArray<readonly string[]>;
+
+/** What the shut dialog is handed, so it holds no copy of the last table. */
+const EMPTY: TableRows = [];
+
+/** What {@link TableDataButton} hands over, and how the button reads. */
+export interface TableDataButtonProps extends Omit<
+  DelimitedTextDialogProps,
+  'isOpen' | 'onClose' | 'rows'
+> {
+  /**
+   * The cells, one array per line. A function is called when the dialog opens
+   * and not before, which is what a table built out of a computation has to
+   * be: formatting a thousand points into strings on every render, for a
+   * button nobody may press, is a page that stutters while it is used.
+   */
+  rows: TableRows | (() => TableRows);
+  /**
+   * Text of the button. Left out for an icon-only button, which is what a
+   * dense toolbar over a table wants.
+   * @default undefined — the button is reduced to its icon
+   */
+  text?: string;
+  /**
+   * Glyph on the button.
+   * @default 'th'
+   */
+  icon?: IconName;
+  /**
+   * Whether the button drops its background, for a toolbar or a card header.
+   * @default true
+   */
+  minimal?: boolean;
+  /**
+   * Whether the button is the small size.
+   * @default false
+   */
+  small?: boolean;
+  /**
+   * What the pointer and a screen reader are told. The dialog's own `title`
+   * names the table — `Titration curve as a table` — while this names the
+   * affordance, and the two are deliberately not the same string: the heading
+   * is the site's to write, the button's name is the family's, so the control
+   * reads the same on every tool a visitor opens that week.
+   * @default the chrome's own line, in the language of the page
+   */
+  tooltip?: string;
+  /**
+   * Whether there is nothing to hand over. A table that has not been computed
+   * yet says so by being greyed rather than by opening an empty dialog.
+   * @default whether there are no rows — and `false` where `rows` is a
+   * function, which is not called to find out
+   */
+  disabled?: boolean;
+  /**
+   * Class the button carries, so a site can reach it from its stylesheet — a
+   * terminal whose green the chrome's muted grey is unreadable against, a
+   * toolbar with its own metrics.
+   * @default undefined
+   */
+  buttonClassName?: string;
+  /**
+   * Value of the `data-testid` attribute of the button.
+   * @default undefined
+   */
+  testId?: string;
+  /**
+   * The control in place of the Blueprint button, for a page whose chrome is
+   * not Blueprint's — a `react-science` toolbar, a site's own toolbar button.
+   * It is handed the function that opens the dialog.
+   *
+   * It exists so the dialog, the separator, the copy, the save and the wording
+   * are shared even where the button cannot be: a site that keeps its own
+   * trigger should not also be keeping its own dialog.
+   * @default a Blueprint button carrying the glyph and the text
+   */
+  trigger?: (open: () => void) => ReactNode;
+}
+
+/**
+ * The one control that takes a table off the page: copy it, or save it.
+ *
+ * It is a button and a dialog together rather than a dialog a site has to hold
+ * open itself, because the state behind it is the same three lines in every
+ * site and because the wording is not a site's to choose. An audit in
+ * September 2026 found the same affordance spelled `Export as TSV` on one
+ * site, `Copy as TSV` on another and `Copy or download data` on a third, which
+ * reads as three different features to anybody who uses two of our tools in a
+ * week.
+ *
+ * It is also deliberately not named after a separator. The dialog behind it
+ * writes tab-, comma- or semicolon-separated text, so a button that says TSV
+ * is wrong two times out of three — and a reader looking for CSV concludes the
+ * tool cannot give it to them.
+ * @param props - See {@link TableDataButtonProps}.
+ * @returns The button and its dialog.
+ */
+export function TableDataButton(props: TableDataButtonProps): ReactElement {
+  const {
+    rows,
+    text,
+    icon = 'th',
+    minimal = true,
+    small = false,
+    tooltip,
+    disabled,
+    testId,
+    trigger,
+    buttonClassName,
+    ...dialog
+  } = props;
+  const t = useChromeT();
+  // The cells are held rather than read on every render, so a `rows` function
+  // is called once per opening and the closed button costs nothing at all.
+  const [shown, setShown] = useState<TableRows | null>(null);
+
+  const told = tooltip ?? t('delimited.copyOrDownload');
+  const nothing =
+    disabled ?? (typeof rows === 'function' ? false : rows.length === 0);
+
+  function show(): void {
+    setShown(typeof rows === 'function' ? rows() : rows);
+  }
+
+  return (
+    <>
+      {trigger ? (
+        trigger(show)
+      ) : (
+        <Button
+          className={buttonClassName}
+          icon={icon}
+          text={text}
+          variant={minimal ? 'minimal' : 'solid'}
+          size={small ? 'small' : 'medium'}
+          disabled={nothing}
+          title={told}
+          aria-label={text ?? told}
+          data-testid={testId}
+          onClick={show}
+        />
+      )}
+      <DelimitedTextDialog
+        {...dialog}
+        rows={shown ?? EMPTY}
+        isOpen={shown !== null}
+        onClose={() => setShown(null)}
+      />
+    </>
+  );
+}

package/src/delimited/ui/index.ts

@@ -2,3 +2,5 @@ export type { DelimitedTextDialogProps } from './DelimitedTextDialog.tsx';
 export { DelimitedTextDialog } from './DelimitedTextDialog.tsx';
 export type { DelimitedTextPanelProps } from './DelimitedTextPanel.tsx';
 export { DelimitedTextPanel } from './DelimitedTextPanel.tsx';
+export type { TableDataButtonProps } from './TableDataButton.tsx';
+export { TableDataButton } from './TableDataButton.tsx';

package/src/i18n/core/chromeCatalog.ts

@@ -19,7 +19,7 @@ export type ChromeKey = keyof typeof en;
 
 /**
  * The chrome's messages. English is part of the page because it is what a
- * missing message falls back to; the other three arrive as a chunk of their
+ * missing message falls back to; every other language arrives as a chunk of its
  * own, so a site read only in English downloads none of them.
  */
 export const CHROME_CATALOG = new MessageCatalog<ChromeKey>({
@@ -27,9 +27,15 @@ export const CHROME_CATALOG = new MessageCatalog<ChromeKey>({
   repository: 'cheminfo/react-cheminfo',
   directory: 'src/locales',
   source: en,
+  // No `with { type: 'json' }` on these: Vite turns a JSON file into a real
+  // JavaScript module, and the attribute makes the browser refuse the chunk it
+  // serves for being `text/javascript` — the chrome then stays in English with
+  // nothing failing at build or type-check time. The English import above is
+  // static, so the bundler resolves it before a browser ever sees it.
   translations: {
-    fr: () => import('../../locales/fr.json', { with: { type: 'json' } }),
-    de: () => import('../../locales/de.json', { with: { type: 'json' } }),
-    es: () => import('../../locales/es.json', { with: { type: 'json' } }),
+    fr: () => import('../../locales/fr.json'),
+    de: () => import('../../locales/de.json'),
+    es: () => import('../../locales/es.json'),
+    it: () => import('../../locales/it.json'),
   },
 });

package/src/i18n/core/index.ts

@@ -15,6 +15,8 @@ export type {
 } from './messageCatalog.ts';
 export { MessageCatalog } from './messageCatalog.ts';
 export type { MessageValues } from './messageValues.ts';
+export type { ProsePiece } from './prose.ts';
+export { splitProse } from './prose.ts';
 export type { MessageSession } from './session.ts';
 export {
   messageSession,