react-cheminfo 0.25.0 → 0.27.0

package/src/molecule3d/ui/Molecule3DOptions.tsx

@@ -8,6 +8,7 @@ import { SegmentedControl, Slider } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 
 import { formatDecimal } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { Molecule3DSettings } from '../core/settings.ts';
 import {
   MOLECULE_3D_RANGES,
@@ -33,6 +34,7 @@ export interface Molecule3DOptionsProps {
  */
 export function Molecule3DOptions(props: Molecule3DOptionsProps): ReactElement {
   const { settings, onChange, polarSurfaceArea } = props;
+  const t = useChromeT();
 
   return (
     <div style={PANEL_STYLE}>
@@ -40,7 +42,13 @@ export function Molecule3DOptions(props: Molecule3DOptionsProps): ReactElement {
         fill
         size="small"
         intent="primary"
-        options={REPRESENTATION_OPTIONS}
+        options={REPRESENTATIONS.map((representation) => ({
+          value: representation,
+          label: t.or(
+            `molecule3d.representation.${representation}`,
+            REPRESENTATION_LABELS[representation],
+          ),
+        }))}
         value={settings.representation}
         onValueChange={(value) => {
           if (isRepresentationId(value)) {
@@ -50,7 +58,7 @@ export function Molecule3DOptions(props: Molecule3DOptionsProps): ReactElement {
       />
       <div style={GRID_STYLE}>
         <SliderRow
-          label="Size"
+          label={t('molecule3d.size')}
           range={MOLECULE_3D_RANGES.sizeFactor}
           digits={1}
           value={settings.sizeFactor}
@@ -60,7 +68,7 @@ export function Molecule3DOptions(props: Molecule3DOptionsProps): ReactElement {
           }}
         />
         <SliderRow
-          label="Surface opacity"
+          label={t('molecule3d.surfaceOpacity')}
           range={MOLECULE_3D_RANGES.surfaceAlpha}
           digits={2}
           value={settings.surfaceAlpha}
@@ -71,8 +79,8 @@ export function Molecule3DOptions(props: Molecule3DOptionsProps): ReactElement {
           }}
         />
         <SliderRow
-          label="Solvent probe [Å]"
-          title={PROBE_HELP}
+          label={t('molecule3d.solventProbe')}
+          title={t('molecule3d.solventProbeHelp')}
           range={MOLECULE_3D_RANGES.probeRadius}
           digits={1}
           value={settings.probeRadius}
@@ -132,14 +140,6 @@ function SliderRow(props: SliderRowProps): ReactElement {
   );
 }
 
-const REPRESENTATION_OPTIONS = REPRESENTATIONS.map((representation) => ({
-  value: representation,
-  label: REPRESENTATION_LABELS[representation],
-}));
-
-const PROBE_HELP =
-  'Radius of the solvent sphere rolled over the atoms. 1.4 Å is a water molecule; a larger probe smooths the surface and closes the narrow pockets.';
-
 const PANEL_STYLE: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',

package/src/molecule3d/ui/Molecule3DSurfaceColors.tsx

@@ -9,6 +9,7 @@ import type { CSSProperties, ReactElement } from 'react';
 import { ColorPickerDropdown } from 'react-science/ui';
 
 import { formatDecimal } from '../../format/core/numbers.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { Molecule3DSettings } from '../core/settings.ts';
 import {
   SURFACE_CHARGE_COLORS,
@@ -34,17 +35,24 @@ export function Molecule3DSurfaceColors(
   props: Molecule3DSurfaceColorsProps,
 ): ReactElement {
   const { settings, onChange, polarSurfaceArea } = props;
+  const t = useChromeT();
   const disabled = !settings.showSurface;
   const { surfaceColoring, surfaceColor } = settings;
 
   return (
     <div style={SECTION_STYLE}>
-      <span style={LABEL_STYLE}>Surface colour</span>
+      <span style={LABEL_STYLE}>{t('molecule3d.surfaceColour')}</span>
       <SegmentedControl
         fill
         size="small"
         disabled={disabled}
-        options={COLORING_OPTIONS}
+        options={SURFACE_COLORINGS.map((coloring) => ({
+          value: coloring,
+          label: t.or(
+            `molecule3d.coloring.${coloring}`,
+            SURFACE_COLORING_LABELS[coloring],
+          ),
+        }))}
         value={surfaceColoring}
         onValueChange={(value) => {
           if (isSurfaceColoringId(value)) {
@@ -54,7 +62,7 @@ export function Molecule3DSurfaceColors(
       />
       {surfaceColoring === 'uniform' && (
         <span style={ROW_STYLE}>
-          <span style={LABEL_STYLE}>Colour</span>
+          <span style={LABEL_STYLE}>{t('molecule3d.colour')}</span>
           {disabled ? (
             <span style={{ ...SWATCH_STYLE, background: surfaceColor }} />
           ) : (
@@ -76,11 +84,14 @@ export function Molecule3DSurfaceColors(
           <span style={ROW_STYLE} data-testid="molecule3d-polarity-legend">
             <LegendItem color={SURFACE_CHARGE_COLORS.positive} label="δ+" />
             <LegendItem color={SURFACE_CHARGE_COLORS.negative} label="δ−" />
-            <LegendItem color={SURFACE_CHARGE_COLORS.neutral} label="neutral" />
+            <LegendItem
+              color={SURFACE_CHARGE_COLORS.neutral}
+              label={t('molecule3d.neutral')}
+            />
           </span>
           <span
             style={LABEL_STYLE}
-            title={TPSA_HELP}
+            title={t('molecule3d.tpsaHelp')}
             data-testid="molecule3d-tpsa-value"
           >
             TPSA:{' '}
@@ -103,14 +114,6 @@ function LegendItem(props: { color: string; label: string }): ReactElement {
   );
 }
 
-const COLORING_OPTIONS = SURFACE_COLORINGS.map((coloring) => ({
-  value: coloring,
-  label: SURFACE_COLORING_LABELS[coloring],
-}));
-
-const TPSA_HELP =
-  'Topological polar surface area (Ertl): the area contributed by nitrogen, oxygen and their hydrogens, computed from the structure by openchemlib. It does not depend on the conformer or the probe.';
-
 const SECTION_STYLE: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',

package/src/molecule3d/ui/Molecule3DToolbar.tsx

@@ -9,6 +9,7 @@ import { Card } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 import { Toolbar } from 'react-science/ui';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { MeasurementKind } from '../core/measurement.ts';
 import {
   MEASUREMENT_ATOM_COUNTS,
@@ -62,6 +63,7 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
     options,
     exportPanel,
   } = props;
+  const t = useChromeT();
   const hasView =
     tools.spin ||
     tools.surface ||
@@ -74,12 +76,12 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
     <div style={COLUMN_STYLE}>
       {hasView && (
         <Card elevation={1} style={CARD_STYLE}>
-          <Toolbar vertical aria-label="View">
+          <Toolbar vertical aria-label={t('molecule3d.view')}>
             {tools.reset && (
               <Toolbar.Item
                 icon="zoom-to-fit"
-                aria-label="Reset view"
-                tooltip="Reset view"
+                aria-label={t('molecule3d.resetView')}
+                tooltip={t('molecule3d.resetView')}
                 tooltipProps={TOOLTIP_PROPS}
                 onClick={onResetView}
               />
@@ -88,8 +90,8 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
               <Toolbar.Item
                 icon="refresh"
                 active={spinning}
-                aria-label="Spin"
-                tooltip="Spin"
+                aria-label={t('molecule3d.spin')}
+                tooltip={t('molecule3d.spin')}
                 tooltipProps={TOOLTIP_PROPS}
                 onClick={() => {
                   onSpinningChange(!spinning);
@@ -100,8 +102,8 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
               <Toolbar.Item
                 icon={<SurfaceIcon />}
                 active={showSurface}
-                aria-label="Surface"
-                tooltip="Molecular surface"
+                aria-label={t('molecule3d.surface')}
+                tooltip={t('molecule3d.molecularSurface')}
                 tooltipProps={TOOLTIP_PROPS}
                 onClick={() => {
                   onShowSurfaceChange(!showSurface);
@@ -114,8 +116,8 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
                 content={options}
                 itemProps={{
                   icon: 'cog',
-                  'aria-label': 'Display options',
-                  tooltip: 'Display options',
+                  'aria-label': t('molecule3d.displayOptions'),
+                  tooltip: t('molecule3d.displayOptions'),
                   tooltipProps: TOOLTIP_PROPS,
                 }}
               />
@@ -126,8 +128,8 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
                 content={exportPanel}
                 itemProps={{
                   icon: 'download',
-                  'aria-label': 'Export image',
-                  tooltip: 'Export image',
+                  'aria-label': t('molecule3d.exportImage'),
+                  tooltip: t('molecule3d.exportImage'),
                   tooltipProps: TOOLTIP_PROPS,
                 }}
               />
@@ -138,8 +140,8 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
                 content={<Molecule3DHelp />}
                 itemProps={{
                   icon: 'help',
-                  'aria-label': 'Mouse and keyboard',
-                  tooltip: 'Mouse and keyboard',
+                  'aria-label': t('structure.mouseAndKeyboard'),
+                  tooltip: t('structure.mouseAndKeyboard'),
                   tooltipProps: TOOLTIP_PROPS,
                 }}
               />
@@ -149,14 +151,23 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
       )}
       {tools.measure && (
         <Card elevation={1} style={CARD_STYLE}>
-          <Toolbar vertical aria-label="Measure">
+          <Toolbar vertical aria-label={t('molecule3d.measure')}>
             {MEASUREMENT_KINDS.map((kind) => (
               <Toolbar.Item
                 key={kind}
                 icon={<MeasureIcon kind={kind} />}
                 active={measureKind === kind}
-                aria-label={MEASUREMENT_LABELS[kind]}
-                tooltip={`${MEASUREMENT_LABELS[kind]}: click ${MEASUREMENT_ATOM_COUNTS[kind]} atoms`}
+                aria-label={t.or(
+                  `molecule3d.measurement.${kind}`,
+                  MEASUREMENT_LABELS[kind],
+                )}
+                tooltip={t('molecule3d.measurementTooltip', {
+                  what: t.or(
+                    `molecule3d.measurement.${kind}`,
+                    MEASUREMENT_LABELS[kind],
+                  ),
+                  atoms: MEASUREMENT_ATOM_COUNTS[kind],
+                })}
                 tooltipProps={TOOLTIP_PROPS}
                 onClick={() => {
                   onMeasureKindChange(measureKind === kind ? null : kind);
@@ -166,8 +177,8 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
             <Toolbar.Item
               icon={<ClearMeasurementsIcon />}
               disabled={measurementCount === 0}
-              aria-label="Remove all measurements"
-              tooltip="Remove all measurements"
+              aria-label={t('molecule3d.clearMeasurements')}
+              tooltip={t('molecule3d.clearMeasurements')}
               tooltipProps={TOOLTIP_PROPS}
               onClick={onClearMeasurements}
             />

package/src/molecule3d/ui/MoleculeViewer3D.tsx

@@ -22,6 +22,7 @@ import { Suspense, lazy, useState } from 'react';
 
 // Deep import on purpose: `capability.ts` imports nothing, while the canvas
 // pulls molstar in — which is exactly what this probe exists to avoid.
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { probeViewerCapability } from '../../orbital/ui/capability.ts';
 
 import type { MoleculeViewer3DProps } from './moleculeViewer3DProps.ts';
@@ -37,29 +38,33 @@ const MoleculeCanvas3D = lazy(async () => {
  * @returns The viewer, or an explanation of why this machine cannot show one.
  */
 export function MoleculeViewer3D(props: MoleculeViewer3DProps): ReactElement {
-  const {
-    fallback = 'Loading the 3D viewer…',
-    renderUnsupported,
-    ...canvas
-  } = props;
+  const { fallback, renderUnsupported, ...canvas } = props;
+  const t = useChromeT();
   const [capability] = useState(probeViewerCapability);
   const [failure, setFailure] = useState<string | null>(null);
 
   if (!capability.supported) {
     return (
       <Callout intent="warning" compact>
-        {renderUnsupported?.(capability) ?? capability.message}
+        {renderUnsupported?.(capability) ??
+          t.or(`viewer.capability.${capability.reason}`, capability.message)}
       </Callout>
     );
   }
 
   return (
     <div style={ROOT_STYLE}>
-      <Suspense fallback={<div style={NOTE_STYLE}>{fallback}</div>}>
+      <Suspense
+        fallback={
+          <div style={NOTE_STYLE}>
+            {fallback ?? t('molecule3d.loadingViewer')}
+          </div>
+        }
+      >
         <MoleculeCanvas3D {...canvas} onFailureChange={setFailure} />
       </Suspense>
       {failure !== null && (
-        <Callout intent="danger" compact title="The viewer could not draw this">
+        <Callout intent="danger" compact title={t('molecule3d.couldNotDraw')}>
           {failure}
         </Callout>
       )}

package/src/orbital/ui/AtomicOrbitalCanvas.tsx

@@ -11,6 +11,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import { errorMessage } from '../../error/core/index.ts';
 import { useResizeObserver } from '../../hooks/ui/useResizeObserver.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { ResolutionLimits } from '../core/atomicGrid.ts';
 import type { PhasePalette } from '../core/palette.ts';
@@ -115,6 +116,7 @@ export function AtomicOrbitalCanvas(
     onFailureChange,
   } = props;
 
+  const t = useChromeT();
   const containerRef = useRef<HTMLDivElement>(null);
   const viewerRef = useRef<OrbitalViewer | null>(null);
   const [drawn, setDrawn] = useState<string | null>(null);
@@ -201,7 +203,7 @@ export function AtomicOrbitalCanvas(
 
   return (
     <div ref={containerRef} style={CANVAS_STYLE}>
-      {busy && <div style={BUSY_STYLE}>Sampling…</div>}
+      {busy && <div style={BUSY_STYLE}>{t('orbital.sampling')}</div>}
       <AtomicOrbitalControls
         axes={axes}
         onToggleAxes={() => {

package/src/orbital/ui/AtomicOrbitalControls.tsx

@@ -9,6 +9,7 @@ import type { CSSProperties, ReactElement } from 'react';
 
 import type { HelpContent } from '../../help/ui/HelpBody.tsx';
 import { HelpTooltip } from '../../help/ui/HelpTooltip.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 
 /** Props of {@link AtomicOrbitalControls}. */
 interface AtomicOrbitalControlsProps {
@@ -29,25 +30,35 @@ export function AtomicOrbitalControls(
   props: AtomicOrbitalControlsProps,
 ): ReactElement {
   const { axes, onToggleAxes, onResetView } = props;
+  const t = useChromeT();
+  const axesHelp: HelpContent = {
+    title: t('orbital.axesTitle'),
+    body: t('orbital.axesBody'),
+    example: { code: '3d_yz', note: t('orbital.axesExample') },
+  };
+  const resetHelp: HelpContent = {
+    title: t('orbital.resetTitle'),
+    body: t('orbital.resetBody'),
+  };
   return (
     <div style={CONTROLS_STYLE}>
-      <HelpTooltip content={AXES_HELP} placement="bottom">
+      <HelpTooltip content={axesHelp} placement="bottom">
         <Button
           variant="minimal"
           size="small"
           icon="grid"
           active={axes}
-          aria-label="Show the x, y, z axes"
+          aria-label={t('orbital.showAxes')}
           aria-pressed={axes}
           onClick={onToggleAxes}
         />
       </HelpTooltip>
-      <HelpTooltip content={RESET_HELP} placement="bottom">
+      <HelpTooltip content={resetHelp} placement="bottom">
         <Button
           variant="minimal"
           size="small"
           icon="zoom-to-fit"
-          aria-label="Reset the view"
+          aria-label={t('orbital.resetTitle')}
           onClick={onResetView}
         />
       </HelpTooltip>
@@ -55,22 +66,6 @@ export function AtomicOrbitalControls(
   );
 }
 
-/** What the frame button says it is for. */
-const AXES_HELP: HelpContent = {
-  title: 'Cartesian axes',
-  body: 'Draw x, y and z through the nucleus. The label names an orbital by where its lobes sit against them.',
-  example: {
-    code: '3d_yz',
-    note: 'four lobes between the y and z axes, none on either.',
-  },
-};
-
-/** What the reset button says it is for. */
-const RESET_HELP: HelpContent = {
-  title: 'Reset the view',
-  body: 'Back to the angle and zoom the orbital opened on. A change of orbital keeps whatever view you have turned it to.',
-};
-
 const CONTROLS_STYLE: CSSProperties = {
   position: 'absolute',
   top: 4,

package/src/orbital/ui/AtomicOrbitalViewer.tsx

@@ -19,6 +19,7 @@ import { Callout } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import { Suspense, lazy, useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { ResolutionLimits } from '../core/atomicGrid.ts';
 import type { PhasePalette } from '../core/palette.ts';
@@ -116,34 +117,33 @@ export interface AtomicOrbitalViewerProps {
 export function AtomicOrbitalViewer(
   props: AtomicOrbitalViewerProps,
 ): ReactElement {
-  const {
-    fallback = 'Loading the 3D viewer…',
-    renderUnsupported,
-    className,
-    ...canvas
-  } = props;
+  const { fallback, renderUnsupported, className, ...canvas } = props;
+  const t = useChromeT();
   const [capability] = useState(probeViewerCapability);
   const [failure, setFailure] = useState<string | null>(null);
 
   if (!capability.supported) {
     return (
       <Callout intent="warning" compact className={className}>
-        {renderUnsupported?.(capability) ?? capability.message}
+        {renderUnsupported?.(capability) ??
+          t.or(`viewer.capability.${capability.reason}`, capability.message)}
       </Callout>
     );
   }
 
   return (
     <div className={className} style={ROOT_STYLE}>
-      <Suspense fallback={<div style={NOTE_STYLE}>{fallback}</div>}>
+      <Suspense
+        fallback={
+          <div style={NOTE_STYLE}>
+            {fallback ?? t('molecule3d.loadingViewer')}
+          </div>
+        }
+      >
         <AtomicOrbitalCanvas {...canvas} onFailureChange={setFailure} />
       </Suspense>
       {failure !== null && (
-        <Callout
-          intent="danger"
-          compact
-          title="This orbital could not be drawn"
-        >
+        <Callout intent="danger" compact title={t('orbital.couldNotDraw')}>
           {failure}
         </Callout>
       )}

package/src/orbital/ui/capability.ts

@@ -9,8 +9,14 @@
  * page can ask the question before paying for molstar.
  */
 
+/** Why the machine is in the state it is, as the catalog names it. */
+export type ViewerCapabilityReason =
+  'noWindow' | 'noContext' | 'noFloatTextures' | 'ready';
+
 /** What the machine can do, and what to tell the student. */
 export interface ViewerCapability {
+  /** Which of the four states this is, so the message can be translated. */
+  reason: ViewerCapabilityReason;
   /** A 3D scene can be rendered at all. Everything else is degradation. */
   supported: boolean;
   /**
@@ -29,6 +35,7 @@ export interface ViewerCapability {
 export function probeViewerCapability(): ViewerCapability {
   if (typeof document === 'undefined') {
     return {
+      reason: 'noWindow',
       supported: false,
       gpuOrbitals: false,
       message: 'The 3D viewer needs a browser window.',
@@ -38,6 +45,7 @@ export function probeViewerCapability(): ViewerCapability {
   const probe = getContext(canvas);
   if (probe === null) {
     return {
+      reason: 'noContext',
       supported: false,
       gpuOrbitals: false,
       message:
@@ -48,6 +56,7 @@ export function probeViewerCapability(): ViewerCapability {
   loseContext(probe.context);
   if (!gpuOrbitals) {
     return {
+      reason: 'noFloatTextures',
       supported: true,
       gpuOrbitals: false,
       message:
@@ -55,6 +64,7 @@ export function probeViewerCapability(): ViewerCapability {
     };
   }
   return {
+    reason: 'ready',
     supported: true,
     gpuOrbitals: true,
     message: 'This browser can render the 3D viewer and computed orbitals.',

package/src/overlay/ui/OverlayBar.tsx

@@ -2,6 +2,7 @@ import type { IconName } from '@blueprintjs/core';
 import type { ReactElement, ReactNode } from 'react';
 import { useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { overlayBarFolded } from '../core/overlayCollapse.ts';
 import type { OverlayPlacement } from '../core/overlayPlacement.ts';
 
@@ -59,7 +60,7 @@ export interface OverlayBarProps {
   /**
    * What the group of controls is called, for a reader arriving by tab and for
    * the button the bar folds into.
-   * @default 'Options'
+   * @default the chrome's own word for it, in the language of the page
    */
   label?: string;
   /**
@@ -129,7 +130,9 @@ export interface OverlayBarProps {
 export function OverlayBar(props: OverlayBarProps): ReactElement {
   const { children, end, tools, info, more } = props;
   const { placement = 'top-right' } = props;
-  const { label = 'Options', restingOpacity = OVERLAY_RESTING_OPACITY } = props;
+  const { label, restingOpacity = OVERLAY_RESTING_OPACITY } = props;
+  const t = useChromeT();
+  const name = label ?? t('overlay.options');
   const { collapsed, defaultCollapsed = false } = props;
   const { collapseBelow = 420, moreIcon = 'cog', testId } = props;
   const { morePadded = true } = props;
@@ -151,7 +154,7 @@ export function OverlayBar(props: OverlayBarProps): ReactElement {
         info={info}
         more={more}
         placement={placement}
-        label={label}
+        label={name}
         moreIcon={moreIcon}
         morePadded={morePadded}
         folded={folded}
@@ -169,7 +172,7 @@ export function OverlayBar(props: OverlayBarProps): ReactElement {
       info={info}
       more={more}
       placement={placement}
-      label={label}
+      label={name}
       moreIcon={moreIcon}
       morePadded={morePadded}
       folded={folded}

package/src/overlay/ui/OverlayInfo.tsx

@@ -3,6 +3,7 @@ import { PopoverNext } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import { useState } from 'react';
 
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import type { OverlayMetrics } from '../core/overlayMetrics.ts';
 
 import { OverlayIconButton } from './OverlayIconButton.tsx';
@@ -18,7 +19,7 @@ export interface OverlayInfoProps {
   /**
    * What the glyph is called, for the pointer and for a screen reader. Phrase
    * it as the question the reader has, not as the name of a feature.
-   * @default 'What am I looking at?'
+   * @default the chrome's own line, in the language of the page
    */
   label?: string;
   /**
@@ -49,7 +50,9 @@ export interface OverlayInfoProps {
  * @returns The glyph and its explanation.
  */
 export function OverlayInfo(props: OverlayInfoProps): ReactElement {
-  const { children, label = 'What am I looking at?' } = props;
+  const { children, label } = props;
+  const t = useChromeT();
+  const name = label ?? t('overlay.whatAmILookingAt');
   const { placement = 'bottom-end', testId } = props;
   const { metrics } = useOverlaySurface();
   const [open, setOpen] = useState(false);
@@ -62,7 +65,7 @@ export function OverlayInfo(props: OverlayInfoProps): ReactElement {
     >
       <OverlayIconButton
         icon="help"
-        label={label}
+        label={name}
         active={open}
         testId={testId}
         opensMenu

package/src/overlay/ui/OverlayPanel.tsx

@@ -3,6 +3,7 @@ import { useId, useMemo } from 'react';
 
 import type { HelpContent } from '../../help/ui/HelpBody.tsx';
 import { HelpIcon } from '../../help/ui/HelpIcon.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 
 import type { OverlayAction } from './OverlayAction.tsx';
 import type { OverlayGroup } from './OverlayGroup.tsx';
@@ -40,7 +41,7 @@ export interface OverlayPanelProps {
   onReset?: () => void;
   /**
    * What that way back reads.
-   * @default 'Reset'
+   * @default the chrome's own word for it, in the language of the page
    */
   resetLabel?: string;
   /**
@@ -68,7 +69,7 @@ export interface OverlayPanelProps {
    * the panel says that the dotted names are offering anything, so one
    * sentence says it once. Pass `''` for a panel whose names carry no help at
    * all, where the line would be a promise the panel does not keep.
-   * @default 'Hover a name for what it does.'
+   * @default the chrome's own line, in the language of the page
    */
   hint?: string;
   /**
@@ -101,8 +102,9 @@ export interface OverlayPanelProps {
  * @returns The panel.
  */
 export function OverlayPanel(props: OverlayPanelProps): ReactElement {
-  const { title, children, onReset, resetLabel = 'Reset', help } = props;
-  const { actions, hint = DEFAULT_HINT, nameWidth, testId } = props;
+  const { title, children, onReset, resetLabel, help } = props;
+  const t = useChromeT();
+  const { actions, hint, nameWidth, testId } = props;
   const { metrics } = useOverlaySurface();
   const titleId = useId();
   const reset = useOverlayInteraction();
@@ -134,7 +136,7 @@ export function OverlayPanel(props: OverlayPanelProps): ReactElement {
             onClick={onReset}
             {...reset.handlers}
           >
-            {resetLabel}
+            {resetLabel ?? t('overlay.reset')}
           </button>
         )}
       </div>
@@ -143,7 +145,9 @@ export function OverlayPanel(props: OverlayPanelProps): ReactElement {
           {children}
         </OverlayPanelContext.Provider>
         {hint === '' ? null : (
-          <p style={overlayPanelHintStyle(metrics)}>{hint}</p>
+          <p style={overlayPanelHintStyle(metrics)}>
+            {hint ?? t('overlay.hoverAName')}
+          </p>
         )}
       </div>
       {actions === undefined ? null : (
@@ -160,4 +164,3 @@ export function OverlayPanel(props: OverlayPanelProps): ReactElement {
  * the dotted underlines has already asked this question and one who has not
  * would not recognise a description of them.
  */
-const DEFAULT_HINT = 'Hover a name for what it does.';