impact-nova 2.6.2 → 3.0.0-alpha.0

package/dist/components/data-display/globe-map/internals/globe-map-context.d.ts

@@ -0,0 +1,25 @@
+import { GlobeMapHoverPoint, GlobeMapPoint, GlobeMapPointCardAnchor, GlobeMapRegion, GlobeMapSeries, GlobeMapVariant } from '../globe-map.types';
+import * as React from "react";
+export interface GlobeMapContextValue {
+    region: GlobeMapRegion;
+    variant: GlobeMapVariant;
+    points: GlobeMapPoint[];
+    series: GlobeMapSeries[];
+    visiblePoints: GlobeMapPoint[];
+    metricLabel: string;
+    formatValue: (value: number) => string;
+    hiddenSeriesIds: string[];
+    toggleSeries: (seriesId: string) => void;
+    hoverPoint: GlobeMapHoverPoint | null;
+    setHoverPoint: (point: GlobeMapHoverPoint | null) => void;
+    selectedPointId: string | null;
+    pointCardAnchor: GlobeMapPointCardAnchor | null;
+    closePointCard: () => void;
+    renderPointCard?: (point: GlobeMapPoint) => React.ReactNode;
+    mapLabel: string;
+}
+export declare function GlobeMapProvider({ value, children, }: {
+    value: GlobeMapContextValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useGlobeMapContext(): GlobeMapContextValue;

package/dist/components/data-display/globe-map/internals/globe-map-context.js

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

package/dist/components/data-display/globe-map/internals/globe-map-legend.d.ts

@@ -0,0 +1,2 @@
+import { GlobeMapLegendProps } from '../globe-map.types';
+export declare const GlobeMapLegend: import('react').ForwardRefExoticComponent<GlobeMapLegendProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/globe-map/internals/globe-map-legend.js

@@ -0,0 +1,51 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { createComponent as b } from "../../../../lib/primitives/create-component.js";
+import { cn as c } from "../../../../lib/utils.js";
+import { useImpactNovaI18n as g } from "../../../../i18n/use-impact-nova-i18n.js";
+import { globeMapLegendItemVariants as m, globeMapLegendVariants as u } from "../globe-map.variants.js";
+import { useGlobeMapContext as h } from "./globe-map-context.js";
+const N = b(
+  "GlobeMapLegend",
+  ({ className: l, ...n }, s) => {
+    const { t: o } = g(), { series: d, hiddenSeriesIds: i, toggleSeries: t } = h();
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: s,
+        "data-component": "globe-map-legend",
+        role: "group",
+        "aria-label": o("globeMap.legend"),
+        className: c(u(), l),
+        ...n,
+        children: d.map((e) => {
+          const a = i.includes(e.id);
+          return /* @__PURE__ */ p(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": !a,
+              "aria-label": a ? o("globeMap.showSeries", { label: e.label }) : o("globeMap.hideSeries", { label: e.label }),
+              className: m({ hidden: a }),
+              onClick: () => t(e.id),
+              children: [
+                /* @__PURE__ */ r(
+                  "span",
+                  {
+                    className: "size-2 shrink-0 rounded-full",
+                    style: { backgroundColor: e.color },
+                    "aria-hidden": !0
+                  }
+                ),
+                /* @__PURE__ */ r("span", { children: e.label })
+              ]
+            },
+            e.id
+          );
+        })
+      }
+    );
+  }
+);
+export {
+  N as GlobeMapLegend
+};

package/dist/components/data-display/globe-map/internals/globe-map-point-card-carousel.d.ts

@@ -0,0 +1,6 @@
+import { GlobeMapVariant } from '../globe-map.types';
+export declare function GlobeMapPointCardCarousel({ images, initials, variant, }: {
+    images: readonly string[];
+    initials: string;
+    variant: GlobeMapVariant;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/globe-map/internals/globe-map-point-card-carousel.js

@@ -0,0 +1,119 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import * as l from "react";
+import { Avatar as h, AvatarFallback as A } from "../../avatar/avatar.js";
+import { Badge as C } from "../../badge/badge.js";
+import { useImpactNovaI18n as N } from "../../../../i18n/use-impact-nova-i18n.js";
+import { prefersGlobeReducedMotion as M } from "../globe-map.utils.js";
+import { globeMapPointCardDotVariants as _, globeMapPointCardCarouselVariants as P, globeMapPointCardSlideVariants as y } from "../globe-map.variants.js";
+const v = 4, S = 2600;
+function m({
+  imageUrl: r,
+  placement: o,
+  initials: n
+}) {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-part": `slide-${o}`,
+      className: y({ placement: o }),
+      children: [
+        /* @__PURE__ */ t("img", { src: r, alt: "", className: "size-full object-cover" }),
+        o === "center" && n ? /* @__PURE__ */ t(
+          h,
+          {
+            size: "sm",
+            shape: "circle",
+            className: "absolute bottom-2 start-2 border-2 border-canvas-elevated",
+            children: /* @__PURE__ */ t(A, { children: n })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function G({
+  images: r,
+  initials: o,
+  variant: n
+}) {
+  const { t: p } = N(), [i, f] = l.useState(0), [s, b] = l.useState(0), c = l.useRef(!1);
+  l.useEffect(() => {
+    if (M() || r.length < 2) return;
+    const a = window.setInterval(() => {
+      c.current || (f((e) => (e + 1) % v), b((e) => e + 1));
+    }, S);
+    return () => window.clearInterval(a);
+  }, [r.length]);
+  const d = (a) => {
+    const e = (i + a + r.length) % r.length;
+    return r[e] ?? r[0] ?? "";
+  }, g = (a) => {
+    f(a), b((e) => e + 1);
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-part": "carousel",
+      className: P({ variant: n }),
+      onPointerEnter: () => {
+        c.current = !0;
+      },
+      onPointerLeave: () => {
+        c.current = !1;
+      },
+      children: [
+        /* @__PURE__ */ t(
+          C,
+          {
+            variant: "subtle",
+            color: "primary",
+            size: "sm",
+            className: "absolute start-4 top-4 z-10",
+            children: p("globeMap.trendingNow")
+          }
+        ),
+        /* @__PURE__ */ u("div", { className: "flex h-[220px] items-center justify-center gap-1.5 px-1", children: [
+          /* @__PURE__ */ t(
+            m,
+            {
+              imageUrl: d(-1),
+              placement: "left"
+            },
+            `left-${s}`
+          ),
+          /* @__PURE__ */ t(
+            m,
+            {
+              imageUrl: d(0),
+              placement: "center",
+              initials: o
+            },
+            `center-${s}`
+          ),
+          /* @__PURE__ */ t(
+            m,
+            {
+              imageUrl: d(1),
+              placement: "right"
+            },
+            `right-${s}`
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex items-center justify-center gap-1.5 py-3", children: Array.from({ length: v }).map((a, e) => /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            "aria-label": p("globeMap.slideLabel", { number: e + 1 }),
+            "aria-current": e === i ? "true" : void 0,
+            className: _({ active: e === i }),
+            onClick: () => g(e)
+          },
+          `slide-dot-${e}`
+        )) })
+      ]
+    }
+  );
+}
+export {
+  G as GlobeMapPointCardCarousel
+};

package/dist/components/data-display/globe-map/internals/globe-map-point-card.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const GlobeMapPointCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/globe-map/internals/globe-map-point-card.js

@@ -0,0 +1,106 @@
+import { jsxs as l, jsx as o, Fragment as x } from "react/jsx-runtime";
+import * as C from "react";
+import { Cross as v } from "impact-nova-icons";
+import { Badge as P } from "../../badge/badge.js";
+import { CardContent as N, CardDescription as y, CardTitle as w } from "../../card/card.js";
+import { Popover as M, PopoverAnchor as k, PopoverContent as z } from "../../../feedback/popover/popover.js";
+import { Button as A } from "../../../primitives/button/button.js";
+import { createComponent as B } from "../../../../lib/primitives/create-component.js";
+import { cn as E } from "../../../../lib/utils.js";
+import { useImpactNovaI18n as G } from "../../../../i18n/use-impact-nova-i18n.js";
+import { globeMapPointCardVariants as I } from "../globe-map.variants.js";
+import { GlobeMapPointCardCarousel as O } from "./globe-map-point-card-carousel.js";
+import { useGlobeMapContext as j } from "./globe-map-context.js";
+const J = B("GlobeMapPointCard", ({ className: s, ...d }, c) => {
+  const { t: m } = G(), {
+    variant: p,
+    selectedPointId: f,
+    visiblePoints: u,
+    pointCardAnchor: n,
+    closePointCard: a,
+    renderPointCard: r
+  } = j(), e = u.find((t) => t.id === f) ?? null, i = !!(e && n);
+  if (C.useEffect(() => {
+    if (!i) return;
+    const t = (h) => {
+      h.key === "Escape" && a();
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [a, i]), !e || !n) return null;
+  const g = e.initials ?? (e.label.charAt(0) || "S").toUpperCase(), b = !!(e.images && e.images.length > 0);
+  return /* @__PURE__ */ l(
+    M,
+    {
+      open: !0,
+      onOpenChange: (t) => {
+        t || a();
+      },
+      children: [
+        /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ o(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: "pointer-events-none absolute z-30 size-px",
+            style: { left: n.x, top: n.y }
+          }
+        ) }),
+        /* @__PURE__ */ l(
+          z,
+          {
+            ref: c,
+            "data-component": "globe-map-point-card",
+            role: "dialog",
+            "aria-label": e.label,
+            side: "top",
+            align: "center",
+            sideOffset: 12,
+            collisionPadding: 16,
+            onOpenAutoFocus: (t) => t.preventDefault(),
+            className: E(I(), s),
+            ...d,
+            children: [
+              b ? /* @__PURE__ */ o(
+                O,
+                {
+                  images: e.images ?? [],
+                  initials: g,
+                  variant: p
+                }
+              ) : null,
+              /* @__PURE__ */ o("div", { className: "absolute end-3 top-3 z-20", children: /* @__PURE__ */ o(
+                A,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "iconSm",
+                  "aria-label": m("globeMap.closePointCard"),
+                  onClick: a,
+                  children: /* @__PURE__ */ o(v, {})
+                }
+              ) }),
+              /* @__PURE__ */ o(N, { className: "flex flex-col gap-4 p-5 pt-3", children: r ? r(e) : /* @__PURE__ */ l(x, { children: [
+                e.subtitle ? /* @__PURE__ */ o(y, { className: "text-xs font-semibold uppercase tracking-wide text-destructive", children: e.subtitle }) : null,
+                /* @__PURE__ */ o(w, { className: "-mt-2 text-base font-bold leading-5 text-foreground-title", children: e.label }),
+                e.attributes && e.attributes.length > 0 ? /* @__PURE__ */ o("dl", { className: "flex flex-col gap-3", children: e.attributes.map((t) => /* @__PURE__ */ l(
+                  "div",
+                  {
+                    className: "flex items-center justify-between gap-3",
+                    children: [
+                      /* @__PURE__ */ o("dt", { className: "text-sm leading-5 text-secondary-foreground", children: t.label }),
+                      /* @__PURE__ */ o("dd", { className: "text-sm font-semibold leading-5 text-foreground-title", children: t.value })
+                    ]
+                  },
+                  `${e.id}-${t.label}`
+                )) }) : null,
+                e.tags && e.tags.length > 0 ? /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-2", children: e.tags.map((t) => /* @__PURE__ */ o(P, { variant: "subtle", color: "primary", size: "sm", children: t }, t)) }) : null
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  J as GlobeMapPointCard
+};

package/dist/components/data-display/globe-map/internals/globe-map-scene.d.ts

@@ -0,0 +1,17 @@
+import { GlobeMapPoint, GlobeMapRegion, GlobeMapScenePoint, GlobeMapVariant } from '../globe-map.types';
+import * as React from "react";
+export interface GlobeMapSceneProps {
+    region: GlobeMapRegion;
+    variant: GlobeMapVariant;
+    scenePoints: GlobeMapScenePoint[];
+    selectedPoint: GlobeMapPoint | null;
+    autoRotate: boolean;
+    onPointClick: (scenePoint: GlobeMapScenePoint, clientX: number, clientY: number) => void;
+    onPointHover: (scenePoint: GlobeMapScenePoint | null, clientX: number, clientY: number) => void;
+}
+declare function GlobeMapSceneComponent({ region, variant, scenePoints, selectedPoint, autoRotate, onPointClick, onPointHover, }: GlobeMapSceneProps): import("react/jsx-runtime").JSX.Element;
+declare namespace GlobeMapSceneComponent {
+    var displayName: string;
+}
+export declare const GlobeMapScene: React.MemoExoticComponent<typeof GlobeMapSceneComponent>;
+export {};

package/dist/components/data-display/globe-map/internals/globe-map-scene.js

@@ -0,0 +1,218 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import * as a from "react";
+import k from "react-globe.gl";
+import { globeMapShadowHostVariants as U } from "../globe-map.variants.js";
+import { GLOBE_MAP_GROUND_SHADOW_ROOM_PX as z, GLOBE_MAP_GLOBE_INSET_PX as F, applyGlobeIllustrationMaterial as H, GLOBE_MAP_GROUND_SHADOW_BLUR_PX as W, GLOBE_MAP_GROUND_SHADOW as X, GLOBE_MAP_VARIANT_MIXES as j, GLOBE_TRANSPARENT as b, syncGlobeMapGroundShadow as V } from "../globe-map.utils.js";
+import Y from "./globe-countries-110m.json.js";
+import { useGlobeMapScene as q, EMPTY_GLOBE_POINTS as J, GLOBE_RENDERER_CONFIG as K } from "./use-globe-map-scene.js";
+const Q = Y.features;
+function y({
+  region: G,
+  variant: l,
+  scenePoints: v,
+  selectedPoint: E,
+  autoRotate: R,
+  onPointClick: _,
+  onPointHover: O
+}) {
+  const {
+    stageRef: M,
+    globeRef: n,
+    stageSize: c,
+    oceanTexture: w,
+    globeSurfaceMaterial: C,
+    coloredPoints: S,
+    handleGlobeReady: L,
+    handlePointerEnter: P,
+    handlePointerLeave: N,
+    htmlElement: A,
+    hideBackFacingPin: B,
+    landColor: x,
+    landMaterial: I,
+    borderColor: D,
+    emptyLabel: T,
+    isReady: d,
+    canRenderGlobe: $
+  } = q({
+    region: G,
+    variant: l,
+    scenePoints: v,
+    selectedPoint: E,
+    autoRotate: R,
+    onPointClick: _,
+    onPointHover: O
+  }), o = Math.max(
+    0,
+    Math.min(c.width, c.height - z) - F * 2
+  ), p = a.useRef(null), i = a.useId().replace(/:/g, ""), h = `globe-map-ring-${i}`, g = `globe-map-shine-${i}`, f = `globe-map-shadow-blur-${i}`;
+  return a.useEffect(() => {
+    const r = n.current, u = p.current;
+    if (!r || !d || (H(r), !u || o <= 0)) return;
+    const s = () => V(r, u, o);
+    s();
+    const m = r.controls();
+    return m.addEventListener("change", s), () => {
+      m.removeEventListener("change", s);
+    };
+  }, [n, o, d]), /* @__PURE__ */ e(
+    "div",
+    {
+      ref: M,
+      "data-component": "globe-map-scene",
+      "data-variant": l,
+      className: "absolute inset-0 z-0 flex cursor-grab items-start justify-center overflow-visible pt-2 touch-none motion-reduce:transition-none active:cursor-grabbing",
+      onPointerEnter: P,
+      onPointerLeave: N,
+      children: $ ? /* @__PURE__ */ t(
+        "div",
+        {
+          ref: p,
+          className: "relative overflow-visible",
+          style: { width: o, height: o },
+          children: [
+            /* @__PURE__ */ t(
+              "svg",
+              {
+                "data-part": "ground-shadow",
+                "data-shadow-variant": l,
+                className: U(),
+                viewBox: `0 0 ${o} ${o}`,
+                "aria-hidden": !0,
+                children: [
+                  /* @__PURE__ */ t("defs", { children: [
+                    /* @__PURE__ */ e(
+                      "filter",
+                      {
+                        id: f,
+                        x: "-10%",
+                        y: "-200%",
+                        width: "120%",
+                        height: "500%",
+                        colorInterpolationFilters: "sRGB",
+                        children: /* @__PURE__ */ e("feGaussianBlur", { stdDeviation: W })
+                      }
+                    ),
+                    /* @__PURE__ */ t("linearGradient", { id: h, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                      /* @__PURE__ */ e(
+                        "stop",
+                        {
+                          offset: "0%",
+                          stopColor: "var(--color-globe-locations-highlight-ink)",
+                          stopOpacity: "0.35"
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "stop",
+                        {
+                          offset: "50%",
+                          stopColor: "var(--color-globe-exceptions-land-ink)",
+                          stopOpacity: "0.25"
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "stop",
+                        {
+                          offset: "100%",
+                          stopColor: "var(--color-globe-ring-amber)",
+                          stopOpacity: "0.35"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e(
+                    "ellipse",
+                    {
+                      "data-part": "shadow-contact",
+                      fill: X[l],
+                      filter: `url(#${f})`
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "circle",
+                    {
+                      "data-part": "globe-ring",
+                      fill: "none",
+                      stroke: l === "exceptions" ? j.exceptions.ring : `url(#${h})`,
+                      strokeWidth: "1.4"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "relative z-[1] h-full w-full", children: /* @__PURE__ */ e(
+              k,
+              {
+                ref: n,
+                width: o,
+                height: o,
+                animateIn: !1,
+                waitForGlobeReady: !0,
+                rendererConfig: K,
+                backgroundColor: b,
+                globeImageUrl: w,
+                globeMaterial: C,
+                globeCurvatureResolution: 8,
+                showAtmosphere: !1,
+                showGraticules: !1,
+                polygonsData: Q,
+                polygonCapColor: x,
+                polygonCapMaterial: I,
+                polygonSideColor: () => b,
+                polygonStrokeColor: D,
+                polygonAltitude: 8e-4,
+                polygonCapCurvatureResolution: 3,
+                polygonsTransitionDuration: 0,
+                polygonLabel: T,
+                pointsData: J,
+                pointsTransitionDuration: 0,
+                htmlElementsData: S,
+                htmlLat: "lat",
+                htmlLng: "lng",
+                htmlAltitude: 0.012,
+                htmlElement: A,
+                htmlElementVisibilityModifier: B,
+                htmlTransitionDuration: 0,
+                enablePointerInteraction: !1,
+                onGlobeReady: L
+              }
+            ) }),
+            /* @__PURE__ */ t(
+              "svg",
+              {
+                className: "pointer-events-none absolute inset-0 z-[2] overflow-visible",
+                viewBox: `0 0 ${o} ${o}`,
+                "aria-hidden": !0,
+                children: [
+                  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ t("radialGradient", { id: g, cx: "32%", cy: "24%", r: "55%", children: [
+                    /* @__PURE__ */ e(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: "var(--color-globe-locations-ocean-highlight)",
+                        stopOpacity: "0.9"
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "stop",
+                      {
+                        offset: "100%",
+                        stopColor: "var(--color-globe-locations-ocean-highlight)",
+                        stopOpacity: "0"
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ e("circle", { "data-part": "globe-shine", fill: `url(#${g})` })
+                ]
+              }
+            )
+          ]
+        }
+      ) : null
+    }
+  );
+}
+y.displayName = "GlobeMapScene";
+const ae = a.memo(y);
+export {
+  ae as GlobeMapScene
+};

package/dist/components/data-display/globe-map/internals/globe-map-tooltip.d.ts

@@ -0,0 +1,2 @@
+import type * as React from "react";
+export declare const GlobeMapTooltip: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/globe-map/internals/globe-map-tooltip.js

@@ -0,0 +1,33 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { createComponent as c } from "../../../../lib/primitives/create-component.js";
+import { cn as p } from "../../../../lib/utils.js";
+import { globeMapTooltipVariants as d } from "../globe-map.variants.js";
+import { useGlobeMapContext as f } from "./globe-map-context.js";
+const x = 12, b = 72, O = c("GlobeMapTooltip", ({ className: e, ...l }, n) => {
+  const { hoverPoint: t, metricLabel: a, formatValue: r } = f();
+  if (!t) return null;
+  const s = t.clientY < b, i = Math.max(x, t.clientX);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: n,
+      "data-component": "globe-map-tooltip",
+      role: "tooltip",
+      className: p(d(), e),
+      style: {
+        left: i,
+        top: t.clientY,
+        transform: s ? "translate(-50%, 12px)" : "translate(-50%, calc(-100% - 8px))"
+      },
+      ...l,
+      children: [
+        /* @__PURE__ */ o("span", { className: "text-xs font-medium leading-4 text-secondary-foreground", children: a }),
+        /* @__PURE__ */ o("span", { className: "text-sm font-semibold leading-5 text-foreground-title", children: t.label }),
+        /* @__PURE__ */ o("span", { className: "text-xs font-semibold leading-4 text-content", children: r(t.value) })
+      ]
+    }
+  );
+});
+export {
+  O as GlobeMapTooltip
+};

package/dist/components/data-display/globe-map/internals/use-globe-map-scene.d.ts

@@ -0,0 +1,45 @@
+import { GlobeMethods } from 'react-globe.gl';
+import { MeshBasicMaterial } from 'three';
+import { GlobeMapPoint, GlobeMapRegion, GlobeMapScenePoint, GlobeMapVariant } from '../globe-map.types';
+import { GLOBE_TRANSPARENT } from '../globe-map.utils';
+import * as React from "react";
+export declare const EMPTY_GLOBE_POINTS: GlobeMapScenePoint[];
+export { GLOBE_TRANSPARENT };
+export declare const GLOBE_RENDERER_CONFIG: {
+    antialias: boolean;
+    alpha: boolean;
+    powerPreference: "high-performance";
+    stencil: boolean;
+    depth: boolean;
+};
+declare function hideBackFacingPin(element: HTMLElement, isVisible: boolean): void;
+export declare function useGlobeMapScene(options: {
+    region: GlobeMapRegion;
+    variant: GlobeMapVariant;
+    scenePoints: GlobeMapScenePoint[];
+    selectedPoint: GlobeMapPoint | null;
+    autoRotate: boolean;
+    onPointClick: (scenePoint: GlobeMapScenePoint, clientX: number, clientY: number) => void;
+    onPointHover: (scenePoint: GlobeMapScenePoint | null, clientX: number, clientY: number) => void;
+}): {
+    stageRef: React.RefObject<HTMLDivElement | null>;
+    globeRef: React.RefObject<GlobeMethods | undefined>;
+    stageSize: {
+        width: number;
+        height: number;
+    };
+    oceanTexture: string;
+    globeSurfaceMaterial: MeshBasicMaterial | undefined;
+    coloredPoints: GlobeMapScenePoint[];
+    handleGlobeReady: () => void;
+    handlePointerEnter: () => void;
+    handlePointerLeave: () => void;
+    htmlElement: (datum: object) => HTMLElement;
+    hideBackFacingPin: typeof hideBackFacingPin;
+    landColor: (feature?: object) => string;
+    landMaterial: (feature?: object) => MeshBasicMaterial;
+    borderColor: () => string;
+    emptyLabel: () => "";
+    isReady: boolean;
+    canRenderGlobe: boolean;
+};