@cellarnode/ui 0.3.2 → 0.5.0

package/dist/globe/globe-view.js

@@ -1,601 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useMemo, useCallback, lazy, Suspense, } from "react";
-import * as THREE from "three";
-import * as topojson from "topojson-client";
-import { cn } from "../lib/utils";
-import { numericToAlpha2 } from "./map/country-code-map";
-import { COUNTRY_GEO_MAP } from "./data/country-geo";
+import { useState, useMemo, useRef, lazy, Suspense } from "react";
 import { resolveTheme } from "./globe-theme";
-import { useElectronEmitter } from "./electron-arc";
-import { addHalo, getVignetteStyle } from "./scene-extras";
-// ---------------------------------------------------------------------------
-// Lazy-load the Globe component (heavy WebGL dependency)
-// ---------------------------------------------------------------------------
-const Globe = lazy(() => import("react-globe.gl"));
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-const CDN_TOPOJSON_URL = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json";
-const DEFAULT_POV = { lat: 30, lng: 10, altitude: 2.5 };
-const AUTO_ROTATE_SPEED = 0.3;
-const IDLE_RESUME_MS = 3000;
-function deriveTooltipStyles(theme) {
-    // Parse atmosphere color to derive accent
-    const c = new THREE.Color(theme.atmosphere);
-    const isLight = c.r + c.g + c.b > 1.5; // rough lightness check
-    if (theme.starfieldOpacity === 0 && isLight) {
-        // Light theme tooltip
-        return {
-            bg: "rgba(255,255,255,0.95)",
-            border: `rgba(${Math.round(c.r * 255)},${Math.round(c.g * 255)},${Math.round(c.b * 255)},0.2)`,
-            text: "#0f172a",
-            muted: "#64748b",
-            accent: theme.atmosphere,
-            shadow: "0 4px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08)",
-        };
-    }
-    // Dark theme tooltip
-    return {
-        bg: "rgba(6,12,20,0.94)",
-        border: `rgba(${Math.round(c.r * 255)},${Math.round(c.g * 255)},${Math.round(c.b * 255)},0.2)`,
-        text: "#f1f5f9",
-        muted: "#94a3b8",
-        accent: theme.atmosphere,
-        shadow: "0 4px 24px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3)",
-    };
-}
-/**
- * Build a theme-aware glassmorphic tooltip.
- * Consistent across all globe layers — arcs, countries, points, hex dots.
- * Works on both dark and light themes.
- */
-function buildTooltip(styles, eyebrow, title, details) {
-    // Reset float-tooltip-kap's default grey box styling
-    return `<style>.float-tooltip-kap{background:none!important;padding:0!important;border-radius:0!important;max-width:none!important;font:inherit!important}</style><div style="
-    background: ${styles.bg};
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid ${styles.border};
-    border-left: 3px solid ${styles.accent};
-    border-radius: 10px;
-    padding: 10px 14px 10px 12px;
-    color: ${styles.text};
-    font-family: system-ui, -apple-system, sans-serif;
-    line-height: 1.35;
-    max-width: 260px;
-    pointer-events: none;
-    box-shadow: ${styles.shadow};
-  ">
-    <div style="
-      color: ${styles.accent};
-      font-size: 10px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      margin-bottom: 3px;
-    ">${eyebrow}</div>
-    <div style="
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 1.3;
-    ">${title}</div>
-    ${details ? `<div style="
-      margin-top: 4px;
-      color: ${styles.muted};
-      font-size: 12px;
-      line-height: 1.3;
-    ">${details}</div>` : ""}
-  </div>`;
-}
-// ---------------------------------------------------------------------------
-// WebGL detection
-// ---------------------------------------------------------------------------
-function isWebGLAvailable() {
+import { getVignetteStyle } from "./scene-extras";
+import { GlobeTooltip } from "./globe-tooltip";
+import { GlobeStatsFallback } from "./globe-stats-fallback";
+import { GlobeLoadingSkeleton } from "./globe-loading-skeleton";
+const LazyGlobeCanvas = lazy(() => import("./globe-canvas").then((m) => ({ default: m.GlobeCanvas })));
+function detectOffscreenSupport() {
     try {
-        const canvas = document.createElement("canvas");
-        return !!(canvas.getContext("webgl2") || canvas.getContext("webgl"));
+        if (typeof OffscreenCanvas === "undefined")
+            return false;
+        const canvas = new OffscreenCanvas(1, 1);
+        const gl = canvas.getContext("webgl2") ?? canvas.getContext("webgl");
+        return gl !== null;
     }
     catch {
         return false;
     }
 }
-function useCountryFeatures(topoJsonUrl) {
-    const [features, setFeatures] = useState([]);
-    useEffect(() => {
-        let cancelled = false;
-        async function load() {
-            try {
-                const url = topoJsonUrl ?? CDN_TOPOJSON_URL;
-                const resp = await fetch(url);
-                const topo = await resp.json();
-                const countriesGeo = topojson.feature(topo, topo.objects.countries);
-                if (!cancelled) {
-                    setFeatures(countriesGeo.features);
-                }
-            }
-            catch (err) {
-                console.error("[GlobeView] Failed to load country GeoJSON:", err);
-            }
-        }
-        load();
-        return () => {
-            cancelled = true;
-        };
-    }, [topoJsonUrl]);
-    return features;
-}
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-export function GlobeView({ arcs, points, countryData, selectedCountryCode, selectedArcId, onCountryClick, onArcClick, onHover, theme, preset = "darkTeal", autoRotate = true, electronFrequency = 800, selectedBoostFactor = 4, initialPov, topoJsonUrl, className, height, }) {
-    const globeRef = useRef(undefined);
+export function GlobeView({ arcs, points, countryData, selectedCountryCode, selectedArcId, onCountryClick, onArcClick, onHover, theme: themeOverrides, preset = "darkTeal", autoRotate = true, electronFrequency = 800, selectedBoostFactor, initialPov, topoJsonUrl, className, height = "clamp(450px, 60vw, 700px)", fallbackLabels, }) {
     const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-    const [isVisible, setIsVisible] = useState(true);
-    const idleTimerRef = useRef(null);
-    // Accessibility: reduced motion preference
-    const reducedMotion = typeof window !== "undefined"
-        ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
-        : false;
-    // Stable refs for callbacks (avoid stale closures)
-    const onCountryClickRef = useRef(onCountryClick);
-    const onArcClickRef = useRef(onArcClick);
-    const onHoverRef = useRef(onHover);
-    onCountryClickRef.current = onCountryClick;
-    onArcClickRef.current = onArcClick;
-    onHoverRef.current = onHover;
-    // -- WebGL check --
-    const [webglOk] = useState(() => isWebGLAvailable());
-    // -- Theme resolution --
-    const resolvedTheme = useMemo(() => resolveTheme(preset, containerRef.current, theme), [preset, theme]);
-    // Tooltip styles derived from theme — works on dark and light
-    const tooltipStyles = useMemo(() => deriveTooltipStyles(resolvedTheme), [resolvedTheme]);
-    // Hollow globe: no globe material needed (showGlobe={false})
-    // -- Load country polygons --
-    const countryFeatures = useCountryFeatures(topoJsonUrl);
-    // -- Electron arc system --
-    const arcsData = useElectronEmitter(arcs ?? [], resolvedTheme, electronFrequency, selectedCountryCode, selectedArcId, selectedBoostFactor, reducedMotion);
-    // -- ResizeObserver --
-    useEffect(() => {
-        const el = containerRef.current;
-        if (!el)
-            return;
-        const ro = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                const { width, height: h } = entry.contentRect;
-                if (width > 0 && h > 0) {
-                    setDimensions({
-                        width: Math.floor(width),
-                        height: Math.floor(h),
-                    });
-                }
-            }
-        });
-        ro.observe(el);
-        // Trigger initial measurement
-        const { clientWidth, clientHeight } = el;
-        if (clientWidth > 0 && clientHeight > 0) {
-            setDimensions({ width: clientWidth, height: clientHeight });
-        }
-        return () => ro.disconnect();
-    }, []);
-    // -- IntersectionObserver -- pause rendering when off-screen --
-    useEffect(() => {
-        const el = containerRef.current;
-        if (!el)
-            return;
-        const io = new IntersectionObserver(([entry]) => {
-            setIsVisible(entry.isIntersecting);
-        }, { threshold: 0.1 });
-        io.observe(el);
-        return () => io.disconnect();
-    }, []);
-    useEffect(() => {
-        const globe = globeRef.current;
-        if (!globe)
-            return;
-        if (isVisible) {
-            globe.resumeAnimation();
-        }
-        else {
-            globe.pauseAnimation();
-        }
-    }, [isVisible]);
-    // -- Fly-to-country on selection --
-    useEffect(() => {
-        if (!selectedCountryCode || !globeRef.current)
-            return;
-        const entry = COUNTRY_GEO_MAP.get(selectedCountryCode);
-        if (!entry)
-            return;
-        globeRef.current.pointOfView({ lat: entry.lat, lng: entry.lng, altitude: 1.8 }, 1000);
-    }, [selectedCountryCode]);
-    // -- onGlobeReady: set initial POV, material, starfield, halo, controls --
-    const handleGlobeReady = useCallback(() => {
-        const globe = globeRef.current;
-        if (!globe)
-            return;
-        // Set initial point of view immediately (no animation)
-        const pov = initialPov ?? DEFAULT_POV;
-        globe.pointOfView(pov, 0);
-        // Add halo glow around the hollow globe
-        const scene = globe.scene();
-        if (scene) {
-            const globeRadius = globe.getGlobeRadius?.() ?? 100;
-            addHalo(scene, globeRadius, resolvedTheme);
-        }
-        // Configure OrbitControls for premium feel
-        try {
-            const controls = globe.controls();
-            if (controls) {
-                controls.enableDamping = true;
-                controls.dampingFactor = 0.12;
-                controls.rotateSpeed = 0.5;
-                controls.zoomSpeed = 0.8;
-                controls.enablePan = false;
-                controls.minDistance = 120;
-                controls.maxDistance = 500;
-                controls.minPolarAngle = Math.PI * 0.15;
-                controls.maxPolarAngle = Math.PI * 0.85;
-                if (autoRotate && !reducedMotion) {
-                    controls.autoRotate = true;
-                    controls.autoRotateSpeed = AUTO_ROTATE_SPEED;
-                }
-            }
-        }
-        catch {
-            // controls may not be ready yet
-        }
-    }, [reducedMotion, autoRotate, initialPov, resolvedTheme]);
-    // -- Interaction handlers: pause/resume auto-rotate --
-    const handleInteractionStart = useCallback(() => {
-        if (reducedMotion || !autoRotate)
-            return;
-        const globe = globeRef.current;
-        if (!globe)
-            return;
-        try {
-            const controls = globe.controls();
-            if (controls)
-                controls.autoRotate = false;
-        }
-        catch {
-            // ignore
-        }
-        if (idleTimerRef.current)
-            clearTimeout(idleTimerRef.current);
-    }, [reducedMotion, autoRotate]);
-    const handleInteractionEnd = useCallback(() => {
-        if (reducedMotion || !autoRotate)
-            return;
-        if (idleTimerRef.current)
-            clearTimeout(idleTimerRef.current);
-        idleTimerRef.current = setTimeout(() => {
-            const globe = globeRef.current;
-            if (!globe)
-                return;
-            try {
-                const controls = globe.controls();
-                if (controls)
-                    controls.autoRotate = true;
-            }
-            catch {
-                // ignore
-            }
-        }, IDLE_RESUME_MS);
-    }, [reducedMotion, autoRotate]);
-    // Cleanup idle timer on unmount
-    useEffect(() => {
-        return () => {
-            if (idleTimerRef.current)
-                clearTimeout(idleTimerRef.current);
-        };
-    }, []);
-    // -- Zoom handler --
-    const handleZoom = useCallback(() => {
-        handleInteractionStart();
-        handleInteractionEnd();
-    }, [handleInteractionStart, handleInteractionEnd]);
-    // ---------------------------------------------------------------------------
-    // Polygon layer: country geometries with selection highlighting
-    // ---------------------------------------------------------------------------
-    const polygonData = useMemo(() => {
-        if (countryFeatures.length === 0)
-            return [];
-        return countryFeatures.map((f) => ({
-            ...f,
-            _alpha2: numericToAlpha2(String(f.id ?? "")),
-        }));
-    }, [countryFeatures]);
-    const getPolygonCapColor = useCallback((obj) => {
-        const feat = obj;
-        const code = feat._alpha2;
-        if (!code)
-            return resolvedTheme.countryDefault;
-        if (code === selectedCountryCode)
-            return resolvedTheme.countrySelected;
-        // Heatmap: countries glow from within against the void
-        if (countryData && countryData.length > 0) {
-            const datum = countryData.find((d) => d.countryCode === code);
-            if (datum) {
-                const maxVal = Math.max(1, ...countryData.map((d) => d.value));
-                const normalized = datum.value / maxVal;
-                // Glow from dark teal (low) to bright cyan (high)
-                const alpha = 0.35 + normalized * 0.55;
-                const r = Math.round(10 + normalized * 24);
-                const g = Math.round(80 + normalized * 131);
-                const b = Math.round(80 + normalized * 158);
-                return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-            }
-        }
-        // Dim non-selected countries when one is selected
-        if (selectedCountryCode)
-            return resolvedTheme.countryDim;
-        return resolvedTheme.countryDefault;
-    }, [selectedCountryCode, countryData, resolvedTheme]);
-    const getPolygonSideColor = useCallback(() => {
-        // Slightly transparent version of theme stroke
-        return resolvedTheme.countryDim;
-    }, [resolvedTheme.countryDim]);
-    const getPolygonStrokeColor = useCallback(() => resolvedTheme.countryStroke, [resolvedTheme.countryStroke]);
-    const getPolygonAltitude = useCallback((obj) => {
-        const feat = obj;
-        return feat._alpha2 === selectedCountryCode ? 0.01 : 0.005;
-    }, [selectedCountryCode]);
-    const handlePolygonClick = useCallback((polygon) => {
-        const feat = polygon;
-        if (feat._alpha2)
-            onCountryClickRef.current?.(feat._alpha2);
-    }, []);
-    const handlePolygonHover = useCallback((polygon) => {
-        if (!polygon) {
-            onHoverRef.current?.(null);
-            return;
-        }
-        const feat = polygon;
-        const code = feat._alpha2;
-        if (!code)
-            return;
-        onHoverRef.current?.({
-            type: "country",
-            countryCode: code,
-            label: feat.properties?.name,
-        });
-    }, []);
-    // ---------------------------------------------------------------------------
-    // Arc layer: electron emission pattern (ghost + electrons from hook)
-    // ---------------------------------------------------------------------------
-    const handleArcClick = useCallback((arc) => {
-        const a = arc;
-        // Find the original GlobeArc by id
-        const original = (arcs ?? []).find((x) => x.id === a.id);
-        if (original)
-            onArcClickRef.current?.(original);
-    }, [arcs]);
-    const handleArcHover = useCallback((arc) => {
-        if (!arc) {
-            onHoverRef.current?.(null);
-            return;
-        }
-        const a = arc;
-        const original = (arcs ?? []).find((x) => x.id === a.id);
-        if (original)
-            onHoverRef.current?.({ type: "arc", arc: original });
-    }, [arcs]);
-    // ---------------------------------------------------------------------------
-    // Points layer
-    // ---------------------------------------------------------------------------
-    const pointsData = useMemo(() => {
-        const result = [];
-        // Explicit points from consumer
-        if (points && points.length > 0) {
-            const maxVal = Math.max(1, ...points.map((p) => p.value ?? 1));
-            for (const p of points) {
-                result.push({
-                    lat: p.lat,
-                    lng: p.lng,
-                    size: 0.2 + ((p.value ?? 1) / maxVal) * 0.8,
-                    color: resolvedTheme.pointColor,
-                    _sourcePoint: p,
-                });
-            }
-        }
-        // Auto-generated endpoint dots from active arcs — pulsing markers
-        const seenEndpoints = new Set();
-        for (const arc of arcsData) {
-            const oKey = `${arc.originLat},${arc.originLng}`;
-            if (!seenEndpoints.has(oKey)) {
-                seenEndpoints.add(oKey);
-                result.push({
-                    lat: arc.originLat,
-                    lng: arc.originLng,
-                    size: 0.25,
-                    color: resolvedTheme.pointColor,
-                    _sourcePoint: { id: oKey, lat: arc.originLat, lng: arc.originLng },
-                });
-            }
-            const dKey = `${arc.destLat},${arc.destLng}`;
-            if (!seenEndpoints.has(dKey)) {
-                seenEndpoints.add(dKey);
-                result.push({
-                    lat: arc.destLat,
-                    lng: arc.destLng,
-                    size: 0.3,
-                    color: resolvedTheme.ringColor,
-                    _sourcePoint: { id: dKey, lat: arc.destLat, lng: arc.destLng },
-                });
-            }
-        }
-        return result;
-    }, [points, arcsData, resolvedTheme.pointColor, resolvedTheme.ringColor]);
-    const handlePointClick = useCallback((point) => {
-        const p = point;
-        // Points don't have a dedicated click handler in the generic API,
-        // but we can emit a hover-style event or use the country click
-        // if the point has location metadata
-        const meta = p._sourcePoint.metadata;
-        const countryCode = meta?.countryCode;
-        if (countryCode)
-            onCountryClickRef.current?.(countryCode);
-    }, []);
-    const handlePointHover = useCallback((point) => {
-        if (!point) {
-            onHoverRef.current?.(null);
-            return;
-        }
-        const p = point;
-        onHoverRef.current?.({ type: "point", point: p._sourcePoint });
-    }, []);
-    // ---------------------------------------------------------------------------
-    // Rings layer: ripple at electron arc destinations
-    // ---------------------------------------------------------------------------
-    const ringsData = useMemo(() => {
-        // Rings pulse at destination endpoints of all visible arcs
-        const seen = new Set();
-        const rings = [];
-        for (const arc of arcsData) {
-            // Only ring at destinations of recently-arrived arcs (not settled)
-            if (arc._settled)
-                continue;
-            const key = `${arc.destLat},${arc.destLng}`;
-            if (!seen.has(key)) {
-                seen.add(key);
-                rings.push({ lat: arc.destLat, lng: arc.destLng });
-            }
-        }
-        return rings;
-    }, [arcsData]);
-    const getRingColor = useCallback(() => {
-        // Parse the ring color from theme to RGB components
-        const c = new THREE.Color(resolvedTheme.ringColor);
-        const r = Math.round(c.r * 255);
-        const g = Math.round(c.g * 255);
-        const b = Math.round(c.b * 255);
-        return (t) => `rgba(${r}, ${g}, ${b}, ${Math.pow(1 - t, 2).toFixed(2)})`;
-    }, [resolvedTheme.ringColor]);
-    // ---------------------------------------------------------------------------
-    // Hex polygon layer: dot overlay when countryData is provided
-    // ---------------------------------------------------------------------------
-    const hexPolygonData = useMemo(() => {
-        if (!countryData || countryData.length === 0)
-            return [];
-        return polygonData.filter((feat) => {
-            if (!feat._alpha2)
-                return false;
-            return countryData.some((d) => d.countryCode === feat._alpha2);
-        });
-    }, [countryData, polygonData]);
-    const getHexPolygonColor = useCallback((obj) => {
-        const feat = obj;
-        const code = feat._alpha2;
-        if (!code || !countryData)
-            return resolvedTheme.countryDefault;
-        const datum = countryData.find((d) => d.countryCode === code);
-        if (datum) {
-            const maxVal = Math.max(1, ...countryData.map((d) => d.value));
-            const normalized = datum.value / maxVal;
-            const alpha = 0.2 + normalized * 0.6;
-            const c = new THREE.Color(resolvedTheme.atmosphere);
-            const r = Math.round(c.r * 255);
-            const g = Math.round(c.g * 255);
-            const b = Math.round(c.b * 255);
-            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-        }
-        return resolvedTheme.countryDefault;
-    }, [countryData, resolvedTheme]);
-    // ---------------------------------------------------------------------------
-    // Vignette overlay
-    // ---------------------------------------------------------------------------
+    const [tooltip] = useState(null);
+    const canOffscreen = useMemo(() => detectOffscreenSupport(), []);
+    // Note: CSS custom property resolution from containerRef is deferred to
+    // the canvas worker; resolveTheme here uses preset + overrides only.
+    const resolvedTheme = useMemo(() => resolveTheme(preset, null, themeOverrides), [preset, themeOverrides]);
     const vignetteStyle = useMemo(() => getVignetteStyle(resolvedTheme), [resolvedTheme]);
-    // ---------------------------------------------------------------------------
-    // WebGL fallback
-    // ---------------------------------------------------------------------------
-    if (!webglOk) {
-        return (_jsx("div", { className: cn("flex items-center justify-center bg-slate-900 text-slate-400 text-sm", className), style: { height: height ?? "clamp(450px, 60vw, 700px)" }, role: "img", "aria-label": "Globe visualization (WebGL unavailable)", children: _jsx("p", { children: "3D globe requires WebGL support. Please use a modern browser." }) }));
-    }
-    // ---------------------------------------------------------------------------
-    // Render
-    // ---------------------------------------------------------------------------
-    return (_jsxs("div", { ref: containerRef, className: cn("relative overflow-hidden", className), style: { height: height ?? "clamp(450px, 60vw, 700px)" }, role: "img", "aria-label": "Interactive 3D globe visualization", onPointerDown: handleInteractionStart, onPointerUp: handleInteractionEnd, children: [dimensions.width > 0 && dimensions.height > 0 && (_jsx(Suspense, { fallback: _jsx("div", { className: "flex size-full items-center justify-center bg-slate-900 text-slate-400 text-sm", children: "Loading globe..." }), children: _jsx(Globe, { ref: globeRef, width: dimensions.width, height: dimensions.height, backgroundColor: "rgba(0,0,0,0)", 
-                    // --- HOLLOW GLOBE: no solid sphere, just floating polygons ---
-                    showGlobe: false, showAtmosphere: false, showGraticules: false, animateIn: !reducedMotion, onGlobeReady: handleGlobeReady, rendererConfig: {
-                        antialias: true,
-                        alpha: true,
-                        powerPreference: "high-performance",
-                    }, 
-                    // -- Polygon layer: holographic country outlines --
-                    polygonsData: polygonData, polygonGeoJsonGeometry: "geometry", polygonCapColor: getPolygonCapColor, polygonSideColor: () => "rgba(0,0,0,0)", polygonStrokeColor: getPolygonStrokeColor, polygonAltitude: getPolygonAltitude, polygonLabel: (d) => {
-                        const feat = d;
-                        const code = feat._alpha2;
-                        if (!code)
-                            return "";
-                        const name = feat.properties?.name ?? code;
-                        // Heatmap mode: show rich data
-                        if (countryData && countryData.length > 0) {
-                            const datum = countryData.find((c) => c.countryCode === code);
-                            if (datum) {
-                                const meta = datum.metadata ?? {};
-                                const count = meta.opportunityCount;
-                                const open = meta.openCount;
-                                const type = meta.type ?? "demand";
-                                const eyebrow = type === "sourcing" ? "Sourcing Origin" : "Market Demand";
-                                let details = `Intensity: ${Math.round(datum.value * 100)}%`;
-                                if (count != null) {
-                                    details = `${count} opportunities${open != null ? ` · ${open} open` : ""}`;
-                                }
-                                return buildTooltip(tooltipStyles, eyebrow, datum.label ?? name, details);
-                            }
-                        }
-                        // Default: just country name + code
-                        return buildTooltip(tooltipStyles, "Country", name, code !== name ? code : undefined);
-                    }, polygonsTransitionDuration: reducedMotion ? 0 : 300, onPolygonClick: handlePolygonClick, onPolygonHover: handlePolygonHover, 
-                    // -- Arc layer --
-                    arcsData: arcsData, arcStartLat: "originLat", arcStartLng: "originLng", arcEndLat: "destLat", arcEndLng: "destLng", arcDashLength: "_dashLength", arcDashGap: "_dashGap", arcDashAnimateTime: "_dashAnimateTime", arcStroke: "_stroke", arcColor: (d) => d._color, arcAltitudeAutoScale: 0.35, arcLabel: (d) => {
-                        const arc = d;
-                        if (!arc.label)
-                            return "";
-                        const eyebrow = arc.category === "secondary" ? "Match Flow" : "Opportunity Flow";
-                        const details = arc.value ? `${arc.value} ${arc.category === "secondary" ? "matches" : "opportunities"}` : undefined;
-                        return buildTooltip(tooltipStyles, eyebrow, arc.label, details);
-                    }, arcsTransitionDuration: 0, onArcClick: handleArcClick, onArcHover: handleArcHover, 
-                    // -- Points layer --
-                    pointsData: pointsData, pointLat: "lat", pointLng: "lng", pointRadius: "size", pointColor: "color", pointLabel: (d) => {
-                        const p = d;
-                        const src = p._sourcePoint;
-                        if (!src.label)
-                            return "";
-                        const meta = src.metadata ?? {};
-                        const producers = meta.producerCount;
-                        const importers = meta.importerCount;
-                        let details = src.value != null ? `${src.value} total` : "";
-                        if (producers != null && importers != null) {
-                            details = `${producers} producers · ${importers} importers`;
-                        }
-                        return buildTooltip(tooltipStyles, "Organization", src.label, details || undefined);
-                    }, pointAltitude: 0.01, pointsMerge: false, pointsTransitionDuration: reducedMotion ? 0 : 500, onPointClick: handlePointClick, onPointHover: handlePointHover, 
-                    // -- Rings layer --
-                    ringsData: ringsData, ringLat: "lat", ringLng: "lng", ringColor: getRingColor, ringMaxRadius: reducedMotion ? 1 : 4, ringPropagationSpeed: reducedMotion ? 0 : 2, ringRepeatPeriod: reducedMotion ? 0 : 1800, 
-                    // -- Hex polygon layer (data density dots) --
-                    hexPolygonsData: hexPolygonData, hexPolygonGeoJsonGeometry: "geometry", hexPolygonColor: getHexPolygonColor, hexPolygonMargin: 0.7, hexPolygonAltitude: 0.002, hexPolygonResolution: 3, hexPolygonUseDots: true, hexPolygonLabel: (d) => {
-                        const feat = d;
-                        const code = feat._alpha2;
-                        if (!code || !countryData)
-                            return "";
-                        const datum = countryData.find((c) => c.countryCode === code);
-                        if (!datum)
-                            return "";
-                        const meta = datum.metadata ?? {};
-                        const count = meta.opportunityCount;
-                        const open = meta.openCount;
-                        const type = meta.type ?? "demand";
-                        const eyebrow = type === "sourcing" ? "Sourcing Origin" : "Market Demand";
-                        let details = `Intensity: ${Math.round(datum.value * 100)}%`;
-                        if (count != null) {
-                            details = `${count} opportunities${open != null ? ` · ${open} open` : ""}`;
-                        }
-                        return buildTooltip(tooltipStyles, eyebrow, datum.label ?? code, details + " · Click to focus");
-                    }, hexPolygonsTransitionDuration: reducedMotion ? 0 : 500, 
-                    // -- Interaction --
-                    onZoom: handleZoom, enablePointerInteraction: true }) })), vignetteStyle && (_jsx("div", { className: "pointer-events-none absolute inset-0", style: vignetteStyle }))] }));
+    const reducedMotion = useMemo(() => typeof window !== "undefined" &&
+        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches, []);
+    return (_jsxs("div", { ref: containerRef, className: className, style: { position: "relative", width: "100%", height }, role: "img", "aria-label": "Interactive 3D globe visualization", children: [canOffscreen ? (_jsx(Suspense, { fallback: _jsx(GlobeLoadingSkeleton, { height: height }), children: _jsx(LazyGlobeCanvas, { arcs: arcs, points: points, countryData: countryData, selectedCountryCode: selectedCountryCode, selectedArcId: selectedArcId, onCountryClick: onCountryClick, onArcClick: onArcClick, onHover: onHover, theme: themeOverrides, preset: preset, autoRotate: autoRotate, electronFrequency: electronFrequency, selectedBoostFactor: selectedBoostFactor, initialPov: initialPov, topoJsonUrl: topoJsonUrl, reducedMotion: reducedMotion, height: height }) })) : (_jsx(GlobeStatsFallback, { arcs: arcs, points: points, countryData: countryData, fallbackLabels: fallbackLabels, height: height })), _jsx(GlobeTooltip, { tooltip: tooltip, theme: resolvedTheme }), vignetteStyle && (_jsx("div", { style: {
+                    ...vignetteStyle,
+                    position: "absolute",
+                    inset: 0,
+                    pointerEvents: "none",
+                    borderRadius: "inherit",
+                } }))] }));
 }
 //# sourceMappingURL=globe-view.js.map