(
+ () =>
+ edges.flatMap((edge) =>
+ ARC_LAYERS.map((layer) => ({
+ layer,
+ edgeId: edge.id,
+ startLat: edge.startLat,
+ startLng: edge.startLng,
+ endLat: edge.endLat,
+ endLng: edge.endLng,
+ intensity: quantise(edgeIntensity[edge.id] ?? 0),
+ })),
+ ),
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [edges, edgeSig],
+ )
+
+ const selectedMarker = useMemo(
+ () => markers.find((marker) => marker.id === SELECTED_MARKER_ID) ?? markers[0],
+ [markers],
+ )
+
+ // The native html layer positions and centres the OUTER node on the projected
+ // point each frame; the inner label offsets itself (nodes float above their
+ // marker, edge labels sit on the arc apex).
+ const makeAnchorElement = useCallback((datum: object) => {
+ const anchor = datum as Anchor
+ const outer = document.createElement('div')
+ outer.className = `sim-anchor sim-anchor--${anchor.kind}`
+ const label = document.createElement('div')
+ label.className = `sim-label sim-label--${anchor.kind}${
+ anchor.illustrative ? ' sim-label--illustrative' : ''
+ }`
+ label.textContent = anchor.text
+ outer.appendChild(label)
+ return outer
+ }, [])
+
+ const handleGlobeReady = useCallback(() => {
+ const globe = globeRef.current
+ if (!globe) return
+ const mobile = window.innerWidth <= 600
+ globe.pointOfView(
+ { lat: 7, lng: -54, altitude: mobile ? globeTok.cameraMobile : globeTok.cameraDesktop },
+ 0,
+ )
+
+ const controls = globe.controls()
+ controls.autoRotate = true
+ controls.autoRotateSpeed = globeTok.autoRotateSpeed
+ controls.enableDamping = true
+ controls.dampingFactor = 0.08
+ controls.minDistance = globe.getGlobeRadius() * 1.38
+ controls.maxDistance = globe.getGlobeRadius() * 6.2
+ }, [])
+
+ const mobile = size.width <= 600
+ const globeOffset: [number, number] = [0, mobile ? -10 : -8]
+
+ return (
+
+ (datum as PointDatum).lat}
+ pointLng={(datum) => (datum as PointDatum).lng}
+ pointColor={(datum: object) => colorForPoint(datum as PointDatum)}
+ pointAltitude={markerTok.altitude}
+ pointRadius={(datum: object) => {
+ const point = datum as PointDatum
+ const base = point.id === SELECTED_MARKER_ID ? markerTok.selectedRadius : markerTok.radius
+ return base * (1 + Math.min(1, point.intensity) * 0.7)
+ }}
+ pointResolution={18}
+ pointsMerge={false}
+ pointsTransitionDuration={0}
+ ringsData={selectedMarker ? [selectedMarker] : []}
+ ringLat={(datum) => (datum as Marker).lat}
+ ringLng={(datum) => (datum as Marker).lng}
+ ringAltitude={markerTok.altitude * 0.5}
+ ringColor={[color.text, 'rgba(185, 233, 255, 0.42)', 'rgba(67, 183, 255, 0)']}
+ ringMaxRadius={markerTok.haloRadius}
+ ringPropagationSpeed={markerTok.haloSpeed}
+ ringRepeatPeriod={markerTok.haloRepeatMs}
+ ringResolution={96}
+ arcsData={arcData}
+ arcStartLat={(datum) => (datum as ArcDatum).startLat}
+ arcStartLng={(datum) => (datum as ArcDatum).startLng}
+ arcEndLat={(datum) => (datum as ArcDatum).endLat}
+ arcEndLng={(datum) => (datum as ArcDatum).endLng}
+ arcAltitudeAutoScale={arcTok.altitudeAutoScale}
+ arcColor={(datum: object) => colorForArc(datum as ArcDatum)}
+ arcStroke={(datum: object) => arcSpec((datum as ArcDatum).layer).stroke}
+ arcDashLength={(datum: object) =>
+ (datum as ArcDatum).layer === 'core' ? arcTok.coreDashLength : 1
+ }
+ arcDashGap={(datum: object) => ((datum as ArcDatum).layer === 'core' ? arcTok.coreDashGap : 0)}
+ arcDashAnimateTime={(datum: object) =>
+ (datum as ArcDatum).layer === 'core' ? arcTok.coreDashAnimateMs : 0
+ }
+ arcsTransitionDuration={0}
+ htmlElementsData={anchors}
+ htmlLat={(datum: object) => (datum as Anchor).lat}
+ htmlLng={(datum: object) => (datum as Anchor).lng}
+ htmlAltitude={(datum: object) => (datum as Anchor).alt}
+ htmlElement={makeAnchorElement}
+ />
+
+ )
+}
diff --git a/web/src/globe/geo.ts b/web/src/globe/geo.ts
new file mode 100644
index 0000000..50f181e
--- /dev/null
+++ b/web/src/globe/geo.ts
@@ -0,0 +1,103 @@
+/**
+ * Geographic helpers for placing annotations on the rendered globe.
+ *
+ * Edge-label placement is the non-obvious piece. globe.gl (three-globe) does NOT
+ * draw an arc along the geographic great circle: it builds a cubic Bézier through
+ * the great-circle points at t=0.25 and t=0.75, each lifted to 1.5× the arc's
+ * apex altitude, from surface start to surface end. For a long arc at a small
+ * fixed altitude the Bézier apex sinks below the surface and the middle of the
+ * arc is occluded — so labels must anchor to the ACTUAL Bézier apex, not the
+ * great-circle midpoint, and the arc altitude must scale with length.
+ *
+ * `arcApex` replicates three-globe's `calcCurve` exactly (same control-point
+ * placement, altitude auto-scaling, and axis convention) and returns the apex as
+ * lat/lng/alt, so a label anchored there sits on the rendered curve.
+ */
+
+export interface LatLng {
+ lat: number
+ lng: number
+}
+
+export interface Apex {
+ lat: number
+ lng: number
+ alt: number
+}
+
+const DEG = Math.PI / 180
+
+/** Wrap a longitude in degrees into the (-180, 180] range. */
+function wrapLng(lng: number): number {
+ return ((((lng + 180) % 360) + 360) % 360) - 180
+}
+
+type Vec3 = [number, number, number]
+
+/** three-globe's polar→cartesian on a unit sphere (radius 1 + altitude). */
+function polarToCartesian(lat: number, lng: number, alt: number): Vec3 {
+ const phi = (90 - lat) * DEG
+ const theta = (90 - lng) * DEG
+ const r = 1 + alt
+ const sinPhi = Math.sin(phi)
+ return [r * sinPhi * Math.cos(theta), r * Math.cos(phi), r * sinPhi * Math.sin(theta)]
+}
+
+/** Inverse of `polarToCartesian`. */
+function cartesianToPolar([x, y, z]: Vec3): Apex {
+ const r = Math.hypot(x, y, z)
+ const lat = 90 - (Math.acos(y / r) / DEG)
+ const lng = wrapLng(90 - (Math.atan2(z, x) / DEG))
+ return { lat, lng, alt: r - 1 }
+}
+
+function dot3(a: Vec3, b: Vec3): number {
+ return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]
+}
+
+/** Great-circle (spherical) interpolation between two lat/lng points. */
+function slerp(a: LatLng, b: LatLng, t: number): LatLng {
+ const va = polarToCartesian(a.lat, a.lng, 0)
+ const vb = polarToCartesian(b.lat, b.lng, 0)
+ const omega = Math.acos(Math.max(-1, Math.min(1, dot3(va, vb))))
+ if (omega === 0) return { lat: a.lat, lng: a.lng }
+ const s1 = Math.sin((1 - t) * omega) / Math.sin(omega)
+ const s2 = Math.sin(t * omega) / Math.sin(omega)
+ const p = cartesianToPolar([
+ s1 * va[0] + s2 * vb[0],
+ s1 * va[1] + s2 * vb[1],
+ s1 * va[2] + s2 * vb[2],
+ ])
+ return { lat: p.lat, lng: p.lng }
+}
+
+/**
+ * The rendered apex of a globe.gl arc, replicating three-globe's `calcCurve`.
+ *
+ * `altitudeAutoScale` matches the `arcAltitudeAutoScale` set on the globe: with a
+ * null arc altitude, three-globe uses `geoDistance/2 * autoScale`. Control points
+ * sit at the great-circle 0.25/0.75 points lifted to 1.5× that altitude; the apex
+ * is the cubic Bézier evaluated at t=0.5.
+ */
+export function arcApex(a: LatLng, b: LatLng, altitudeAutoScale: number): Apex {
+ const va = polarToCartesian(a.lat, a.lng, 0)
+ const vb = polarToCartesian(b.lat, b.lng, 0)
+ const angular = Math.acos(Math.max(-1, Math.min(1, dot3(va, vb))))
+ const altitude = (angular / 2) * altitudeAutoScale
+ const cpAlt = altitude + altitude * 0.5 // three-globe calcAltCp(0, altitude)
+
+ const g025 = slerp(a, b, 0.25)
+ const g075 = slerp(a, b, 0.75)
+ const p0 = polarToCartesian(a.lat, a.lng, 0)
+ const c1 = polarToCartesian(g025.lat, g025.lng, cpAlt)
+ const c2 = polarToCartesian(g075.lat, g075.lng, cpAlt)
+ const p3 = polarToCartesian(b.lat, b.lng, 0)
+
+ // Cubic Bézier at t=0.5: 0.125·P0 + 0.375·C1 + 0.375·C2 + 0.125·P3.
+ const mid: Vec3 = [
+ 0.125 * p0[0] + 0.375 * c1[0] + 0.375 * c2[0] + 0.125 * p3[0],
+ 0.125 * p0[1] + 0.375 * c1[1] + 0.375 * c2[1] + 0.125 * p3[1],
+ 0.125 * p0[2] + 0.375 * c1[2] + 0.375 * c2[2] + 0.125 * p3[2],
+ ]
+ return cartesianToPolar(mid)
+}
diff --git a/web/src/globe/labels.css b/web/src/globe/labels.css
new file mode 100644
index 0000000..b7356a1
--- /dev/null
+++ b/web/src/globe/labels.css
@@ -0,0 +1,92 @@
+.sim-globe-stage {
+ position: absolute;
+ inset: 0;
+ overflow: hidden;
+}
+
+.sim-globe-stage > div:first-child {
+ position: relative;
+ z-index: 0;
+}
+
+/*
+ * Native htmlElementsData anchor. globe.gl positions and centres this outer node
+ * on the projected point every frame and hides it when it falls behind the
+ * globe; the inner label offsets itself relative to this zero-size origin.
+ */
+.sim-anchor {
+ position: absolute;
+ width: 0;
+ height: 0;
+ pointer-events: none;
+}
+
+.sim-label {
+ position: absolute;
+ max-width: 210px;
+ padding: 4px 8px 4px 9px;
+ overflow: hidden;
+ border: 1px solid var(--sim-color-border);
+ border-radius: var(--sim-radius-sm);
+ background: linear-gradient(115deg, rgba(4, 13, 25, 0.9), rgba(7, 20, 35, 0.72));
+ box-shadow: 0 7px 24px rgba(0, 0, 0, 0.32), inset 2px 0 0 rgba(126, 213, 255, 0.36);
+ color: var(--sim-color-text);
+ font: 550 10px/1.2 var(--sim-font-body);
+ letter-spacing: 0.025em;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ user-select: none;
+ pointer-events: none;
+}
+
+/* Node label floats above the marker with a short connecting stem. */
+.sim-label--node {
+ left: 50%;
+ bottom: 10px;
+ transform: translateX(-50%);
+}
+
+.sim-label--node::after {
+ position: absolute;
+ left: 50%;
+ bottom: -7px;
+ width: 1px;
+ height: 7px;
+ background: linear-gradient(var(--sim-color-accent), transparent);
+ content: '';
+}
+
+/* Edge label floats just above the arc apex so the corridor stays a single
+ unbroken line underneath it (the anchor sits on the apex itself). */
+.sim-label--edge {
+ left: 50%;
+ bottom: 6px;
+ transform: translateX(-50%);
+ padding: 3px 7px;
+ border-color: rgba(93, 172, 226, 0.16);
+ background: rgba(3, 12, 24, 0.74);
+ box-shadow: none;
+ color: #a9cce4;
+ font-family: var(--sim-font-mono);
+ font-size: 8px;
+ font-weight: 450;
+ letter-spacing: 0.04em;
+}
+
+.sim-label--illustrative {
+ border-style: dashed;
+ border-color: rgba(246, 197, 91, 0.56);
+ box-shadow: 0 7px 24px rgba(0, 0, 0, 0.32), inset 2px 0 0 rgba(246, 197, 91, 0.65);
+}
+
+@media (max-width: 600px) {
+ .sim-label {
+ max-width: 42vw;
+ padding: 3px 6px;
+ font-size: 9px;
+ }
+
+ .sim-label--edge {
+ font-size: 7px;
+ }
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 0000000..df0d576
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import { staticJsonSource } from './data/staticJsonSource.ts'
+
+// Composition root: the ONLY place a concrete DataSource is chosen. This swap
+// from `fixtureSource` to `staticJsonSource` (the exported run) touches no view
+// file — the seam's proof. A Postgres source later swaps in here the same way.
+createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/web/src/playback/Timeline.tsx b/web/src/playback/Timeline.tsx
new file mode 100644
index 0000000..4680ddd
--- /dev/null
+++ b/web/src/playback/Timeline.tsx
@@ -0,0 +1,68 @@
+import type { EnvState } from '../data/types'
+import './timeline.css'
+
+interface TimelineProps {
+ period: number
+ minPeriod: number
+ maxPeriod: number
+ playing: boolean
+ env: EnvState | null
+ onSeek: (period: number) => void
+ onTogglePlay: () => void
+}
+
+const numberFmt = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 })
+
+/** Bottom-centre transport bar: play/pause, a scrubber, and a live env readout. */
+export default function Timeline({
+ period,
+ minPeriod,
+ maxPeriod,
+ playing,
+ env,
+ onSeek,
+ onTogglePlay,
+}: TimelineProps) {
+ const shock = env ? Math.round(env.shockScale * 100) : 0
+ return (
+
+
+
+
+
onSeek(Number(event.target.value))}
+ aria-label="Simulation step"
+ />
+
+
+ step {period} / {maxPeriod}
+
+ {env && (
+ <>
+
+
+ soy {numberFmt.format(env.sojaPrice)}
+
+
+ 0 ? 'sim-timeline-shock sim-timeline-shock--on' : 'sim-timeline-shock'}>
+ shock {shock}%
+
+
+ )}
+
+
+