impact-nova 3.0.0-alpha.7 → 3.0.0-alpha.9

package/dist/components/data-display/stereo-scatter/internals/stereo-engine.js

@@ -0,0 +1,519 @@
+import { Scene as N, Raycaster as _, Vector3 as m, WebGLRenderer as V, NeutralToneMapping as B, PCFSoftShadowMap as H, PerspectiveCamera as U, Box3 as W, SphereGeometry as R, MeshPhysicalMaterial as x, InstancedMesh as z, MeshBasicMaterial as j, Mesh as C, LineSegments as M, Color as I, PMREMGenerator as X, HemisphereLight as Y, DirectionalLight as q, PlaneGeometry as Z, ShadowMaterial as Q, DoubleSide as K, EdgesGeometry as J, LineBasicMaterial as $, BufferGeometry as ee, Float32BufferAttribute as te, LineDashedMaterial as se, Fog as ie, Matrix4 as A, Quaternion as oe, Vector2 as ne } from "three";
+import { OrbitControls as re } from "three/addons/controls/OrbitControls.js";
+import { CSS2DRenderer as ae, CSS2DObject as D } from "three/addons/renderers/CSS2DRenderer.js";
+import { ConvexGeometry as he } from "three/addons/geometries/ConvexGeometry.js";
+import { RoomEnvironment as ce } from "three/addons/environments/RoomEnvironment.js";
+import { clamp as g, STEREO_ELEVATION_LIMIT as L, STEREO_VIEW_PRESETS as P, easeInOutCubic as de, lerp as T, shortestAngle as S, orbitOffset as le, easeOutCubic as ue, estimateLabelWidth as me, placeLabels as pe, wedgeStyleForDepth as fe, wedgeStrength as ge, solidWedgePath as be, hashedWedgePath as we, linePath as ve } from "./stereo-math.js";
+import { readStereoTheme as ye } from "./stereo-engine-theme.js";
+import { StereoWedgeBonds as xe } from "./stereo-engine-wedges.js";
+import { StereoAxisFrame as ze } from "./stereo-engine-frame.js";
+const Ce = {
+  molecule: { bonds: "all", hulls: !1, centroid: "atom", atomRadius: 0.042, stretchBonds: !0 },
+  crystal: { bonds: "active", hulls: !0, centroid: "core", atomRadius: 0.032, stretchBonds: !1 }
+}, O = [-1, 1].flatMap((u) => [-1, 1].flatMap((e) => [-1, 1].map((t) => new m(u, e, t)))), F = { vertical: 0.2, horizontal: 0.34 }, E = 30, Me = 6, Ee = 3, Pe = 1.4, y = { top: 0, bottom: 44 }, Se = 950, Re = 720, Ie = 0.6, Ae = 3, De = 0.84, k = 20, Le = 0.24, Te = 120, Oe = 3.5, Fe = "pointer-events-none select-none ms-3 flex items-center gap-1.5 whitespace-nowrap rounded-full border border-stroke-hairline bg-canvas-elevated px-2 py-0.5 text-[11px] font-semibold leading-4 text-content shadow-elevation-card transition-opacity duration-200 motion-reduce:transition-none", G = "http://www.w3.org/2000/svg", ke = [
+  [1, 0, 0],
+  [-1, 0, 0],
+  [0, 1, 0],
+  [0, -1, 0],
+  [0, 0, 1],
+  [0, 0, -1],
+  [1, 1, 1],
+  [1, 1, -1],
+  [1, -1, 1],
+  [1, -1, -1],
+  [-1, 1, 1],
+  [-1, 1, -1],
+  [-1, -1, 1],
+  [-1, -1, -1]
+].map(([u, e, t]) => new m(u, e, t).normalize());
+function f(u) {
+  return new m(u.x, u.y, u.z);
+}
+function Ge(u, e) {
+  let t = 0, s = 0;
+  for (const i of u)
+    t = Math.max(t, Math.abs(i.y - e.y)), s = Math.max(s, Math.hypot(i.x - e.x, i.z - e.z));
+  return { vertical: t, horizontal: s };
+}
+function Ne(u, e) {
+  let t = 0, s = 0, i = 0;
+  for (const a of u) {
+    const c = a.x - e.x, d = a.z - e.z;
+    t += c * c, s += d * d, i += c * d;
+  }
+  const o = P.iso;
+  if (t + s < 1e-6) return o;
+  const n = 0.5 * Math.atan2(2 * i, t - s);
+  return { azimuth: [-n, Math.PI - n].reduce(
+    (a, c) => Math.abs(S(c, o.azimuth)) < Math.abs(S(a, o.azimuth)) ? c : a
+  ), elevation: o.elevation };
+}
+class _e {
+  options;
+  config;
+  theme;
+  renderer;
+  labelRenderer;
+  scene = new N();
+  camera;
+  controls;
+  raycaster = new _();
+  disposables = [];
+  nodes;
+  positions;
+  targets;
+  sceneCenter = new m();
+  /** Atoms shrink as the store count grows so dense networks stay legible. */
+  atomRadius;
+  extents;
+  bestOrbit;
+  clusters;
+  centroidPositions;
+  atoms;
+  centroids;
+  bonds;
+  hulls = [];
+  labels = [];
+  axisFrame;
+  guides;
+  guideMarkers;
+  gizmoParts = [];
+  emphasis = {
+    hiddenClusterIds: /* @__PURE__ */ new Set(),
+    activeClusterId: null,
+    focusedClusterId: null
+  };
+  hoverTarget = null;
+  autoRotate;
+  zoom = 1;
+  baseDistance = 6;
+  size = { width: 1, height: 1 };
+  progress;
+  entranceStart = 0;
+  tween = null;
+  interacting = !1;
+  pointerInside = !1;
+  pointer = null;
+  pointerDown = null;
+  hoverPending = !1;
+  atomsDirty = !0;
+  cameraDirty = !0;
+  needsRender = !0;
+  onScreen = !0;
+  frameId = 0;
+  resizeObserver = null;
+  intersectionObserver = null;
+  envTexture = null;
+  constructor(e) {
+    this.options = e, this.config = Ce[e.variant], this.autoRotate = e.autoRotate, this.progress = e.reducedMotion ? 1 : 0;
+    const { container: t, model: s } = e;
+    this.theme = ye(t, s), this.renderer = new V({ antialias: !0, alpha: !0, powerPreference: "high-performance" }), this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)), this.renderer.setClearColor(0, 0), this.renderer.toneMapping = B, this.renderer.shadowMap.enabled = !0, this.renderer.shadowMap.type = H;
+    const i = this.renderer.domElement;
+    i.style.display = "block", i.style.outline = "none", i.style.touchAction = "none", i.dataset.slot = "stereo-scatter-canvas", t.appendChild(i), this.labelRenderer = new ae();
+    const o = this.labelRenderer.domElement;
+    o.style.position = "absolute", o.style.inset = "0", o.style.pointerEvents = "none", o.style.overflow = "hidden", o.style.zIndex = "0", t.appendChild(o), this.camera = new U(E, 1, 0.1, 60), this.clusters = s.clusters.filter((l) => l.nodes.length > 0), this.centroidPositions = new Map(
+      this.clusters.map((l) => [l.cluster.id, f(l.centroid)])
+    ), this.nodes = this.clusters.flatMap((l) => l.nodes.map((b) => ({ node: b, cluster: l }))), this.positions = this.nodes.map((l) => f(l.node.position)), this.atomRadius = this.config.atomRadius * g(Math.sqrt(Te / Math.max(1, this.nodes.length)), 0.55, 1);
+    const n = this.nodes.map((l) => f(l.node.position).sub(f(l.cluster.centroid))), h = n.reduce((l, b) => l + b.length(), 0) / Math.max(1, n.length), r = this.config.stretchBonds && h > 0 ? g(Le / h, 1, Oe) : 1;
+    this.targets = this.nodes.map(
+      (l, b) => f(l.cluster.centroid).addScaledVector(n[b], r)
+    ), new W().setFromPoints([...this.targets, ...O]).getCenter(this.sceneCenter);
+    const c = Ge([...this.targets, ...O], this.sceneCenter);
+    this.extents = {
+      vertical: c.vertical + F.vertical,
+      horizontal: c.horizontal + F.horizontal
+    }, this.bestOrbit = Ne(this.targets, this.sceneCenter), this.setupLighting();
+    const d = new R(1, 32, 24);
+    this.disposables.push(d);
+    const p = new x({ roughness: 0.3, metalness: 0, clearcoat: 0.85, clearcoatRoughness: 0.22 }), w = new x({ roughness: 0.2, metalness: 0.05, clearcoat: 1, clearcoatRoughness: 0.12 });
+    this.disposables.push(p, w), this.atoms = this.createInstances(d, p, this.nodes.length), this.centroids = this.createInstances(d, w, this.clusters.length), this.bonds = new xe(this.nodes.length), this.scene.add(this.bonds.group), this.disposables.push(this.bonds), this.config.hulls && this.buildHulls(), this.axisFrame = new ze(s, this.theme, e.axes), this.scene.add(this.axisFrame.group), this.disposables.push(this.axisFrame), this.buildShadowPlane(), this.guides = this.buildGuides();
+    const v = new R(1, 16, 12);
+    this.disposables.push(v), this.guideMarkers = new z(
+      v,
+      new j({ color: this.theme.brand, fog: !1 }),
+      Ee
+    ), this.guideMarkers.visible = !1, this.guideMarkers.frustumCulled = !1, this.scene.add(this.guideMarkers), this.buildLabels(), this.buildGizmo(), this.controls = new re(this.camera, i), this.controls.enableZoom = !1, this.controls.enablePan = !1, this.controls.enableDamping = !e.reducedMotion, this.controls.dampingFactor = 0.08, this.controls.rotateSpeed = 0.75, this.controls.autoRotateSpeed = 0.9, this.controls.minPolarAngle = Math.PI / 2 - L, this.controls.maxPolarAngle = Math.PI / 2 + 0.35, this.controls.addEventListener("change", this.handleControlsChange), this.controls.addEventListener("start", this.handleControlsStart), this.controls.addEventListener("end", this.handleControlsEnd), i.addEventListener("pointermove", this.handlePointerMove), i.addEventListener("pointerleave", this.handlePointerLeave), i.addEventListener("pointerdown", this.handlePointerDown), i.addEventListener("pointerup", this.handlePointerUp), i.style.cursor = "grab", this.resizeObserver = new ResizeObserver(() => this.resize()), this.resizeObserver.observe(t), typeof IntersectionObserver < "u" && (this.intersectionObserver = new IntersectionObserver((l) => {
+      this.onScreen = l.some((b) => b.isIntersecting), this.onScreen && (this.needsRender = !0);
+    }), this.intersectionObserver.observe(t)), this.resize(), this.applyPose({
+      target: this.sceneCenter.clone(),
+      orbit: this.orbitForView(e.defaultView),
+      zoom: 1
+    }), this.entranceStart = performance.now(), this.frameId = requestAnimationFrame(this.tick);
+  }
+  setEmphasis(e) {
+    const t = e.focusedClusterId !== this.emphasis.focusedClusterId;
+    if (this.emphasis = e, this.atomsDirty = !0, this.needsRender = !0, !t) return;
+    const s = e.focusedClusterId ? this.clusters.find((o) => o.cluster.id === e.focusedClusterId) : void 0, i = this.readPose();
+    s ? this.tweenTo({
+      target: f(s.centroid),
+      orbit: i.orbit,
+      zoom: g(1.1 / (s.spread * 1.4 + 0.3), 1.3, 2.6)
+    }) : this.tweenTo({ target: this.sceneCenter.clone(), orbit: i.orbit, zoom: 1 });
+  }
+  setAutoRotate(e) {
+    this.autoRotate = e;
+  }
+  setView(e) {
+    this.tweenTo({ ...this.readPose(), orbit: this.orbitForView(e) });
+  }
+  rotateBy(e, t) {
+    const s = this.readPose();
+    this.tweenTo(
+      {
+        ...s,
+        orbit: {
+          azimuth: s.orbit.azimuth + e,
+          elevation: g(s.orbit.elevation + t, -0.35, L)
+        }
+      },
+      260
+    );
+  }
+  zoomBy(e) {
+    const t = this.readPose();
+    this.tweenTo({ ...t, zoom: g(t.zoom * e, Ie, Ae) }, 320);
+  }
+  resetView() {
+    this.tweenTo({
+      target: this.sceneCenter.clone(),
+      orbit: this.orbitForView(this.options.defaultView),
+      zoom: 1
+    });
+  }
+  dispose() {
+    cancelAnimationFrame(this.frameId), this.resizeObserver?.disconnect(), this.intersectionObserver?.disconnect();
+    const e = this.renderer.domElement;
+    e.removeEventListener("pointermove", this.handlePointerMove), e.removeEventListener("pointerleave", this.handlePointerLeave), e.removeEventListener("pointerdown", this.handlePointerDown), e.removeEventListener("pointerup", this.handlePointerUp), this.controls.removeEventListener("change", this.handleControlsChange), this.controls.removeEventListener("start", this.handleControlsStart), this.controls.removeEventListener("end", this.handleControlsEnd), this.controls.dispose(), this.scene.traverse((t) => {
+      if (t instanceof C || t instanceof M || t instanceof z) {
+        t.geometry.dispose();
+        const s = t.material;
+        Array.isArray(s) ? s.forEach((i) => i.dispose()) : s.dispose();
+      }
+      t instanceof D && t.element.remove();
+    });
+    for (const t of this.disposables) t.dispose();
+    this.atoms.dispose(), this.centroids.dispose(), this.envTexture?.dispose(), this.renderer.dispose(), this.renderer.forceContextLoss(), e.remove(), this.labelRenderer.domElement.remove();
+    for (const t of this.gizmoParts)
+      t.path.remove(), t.text.remove();
+  }
+  orbitForView(e) {
+    return e === "iso" ? this.bestOrbit : P[e];
+  }
+  createInstances(e, t, s) {
+    const i = new z(e, t, Math.max(1, s)), o = new I(1, 1, 1);
+    for (let n = 0; n < i.count; n += 1) i.setColorAt(n, o);
+    return i.count = s, i.castShadow = !0, this.scene.add(i), i;
+  }
+  setupLighting() {
+    const e = new X(this.renderer), t = new ce();
+    this.envTexture = e.fromScene(t, 0.04).texture, t.dispose(), e.dispose(), this.scene.environment = this.envTexture, this.scene.environmentIntensity = 0.55;
+    const s = new I(1, 1, 1);
+    this.scene.add(new Y(s, this.theme.foreground, 0.55));
+    const i = new q(s, 1.9);
+    i.position.set(2.4, 5, 3.6), i.castShadow = !0, i.shadow.mapSize.set(1024, 1024), i.shadow.camera.left = -2.4, i.shadow.camera.right = 2.4, i.shadow.camera.top = 2.4, i.shadow.camera.bottom = -2.4, i.shadow.camera.near = 0.5, i.shadow.camera.far = 14, i.shadow.bias = -4e-4, i.shadow.normalBias = 0.02, this.scene.add(i);
+  }
+  buildShadowPlane() {
+    const e = new C(
+      new Z(2.6, 2.6),
+      new Q({ color: this.theme.foreground, opacity: 0.1, transparent: !0 })
+    );
+    e.rotation.x = -Math.PI / 2, e.position.y = -1.001, e.receiveShadow = !0, this.scene.add(e);
+  }
+  buildHulls() {
+    for (const e of this.clusters) {
+      const t = f(e.centroid), s = 0.07, i = [];
+      for (const a of e.nodes) {
+        const c = f(a.position).sub(t);
+        for (const d of ke)
+          i.push(c.clone().addScaledVector(d, s));
+      }
+      const o = this.theme.clusterColors.get(e.cluster.id) ?? this.theme.foreground, n = new he(i), h = new C(
+        n,
+        new x({
+          color: o,
+          transparent: !0,
+          opacity: 0.18,
+          roughness: 0.12,
+          metalness: 0,
+          clearcoat: 1,
+          clearcoatRoughness: 0.08,
+          side: K,
+          depthWrite: !1
+        })
+      );
+      h.position.copy(t), h.userData.clusterId = e.cluster.id, h.renderOrder = 1;
+      const r = new M(
+        new J(n, 28),
+        new $({ color: o, transparent: !0, opacity: 0.5, depthWrite: !1 })
+      );
+      h.add(r), this.scene.add(h), this.hulls.push({ cluster: e, mesh: h, edges: r });
+    }
+  }
+  buildGuides() {
+    const e = new ee();
+    e.setAttribute("position", new te(new Float32Array(Me * 3), 3));
+    const t = new M(
+      e,
+      new se({ color: this.theme.brand, dashSize: 0.04, gapSize: 0.022, fog: !1 })
+    );
+    return t.visible = !1, t.frustumCulled = !1, this.scene.add(t), t;
+  }
+  buildLabels() {
+    for (const e of this.clusters) {
+      const t = document.createElement("div");
+      t.className = Fe, t.dataset.clusterId = e.cluster.id;
+      const s = document.createElement("span");
+      s.className = "size-2 shrink-0 rounded-full", s.style.backgroundColor = e.color;
+      const i = document.createElement("span");
+      i.textContent = e.cluster.label;
+      const o = document.createElement("span");
+      o.className = "font-medium tabular-nums text-content-muted", o.textContent = String(e.nodes.length), t.append(s, i, o), t.setAttribute("aria-hidden", "true");
+      const n = new D(t);
+      n.center.set(0, 0.5), n.position.copy(f(e.centroid)), this.scene.add(n), this.labels.push({ cluster: e, object: n });
+    }
+  }
+  buildGizmo() {
+    const e = this.options.gizmo;
+    if (!e) return;
+    const t = [
+      ["X", new m(1, 0, 0)],
+      ["Y", new m(0, 1, 0)],
+      ["Z", new m(0, 0, 1)]
+    ];
+    for (const [s, i] of t) {
+      const o = document.createElementNS(G, "path"), n = document.createElementNS(G, "text");
+      n.textContent = s, n.setAttribute("text-anchor", "middle"), n.setAttribute("dominant-baseline", "central"), n.setAttribute("font-size", "9"), n.setAttribute("font-weight", "700"), n.setAttribute("fill", "currentColor"), e.append(o, n), this.gizmoParts.push({ path: o, text: n, axis: i });
+    }
+  }
+  handleControlsChange = () => {
+    this.cameraDirty = !0, this.needsRender = !0;
+  };
+  handleControlsStart = () => {
+    this.interacting = !0, this.tween = null, this.renderer.domElement.style.cursor = "grabbing", this.setHover(null);
+  };
+  handleControlsEnd = () => {
+    this.interacting = !1, this.renderer.domElement.style.cursor = "grab";
+  };
+  handlePointerMove = (e) => {
+    const t = this.renderer.domElement.getBoundingClientRect();
+    this.pointer = { x: e.clientX - t.left, y: e.clientY - t.top }, this.pointerInside = !0, this.hoverPending = !0;
+  };
+  handlePointerLeave = () => {
+    this.pointerInside = !1, this.pointer = null, this.setHover(null);
+  };
+  handlePointerDown = (e) => {
+    this.pointerDown = { x: e.clientX, y: e.clientY };
+  };
+  handlePointerUp = (e) => {
+    const t = this.pointerDown;
+    if (this.pointerDown = null, !t || Math.hypot(e.clientX - t.x, e.clientY - t.y) > 5) return;
+    const s = this.renderer.domElement.getBoundingClientRect();
+    this.pointer = { x: e.clientX - s.left, y: e.clientY - s.top }, this.options.onClick(this.pick());
+  };
+  tick = (e) => {
+    if (this.frameId = requestAnimationFrame(this.tick), !(!this.onScreen || document.hidden)) {
+      if (this.tween) {
+        const t = this.tween.duration <= 0 ? 1 : g((e - this.tween.start) / this.tween.duration, 0, 1);
+        this.applyPose(this.lerpPose(this.tween.from, this.tween.to, de(t))), t >= 1 && (this.tween = null);
+      }
+      this.progress < 1 && (this.progress = g((e - this.entranceStart) / Se, 0, 1), this.atomsDirty = !0), this.controls.autoRotate = this.autoRotate && !this.options.reducedMotion && !this.pointerInside && !this.interacting && !this.tween && !this.emphasis.focusedClusterId, this.controls.update(), this.atomsDirty && (this.updateAtoms(), this.atomsDirty = !1, this.cameraDirty = !0, this.needsRender = !0), this.cameraDirty && (this.updateCameraDependents(), this.cameraDirty = !1, this.needsRender = !0), this.hoverPending && !this.interacting && (this.hoverPending = !1, this.updateHoverFromPointer()), this.needsRender && (this.needsRender = !1, this.renderer.render(this.scene, this.camera), this.labelRenderer.render(this.scene, this.camera), this.layoutLabels(), this.updateGizmo());
+    }
+  };
+  resize() {
+    const { container: e } = this.options, t = Math.max(1, e.clientWidth), s = Math.max(1, e.clientHeight);
+    this.size = { width: t, height: s }, this.renderer.setSize(t, s), this.labelRenderer.setSize(t, s), this.camera.aspect = t / s;
+    const i = Math.max(1, s - y.top - y.bottom), o = Math.tan(E * Math.PI / 360) * (i / s), n = Math.tan(E * Math.PI / 360) * (t / s), h = 0.06, r = P.iso.elevation, a = this.extents.vertical * Math.cos(r) + this.extents.horizontal * Math.sin(r) + h;
+    this.baseDistance = Math.max(a / o, (this.extents.horizontal + h) / n) + this.extents.horizontal * 0.3, this.scene.fog = new ie(this.theme.surface, this.baseDistance - 0.4, this.baseDistance + 4.5), this.camera.setViewOffset(t, s, 0, (y.bottom - y.top) / 2, t, s), this.camera.updateProjectionMatrix(), this.controls && this.applyPose(this.readPose()), this.needsRender = !0;
+  }
+  readPose() {
+    const e = this.controls.target.clone(), t = this.camera.position.clone().sub(e), s = t.length() || 1;
+    return {
+      target: e,
+      orbit: {
+        azimuth: Math.atan2(t.x, t.z),
+        elevation: Math.asin(g(t.y / s, -1, 1))
+      },
+      zoom: this.zoom
+    };
+  }
+  lerpPose(e, t, s) {
+    return {
+      target: e.target.clone().lerp(t.target, s),
+      orbit: {
+        azimuth: e.orbit.azimuth + S(e.orbit.azimuth, t.orbit.azimuth) * s,
+        elevation: T(e.orbit.elevation, t.orbit.elevation, s)
+      },
+      zoom: T(e.zoom, t.zoom, s)
+    };
+  }
+  applyPose(e) {
+    this.zoom = e.zoom;
+    const t = le(e.orbit, this.baseDistance / e.zoom);
+    this.camera.position.set(e.target.x + t.x, e.target.y + t.y, e.target.z + t.z), this.camera.lookAt(e.target), this.controls?.target.copy(e.target), this.controls?.update(), this.cameraDirty = !0, this.needsRender = !0;
+  }
+  tweenTo(e, t = Re) {
+    if (this.options.reducedMotion) {
+      this.tween = null, this.applyPose(e);
+      return;
+    }
+    this.tween = { from: this.readPose(), to: e, start: performance.now(), duration: t };
+  }
+  effectiveActiveCluster() {
+    return this.hoverTarget?.type === "cluster" ? this.hoverTarget.id : this.emphasis.activeClusterId;
+  }
+  colorFor(e, t) {
+    const s = this.theme.clusterColors.get(e.cluster.id) ?? this.theme.foreground;
+    return !t || t === e.cluster.id ? s : s.clone().lerp(this.theme.surface, De);
+  }
+  centroidRadius(e) {
+    return this.config.centroid === "core" ? 0.03 : Math.min(this.atomRadius * 1.85, this.atomRadius * (1.25 + 0.15 * Math.sqrt(e.nodes.length)));
+  }
+  updateAtoms() {
+    const e = new A(), t = new oe(), s = new m(), i = ue(this.progress), o = this.effectiveActiveCluster(), n = this.emphasis.hiddenClusterIds, h = this.hoverTarget?.type === "point" ? this.hoverTarget.id : null;
+    this.nodes.forEach((r, a) => {
+      const c = this.centroidPositions.get(r.cluster.cluster.id), d = this.positions[a];
+      d.copy(c).lerp(this.targets[a], i);
+      const p = n.has(r.cluster.cluster.id), w = this.config.hulls && this.emphasis.focusedClusterId === r.cluster.cluster.id, v = p ? 0 : this.atomRadius * (w ? Pe : 1) * (h === r.node.point.id ? 1.6 : 1);
+      e.compose(d, t, s.setScalar(v)), this.atoms.setMatrixAt(a, e), this.atoms.setColorAt(a, this.colorFor(r.cluster, o));
+    }), this.atoms.instanceMatrix.needsUpdate = !0, this.atoms.instanceColor && (this.atoms.instanceColor.needsUpdate = !0), this.atoms.computeBoundingSphere(), this.clusters.forEach((r, a) => {
+      const c = r.cluster.id, d = n.has(c);
+      let p = this.centroidRadius(r);
+      d && (p = 0), this.hoverTarget?.type === "cluster" && this.hoverTarget.id === c && (p *= 1.18), e.compose(this.centroidPositions.get(c), t, s.setScalar(p * Math.max(i, 0.35))), this.centroids.setMatrixAt(a, e), this.centroids.setColorAt(a, this.colorFor(r, o));
+    }), this.centroids.instanceMatrix.needsUpdate = !0, this.centroids.instanceColor && (this.centroids.instanceColor.needsUpdate = !0), this.centroids.computeBoundingSphere();
+    for (const r of this.hulls) {
+      const a = r.cluster.cluster.id;
+      r.mesh.visible = !n.has(a), r.mesh.scale.setScalar(Math.max(1e-3, i));
+      const c = o === a, d = this.emphasis.focusedClusterId === a;
+      r.mesh.material.opacity = o ? c ? d ? 0.12 : 0.32 : 0.04 : 0.17, r.edges.material.opacity = o ? c ? 0.9 : 0.08 : 0.45;
+    }
+    for (const r of this.labels) {
+      const a = r.cluster.cluster.id;
+      r.object.visible = !n.has(a);
+    }
+  }
+  updateCameraDependents() {
+    this.axisFrame.update(this.camera, this.controls.target), this.updateBonds(), this.updateGuides();
+  }
+  updateBonds() {
+    const e = this.effectiveActiveCluster(), t = this.emphasis.hiddenClusterIds, s = [];
+    this.nodes.forEach((i, o) => {
+      const n = i.cluster.cluster.id;
+      t.has(n) || this.config.bonds === "active" && e !== n || s.push({
+        from: this.centroidPositions.get(n),
+        to: this.positions[o],
+        fromRadius: this.centroidRadius(i.cluster) * 0.85,
+        toRadius: this.atomRadius,
+        color: this.colorFor(i.cluster, e)
+      });
+    }), this.bonds.update(s, this.camera);
+  }
+  updateGuides() {
+    const e = this.hoverTarget?.type === "point" ? this.hoverTarget.id : null, t = e ? this.nodes.findIndex((a) => a.node.point.id === e) : -1;
+    if (t < 0) {
+      this.guides.visible = !1, this.guideMarkers.visible = !1;
+      return;
+    }
+    const s = this.positions[t], i = this.axisFrame.nearEdges(), o = [
+      [s.x, s.y, s.z],
+      [s.x, -1, s.z],
+      [s.x, -1, s.z],
+      [s.x, -1, i.z],
+      [s.x, -1, s.z],
+      [i.x, -1, s.z]
+    ], n = this.guides.geometry.getAttribute("position");
+    o.forEach(([a, c, d], p) => n.setXYZ(p, a, c, d)), n.needsUpdate = !0, this.guides.computeLineDistances(), this.guides.visible = !0;
+    const h = new A();
+    [
+      new m(s.x, -1, s.z),
+      new m(s.x, -1, i.z),
+      new m(i.x, -1, s.z)
+    ].forEach((a, c) => {
+      this.guideMarkers.setMatrixAt(c, h.makeScale(0.016, 0.016, 0.016).setPosition(a));
+    }), this.guideMarkers.instanceMatrix.needsUpdate = !0, this.guideMarkers.visible = !0;
+  }
+  layoutLabels() {
+    const e = this.effectiveActiveCluster(), t = new m(), s = [];
+    for (const o of this.labels) {
+      if (!o.object.visible || (t.copy(o.object.position).project(this.camera), t.z > 1)) continue;
+      const n = (t.x + 1) / 2 * this.size.width, h = (1 - t.y) / 2 * this.size.height, r = o.cluster.cluster.id;
+      s.push({
+        id: r,
+        x: n + 12,
+        y: h - k / 2,
+        width: me(o.cluster.cluster.label) + 44,
+        height: k,
+        priority: (e === r ? 1e6 : 0) + o.cluster.nodes.length * 100 + (1 - t.z) * 50
+      });
+    }
+    const i = pe(s, this.size);
+    for (const o of this.labels) {
+      const n = o.cluster.cluster.id, h = i.has(n);
+      o.object.element.style.opacity = h ? e && e !== n ? "0.35" : "1" : "0";
+    }
+  }
+  updateGizmo() {
+    if (this.gizmoParts.length === 0) return;
+    const e = this.camera.quaternion.clone().invert(), t = { x: 28, y: 28 }, s = 17, i = this.gizmoParts.map((o) => ({ part: o, view: o.axis.clone().applyQuaternion(e) })).sort((o, n) => o.view.z - n.view.z);
+    for (const { part: o, view: n } of i) {
+      const h = { x: t.x + n.x * s, y: t.y - n.y * s }, r = fe(n.z, 0.15), a = 1.2 + 2.6 * ge(n.z * 0.5);
+      r === "solid" ? (o.path.setAttribute("d", be(t, h, a)), o.path.setAttribute("fill", "currentColor"), o.path.setAttribute("stroke", "none")) : (o.path.setAttribute("d", r === "hashed" ? we(t, h, a, 2.4) : ve(t, h)), o.path.setAttribute("fill", "none"), o.path.setAttribute("stroke", "currentColor"), o.path.setAttribute("stroke-width", r === "hashed" ? "1" : "1.4"), o.path.setAttribute("stroke-linecap", "round")), o.text.setAttribute("x", (t.x + n.x * (s + 7)).toFixed(1)), o.text.setAttribute("y", (t.y - n.y * (s + 7)).toFixed(1)), o.text.setAttribute("opacity", n.z < -0.15 ? "0.55" : "1"), o.path.parentNode?.appendChild(o.path), o.text.parentNode?.appendChild(o.text);
+    }
+  }
+  pick() {
+    if (!this.pointer) return null;
+    const e = new ne(
+      this.pointer.x / this.size.width * 2 - 1,
+      -(this.pointer.y / this.size.height) * 2 + 1
+    );
+    this.raycaster.setFromCamera(e, this.camera);
+    const t = [this.atoms, this.centroids, ...this.hulls.map((n) => n.mesh)], s = this.raycaster.intersectObjects(t, !1), i = this.emphasis.focusedClusterId;
+    let o = null;
+    for (const n of s) {
+      if (n.object === this.atoms && n.instanceId !== void 0) {
+        const r = this.nodes[n.instanceId];
+        if (!r || this.emphasis.hiddenClusterIds.has(r.cluster.cluster.id)) continue;
+        return this.config.hulls && r.cluster.cluster.id !== i ? { type: "cluster", id: r.cluster.cluster.id } : { type: "point", id: r.node.point.id };
+      }
+      if (n.object === this.centroids && n.instanceId !== void 0) {
+        const r = this.clusters[n.instanceId];
+        if (r && !this.emphasis.hiddenClusterIds.has(r.cluster.id))
+          return { type: "cluster", id: r.cluster.id };
+        continue;
+      }
+      const h = n.object.userData.clusterId;
+      if (!(typeof h != "string" || !n.object.visible)) {
+        if (h === i) {
+          o ??= { type: "cluster", id: h };
+          continue;
+        }
+        return { type: "cluster", id: h };
+      }
+    }
+    return o;
+  }
+  updateHoverFromPointer() {
+    const e = this.pick();
+    this.setHover(e);
+  }
+  setHover(e) {
+    const t = e?.type !== this.hoverTarget?.type || e?.id !== this.hoverTarget?.id;
+    this.hoverTarget = e, t && (this.atomsDirty = !0, this.renderer.domElement.style.cursor = e ? "pointer" : this.interacting ? "grabbing" : "grab"), e && this.pointer ? this.options.onHover({
+      target: e,
+      x: this.pointer.x,
+      y: this.pointer.y,
+      viewportWidth: this.size.width,
+      viewportHeight: this.size.height
+    }) : t && this.options.onHover(null);
+  }
+}
+function Ze(u) {
+  try {
+    return new _e(u);
+  } catch {
+    return null;
+  }
+}
+export {
+  _e as StereoEngine,
+  Ze as createStereoEngine
+};

package/dist/components/data-display/stereo-scatter/internals/stereo-math.d.ts

@@ -0,0 +1,64 @@
+import { StereoScatterView } from '../stereo-scatter.types';
+export interface Vec3 {
+    x: number;
+    y: number;
+    z: number;
+}
+export interface ScreenPoint {
+    x: number;
+    y: number;
+}
+export interface NiceDomain {
+    min: number;
+    max: number;
+    ticks: number[];
+}
+export type WedgeStyle = "solid" | "hashed" | "plain";
+/** Orbit around the scene target. Azimuth 0 looks down −Z with +X right and +Y up. */
+export interface StereoOrbit {
+    azimuth: number;
+    elevation: number;
+}
+export declare const STEREO_ELEVATION_LIMIT: number;
+export declare const STEREO_WEDGE_THRESHOLD = 0.06;
+export declare const STEREO_VIEW_PRESETS: Record<StereoScatterView, StereoOrbit>;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function lerp(from: number, to: number, t: number): number;
+export declare function easeOutCubic(t: number): number;
+export declare function easeInOutCubic(t: number): number;
+/** Shortest signed angular distance so camera tweens never spin the long way round. */
+export declare function shortestAngle(from: number, to: number): number;
+/** Camera offset from the target for an orbit at `distance`. */
+export declare function orbitOffset(orbit: StereoOrbit, distance: number): Vec3;
+/** Rounded axis domain with evenly spaced ticks covering every value. */
+export declare function niceDomain(values: readonly number[], targetCount?: number): NiceDomain;
+/** Maps a value into the `[-1, 1]` scene cube. */
+export declare function normalizeToCube(value: number, domain: NiceDomain): number;
+/**
+ * Natta projection rule: a substituent closer to the viewer than its stereocentre
+ * is a solid wedge, farther is a hashed wedge, level is a plain bond.
+ */
+export declare function wedgeStyleForDepth(depthDelta: number, threshold?: number): WedgeStyle;
+/** 0 for an in-plane bond, 1 once the bond leaves the page by half the scene radius. */
+export declare function wedgeStrength(depthDelta: number): number;
+/** 2D solid wedge for SVG glyphs: narrow at the stereocentre, wide at the substituent. */
+export declare function solidWedgePath(from: ScreenPoint, to: ScreenPoint, halfWidth: number): string;
+/** 2D hashed wedge for SVG glyphs: perpendicular rungs that widen toward the substituent. */
+export declare function hashedWedgePath(from: ScreenPoint, to: ScreenPoint, halfWidth: number, spacing?: number): string;
+export declare function linePath(from: ScreenPoint, to: ScreenPoint): string;
+export interface LabelCandidate {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    priority: number;
+}
+/** Greedy label placement: highest priority wins, overlapping or clipped labels are dropped. */
+export declare function placeLabels(candidates: readonly LabelCandidate[], bounds: {
+    width: number;
+    height: number;
+}, padding?: number): Set<string>;
+/** Rough text width for 11px UI type; good enough for collision tests. */
+export declare function estimateLabelWidth(text: string, fontSize?: number): number;
+export declare function formatCompactNumber(value: number): string;