react-cheminfo 0.42.0 → 0.44.0

package/src/deploy/core/checkDeploy.ts

@@ -7,6 +7,7 @@ import {
   readInstallRetries,
   readPublishedImage,
 } from './publishedImage.ts';
+import { readReactCopies } from './reactCopies.ts';
 import type { CheckDeployOptions, DeployFile, DeployProblem } from './types.ts';
 import { DEPLOY_COMPOSE_FILES } from './types.ts';
 
@@ -88,6 +89,12 @@ export function findDeployProblems(
 
   readBuildGate(byPath.get('package.json'), dockerfile, problems);
 
+  readReactCopies(
+    byPath.get('package.json'),
+    byPath.get('package-lock.json'),
+    problems,
+  );
+
   readPublishedImage(byPath.get(DOCKER_IMAGE_WORKFLOW), problems);
 
   const gitignore = byPath.get('.gitignore');

package/src/deploy/core/index.ts

@@ -7,6 +7,7 @@ export type {
   DeployProblemKind,
 } from './types.ts';
 export { NGINX_CONFIG, PAGE_CACHE_CONFIG } from './pageCache.ts';
+export { REACT_MAJOR, readReactCopies } from './reactCopies.ts';
 export {
   DOCKER_IMAGE_WORKFLOW,
   readInstallRetries,

package/src/deploy/core/json.ts

@@ -0,0 +1,53 @@
+/**
+ * Reading the repository's own JSON files, which a checker must do without ever
+ * throwing: the absence of a file, and a file somebody has broken, are both
+ * things to report rather than to crash on.
+ */
+
+/**
+ * A JSON file the repository may not have, or may have broken.
+ * @param text - The file, unparsed.
+ * @returns Its object form, or undefined when it is neither.
+ */
+export function parseJsonObject(
+  text: string | undefined,
+): Record<string, unknown> | undefined {
+  if (text === undefined) return undefined;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return undefined;
+  }
+  if (typeof parsed !== 'object' || parsed === null) return undefined;
+  return parsed as Record<string, unknown>;
+}
+
+/**
+ * A block of a `package.json` as a map of strings, dropping any entry that is
+ * not one — the nested form of `overrides` pins something other than the
+ * package it is written under.
+ * @param value - The block, as parsed.
+ * @returns Its string entries.
+ */
+export function stringEntries(value: unknown): Record<string, string> {
+  if (typeof value !== 'object' || value === null) return {};
+  const found: Record<string, string> = {};
+  for (const [key, entry] of Object.entries(value)) {
+    if (typeof entry === 'string') found[key] = entry;
+  }
+  return found;
+}
+
+/**
+ * Where a report should point, so the reader lands on the line itself.
+ * @param text - The file to search, when there is one.
+ * @param needle - The literal to find.
+ * @returns Its line, counting from 1, or 0 when it is not there.
+ */
+export function lineOf(text: string | undefined, needle: string): number {
+  if (text === undefined) return 0;
+  const at = text.indexOf(needle);
+  if (at === -1) return 0;
+  return text.slice(0, at).split('\n').length;
+}

package/src/deploy/core/reactCopies.ts

@@ -0,0 +1,243 @@
+import semver from 'semver';
+
+import { lineOf, parseJsonObject, stringEntries } from './json.ts';
+import type { DeployProblem } from './types.ts';
+
+/**
+ * The React major the whole family runs. One number, in one place: a site that
+ * resolves anything else is reporting a resolution nobody asked for.
+ */
+export const REACT_MAJOR = 19;
+
+/**
+ * The packages that must resolve to exactly one copy. The two runtime ones
+ * because two copies are a blank page; the two type packages because two copies
+ * are a type error in a file nobody edited.
+ */
+const SINGLE_COPY = [
+  'react',
+  'react-dom',
+  '@types/react',
+  '@types/react-dom',
+] as const;
+
+/** One package as the lock file resolved it. */
+interface Resolved {
+  /** Where npm put it, as the lock keys it. */
+  path: string;
+  /** The exact version it resolved to. */
+  version: string;
+}
+
+/** What the root `package.json` says about a package. */
+interface Declared {
+  /** The range a direct dependency asks for, if it is one. */
+  dependency?: string;
+  /** The range the `overrides` block pins, if it pins one. */
+  override?: string;
+}
+
+/**
+ * Report every way a repository would resolve React twice, or resolve a React
+ * that is not the family's.
+ *
+ * Two physical copies of `react` make every component from the offending
+ * subtree call hooks against a dispatcher the active renderer never populated,
+ * and the app dies at first render on `Cannot read properties of null (reading
+ * 'useEffect')` — a blank page with the correct title and the correct CSS,
+ * which reads like a routing or a build bug and is neither. Two copies of
+ * `@types/react` are the same mistake one layer up: `tsc` rejects a component
+ * crossing between them, in a file nobody touched.
+ *
+ * The cause is almost never a direct dependency. It is a *transitive* peer
+ * range that stopped before the current major — `@blueprintjs/core` depends on
+ * `react-popper@2`, whose peers stop at `^18` — so npm honours the stale range,
+ * installs an older React for that subtree and hoists it. Nothing fails at
+ * install, nothing fails at build, and the bundle silently grows by a second
+ * copy of React. The fix is a pin in the root `overrides`, which is why a lock
+ * holding such a peer without one is reported even while the tree happens to be
+ * clean today: it is one fresh resolve away from not being.
+ * @param packageJson - The repository's root `package.json`, unparsed.
+ * @param packageLock - Its `package-lock.json`, unparsed.
+ * @param problems - Where each problem found is appended.
+ */
+export function readReactCopies(
+  packageJson: string | undefined,
+  packageLock: string | undefined,
+  problems: DeployProblem[],
+): void {
+  const lock = parseJsonObject(packageLock);
+  if (lock === undefined) return;
+  const packages = lock.packages;
+  if (typeof packages !== 'object' || packages === null) return;
+  const entries = Object.entries(packages as Record<string, unknown>);
+
+  const resolved = resolvedCopies(entries);
+  // A repository with no React at all is not a React repository.
+  if (resolved.get('react')?.length === undefined) return;
+
+  const declared = declarations(packageJson);
+
+  for (const name of SINGLE_COPY) {
+    const copies = resolved.get(name);
+    if (copies === undefined || copies.length === 0) continue;
+    if (copies.length > 1) {
+      problems.push({
+        file: 'package-lock.json',
+        line: lineOf(packageLock, `"${copies[1]?.path ?? name}"`),
+        kind: 'duplicate-react',
+        message: `${name} resolves to ${copies.length} copies: ${copies
+          .map((copy) => `${copy.version} at ${copy.path}`)
+          .join(', ')}`,
+        hint: `pin ${name} in the root overrides, then reinstall from scratch — npm install alone keeps the stale tree on disk`,
+      });
+    }
+    for (const copy of copies) {
+      const major = semver.major(semver.coerce(copy.version) ?? '0.0.0');
+      if (major !== REACT_MAJOR) {
+        problems.push({
+          file: 'package-lock.json',
+          line: lineOf(packageLock, `"${copy.path}"`),
+          kind: 'stray-react-major',
+          message: `${name} resolves to ${copy.version} at ${copy.path}, and the family runs React ${REACT_MAJOR}`,
+          hint: `declare ^${REACT_MAJOR} and pin it in the root overrides`,
+        });
+      }
+    }
+  }
+
+  const stale = stalePeer(entries);
+  if (stale !== undefined) {
+    for (const name of ['react', 'react-dom'] as const) {
+      if (declared.get(name)?.override !== undefined) continue;
+      problems.push({
+        file: 'package.json',
+        line: lineOf(packageJson, '"dependencies"'),
+        kind: 'unpinned-react',
+        message: `${stale.name} asks for ${stale.key} ${stale.range}, which excludes React ${REACT_MAJOR}, and nothing pins ${name}`,
+        hint: `add "overrides": { "react": "^${REACT_MAJOR}…", "react-dom": "^${REACT_MAJOR}…" } to the root package.json`,
+      });
+    }
+  }
+
+  for (const name of SINGLE_COPY) {
+    const entry = declared.get(name);
+    if (entry?.override === undefined || entry.dependency === undefined) {
+      continue;
+    }
+    if (entry.override !== entry.dependency) {
+      problems.push({
+        file: 'package.json',
+        line: lineOf(packageJson, `"${name}"`),
+        kind: 'conflicting-react-pin',
+        message: `${name} is pinned to ${entry.override} while it is depended on as ${entry.dependency}, so npm install fails with EOVERRIDE`,
+        hint: `write the same range in both: the override and the dependency are one decision`,
+      });
+    }
+  }
+}
+
+/**
+ * Every real copy of each tracked package, in lock order. A workspace link is
+ * not a copy — it is the repository pointing at itself.
+ * @param entries - The lock's `packages`, as entries.
+ * @returns The copies found, keyed by package name.
+ */
+function resolvedCopies(
+  entries: ReadonlyArray<[string, unknown]>,
+): Map<string, Resolved[]> {
+  const found = new Map<string, Resolved[]>();
+  for (const [path, value] of entries) {
+    if (typeof value !== 'object' || value === null) continue;
+    const entry = value as { version?: unknown; link?: unknown };
+    if (entry.link === true) continue;
+    if (typeof entry.version !== 'string') continue;
+    for (const name of SINGLE_COPY) {
+      if (
+        path !== `node_modules/${name}` &&
+        !path.endsWith(`/node_modules/${name}`)
+      ) {
+        continue;
+      }
+      const copies = found.get(name) ?? [];
+      copies.push({ path, version: entry.version });
+      found.set(name, copies);
+    }
+  }
+  return found;
+}
+
+/**
+ * The first package in the lock whose React peer stopped before the family's
+ * major — the thing that makes npm resolve a second copy.
+ * @param entries - The lock's `packages`, as entries.
+ * @returns What asks for what, or undefined when every peer admits the major.
+ */
+function stalePeer(
+  entries: ReadonlyArray<[string, unknown]>,
+): { name: string; key: string; range: string } | undefined {
+  for (const [path, value] of entries) {
+    if (typeof value !== 'object' || value === null) continue;
+    const entry = value as {
+      peerDependencies?: unknown;
+      peerDependenciesMeta?: unknown;
+    };
+    const peers = entry.peerDependencies;
+    if (typeof peers !== 'object' || peers === null) continue;
+    const meta = (entry.peerDependenciesMeta ?? {}) as Record<
+      string,
+      { optional?: unknown } | undefined
+    >;
+    for (const key of ['react', 'react-dom']) {
+      const range = (peers as Record<string, unknown>)[key];
+      if (typeof range !== 'string') continue;
+      if (meta[key]?.optional === true) continue;
+      if (admitsMajor(range)) continue;
+      return { name: path.replace(/^.*node_modules\//, ''), key, range };
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Whether a range admits any release of the family's React major. A range that
+ * cannot be parsed is given the benefit of the doubt: a checker that accuses on
+ * a spelling it does not know teaches people to ignore it.
+ * @param range - The peer range, as written.
+ * @returns True when some version of the major satisfies it.
+ */
+function admitsMajor(range: string): boolean {
+  try {
+    return (
+      semver.intersects(range, `>=${REACT_MAJOR}.0.0 <${REACT_MAJOR + 1}.0.0`, {
+        includePrerelease: true,
+      }) ||
+      semver.satisfies(`${REACT_MAJOR}.0.0`, range, { includePrerelease: true })
+    );
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * What the root `package.json` asks for and what it pins, per tracked package.
+ * @param packageJson - The file, unparsed.
+ * @returns The declaration of each tracked package that has one.
+ */
+function declarations(packageJson: string | undefined): Map<string, Declared> {
+  const found = new Map<string, Declared>();
+  const parsed = parseJsonObject(packageJson);
+  if (parsed === undefined) return found;
+  const dependencies = {
+    ...stringEntries(parsed.dependencies),
+    ...stringEntries(parsed.devDependencies),
+  };
+  const overrides = stringEntries(parsed.overrides);
+  for (const name of SINGLE_COPY) {
+    const dependency = dependencies[name];
+    const override = overrides[name];
+    if (dependency === undefined && override === undefined) continue;
+    found.set(name, { dependency, override });
+  }
+  return found;
+}

package/src/deploy/core/types.ts

@@ -16,7 +16,11 @@ export type DeployProblemKind =
   | 'ungated-build'
   | 'missing-build-only'
   | 'test-runs-e2e'
-  | 'gated-image-build';
+  | 'gated-image-build'
+  | 'duplicate-react'
+  | 'stray-react-major'
+  | 'unpinned-react'
+  | 'conflicting-react-pin';
 
 /** One way a repository would fail, or silently mis-deploy, on the server. */
 export interface DeployProblem {

package/src/ecosystem/core/sites.ts

@@ -311,6 +311,19 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#0e7490',
     mark: { plate: '#a3620a', accent: '#22d3ee' },
   },
+  {
+    id: 'powerpoint',
+    name: { lead: 'powerpoint', alt: 'cheminfo', dot: true },
+    host: 'powerpoint.cheminfo.org',
+    tagline:
+      'Put a live tool on a slide, from the link its Share button gives.',
+    group: 'computing',
+    brand: '#c8460d',
+    // The blue sits on the white slide of the mark, where it reads at 6.7:1,
+    // and is dark enough to set the second half of the wordmark in as well.
+    brandAlt: '#1d4ed8',
+    mark: { plate: '#c8460d', accent: '#1d4ed8' },
+  },
 ];
 
 /** How a link to a site is written, beyond the site itself. */

package/src/ecosystem/core/types.ts

@@ -28,7 +28,8 @@ export type SiteId =
   | 'osiris'
   | 'atoms'
   | 'moles'
-  | 'inorganic';
+  | 'inorganic'
+  | 'powerpoint';
 
 /** A site's name, split the way its own wordmark splits it. */
 export interface SiteName {

package/src/ecosystem/ui/glyphs.tsx

@@ -470,4 +470,20 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <circle cx="22.5" cy="22.5" r="4.3" fill={alt} />
     </>
   ),
+  // A slide on its stand, with a ring standing on it: the slide is the
+  // presentation and the ring is the live tool put on it, so the ring carries
+  // the answering colour.
+  powerpoint: (alt) => (
+    <>
+      <rect x="4.5" y="6.5" width="23" height="14.5" rx="1.6" fill="#ffffff" />
+      <path
+        d="M16 21v5M11.5 26.5h9"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+        strokeLinecap="round"
+      />
+      <path d="M16 8.45 20.59 11.1V16.4L16 19.05 11.41 16.4V11.1Z" fill={alt} />
+    </>
+  ),
 };

package/src/periodic/core/layout.ts

@@ -20,6 +20,12 @@ export interface ElementRange {
   kind: 'group' | 'period';
   /** Its number: a group from 1 to 18, a period from 1 to 7. */
   value: number;
+  /**
+   * Whether the click asked for this run on top of what was already chosen —
+   * Cmd on a Mac, Ctrl elsewhere — rather than in place of it. A reader
+   * comparing two periods holds it down for the second one.
+   */
+  additive: boolean;
 }
 
 /** A cell of the grid, one-based as CSS grid lines are. */

package/src/periodic/ui/ElementCell.tsx

@@ -1,6 +1,7 @@
 /**
- * One cell of the periodic table: the atomic number, the symbol, and whatever
- * the tool asked to be written under it.
+ * One cell of the periodic table: the atomic number, the symbol, whatever the
+ * tool asked to be written under it, and — when the tool asks for them — the
+ * electrons of each shell down the right-hand edge.
  *
  * A cell is a real `<button>`, so Tab reaches it, Enter and Space activate it,
  * and a screen reader reads the element's name rather than its symbol.
@@ -10,13 +11,33 @@
  * screen — the table a class reads is the same drawing, larger.
  */
 
-import type { CSSProperties, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { useState } from 'react';
 
 import type { Swatch } from '../../color/core/interpolate.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 
-import { UNIT, ofWidth } from './unit.ts';
+import {
+  SHELLS_AIR,
+  SHELLS_COLUMN,
+  cellStyle,
+  detailStyle,
+  numberStyle,
+  shellsStyle,
+  symbolStyle,
+} from './cellStyles.ts';
+import type { DetailType } from './cellType.ts';
+import {
+  SHELLS_RESERVED,
+  SYMBOL_CAP,
+  condensedScale,
+  detailType,
+  scaleX,
+  shellFontSize,
+  symbolFontSize,
+  textWidthInEm,
+} from './cellType.ts';
+import { ofWidth } from './unit.ts';
 
 /** What {@link ElementCell} needs to draw one element. */
 export interface ElementCellProps {
@@ -39,6 +60,24 @@ export interface ElementCellProps {
    * @default '' — nothing is written
    */
   detail?: string;
+  /**
+   * The size that line is written at, from {@link detailType}, so a whole
+   * table writes it at one size rather than each cell at its own.
+   * @default the largest size this cell's own line fits at
+   */
+  detailType?: DetailType;
+  /**
+   * Electrons in each shell, innermost first, written down the right-hand
+   * edge.
+   * @default undefined — nothing is written there
+   */
+  shells?: readonly number[];
+  /**
+   * The size they are written at, so the deepest stack in the table fits its
+   * cell and every other is written to match.
+   * @default the size this cell's own stack fits at
+   */
+  shellSize?: string;
   /**
    * Whether the cell is the one the tools are pointed at.
    * @default false
@@ -78,6 +117,7 @@ export function ElementCell(props: ElementCellProps): ReactElement {
     row,
     onSelect,
     detail = '',
+    shells,
     isSelected = false,
     isIncluded = true,
     onHover,
@@ -85,6 +125,11 @@ export function ElementCell(props: ElementCellProps): ReactElement {
   const t = useChromeT();
   const [isHovered, setIsHovered] = useState(false);
 
+  const detailWidth = textWidthInEm(detail);
+  const reserved = shells === undefined ? 0 : SHELLS_RESERVED;
+  const type = props.detailType ?? detailType([detailWidth], reserved);
+  const shellSize = props.shellSize ?? shellFontSize(shells?.length ?? 0);
+
   return (
     <button
       type="button"
@@ -113,6 +158,11 @@ export function ElementCell(props: ElementCellProps): ReactElement {
         ...cellStyle,
         gridColumn: column,
         gridRow: row,
+        // The electrons stand in a column of their own, so the symbol keeps
+        // the left of the cell rather than being pushed off its centre.
+        gridTemplateColumns:
+          shells === undefined ? '1fr' : `1fr ${SHELLS_COLUMN}`,
+        columnGap: shells === undefined ? undefined : SHELLS_AIR,
         background: swatch.background,
         color: swatch.foreground,
         opacity: isIncluded ? 1 : 0.28,
@@ -132,170 +182,29 @@ export function ElementCell(props: ElementCellProps): ReactElement {
       <span
         style={{
           ...symbolStyle,
-          fontSize: symbolFontSize(symbol),
+          fontSize: symbolFontSize(symbol, SYMBOL_CAP, reserved),
         }}
       >
         {symbol}
       </span>
       {detail === '' ? null : (
-        <span style={{ ...detailStyle, fontSize: detailFontSize(detail) }}>
+        <span
+          style={{
+            ...detailStyle,
+            fontSize: type.size,
+            // Condensed rather than written smaller, so every cell of the
+            // table says its name and its value in one type.
+            transform: scaleX(condensedScale(detailWidth, type, reserved)),
+          }}
+        >
           {detail}
         </span>
       )}
+      {shells === undefined ? null : (
+        <span style={{ ...shellsStyle, fontSize: shellSize }}>
+          {shells.join('\n')}
+        </span>
+      )}
     </button>
   );
 }
-
-/**
- * The size the symbol is written at.
- *
- * Every symbol is written at the same size, except the widest of them — the
- * ones whose second letter is an `m` — which are written a tenth smaller
- * rather than run into the edges of their cell.
- * @param symbol - The chemical symbol.
- * @returns A CSS length.
- */
-function symbolFontSize(symbol: string): string {
-  return fitted(symbolWidthInEm(symbol), SYMBOL_CAP, '0.5rem');
-}
-
-/**
- * The size the third line takes so the whole of it is written.
- *
- * A value cut short by an ellipsis is a wrong value — `0.0899` read as `0.0…`
- * is worse than not writing it at all — so a long string is written smaller
- * rather than trimmed.
- * @param detail - What the third line says.
- * @returns A CSS length.
- */
-function detailFontSize(detail: string): string {
-  return fitted(detailWidthInEm(detail), DETAIL_CAP, '0.25rem');
-}
-
-/**
- * The largest size a string of the given width fits its cell at.
- *
- * The room a cell leaves is a share of the table's width less its border and
- * its padding, which are the same few pixels at every size — hence the two
- * units in one expression.
- * @param widthInEm - How wide the string is, in ems of its own size.
- * @param cap - The size it is written at when it has room to spare.
- * @param floor - The size under which it is not shrunk any further.
- * @returns A CSS length.
- */
-function fitted(widthInEm: number, cap: string, floor: string): string {
-  const room = `calc((${UNIT} * ${String(CELL_SHARE)} - ${CELL_CHROME}) / ${widthInEm.toFixed(2)})`;
-  return `max(${floor}, min(${cap}, ${room}))`;
-}
-
-/**
- * How wide a symbol is, in ems of its own size.
- * @param symbol - The chemical symbol.
- * @returns Its width, never zero.
- */
-function symbolWidthInEm(symbol: string): number {
-  let width = 0;
-  for (const character of symbol) {
-    if (character === 'm' || character === 'w') {
-      width += 0.95;
-    } else if (character >= 'a' && character <= 'z') {
-      width += 0.63;
-    } else {
-      width += 0.85;
-    }
-  }
-  return Math.max(width, 0.85);
-}
-
-/**
- * How wide the third line is, in ems of its own size.
- *
- * It is written with tabular figures, where every glyph — the decimal point
- * and the minus of an exponent included — advances the same width, so counting
- * the characters is the measurement.
- * @param detail - What the third line says.
- * @returns Its width, never zero.
- */
-function detailWidthInEm(detail: string): number {
-  return Math.max(detail.length, 1) * TABULAR_EM;
-}
-
-/** What one tabular glyph advances, as a share of its own size. */
-const TABULAR_EM = 0.6;
-
-/** The size the symbol is written at wherever it fits, as a share of the table. */
-const SYMBOL_CAP = ofWidth(2.4);
-
-/**
- * The tallest the third line is ever written, as a share of the table.
- *
- * Close to two thirds of the symbol: the symbol is how a cell is found, but
- * the value is what the table is being read for, and a value half the size of
- * the symbol is the one thing on the cell a class cannot make out.
- */
-const DETAIL_CAP = ofWidth(1.6);
-
-/**
- * The band at each end of a cell: the atomic number at the top, whatever the
- * tool writes at the bottom.
- *
- * They are one length, not two, and that is what makes the symbol between them
- * sit at the centre of the cell rather than near it — a bottom band wider than
- * the top one by a third lifted every symbol in the table two pixels.
- */
-const EDGE_BAND = ofWidth(1.8);
-
-/** How wide one column is, in per cent of the table's width. */
-const CELL_SHARE = 4.85;
-
-/** What the border and the padding of a cell take off that width. */
-const CELL_CHROME = '4px';
-
-/**
- * A cell is three bands of its own, and every cell has all three.
- *
- * The atomic number is in the top band, against its left edge; the symbol is
- * centred in the middle one; whatever the tool writes is centred in the
- * bottom one. The bands keep their height whether or not anything is written
- * in the last of them, so a number sits at one height across the whole table
- * and a symbol at one other — before this, both rode on a stack the cell
- * centred and moved whenever a neighbour's value was written smaller.
- */
-const cellStyle = {
-  border: '1px solid rgb(255 255 255 / 0.55)',
-  borderRadius: 3,
-  cursor: 'pointer',
-  display: 'grid',
-  font: 'inherit',
-  gridTemplateRows: `${EDGE_BAND} 1fr ${EDGE_BAND}`,
-  justifyItems: 'center',
-  minWidth: 0,
-  overflow: 'hidden',
-  padding: '1px',
-  transition: 'opacity 120ms ease, filter 120ms ease',
-} as const satisfies CSSProperties;
-
-const numberStyle = {
-  alignSelf: 'start',
-  fontSize: `max(0.33rem, ${ofWidth(1.1)})`,
-  fontVariantNumeric: 'tabular-nums',
-  justifySelf: 'start',
-  lineHeight: 1,
-  opacity: 0.8,
-} as const satisfies CSSProperties;
-
-const symbolStyle = {
-  alignSelf: 'center',
-  fontWeight: 700,
-  letterSpacing: '-0.02em',
-  lineHeight: 1.02,
-} as const satisfies CSSProperties;
-
-const detailStyle = {
-  alignSelf: 'center',
-  fontVariantNumeric: 'tabular-nums',
-  lineHeight: 1,
-  maxWidth: '100%',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-} as const satisfies CSSProperties;