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

package/README.md

@@ -315,7 +315,7 @@ Impact Nova provides a rich set of components structured for any enterprise use-
 ### 📊 Data Display
 
 - Avatar, Badge, Tag, Chips
-- Calendar, Chart
+- Calendar, Chart, Stereo Scatter (`molecule` and `crystal`)
 - Empty Container, Notification Panel
 - Table (AG Grid), Data Table
 - Product Tile, Value With Unit

package/dist/components/data/expandable-list-item/sku-picker-chrome.d.ts

@@ -23,6 +23,10 @@ export declare function SkuPickerChrome(props: {
     onToggleSort: () => void;
     onSelectAll: () => void;
     onClear: () => void;
+    /** Multi-select shows Select All and Clear. Single-select omits them. */
+    showBulkActions?: boolean;
+    /** Search, sort, view toggle, and bulk actions. Default: true. */
+    showToolbar?: boolean;
     children: ReactNode;
     footer?: ReactNode;
     collapsible?: boolean;

package/dist/components/data/expandable-list-item/sku-picker-chrome.js

@@ -1,42 +1,42 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { Search as s, CardView as m, ListFilter as u, Sorting as h, Back as b } from "impact-nova-icons";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { Search as s, CardView as m, ListFilter as u, ArrowUp as h, ArrowDown as b, Back as f } from "impact-nova-icons";
 import "react";
 import { Badge as v } from "../../data-display/badge/badge.js";
 import { ButtonIconTooltip as c } from "../../feedback/tooltip/button-icon-tooltip.js";
-import { Input as f } from "../../forms/input/input.js";
-import { Accordion as x, AccordionItem as g, AccordionTrigger as w, AccordionContent as C } from "../../primitives/accordion/accordion.js";
+import { Input as x } from "../../forms/input/input.js";
+import { Accordion as w, AccordionItem as g, AccordionTrigger as C, AccordionContent as N } from "../../primitives/accordion/accordion.js";
 import { Button as i } from "../../primitives/button/button.js";
-import { cn as N } from "../../../lib/utils.js";
+import { cn as S } from "../../../lib/utils.js";
 const o = "picker";
-function S(e) {
-  return N(
+function y(e) {
+  return S(
     e && "border-brand bg-accent text-brand hover:bg-accent hover:text-brand"
   );
 }
-function y(e) {
+function A(e) {
   if (e.selectedCount === 0)
     return /* @__PURE__ */ t("p", { className: "text-xs font-medium text-content-muted", children: e.emptyLabel });
-  const l = Math.max(0, e.selectedCount - e.previewCodes.length);
-  return /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-1", children: [
+  const a = Math.max(0, e.selectedCount - e.previewCodes.length);
+  return /* @__PURE__ */ l("div", { className: "flex min-w-0 items-center gap-1", children: [
     /* @__PURE__ */ t("p", { className: "truncate text-xs font-medium text-content-muted", children: e.previewCodes.join(", ") }),
-    l > 0 ? /* @__PURE__ */ a(v, { variant: "subtle", color: "primary", size: "sm", shape: "square", children: [
+    a > 0 ? /* @__PURE__ */ l(v, { variant: "subtle", color: "primary", size: "sm", shape: "square", children: [
       "+",
-      l
+      a
     ] }) : null
   ] });
 }
-function U(e) {
-  const l = e.title ?? "SKU", n = /* @__PURE__ */ t(
-    y,
+function V(e) {
+  const a = e.title?.trim() ? e.title : void 0, n = /* @__PURE__ */ t(
+    A,
     {
       selectedCount: e.selectedCount,
       previewCodes: e.previewCodes,
       emptyLabel: e.emptyLabel ?? "No SKUs selected"
     }
-  ), r = /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-3", children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+  ), r = /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ t(
-        f,
+        x,
         {
           size: "default",
           className: "w-[200px]",
@@ -77,20 +77,15 @@ function U(e) {
               variant: "tertiary",
               "aria-label": e.sortDirection === "desc" ? "Sort Z to A" : "Sort A to Z",
               "aria-pressed": e.sortDirection !== "none",
-              className: S(e.sortDirection !== "none"),
+              className: y(e.sortDirection !== "none"),
               onClick: e.onToggleSort,
-              children: /* @__PURE__ */ t(
-                h,
-                {
-                  className: e.sortDirection === "desc" ? "rotate-180" : void 0
-                }
-              )
+              children: e.sortDirection === "desc" ? /* @__PURE__ */ t(h, {}) : /* @__PURE__ */ t(b, {})
             }
           )
         }
       )
     ] }),
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+    e.showBulkActions === !1 ? null : /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ t(
         i,
         {
@@ -116,40 +111,40 @@ function U(e) {
     ] })
   ] });
   return e.collapsible ? /* @__PURE__ */ t(
-    x,
+    w,
     {
       type: "single",
       collapsible: !0,
       defaultValue: e.defaultCollapsed ? void 0 : o,
       className: "w-full",
-      children: /* @__PURE__ */ a(g, { value: o, className: "border border-stroke-subtle", children: [
-        /* @__PURE__ */ t(w, { headingLevel: 3, rightActions: n, children: /* @__PURE__ */ a("span", { className: "truncate text-sm font-semibold leading-6 text-content-title", children: [
-          l,
+      children: /* @__PURE__ */ l(g, { value: o, className: "border border-stroke-subtle", children: [
+        /* @__PURE__ */ t(C, { headingLevel: 3, rightActions: n, children: a ? /* @__PURE__ */ l("span", { className: "truncate text-sm font-semibold leading-6 text-content-title", children: [
+          a,
           e.required ? /* @__PURE__ */ t("span", { className: "text-destructive", children: " *" }) : null
-        ] }) }),
-        /* @__PURE__ */ a(C, { className: "flex flex-col gap-3", children: [
-          r,
+        ] }) : null }),
+        /* @__PURE__ */ l(N, { className: "flex flex-col gap-3", children: [
+          e.showToolbar === !1 ? null : r,
           e.children,
           e.footer
         ] })
       ] })
     }
-  ) : /* @__PURE__ */ a("div", { className: "flex w-full flex-col gap-3 overflow-hidden rounded-lg border border-stroke-subtle bg-canvas-elevated px-4 py-2", children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-        e.showBack === !1 ? null : /* @__PURE__ */ t(i, { type: "button", size: "icon", variant: "ghost", "aria-label": "Back", children: /* @__PURE__ */ t(b, {}) }),
-        /* @__PURE__ */ a("p", { className: "text-sm font-semibold leading-6 text-content-title", children: [
-          l,
+  ) : /* @__PURE__ */ l("div", { className: "flex w-full flex-col gap-3 overflow-hidden rounded-lg border border-stroke-subtle bg-canvas-elevated px-4 py-2", children: [
+    /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+        e.showBack === !1 ? null : /* @__PURE__ */ t(i, { type: "button", size: "icon", variant: "ghost", "aria-label": "Back", children: /* @__PURE__ */ t(f, {}) }),
+        a ? /* @__PURE__ */ l("p", { className: "text-sm font-semibold leading-6 text-content-title", children: [
+          a,
           e.required ? /* @__PURE__ */ t("span", { className: "text-destructive", children: " *" }) : null
-        ] })
+        ] }) : null
       ] }),
       n
     ] }),
-    r,
+    e.showToolbar === !1 ? null : r,
     e.children,
     e.footer
   ] });
 }
 export {
-  U as SkuPickerChrome
+  V as SkuPickerChrome
 };

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

@@ -0,0 +1,2 @@
+export { StereoScatter, StereoScatterLegend, StereoScatterTooltip, StereoScatterViewport, } from './stereo-scatter';
+export type { StereoScatterAxis, StereoScatterCluster, StereoScatterHover, StereoScatterLegendProps, StereoScatterPoint, StereoScatterProps, StereoScatterTarget, StereoScatterTooltipProps, StereoScatterVariant, StereoScatterView, StereoScatterViewportProps, } from './stereo-scatter.types';

package/dist/components/data-display/stereo-scatter/index.js

@@ -0,0 +1,10 @@
+import { StereoScatter as r } from "./stereo-scatter.js";
+import { StereoScatterLegend as S } from "./internals/stereo-scatter-legend.js";
+import { StereoScatterTooltip as a } from "./internals/stereo-scatter-tooltip.js";
+import { StereoScatterViewport as f } from "./internals/stereo-scatter-viewport.js";
+export {
+  r as StereoScatter,
+  S as StereoScatterLegend,
+  a as StereoScatterTooltip,
+  f as StereoScatterViewport
+};

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

@@ -0,0 +1,41 @@
+import { Group, Vector3, Camera } from 'three';
+import { StereoModel } from './stereo-model';
+import { StereoTheme } from './stereo-engine-theme';
+export interface StereoFrameAxes {
+    x: {
+        label: string;
+        format: (value: number) => string;
+    };
+    y: {
+        label: string;
+        format: (value: number) => string;
+    };
+    z: {
+        label: string;
+        format: (value: number) => string;
+    };
+}
+export type StereoFrameSigns = {
+    x: number;
+    z: number;
+};
+/** Vertical cube edge on the left silhouette for a camera in the `signs` quadrant. */
+export declare function leftSilhouette(signs: StereoFrameSigns): StereoFrameSigns;
+/**
+ * Axis frame for the scene cube: floor grid, faint gridlines on the two back walls, and
+ * three solid axis rods with arrowheads, tick marks, values, and titles. Rods and labels
+ * follow the camera quadrant so they always sit on the near, readable edges.
+ */
+export declare class StereoAxisFrame {
+    readonly group: Group<import('three').Object3DEventMap>;
+    private readonly walls;
+    private readonly rods;
+    private readonly labels;
+    private signs;
+    private hiddenAxis;
+    constructor(model: StereoModel, theme: StereoTheme, axes: StereoFrameAxes);
+    update(camera: Camera, target: Vector3): void;
+    /** Near edges that carry the X and Z rods; hover guides drop onto them. */
+    nearEdges(): StereoFrameSigns;
+    dispose(): void;
+}

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

@@ -0,0 +1,178 @@
+import { Group as C, LineBasicMaterial as g, MeshBasicMaterial as P, DoubleSide as B, Mesh as S, PlaneGeometry as U, Vector3 as a, CylinderGeometry as Q, ConeGeometry as X, Vector2 as L, BufferGeometry as q, Float32BufferAttribute as J, LineSegments as K } from "three";
+import { CSS2DObject as V } from "three/addons/renderers/CSS2DRenderer.js";
+import { normalizeToCube as Y } from "./stereo-math.js";
+const Z = "pointer-events-none select-none whitespace-nowrap text-[10px] font-medium leading-3 tabular-nums text-content-muted", $ = "pointer-events-none select-none flex items-center gap-1 whitespace-nowrap text-[11px] font-semibold leading-4 text-content-secondary", k = "inline-flex size-4 items-center justify-center rounded-full bg-canvas-muted text-[9px] font-bold uppercase leading-none text-content", W = 55e-4, w = 0.1, I = 0.075, tt = 0.024, O = 0.045, M = 0.05, _ = 0.94;
+function j(r, n = new L(0.5, 0.5)) {
+  const o = new V(r);
+  return o.center.copy(n), o;
+}
+function et(r, n) {
+  const o = document.createElement("div");
+  return o.className = n, o.textContent = r, o;
+}
+function nt(r, n) {
+  const o = document.createElement("div");
+  o.className = $;
+  const s = document.createElement("span");
+  s.className = k, s.textContent = r;
+  const u = document.createElement("span");
+  return u.textContent = n, o.append(s, u), o;
+}
+function G(r) {
+  return r.ticks.map((n) => ({ value: n, position: Y(n, r) })).filter((n) => n.position >= -1 - 1e-6 && n.position <= 1 + 1e-6);
+}
+function A(r, n) {
+  const o = new q();
+  return o.setAttribute(
+    "position",
+    new J(r.flatMap((s) => [s.x, s.y, s.z]), 3)
+  ), new K(o, n);
+}
+function ot(r) {
+  r.traverse((n) => {
+    if (n instanceof S || n instanceof K) {
+      n.geometry.dispose();
+      const o = n.material;
+      Array.isArray(o) ? o.forEach((s) => s.dispose()) : o.dispose();
+    }
+    n instanceof V && n.element.remove();
+  });
+}
+function m(r) {
+  return r.x * r.z > 0 ? { x: -r.x, z: r.z } : { x: r.x, z: -r.z };
+}
+class at {
+  group = new C();
+  walls;
+  rods;
+  labels = [];
+  signs = { x: 0, z: 0 };
+  hiddenAxis = null;
+  constructor(n, o, s) {
+    const u = new g({ color: o.grid, transparent: !0, opacity: 0.95, fog: !1 }), z = new g({ color: o.grid, transparent: !0, opacity: 0.6, fog: !1 }), f = new g({ color: o.gridStrong, transparent: !0, opacity: 0.8, fog: !1 }), x = new P({
+      color: o.wall,
+      transparent: !0,
+      opacity: 0.4,
+      side: B,
+      depthWrite: !1,
+      fog: !1
+    }), D = new P({ color: o.muted, side: B, fog: !1 }), h = {
+      x: G(n.domains.x),
+      y: G(n.domains.y),
+      z: G(n.domains.z)
+    }, b = new S(new U(2, 2), x);
+    b.rotation.x = -Math.PI / 2, b.position.y = -1.003, b.renderOrder = -2, this.group.add(b), this.group.add(
+      A(
+        [
+          ...h.x.flatMap((t) => [new a(t.position, -1, -1), new a(t.position, -1, 1)]),
+          ...h.z.flatMap((t) => [new a(-1, -1, t.position), new a(1, -1, t.position)])
+        ],
+        u
+      )
+    ), this.group.add(
+      A(
+        [
+          [-1, -1, -1, 1, -1, -1],
+          [1, -1, -1, 1, -1, 1],
+          [1, -1, 1, -1, -1, 1],
+          [-1, -1, 1, -1, -1, -1]
+        ].flatMap(([t, e, i, l, c, d]) => [new a(t, e, i), new a(l, c, d)]),
+        f
+      )
+    );
+    const y = (t, e) => {
+      const i = new C(), l = (c, d) => t === "x" ? new a(e, d, c) : new a(c, d, e);
+      return i.add(
+        A(
+          h.y.flatMap((c) => [l(-1, c.position), l(1, c.position)]),
+          z
+        )
+      ), this.group.add(i), i;
+    };
+    this.walls = {
+      x: { "-1": y("x", -1), 1: y("x", 1) },
+      z: { "-1": y("z", -1), 1: y("z", 1) }
+    };
+    const F = new Q(W, W, 2 + w, 8), H = new X(tt, I, 16), T = (t) => {
+      const e = new C(), i = new S(F, D), l = new S(H, D), c = 1 + w + I / 2;
+      t === "x" ? (i.rotation.z = -Math.PI / 2, i.position.x = w / 2, l.rotation.z = -Math.PI / 2, l.position.x = c) : t === "z" ? (i.rotation.x = Math.PI / 2, i.position.z = w / 2, l.rotation.x = Math.PI / 2, l.position.z = c) : (i.position.y = w / 2, l.position.y = c), e.add(i, l);
+      const d = h[t].flatMap((p) => {
+        if (t === "x") return [new a(p.position, 0, 0), new a(p.position, 0, O)];
+        if (t === "z") return [new a(0, 0, p.position), new a(O, 0, p.position)];
+        const N = O / Math.SQRT2;
+        return [new a(0, p.position, 0), new a(N, p.position, N)];
+      });
+      return e.add(A(d, new g({ color: o.muted, fog: !1 }))), this.group.add(e), e;
+    };
+    this.rods = { x: T("x"), y: T("y"), z: T("z") };
+    const E = (t, e, i, l) => {
+      for (const c of h[t]) {
+        const d = j(et(s[t].format(c.value), Z), l);
+        this.labels.push({
+          axis: t,
+          object: d,
+          place: (p) => e(c.position, p),
+          visible: (p) => i(c.position, p)
+        }), this.group.add(d);
+      }
+    };
+    E(
+      "x",
+      (t, e) => new a(t, -1.02, e.z * 1.13),
+      (t, e) => {
+        const i = m(e);
+        return !(i.z === e.z && Math.abs(t - i.x) < M);
+      }
+    ), E(
+      "z",
+      (t, e) => new a(e.x * 1.15, -1.02, t),
+      (t, e) => {
+        const i = m(e);
+        return Math.abs(t - e.z) < M ? !1 : !(i.x === e.x && Math.abs(t - i.z) < M);
+      }
+    ), E(
+      "y",
+      (t, e) => {
+        const i = m(e);
+        return new a(i.x * 1.07, t, i.z * 1.07);
+      },
+      (t) => t > -1 + M,
+      new L(1, 0.5)
+    );
+    const v = (t, e, i) => {
+      const l = j(nt(t, s[t].label), i);
+      this.labels.push({ axis: t, object: l, place: e }), this.group.add(l);
+    }, R = 1 + w + I + 0.12;
+    v("x", (t) => new a(R, -1, t.z)), v("z", (t) => new a(t.x, -1, R)), v(
+      "y",
+      (t) => {
+        const e = m(t);
+        return new a(e.x, R - 0.06, e.z);
+      },
+      new L(0.5, 1)
+    );
+  }
+  update(n, o) {
+    const s = {
+      x: n.position.x - o.x >= 0 ? 1 : -1,
+      z: n.position.z - o.z >= 0 ? 1 : -1
+    }, u = n.position.clone().sub(o).normalize(), z = Math.abs(u.y) > _ ? "y" : Math.abs(u.x) > _ ? "x" : Math.abs(u.z) > _ ? "z" : null;
+    if (s.x === this.signs.x && s.z === this.signs.z && z === this.hiddenAxis) return;
+    this.signs = s, this.hiddenAxis = z, this.walls.x[1].visible = s.x < 0, this.walls.x[-1].visible = s.x > 0, this.walls.z[1].visible = s.z < 0, this.walls.z[-1].visible = s.z > 0;
+    const f = m(s);
+    this.rods.x.position.set(0, -1, s.z), this.rods.x.scale.set(1, 1, s.z), this.rods.z.position.set(s.x, -1, 0), this.rods.z.scale.set(s.x, 1, 1), this.rods.y.position.set(f.x, 0, f.z), this.rods.y.scale.set(f.x, 1, f.z);
+    for (const x of this.labels)
+      x.object.position.copy(x.place(s)), x.object.visible = x.axis !== z && (x.visible?.(s) ?? !0);
+  }
+  /** Near edges that carry the X and Z rods; hover guides drop onto them. */
+  nearEdges() {
+    return { x: this.signs.x || 1, z: this.signs.z || 1 };
+  }
+  dispose() {
+    ot(this.group);
+  }
+}
+export {
+  at as StereoAxisFrame,
+  m as leftSilhouette
+};

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

@@ -0,0 +1,14 @@
+import { Color } from 'three';
+import { StereoModel } from './stereo-model';
+export interface StereoTheme {
+    surface: Color;
+    foreground: Color;
+    muted: Color;
+    grid: Color;
+    gridStrong: Color;
+    wall: Color;
+    brand: Color;
+    clusterColors: Map<string, Color>;
+}
+/** WebGL needs concrete colors, so tokens are resolved once per theme against the host element. */
+export declare function readStereoTheme(scope: HTMLElement, model: StereoModel): StereoTheme;

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

@@ -0,0 +1,29 @@
+import { Color as c } from "three";
+import { resolveDesignTokenColor as s } from "../../../../lib/resolve-design-token-color.js";
+function o(r, a, n) {
+  const e = s(r, a);
+  if (!e || e.startsWith("var(")) return n.clone();
+  const t = new c();
+  return t.setStyle(e), t;
+}
+function m(r, a) {
+  const n = new c(0.97, 0.97, 0.98), e = new c(0.12, 0.13, 0.16), t = o("var(--color-surface-elevated)", r, n), l = o("var(--color-foreground)", r, e), d = o("var(--color-border-hairline)", r, n), i = o("var(--color-border)", r, d);
+  return {
+    surface: t,
+    foreground: l,
+    muted: o("var(--color-muted-foreground)", r, l),
+    grid: d,
+    gridStrong: i,
+    wall: o("var(--color-surface-muted)", r, t),
+    brand: o("var(--color-primary)", r, l),
+    clusterColors: new Map(
+      a.clusters.map((u) => [
+        u.cluster.id,
+        o(u.color, r, l)
+      ])
+    )
+  };
+}
+export {
+  m as readStereoTheme
+};

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

@@ -0,0 +1,23 @@
+import { Color, Group, Vector3, Camera } from 'three';
+export interface StereoBondSpec {
+    from: Vector3;
+    to: Vector3;
+    fromRadius: number;
+    toRadius: number;
+    color: Color;
+}
+/**
+ * Bonds drawn with stereochemistry notation, recomputed whenever the camera moves:
+ * a tapered solid cone when the substituent faces the viewer, widening rungs when it
+ * recedes, and a plain stick when it is level with the stereocentre.
+ */
+export declare class StereoWedgeBonds {
+    readonly group: Group<import('three').Object3DEventMap>;
+    private readonly solid;
+    private readonly plain;
+    private readonly rungs;
+    private readonly scratch;
+    constructor(capacity: number);
+    update(bonds: readonly StereoBondSpec[], camera: Camera): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,80 @@
+import { Group as V, Vector3 as s, Quaternion as v, Matrix4 as U, MeshStandardMaterial as z, InstancedMesh as m, CylinderGeometry as y, BoxGeometry as G, Color as N, PerspectiveCamera as R } from "three";
+import { wedgeStyleForDepth as q, wedgeStrength as D, clamp as I } from "./stereo-math.js";
+const P = new s(0, 1, 0), _ = 0.038, S = 12, A = 85e-4, C = 75e-4;
+class F {
+  group = new V();
+  solid;
+  plain;
+  rungs;
+  scratch = {
+    matrix: new U(),
+    quaternion: new v(),
+    scale: new s(),
+    position: new s(),
+    direction: new s(),
+    unit: new s(),
+    view: new s(),
+    start: new s(),
+    end: new s(),
+    side: new s(),
+    depthAxis: new s()
+  };
+  constructor(r) {
+    const o = new z({ roughness: 0.38, metalness: 0.05 }), t = Math.max(1, r);
+    this.solid = new m(new y(1, 0.14, 1, 16, 1), o, t), this.plain = new m(new y(1, 1, 1, 10, 1), o, t), this.rungs = new m(new G(1, 1, 1), o, t * S);
+    const a = new N(1, 1, 1);
+    for (const i of [this.solid, this.plain, this.rungs]) {
+      for (let n = 0; n < i.count; n += 1) i.setColorAt(n, a);
+      i.count = 0, i.frustumCulled = !1, i.castShadow = !0, this.group.add(i);
+    }
+  }
+  update(r, o) {
+    const t = this.scratch, a = new s();
+    o.getWorldDirection(a);
+    const i = o instanceof R;
+    let n = 0, c = 0, l = 0;
+    for (const e of r) {
+      t.direction.subVectors(e.to, e.from);
+      const w = t.direction.length();
+      if (w < 1e-4) continue;
+      t.unit.copy(t.direction).divideScalar(w), i ? t.view.addVectors(e.from, e.to).multiplyScalar(0.5).sub(o.position).normalize() : t.view.copy(a);
+      const f = -t.direction.dot(t.view), x = q(f);
+      t.start.copy(e.from).addScaledVector(t.unit, e.fromRadius), t.end.copy(e.to).addScaledVector(t.unit, -e.toRadius * 0.35);
+      const d = t.start.distanceTo(t.end);
+      if (d < 4e-3) continue;
+      const h = 0.012 + 0.03 * D(f);
+      if (t.position.addVectors(t.start, t.end).multiplyScalar(0.5), t.quaternion.setFromUnitVectors(P, t.unit), x === "solid")
+        t.scale.set(h, d, h), t.matrix.compose(t.position, t.quaternion, t.scale), this.solid.setMatrixAt(n, t.matrix), this.solid.setColorAt(n, e.color), n += 1;
+      else if (x === "plain")
+        t.scale.set(A, d, A), t.matrix.compose(t.position, t.quaternion, t.scale), this.plain.setMatrixAt(c, t.matrix), this.plain.setColorAt(c, e.color), c += 1;
+      else {
+        t.side.crossVectors(t.unit, t.view), t.side.lengthSq() < 1e-8 && t.side.set(1, 0, 0), t.side.normalize(), t.depthAxis.crossVectors(t.side, t.unit).normalize();
+        const g = I(Math.round(d / _), 4, S);
+        for (let p = 1; p <= g; p += 1) {
+          const u = p / g, M = Math.max(6e-3, h * 1.15 * u);
+          t.matrix.makeBasis(
+            t.side.clone().multiplyScalar(M * 2),
+            t.unit.clone().multiplyScalar(C),
+            t.depthAxis.clone().multiplyScalar(C)
+          ), t.matrix.setPosition(
+            t.start.x + (t.end.x - t.start.x) * u,
+            t.start.y + (t.end.y - t.start.y) * u,
+            t.start.z + (t.end.z - t.start.z) * u
+          ), this.rungs.setMatrixAt(l, t.matrix), this.rungs.setColorAt(l, e.color), l += 1;
+        }
+      }
+    }
+    this.solid.count = n, this.plain.count = c, this.rungs.count = l;
+    for (const e of [this.solid, this.plain, this.rungs])
+      e.instanceMatrix.needsUpdate = !0, e.instanceColor && (e.instanceColor.needsUpdate = !0);
+  }
+  dispose() {
+    for (const o of [this.solid, this.plain, this.rungs])
+      o.geometry.dispose(), o.dispose();
+    const r = this.solid.material;
+    Array.isArray(r) || r.dispose();
+  }
+}
+export {
+  F as StereoWedgeBonds
+};

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

@@ -0,0 +1,120 @@
+import { StereoScatterHover, StereoScatterTarget, StereoScatterVariant, StereoScatterView } from '../stereo-scatter.types';
+import { StereoModel } from './stereo-model';
+import { StereoFrameAxes } from './stereo-engine-frame';
+export interface StereoEmphasis {
+    hiddenClusterIds: ReadonlySet<string>;
+    activeClusterId: string | null;
+    focusedClusterId: string | null;
+}
+export interface StereoEngineOptions {
+    container: HTMLElement;
+    gizmo: SVGSVGElement | null;
+    variant: StereoScatterVariant;
+    model: StereoModel;
+    axes: StereoFrameAxes;
+    defaultView: StereoScatterView;
+    autoRotate: boolean;
+    reducedMotion: boolean;
+    formatStoreCount: (count: number) => string;
+    onHover: (hover: StereoScatterHover | null) => void;
+    onClick: (target: StereoScatterTarget | null) => void;
+}
+/**
+ * Imperative WebGL scene. React owns legend, tooltip, and focus state; the engine owns
+ * camera, meshes, and per-frame work so orbiting never re-renders React.
+ */
+export declare class StereoEngine {
+    private readonly options;
+    private readonly config;
+    private readonly theme;
+    private readonly renderer;
+    private readonly labelRenderer;
+    private readonly scene;
+    private readonly camera;
+    private readonly controls;
+    private readonly raycaster;
+    private readonly disposables;
+    private readonly nodes;
+    private readonly positions;
+    private readonly targets;
+    private readonly sceneCenter;
+    /** Atoms shrink as the store count grows so dense networks stay legible. */
+    private readonly atomRadius;
+    private readonly extents;
+    private readonly bestOrbit;
+    private readonly clusters;
+    private readonly centroidPositions;
+    private readonly atoms;
+    private readonly centroids;
+    private readonly bonds;
+    private readonly hulls;
+    private readonly labels;
+    private readonly axisFrame;
+    private readonly guides;
+    private readonly guideMarkers;
+    private readonly gizmoParts;
+    private emphasis;
+    private hoverTarget;
+    private autoRotate;
+    private zoom;
+    private baseDistance;
+    private size;
+    private progress;
+    private entranceStart;
+    private tween;
+    private interacting;
+    private pointerInside;
+    private pointer;
+    private pointerDown;
+    private hoverPending;
+    private atomsDirty;
+    private cameraDirty;
+    private needsRender;
+    private onScreen;
+    private frameId;
+    private resizeObserver;
+    private intersectionObserver;
+    private envTexture;
+    constructor(options: StereoEngineOptions);
+    setEmphasis(next: StereoEmphasis): void;
+    setAutoRotate(enabled: boolean): void;
+    setView(view: StereoScatterView): void;
+    rotateBy(azimuth: number, elevation: number): void;
+    zoomBy(factor: number): void;
+    resetView(): void;
+    dispose(): void;
+    private orbitForView;
+    private createInstances;
+    private setupLighting;
+    private buildShadowPlane;
+    private buildHulls;
+    private buildGuides;
+    private buildLabels;
+    private buildGizmo;
+    private readonly handleControlsChange;
+    private readonly handleControlsStart;
+    private readonly handleControlsEnd;
+    private readonly handlePointerMove;
+    private readonly handlePointerLeave;
+    private readonly handlePointerDown;
+    private readonly handlePointerUp;
+    private readonly tick;
+    private resize;
+    private readPose;
+    private lerpPose;
+    private applyPose;
+    private tweenTo;
+    private effectiveActiveCluster;
+    private colorFor;
+    private centroidRadius;
+    private updateAtoms;
+    private updateCameraDependents;
+    private updateBonds;
+    private updateGuides;
+    private layoutLabels;
+    private updateGizmo;
+    private pick;
+    private updateHoverFromPointer;
+    private setHover;
+}
+export declare function createStereoEngine(options: StereoEngineOptions): StereoEngine | null;