react-cheminfo 0.11.0 → 0.12.0

package/src/structure/ui/StructureSvg.tsx

@@ -3,26 +3,24 @@
  * picked.
  *
  * `Structure` holds it behind `React.lazy`, and the barrel deliberately does
- * not export it: this is the file that value-imports react-ocl, so
- * anything able to reach it statically drags openchemlib into every bundle,
- * including the ones that only ever wanted the Tools menu.
+ * not export it: this is the file that value-imports react-ocl and
+ * openchemlib, so anything able to reach it statically drags openchemlib into
+ * every bundle, including the ones that only ever wanted the Tools menu.
  */
 
-import type { ComponentType, ReactElement, ReactNode } from 'react';
+import { Molecule } from 'openchemlib';
+import type { ReactElement, ReactNode } from 'react';
 import { useMemo } from 'react';
-import type { ErrorComponentProps } from 'react-ocl';
-import {
-  IdcodeSvgRenderer,
-  MolfileSvgRenderer,
-  SmilesSvgRenderer,
-} from 'react-ocl';
+import { SvgRenderer } from 'react-ocl';
 
+import type { AtomLabelPlacement } from '../core/atomLabels.ts';
+import { applyAtomLabels } from '../core/atomLabels.ts';
 import type { StructureSource } from '../core/structureSource.ts';
 
 import { StructurePlaceholder } from './StructurePlaceholder.tsx';
 
 /** Props of {@link StructureSvg}. */
-export interface StructureSvgProps {
+interface StructureSvgProps {
   /** The notation to draw, as `structureSource` picked it. */
   source: StructureSource;
   /** Width of the picture, in pixels. */
@@ -53,58 +51,136 @@ export interface StructureSvgProps {
   showBondNumber: boolean;
   /** Write the reaction mapping number of every mapped atom. */
   showMapping: boolean;
+  /** Write the CIP descriptor, R or S, next to every stereocentre. */
+  showCIPParity: boolean;
   /**
    * A caption drawn inside the picture, under the structure.
    * @default undefined
    */
   label?: string;
-  /** What is shown in place of a structure react-ocl refuses to read. */
+  /**
+   * Text written on atoms, keyed by atom index from 0.
+   * @default undefined
+   */
+  atomLabels?: ReadonlyMap<number, string>;
+  /** Where the atom labels are written. */
+  atomLabelPlacement: AtomLabelPlacement;
+  /**
+   * Called with the index of the atom that was clicked.
+   * @default undefined
+   */
+  onAtomClick?: (atom: number) => void;
+  /**
+   * Called with the index of the bond that was clicked.
+   * @default undefined
+   */
+  onBondClick?: (bond: number) => void;
+  /** What is shown in place of a structure openchemlib refuses to read. */
   fallback: ReactNode;
 }
 
 /**
- * Draw the picture with the renderer the notation calls for.
+ * Read the notation and draw the picture.
  * @param props - See {@link StructureSvgProps}.
  * @returns The svg, or the placeholder when the notation cannot be read.
  */
 export function StructureSvg(props: StructureSvgProps): ReactElement {
-  const { source, fallback, ...rest } = props;
+  const {
+    source,
+    fallback,
+    atomLabels,
+    atomLabelPlacement,
+    onAtomClick,
+    onBondClick,
+    showCIPParity,
+    ...rest
+  } = props;
+  const { kind, value, coordinates } = source;
+  // A map a caller builds during render is a new object every time; its
+  // content is what decides whether the molecule has to be read again.
+  const labelsKey =
+    atomLabels === undefined ? '' : JSON.stringify([...atomLabels]);
 
-  const ErrorComponent = useMemo(
-    () => createFallbackRenderer(fallback),
-    [fallback],
+  const drawing = useMemo(
+    () => readDrawing(kind, value, coordinates, labelsKey, atomLabelPlacement),
+    [kind, value, coordinates, labelsKey, atomLabelPlacement],
   );
-  const shared = { ...rest, ErrorComponent };
 
-  if (source.kind === 'idcode') {
+  if (drawing === null) {
     return (
-      <IdcodeSvgRenderer
-        idcode={source.value}
-        coordinates={source.coordinates}
-        {...shared}
-      />
+      <StructurePlaceholder width={rest.width} height={rest.height}>
+        {fallback}
+      </StructurePlaceholder>
     );
   }
-  if (source.kind === 'molfile') {
-    return <MolfileSvgRenderer molfile={source.value} {...shared} />;
-  }
-  return <SmilesSvgRenderer smiles={source.value} {...shared} />;
+
+  return (
+    <SvgRenderer
+      {...rest}
+      molecule={drawing.molecule}
+      noCarbonLabelWithCustomLabel={drawing.labelled}
+      suppressCIPParity={!showCIPParity}
+      onAtomClick={
+        onAtomClick === undefined
+          ? undefined
+          : (atom) => {
+              onAtomClick(atom);
+            }
+      }
+      onBondClick={
+        onBondClick === undefined
+          ? undefined
+          : (bond) => {
+              onBondClick(bond);
+            }
+      }
+    />
+  );
+}
+
+/** A molecule ready to draw, and whether any label was written on it. */
+interface Drawing {
+  molecule: Molecule;
+  labelled: boolean;
 }
 
 /**
- * Build the renderer react-ocl falls back to, so a structure it refuses looks
- * like one that was never supplied rather than like an error.
- * @param fallback - What the caller wants shown instead of the structure.
- * @returns The component react-ocl renders in place of the picture.
+ * Parse the notation and write the labels on the result.
+ * @param kind - Which notation `value` is written in.
+ * @param value - The notation.
+ * @param coordinates - The idCode's encoded coordinates, when it has them.
+ * @param labelsKey - The atom labels, as `JSON.stringify` wrote their entries;
+ * empty for none.
+ * @param placement - Where the labels go.
+ * @returns The molecule, or `null` when it cannot be read or holds no atom.
  */
-function createFallbackRenderer(
-  fallback: ReactNode,
-): ComponentType<ErrorComponentProps> {
-  return function StructureFallback(props: ErrorComponentProps): ReactElement {
-    return (
-      <StructurePlaceholder width={props.width} height={props.height}>
-        {fallback}
-      </StructurePlaceholder>
-    );
-  };
+function readDrawing(
+  kind: StructureSource['kind'],
+  value: string,
+  coordinates: string | undefined,
+  labelsKey: string,
+  placement: AtomLabelPlacement,
+): Drawing | null {
+  let molecule: Molecule;
+  try {
+    molecule = parseMolecule(kind, value, coordinates);
+  } catch {
+    return null;
+  }
+  if (molecule.getAllAtoms() === 0) return null;
+  if (labelsKey === '') return { molecule, labelled: false };
+
+  const labels = new Map(JSON.parse(labelsKey) as Array<[number, string]>);
+  const written = applyAtomLabels(molecule, labels, placement);
+  return { molecule, labelled: written > 0 };
+}
+
+function parseMolecule(
+  kind: StructureSource['kind'],
+  value: string,
+  coordinates: string | undefined,
+): Molecule {
+  if (kind === 'idcode') return Molecule.fromIDCode(value, coordinates);
+  if (kind === 'molfile') return Molecule.fromMolfile(value);
+  return Molecule.fromSmiles(value);
 }

package/src/structure/ui/useToolbarFloor.ts

@@ -3,6 +3,7 @@ import { useLayoutEffect, useRef } from 'react';
 
 import { toolbarFloorHeight } from '../core/toolbarFloor.ts';
 
+/** What {@link useToolbarFloor} needs. */
 export interface ToolbarFloorOptions {
   /**
    * Smallest height of the drawing area, in pixels. Raised to whatever the

package/src/tokens/core/checkTokens.ts

@@ -1,10 +1,13 @@
 // tokens-ok: file — the checker names the colours it looks for.
 import { normalizeColor, readHexColor, readRgbColor } from './colors.ts';
+import type { OpenParen } from './cssReading.ts';
+import {
+  driftedFallback,
+  readBrandDeclaration,
+  readVarToken,
+} from './cssReading.ts';
 import { BANNED_COLORS } from './rules.ts';
-
-/** What a site got wrong where a token was called for. */
-export type TokenViolationKind =
-  'blueprint-grey' | 'blueprint-blue' | 'retyped-token' | 'redeclared-brand';
+import type { TokenViolationKind } from './types.ts';
 
 /** One place a site writes a colour that is not its own to write. */
 export interface TokenViolation {
@@ -35,6 +38,14 @@ export interface CheckTokensOptions {
    * @default 'tokens-ok'
    */
   ignoreMarker?: string;
+  /**
+   * Whether the fallback written inside `var()` is read too: the fallback of
+   * one of the family's tokens that is not that token's value in `chrome.css`,
+   * and a banned colour in the fallback of any other property, are then
+   * reported.
+   * @default false
+   */
+  fallbacks?: boolean;
 }
 
 /**
@@ -46,8 +57,9 @@ export interface CheckTokensOptions {
  * Blueprint grey because a component used it, `#f5f7fa` because that is what
  * the token holds today, `--brand` because the palette was declared by hand —
  * leaves its page unable to follow the family. Both spellings of one colour
- * are caught, `#5f6b7c` and `rgb(95 107 124)` alike, and reading a token
- * through `var()` is never a violation.
+ * are caught, `#5f6b7c` and `rgb(95 107 124)` alike. Reading a token through
+ * `var()` is never a violation; its fallback is read only when `fallbacks` is
+ * set.
  * @param files - The files to read, each with the path a report names it by.
  * @param options - The colours the project owns, and the marker waiving a line.
  * @returns Every violation, in file order and then in reading order.
@@ -69,7 +81,7 @@ export function findTokenViolations(
     // than consuming it — the token block itself, the registry of banned
     // colours, an image generated outside any page.
     if (waivesWholeFile(file.text, marker)) continue;
-    const scan = scanFile(file.text, marker);
+    const scan = scanFile(file.text, marker, options.fallbacks === true);
     for (const candidate of scan.candidates) {
       if (scan.markedLines.has(candidate.line)) continue;
       if (candidate.color !== null && allowed.has(candidate.color)) continue;
@@ -98,9 +110,6 @@ function waivesWholeFile(text: string, marker: string): boolean {
   return head.includes(`${marker}: file`);
 }
 
-// Longest first, so `--brand-alt` is never read as `--brand`.
-const BRAND_PROPERTIES = ['--brand-alt', '--brand', '--accent'] as const;
-
 interface Candidate extends Omit<TokenViolation, 'file'> {
   /** The colour written, or `null` for a property that should not be declared. */
   color: string | null;
@@ -113,14 +122,18 @@ interface FileScan {
 
 // One pass over the file: the marker, the block structure and every colour are
 // all read from the same walk, so nothing is matched a second time per line.
-function scanFile(text: string, marker: string): FileScan {
+function scanFile(
+  text: string,
+  marker: string,
+  checkFallbacks: boolean,
+): FileScan {
   const lower = text.toLowerCase();
   const candidates: Candidate[] = [];
   const markedLines = new Set<number>();
   const rootBlocks: boolean[] = [];
   // Which parentheses are open, and whether each is a `var(` past its comma —
   // a colour there is a fallback for the token named beside it.
-  const parens: Array<{ isVar: boolean; sawComma: boolean }> = [];
+  const parens: OpenParen[] = [];
   let selectorStart = 0;
   let line = 1;
   let lineStart = 0;
@@ -142,19 +155,33 @@ function scanFile(text: string, marker: string): FileScan {
       continue;
     }
     if (char === '(') {
+      const isVar = lower.startsWith('var(', index - 3);
       parens.push({
-        isVar: lower.startsWith('var(', index - 3),
-        sawComma: false,
+        isVar,
+        token: isVar ? readVarToken(lower, index + 1) : null,
+        fallbackStart: -1,
+        fallbackLine: line,
+        fallbackLineStart: lineStart,
       });
       continue;
     }
     if (char === ')') {
-      parens.pop();
+      const open = parens.pop();
+      if (checkFallbacks && open !== undefined) {
+        const drifted = driftedFallback(text, open, index);
+        if (drifted !== null) {
+          candidates.push({ ...drifted, kind: 'drifted-fallback' });
+        }
+      }
       continue;
     }
     if (char === ',') {
       const open = parens.at(-1);
-      if (open !== undefined) open.sawComma = true;
+      if (open?.fallbackStart === -1) {
+        open.fallbackStart = index + 1;
+        open.fallbackLine = line;
+        open.fallbackLineStart = lineStart;
+      }
       continue;
     }
     if (char === '{') {
@@ -174,8 +201,11 @@ function scanFile(text: string, marker: string): FileScan {
       if (match === null) continue;
       const rule = BANNED_COLORS.get(match.color);
       const open = parens.at(-1);
-      const isFallback = open !== undefined && open.isVar && open.sawComma;
-      if (rule !== undefined && !isFallback) {
+      const isFallback = open?.isVar === true && open.fallbackStart !== -1;
+      // A token's own fallback is judged whole when its `var(` closes; the
+      // fallback of any other property still may not be a banned colour.
+      const judged = !isFallback || (checkFallbacks && open.token === null);
+      if (rule !== undefined && judged) {
         candidates.push({
           line,
           column: index - lineStart + 1,
@@ -207,36 +237,3 @@ function scanFile(text: string, marker: string): FileScan {
   }
   return { candidates, markedLines };
 }
-
-// A declaration of one of the palette properties. Reading one — `var(--brand)`
-// — has no colon after the name, so it never lands here.
-function readBrandDeclaration(
-  lower: string,
-  start: number,
-): { name: string; end: number } | null {
-  for (const name of BRAND_PROPERTIES) {
-    if (!lower.startsWith(name, start)) continue;
-    const after = start + name.length;
-    // `--brand-alt-text` is its own property, not `--brand-alt`.
-    if (isNameChar(lower[after])) return null;
-    let index = after;
-    while (isSpace(lower[index])) index++;
-    if (lower[index] !== ':') return null;
-    return { name, end: after };
-  }
-  return null;
-}
-
-function isNameChar(char: string | undefined): boolean {
-  if (char === undefined) return false;
-  return (
-    (char >= '0' && char <= '9') ||
-    (char >= 'a' && char <= 'z') ||
-    char === '-' ||
-    char === '_'
-  );
-}
-
-function isSpace(char: string | undefined): boolean {
-  return char === ' ' || char === '\t';
-}

package/src/tokens/core/colors.ts

@@ -7,7 +7,7 @@
  */
 
 /** A colour found in the text, and where it ends. */
-export interface ColorMatch {
+interface ColorMatch {
   /** The value, as six lowercase hex digits, without its `#`. */
   color: string;
   /** The index just past the last character the colour is written with. */

package/src/tokens/core/cssReading.ts

@@ -0,0 +1,166 @@
+// tokens-ok: file — the checker compares fallbacks with the family's values.
+/**
+ * The pieces of CSS the token checker reads beyond a colour: a declaration of
+ * one of the site's own palette properties, the token a `var()` reads, and
+ * whether the fallback written after it is that token's value.
+ */
+
+import { normalizeColor } from './colors.ts';
+import type { FamilyToken } from './familyTokens.ts';
+import { FAMILY_TOKEN_VALUES, isFamilyToken } from './familyTokens.ts';
+
+// Longest first, so `--brand-alt` is never read as `--brand`.
+const BRAND_PROPERTIES = ['--brand-alt', '--brand', '--accent'] as const;
+
+/**
+ * A declaration of one of the palette properties a site renders through
+ * `<SiteTheme siteId>`. Reading one — `var(--brand)` — has no colon after the
+ * name, so it is never returned.
+ * @param lower - The text being scanned, already lowercased.
+ * @param start - The index of the first dash.
+ * @returns The property and the index just past its name, or `null`.
+ */
+export function readBrandDeclaration(
+  lower: string,
+  start: number,
+): { name: string; end: number } | null {
+  for (const name of BRAND_PROPERTIES) {
+    if (!lower.startsWith(name, start)) continue;
+    const after = start + name.length;
+    // `--brand-alt-text` is its own property, not `--brand-alt`.
+    if (isNameChar(lower[after])) return null;
+    let index = after;
+    while (isSpace(lower[index])) index++;
+    if (lower[index] !== ':') return null;
+    return { name, end: after };
+  }
+  return null;
+}
+
+/**
+ * The family token a `var()` reads, when it reads one.
+ * @param lower - The text being scanned, already lowercased.
+ * @param start - The index just past the `var(`.
+ * @returns The token, or `null` for any other property.
+ */
+export function readVarToken(lower: string, start: number): FamilyToken | null {
+  let index = start;
+  while (/\s/.test(lower[index] ?? '')) index++;
+  const nameStart = index;
+  while (isNameChar(lower[index])) index++;
+  const name = lower.slice(nameStart, index);
+  return isFamilyToken(name) ? name : null;
+}
+
+/** A parenthesis the scanner has opened and not yet closed. */
+export interface OpenParen {
+  /** Whether it opens a `var(`. */
+  isVar: boolean;
+  /** The family token the `var(` reads, or `null`. */
+  token: FamilyToken | null;
+  /** Where the fallback starts, just past the first comma, or -1. */
+  fallbackStart: number;
+  /** The line the first comma is on. */
+  fallbackLine: number;
+  /** The index the line of the first comma starts at. */
+  fallbackLineStart: number;
+}
+
+/** A fallback that is not its token's value, and where it is written. */
+export interface DriftedFallback {
+  /** Which line its first character is on, counting from 1. */
+  line: number;
+  /** Which column, counting from 1. */
+  column: number;
+  /** The fallback as written, without its surrounding spaces. */
+  text: string;
+  /** The value the token holds, and what to write instead. */
+  hint: string;
+  /** The fallback as a colour, or `null` when it is not one. */
+  color: string | null;
+}
+
+/**
+ * The fallback of a family token that is not that token's value, reported at
+ * its first character.
+ * @param text - The file, as written.
+ * @param open - The `var(` being closed.
+ * @param end - The index of its closing parenthesis.
+ * @returns Where the fallback is and what it should be, or `null` when it is
+ * the token's value or there is none.
+ */
+export function driftedFallback(
+  text: string,
+  open: OpenParen,
+  end: number,
+): DriftedFallback | null {
+  if (open.token === null || open.fallbackStart === -1) return null;
+  const fallback = text.slice(open.fallbackStart, end);
+  const hint = fallbackDrift(open.token, fallback);
+  if (hint === null) return null;
+
+  let line = open.fallbackLine;
+  let lineStart = open.fallbackLineStart;
+  let index = open.fallbackStart;
+  while (index < end && /\s/.test(text[index] ?? '')) {
+    if (text[index] === '\n') {
+      line++;
+      lineStart = index + 1;
+    }
+    index++;
+  }
+  return {
+    line,
+    column: index - lineStart + 1,
+    text: fallback.trim(),
+    hint,
+    color: normalizeColor(fallback),
+  };
+}
+
+// What is wrong with the fallback written for a token, if anything. A colour is
+// compared as a colour, so `#fff` stands for `#ffffff`; anything else as text
+// with its spacing collapsed.
+function fallbackDrift(token: FamilyToken, fallback: string): string | null {
+  const expected = FAMILY_TOKEN_VALUES[token];
+  const written = fallback.trim();
+  // No value of the family's holds a quote: one here means the `var(` was cut
+  // off by the end of a string, in a test or a snippet, rather than written.
+  if (/["'`]/.test(written)) return null;
+  const expectedColor = normalizeColor(expected);
+  const writtenColor = normalizeColor(written);
+  const matches =
+    expectedColor !== null && writtenColor !== null
+      ? expectedColor === writtenColor
+      : collapse(written) === collapse(expected);
+  if (matches) return null;
+  return `${token} is ${expected} in chrome.css — write TOKEN from react-cheminfo/core, or var(${token}) with no fallback.`;
+}
+
+/**
+ * Whether a character can continue a custom property name.
+ * @param char - The character, or `undefined` past the end.
+ * @returns Whether it belongs to the name.
+ */
+function isNameChar(char: string | undefined): boolean {
+  if (char === undefined) return false;
+  return (
+    (char >= '0' && char <= '9') ||
+    (char >= 'a' && char <= 'z') ||
+    char === '-' ||
+    char === '_'
+  );
+}
+
+/**
+ * Whether a character is the spacing allowed inside a declaration's line.
+ * @param char - The character, or `undefined` past the end.
+ * @returns Whether it is a space or a tab.
+ */
+function isSpace(char: string | undefined): boolean {
+  return char === ' ' || char === '\t';
+}
+
+function collapse(text: string): string {
+  return text.toLowerCase().replaceAll(/\s+/g, ' ');
+}

package/src/tokens/core/familyTokens.ts

@@ -0,0 +1,69 @@
+// tokens-ok: file — the values `styles/chrome.css` declares are mirrored here.
+/**
+ * The family's tokens as a component writes them in an inline style.
+ *
+ * `chrome.css` is the one place a token's value is chosen; a style object
+ * cannot read that file, so the values are mirrored here, and a test holds the
+ * two in step. A component then writes `TOKEN.border` rather than typing its
+ * own `var(--border, …)`, whose fallback drifts the day the token moves.
+ */
+
+/** Every custom property `chrome.css` declares on `:root`, with its value. */
+export const FAMILY_TOKEN_VALUES = {
+  '--surface': '#ffffff',
+  '--surface-sunken': '#f5f7fa',
+  '--surface-raised': '#ffffff',
+  '--border': '#dfe3e8',
+  '--border-strong': '#c3cad3',
+  '--text': '#16202c',
+  '--text-muted': '#5b6875',
+  '--text-faint': '#8a96a3',
+  '--radius': '10px',
+  '--radius-lg': '16px',
+  '--shadow-sm': '0 1px 2px rgb(16 32 48 / 8%)',
+  '--shadow-md': '0 4px 14px rgb(16 32 48 / 10%)',
+  '--shadow-lg': '0 12px 32px rgb(16 32 48 / 16%)',
+  '--header-height': '3rem',
+  '--page-max': '84rem',
+} as const;
+
+/** The name of one of the family's tokens, `--border` for instance. */
+export type FamilyToken = keyof typeof FAMILY_TOKEN_VALUES;
+
+/**
+ * A token read through `var()`, with its own value as the fallback, so a page
+ * that has not loaded `chrome.css` still paints the family's value.
+ * @param name - The token.
+ * @returns The reference, `var(--border, #dfe3e8)` for `--border`.
+ */
+export function tokenReference(name: FamilyToken): string {
+  return `var(${name}, ${FAMILY_TOKEN_VALUES[name]})`;
+}
+
+/**
+ * Whether a custom property is one of the family's tokens.
+ * @param name - The property, with its two dashes.
+ * @returns Whether `chrome.css` declares it.
+ */
+export function isFamilyToken(name: string): name is FamilyToken {
+  return Object.hasOwn(FAMILY_TOKEN_VALUES, name);
+}
+
+/** Every token as an inline style reads it: `TOKEN.textMuted`, `TOKEN.border`. */
+export const TOKEN = {
+  surface: tokenReference('--surface'),
+  surfaceSunken: tokenReference('--surface-sunken'),
+  surfaceRaised: tokenReference('--surface-raised'),
+  border: tokenReference('--border'),
+  borderStrong: tokenReference('--border-strong'),
+  text: tokenReference('--text'),
+  textMuted: tokenReference('--text-muted'),
+  textFaint: tokenReference('--text-faint'),
+  radius: tokenReference('--radius'),
+  radiusLarge: tokenReference('--radius-lg'),
+  shadowSmall: tokenReference('--shadow-sm'),
+  shadowMedium: tokenReference('--shadow-md'),
+  shadowLarge: tokenReference('--shadow-lg'),
+  headerHeight: tokenReference('--header-height'),
+  pageMax: tokenReference('--page-max'),
+} as const;

package/src/tokens/core/index.ts

@@ -1,6 +1,10 @@
-export type {
-  CheckTokensOptions,
-  TokenViolation,
-  TokenViolationKind,
-} from './checkTokens.ts';
+export type { CheckTokensOptions, TokenViolation } from './checkTokens.ts';
 export { findTokenViolations } from './checkTokens.ts';
+export type { FamilyToken } from './familyTokens.ts';
+export {
+  FAMILY_TOKEN_VALUES,
+  TOKEN,
+  isFamilyToken,
+  tokenReference,
+} from './familyTokens.ts';
+export type { TokenViolationKind } from './types.ts';

package/src/tokens/core/rules.ts

@@ -1,8 +1,8 @@
 // tokens-ok: file — the colours a site may not write are listed here.
-import type { TokenViolationKind } from './checkTokens.ts';
+import type { TokenViolationKind } from './types.ts';
 
 /** What a colour a site may not write should have been. */
-export interface ColorRule {
+interface ColorRule {
   /** Which kind of violation writing it raises. */
   kind: TokenViolationKind;
   /** The token to write instead, in one line. */

package/src/tokens/core/types.ts

@@ -0,0 +1,7 @@
+/** What a site got wrong where a token was called for. */
+export type TokenViolationKind =
+  | 'blueprint-grey'
+  | 'blueprint-blue'
+  | 'retyped-token'
+  | 'redeclared-brand'
+  | 'drifted-fallback';