react-cheminfo 0.2.0 → 0.4.0

package/src/ecosystem/core/index.ts

@@ -1,3 +1,5 @@
+export { renderEcosystemLinksHtml } from './links.ts';
+export { findSiteByHost, siteById } from './lookup.ts';
 export type {
   EcosystemSite,
   SiteId,
@@ -5,3 +7,4 @@ export type {
   SiteName,
 } from './sites.ts';
 export { ECOSYSTEM_SITES, siteUrl } from './sites.ts';
+export { siteThemeColor, siteTokensCss } from './tokens.ts';

package/src/ecosystem/core/links.ts

@@ -0,0 +1,29 @@
+import { ECOSYSTEM_SITES, siteUrl } from './sites.ts';
+
+/**
+ * Every site of the family as a plain list of links, for the `<noscript>` of a
+ * page whose body is an empty root element.
+ *
+ * A crawler that runs no script sees nothing else of the page, so this is the
+ * only path it has from one of our tools to the next — and each entry carries
+ * the line saying what it opens, as real text.
+ * @returns The `<ul>`, for the caller to place inside its own `<noscript>`.
+ */
+export function renderEcosystemLinksHtml(): string {
+  let html = '<ul class="ecosystem-links">\n';
+  for (const site of ECOSYSTEM_SITES) {
+    const href = escapeHtml(siteUrl(site));
+    const host = escapeHtml(site.host);
+    const tagline = escapeHtml(site.tagline);
+    html += `<li><a href="${href}">${host}</a> — ${tagline}</li>\n`;
+  }
+  return `${html}</ul>\n`;
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;');
+}

package/src/ecosystem/core/lookup.ts

@@ -0,0 +1,41 @@
+import type { EcosystemSite, SiteId } from './sites.ts';
+import { ECOSYSTEM_SITES } from './sites.ts';
+
+/**
+ * One site of the family, by the identifier its entry carries.
+ * @param id - The site being asked for.
+ * @returns The site.
+ * @throws {Error} When no site of the family carries that identifier.
+ */
+export function siteById(id: SiteId): EcosystemSite {
+  for (const site of ECOSYSTEM_SITES) {
+    if (site.id === id) return site;
+  }
+  throw new Error(`unknown ecosystem site: ${id}`);
+}
+
+/**
+ * The site a page is being served from, so a header can mark itself as the
+ * current one without being told which site it belongs to.
+ *
+ * The host is whatever the browser reports, so it may carry a port and may or
+ * may not carry the `www.` two of our sites are written with. Neither changes
+ * which site it is, and a host belonging to nobody — a development server, a
+ * preview deployment — is simply not one of ours.
+ * @param host - What `location.host` reads, or any host-shaped string.
+ * @returns The site served from that host, or undefined for any other host.
+ */
+export function findSiteByHost(host: string): EcosystemSite | undefined {
+  const wanted = normalizeHost(host);
+  if (wanted === '') return undefined;
+
+  for (const site of ECOSYSTEM_SITES) {
+    if (normalizeHost(site.host) === wanted) return site;
+  }
+  return undefined;
+}
+
+function normalizeHost(host: string): string {
+  const withoutPort = host.trim().toLowerCase().split(':', 1)[0] ?? '';
+  return withoutPort.startsWith('www.') ? withoutPort.slice(4) : withoutPort;
+}

package/src/ecosystem/core/sites.ts

@@ -12,7 +12,9 @@ export type SiteId =
   | 'pdb'
   | 'elucidation'
   | 'equilibrium'
-  | 'polycarp';
+  | 'polycarp'
+  | '3d'
+  | 'pt';
 
 export interface SiteName {
   /** First half of the name, set in the site's leading colour. */
@@ -33,6 +35,8 @@ export interface EcosystemSite {
   name: SiteName;
   /** Where the site lives, written the way it is typed. */
   host: string;
+  /** Where the sources live, and what a Source link opens. */
+  repository: string;
   /** One line on what the site does. */
   tagline: string;
   /** The colour the first half of the name is set in. */
@@ -69,6 +73,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'inchi',
     name: { lead: 'inchi', alt: 'cheminfo', dot: true },
     host: 'inchi.cheminfo.org',
+    repository: 'https://github.com/cheminfo/inchi.cheminfo.org',
     tagline: 'InChI and InChIKey from a structure, in the browser.',
     brand: '#5b21b6',
     brandAlt: '#a16207',
@@ -78,6 +83,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'vcl',
     name: { lead: 'vcl', alt: 'cheminfo', dot: true },
     host: 'vcl.cheminfo.org',
+    repository: 'https://github.com/cheminfo/vcl.cheminfo.org',
     tagline: 'Combine a core and fragments into a screened library.',
     brand: '#2d72d2',
     brandAlt: '#9a3412',
@@ -87,6 +93,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'smiles',
     name: { lead: 'smiles', alt: 'cheminfo', dot: true },
     host: 'smiles.cheminfo.org',
+    repository: 'https://github.com/cheminfo/smiles.cheminfo.org',
     tagline: 'Draw a structure, read its SMILES, learn the notation.',
     brand: '#1c6e42',
     brandAlt: '#9a3412',
@@ -96,6 +103,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'chemcalc',
     name: { lead: 'Chem', alt: 'Calc' },
     host: 'www.chemcalc.org',
+    repository: 'https://github.com/cheminfo/chemcalc.org',
     tagline: 'Molecular formula, exact mass and isotopic distribution.',
     brand: '#5b52e0',
     brandAlt: '#0d9488',
@@ -105,6 +113,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'nmrium',
     name: { lead: 'NMR', alt: 'ium' },
     host: 'www.nmrium.org',
+    repository: 'https://github.com/cheminfo/nmrium',
     tagline: 'Process and assign NMR spectra in the browser.',
     brand: '#ea580c',
     brandAlt: '#2b143e',
@@ -114,6 +123,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'surge',
     name: { lead: 'surge', alt: 'cheminfo', dot: true },
     host: 'surge.cheminfo.org',
+    repository: 'https://github.com/cheminfo/surge.cheminfo.org',
     tagline: 'Every constitutional isomer of a molecular formula.',
     brand: '#4338ca',
     brandAlt: '#be123c',
@@ -123,6 +133,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'tex',
     name: { lead: 'tex', alt: 'cheminfo', dot: true },
     host: 'tex.cheminfo.org',
+    repository: 'https://github.com/cheminfo/tex.cheminfo.org',
     tagline: 'LaTeX formulas rendered to SVG or PNG from a URL.',
     brand: '#a21caf',
     brandAlt: '#a16207',
@@ -132,6 +143,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'lcao',
     name: { lead: 'lcao', alt: 'cheminfo', dot: true },
     host: 'lcao.cheminfo.org',
+    repository: 'https://github.com/cheminfo/lcao.cheminfo.org',
     tagline: 'Combine atomic orbitals into molecular ones.',
     brand: '#1565c0',
     brandAlt: '#c62828',
@@ -141,6 +153,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'regexp',
     name: { lead: 'regexp', alt: 'cheminfo', dot: true },
     host: 'regexp.cheminfo.org',
+    repository: 'https://github.com/cheminfo/regexp.cheminfo.org',
     tagline: 'Learn regular expressions in a live playground.',
     brand: '#1e3a8a',
     brandAlt: '#a16207',
@@ -150,6 +163,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'pdb',
     name: { lead: 'pdb', alt: 'cheminfo', dot: true },
     host: 'pdb.cheminfo.org',
+    repository: 'https://github.com/cheminfo/pdb.cheminfo.org',
     tagline: 'A fast look at any Protein Data Bank entry.',
     brand: '#2563eb',
     brandAlt: '#b45309',
@@ -159,6 +173,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'elucidation',
     name: { lead: 'elucidation', alt: 'cheminfo', dot: true },
     host: 'elucidation.cheminfo.org',
+    repository: 'https://github.com/cheminfo/elucidation.cheminfo.org',
     tagline: 'A structure from a 1H NMR spectrum and a formula.',
     brand: '#7e22ce',
     brandAlt: '#b45309',
@@ -168,6 +183,7 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'equilibrium',
     name: { lead: 'Equi', alt: 'Librium' },
     host: 'equilibrium.cheminfo.org',
+    repository: 'https://github.com/cheminfo/equilibrium.cheminfo.org',
     tagline: 'Chemical equilibria: pH, speciation and titration curves.',
     brand: '#0b5754',
     brandAlt: '#a56600',
@@ -177,11 +193,32 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'polycarp',
     name: { lead: 'Poly', alt: 'Carp' },
     host: 'polycarp.cheminfo.org',
+    repository: 'https://github.com/cheminfo/polycarp.cheminfo.org',
     tagline: 'Predict the microstructure of a radical copolymerisation.',
     brand: '#0d1d37',
     brandAlt: '#0c9ba3',
     mark: { plate: '#0d1d37', accent: '#0c9ba3' },
   },
+  {
+    id: '3d',
+    name: { lead: '3d', alt: 'cheminfo', dot: true },
+    host: '3d.cheminfo.org',
+    repository: 'https://github.com/cheminfo/3d.cheminfo.org',
+    tagline: 'Conformers in 3D from a structure you draw.',
+    brand: '#155e75',
+    brandAlt: '#b45309',
+    mark: { plate: '#155e75', accent: '#f97316' },
+  },
+  {
+    id: 'pt',
+    name: { lead: 'pt', alt: 'cheminfo', dot: true },
+    host: 'pt.cheminfo.org',
+    repository: 'https://github.com/cheminfo/pt.cheminfo.org',
+    tagline: 'The periodic table, coloured, plotted and taken apart.',
+    brand: '#15803d',
+    brandAlt: '#a16207',
+    mark: { plate: '#15803d', accent: '#fbbf24' },
+  },
 ];
 
 /**

package/src/ecosystem/core/tokens.ts

@@ -0,0 +1,47 @@
+import { siteById } from './lookup.ts';
+import type { EcosystemSite, SiteId } from './sites.ts';
+
+/**
+ * The custom properties a site of the family sets on `:root`: the two colours
+ * it owns, the readable form of the second one when that is needed, and the
+ * accent bound to the first.
+ *
+ * It is a complete rule rather than a list of declarations, so it drops into a
+ * `<style>` of a prerendered page as it is.
+ * @param id - The site whose palette is wanted.
+ * @returns The `:root` rule, ending in a newline.
+ */
+export function siteTokensCss(id: SiteId): string {
+  const site = siteById(id);
+  const answering = answeringColor(site);
+  const declarations = [
+    `--brand: ${site.brand};`,
+    `--brand-alt: ${answering};`,
+  ];
+
+  // The answering colour of several sites is a yellow or an amber that sits
+  // around 2:1 on white, so text set in it needs the darkened form instead.
+  if (site.brandAlt !== answering) {
+    declarations.push(`--brand-alt-text: ${site.brandAlt};`);
+  }
+  declarations.push('--accent: var(--brand);');
+
+  return `:root {\n  ${declarations.join('\n  ')}\n}\n`;
+}
+
+/**
+ * What a browser paints its own chrome with on that site — the address bar on
+ * Android, the title bar of an installed page — which is the site's leading
+ * colour.
+ * @param id - The site whose colour is wanted.
+ * @returns The colour, as the `<meta name="theme-color">` content.
+ */
+export function siteThemeColor(id: SiteId): string {
+  return siteById(id).brand;
+}
+
+// The second colour as the site's mark draws it: on the accent element, unless
+// the mark inverts the pair and gives the plate the answering colour instead.
+function answeringColor(site: EcosystemSite): string {
+  return site.mark.accent === site.brand ? site.mark.plate : site.mark.accent;
+}

package/src/ecosystem/ui/SiteTheme.tsx

@@ -0,0 +1,23 @@
+import type { ReactElement } from 'react';
+
+import type { SiteId } from '../core/sites.ts';
+import { siteTokensCss } from '../core/tokens.ts';
+
+export interface SiteThemeProps {
+  /** The site whose palette the page takes. */
+  siteId: SiteId;
+}
+
+/**
+ * The two colours a site owns, put on the page as custom properties.
+ *
+ * Everything of the family that reads `--brand`, `--brand-alt` or `--accent` —
+ * a mark drawn in token colours, a current menu item, a focus ring — follows
+ * from here, so a site declares its palette once and never repeats a hex code
+ * in a component.
+ * @param props - The site whose palette is injected.
+ * @returns The rule, as a style element that applies wherever it is rendered.
+ */
+export function SiteTheme(props: SiteThemeProps): ReactElement {
+  return <style>{siteTokensCss(props.siteId)}</style>;
+}

package/src/ecosystem/ui/Wordmark.tsx

@@ -0,0 +1,65 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import { siteById } from '../core/lookup.ts';
+import type { SiteId } from '../core/sites.ts';
+
+export interface WordmarkProps {
+  /** The site whose name is written. */
+  siteId: SiteId;
+  /**
+   * Size of the name, in pixels. The weight comes from the surrounding
+   * context, so the same wordmark suits a header bar and a heading.
+   * @default 17
+   */
+  size?: number;
+  /**
+   * Extra class names, for spacing at the place it is used. `wordmark` is
+   * always carried as well.
+   * @default undefined
+   */
+  className?: string;
+}
+
+/**
+ * The name of a site, written in the two colours it owns.
+ *
+ * A name that splits on itself — `ChemCalc`, `EquiLibrium`, `PolyCarp` —
+ * carries no domain and no dot; a one-word name takes `.cheminfo` after a faint
+ * dot. The `.org` is never written, because the name is the site rather than
+ * its address.
+ * @param props - The site, the size of the name, and extra class names.
+ * @returns The name, as one inline element that never wraps mid-address.
+ */
+export function Wordmark(props: WordmarkProps): ReactElement {
+  const { siteId, size = 17, className } = props;
+  const site = siteById(siteId);
+
+  return (
+    <span
+      className={className ? `wordmark ${className}` : 'wordmark'}
+      style={{ ...WORDMARK_STYLE, fontSize: size }}
+    >
+      <span className="wordmark__lead" style={{ color: site.brand }}>
+        {site.name.lead}
+      </span>
+      {site.name.dot ? (
+        <span className="wordmark__dot" style={{ color: DOT_COLOR }}>
+          .
+        </span>
+      ) : null}
+      <span className="wordmark__alt" style={{ color: site.brandAlt }}>
+        {site.name.alt}
+      </span>
+    </span>
+  );
+}
+
+// The separating dot is neutral so the two coloured halves read as the name
+// rather than as three equal parts, and it takes the family's own token when
+// the page defines one.
+const DOT_COLOR = 'var(--text-faint, #8a96a3)';
+
+const WORDMARK_STYLE: CSSProperties = {
+  letterSpacing: '-0.01em',
+  whiteSpace: 'nowrap',
+};

package/src/ecosystem/ui/glyphs.tsx

@@ -0,0 +1,246 @@
+/**
+ * The drawing on each site's plate.
+ *
+ * One file of pure artwork, so `marks.tsx` stays the eight lines that put a
+ * glyph on a plate and every new site is one entry here rather than a longer
+ * component.
+ *
+ * Each keeps the geometry of that site's own logo where it has one, and carries
+ * the site's answering colour on exactly one element — which is what stops it
+ * collapsing into a flat shape at 16 px.
+ */
+
+import type { ReactNode } from 'react';
+
+import type { SiteId } from '../core/sites.ts';
+
+/** Every mark, keyed by site, drawn on top of its plate. */
+export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
+  // A hexagon with a tail: the structure, and the string it hashes into.
+  inchi: (alt) => (
+    <g
+      fill="none"
+      stroke={alt}
+      strokeWidth="2.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polygon points="13,6.5 7.7,9.6 7.7,15.7 13,18.8 18.3,15.7 18.3,9.6" />
+      <path d="M16.4 16.2 25.2 25" />
+    </g>
+  ),
+  // The core carrying three R groups, which is what this tool combines.
+  vcl: (alt) => (
+    <>
+      <g
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M16 9.5 10.8 12.5 10.8 18.5 16 21.5 21.2 18.5 21.2 12.5Z" />
+        <path d="M16 9.5 16 5.5M21.2 18.5 24.8 20.6M10.8 18.5 7.2 20.6" />
+      </g>
+      <circle cx="16" cy="4.6" r="2.6" fill={alt} />
+      <circle cx="25.6" cy="21.2" r="2.6" fill={alt} />
+      <circle cx="6.4" cy="21.2" r="2.6" fill={alt} />
+    </>
+  ),
+  // A ring over the line of characters that writes it down.
+  smiles: (alt) => (
+    <>
+      <path
+        d="M16 7.5 22.1 11.1 22.1 18.3 16 21.9 9.9 18.3 9.9 11.1Z"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.2"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.5 25.5h21"
+        fill="none"
+        stroke={alt}
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </>
+  ),
+  // An isotopic pattern: the answer this one is asked for most.
+  chemcalc: (alt) => (
+    <g strokeLinecap="round" strokeWidth="3.4" fill="none">
+      <path d="M9 24V15" stroke="#ffffff" />
+      <path d="M16 24V7" stroke={alt} />
+      <path d="M23 24V18" stroke="#ffffff" />
+    </g>
+  ),
+  // The official NMRium symbol, from `Logo.tsx` of the NMRium sources: the
+  // orange half is theirs, and the half their logo sets in plum is set in white
+  // here because the plate already is that plum.
+  nmrium: (accent) => (
+    <g fillRule="evenodd" transform="translate(5.25 6.25) scale(0.088)">
+      <path
+        fill={accent}
+        d="M.64,31.7A31.67,31.67,0,0,1,54.72,9.29l0,0A31.66,31.66,0,0,1,64,31.7V190a13.39,13.39,0,0,0,26.77,0V54a31.7,31.7,0,0,1,31.7-31.7V40.58A13.38,13.38,0,0,0,109.13,54V190a31.71,31.71,0,0,1-63.41,0V31.7a13.29,13.29,0,0,0-3.88-9.46l0,0A13.41,13.41,0,0,0,19,31.7V164.82H.64Z"
+      />
+      <path
+        fill="#ffffff"
+        d="M154.21,54v68.17a13.34,13.34,0,0,0,3.89,9.47h0A13.39,13.39,0,0,0,181,122.14V99.32h-.06a31.63,31.63,0,0,1,9.29-22.38l0,0a31.65,31.65,0,0,1,44.8,0l0,0a31.58,31.58,0,0,1,9.3,22.39V118H226V99.32a13.3,13.3,0,0,0-3.89-9.46h0a13.44,13.44,0,0,0-18.93,0l0,0a13.3,13.3,0,0,0-3.83,8.19v24.09a31.7,31.7,0,0,1-54.11,22.42v0a31.66,31.66,0,0,1-9.3-22.4V54Z"
+      />
+    </g>
+  ),
+  // One formula branching into every structure it can be.
+  surge: (alt) => (
+    <>
+      <g
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M7 16h6" />
+        <path d="M13 16 25 8.5M13 16h12M13 16 25 23.5" />
+      </g>
+      <circle cx="25" cy="8.5" r="3" fill={alt} />
+      <circle cx="25" cy="16" r="3" fill={alt} />
+      <circle cx="25" cy="23.5" r="3" fill={alt} />
+    </>
+  ),
+  // A radical over its radicand: a formula being set.
+  tex: (alt) => (
+    <>
+      <rect x="18.5" y="12" width="8.5" height="8.5" rx="1.6" fill={alt} />
+      <path
+        d="M4.5 15.5h3l3.6 8.2L16.8 7.5h10.4"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </>
+  ),
+  // The site's own favicon: two lobes of opposite phase overlapping end-on,
+  // the simplest sigma bond, in the phase palette its viewer renders with.
+  lcao: (alt) => (
+    <>
+      <path
+        d="M16 16C16 10.2 13.3 5 9 5S2 10.2 2 16s2.7 11 7 11 7-5.2 7-11z"
+        fill="#1565c0"
+      />
+      <path
+        d="M16 16c0 5.8 2.7 11 7 11s7-5.2 7-11-2.7-11-7-11-7 5.2-7 11z"
+        fill={alt}
+      />
+      <circle cx="16" cy="16" r="2.25" fill="#37474f" />
+    </>
+  ),
+  // The pattern that matches anything, which is where everyone starts.
+  regexp: (alt) => (
+    <text
+      x="50%"
+      y="53%"
+      dominantBaseline="central"
+      textAnchor="middle"
+      fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
+      fontSize="18"
+      fontWeight="700"
+      fill={alt}
+    >
+      .*
+    </text>
+  ),
+  // Three residues of a chain, one of them the ligand you came for.
+  pdb: (alt) => (
+    <>
+      <g
+        stroke="#ffffff"
+        strokeWidth="1.9"
+        strokeLinecap="round"
+        fill="none"
+        opacity="0.85"
+      >
+        <path d="M9.2 12.4 22 15.4 15.6 23Z" />
+      </g>
+      <circle cx="9.2" cy="12.4" r="3.1" fill="#ffffff" />
+      <circle cx="22" cy="15.4" r="3.1" fill="#ffffff" />
+      <circle cx="15.6" cy="23" r="3.1" fill={alt} />
+    </>
+  ),
+  // The site's own favicon: a spectrum, and the one signal being assigned.
+  elucidation: (alt) => (
+    <>
+      <path
+        d="M5 24h4l2-11 2 11h4l2-15 2 15h3l1.5-7 1.5 7"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx="19" cy="9" r="3" fill={alt} />
+    </>
+  ),
+  // The site's own favicon: the double harpoon, one direction per colour.
+  equilibrium: (alt) => (
+    <g
+      fill="none"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M6.5 12.5h17l-4-4" stroke="#ffffff" />
+      <path d="M25.5 19.5h-17l4 4" stroke={alt} />
+    </g>
+  ),
+  // A chain of monomers, one of them the comonomer written into it.
+  polycarp: (alt) => (
+    <>
+      <path
+        d="M6.5 20 12.5 12 19.5 20 25.5 12"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx="6.5" cy="20" r="3" fill="#ffffff" />
+      <circle cx="12.5" cy="12" r="3" fill="#ffffff" />
+      <circle cx="19.5" cy="20" r="3" fill={alt} />
+      <circle cx="25.5" cy="12" r="3" fill="#ffffff" />
+    </>
+  ),
+  // The stepped corner of the table, with the one cell a visitor has picked
+  // carrying the accent — which is what every tool of that site is: the table,
+  // and one element read off it.
+  pt: (alt) => (
+    <>
+      <g fill="#ffffff" opacity="0.55">
+        <rect x="5" y="6" width="5" height="5" rx="1" />
+        <rect x="22" y="6" width="5" height="5" rx="1" />
+        <rect x="5" y="12.5" width="5" height="5" rx="1" />
+        <rect x="11.75" y="12.5" width="5" height="5" rx="1" />
+        <rect x="18.5" y="12.5" width="5" height="5" rx="1" />
+        <rect x="5" y="19" width="5" height="5" rx="1" />
+        <rect x="11.75" y="19" width="5" height="5" rx="1" />
+      </g>
+      <rect x="18.5" y="19" width="8.5" height="5" rx="1" fill={alt} />
+    </>
+  ),
+  // A stereocentre: two bonds in the plane of the drawing and one wedged out
+  // of it, which is the whole of what this site does to a flat structure.
+  '3d': (alt) => (
+    <>
+      <path
+        d="M16 16 16 5.6M16 16 7.2 21.2"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth="2.4"
+        strokeLinecap="round"
+      />
+      <path d="M16 16 24.2 24 26.9 19.6Z" fill={alt} />
+      <circle cx="16" cy="16" r="2.9" fill="#ffffff" />
+    </>
+  ),
+};

package/src/ecosystem/ui/index.ts

@@ -6,5 +6,9 @@ export type { EcosystemMenuProps } from './EcosystemMenu.tsx';
 export { EcosystemMenu } from './EcosystemMenu.tsx';
 export type { SiteMarkProps } from './marks.tsx';
 export { SiteMark } from './marks.tsx';
+export type { SiteThemeProps } from './SiteTheme.tsx';
+export { SiteTheme } from './SiteTheme.tsx';
 export type { SiteTileProps } from './SiteTile.tsx';
 export { SiteTile } from './SiteTile.tsx';
+export type { WordmarkProps } from './Wordmark.tsx';
+export { Wordmark } from './Wordmark.tsx';