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

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

@@ -0,0 +1,129 @@
+const p = Math.PI / 2 - 0.02, g = 0.06, I = {
+  iso: { azimuth: 0.62, elevation: 0.42 },
+  front: { azimuth: 0, elevation: 0 },
+  top: { azimuth: 0, elevation: p },
+  side: { azimuth: -Math.PI / 2, elevation: 0 }
+};
+function S(t, n, e) {
+  return Math.min(e, Math.max(n, t));
+}
+function z(t, n, e) {
+  return t + (n - t) * e;
+}
+function L(t) {
+  return 1 - (1 - t) ** 3;
+}
+function P(t) {
+  return t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
+}
+function b(t, n) {
+  const e = Math.PI * 2;
+  let i = (n - t) % e;
+  return i > Math.PI && (i -= e), i < -Math.PI && (i += e), i;
+}
+function w(t, n) {
+  const e = Math.cos(t.elevation) * n;
+  return {
+    x: Math.sin(t.azimuth) * e,
+    y: Math.sin(t.elevation) * n,
+    z: Math.cos(t.azimuth) * e
+  };
+}
+function $(t, n) {
+  const e = t / Math.max(1, n), i = 10 ** Math.floor(Math.log10(e)), o = e / i;
+  return o < 1.5 ? i : o < 3 ? 2 * i : o < 7 ? 5 * i : 10 * i;
+}
+function O(t, n = 4) {
+  const e = t.filter(Number.isFinite);
+  let i = e.length ? Math.min(...e) : 0, o = e.length ? Math.max(...e) : 1;
+  if (i === o) {
+    const u = Math.abs(i) * 0.1 || 1;
+    i -= u, o += u;
+  }
+  const r = $(o - i, n), c = Math.floor(i / r) * r, h = Math.ceil(o / r) * r, s = [];
+  for (let u = c; u <= h + r / 2; u += r)
+    s.push(Number(u.toPrecision(12)));
+  return { min: c, max: h, ticks: s };
+}
+function T(t, n) {
+  const e = n.max - n.min || 1;
+  return (t - n.min) / e * 2 - 1;
+}
+function v(t, n = g) {
+  return t > n ? "solid" : t < -n ? "hashed" : "plain";
+}
+function F(t) {
+  return Math.min(1, Math.abs(t) / 0.5);
+}
+function d(t, n) {
+  const e = n.x - t.x, i = n.y - t.y, o = Math.hypot(e, i) || 1;
+  return { dx: e, dy: i, length: o, nx: -i / o, ny: e / o };
+}
+function a(t) {
+  return t.toFixed(2);
+}
+function N(t, n, e) {
+  const { nx: i, ny: o } = d(t, n), r = 0.45;
+  return [
+    `M${a(t.x + i * r)} ${a(t.y + o * r)}`,
+    `L${a(n.x + i * e)} ${a(n.y + o * e)}`,
+    `L${a(n.x - i * e)} ${a(n.y - o * e)}`,
+    `L${a(t.x - i * r)} ${a(t.y - o * r)}`,
+    "Z"
+  ].join("");
+}
+function _(t, n, e, i = 3) {
+  const { dx: o, dy: r, length: c, nx: h, ny: s } = d(t, n), u = Math.max(3, Math.floor(c / i)), m = [];
+  for (let x = 1; x <= u; x += 1) {
+    const f = x / u, M = t.x + o * f, y = t.y + r * f, l = Math.max(0.7, e * f);
+    m.push(
+      `M${a(M + h * l)} ${a(y + s * l)}L${a(M - h * l)} ${a(y - s * l)}`
+    );
+  }
+  return m.join("");
+}
+function R(t, n) {
+  return `M${a(t.x)} ${a(t.y)}L${a(n.x)} ${a(n.y)}`;
+}
+function C(t, n, e = 4) {
+  const i = [], o = /* @__PURE__ */ new Set(), r = [...t].sort((c, h) => h.priority - c.priority);
+  for (const c of r) {
+    if (c.x < 0 || c.y < 0 || c.x + c.width > n.width || c.y + c.height > n.height)
+      continue;
+    i.some(
+      (s) => c.x < s.x + s.width + e && c.x + c.width + e > s.x && c.y < s.y + s.height + e && c.y + c.height + e > s.y
+    ) || (i.push(c), o.add(c.id));
+  }
+  return o;
+}
+function D(t, n = 11) {
+  return t.length * n * 0.6;
+}
+const E = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 1
+});
+function j(t) {
+  return E.format(t);
+}
+export {
+  p as STEREO_ELEVATION_LIMIT,
+  I as STEREO_VIEW_PRESETS,
+  g as STEREO_WEDGE_THRESHOLD,
+  S as clamp,
+  P as easeInOutCubic,
+  L as easeOutCubic,
+  D as estimateLabelWidth,
+  j as formatCompactNumber,
+  _ as hashedWedgePath,
+  z as lerp,
+  R as linePath,
+  O as niceDomain,
+  T as normalizeToCube,
+  w as orbitOffset,
+  C as placeLabels,
+  b as shortestAngle,
+  N as solidWedgePath,
+  F as wedgeStrength,
+  v as wedgeStyleForDepth
+};

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

@@ -0,0 +1,37 @@
+import { StereoScatterCluster, StereoScatterPoint } from '../stereo-scatter.types';
+import { NiceDomain, Vec3 } from './stereo-math';
+export interface StereoNode {
+    point: StereoScatterPoint;
+    position: Vec3;
+}
+export interface StereoClusterModel {
+    cluster: StereoScatterCluster;
+    index: number;
+    color: string;
+    nodes: StereoNode[];
+    centroid: Vec3;
+    /** Mean of the raw metric values. */
+    mean: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    /** RMS distance of members from the centroid in scene units. */
+    spread: number;
+}
+export interface StereoModel {
+    domains: {
+        x: NiceDomain;
+        y: NiceDomain;
+        z: NiceDomain;
+    };
+    clusters: StereoClusterModel[];
+    clusterById: Map<string, StereoClusterModel>;
+    nodeById: Map<string, StereoNode>;
+}
+/**
+ * `nice` rounds domains to tick boundaries for variants that draw axes.
+ * `tight` fits the data extent so tick-less variants fill the scene cube.
+ */
+export type StereoDomainMode = "nice" | "tight";
+export declare function buildStereoModel(points: readonly StereoScatterPoint[], clusters: readonly StereoScatterCluster[], domainMode?: StereoDomainMode): StereoModel;

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

@@ -0,0 +1,71 @@
+import { chartPaletteCssVar as I } from "../../chart/chart-palette.js";
+import { normalizeToCube as l, niceDomain as h } from "./stereo-math.js";
+function a(o) {
+  return o.length === 0 ? 0 : o.reduce((e, r) => e + r, 0) / o.length;
+}
+function M(o) {
+  const e = h(o), r = o.filter(Number.isFinite);
+  if (r.length === 0) return e;
+  const c = Math.min(...r), s = Math.max(...r);
+  if (c === s) return e;
+  const p = (s - c) * 0.04;
+  return { min: c - p, max: s + p, ticks: e.ticks };
+}
+function b(o, e, r = "nice") {
+  const c = r === "tight" ? M : h, s = {
+    x: c(o.map((t) => t.x)),
+    y: c(o.map((t) => t.y)),
+    z: c(o.map((t) => t.z))
+  }, p = [...e], f = new Set(e.map((t) => t.id));
+  for (const t of o)
+    f.has(t.clusterId) || (f.add(t.clusterId), p.push({ id: t.clusterId, label: t.clusterId }));
+  const u = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map();
+  for (const t of o) {
+    const m = {
+      point: t,
+      position: {
+        x: l(t.x, s.x),
+        y: l(t.y, s.y),
+        z: l(t.z, s.z)
+      }
+    };
+    x.set(t.id, m);
+    const i = u.get(t.clusterId) ?? [];
+    i.push(m), u.set(t.clusterId, i);
+  }
+  const y = p.map((t, m) => {
+    const i = u.get(t.id) ?? [], d = {
+      x: a(i.map((n) => n.position.x)),
+      y: a(i.map((n) => n.position.y)),
+      z: a(i.map((n) => n.position.z))
+    }, z = Math.sqrt(
+      a(
+        i.map(
+          (n) => (n.position.x - d.x) ** 2 + (n.position.y - d.y) ** 2 + (n.position.z - d.z) ** 2
+        )
+      )
+    );
+    return {
+      cluster: t,
+      index: m,
+      color: t.color ?? I(m),
+      nodes: i,
+      centroid: d,
+      mean: {
+        x: a(i.map((n) => n.point.x)),
+        y: a(i.map((n) => n.point.y)),
+        z: a(i.map((n) => n.point.z))
+      },
+      spread: z
+    };
+  });
+  return {
+    domains: s,
+    clusters: y,
+    clusterById: new Map(y.map((t) => [t.cluster.id, t])),
+    nodeById: x
+  };
+}
+export {
+  b as buildStereoModel
+};

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

@@ -0,0 +1,33 @@
+import { StereoScatterHover, StereoScatterPoint, StereoScatterVariant, StereoScatterView } from '../stereo-scatter.types';
+import { StereoModel } from './stereo-model';
+import * as React from "react";
+export interface StereoResolvedAxis {
+    label: string;
+    format: (value: number) => string;
+}
+export interface StereoScatterContextValue {
+    variant: StereoScatterVariant;
+    model: StereoModel;
+    axes: {
+        x: StereoResolvedAxis;
+        y: StereoResolvedAxis;
+        z: StereoResolvedAxis;
+    };
+    hiddenClusterIds: string[];
+    toggleCluster: (clusterId: string) => void;
+    focusedClusterId: string | null;
+    setFocusedClusterId: (clusterId: string | null) => void;
+    legendHoverClusterId: string | null;
+    setLegendHoverClusterId: (clusterId: string | null) => void;
+    hover: StereoScatterHover | null;
+    setHover: (hover: StereoScatterHover | null) => void;
+    autoRotate: boolean;
+    defaultView: StereoScatterView;
+    onPointClick?: (point: StereoScatterPoint) => void;
+    chartLabel: string;
+}
+export declare function StereoScatterProvider({ value, children, }: {
+    value: StereoScatterContextValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useStereoScatterContext(): StereoScatterContextValue;

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

@@ -0,0 +1,19 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as e from "react";
+const r = e.createContext(null);
+function S({
+  value: t,
+  children: o
+}) {
+  return /* @__PURE__ */ n(r.Provider, { value: t, children: o });
+}
+function i() {
+  const t = e.useContext(r);
+  if (!t)
+    throw new Error("StereoScatter components must be used within StereoScatter");
+  return t;
+}
+export {
+  S as StereoScatterProvider,
+  i as useStereoScatterContext
+};

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

@@ -0,0 +1,4 @@
+/** Explains the wedge-dash notation; axis names live on the axis rods in the scene. */
+export declare function StereoScatterKey({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useImpactNovaI18n as c } from "../../../../i18n/use-impact-nova-i18n.js";
+import { cn as d } from "../../../../lib/utils.js";
+import { stereoScatterKeyVariants as l } from "../stereo-scatter.variants.js";
+import { solidWedgePath as m, hashedWedgePath as h } from "./stereo-math.js";
+const a = { x: 2, y: 5 }, o = { x: 20, y: 5 };
+function y({ className: s }) {
+  const { t: r } = c(), n = [
+    { kind: "solid", label: r("stereoScatter.towardViewer") },
+    { kind: "hashed", label: r("stereoScatter.awayFromViewer") }
+  ];
+  return /* @__PURE__ */ e("div", { "data-component": "stereo-scatter-key", className: d(l(), s), children: n.map((t) => /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e("svg", { width: "22", height: "10", viewBox: "0 0 22 10", "aria-hidden": !0, className: "shrink-0 text-content", children: t.kind === "solid" ? /* @__PURE__ */ e("path", { d: m(a, o, 3.6), fill: "currentColor" }) : /* @__PURE__ */ e("path", { d: h(a, o, 3.6, 2.6), stroke: "currentColor", strokeWidth: "1", fill: "none" }) }),
+    /* @__PURE__ */ e("span", { className: "truncate", children: t.label })
+  ] }, t.kind)) });
+}
+export {
+  y as StereoScatterKey
+};

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

@@ -0,0 +1,2 @@
+import { StereoScatterLegendProps } from '../stereo-scatter.types';
+export declare const StereoScatterLegend: import('react').ForwardRefExoticComponent<StereoScatterLegendProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,75 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { Cross as C } from "impact-nova-icons";
+import { createComponent as h } from "../../../../lib/primitives/create-component.js";
+import { cn as S } from "../../../../lib/utils.js";
+import { useImpactNovaI18n as x } from "../../../../i18n/use-impact-nova-i18n.js";
+import { stereoScatterLegendItemVariants as I, stereoScatterLegendVariants as N } from "../stereo-scatter.variants.js";
+import { useStereoScatterContext as L } from "./stereo-scatter-context.js";
+const P = h(
+  "StereoScatterLegend",
+  ({ className: i, ...u }, m) => {
+    const { t: o } = x(), {
+      model: c,
+      hiddenClusterIds: p,
+      toggleCluster: b,
+      focusedClusterId: l,
+      setFocusedClusterId: g,
+      legendHoverClusterId: f,
+      setLegendHoverClusterId: n
+    } = L(), d = f ?? l, v = l ? c.clusterById.get(l) : void 0;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: m,
+        "data-component": "stereo-scatter-legend",
+        role: "group",
+        "aria-label": o("stereoScatter.legend"),
+        className: S(N(), i),
+        onPointerLeave: () => n(null),
+        ...u,
+        children: [
+          c.clusters.map((e) => {
+            const t = e.cluster.id, r = p.includes(t);
+            return /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": !r,
+                "aria-label": r ? o("stereoScatter.showCluster", { label: e.cluster.label }) : o("stereoScatter.hideCluster", { label: e.cluster.label }),
+                className: I({
+                  hidden: r,
+                  dimmed: !r && d !== null && d !== t
+                }),
+                onClick: () => b(t),
+                onPointerEnter: () => n(r ? null : t),
+                onFocus: () => n(r ? null : t),
+                onBlur: () => n(null),
+                children: [
+                  /* @__PURE__ */ s("span", { className: "size-2.5 shrink-0 rounded-full", style: { backgroundColor: e.color }, "aria-hidden": !0 }),
+                  /* @__PURE__ */ s("span", { children: e.cluster.label }),
+                  /* @__PURE__ */ s("span", { className: "tabular-nums text-content-muted", children: e.nodes.length })
+                ]
+              },
+              t
+            );
+          }),
+          v ? /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex items-center gap-1 rounded-full border border-stroke bg-canvas-elevated py-0.5 pe-1.5 ps-2 text-xs font-semibold leading-4 text-brand hover:bg-canvas-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring",
+              onClick: () => g(null),
+              children: [
+                o("stereoScatter.clearFocus"),
+                /* @__PURE__ */ s(C, { className: "size-3.5" })
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  P as StereoScatterLegend
+};

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

@@ -0,0 +1,2 @@
+/** Hosts the WebGL engine, the orientation gizmo, and the camera toolbar. */
+export declare function StereoScatterScene(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,149 @@
+import { jsxs as k, Fragment as F, jsx as R } from "react/jsx-runtime";
+import * as t from "react";
+import { useImpactNovaI18n as H } from "../../../../i18n/use-impact-nova-i18n.js";
+import { createStereoEngine as L } from "./stereo-engine.js";
+import { useStereoScatterContext as N } from "./stereo-scatter-context.js";
+import { StereoScatterToolbar as O } from "./stereo-scatter-toolbar.js";
+const y = Math.PI / 15, h = 1.25;
+function j() {
+  const [l, n] = t.useState(
+    () => typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === !0
+  );
+  return t.useEffect(() => {
+    const a = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!a) return;
+    const u = () => n(a.matches);
+    return a.addEventListener("change", u), () => a.removeEventListener("change", u);
+  }, []), l;
+}
+function q() {
+  const { t: l } = H(), n = N(), {
+    variant: a,
+    model: u,
+    axes: i,
+    hiddenClusterIds: g,
+    focusedClusterId: v,
+    legendHoverClusterId: S,
+    defaultView: b,
+    chartLabel: V
+  } = n, C = t.useRef(null), I = t.useRef(null), s = t.useRef(null), c = t.useRef(n);
+  c.current = n;
+  const d = j(), [M, z] = t.useState(!1), [x, E] = t.useState(n.autoRotate), [D, p] = t.useState(b), w = t.useMemo(
+    () => ({
+      hiddenClusterIds: new Set(g),
+      activeClusterId: S ?? v,
+      focusedClusterId: v
+    }),
+    [v, g, S]
+  ), A = t.useRef(w);
+  A.current = w, t.useEffect(() => {
+    E(n.autoRotate);
+  }, [n.autoRotate]), t.useEffect(() => {
+    const o = C.current;
+    if (!o) return;
+    const r = (e) => {
+      const m = c.current;
+      if (!e) {
+        m.setFocusedClusterId(null);
+        return;
+      }
+      if (e.type === "cluster") {
+        m.setFocusedClusterId(m.focusedClusterId === e.id ? null : e.id);
+        return;
+      }
+      const B = m.model.nodeById.get(e.id);
+      B && m.onPointClick?.(B.point);
+    }, f = L({
+      container: o,
+      gizmo: I.current,
+      variant: a,
+      model: u,
+      axes: {
+        x: { label: i.x.label, format: (e) => c.current.axes.x.format(e) },
+        y: { label: i.y.label, format: (e) => c.current.axes.y.format(e) },
+        z: { label: i.z.label, format: (e) => c.current.axes.z.format(e) }
+      },
+      defaultView: b,
+      autoRotate: !1,
+      reducedMotion: d,
+      formatStoreCount: (e) => l("stereoScatter.storeCount", { count: e }),
+      onHover: (e) => c.current.setHover(e),
+      onClick: r
+    });
+    if (!f) {
+      z(!0);
+      return;
+    }
+    return z(!1), f.setEmphasis(A.current), s.current = f, () => {
+      s.current = null, c.current.setHover(null), f.dispose();
+    };
+  }, [a, u, i.x.label, i.y.label, i.z.label, b, d]), t.useEffect(() => {
+    s.current?.setEmphasis(w);
+  }, [w]), t.useEffect(() => {
+    s.current?.setAutoRotate(x && !d);
+  }, [x, d, a, u]);
+  const P = (o) => {
+    p(o), s.current?.setView(o);
+  }, T = (o) => {
+    const r = s.current;
+    if (!r) return;
+    const e = {
+      ArrowLeft: () => r.rotateBy(-y, 0),
+      ArrowRight: () => r.rotateBy(y, 0),
+      ArrowUp: () => r.rotateBy(0, y / 2),
+      ArrowDown: () => r.rotateBy(0, -y / 2),
+      "+": () => r.zoomBy(h),
+      "=": () => r.zoomBy(h),
+      "-": () => r.zoomBy(1 / h),
+      0: () => r.resetView(),
+      Escape: () => n.setFocusedClusterId(null)
+    }[o.key];
+    e && (o.preventDefault(), o.key.startsWith("Arrow") && p(null), e());
+  };
+  return /* @__PURE__ */ k(F, { children: [
+    /* @__PURE__ */ R(
+      "div",
+      {
+        ref: C,
+        "data-slot": "stereo-scatter-stage",
+        role: "img",
+        tabIndex: 0,
+        "aria-label": `${V}. ${l("stereoScatter.interactionHint")}`,
+        "aria-roledescription": "3D chart",
+        className: "absolute inset-0 rounded-[inherit] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring",
+        onKeyDown: T,
+        onPointerDown: () => {
+          p(null);
+        }
+      }
+    ),
+    /* @__PURE__ */ R(
+      "svg",
+      {
+        ref: I,
+        viewBox: "0 0 56 56",
+        "aria-hidden": !0,
+        className: "pointer-events-none absolute bottom-3 start-3 z-[2] size-14 text-content-secondary"
+      }
+    ),
+    M ? /* @__PURE__ */ R("div", { className: "absolute inset-0 z-[3] flex items-center justify-center p-6 text-center text-sm text-content-muted", children: l("stereoScatter.webglUnavailable") }) : null,
+    /* @__PURE__ */ R(
+      O,
+      {
+        activeView: D,
+        autoRotating: x,
+        canAutoRotate: !d,
+        onView: P,
+        onZoomIn: () => s.current?.zoomBy(h),
+        onZoomOut: () => s.current?.zoomBy(1 / h),
+        onToggleAutoRotate: () => E((o) => !o),
+        onReset: () => {
+          p(b), s.current?.resetView(), n.setFocusedClusterId(null);
+        }
+      }
+    )
+  ] });
+}
+export {
+  q as StereoScatterScene
+};

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

@@ -0,0 +1,13 @@
+import { StereoScatterView } from '../stereo-scatter.types';
+export interface StereoScatterToolbarProps {
+    className?: string;
+    activeView: StereoScatterView | null;
+    autoRotating: boolean;
+    canAutoRotate: boolean;
+    onView: (view: StereoScatterView) => void;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onToggleAutoRotate: () => void;
+    onReset: () => void;
+}
+export declare function StereoScatterToolbar({ className, activeView, autoRotating, canAutoRotate, onView, onZoomIn, onZoomOut, onToggleAutoRotate, onReset, }: StereoScatterToolbarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,93 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { RemoveMinimize as h, Plus as N, Pause as S, Play as w, Reset as v } from "impact-nova-icons";
+import { useImpactNovaI18n as x } from "../../../../i18n/use-impact-nova-i18n.js";
+import { cn as z } from "../../../../lib/utils.js";
+import { stereoScatterToolbarButtonVariants as o, stereoScatterToolbarVariants as f } from "../stereo-scatter.variants.js";
+const k = [
+  { view: "iso", short: "viewIso" },
+  { view: "front", short: "viewFront" },
+  { view: "top", short: "viewTop" },
+  { view: "side", short: "viewSide" }
+];
+function V({
+  className: s,
+  activeView: i,
+  autoRotating: r,
+  canAutoRotate: l,
+  onView: n,
+  onZoomIn: c,
+  onZoomOut: m,
+  onToggleAutoRotate: p,
+  onReset: b
+}) {
+  const { t } = x();
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": t("stereoScatter.toolbar"),
+      "data-component": "stereo-scatter-toolbar",
+      className: z(f(), s),
+      onPointerDown: (a) => a.stopPropagation(),
+      children: [
+        k.map(({ view: a, short: u }) => /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: o(),
+            "aria-pressed": i === a,
+            onClick: () => n(a),
+            children: t(`stereoScatter.${u}`)
+          },
+          a
+        )),
+        /* @__PURE__ */ e("span", { className: "mx-1 h-[18px] w-px bg-stroke", "aria-hidden": !0 }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: o(),
+            "aria-label": t("stereoScatter.zoomOut"),
+            onClick: m,
+            children: /* @__PURE__ */ e(h, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: o(),
+            "aria-label": t("stereoScatter.zoomIn"),
+            onClick: c,
+            children: /* @__PURE__ */ e(N, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "mx-1 h-[18px] w-px bg-stroke", "aria-hidden": !0 }),
+        l ? /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: o(),
+            "aria-label": t("stereoScatter.autoRotate"),
+            "aria-pressed": r,
+            onClick: p,
+            children: r ? /* @__PURE__ */ e(S, { className: "size-4" }) : /* @__PURE__ */ e(w, { className: "size-4" })
+          }
+        ) : null,
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: o(),
+            "aria-label": t("stereoScatter.resetView"),
+            onClick: b,
+            children: /* @__PURE__ */ e(v, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  V as StereoScatterToolbar
+};

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

@@ -0,0 +1,2 @@
+import { StereoScatterTooltipProps } from '../stereo-scatter.types';
+export declare const StereoScatterTooltip: import('react').ForwardRefExoticComponent<StereoScatterTooltipProps & import('react').RefAttributes<HTMLDivElement>>;