react-cheminfo 0.50.0 → 0.52.0

package/src/periodic/ui/BlockStrip.tsx

@@ -0,0 +1,81 @@
+/**
+ * The s, d, p and f labels, set in the cells no element occupies.
+ */
+
+import type { CSSProperties, MouseEvent, ReactElement } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+import type { ElementRange } from '../core/layout.ts';
+import { BLOCK_LABELS } from '../core/layout.ts';
+
+import { headerButtonStyle, headerStyle } from './headerStyles.ts';
+import { ofWidth } from './unit.ts';
+
+/** What {@link BlockStrip} needs. */
+interface BlockStripProps {
+  /** Called with the block whose label was clicked. */
+  onSelectRange: (range: ElementRange) => void;
+}
+
+/**
+ * A thin rule under each block with its letter on it, so the four blocks are a
+ * click each, like a period or a group, without a toolbar repeating the table.
+ * The f label stands beside the two rows it names, its rule running down them.
+ * @param props - See {@link BlockStripProps}.
+ * @returns One button per block, placed on the grid with the header offset.
+ */
+export function BlockStrip(props: BlockStripProps): ReactElement {
+  const { onSelectRange } = props;
+  const t = useChromeT();
+  return (
+    <>
+      {BLOCK_LABELS.map(({ block, cell, columnSpan, rowSpan }) => {
+        const title = t('periodic.block', { block });
+        const vertical = rowSpan > 1;
+        return (
+          <button
+            key={block}
+            type="button"
+            aria-label={title}
+            title={title}
+            data-block={block}
+            onClick={(event: MouseEvent) => {
+              onSelectRange({
+                kind: 'block',
+                value: block,
+                additive: event.metaKey || event.ctrlKey,
+              });
+            }}
+            style={{
+              ...headerStyle,
+              ...headerButtonStyle,
+              gridColumn: `${String(cell.column + 1)} / span ${String(columnSpan)}`,
+              gridRow: `${String(cell.row + 1)} / span ${String(rowSpan)}`,
+              justifyContent: vertical ? 'flex-end' : 'center',
+              gap: '0.3em',
+              // Quieter than the period and group numbers: a block is a
+              // shortcut found on hover, not a label the table is read by.
+              color: TOKEN.textFaint,
+              fontSize: `max(0.4rem, ${ofWidth(1.05)})`,
+            }}
+          >
+            {vertical ? null : <span style={horizontalRuleStyle} />}
+            <span>{block}</span>
+            <span style={vertical ? verticalRuleStyle : horizontalRuleStyle} />
+          </button>
+        );
+      })}
+    </>
+  );
+}
+
+const horizontalRuleStyle = {
+  borderTop: `1px solid ${TOKEN.border}`,
+  flex: '1 1 0',
+} as const satisfies CSSProperties;
+
+const verticalRuleStyle = {
+  alignSelf: 'stretch',
+  borderLeft: `1px solid ${TOKEN.border}`,
+} as const satisfies CSSProperties;

package/src/periodic/ui/ElementCell.tsx

@@ -170,14 +170,15 @@ export function ElementCell(props: ElementCellProps): ReactElement {
         background: swatch.background,
         color: swatch.foreground,
         opacity: isIncluded ? 1 : 0.28,
-        // An outline rather than a fill: a table coloured by a property must
-        // keep saying what the value is while a cell is selected.
-        outlineStyle: isSelected ? 'solid' : 'none',
-        outlineColor: swatch.foreground,
-        // Thick enough to be seen from the back of a room, and drawn inside
-        // the cell so a neighbour never covers it.
-        outlineWidth: `max(2px, ${ofWidth(0.3)})`,
-        outlineOffset: `max(-3px, ${ofWidth(-0.4)})`,
+        // A ring rather than a fill: a table coloured by a property must keep
+        // saying what the value is while a cell is selected. Drawn as an inset
+        // shadow, never an outline: a click focuses the cell, and a site's
+        // focus-ring reset (`outline: none !important`) would erase it.
+        // Thick enough to be seen from the back of a room, and inside the cell
+        // so a neighbour never covers it.
+        boxShadow: isSelected
+          ? `inset 0 0 0 max(2px, ${ofWidth(0.3)}) ${swatch.foreground}`
+          : undefined,
         // The cell the pointer is on, for a class following a demonstration.
         filter: isHovered ? 'brightness(1.08)' : undefined,
       }}

package/src/periodic/ui/PeriodicTable.tsx

@@ -21,6 +21,7 @@ import type { PeriodicElement } from '../core/elements.ts';
 import type { ElementPick } from '../core/layout.ts';
 import { elementByArrowKey, placedElements } from '../core/layout.ts';
 
+import { BlockStrip } from './BlockStrip.tsx';
 import { CategoryLegend } from './CategoryLegend.tsx';
 import { ElementCell } from './ElementCell.tsx';
 import {
@@ -69,6 +70,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   const gridRef = useRef<HTMLDivElement>(null);
   const cameFromKeyRef = useRef(false);
   const offset = headers ? 1 : 0;
+  const blocks = headers && onSelectRange !== undefined;
 
   // The drawing is read off this one number, so it is written straight onto
   // the element rather than held as state: a window being dragged would
@@ -132,7 +134,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
         role="grid"
         aria-label={t('periodic.table')}
         data-testid="periodic-table"
-        style={gridStyle(headers)}
+        style={gridStyle(headers, blocks)}
         onKeyDown={handleKeyDown}
       >
         {headers ? (
@@ -141,6 +143,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
             onSelectAll={onSelectAll}
           />
         ) : null}
+        {blocks ? <BlockStrip onSelectRange={onSelectRange} /> : null}
         {inset === undefined ? null : (
           <div style={insetStyle(offset)}>{inset}</div>
         )}

package/src/periodic/ui/PeriodicTableHelp.tsx

@@ -0,0 +1,205 @@
+/**
+ * What the clicks on a periodic table do, behind one question mark.
+ *
+ * The table picks by row, by column, by block and by element, and the corner
+ * that takes everything back only shows itself when pointed at. None of that is
+ * written on the table, so the gestures are listed here, one to a line, the way
+ * the 3D viewer lists its own.
+ */
+
+import { Classes } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+
+import { HelpTooltip } from '../../help/ui/HelpTooltip.tsx';
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { OverlayIconButton } from '../../overlay/ui/OverlayIconButton.tsx';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+
+/** What {@link PeriodicTableHelp} needs. */
+export interface PeriodicTableHelpProps {
+  /**
+   * Which side the card opens on.
+   * @default 'bottom'
+   */
+  placement?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+/**
+ * The question mark that explains how to pick elements on the table.
+ *
+ * It is the same button as `FigureDownload`'s, so the two sit side by side in a
+ * row of controls at one size and one ink.
+ * @param props - See {@link PeriodicTableHelpProps}.
+ * @returns The glyph, with its card.
+ */
+export function PeriodicTableHelp(props: PeriodicTableHelpProps): ReactElement {
+  const { placement = 'bottom' } = props;
+  const t = useChromeT();
+  const title = t('periodic.help.title');
+
+  return (
+    <HelpTooltip
+      content={{ title, body: <PeriodicTableGestures /> }}
+      placement={placement}
+      width={CARD_WIDTH}
+      popoverClassName="help-tooltip--wide"
+    >
+      <OverlayIconButton
+        icon="help"
+        label={title}
+        untitled
+        testId="periodic-table-help"
+      />
+    </HelpTooltip>
+  );
+}
+
+/** One thing on the table, and what a plain and a modified click on it do. */
+interface Target {
+  /** What is clicked; absent for the arrow keys, which are drawn as caps. */
+  name?: ChromeKey;
+  /** Keys drawn instead of a name. */
+  keys?: readonly string[];
+  click: ChromeKey;
+  /** What Cmd or Ctrl and a click does; absent when it does nothing more. */
+  modClick?: ChromeKey;
+}
+
+const TARGETS: readonly Target[] = [
+  {
+    name: 'periodic.help.element',
+    click: 'periodic.help.elementClick',
+    modClick: 'periodic.help.elementMod',
+  },
+  {
+    name: 'periodic.help.number',
+    click: 'periodic.help.numberClick',
+    modClick: 'periodic.help.runMod',
+  },
+  {
+    name: 'periodic.help.block',
+    click: 'periodic.help.blockClick',
+    modClick: 'periodic.help.runMod',
+  },
+  { name: 'periodic.help.corner', click: 'periodic.help.cornerClick' },
+  { keys: ['←', '↑', '→', '↓'], click: 'periodic.help.arrowsClick' },
+];
+
+/**
+ * The gestures the table answers to: what is clicked, then what a plain click
+ * and a click with Cmd or Ctrl held each do to it.
+ * @returns The table of gestures, and the line saying what the dimming means.
+ */
+export function PeriodicTableGestures(): ReactElement {
+  const t = useChromeT();
+  const modifier = isMacPlatform() ? '⌘' : t('periodic.help.ctrl');
+
+  return (
+    <div style={LIST_STYLE}>
+      <table style={TABLE_STYLE}>
+        <thead>
+          <tr>
+            <th aria-hidden="true" />
+            <th style={HEAD_STYLE}>{t('periodic.help.click')}</th>
+            <th style={HEAD_STYLE}>
+              <span style={KEYS_STYLE}>
+                <kbd className={Classes.KEY}>{modifier}</kbd>
+                {t('periodic.help.modClick')}
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {TARGETS.map(({ name, keys, click, modClick }) => (
+            <tr key={click} style={ROW_STYLE}>
+              <th scope="row" style={TARGET_STYLE}>
+                {name === undefined ? (
+                  <span style={KEYS_STYLE}>
+                    {keys?.map((key) => (
+                      <kbd key={key} className={Classes.KEY}>
+                        {key}
+                      </kbd>
+                    ))}
+                  </span>
+                ) : (
+                  t(name)
+                )}
+              </th>
+              <td style={CELL_STYLE}>{t(click)}</td>
+              <td style={CELL_STYLE}>
+                {modClick === undefined ? (
+                  <span className={Classes.TEXT_DISABLED}>—</span>
+                ) : (
+                  t(modClick)
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <p className={Classes.TEXT_MUTED} style={NOTE_STYLE}>
+        {t('periodic.help.note')}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Whether the page runs on a Mac.
+ * @returns True there, where the table reads ⌘ rather than Ctrl.
+ */
+function isMacPlatform(): boolean {
+  return typeof navigator !== 'undefined' && navigator.platform.includes('Mac');
+}
+
+/** The wide card's measure, less its padding. */
+const CARD_WIDTH = 436;
+
+const LIST_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  marginTop: 4,
+} as const satisfies CSSProperties;
+
+const TABLE_STYLE = {
+  borderCollapse: 'collapse',
+  width: '100%',
+} as const satisfies CSSProperties;
+
+const HEAD_STYLE = {
+  color: TOKEN.textMuted,
+  fontSize: 11.5,
+  fontWeight: 600,
+  padding: '0 8px 6px',
+  textAlign: 'left',
+  whiteSpace: 'nowrap',
+} as const satisfies CSSProperties;
+
+const ROW_STYLE = {
+  borderTop: `1px solid ${TOKEN.border}`,
+} as const satisfies CSSProperties;
+
+const TARGET_STYLE = {
+  fontWeight: 600,
+  padding: '6px 8px 6px 0',
+  textAlign: 'left',
+  verticalAlign: 'top',
+  width: '34%',
+} as const satisfies CSSProperties;
+
+const CELL_STYLE = {
+  padding: '6px 8px',
+  verticalAlign: 'top',
+  width: '33%',
+} as const satisfies CSSProperties;
+
+const KEYS_STYLE = {
+  alignItems: 'center',
+  display: 'inline-flex',
+  gap: 3,
+  whiteSpace: 'nowrap',
+} as const satisfies CSSProperties;
+
+const NOTE_STYLE = { margin: 0 } as const satisfies CSSProperties;

package/src/periodic/ui/cellStyles.ts

@@ -84,10 +84,11 @@ export const detailStyle = {
 /**
  * The electrons of each shell, innermost at the top, down the right-hand edge
  * of the whole cell: the stack is as tall as the three bands together, which
- * is what lets seven of them be read.
+ * is what lets seven of them be read. It hangs from the top, so the innermost
+ * shell sits at the same height in every cell whatever the period.
  */
 export const shellsStyle = {
-  alignSelf: 'center',
+  alignSelf: 'start',
   gridColumn: 2,
   gridRow: '1 / span 3',
   fontVariantNumeric: 'tabular-nums',

package/src/periodic/ui/index.ts

@@ -4,3 +4,8 @@ export type { ElementCellProps } from './ElementCell.tsx';
 export { ElementCell } from './ElementCell.tsx';
 export type { PeriodicTableProps } from './PeriodicTable.tsx';
 export { PeriodicTable } from './PeriodicTable.tsx';
+export type { PeriodicTableHelpProps } from './PeriodicTableHelp.tsx';
+export {
+  PeriodicTableGestures,
+  PeriodicTableHelp,
+} from './PeriodicTableHelp.tsx';

package/src/periodic/ui/periodicTableProps.ts

@@ -72,10 +72,11 @@ export interface PeriodicTableProps {
    */
   headers?: boolean;
   /**
-   * Called when a whole group or period header is clicked. The run says
-   * whether the click was additive — Cmd or Ctrl held — so a tool can let a
-   * reader put two periods on one chart. Without it the strips are labels
-   * rather than buttons.
+   * Called when a whole group or period header is clicked, or one of the block
+   * labels the gap under period 7 then carries. The run says whether the click
+   * was additive — Cmd or Ctrl held — so a tool can let a reader put two
+   * periods on one chart. Without it the strips are labels rather than
+   * buttons, and the blocks are not named.
    * @default undefined
    */
   onSelectRange?: (range: ElementRange) => void;

package/src/periodic/ui/tableLayout.ts

@@ -51,6 +51,9 @@ const ROW_HEIGHT = ofWidth(ROW_SHARE);
 /** The band the two inner-transition series were lifted out across. */
 const SERIES_GAP = `max(6px, ${ofWidth(1.1)})`;
 
+/** The height of a header strip, and of the gap once it carries block labels. */
+const STRIP_HEIGHT = `max(12px, ${ofWidth(2)})`;
+
 export const rootStyle = {
   display: 'flex',
   flexDirection: 'column',
@@ -76,11 +79,14 @@ const baseGridStyle = {
  * The grid the cells are placed on.
  * @param headers - Whether a leading column and row hold the period and group
  * numbers.
+ * @param blocks - Whether the gap under period 7 names the blocks, which needs
+ * it as tall as a header strip.
  * @returns The style of the grid.
  */
-export function gridStyle(headers: boolean): CSSProperties {
+export function gridStyle(headers: boolean, blocks = false): CSSProperties {
   // The eighth row is the gap the inner-transition series are lifted out into.
-  const rows = `repeat(7, ${ROW_HEIGHT}) ${SERIES_GAP} repeat(2, ${ROW_HEIGHT})`;
+  const gap = blocks ? STRIP_HEIGHT : SERIES_GAP;
+  const rows = `repeat(7, ${ROW_HEIGHT}) ${gap} repeat(2, ${ROW_HEIGHT})`;
   if (!headers) {
     return {
       ...baseGridStyle,
@@ -91,6 +97,6 @@ export function gridStyle(headers: boolean): CSSProperties {
   return {
     ...baseGridStyle,
     gridTemplateColumns: `max(14px, ${ofWidth(2.4)}) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-    gridTemplateRows: `max(12px, ${ofWidth(2)}) ${rows}`,
+    gridTemplateRows: `${STRIP_HEIGHT} ${rows}`,
   };
 }

package/src/share/ui/ShareDialogContent.tsx

@@ -1,9 +1,8 @@
-import { Button, DialogFooter } from '@blueprintjs/core';
+import { DialogFooter } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement } from 'react';
 import { useRef, useState } from 'react';
 
 import { useContainerSize } from '../../hooks/ui/useContainerSize.ts';
-import { useChromeT } from '../../i18n/ui/useT.ts';
 import type {
   HideablePart,
   ShareConfig,
@@ -44,8 +43,9 @@ export type ShareDialogContentProps<
 > = Omit<ShareDialogProps<Codecs>, 'isOpen' | 'usePortal'>;
 
 /**
- * The share dialog's body: what one does with the link above, never scrolled
- * away, then the options on the left and the page they write on the right.
+ * The share dialog's body: the options on the left and the page they write on
+ * the right, and what one does with the link in the footer, never scrolled
+ * away. A copy closes the dialog, since it was what the dialog was opened for.
  * @param props - What the site's links can say, how the page is named, and the extra section.
  * @returns The body and the footer of the dialog.
  */
@@ -66,7 +66,6 @@ export function ShareDialogContent<
     partDescriptions = 'inline',
     children,
   } = props;
-  const t = useChromeT();
 
   const address = globalThis.location;
   const base = baseUrl ?? address?.href ?? '';
@@ -165,16 +164,15 @@ export function ShareDialogContent<
   return (
     <>
       <div className="share-dialog__body" ref={body}>
-        <div className="share-dialog__top">
-          {presets.length === 0 ? null : (
+        {presets.length === 0 ? null : (
+          <div className="share-dialog__top">
             <SharePresetTabs
               presets={presets}
               selected={presetKey}
               onSelect={selectPreset}
             />
-          )}
-          <ShareLinkBar url={url} frame={frame} />
-        </div>
+          </div>
+        )}
 
         <SharePanes
           options={optionsPane}
@@ -183,9 +181,7 @@ export function ShareDialogContent<
         />
       </div>
       <DialogFooter
-        actions={
-          <Button intent="primary" text={t('share.done')} onClick={onClose} />
-        }
+        actions={<ShareLinkBar url={url} frame={frame} onCopied={onClose} />}
       />
     </>
   );

package/src/share/ui/ShareLinkBar.tsx

@@ -10,12 +10,18 @@ export interface ShareLinkBarProps {
   url: string;
   /** The markup that frames the page in someone else's site. */
   frame: string;
+  /**
+   * Called once either copy has landed on the clipboard.
+   * @default undefined
+   */
+  onCopied?: () => void;
 }
 
 /**
- * The three things one does with a share link, kept above the options and
+ * The three things one does with a share link, in the dialog's footer and
  * never scrolled away: a dialog whose Copy button is below the fold is a dialog
- * one scrolls through every single time.
+ * one scrolls through every single time. A copy is what the dialog was opened
+ * for, so the dialog is told when one lands and closes on it.
  *
  * Neither the address nor the frame markup is printed. A teacher reads neither
  * before pasting it, and a hundred characters of query string set in monospace
@@ -25,7 +31,7 @@ export interface ShareLinkBarProps {
  * @returns The bar.
  */
 export function ShareLinkBar(props: ShareLinkBarProps): ReactElement {
-  const { url, frame } = props;
+  const { url, frame, onCopied } = props;
   const t = useChromeT();
 
   return (
@@ -36,7 +42,12 @@ export function ShareLinkBar(props: ShareLinkBarProps): ReactElement {
           body: t('share.copyLinkHelp'),
         }}
       >
-        <CopyButton content={url} label={t('share.copyLink')} title="" />
+        <CopyButton
+          content={url}
+          label={t('share.copyLink')}
+          title=""
+          onCopied={onCopied}
+        />
       </HelpTooltip>
       <HelpTooltip
         content={{
@@ -63,6 +74,7 @@ export function ShareLinkBar(props: ShareLinkBarProps): ReactElement {
           icon="code"
           label={t('share.copyIframe')}
           title=""
+          onCopied={onCopied}
         />
       </HelpTooltip>
     </div>

package/src/share/ui/SharePreview.tsx

@@ -20,7 +20,7 @@ import {
 import { SharePreviewDevices } from './SharePreviewDevices.tsx';
 
 /** Room the window's own bar takes, which the page is not scaled into. */
-const CHROME_HEIGHT = 26;
+const CHROME_HEIGHT = 31;
 
 /** How often the framed page is asked again while it has answered nothing. */
 const ASK_INTERVAL = 300;
@@ -148,7 +148,11 @@ export function SharePreview(props: SharePreviewProps): ReactElement {
           style={{ width: page.width * scale }}
         >
           <div className="share-preview__chrome">
-            <Icon icon="eye-open" size={11} />
+            <span className="share-preview__lights" aria-hidden="true">
+              <span />
+              <span />
+              <span />
+            </span>
             <span className="share-preview__address">
               {sharePreviewAddress(url)}
             </span>

package/src/structure/ui/StructurePicturePane.tsx

@@ -3,7 +3,7 @@ import type { Molecule } from 'openchemlib';
 import type { CSSProperties, ReactElement } from 'react';
 import { useMemo, useState } from 'react';
 
-import { writeImageToClipboard } from '../../clipboard/core/copyPng.ts';
+import { copyFigure } from '../../download/core/copyFigure.ts';
 import { downloadBlob } from '../../download/core/downloadBlob.ts';
 import { downloadText } from '../../download/core/downloadText.ts';
 import { figurePng } from '../../download/core/figurePng.ts';
@@ -143,9 +143,9 @@ export function StructurePicturePane(
           onClick={() =>
             // Safari only allows a clipboard write the click itself started,
             // so the image is handed over as a promise rather than awaited
-            // first — see `writeImageToClipboard`.
+            // first — see `copyFigure`.
             void run(async () =>
-              (await writeImageToClipboard(png()))
+              (await copyFigure(png())) === 'copied'
                 ? t('download.hintCopied', {
                     pixels: formatFigurePixels(picture),
                   })