react-cheminfo 0.11.0 → 0.12.0

package/lib/ecosystem/ui/EcosystemLinks.js

@@ -1,32 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ECOSYSTEM_SITES, siteUrl } from "../core/sites.js";
-import { SiteTile } from "./SiteTile.js";
+import { joinClassNames } from "../../shared/ui/joinClassNames.js";
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { groupedSites } from "../core/lookup.js";
+import { siteUrl } from "../core/sites.js";
+import { SiteGroupGrid } from "./SiteGroupGrid.js";
+import { ECOSYSTEM_HEADING_STYLE } from "./ecosystemStyles.js";
 // 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.
+// text rather than a `title` a crawler ignores. The topic headings give it the
+// one thing a flat list of addresses cannot: what they have in common.
 const SECTION_STYLE = {
     display: 'flex',
     flexDirection: 'column',
     gap: 8,
 };
-const HEADING_STYLE = {
-    margin: 0,
-    color: 'var(--text-muted, #5b6875)',
-    fontSize: '0.75rem',
-    fontWeight: 600,
-};
-const GRID_STYLE = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))',
-    gap: 2,
+const ROWS_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
 };
 const ROW_STYLE = {
     display: 'flex',
     flexWrap: 'wrap',
     alignItems: 'baseline',
-    gap: '0.35rem 0.9rem',
+    gap: '0.3rem 0.85rem',
+};
+const ROW_LABEL_STYLE = {
+    color: TOKEN.textFaint,
+    fontSize: '0.6875rem',
+    fontWeight: 700,
+    letterSpacing: '0.06em',
+    textTransform: 'uppercase',
 };
 const LINK_STYLE = {
     fontSize: '0.8125rem',
@@ -36,20 +42,20 @@ const LINK_STYLE = {
 };
 const CURRENT_STYLE = {
     ...LINK_STYLE,
-    color: 'var(--text-faint, #8a96a3)',
+    color: TOKEN.textFaint,
     cursor: 'default',
 };
 /**
- * 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.
+ * Every site of the family as a plain link, gathered under its topic, 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) {
-    const { currentSiteId, heading = 'Our other tools', layout = 'grid' } = props;
-    return (_jsxs("nav", { className: "ecosystem-links", style: SECTION_STYLE, "aria-label": heading, children: [_jsx("h2", { style: HEADING_STYLE, children: heading }), layout === 'grid' ? (_jsx("div", { style: GRID_STYLE, children: ECOSYSTEM_SITES.map((site) => (_jsx(SiteTile, { site: site, isCurrent: site.id === currentSiteId }, site.id))) })) : (_jsx("div", { style: ROW_STYLE, children: ECOSYSTEM_SITES.map((site) => site.id === currentSiteId ? (_jsx("span", { style: CURRENT_STYLE, children: site.host }, site.id)) : (_jsx("a", { style: { ...LINK_STYLE, color: site.brand }, href: siteUrl(site), children: site.host }, site.id))) }))] }));
+    const { className, currentSiteId, heading = 'Our other tools', layout = 'grid', } = props;
+    return (_jsxs("nav", { className: joinClassNames('ecosystem-links', className), style: SECTION_STYLE, "aria-label": heading, children: [_jsx("h2", { style: ECOSYSTEM_HEADING_STYLE, children: heading }), layout === 'grid' ? (_jsx(SiteGroupGrid, { currentSiteId: currentSiteId })) : (_jsx("div", { style: ROWS_STYLE, children: groupedSites().map(({ group, sites }) => (_jsxs("div", { style: ROW_STYLE, children: [_jsx("span", { style: ROW_LABEL_STYLE, children: group.label }), sites.map((site) => site.id === currentSiteId ? (_jsx("span", { style: CURRENT_STYLE, children: site.host }, site.id)) : (_jsx("a", { style: { ...LINK_STYLE, color: site.brand }, href: siteUrl(site), children: site.host }, site.id)))] }, group.id))) }))] }));
 }
 //# sourceMappingURL=EcosystemLinks.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EcosystemLinks.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/EcosystemLinks.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAE1C,8EAA8E;AAC9E,8EAA8E;AAC9E,4EAA4E;AAC5E,+EAA+E;AAC/E,gDAAgD;AAChD,MAAM,aAAa,GAAkB;IACnC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AACF,MAAM,aAAa,GAAkB;IACnC,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,4BAA4B;IACnC,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,GAAG;CAChB,CAAC;AACF,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,sCAAsC;IAC3D,GAAG,EAAE,CAAC;CACP,CAAC;AACF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,UAAU;IACtB,GAAG,EAAE,gBAAgB;CACtB,CAAC;AACF,MAAM,UAAU,GAAkB;IAChC,QAAQ,EAAE,WAAW;IACrB,UAAU,EAAE,GAAG;IACf,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,QAAQ;CACrB,CAAC;AACF,MAAM,aAAa,GAAkB;IACnC,GAAG,UAAU;IACb,KAAK,EAAE,4BAA4B;IACnC,MAAM,EAAE,SAAS;CAClB,CAAC;AAuBF;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,aAAa,EAAE,OAAO,GAAG,iBAAiB,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,KAAK,CAAC;IAE9E,OAAO,CACL,eAAK,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,aAAa,gBAAc,OAAO,aACxE,aAAI,KAAK,EAAE,aAAa,YAAG,OAAO,GAAM,EACvC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CACnB,cAAK,KAAK,EAAE,UAAU,YACnB,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC7B,KAAC,QAAQ,IAEP,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAI,CAAC,EAAE,KAAK,aAAa,IAF/B,IAAI,CAAC,EAAE,CAGZ,CACH,CAAC,GACE,CACP,CAAC,CAAC,CAAC,CACF,cAAK,KAAK,EAAE,SAAS,YAClB,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAC5B,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC,CAAC,CAC1B,eAAoB,KAAK,EAAE,aAAa,YACrC,IAAI,CAAC,IAAI,IADD,IAAI,CAAC,EAAE,CAEX,CACR,CAAC,CAAC,CAAC,CACF,YAEE,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAC3C,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,YAElB,IAAI,CAAC,IAAI,IAJL,IAAI,CAAC,EAAE,CAKV,CACL,CACF,GACG,CACP,IACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"EcosystemLinks.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/EcosystemLinks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,8EAA8E;AAC9E,8EAA8E;AAC9E,4EAA4E;AAC5E,+EAA+E;AAC/E,+EAA+E;AAC/E,uEAAuE;AACvE,MAAM,aAAa,GAAkB;IACnC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AACF,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AACF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,UAAU;IACtB,GAAG,EAAE,gBAAgB;CACtB,CAAC;AACF,MAAM,eAAe,GAAkB;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,QAAQ,EAAE,WAAW;IACrB,UAAU,EAAE,GAAG;IACf,aAAa,EAAE,QAAQ;IACvB,aAAa,EAAE,WAAW;CAC3B,CAAC;AACF,MAAM,UAAU,GAAkB;IAChC,QAAQ,EAAE,WAAW;IACrB,UAAU,EAAE,GAAG;IACf,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,QAAQ;CACrB,CAAC;AACF,MAAM,aAAa,GAAkB;IACnC,GAAG,UAAU;IACb,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,MAAM,EAAE,SAAS;CAClB,CAAC;AA6BF;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EACJ,SAAS,EACT,aAAa,EACb,OAAO,GAAG,iBAAiB,EAC3B,MAAM,GAAG,MAAM,GAChB,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,eACE,SAAS,EAAE,cAAc,CAAC,iBAAiB,EAAE,SAAS,CAAC,EACvD,KAAK,EAAE,aAAa,gBACR,OAAO,aAEnB,aAAI,KAAK,EAAE,uBAAuB,YAAG,OAAO,GAAM,EACjD,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CACnB,KAAC,aAAa,IAAC,aAAa,EAAE,aAAa,GAAI,CAChD,CAAC,CAAC,CAAC,CACF,cAAK,KAAK,EAAE,UAAU,YACnB,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACxC,eAAoB,KAAK,EAAE,SAAS,aAClC,eAAM,KAAK,EAAE,eAAe,YAAG,KAAK,CAAC,KAAK,GAAQ,EACjD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAClB,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC,CAAC,CAC1B,eAAoB,KAAK,EAAE,aAAa,YACrC,IAAI,CAAC,IAAI,IADD,IAAI,CAAC,EAAE,CAEX,CACR,CAAC,CAAC,CAAC,CACF,YAEE,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAC3C,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,YAElB,IAAI,CAAC,IAAI,IAJL,IAAI,CAAC,EAAE,CAKV,CACL,CACF,KAhBO,KAAK,CAAC,EAAE,CAiBZ,CACP,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/lib/ecosystem/ui/EcosystemMenu.d.ts

@@ -1,19 +1,29 @@
 import type { ReactElement } from 'react';
 import type { SiteId } from '../core/sites.ts';
+/** What the Tools menu needs. */
 export interface EcosystemMenuProps {
     /**
      * The site the visitor is already on, which is shown but never linked.
      * @default undefined
      */
     currentSiteId?: SiteId;
+    /**
+     * Class names added to the root element, after the component's own.
+     * @default undefined
+     */
+    className?: string;
 }
 /**
- * What the ecosystem button opens: every site of the family, each behind its
- * 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.
+ * What the ecosystem button opens: every site of the family, gathered under the
+ * topic it belongs to, each behind its own little logo and the two colours it
+ * owns.
+ *
+ * The topics are what make the menu answer a question a flat grid of tiles
+ * never could — which of these is for a first-year course, and which for
+ * a research project. 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.
+ * @returns The topics and their sites.
  */
 export declare function EcosystemMenu(props: EcosystemMenuProps): ReactElement;
 //# sourceMappingURL=EcosystemMenu.d.ts.map

package/lib/ecosystem/ui/EcosystemMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EcosystemMenu.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/EcosystemMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAuB/C,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAqBrE"}
+{"version":3,"file":"EcosystemMenu.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/EcosystemMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAe/C,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAYrE"}

package/lib/ecosystem/ui/EcosystemMenu.js

@@ -1,35 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { ECOSYSTEM_SITES } from "../core/sites.js";
-import { SiteTile } from "./SiteTile.js";
+import { joinClassNames } from "../../shared/ui/joinClassNames.js";
+import { SiteGroupGrid } from "./SiteGroupGrid.js";
+import { ECOSYSTEM_HEADING_STYLE } from "./ecosystemStyles.js";
 const PANEL_STYLE = {
     display: 'flex',
-    width: 'min(34rem, 90vw)',
+    width: 'min(62rem, 92vw)',
+    maxHeight: 'min(72vh, 44rem)',
     flexDirection: 'column',
-    padding: 12,
-    gap: 8,
-};
-const HEADING_STYLE = {
-    color: 'var(--text-muted, #5b6875)',
-    fontSize: '0.75rem',
-    fontWeight: 600,
-};
-const GRID_STYLE = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))',
-    gap: 2,
+    padding: '12px 16px 4px',
+    gap: 10,
+    overflowY: 'auto',
 };
 /**
- * What the ecosystem button opens: every site of the family, each behind its
- * 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.
+ * What the ecosystem button opens: every site of the family, gathered under the
+ * topic it belongs to, each behind its own little logo and the two colours it
+ * owns.
+ *
+ * The topics are what make the menu answer a question a flat grid of tiles
+ * never could — which of these is for a first-year course, and which for
+ * a research project. 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.
+ * @returns The topics and their sites.
  */
 export function EcosystemMenu(props) {
-    const { currentSiteId } = props;
-    const [hovered, setHovered] = useState(null);
-    return (_jsxs("div", { className: "ecosystem-menu", style: PANEL_STYLE, children: [_jsx("div", { style: HEADING_STYLE, children: "Our other tools, all in the browser" }), _jsx("div", { style: GRID_STYLE, children: ECOSYSTEM_SITES.map((site) => (_jsx(SiteTile, { site: site, isCurrent: site.id === currentSiteId, isHovered: hovered === site.id, onHover: setHovered, newTab: true }, site.id))) })] }));
+    const { className, currentSiteId } = props;
+    return (_jsxs("div", { className: joinClassNames('ecosystem-menu', className), style: PANEL_STYLE, children: [_jsx("div", { style: ECOSYSTEM_HEADING_STYLE, children: "Our tools, all in the browser" }), _jsx(SiteGroupGrid, { currentSiteId: currentSiteId, lit: true, newTab: true })] }));
 }
 //# sourceMappingURL=EcosystemMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EcosystemMenu.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/EcosystemMenu.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAE1C,MAAM,WAAW,GAAkB;IACjC,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,kBAAkB;IACzB,aAAa,EAAE,QAAQ;IACvB,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;CACP,CAAC;AACF,MAAM,aAAa,GAAkB;IACnC,KAAK,EAAE,4BAA4B;IACnC,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,GAAG;CAChB,CAAC;AACF,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,sCAAsC;IAC3D,GAAG,EAAE,CAAC;CACP,CAAC;AAUF;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAChC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE5D,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,WAAW,aAChD,cAAK,KAAK,EAAE,aAAa,oDAA2C,EACpE,cAAK,KAAK,EAAE,UAAU,YACnB,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC7B,KAAC,QAAQ,IAEP,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAI,CAAC,EAAE,KAAK,aAAa,EACpC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC,EAAE,EAC9B,OAAO,EAAE,UAAU,EACnB,MAAM,UALD,IAAI,CAAC,EAAE,CAMZ,CACH,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"EcosystemMenu.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/EcosystemMenu.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,MAAM,WAAW,GAAkB;IACjC,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,aAAa,EAAE,QAAQ;IACvB,OAAO,EAAE,eAAe;IACxB,GAAG,EAAE,EAAE;IACP,SAAS,EAAE,MAAM;CAClB,CAAC;AAgBF;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAE3C,OAAO,CACL,eACE,SAAS,EAAE,cAAc,CAAC,gBAAgB,EAAE,SAAS,CAAC,EACtD,KAAK,EAAE,WAAW,aAElB,cAAK,KAAK,EAAE,uBAAuB,8CAAqC,EACxE,KAAC,aAAa,IAAC,aAAa,EAAE,aAAa,EAAE,GAAG,QAAC,MAAM,SAAG,IACtD,CACP,CAAC;AACJ,CAAC"}

package/lib/ecosystem/ui/SiteGroupGrid.d.ts

@@ -0,0 +1,30 @@
+import type { ReactElement } from 'react';
+import type { SiteId } from '../core/sites.ts';
+/** What a grid of the family's topics needs. */
+interface SiteGroupGridProps {
+    /**
+     * The site the visitor is already on, which is written but never linked.
+     * @default undefined
+     */
+    currentSiteId?: SiteId;
+    /**
+     * Whether a tile lights up in its own colour under the pointer, which a menu
+     * the visitor opened on purpose does and a footer does not.
+     * @default false
+     */
+    lit?: boolean;
+    /**
+     * Whether each link opens a tab of its own.
+     * @default false
+     */
+    newTab?: boolean;
+}
+/**
+ * Every site of the family as a tile, gathered under its topic, in the columns
+ * the footer and the Tools menu both draw.
+ * @param props - The site it sits on, and how the tiles behave.
+ * @returns The grid of topics.
+ */
+export declare function SiteGroupGrid(props: SiteGroupGridProps): ReactElement;
+export {};
+//# sourceMappingURL=SiteGroupGrid.d.ts.map

package/lib/ecosystem/ui/SiteGroupGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteGroupGrid.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteGroupGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAY/C,gDAAgD;AAChD,UAAU,kBAAkB;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAsBrE"}

package/lib/ecosystem/ui/SiteGroupGrid.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { groupedSites } from "../core/lookup.js";
+import { SiteGroupSection } from "./SiteGroupSection.js";
+import { SiteTile } from "./SiteTile.js";
+const TOPICS_STYLE = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(17rem, 1fr))',
+    alignItems: 'start',
+    gap: '4px 28px',
+};
+/**
+ * Every site of the family as a tile, gathered under its topic, in the columns
+ * the footer and the Tools menu both draw.
+ * @param props - The site it sits on, and how the tiles behave.
+ * @returns The grid of topics.
+ */
+export function SiteGroupGrid(props) {
+    const { currentSiteId, lit = false, newTab = false } = props;
+    const [hovered, setHovered] = useState(null);
+    return (_jsx("div", { style: TOPICS_STYLE, children: groupedSites().map(({ group, sites }) => (_jsx(SiteGroupSection, { group: group, children: sites.map((site) => (_jsx(SiteTile, { site: site, isCurrent: site.id === currentSiteId, isHovered: lit && hovered === site.id, onHover: lit ? setHovered : undefined, newTab: newTab }, site.id))) }, group.id))) }));
+}
+//# sourceMappingURL=SiteGroupGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SiteGroupGrid.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteGroupGrid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAE1C,MAAM,YAAY,GAAkB;IAClC,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,sCAAsC;IAC3D,UAAU,EAAE,OAAO;IACnB,GAAG,EAAE,UAAU;CAChB,CAAC;AAsBF;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,aAAa,EAAE,GAAG,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE5D,OAAO,CACL,cAAK,KAAK,EAAE,YAAY,YACrB,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACxC,KAAC,gBAAgB,IAAgB,KAAK,EAAE,KAAK,YAC1C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,QAAQ,IAEP,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAI,CAAC,EAAE,KAAK,aAAa,EACpC,SAAS,EAAE,GAAG,IAAI,OAAO,KAAK,IAAI,CAAC,EAAE,EACrC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACrC,MAAM,EAAE,MAAM,IALT,IAAI,CAAC,EAAE,CAMZ,CACH,CAAC,IAVmB,KAAK,CAAC,EAAE,CAWZ,CACpB,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/lib/ecosystem/ui/SiteGroupSection.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { SiteGroup } from '../core/groups.ts';
+/** What one topic of the family needs. */
+interface SiteGroupSectionProps {
+    /** The topic being headed. */
+    group: SiteGroup;
+    /** The sites written under it. */
+    children: ReactNode;
+}
+/**
+ * One topic of the family: its heading, the line saying who it is for, and the
+ * sites under it.
+ * The heading id is unique to each render, because the footer and the open
+ * Tools menu write the same topics into one document.
+ * @param props - The topic, and its sites.
+ * @returns The section.
+ */
+export declare function SiteGroupSection(props: SiteGroupSectionProps): ReactElement;
+export {};
+//# sourceMappingURL=SiteGroupSection.d.ts.map

package/lib/ecosystem/ui/SiteGroupSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteGroupSection.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteGroupSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AA8BnD,0CAA0C;AAC1C,UAAU,qBAAqB;IAC7B,8BAA8B;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAa3E"}

package/lib/ecosystem/ui/SiteGroupSection.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+// A topic is separated by a hairline and a small heading rather than by a
+// colour of its own: every site brings its own two, and a
+// menu that also colours its headings stops reading as a list of tools.
+const SECTION_STYLE = {
+    paddingTop: 12,
+    borderTop: `1px solid ${TOKEN.border}`,
+    marginBottom: 16,
+};
+const LABEL_STYLE = {
+    margin: 0,
+    color: TOKEN.text,
+    fontSize: '0.6875rem',
+    fontWeight: 700,
+    letterSpacing: '0.07em',
+    textTransform: 'uppercase',
+};
+const BLURB_STYLE = {
+    margin: '2px 0 8px',
+    color: TOKEN.textFaint,
+    fontSize: '0.72rem',
+    lineHeight: 1.4,
+};
+const BODY_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+};
+/**
+ * One topic of the family: its heading, the line saying who it is for, and the
+ * sites under it.
+ * The heading id is unique to each render, because the footer and the open
+ * Tools menu write the same topics into one document.
+ * @param props - The topic, and its sites.
+ * @returns The section.
+ */
+export function SiteGroupSection(props) {
+    const { group, children } = props;
+    const headingId = `${useId()}ecosystem-${group.id}`;
+    return (_jsxs("section", { style: SECTION_STYLE, "aria-labelledby": headingId, children: [_jsx("h3", { id: headingId, style: LABEL_STYLE, children: group.label }), _jsx("p", { style: BLURB_STYLE, children: group.blurb }), _jsx("div", { style: BODY_STYLE, children: children })] }));
+}
+//# sourceMappingURL=SiteGroupSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SiteGroupSection.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteGroupSection.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAG1D,0EAA0E;AAC1E,0DAA0D;AAC1D,wEAAwE;AACxE,MAAM,aAAa,GAAkB;IACnC,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,aAAa,KAAK,CAAC,MAAM,EAAE;IACtC,YAAY,EAAE,EAAE;CACjB,CAAC;AACF,MAAM,WAAW,GAAkB;IACjC,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,KAAK,CAAC,IAAI;IACjB,QAAQ,EAAE,WAAW;IACrB,UAAU,EAAE,GAAG;IACf,aAAa,EAAE,QAAQ;IACvB,aAAa,EAAE,WAAW;CAC3B,CAAC;AACF,MAAM,WAAW,GAAkB;IACjC,MAAM,EAAE,WAAW;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,GAAG;CAChB,CAAC;AACF,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CACP,CAAC;AAUF;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,SAAS,GAAG,GAAG,KAAK,EAAE,aAAa,KAAK,CAAC,EAAE,EAAE,CAAC;IAEpD,OAAO,CACL,mBAAS,KAAK,EAAE,aAAa,qBAAmB,SAAS,aACvD,aAAI,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,YAClC,KAAK,CAAC,KAAK,GACT,EACL,YAAG,KAAK,EAAE,WAAW,YAAG,KAAK,CAAC,KAAK,GAAK,EACxC,cAAK,KAAK,EAAE,UAAU,YAAG,QAAQ,GAAO,IAChC,CACX,CAAC;AACJ,CAAC"}

package/lib/ecosystem/ui/SiteTheme.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import type { SiteId } from '../core/sites.ts';
+/** What the site palette needs. */
 export interface SiteThemeProps {
     /** The site whose palette the page takes. */
     siteId: SiteId;

package/lib/ecosystem/ui/SiteTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SiteTheme.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG/C,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAE7D"}
+{"version":3,"file":"SiteTheme.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG/C,mCAAmC;AACnC,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAE7D"}

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

@@ -1 +1 @@
-{"version":3,"file":"SiteTheme.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteTheme.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOlD;;;;;;;;;GASG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,OAAO,0BAAQ,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,GAAS,CAAC;AACtD,CAAC"}
+{"version":3,"file":"SiteTheme.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteTheme.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAQlD;;;;;;;;;GASG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,OAAO,0BAAQ,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,GAAS,CAAC;AACtD,CAAC"}

package/lib/ecosystem/ui/SiteTile.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import type { EcosystemSite, SiteId } from '../core/sites.ts';
+/** What one tile of the family needs. */
 export interface SiteTileProps {
     /** The site the tile opens. */
     site: EcosystemSite;
@@ -21,6 +22,11 @@ export interface SiteTileProps {
      * @default false
      */
     newTab?: boolean;
+    /**
+     * Class names added to the root element.
+     * @default undefined
+     */
+    className?: string;
 }
 /**
  * One site: its mark, its name in its own colours, and what it does. The name

package/lib/ecosystem/ui/SiteTile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SiteTile.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AA0C9D,MAAM,WAAW,aAAa;IAC5B,+BAA+B;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,0DAA0D;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CA0D3D"}
+{"version":3,"file":"SiteTile.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AA6C9D,yCAAyC;AACzC,MAAM,WAAW,aAAa;IAC5B,+BAA+B;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,0DAA0D;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAmE3D"}

package/lib/ecosystem/ui/SiteTile.js

@@ -1,19 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { siteNameColors } from "../core/nameColors.js";
 import { siteUrl } from "../core/sites.js";
 import { SiteMark } from "./marks.js";
 const TILE_STYLE = {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     padding: '7px 8px',
     border: '1px solid transparent',
     borderRadius: 10,
-    color: 'var(--text, #16202c)',
+    color: TOKEN.text,
     gap: 10,
     textDecoration: 'none',
     transition: 'background 120ms, border-color 120ms, transform 120ms',
 };
 const MARK_HOLDER_STYLE = {
     display: 'flex',
+    // The name sits on the first line, so the mark answers that line rather than
+    // the middle of a tagline that may run to three.
+    marginTop: 1,
     transition: 'transform 160ms',
 };
 const TEXT_STYLE = { minWidth: 0 };
@@ -33,7 +38,7 @@ const HERE_STYLE = {
     textTransform: 'uppercase',
 };
 const TAGLINE_STYLE = {
-    color: 'var(--text-muted, #5b6875)',
+    color: TOKEN.textMuted,
     fontSize: '0.75rem',
     lineHeight: 1.35,
 };
@@ -46,12 +51,13 @@ const TAGLINE_STYLE = {
  * @returns The tile.
  */
 export function SiteTile(props) {
-    const { site, isCurrent, isHovered = false, onHover, newTab = false } = props;
+    const { className, site, isCurrent, isHovered = false, onHover, newTab = false, } = props;
     const lit = isHovered && !isCurrent;
+    const colors = siteNameColors(site);
     const body = (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                     ...MARK_HOLDER_STYLE,
                     transform: lit ? 'scale(1.08) rotate(-6deg)' : 'none',
-                }, children: _jsx(SiteMark, { site: site }) }), _jsxs("div", { style: TEXT_STYLE, children: [_jsxs("div", { style: NAME_STYLE, children: [_jsxs("span", { children: [_jsx("span", { style: { color: site.brand }, children: site.name.lead }), site.name.dot ? (_jsx("span", { style: { color: 'var(--text-faint, #8a96a3)' }, children: "." })) : null, _jsx("span", { style: { color: site.brandAlt }, children: site.name.alt })] }), isCurrent ? (_jsx("span", { style: { ...HERE_STYLE, color: site.brandAlt }, children: "you are here" })) : null] }), _jsx("div", { style: TAGLINE_STYLE, children: site.tagline })] })] }));
+                }, children: _jsx(SiteMark, { site: site }) }), _jsxs("div", { style: TEXT_STYLE, children: [_jsxs("div", { style: NAME_STYLE, children: [_jsxs("span", { children: [_jsx("span", { style: { color: colors.lead }, children: site.name.lead }), site.name.dot ? (_jsx("span", { style: { color: colors.dot }, children: "." })) : null, _jsx("span", { style: { color: colors.alt }, children: site.name.alt })] }), isCurrent ? (_jsx("span", { style: { ...HERE_STYLE, color: site.brandAlt }, children: "you are here" })) : null] }), _jsx("div", { style: TAGLINE_STYLE, children: site.tagline })] })] }));
     const style = {
         ...TILE_STYLE,
         background: tint(site, isCurrent, lit),
@@ -61,18 +67,18 @@ export function SiteTile(props) {
     };
     if (isCurrent)
         return _jsx("div", { style: style, children: body });
-    return (_jsx("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), children: body }));
+    return (_jsx("a", { className: className, 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), children: body }));
 }
 // 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, isCurrent, lit) {
     if (isCurrent)
-        return 'var(--surface-sunken, #f5f7fa)';
+        return TOKEN.surfaceSunken;
     return lit ? `color-mix(in oklab, ${site.brand} 9%, white)` : 'transparent';
 }
 function borderOf(site, isCurrent, lit) {
     if (isCurrent)
-        return 'var(--border, #dfe3e8)';
+        return TOKEN.border;
     return lit ? `color-mix(in oklab, ${site.brand} 32%, white)` : 'transparent';
 }
 //# sourceMappingURL=SiteTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SiteTile.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteTile.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SiteTile.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/SiteTile.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAa,CAAC;AAEvC,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,YAAY;IACxB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,uBAAuB;IAC/B,YAAY,EAAE,EAAE;IAChB,KAAK,EAAE,KAAK,CAAC,IAAI;IACjB,GAAG,EAAE,EAAE;IACP,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,uDAAuD;CACpE,CAAC;AACF,MAAM,iBAAiB,GAAkB;IACvC,OAAO,EAAE,MAAM;IACf,6EAA6E;IAC7E,iDAAiD;IACjD,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,iBAAiB;CAC9B,CAAC;AACF,MAAM,UAAU,GAAkB,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;AAClD,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,UAAU;IACtB,QAAQ,EAAE,WAAW;IACrB,UAAU,EAAE,GAAG;IACf,aAAa,EAAE,SAAS;IACxB,GAAG,EAAE,CAAC;IACN,UAAU,EAAE,QAAQ;CACrB,CAAC;AACF,MAAM,UAAU,GAAkB;IAChC,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,GAAG;IACf,aAAa,EAAE,QAAQ;IACvB,aAAa,EAAE,WAAW;CAC3B,CAAC;AACF,MAAM,aAAa,GAAkB;IACnC,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,IAAI;CACjB,CAAC;AA+BF;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,MAAM,GAAG,KAAK,GACf,GAAG,KAAK,CAAC;IACV,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC,SAAS,CAAC;IACpC,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IAEpC,MAAM,IAAI,GAAG,CACX,8BACE,cACE,KAAK,EAAE;oBACL,GAAG,iBAAiB;oBACpB,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,MAAM;iBACtD,YAED,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,GACpB,EACN,eAAK,KAAK,EAAE,UAAU,aACpB,eAAK,KAAK,EAAE,UAAU,aACpB,2BACE,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,YAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAQ,EAC3D,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACf,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,EAAE,kBAAU,CAC7C,CAAC,CAAC,CAAC,IAAI,EACR,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,EAAE,YAAG,IAAI,CAAC,IAAI,CAAC,GAAG,GAAQ,IACrD,EACN,SAAS,CAAC,CAAC,CAAC,CACX,eAAM,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,6BAE7C,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,EACN,cAAK,KAAK,EAAE,aAAa,YAAG,IAAI,CAAC,OAAO,GAAO,IAC3C,IACL,CACJ,CAAC;IAEF,MAAM,KAAK,GAAkB;QAC3B,GAAG,UAAU;QACb,UAAU,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC;QACtC,WAAW,EAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC;QAC3C,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM;QAC5C,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;KAC1C,CAAC;IAEF,IAAI,SAAS;QAAE,OAAO,cAAK,KAAK,EAAE,KAAK,YAAG,IAAI,GAAO,CAAC;IAEtD,OAAO,CACL,YACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,EACnB,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACrC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EACjC,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,YAE5B,IAAI,GACH,CACL,CAAC;AACJ,CAAC;AAED,0EAA0E;AAC1E,wEAAwE;AACxE,SAAS,IAAI,CAAC,IAAmB,EAAE,SAAkB,EAAE,GAAY;IACjE,IAAI,SAAS;QAAE,OAAO,KAAK,CAAC,aAAa,CAAC;IAC1C,OAAO,GAAG,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;AAC9E,CAAC;AAED,SAAS,QAAQ,CACf,IAAmB,EACnB,SAAkB,EAClB,GAAY;IAEZ,IAAI,SAAS;QAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IACnC,OAAO,GAAG,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,KAAK,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;AAC/E,CAAC"}

package/lib/ecosystem/ui/Wordmark.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import type { SiteId } from '../core/sites.ts';
+/** What a site's written name needs. */
 export interface WordmarkProps {
     /** The site whose name is written. */
     siteId: SiteId;

package/lib/ecosystem/ui/Wordmark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wordmark.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/Wordmark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,WAAW,aAAa;IAC5B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAsB3D"}
+{"version":3,"file":"Wordmark.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/Wordmark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAKzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE/C,wCAAwC;AACxC,MAAM,WAAW,aAAa;IAC5B,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAwB3D"}

package/lib/ecosystem/ui/Wordmark.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { joinClassNames } from "../../shared/ui/joinClassNames.js";
 import { siteById } from "../core/lookup.js";
+import { siteNameColors } from "../core/nameColors.js";
 /**
  * The name of a site, written in the two colours it owns.
  *
@@ -13,12 +15,10 @@ import { siteById } from "../core/lookup.js";
 export function Wordmark(props) {
     const { siteId, size = 17, className } = props;
     const site = siteById(siteId);
-    return (_jsxs("span", { className: className ? `wordmark ${className}` : 'wordmark', style: { ...WORDMARK_STYLE, fontSize: size }, children: [_jsx("span", { className: "wordmark__lead", style: { color: site.brand }, children: site.name.lead }), site.name.dot ? (_jsx("span", { className: "wordmark__dot", style: { color: DOT_COLOR }, children: "." })) : null, _jsx("span", { className: "wordmark__alt", style: { color: site.brandAlt }, children: site.name.alt })] }));
+    const { lead, alt, dot } = site.name;
+    const colors = siteNameColors(site);
+    return (_jsxs("span", { className: joinClassNames('wordmark', className), style: { ...WORDMARK_STYLE, fontSize: size }, children: [_jsx("span", { className: "wordmark__lead", style: { color: colors.lead }, children: lead }), dot ? (_jsx("span", { className: "wordmark__dot", style: { color: colors.dot }, children: "." })) : null, _jsx("span", { className: "wordmark__alt", style: { color: colors.alt }, children: alt })] }));
 }
-// 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 = {
     letterSpacing: '-0.01em',
     whiteSpace: 'nowrap',

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

@@ -1 +1 @@
-{"version":3,"file":"Wordmark.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/Wordmark.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAoB7C;;;;;;;;;GASG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC/C,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAE9B,OAAO,CACL,gBACE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,EAC3D,KAAK,EAAE,EAAE,GAAG,cAAc,EAAE,QAAQ,EAAE,IAAI,EAAE,aAE5C,eAAM,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,YAC1D,IAAI,CAAC,IAAI,CAAC,IAAI,GACV,EACN,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACf,eAAM,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,kBAEpD,CACR,CAAC,CAAC,CAAC,IAAI,EACR,eAAM,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,YAC5D,IAAI,CAAC,IAAI,CAAC,GAAG,GACT,IACF,CACR,CAAC;AACJ,CAAC;AAED,4EAA4E;AAC5E,6EAA6E;AAC7E,wBAAwB;AACxB,MAAM,SAAS,GAAG,4BAA4B,CAAC;AAE/C,MAAM,cAAc,GAAkB;IACpC,aAAa,EAAE,SAAS;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC"}
+{"version":3,"file":"Wordmark.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/Wordmark.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAqBvD;;;;;;;;;GASG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC/C,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;IACrC,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IAEpC,OAAO,CACL,gBACE,SAAS,EAAE,cAAc,CAAC,UAAU,EAAE,SAAS,CAAC,EAChD,KAAK,EAAE,EAAE,GAAG,cAAc,EAAE,QAAQ,EAAE,IAAI,EAAE,aAE5C,eAAM,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,YAC3D,IAAI,GACA,EACN,GAAG,CAAC,CAAC,CAAC,CACL,eAAM,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,EAAE,kBAErD,CACR,CAAC,CAAC,CAAC,IAAI,EACR,eAAM,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,EAAE,YACzD,GAAG,GACC,IACF,CACR,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAkB;IACpC,aAAa,EAAE,SAAS;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC"}

package/lib/ecosystem/ui/ecosystemStyles.d.ts

@@ -0,0 +1,4 @@
+import type { CSSProperties } from 'react';
+/** The small line that introduces the family, above the footer and the menu. */
+export declare const ECOSYSTEM_HEADING_STYLE: CSSProperties;
+//# sourceMappingURL=ecosystemStyles.d.ts.map

package/lib/ecosystem/ui/ecosystemStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ecosystemStyles.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/ecosystemStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,gFAAgF;AAChF,eAAO,MAAM,uBAAuB,EAAE,aAKrC,CAAC"}

package/lib/ecosystem/ui/ecosystemStyles.js

@@ -0,0 +1,9 @@
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+/** The small line that introduces the family, above the footer and the menu. */
+export const ECOSYSTEM_HEADING_STYLE = {
+    margin: 0,
+    color: TOKEN.textMuted,
+    fontSize: '0.75rem',
+    fontWeight: 600,
+};
+//# sourceMappingURL=ecosystemStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ecosystemStyles.js","sourceRoot":"","sources":["../../../src/ecosystem/ui/ecosystemStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAE1D,gFAAgF;AAChF,MAAM,CAAC,MAAM,uBAAuB,GAAkB;IACpD,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,KAAK,CAAC,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,GAAG;CAChB,CAAC"}

package/lib/ecosystem/ui/glyphs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glyphs.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/glyphs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE/C,4DAA4D;AAC5D,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,SAAS,CAyU7D,CAAC"}
+{"version":3,"file":"glyphs.d.ts","sourceRoot":"","sources":["../../../src/ecosystem/ui/glyphs.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE/C,4DAA4D;AAC5D,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,SAAS,CA4V7D,CAAC"}

package/lib/ecosystem/ui/glyphs.js

@@ -10,11 +10,15 @@ export const GLYPHS = {
     vcl: (alt) => (_jsxs(_Fragment, { children: [_jsxs("g", { fill: "none", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M16 9.5 10.8 12.5 10.8 18.5 16 21.5 21.2 18.5 21.2 12.5Z" }), _jsx("path", { d: "M16 9.5 16 5.5M21.2 18.5 24.8 20.6M10.8 18.5 7.2 20.6" })] }), _jsx("circle", { cx: "16", cy: "4.6", r: "2.6", fill: alt }), _jsx("circle", { cx: "25.6", cy: "21.2", r: "2.6", fill: alt }), _jsx("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) => (_jsxs(_Fragment, { children: [_jsx("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" }), _jsx("path", { d: "M5.5 25.5h21", fill: "none", stroke: alt, strokeWidth: "3", strokeLinecap: "round" })] })),
+    // Two arrows crossing in opposite directions: one notation turned into
+    // another and back, which is the whole of what this one does.
+    openbabel: (alt) => (_jsxs("g", { fill: "none", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M6.5 12.5h19", stroke: "#ffffff" }), _jsx("path", { d: "M21 8l4.5 4.5L21 17", stroke: "#ffffff" }), _jsx("path", { d: "M25.5 21.5h-19", stroke: alt }), _jsx("path", { d: "M11 17l-4.5 4.5L11 26", stroke: alt })] })),
     // An isotopic pattern: the answer this one is asked for most.
     chemcalc: (alt) => (_jsxs("g", { strokeLinecap: "round", strokeWidth: "3.4", fill: "none", children: [_jsx("path", { d: "M9 24V15", stroke: "#ffffff" }), _jsx("path", { d: "M16 24V7", stroke: alt }), _jsx("path", { d: "M23 24V18", stroke: "#ffffff" })] })),
-    // Three peaks of a mixture over the funnel that narrows them to one compound,
-    // which is the dereplication this one does.
-    derepflow: (alt) => (_jsxs(_Fragment, { children: [_jsxs("g", { stroke: "#ffffff", strokeWidth: "4", strokeLinecap: "round", fill: "none", children: [_jsx("path", { d: "M7 15.6V9.4" }), _jsx("path", { d: "M16 15.6V4.6" }), _jsx("path", { d: "M25 15.6v-4.6" })] }), _jsx("path", { d: "M6.2 20.4 16 27 25.8 20.4", stroke: alt, strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] })),
+    // The ring and the substituent dots of the DerepFlow logo do not survive
+    // 16 px, so the mark keeps the two elements that carry its meaning: the
+    // compound, and the tick that says it has been identified.
+    derepflow: (alt) => (_jsxs(_Fragment, { children: [_jsx("polygon", { points: "12.5,3.9 20.0,8.2 20.0,16.8 12.5,21.1 5.0,16.8 5.0,8.2", stroke: "#ffffff", strokeWidth: "2.6", strokeLinejoin: "round", fill: "none" }), _jsx("circle", { cx: "23.5", cy: "23.5", r: "7.6", fill: alt }), _jsx("path", { d: "M20.2 23.6 22.7 26.4 26.9 21", stroke: "#ffffff", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] })),
     // 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.