react-cheminfo 0.1.0 → 0.2.0

package/lib/ecosystem/ui/marks.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Every mark is drawn in the same 32×32 box, on a plate of the site's own
-// colour, so ten marks from ten sites still read as one row. Each keeps the
+// colour, so every mark of the family still reads as one row. 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.
@@ -39,5 +39,11 @@ const GLYPHS = {
     regexp: (alt) => (_jsx("text", { x: "50%", y: "53%", dominantBaseline: "central", textAnchor: "middle", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: "18", fontWeight: "700", fill: alt, children: ".*" })),
     // Three residues of a chain, one of them the ligand you came for.
     pdb: (alt) => (_jsxs(_Fragment, { children: [_jsx("g", { stroke: "#ffffff", strokeWidth: "1.9", strokeLinecap: "round", fill: "none", opacity: "0.85", children: _jsx("path", { d: "M9.2 12.4 22 15.4 15.6 23Z" }) }), _jsx("circle", { cx: "9.2", cy: "12.4", r: "3.1", fill: "#ffffff" }), _jsx("circle", { cx: "22", cy: "15.4", r: "3.1", fill: "#ffffff" }), _jsx("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) => (_jsxs(_Fragment, { children: [_jsx("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" }), _jsx("circle", { cx: "19", cy: "9", r: "3", fill: alt })] })),
+    // The site's own favicon: the double harpoon, one direction per colour.
+    equilibrium: (alt) => (_jsxs("g", { fill: "none", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M6.5 12.5h17l-4-4", stroke: "#ffffff" }), _jsx("path", { d: "M25.5 19.5h-17l4 4", stroke: alt })] })),
+    // A chain of monomers, one of them the comonomer written into it.
+    polycarp: (alt) => (_jsxs(_Fragment, { children: [_jsx("path", { d: "M6.5 20 12.5 12 19.5 20 25.5 12", fill: "none", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("circle", { cx: "6.5", cy: "20", r: "3", fill: "#ffffff" }), _jsx("circle", { cx: "12.5", cy: "12", r: "3", fill: "#ffffff" }), _jsx("circle", { cx: "19.5", cy: "20", r: "3", fill: alt }), _jsx("circle", { cx: "25.5", cy: "12", r: "3", fill: "#ffffff" })] })),
 };
 //# sourceMappingURL=marks.js.map

package/lib/ecosystem/ui/marks.js.map

@@ -1 +1 @@
-{"version":3,"file":"marks.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/marks.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"marks.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/marks.tsx"],"names":[],"mappings":";AAIA,0EAA0E;AAC1E,6EAA6E;AAC7E,4EAA4E;AAC5E,8EAA8E;AAC9E,8BAA8B;AAC9B,MAAM,UAAU,GAAkB,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAYrE;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAElC,OAAO,CACL,eACE,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,iBACP,MAAM,EAClB,SAAS,EAAC,OAAO,aAEjB,eACE,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAC/B,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAChC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACrB,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,GACtB,EACD,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAC9B,CACP,CAAC;AACJ,CAAC;AAED,4DAA4D;AAC5D,MAAM,MAAM,GAA+C;IACzD,uEAAuE;IACvE,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACd,aACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,GAAG,EACX,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,kBAAS,MAAM,EAAC,oDAAoD,GAAG,EACvE,eAAM,CAAC,EAAC,oBAAoB,GAAG,IAC7B,CACL;IACD,sEAAsE;IACtE,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACZ,8BACE,aACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,eAAM,CAAC,EAAC,0DAA0D,GAAG,EACrE,eAAM,CAAC,EAAC,uDAAuD,GAAG,IAChE,EACJ,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAE,GAAG,GAAI,EAC9C,iBAAQ,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAE,GAAG,GAAI,EACjD,iBAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAE,GAAG,GAAI,IAC/C,CACJ;IACD,0DAA0D;IAC1D,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACf,8BACE,eACE,CAAC,EAAC,wDAAwD,EAC1D,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,KAAK,EACjB,cAAc,EAAC,OAAO,GACtB,EACF,eACE,CAAC,EAAC,cAAc,EAChB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,GAAG,EACX,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACrB,IACD,CACJ;IACD,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,aAAG,aAAa,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,aACpD,eAAM,CAAC,EAAC,UAAU,EAAC,MAAM,EAAC,SAAS,GAAG,EACtC,eAAM,CAAC,EAAC,UAAU,EAAC,MAAM,EAAE,GAAG,GAAI,EAClC,eAAM,CAAC,EAAC,WAAW,EAAC,MAAM,EAAC,SAAS,GAAG,IACrC,CACL;IACD,yEAAyE;IACzE,8EAA8E;IAC9E,+CAA+C;IAC/C,MAAM,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAClB,aAAG,QAAQ,EAAC,SAAS,EAAC,SAAS,EAAC,mCAAmC,aACjE,eACE,IAAI,EAAE,MAAM,EACZ,CAAC,EAAC,4QAA4Q,GAC9Q,EACF,eACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,uVAAuV,GACzV,IACA,CACL;IACD,wDAAwD;IACxD,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACd,8BACE,aACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,eAAM,CAAC,EAAC,SAAS,GAAG,EACpB,eAAM,CAAC,EAAC,sCAAsC,GAAG,IAC/C,EACJ,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAE,GAAG,GAAI,EAC5C,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAE,GAAG,GAAI,EAC3C,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAE,GAAG,GAAI,IAC5C,CACJ;IACD,oDAAoD;IACpD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACZ,8BACE,eAAM,CAAC,EAAC,MAAM,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,GAAG,GAAI,EACrE,eACE,CAAC,EAAC,mCAAmC,EACrC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,IACD,CACJ;IACD,0EAA0E;IAC1E,yEAAyE;IACzE,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACb,8BACE,eACE,CAAC,EAAC,+DAA+D,EACjE,IAAI,EAAC,SAAS,GACd,EACF,eACE,CAAC,EAAC,6DAA6D,EAC/D,IAAI,EAAE,GAAG,GACT,EACF,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,GAAG,IACjD,CACJ;IACD,qEAAqE;IACrE,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACf,eACE,CAAC,EAAC,KAAK,EACP,CAAC,EAAC,KAAK,EACP,gBAAgB,EAAC,SAAS,EAC1B,UAAU,EAAC,QAAQ,EACnB,UAAU,EAAC,gDAAgD,EAC3D,QAAQ,EAAC,IAAI,EACb,UAAU,EAAC,KAAK,EAChB,IAAI,EAAE,GAAG,mBAGJ,CACR;IACD,kEAAkE;IAClE,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACZ,8BACE,YACE,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,MAAM,YAEd,eAAM,CAAC,EAAC,4BAA4B,GAAG,GACrC,EACJ,iBAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,GAAG,EACpD,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,GAAG,EACnD,iBAAQ,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAE,GAAG,GAAI,IAC9C,CACJ;IACD,yEAAyE;IACzE,WAAW,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,8BACE,eACE,CAAC,EAAC,6CAA6C,EAC/C,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAE,GAAG,GAAI,IACzC,CACJ;IACD,wEAAwE;IACxE,WAAW,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,aACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,eAAM,CAAC,EAAC,mBAAmB,EAAC,MAAM,EAAC,SAAS,GAAG,EAC/C,eAAM,CAAC,EAAC,oBAAoB,EAAC,MAAM,EAAE,GAAG,GAAI,IAC1C,CACL;IACD,kEAAkE;IAClE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,8BACE,eACE,CAAC,EAAC,iCAAiC,EACnC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iBAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,EAChD,iBAAQ,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,EACjD,iBAAQ,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAE,GAAG,GAAI,EAC7C,iBAAQ,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,IAChD,CACJ;CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
   "description": "Assembled React components shared by the cheminfo sites: a Cite button and an ecosystem menu",
   "author": "Luc Patiny",
@@ -64,9 +64,9 @@
   },
   "peerDependencies": {
     "@blueprintjs/core": "^6.18.0",
-    "react": ">=19",
-    "react-dom": ">=19",
-    "react-science": "^21.0.0 || ^22.0.0 || ^23.0.0"
+    "react": "^18.3.1 || >=19",
+    "react-dom": "^18.3.1 || >=19",
+    "react-science": "^20.6.2 || ^21.0.0 || ^22.0.0 || ^23.0.0"
   },
   "repository": {
     "type": "git",

package/src/citation/core/formats.ts

@@ -2,7 +2,7 @@ import type { Reference } from './reference.ts';
 import { doiUrl } from './reference.ts';
 import { renderHtml, renderMarkdown, renderText } from './render.ts';
 import type { CitationStyleId } from './segments.ts';
-import { citationSegments } from './segments.ts';
+import { citationSegments, pageRange } from './segments.ts';
 
 /** The formats the reference can be copied in. */
 export type CitationFormatId =
@@ -113,7 +113,6 @@ export function formatCitation(
 
 function formatBibTeX(reference: Reference): string {
   const { title, journal, year, volume, issue, publisher, doi } = reference;
-  const { firstPage, lastPage } = reference;
   const fields: Array<[string, string]> = [
     ['author', authorList(reference, ' and ')],
     ['title', title],
@@ -121,7 +120,7 @@ function formatBibTeX(reference: Reference): string {
     ['year', String(year)],
     ['volume', volume],
     ['number', issue],
-    ['pages', `${firstPage}--${lastPage}`],
+    ['pages', pageRange(reference, '--')],
     ['publisher', publisher],
     ['doi', doi],
     ['url', doiUrl(reference)],

package/src/citation/core/segments.ts

@@ -164,7 +164,15 @@ function initialsFirst(reference: Reference, lastSeparator: string): string {
   return `${names.slice(0, -1).join(', ')}${lastSeparator}${last}`;
 }
 
-function pageRange(reference: Reference): string {
-  // En dash: what every style asks for in a page range.
-  return `${reference.firstPage}–${reference.lastPage}`;
+/**
+ * The pages of a work, as its styles write them.
+ * @param reference - The work being written.
+ * @param dash - What joins the two ends, an en dash in every style but BibTeX.
+ * @returns One number for a journal that paginates by article number, the
+ * range otherwise.
+ */
+export function pageRange(reference: Reference, dash = '–'): string {
+  const { firstPage, lastPage } = reference;
+  if (firstPage === lastPage) return firstPage;
+  return `${firstPage}${dash}${lastPage}`;
 }

package/src/ecosystem/core/sites.ts

@@ -9,7 +9,10 @@ export type SiteId =
   | 'tex'
   | 'lcao'
   | 'regexp'
-  | 'pdb';
+  | 'pdb'
+  | 'elucidation'
+  | 'equilibrium'
+  | 'polycarp';
 
 export interface SiteName {
   /** First half of the name, set in the site's leading colour. */
@@ -152,6 +155,33 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#b45309',
     mark: { plate: '#2563eb', accent: '#fbbf24' },
   },
+  {
+    id: 'elucidation',
+    name: { lead: 'elucidation', alt: 'cheminfo', dot: true },
+    host: 'elucidation.cheminfo.org',
+    tagline: 'A structure from a 1H NMR spectrum and a formula.',
+    brand: '#7e22ce',
+    brandAlt: '#b45309',
+    mark: { plate: '#7e22ce', accent: '#f59e0b' },
+  },
+  {
+    id: 'equilibrium',
+    name: { lead: 'Equi', alt: 'Librium' },
+    host: 'equilibrium.cheminfo.org',
+    tagline: 'Chemical equilibria: pH, speciation and titration curves.',
+    brand: '#0b5754',
+    brandAlt: '#a56600',
+    mark: { plate: '#0b5754', accent: '#f2a71b' },
+  },
+  {
+    id: 'polycarp',
+    name: { lead: 'Poly', alt: 'Carp' },
+    host: 'polycarp.cheminfo.org',
+    tagline: 'Predict the microstructure of a radical copolymerisation.',
+    brand: '#0d1d37',
+    brandAlt: '#0c9ba3',
+    mark: { plate: '#0d1d37', accent: '#0c9ba3' },
+  },
 ];
 
 /**

package/src/ecosystem/ui/EcosystemLinks.tsx

@@ -0,0 +1,114 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { SiteId } from '../core/sites.ts';
+import { ECOSYSTEM_SITES, siteUrl } from '../core/sites.ts';
+
+import { SiteTile } from './SiteTile.tsx';
+
+// The menu of `EcosystemMenu` lives inside a popover, so its links only enter
+// the document once somebody clicks. A crawler never clicks, so these are the
+// links that carry the family: always rendered, in the page, followed — and
+// each one carrying the name and the one line that says what it opens, as real
+// text rather than a `title` a crawler ignores.
+const SECTION_STYLE: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
+};
+const HEADING_STYLE: CSSProperties = {
+  margin: 0,
+  color: '#5b6875',
+  fontSize: '0.75rem',
+  fontWeight: 600,
+};
+const GRID_STYLE: CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))',
+  gap: 2,
+};
+const ROW_STYLE: CSSProperties = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'baseline',
+  gap: '0.35rem 0.9rem',
+};
+const LINK_STYLE: CSSProperties = {
+  fontSize: '0.8125rem',
+  fontWeight: 600,
+  textDecoration: 'none',
+  whiteSpace: 'nowrap',
+};
+const CURRENT_STYLE: CSSProperties = {
+  ...LINK_STYLE,
+  color: '#8a96a3',
+  cursor: 'default',
+};
+
+export interface EcosystemLinksProps {
+  /**
+   * The site the visitor is already on, which is written but never linked.
+   * @default undefined
+   */
+  currentSiteId?: SiteId;
+  /**
+   * What introduces the section.
+   * @default 'Our other tools'
+   */
+  heading?: string;
+  /**
+   * How much of each site is written. `grid` gives every site its mark, its
+   * name and the line saying what it does — which is what a crawler reads to
+   * know what it is following, so it is the default. `row` writes the names
+   * only, for a footer with no room.
+   * @default 'grid'
+   */
+  layout?: 'grid' | 'row';
+}
+
+/**
+ * Every site of the family as a plain link, for the footer of a site. It is
+ * what lets a crawler — and a visitor with no patience for menus — walk from
+ * one of our tools to the next, so it is rendered on every page rather than
+ * behind a button.
+ * @param props - The site it sits on, what introduces the section, and how much
+ * of each site is written.
+ * @returns The section of links.
+ */
+export function EcosystemLinks(props: EcosystemLinksProps): ReactElement {
+  const { currentSiteId, heading = 'Our other tools', layout = 'grid' } = props;
+
+  return (
+    <nav className="ecosystem-links" style={SECTION_STYLE} aria-label={heading}>
+      <h2 style={HEADING_STYLE}>{heading}</h2>
+      {layout === 'grid' ? (
+        <div style={GRID_STYLE}>
+          {ECOSYSTEM_SITES.map((site) => (
+            <SiteTile
+              key={site.id}
+              site={site}
+              isCurrent={site.id === currentSiteId}
+            />
+          ))}
+        </div>
+      ) : (
+        <div style={ROW_STYLE}>
+          {ECOSYSTEM_SITES.map((site) =>
+            site.id === currentSiteId ? (
+              <span key={site.id} style={CURRENT_STYLE}>
+                {site.host}
+              </span>
+            ) : (
+              <a
+                key={site.id}
+                style={{ ...LINK_STYLE, color: site.brand }}
+                href={siteUrl(site)}
+              >
+                {site.host}
+              </a>
+            ),
+          )}
+        </div>
+      )}
+    </nav>
+  );
+}

package/src/ecosystem/ui/EcosystemMenu.tsx

@@ -1,10 +1,10 @@
 import type { CSSProperties, ReactElement } from 'react';
 import { useState } from 'react';
 
-import type { EcosystemSite, SiteId } from '../core/sites.ts';
-import { ECOSYSTEM_SITES, siteUrl } from '../core/sites.ts';
+import type { SiteId } from '../core/sites.ts';
+import { ECOSYSTEM_SITES } from '../core/sites.ts';
 
-import { SiteMark } from './marks.tsx';
+import { SiteTile } from './SiteTile.tsx';
 
 const PANEL_STYLE: CSSProperties = {
   display: 'flex',
@@ -23,42 +23,7 @@ const GRID_STYLE: CSSProperties = {
   gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))',
   gap: 2,
 };
-const TILE_STYLE: CSSProperties = {
-  display: 'flex',
-  alignItems: 'center',
-  padding: '7px 8px',
-  border: '1px solid transparent',
-  borderRadius: 10,
-  color: '#16202c',
-  gap: 10,
-  textDecoration: 'none',
-  transition: 'background 120ms, border-color 120ms, transform 120ms',
-};
-const MARK_HOLDER_STYLE: CSSProperties = {
-  display: 'flex',
-  transition: 'transform 160ms',
-};
-const TEXT_STYLE: CSSProperties = { minWidth: 0 };
-const NAME_STYLE: CSSProperties = {
-  display: 'flex',
-  alignItems: 'baseline',
-  fontSize: '0.9375rem',
-  fontWeight: 700,
-  letterSpacing: '-0.01em',
-  gap: 6,
-  whiteSpace: 'nowrap',
-};
-const HERE_STYLE: CSSProperties = {
-  fontSize: '0.625rem',
-  fontWeight: 700,
-  letterSpacing: '0.04em',
-  textTransform: 'uppercase',
-};
-const TAGLINE_STYLE: CSSProperties = {
-  color: '#5b6875',
-  fontSize: '0.75rem',
-  lineHeight: 1.35,
-};
+
 export interface EcosystemMenuProps {
   /**
    * The site the visitor is already on, which is shown but never linked.
@@ -69,7 +34,9 @@ export interface EcosystemMenuProps {
 
 /**
  * What the ecosystem button opens: every site of the family, each behind its
- * own little logo and the two colours it owns.
+ * own little logo and the two colours it owns. It lives in a popover, so a
+ * crawler never reaches it — `EcosystemLinks` is what carries the family
+ * through the page itself.
  * @param props - The site the visitor is already on.
  * @returns The grid of sites.
  */
@@ -88,104 +55,10 @@ export function EcosystemMenu(props: EcosystemMenuProps): ReactElement {
             isCurrent={site.id === currentSiteId}
             isHovered={hovered === site.id}
             onHover={setHovered}
+            newTab
           />
         ))}
       </div>
     </div>
   );
 }
-
-interface SiteTileProps {
-  site: EcosystemSite;
-  isCurrent: boolean;
-  isHovered: boolean;
-  onHover: (id: SiteId | null) => void;
-}
-
-/**
- * One site: its mark, its name in its own colours, and what it does.
- * @param props - The site, and whether it is the current or the hovered one.
- * @returns The tile.
- */
-function SiteTile(props: SiteTileProps): ReactElement {
-  const { site, isCurrent, isHovered, onHover } = props;
-  const lit = isHovered && !isCurrent;
-
-  const body = (
-    <>
-      <div
-        style={{
-          ...MARK_HOLDER_STYLE,
-          transform: lit ? 'scale(1.08) rotate(-6deg)' : 'none',
-        }}
-      >
-        <SiteMark site={site} />
-      </div>
-      <div style={TEXT_STYLE}>
-        <div style={NAME_STYLE}>
-          <span>
-            <span style={{ color: site.brand }}>{site.name.lead}</span>
-            {site.name.dot ? <span style={{ color: '#8a96a3' }}>.</span> : null}
-            <span style={{ color: site.brandAlt }}>{site.name.alt}</span>
-          </span>
-          {isCurrent ? (
-            <span style={{ ...HERE_STYLE, color: site.brandAlt }}>
-              you are here
-            </span>
-          ) : null}
-        </div>
-        <div style={TAGLINE_STYLE}>{site.tagline}</div>
-      </div>
-    </>
-  );
-
-  const style: CSSProperties = {
-    ...TILE_STYLE,
-    background: tint(site, isCurrent, lit),
-    borderColor: borderOf(site, isCurrent, lit),
-    transform: lit ? 'translateY(-1px)' : 'none',
-    cursor: isCurrent ? 'default' : 'pointer',
-  };
-
-  if (isCurrent) return <div style={style}>{body}</div>;
-
-  return (
-    <a
-      style={style}
-      href={siteUrl(site)}
-      title={site.host}
-      target="_blank"
-      rel="noreferrer"
-      onMouseEnter={() => {
-        onHover(site.id);
-      }}
-      onMouseLeave={() => {
-        onHover(null);
-      }}
-      onFocus={() => {
-        onHover(site.id);
-      }}
-      onBlur={() => {
-        onHover(null);
-      }}
-    >
-      {body}
-    </a>
-  );
-}
-
-// A tile lights up in the colour of the site it opens, never in ours: the
-// pointer moving down the grid is what makes the ten pairs of colours read.
-function tint(site: EcosystemSite, isCurrent: boolean, lit: boolean): string {
-  if (isCurrent) return '#f5f7fa';
-  return lit ? `color-mix(in oklab, ${site.brand} 9%, white)` : 'transparent';
-}
-
-function borderOf(
-  site: EcosystemSite,
-  isCurrent: boolean,
-  lit: boolean,
-): string {
-  if (isCurrent) return '#dfe3e8';
-  return lit ? `color-mix(in oklab, ${site.brand} 32%, white)` : 'transparent';
-}

package/src/ecosystem/ui/SiteTile.tsx

@@ -0,0 +1,148 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { EcosystemSite, SiteId } from '../core/sites.ts';
+import { siteUrl } from '../core/sites.ts';
+
+import { SiteMark } from './marks.tsx';
+
+const TILE_STYLE: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  padding: '7px 8px',
+  border: '1px solid transparent',
+  borderRadius: 10,
+  color: '#16202c',
+  gap: 10,
+  textDecoration: 'none',
+  transition: 'background 120ms, border-color 120ms, transform 120ms',
+};
+const MARK_HOLDER_STYLE: CSSProperties = {
+  display: 'flex',
+  transition: 'transform 160ms',
+};
+const TEXT_STYLE: CSSProperties = { minWidth: 0 };
+const NAME_STYLE: CSSProperties = {
+  display: 'flex',
+  alignItems: 'baseline',
+  fontSize: '0.9375rem',
+  fontWeight: 700,
+  letterSpacing: '-0.01em',
+  gap: 6,
+  whiteSpace: 'nowrap',
+};
+const HERE_STYLE: CSSProperties = {
+  fontSize: '0.625rem',
+  fontWeight: 700,
+  letterSpacing: '0.04em',
+  textTransform: 'uppercase',
+};
+const TAGLINE_STYLE: CSSProperties = {
+  color: '#5b6875',
+  fontSize: '0.75rem',
+  lineHeight: 1.35,
+};
+
+export interface SiteTileProps {
+  /** The site the tile opens. */
+  site: EcosystemSite;
+  /** Whether this is the site the visitor is already on. */
+  isCurrent: boolean;
+  /**
+   * Whether the pointer is on it, which lights it in its own colour.
+   * @default false
+   */
+  isHovered?: boolean;
+  /**
+   * Told which site the pointer moved onto, or null when it left.
+   * @default undefined
+   */
+  onHover?: (id: SiteId | null) => void;
+  /**
+   * Whether the link opens a tab of its own. A menu the visitor opened on
+   * purpose does; a footer does not.
+   * @default false
+   */
+  newTab?: boolean;
+}
+
+/**
+ * One site: its mark, its name in its own colours, and what it does. The name
+ * and the tagline are real text — that is what a crawler reads to know what it
+ * is following, so neither is ever a `title` attribute.
+ * @param props - The site, whether it is the current or the hovered one, and
+ * how the link opens.
+ * @returns The tile.
+ */
+export function SiteTile(props: SiteTileProps): ReactElement {
+  const { site, isCurrent, isHovered = false, onHover, newTab = false } = props;
+  const lit = isHovered && !isCurrent;
+
+  const body = (
+    <>
+      <div
+        style={{
+          ...MARK_HOLDER_STYLE,
+          transform: lit ? 'scale(1.08) rotate(-6deg)' : 'none',
+        }}
+      >
+        <SiteMark site={site} />
+      </div>
+      <div style={TEXT_STYLE}>
+        <div style={NAME_STYLE}>
+          <span>
+            <span style={{ color: site.brand }}>{site.name.lead}</span>
+            {site.name.dot ? <span style={{ color: '#8a96a3' }}>.</span> : null}
+            <span style={{ color: site.brandAlt }}>{site.name.alt}</span>
+          </span>
+          {isCurrent ? (
+            <span style={{ ...HERE_STYLE, color: site.brandAlt }}>
+              you are here
+            </span>
+          ) : null}
+        </div>
+        <div style={TAGLINE_STYLE}>{site.tagline}</div>
+      </div>
+    </>
+  );
+
+  const style: CSSProperties = {
+    ...TILE_STYLE,
+    background: tint(site, isCurrent, lit),
+    borderColor: borderOf(site, isCurrent, lit),
+    transform: lit ? 'translateY(-1px)' : 'none',
+    cursor: isCurrent ? 'default' : 'pointer',
+  };
+
+  if (isCurrent) return <div style={style}>{body}</div>;
+
+  return (
+    <a
+      style={style}
+      href={siteUrl(site)}
+      target={newTab ? '_blank' : undefined}
+      rel={newTab ? 'noreferrer' : undefined}
+      onMouseEnter={() => onHover?.(site.id)}
+      onMouseLeave={() => onHover?.(null)}
+      onFocus={() => onHover?.(site.id)}
+      onBlur={() => onHover?.(null)}
+    >
+      {body}
+    </a>
+  );
+}
+
+// A tile lights up in the colour of the site it opens, never in ours: the
+// pointer moving down the grid is what makes the pairs of colours read.
+function tint(site: EcosystemSite, isCurrent: boolean, lit: boolean): string {
+  if (isCurrent) return '#f5f7fa';
+  return lit ? `color-mix(in oklab, ${site.brand} 9%, white)` : 'transparent';
+}
+
+function borderOf(
+  site: EcosystemSite,
+  isCurrent: boolean,
+  lit: boolean,
+): string {
+  if (isCurrent) return '#dfe3e8';
+  return lit ? `color-mix(in oklab, ${site.brand} 32%, white)` : 'transparent';
+}

package/src/ecosystem/ui/index.ts

@@ -1,6 +1,10 @@
 export type { EcosystemButtonProps } from './EcosystemButton.tsx';
 export { EcosystemButton } from './EcosystemButton.tsx';
+export type { EcosystemLinksProps } from './EcosystemLinks.tsx';
+export { EcosystemLinks } from './EcosystemLinks.tsx';
 export type { EcosystemMenuProps } from './EcosystemMenu.tsx';
 export { EcosystemMenu } from './EcosystemMenu.tsx';
 export type { SiteMarkProps } from './marks.tsx';
 export { SiteMark } from './marks.tsx';
+export type { SiteTileProps } from './SiteTile.tsx';
+export { SiteTile } from './SiteTile.tsx';

package/src/ecosystem/ui/marks.tsx

@@ -3,7 +3,7 @@ import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import type { EcosystemSite, SiteId } from '../core/sites.ts';
 
 // Every mark is drawn in the same 32×32 box, on a plate of the site's own
-// colour, so ten marks from ten sites still read as one row. Each keeps the
+// colour, so every mark of the family still reads as one row. 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.
@@ -204,4 +204,47 @@ const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <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" />
+    </>
+  ),
 };