react-cheminfo 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "description": "Assembled React components shared by the cheminfo sites: a Cite button and an ecosystem menu",
   "author": "Luc Patiny",
@@ -13,6 +13,7 @@
   "type": "module",
   "exports": {
     "./core": "./lib/core.js",
+    "./orbital": "./lib/orbital.js",
     "./ui": "./lib/ui.js"
   },
   "files": [
@@ -52,6 +53,7 @@
     "eslint": "^9.39.5",
     "eslint-config-cheminfo-react": "^20.1.0",
     "eslint-config-cheminfo-typescript": "^22.1.0",
+    "molstar": "^5.11.0",
     "prettier": "^3.9.6",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
@@ -66,7 +68,8 @@
     "@blueprintjs/core": "^6.18.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"
+    "react-science": "^20.6.2 || ^21.0.0 || ^22.0.0 || ^23.0.0",
+    "molstar": "^5.11.0"
   },
   "repository": {
     "type": "git",
@@ -75,5 +78,10 @@
   "bugs": {
     "url": "https://github.com/cheminfo/react-cheminfo/issues"
   },
-  "homepage": "https://github.com/cheminfo/react-cheminfo#readme"
+  "homepage": "https://github.com/cheminfo/react-cheminfo#readme",
+  "peerDependenciesMeta": {
+    "molstar": {
+      "optional": true
+    }
+  }
 }

package/src/core.ts

@@ -1,2 +1,3 @@
 export * from './citation/core/index.ts';
 export * from './ecosystem/core/index.ts';
+export * from './orbital/core/index.ts';

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. */
@@ -182,6 +184,24 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#0c9ba3',
     mark: { plate: '#0d1d37', accent: '#0c9ba3' },
   },
+  {
+    id: '3d',
+    name: { lead: '3d', alt: 'cheminfo', dot: true },
+    host: '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',
+    tagline: 'The periodic table, coloured, plotted and taken apart.',
+    brand: '#15803d',
+    brandAlt: '#a16207',
+    mark: { plate: '#15803d', accent: '#fbbf24' },
+  },
 ];
 
 /**

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/marks.tsx

@@ -1,6 +1,8 @@
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { CSSProperties, ReactElement } from 'react';
 
-import type { EcosystemSite, SiteId } from '../core/sites.ts';
+import type { EcosystemSite } from '../core/sites.ts';
+
+import { GLYPHS } from './glyphs.tsx';
 
 // Every mark is drawn in the same 32×32 box, on a plate of the site's own
 // colour, so every mark of the family still reads as one row. Each keeps the
@@ -49,202 +51,3 @@ export function SiteMark(props: SiteMarkProps): ReactElement {
     </svg>
   );
 }
-
-/** Every mark, keyed by site, drawn on top of its plate. */
-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" />
-    </>
-  ),
-};

package/src/orbital/core/atomicGrid.ts

@@ -0,0 +1,115 @@
+/**
+ * Sampling one atomic orbital onto the scalar field the isosurface renderer
+ * consumes.
+ *
+ * The box is sized from the orbital itself rather than fixed: a 1s on fluorine
+ * and a 4f on caesium differ by more than an order of magnitude in extent, and a
+ * box that suits one either buries the other in empty space or slices its lobes
+ * off at a face. {@link enclosingRadius} gives the sphere holding almost all of
+ * the electron, and the cube is drawn around that.
+ *
+ * Pure: no React, no molstar. `src/viewer` turns the returned field into a
+ * surface, and the worker calls this off the main thread.
+ */
+
+import type { AtomicOrbital } from './atomicOrbitals.ts';
+import { hydrogenicParametersOf } from './atomicOrbitals.ts';
+import type { GridBox, OrbitalEvaluator, OrbitalGrid } from './grid.ts';
+import { evaluateGrid } from './grid.ts';
+import { createRadialFunction, enclosingRadius } from './hydrogenic.ts';
+
+/** How finely, and how far out, an orbital is sampled. */
+export interface AtomicGridOptions {
+  /**
+   * Samples along each edge of the cube. The cost is the cube of this, and 56
+   * resolves the radial node of a 3s while staying near 30 ms.
+   * @default 56
+   */
+  resolution?: number;
+  /**
+   * Share of `∫ r²R² dr` the box must contain before padding.
+   * @default 0.985
+   */
+  enclosedFraction?: number;
+  /**
+   * Multiplier applied to the enclosing radius, so the surface closes inside
+   * the box instead of touching a face.
+   * @default 1.15
+   */
+  padding?: number;
+}
+
+/**
+ * Sample an atomic orbital onto a cubic grid centred on its nucleus.
+ * @param orbital - The orbital to draw.
+ * @param options - See {@link AtomicGridOptions}.
+ * @returns The signed field, its layout and its statistics.
+ * @throws {Error} When the resolution is below 2.
+ */
+export function sampleAtomicOrbital(
+  orbital: AtomicOrbital,
+  options: AtomicGridOptions = {},
+): OrbitalGrid {
+  const {
+    resolution = DEFAULT_RESOLUTION,
+    enclosedFraction = DEFAULT_ENCLOSED_FRACTION,
+    padding = DEFAULT_PADDING,
+  } = options;
+  return evaluateGrid(
+    createAtomicOrbitalEvaluator(orbital),
+    atomicGridBox(orbital, enclosedFraction, padding),
+    resolution,
+  );
+}
+
+/**
+ * Build `ψ(x, y, z) = R(r) Y(x, y, z)` for one orbital, centred on the origin.
+ * @param orbital - The orbital to evaluate.
+ * @returns An allocation-free evaluator in ångström, returning Å^(-3/2).
+ */
+export function createAtomicOrbitalEvaluator(
+  orbital: AtomicOrbital,
+): OrbitalEvaluator {
+  const radial = createRadialFunction(hydrogenicParametersOf(orbital));
+  const angular = orbital.harmonic.evaluate;
+  // Every ℓ > 0 harmonic divides by the radius, and the nucleus is a grid point
+  // whenever the resolution is odd, so the singularity is real and is answered
+  // here: only an s orbital has amplitude at r = 0.
+  const atNucleus = orbital.l === 0 ? radial(0) * angular(0, 0, 0, 1) : 0;
+  return (x, y, z) => {
+    const squared = x * x + y * y + z * z;
+    if (squared === 0) return atNucleus;
+    const radius = Math.sqrt(squared);
+    return radial(radius) * angular(x, y, z, radius);
+  };
+}
+
+/**
+ * The cube one orbital is sampled over.
+ * @param orbital - The orbital to fit.
+ * @param enclosedFraction - Share of the electron to contain.
+ * @param padding - Multiplier applied to the enclosing radius.
+ * @returns A cube centred on the nucleus.
+ */
+export function atomicGridBox(
+  orbital: AtomicOrbital,
+  enclosedFraction = DEFAULT_ENCLOSED_FRACTION,
+  padding = DEFAULT_PADDING,
+): GridBox {
+  const half =
+    enclosingRadius(hydrogenicParametersOf(orbital), enclosedFraction) *
+    padding;
+  return {
+    origin: { x: -half, y: -half, z: -half },
+    size: { x: 2 * half, y: 2 * half, z: 2 * half },
+  };
+}
+
+/** Samples per edge; the cost is the cube of it. */
+const DEFAULT_RESOLUTION = 56;
+
+/** A tail past this holds too little density to change the surface. */
+const DEFAULT_ENCLOSED_FRACTION = 0.985;
+
+/** Room for the surface to close before the box ends. */
+const DEFAULT_PADDING = 1.15;