react-cheminfo 0.21.0 → 0.22.0

package/lib/error/ui/ErrorFallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorFallback.js","sourceRoot":"","sources":["../../../src/error/ui/ErrorFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA8B1D;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,KAAK,EACL,OAAO,EACP,KAAK,GAAG,sBAAsB,EAC9B,UAAU,GAAG,WAAW,EACxB,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,WAAW,EACT,KAAK,CAAC,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAEhE,MAAM,EACJ,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAClC,KAAC,MAAM,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,CAC9D,GAEH,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ErrorFallback.js","sourceRoot":"","sources":["../../../src/error/ui/ErrorFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA8B1D;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,KAAK,EACL,OAAO,EACP,KAAK,GAAG,sBAAsB,EAC9B,UAAU,GAAG,WAAW,EACxB,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,WAAW,EACT,eAAM,SAAS,EAAC,yBAAyB,YACtC,KAAK,CAAC,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,GAC1D,EAET,MAAM,EACJ,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAClC,KAAC,MAAM,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,CAC9D,GAEH,CACH,CAAC;AACJ,CAAC"}

package/lib/pedagogy/ui/ReferenceSectionBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReferenceSectionBlock.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceSectionBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAKzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIhE,gEAAgE;AAChE,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED,0CAA0C;AAC1C,MAAM,WAAW,gBAAgB;IAC/B,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,gDAAgD;AAChD,MAAM,WAAW,0BAA0B;IACzC,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,0BAA0B,GAChC,YAAY,CAsBd"}
+{"version":3,"file":"ReferenceSectionBlock.d.ts","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceSectionBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAMzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIhE,gEAAgE;AAChE,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED,0CAA0C;AAC1C,MAAM,WAAW,gBAAgB;IAC/B,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,gDAAgD;AAChD,MAAM,WAAW,0BAA0B;IACzC,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,0BAA0B,GAChC,YAAY,CAsBd"}

package/lib/pedagogy/ui/ReferenceSectionBlock.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClickToCopy } from "../../clipboard/ui/ClickToCopy.js";
 import { joinClassNames } from "../../shared/ui/joinClassNames.js";
 import { TOKEN } from "../../tokens/core/familyTokens.js";
 import { SyntaxTooltip } from "./SyntaxTooltip.js";
@@ -19,7 +20,7 @@ export function ReferenceSectionBlock(props) {
 function ReferenceRowLine(props) {
     const { row, width } = props;
     const interactive = row.tooltip !== undefined;
-    const line = (_jsxs("span", { style: interactive ? INTERACTIVE_ROW_STYLE : ROW_STYLE, children: [_jsx("span", { style: syntaxStyle(width, interactive), children: row.syntax }), _jsx("span", { style: DESCRIPTION_STYLE, children: row.description })] }));
+    const line = (_jsxs("span", { style: interactive ? INTERACTIVE_ROW_STYLE : ROW_STYLE, children: [_jsx("span", { style: syntaxStyle(width, interactive), children: _jsx(ClickToCopy, { value: row.syntax, label: "syntax", title: interactive ? '' : undefined, children: row.syntax }) }), _jsx("span", { style: DESCRIPTION_STYLE, children: row.description })] }));
     if (row.tooltip === undefined)
         return line;
     return (_jsx(SyntaxTooltip, { content: row.tooltip, placement: "right", children: line }));

package/lib/pedagogy/ui/ReferenceSectionBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReferenceSectionBlock.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceSectionBlock.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ReferenceSectionBlock.js","sourceRoot":"","sources":["../../../src/pedagogy/ui/ReferenceSectionBlock.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "license": "MIT",
   "description": "React components, hooks and framework-free helpers shared by the cheminfo sites: site chrome, citations, sharing, routing, pedagogy, charts, and the structure, orbital and 3D molecule viewers",
   "author": "Luc Patiny",

package/src/build/vite/gitHead.ts

@@ -29,11 +29,14 @@ export function readGitHead(start: string): string | undefined {
   // itself and neither `refs` nor `packed-refs` is read at all.
   if (!head.startsWith('ref:')) return asCommit(head);
 
+  // A linked worktree keeps only its own `HEAD`: the branch it names lives in
+  // the repository's common directory, which `commondir` points to.
   const ref = head.slice('ref:'.length).trim();
-  const loose = readText(join(gitDir, ref));
+  const commonDir = findCommonDir(gitDir);
+  const loose = readText(join(gitDir, ref)) ?? readText(join(commonDir, ref));
   return (
     asCommit(loose) ??
-    commitInPackedRefs(readText(join(gitDir, 'packed-refs')), ref)
+    commitInPackedRefs(readText(join(commonDir, 'packed-refs')), ref)
   );
 }
 
@@ -74,6 +77,18 @@ export function findGitDir(start: string): string | undefined {
   }
 }
 
+/**
+ * The directory the refs of a repository live in: the `.git` directory itself,
+ * or for a linked worktree the one its `commondir` file names.
+ * @param gitDir - The `.git` directory `HEAD` was read from.
+ * @returns The absolute path of the common directory.
+ */
+function findCommonDir(gitDir: string): string {
+  const pointer = readText(join(gitDir, 'commondir'));
+  if (pointer === undefined || pointer === '') return gitDir;
+  return isAbsolute(pointer) ? pointer : resolve(gitDir, pointer);
+}
+
 /**
  * The hash a packed `refs` file gives a ref.
  * @param packed - The contents of `packed-refs`, when there is one.

package/src/clipboard/ui/ClickToCopy.tsx

@@ -0,0 +1,190 @@
+import { Icon } from '@blueprintjs/core';
+import type {
+  CSSProperties,
+  KeyboardEvent,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+} from 'react';
+
+import { onActivateKey } from '../../hooks/ui/activationKey.ts';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import type { ClipboardContent } from '../core/writeToClipboard.ts';
+import { writeToClipboard } from '../core/writeToClipboard.ts';
+
+import { useCopyToClipboard } from './useCopyToClipboard.ts';
+
+/** The elements a {@link ClickToCopy} can be, so a table cell is its own target. */
+export type ClickToCopyElement = 'span' | 'code' | 'div' | 'td' | 'th';
+
+/** What {@link ClickToCopy} copies, and how it reads. */
+export interface ClickToCopyProps {
+  /**
+   * What goes on the clipboard: text, or text with its HTML rendering. A
+   * function is called only when the value is clicked.
+   */
+  value: ClipboardContent | (() => ClipboardContent);
+  /** What is shown; the pointer turns into the copy cursor over it. */
+  children: ReactNode;
+  /**
+   * What the value is, named in the hover title: `Copy the SMILES (C=CC=O)`.
+   * @default undefined — the title names only the value
+   */
+  label?: string;
+  /**
+   * Hover title, replacing the one built from `label` and the value.
+   * @default undefined
+   */
+  title?: string;
+  /**
+   * The element drawn. A `span` or a `code` sits in a line of text and shows
+   * its glyph past its right edge; a `div`, `td` or `th` keeps room for it
+   * inside. A `td` or `th` keeps its cell role, so a table stays a table to a
+   * screen reader. A list item or a paragraph holds a `span` or a `div`
+   * instead, so it stays a list item or a paragraph.
+   * @default 'span'
+   */
+  as?: ClickToCopyElement;
+  /**
+   * Whether the value is a tab stop and a button of its own, with its glyph.
+   * Off when a copy button beside it already copies the same value, so the
+   * keyboard and a screen reader meet one control, and the eye one glyph.
+   * @default true
+   */
+  focusable?: boolean;
+  /**
+   * Whether there is nothing to copy: the children are drawn as plain content.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Class the element carries, in addition to `click-to-copy`.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Inline style of the element.
+   * @default undefined
+   */
+  style?: CSSProperties;
+}
+
+/** Past this length the value is left out of the title: a molfile is no tooltip. */
+const TITLE_VALUE_MAX = 120;
+
+const INLINE = new Set<ClickToCopyElement>(['span', 'code']);
+const CELLS = new Set<ClickToCopyElement>(['td', 'th']);
+
+/** A control inside the value acts on its own click, which copies nothing. */
+const NESTED_CONTROL =
+  'a[href], button, input, select, textarea, summary, label, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="tab"], [role="menuitem"]';
+
+/**
+ * A value that is copied by clicking it.
+ *
+ * Text in a tool is not selectable — a drag across a viewer must not paint the
+ * page — so what is worth taking away is copied this way instead: the copy
+ * cursor, a tint and a clipboard glyph announce it on hover, a click or `Enter`
+ * puts it on the clipboard, and a tick confirms it. The click stops there, so
+ * a value inside a clickable row copies without also opening the row, and a
+ * link or a button nested in the value keeps its own click.
+ * @param props - See {@link ClickToCopyProps}.
+ * @returns The copyable value.
+ */
+export function ClickToCopy(props: ClickToCopyProps): ReactElement {
+  const {
+    value,
+    children,
+    label,
+    title,
+    as: Element = 'span',
+    focusable = true,
+    disabled = false,
+    className,
+    style,
+  } = props;
+  const { copied, failed, copy } = useCopyToClipboard();
+
+  if (disabled) {
+    return (
+      <Element className={className} style={style}>
+        {children}
+      </Element>
+    );
+  }
+
+  function activate(
+    event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,
+  ): void {
+    if (isOnNestedControl(event)) return;
+    event.stopPropagation();
+    void copy(
+      typeof value === 'function' ? () => writeToClipboard(value()) : value,
+    );
+  }
+
+  const outcome = copied ? 'copied' : failed ? 'failed' : undefined;
+
+  return (
+    <Element
+      className={joinClassNames(
+        'click-to-copy',
+        INLINE.has(Element) ? 'click-to-copy--inline' : 'click-to-copy--block',
+        className,
+      )}
+      style={style}
+      role={focusable && !CELLS.has(Element) ? 'button' : undefined}
+      tabIndex={focusable ? 0 : undefined}
+      title={title ?? copyTitle(value, label)}
+      data-copy={outcome}
+      onClick={activate}
+      onKeyDown={onActivateKey<KeyboardEvent<HTMLElement>>(activate)}
+    >
+      {children}
+      {focusable ? (
+        <Icon
+          className="click-to-copy__icon"
+          icon={
+            outcome === 'copied'
+              ? 'tick'
+              : outcome === 'failed'
+                ? 'cross'
+                : 'clipboard'
+          }
+          size={16}
+        />
+      ) : null}
+      <span className="click-to-copy__status" role="status">
+        {outcome === 'copied'
+          ? 'Copied'
+          : outcome === 'failed'
+            ? 'Copy failed'
+            : null}
+      </span>
+    </Element>
+  );
+}
+
+function isOnNestedControl(
+  event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,
+): boolean {
+  const { target, currentTarget } = event;
+  if (!(target instanceof Element) || target === currentTarget) return false;
+  const control = target.closest(NESTED_CONTROL);
+  return (
+    control !== null &&
+    control !== currentTarget &&
+    currentTarget.contains(control)
+  );
+}
+
+function copyTitle(
+  value: ClickToCopyProps['value'],
+  label: string | undefined,
+): string {
+  const what = label === undefined ? 'Copy' : `Copy the ${label}`;
+  if (typeof value === 'function') return what;
+  const text = typeof value === 'string' ? value : value.text;
+  if (text === '' || text.length > TITLE_VALUE_MAX) return what;
+  return label === undefined ? `Copy ${text}` : `${what} (${text})`;
+}

package/src/clipboard/ui/CopyButton.tsx

@@ -44,7 +44,7 @@ export interface CopyButtonProps {
   small?: boolean;
   /**
    * Glyph shown at rest. A tick replaces it while the copy is confirmed.
-   * @default 'duplicate'
+   * @default 'clipboard'
    */
   icon?: IconName;
   /**
@@ -83,7 +83,7 @@ export function CopyButton(props: CopyButtonProps): ReactElement {
     failedLabel = 'Copy failed',
     minimal = false,
     small = false,
-    icon = 'duplicate',
+    icon = 'clipboard',
     disabled = false,
     resetAfter = DEFAULT_COPY_RESET_AFTER,
     title = 'Copy to clipboard',

package/src/clipboard/ui/CopyableValue.tsx

@@ -3,6 +3,7 @@ import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import { MISSING_VALUE } from '../../format/core/missing.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 
+import { ClickToCopy } from './ClickToCopy.tsx';
 import { CopyButton } from './CopyButton.tsx';
 
 const DEFAULT_BLOCK_HEIGHT = 160;
@@ -50,9 +51,9 @@ export interface CopyableValueProps {
  * One read-only value, named, with the button that copies it.
  *
  * A derived notation — a SMILES, an InChIKey, an accession — is only useful
- * somewhere else, so it is shown with the single click that puts it on the
- * clipboard, and selecting the value by hand takes all of it at once. An empty
- * value reads as the missing marker and offers nothing to copy.
+ * somewhere else, so a click on the value or on its button puts it on the
+ * clipboard. An empty value reads as the missing marker and offers nothing to
+ * copy.
  * @param props - See {@link CopyableValueProps}.
  * @returns The labelled value and its copy button.
  */
@@ -93,12 +94,17 @@ export function CopyableValue(props: CopyableValueProps): ReactElement {
           small
         />
       </div>
-      <code
+      <ClickToCopy
+        as="code"
+        value={value}
+        label={label}
+        focusable={false}
+        disabled={isEmpty}
         className="copyable-value__value"
         style={block ? { ...BLOCK_VALUE_STYLE, maxHeight } : VALUE_STYLE}
       >
         {isEmpty ? MISSING_VALUE : value}
-      </code>
+      </ClickToCopy>
       {children}
     </div>
   );
@@ -127,7 +133,6 @@ const VALUE_STYLE = {
   fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
   fontSize: 12,
   overflowWrap: 'anywhere',
-  userSelect: 'all',
 } as const satisfies CSSProperties;
 
 const BLOCK_VALUE_STYLE = {

package/src/clipboard/ui/index.ts

@@ -1,3 +1,5 @@
+export type { ClickToCopyElement, ClickToCopyProps } from './ClickToCopy.tsx';
+export { ClickToCopy } from './ClickToCopy.tsx';
 export type { CodeBlockProps, CodeBlockTone } from './CodeBlock.tsx';
 export { CodeBlock } from './CodeBlock.tsx';
 export type { CopyableValueProps } from './CopyableValue.tsx';

package/src/ecosystem/core/groups.ts

@@ -4,13 +4,14 @@
  * A single grid of tiles tells a visitor nothing about which of them is for
  * a first-year student and which is for a research project. The groups are the
  * answer, and they read as a progression: the chemistry a course opens with,
- * then the molecule itself, then what was measured of it, then the work only a
- * project needs — and last the three tools that are not chemistry at all.
+ * the exercises that practise it, then the molecule itself, then what was
+ * measured of it, then the work only a project needs — and last the tools that
+ * are not chemistry at all.
  */
 
 /** The topics, in the order they are written. */
 export type SiteGroupId =
-  'basics' | 'structures' | 'spectra' | 'research' | 'computing';
+  'basics' | 'practice' | 'structures' | 'spectra' | 'research' | 'computing';
 
 /** One topic the family's tools are gathered under. */
 export interface SiteGroup {
@@ -36,6 +37,12 @@ export const SITE_GROUPS: readonly SiteGroup[] = [
     label: 'Chemistry basics',
     blurb: 'Where a course starts, and what you go back to.',
   },
+  {
+    id: 'practice',
+    label: 'Practice',
+    blurb:
+      'Where a first course is worked through, one graded series at a time.',
+  },
   {
     id: 'structures',
     label: 'Structures & notation',

package/src/ecosystem/core/sites.ts

@@ -289,6 +289,45 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#1d4ed8',
     mark: { plate: '#854d0e', accent: '#60a5fa' },
   },
+  {
+    id: 'atoms',
+    name: { lead: 'atoms', alt: 'cheminfo', dot: true },
+    host: 'atoms.cheminfo.org',
+    repository: 'https://github.com/cheminfo/atoms.cheminfo.org',
+    tagline: 'Electrons, neutrons, Lewis structures and oxidation states.',
+    group: 'practice',
+    brand: '#b91c1c',
+    // The sky the mark's electron is drawn in sits at 2.1:1 on white, so the
+    // second half of the wordmark takes this darkened form instead.
+    brandAlt: '#0369a1',
+    mark: { plate: '#b91c1c', accent: '#38bdf8' },
+  },
+  {
+    id: 'moles',
+    name: { lead: 'moles', alt: 'cheminfo', dot: true },
+    host: 'moles.cheminfo.org',
+    repository: 'https://github.com/cheminfo/moles.cheminfo.org',
+    tagline: 'Balance a reaction, and work out its mass composition.',
+    group: 'practice',
+    brand: '#334155',
+    // The amber the mark's loaded pan is drawn in sits at 2.2:1 on white, so
+    // the second half of the wordmark takes this darkened form instead.
+    brandAlt: '#b45309',
+    mark: { plate: '#334155', accent: '#f59e0b' },
+  },
+  {
+    id: 'inorganic',
+    name: { lead: 'inorganic', alt: 'cheminfo', dot: true },
+    host: 'inorganic.cheminfo.org',
+    repository: 'https://github.com/cheminfo/inorganic.cheminfo.org',
+    tagline: 'Name an inorganic compound, and write its formula.',
+    group: 'practice',
+    brand: '#a3620a',
+    // The cyan the mark's named ion is drawn in sits at 1.8:1 on white, so the
+    // second half of the wordmark takes this darkened form instead.
+    brandAlt: '#0e7490',
+    mark: { plate: '#a3620a', accent: '#22d3ee' },
+  },
 ];
 
 /**

package/src/ecosystem/core/types.ts

@@ -24,7 +24,10 @@ export type SiteId =
   | 'periodic-table'
   | 'database'
   | 'symmetry'
-  | 'osiris';
+  | 'osiris'
+  | 'atoms'
+  | 'moles'
+  | 'inorganic';
 
 /** A site's name, split the way its own wordmark splits it. */
 export interface SiteName {

package/src/ecosystem/ui/glyphs.tsx

@@ -409,4 +409,55 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       />
     </>
   ),
+  // A nucleus with one electron on its orbit. The electron carries the
+  // answering colour because the electron is what every tool here counts.
+  atoms: (alt) => (
+    <>
+      <circle
+        cx="16"
+        cy="16"
+        r="10.5"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+      />
+      <circle cx="16" cy="16" r="3.6" fill="#ffffff" />
+      <circle cx="23.42" cy="8.58" r="3.2" fill={alt} />
+    </>
+  ),
+  // A balance still tipped, its two pans holding the two sides of the
+  // calculation. The pan that carries the answer carries the colour.
+  moles: (alt) => (
+    <>
+      <path
+        d="M6.5 11.5 25.5 15.5M16 13.5V24M10.5 24h11"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx="6.5" cy="11.5" r="3.2" fill="#ffffff" />
+      <circle cx="25.5" cy="15.5" r="3.2" fill={alt} />
+    </>
+  ),
+  // One cell of an ionic lattice, cations and anions alternating: the shape of
+  // the compounds this site names. The ion being named carries the colour.
+  inorganic: (alt) => (
+    <>
+      <path
+        d="M9.5 9.5h13v13h-13Z"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="1.6"
+        opacity="0.55"
+      />
+      <g fill="#ffffff">
+        <circle cx="9.5" cy="9.5" r="4.3" />
+        <circle cx="22.5" cy="9.5" r="2.7" />
+        <circle cx="9.5" cy="22.5" r="2.7" />
+      </g>
+      <circle cx="22.5" cy="22.5" r="4.3" fill={alt} />
+    </>
+  ),
 };

package/src/error/ui/ErrorFallback.tsx

@@ -52,7 +52,9 @@ export function ErrorFallback(props: ErrorFallbackProps): ReactElement {
       icon="error"
       title={title}
       description={
-        error.message === '' ? 'No message was given.' : error.message
+        <span className="error-fallback__message">
+          {error.message === '' ? 'No message was given.' : error.message}
+        </span>
       }
       action={
         onRetry === undefined ? undefined : (

package/src/pedagogy/ui/ReferenceSectionBlock.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactElement } from 'react';
 
+import { ClickToCopy } from '../../clipboard/ui/ClickToCopy.tsx';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 
@@ -108,7 +109,15 @@ function ReferenceRowLine(props: {
   const interactive = row.tooltip !== undefined;
   const line = (
     <span style={interactive ? INTERACTIVE_ROW_STYLE : ROW_STYLE}>
-      <span style={syntaxStyle(width, interactive)}>{row.syntax}</span>
+      <span style={syntaxStyle(width, interactive)}>
+        <ClickToCopy
+          value={row.syntax}
+          label="syntax"
+          title={interactive ? '' : undefined}
+        >
+          {row.syntax}
+        </ClickToCopy>
+      </span>
       <span style={DESCRIPTION_STYLE}>{row.description}</span>
     </span>
   );