@mieweb/ui 0.10.0-dev.1 → 0.10.0-dev.11

package/dist/globe.cjs

@@ -0,0 +1,306 @@
+'use strict';
+
+var chunk6HFFWEM3_cjs = require('./chunk-6HFFWEM3.cjs');
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+require('./chunk-EUAMEVVI.cjs');
+var React = require('react');
+var ReactGlobe = require('react-globe.gl');
+var three = require('three');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ReactGlobe__default = /*#__PURE__*/_interopDefault(ReactGlobe);
+
+var DEFAULT_GEO_URL = "https://raw.githubusercontent.com/vasturiano/react-globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson";
+var DEFAULT_THEME = {
+  surface: "#0a1322",
+  emissive: "#0a1b2e",
+  atmosphere: "#5b8fb0",
+  land: "rgba(123,156,201,0.5)",
+  hub: "#ffe7b0",
+  city: "rgba(201,168,116,0.72)",
+  backbone: ["rgba(63,169,155,0.12)", "rgba(160,235,224,0.95)"],
+  spoke: ["rgba(63,169,155,0)", "rgba(150,225,214,0.5)"]
+};
+function haversine(a, b) {
+  const toRad = (d) => d * Math.PI / 180;
+  const dLat = toRad(b.lat - a.lat);
+  const dLng = toRad(b.lng - a.lng);
+  const h = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(a.lat)) * Math.cos(toRad(b.lat)) * Math.sin(dLng / 2) ** 2;
+  return 2 * Math.asin(Math.sqrt(h));
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function buildArcs(points, connectHubs = true) {
+  const hubs = points.filter((p) => p.hub);
+  if (hubs.length === 0) return [];
+  const spokes = points.filter((p) => !p.hub).map((c, i) => {
+    const hub = hubs.reduce(
+      (best, h) => haversine(c, h) < haversine(c, best) ? h : best,
+      hubs[0]
+    );
+    return {
+      startLat: c.lat,
+      startLng: c.lng,
+      endLat: hub.lat,
+      endLng: hub.lng,
+      kind: "spoke",
+      speed: 4200 + i * 137 % 2800,
+      gap: i * 13 % 100 / 100
+    };
+  });
+  const ring = connectHubs && hubs.length > 1 ? hubs.map((h, i) => {
+    const next = hubs[(i + 1) % hubs.length];
+    return {
+      startLat: h.lat,
+      startLng: h.lng,
+      endLat: next.lat,
+      endLng: next.lng,
+      kind: "backbone",
+      speed: 4600,
+      gap: i * 33 / 100
+    };
+  }) : [];
+  return [...spokes, ...ring];
+}
+function pointId(p) {
+  return p.id ?? `${p.lat},${p.lng}`;
+}
+function Globe({
+  points = [],
+  arcs,
+  connectHubs = true,
+  geoUrl = DEFAULT_GEO_URL,
+  hexResolution = 3,
+  theme,
+  pointOfView = { lat: 18, lng: -22, altitude: 2.35 },
+  autoRotateSpeed = 0.5,
+  enableZoom = false,
+  callout = true,
+  selectedId,
+  onSelect,
+  onPointHover,
+  pointLabel,
+  height = "clamp(360px, 54vw, 560px)",
+  className
+}) {
+  const t = { ...DEFAULT_THEME, ...theme };
+  const reduced = chunk6HFFWEM3_cjs.usePrefersReducedMotion();
+  const globeRef = React__namespace.useRef(void 0);
+  const frameRef = React__namespace.useRef(null);
+  const [size, setSize] = React__namespace.useState({ w: 0, h: 0 });
+  const [countries, setCountries] = React__namespace.useState([]);
+  const [innerSel, setInnerSel] = React__namespace.useState(null);
+  const sel = selectedId !== void 0 ? selectedId : innerSel;
+  const selected = sel ? points.find((p) => pointId(p) === sel) ?? null : null;
+  const material = React__namespace.useMemo(
+    () => new three.MeshPhongMaterial({
+      color: t.surface,
+      emissive: t.emissive,
+      emissiveIntensity: 0.32,
+      shininess: 4
+    }),
+    [t.surface, t.emissive]
+  );
+  const arcData = React__namespace.useMemo(
+    () => arcs ? arcs.map((a) => ({ kind: "spoke", speed: 4600, gap: 0, ...a })) : buildArcs(points, connectHubs),
+    [arcs, points, connectHubs]
+  );
+  React__namespace.useEffect(() => {
+    const el = frameRef.current;
+    if (!el || typeof globalThis.ResizeObserver === "undefined") return;
+    const ro = new globalThis.ResizeObserver(([e]) => {
+      const { width, height: h } = e.contentRect;
+      setSize({ w: Math.round(width), h: Math.round(h) });
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  React__namespace.useEffect(() => {
+    if (!geoUrl) return;
+    let live = true;
+    fetch(geoUrl).then((r) => r.json()).then(
+      (geo) => live && setCountries(geo.features ?? [])
+    ).catch(() => live && setCountries([]));
+    return () => {
+      live = false;
+    };
+  }, [geoUrl]);
+  const onReady = React__namespace.useCallback(() => {
+    const g = globeRef.current;
+    if (!g) return;
+    const c = g.controls();
+    c.enableZoom = enableZoom;
+    c.enablePan = false;
+    c.autoRotate = !reduced && autoRotateSpeed > 0;
+    c.autoRotateSpeed = autoRotateSpeed;
+    c.minPolarAngle = Math.PI * 0.16;
+    c.maxPolarAngle = Math.PI * 0.84;
+    g.pointOfView(pointOfView);
+    g.renderer().domElement.style.touchAction = "pan-y";
+  }, [enableZoom, reduced, autoRotateSpeed, pointOfView]);
+  const select = (p) => {
+    if (selectedId === void 0) setInnerSel(p ? pointId(p) : null);
+    onSelect?.(p);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: frameRef,
+      "data-slot": "globe",
+      style: { height },
+      className: chunkS5RVSXDV_cjs.cn("relative w-full overflow-hidden", className),
+      children: [
+        size.w > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          ReactGlobe__default.default,
+          {
+            ref: globeRef,
+            width: size.w,
+            height: size.h,
+            onGlobeReady: onReady,
+            backgroundColor: "rgba(0,0,0,0)",
+            globeMaterial: material,
+            showAtmosphere: true,
+            atmosphereColor: t.atmosphere,
+            atmosphereAltitude: 0.16,
+            hexPolygonsData: countries,
+            hexPolygonResolution: hexResolution,
+            hexPolygonMargin: 0.4,
+            hexPolygonUseDots: true,
+            hexPolygonColor: () => t.land,
+            pointsData: points,
+            pointLat: "lat",
+            pointLng: "lng",
+            pointAltitude: (d) => d.hub ? 0.013 : 6e-3,
+            pointRadius: (d) => d.hub ? 0.48 : 0.3,
+            pointResolution: 18,
+            pointColor: (d) => {
+              const p = d;
+              return p.color ?? (p.hub ? t.hub : t.city);
+            },
+            pointLabel: (d) => {
+              const p = d;
+              if (pointLabel) return pointLabel(p);
+              return `<b>${escapeHtml(p.name)}</b>${p.sub ? ` &middot; ${escapeHtml(p.sub)}` : ""}`;
+            },
+            onPointHover: (d) => onPointHover?.(d ?? null),
+            onPointClick: (d) => select(d),
+            onGlobeClick: () => select(null),
+            arcsData: arcData,
+            arcStartLat: "startLat",
+            arcStartLng: "startLng",
+            arcEndLat: "endLat",
+            arcEndLng: "endLng",
+            arcColor: (d) => d.kind === "backbone" ? t.backbone : t.spoke,
+            arcStroke: (d) => d.kind === "backbone" ? 0.5 : 0.3,
+            arcAltitudeAutoScale: 0.45,
+            arcDashLength: (d) => reduced ? 1 : d.kind === "backbone" ? 0.5 : 0.35,
+            arcDashGap: (d) => reduced ? 0 : d.kind === "backbone" ? 0.2 : 0.7,
+            arcDashInitialGap: (d) => reduced ? 0 : d.gap,
+            arcDashAnimateTime: (d) => reduced ? 0 : d.speed
+          }
+        ),
+        callout && selected && /* @__PURE__ */ jsxRuntime.jsx(Callout, { point: selected, onClose: () => select(null) })
+      ]
+    }
+  );
+}
+function useLocalTime(timeZone) {
+  const fmt = React__namespace.useMemo(
+    () => timeZone ? new Intl.DateTimeFormat(void 0, {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone,
+      timeZoneName: "short"
+    }) : null,
+    [timeZone]
+  );
+  const [now, setNow] = React__namespace.useState(() => /* @__PURE__ */ new Date());
+  React__namespace.useEffect(() => {
+    if (!fmt) return;
+    const t = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 15e3);
+    return () => window.clearInterval(t);
+  }, [fmt]);
+  return fmt ? fmt.format(now) : null;
+}
+function Callout({
+  point,
+  onClose
+}) {
+  const time = useLocalTime(point.timeZone);
+  const Body = point.href ? "a" : "span";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "data-slot": "globe-callout",
+      className: "absolute bottom-4 left-1/2 z-10 inline-flex max-w-[min(90%,360px)] -translate-x-1/2 items-center gap-2.5 rounded-full border border-white/15 bg-neutral-950/70 py-1.5 ps-3.5 pe-1.5 text-white shadow-xl backdrop-blur-md motion-safe:animate-[mie-fade-in_0.28s_ease]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "h-2 w-2 shrink-0 rounded-full bg-[var(--mieweb-accent,#ffe7b0)] shadow-[0_0_8px_var(--mieweb-accent,#ffe7b0)]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Body,
+          {
+            href: point.href,
+            className: "flex min-w-0 flex-col leading-tight no-underline",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("b", { className: "truncate text-sm", children: [
+                point.flag && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "me-1.5", children: point.flag }),
+                point.name
+              ] }),
+              (point.sub || time) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate text-[11px] tracking-wider text-white/70 uppercase", children: [
+                point.sub,
+                point.sub && time && " \xB7 ",
+                time && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tracking-normal normal-case tabular-nums", children: time })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            "aria-label": "Dismiss",
+            className: "ms-1 grid h-7 w-7 shrink-0 place-items-center rounded-full text-white/70 hover:bg-white/10 hover:text-white",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14, "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.DEFAULT_GEO_URL = DEFAULT_GEO_URL;
+exports.Globe = Globe;
+exports.buildArcs = buildArcs;
+//# sourceMappingURL=globe.cjs.map
+//# sourceMappingURL=globe.cjs.map

package/dist/globe.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Globe/Globe.tsx"],"names":["usePrefersReducedMotion","React","MeshPhongMaterial","jsxs","cn","jsx","ReactGlobe","X"],"mappings":"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","file":"globe.cjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport ReactGlobe, { type GlobeMethods } from 'react-globe.gl';\nimport { MeshPhongMaterial } from 'three';\nimport { X } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface GlobePoint {\n  id?: string;\n  lat: number;\n  lng: number;\n  name: string;\n  /** Secondary line in tooltip/callout, e.g. \"Distribution\". */\n  sub?: string;\n  /** Hubs are drawn larger, raised, and become arc anchors. */\n  hub?: boolean;\n  /** Per-point dot colour. */\n  color?: string;\n  /** IANA zone, e.g. `America/Sao_Paulo` — shows a live local clock in the callout. */\n  timeZone?: string;\n  /** Emoji flag or short code shown before the name in the callout. */\n  flag?: string;\n  /** Destination when the callout is clicked. */\n  href?: string;\n}\n\nexport interface GlobeArc {\n  startLat: number;\n  startLng: number;\n  endLat: number;\n  endLng: number;\n  /** `backbone` arcs are brighter and thicker than `spoke` arcs. */\n  kind?: 'backbone' | 'spoke';\n  /** Dash cycle time in ms. */\n  speed?: number;\n  /** Dash start offset 0–1. */\n  gap?: number;\n}\n\nexport interface GlobeTheme {\n  /** Globe body. */\n  surface?: string;\n  emissive?: string;\n  atmosphere?: string;\n  /** Dotted-continent colour. */\n  land?: string;\n  /** Hub dot / city dot. */\n  hub?: string;\n  city?: string;\n  /** Arc gradients, start → end. */\n  backbone?: [string, string];\n  spoke?: [string, string];\n}\n\nexport interface GlobeProps {\n  points?: GlobePoint[];\n  /** Explicit arcs. Omit to auto-connect every non-hub point to its nearest hub. */\n  arcs?: GlobeArc[];\n  /** Also connect hubs to each other in a ring. Default true when ≥2 hubs. */\n  connectHubs?: boolean;\n  /**\n   * GeoJSON FeatureCollection URL for the dotted continents. Defaults to the\n   * Natural Earth 110m countries file shipped with react-globe.gl's examples.\n   */\n  geoUrl?: string | null;\n  /** Hex resolution (2 coarse … 4 fine). Default 3. */\n  hexResolution?: number;\n  theme?: GlobeTheme;\n  /** Initial camera. Default lat 18 / lng −22 / altitude 2.35. */\n  pointOfView?: { lat?: number; lng?: number; altitude?: number };\n  /** Auto-rotate speed; 0 disables. Default 0.5. Off under reduced motion. */\n  autoRotateSpeed?: number;\n  enableZoom?: boolean;\n  /** Show the pill callout for the selected point. Default true. */\n  callout?: boolean;\n  /** Controlled selection. */\n  selectedId?: string | null;\n  onSelect?: (point: GlobePoint | null) => void;\n  onPointHover?: (point: GlobePoint | null) => void;\n  /** Custom hover tooltip HTML. */\n  pointLabel?: (point: GlobePoint) => string;\n  /** Fixed height. Default `clamp(360px, 54vw, 560px)`. */\n  height?: string;\n  className?: string;\n}\n\n// =============================================================================\n// Defaults\n// =============================================================================\n\nexport const DEFAULT_GEO_URL =\n  'https://raw.githubusercontent.com/vasturiano/react-globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson';\n\nconst DEFAULT_THEME: Required<GlobeTheme> = {\n  surface: '#0a1322',\n  emissive: '#0a1b2e',\n  atmosphere: '#5b8fb0',\n  land: 'rgba(123,156,201,0.5)',\n  hub: '#ffe7b0',\n  city: 'rgba(201,168,116,0.72)',\n  backbone: ['rgba(63,169,155,0.12)', 'rgba(160,235,224,0.95)'],\n  spoke: ['rgba(63,169,155,0)', 'rgba(150,225,214,0.5)'],\n};\n\ntype Arc = Required<\n  Pick<\n    GlobeArc,\n    'startLat' | 'startLng' | 'endLat' | 'endLng' | 'kind' | 'speed' | 'gap'\n  >\n>;\n\nfunction haversine(a: GlobePoint, b: GlobePoint): number {\n  const toRad = (d: number) => (d * Math.PI) / 180;\n  const dLat = toRad(b.lat - a.lat);\n  const dLng = toRad(b.lng - a.lng);\n  const h =\n    Math.sin(dLat / 2) ** 2 +\n    Math.cos(toRad(a.lat)) * Math.cos(toRad(b.lat)) * Math.sin(dLng / 2) ** 2;\n  return 2 * Math.asin(Math.sqrt(h));\n}\n\n/** Escape a string for interpolation into tooltip HTML. */\nfunction escapeHtml(s: string): string {\n  return s\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n}\n\n/** Spokes from each city to its nearest hub, plus an optional hub ring. */\nexport function buildArcs(points: GlobePoint[], connectHubs = true): Arc[] {\n  const hubs = points.filter((p) => p.hub);\n  if (hubs.length === 0) return [];\n  const spokes: Arc[] = points\n    .filter((p) => !p.hub)\n    .map((c, i) => {\n      const hub = hubs.reduce(\n        (best, h) => (haversine(c, h) < haversine(c, best) ? h : best),\n        hubs[0]\n      );\n      return {\n        startLat: c.lat,\n        startLng: c.lng,\n        endLat: hub.lat,\n        endLng: hub.lng,\n        kind: 'spoke',\n        speed: 4200 + ((i * 137) % 2800),\n        gap: ((i * 13) % 100) / 100,\n      };\n    });\n  const ring: Arc[] =\n    connectHubs && hubs.length > 1\n      ? hubs.map((h, i) => {\n          const next = hubs[(i + 1) % hubs.length];\n          return {\n            startLat: h.lat,\n            startLng: h.lng,\n            endLat: next.lat,\n            endLng: next.lng,\n            kind: 'backbone',\n            speed: 4600,\n            gap: (i * 33) / 100,\n          };\n        })\n      : [];\n  return [...spokes, ...ring];\n}\n\nfunction pointId(p: GlobePoint): string {\n  return p.id ?? `${p.lat},${p.lng}`;\n}\n\n// =============================================================================\n// Globe\n// =============================================================================\n\n/**\n * A branded WebGL globe on react-globe.gl: dotted-hex continents, hub and\n * city dots with hover tooltips, animated hub-and-spoke arcs, slow\n * auto-rotation (paused while dragging, off under reduced motion), and a\n * pill callout for the selected point with an optional live local clock.\n * Transparent background so it sits on any surface. Ported from the\n * Enterprise Health global-reach section.\n *\n * Client-only — import from `@mieweb/ui/globe` behind `ssr: false`.\n * Requires the optional peers `react-globe.gl` and `three`.\n */\nexport function Globe({\n  points = [],\n  arcs,\n  connectHubs = true,\n  geoUrl = DEFAULT_GEO_URL,\n  hexResolution = 3,\n  theme,\n  pointOfView = { lat: 18, lng: -22, altitude: 2.35 },\n  autoRotateSpeed = 0.5,\n  enableZoom = false,\n  callout = true,\n  selectedId,\n  onSelect,\n  onPointHover,\n  pointLabel,\n  height = 'clamp(360px, 54vw, 560px)',\n  className,\n}: GlobeProps) {\n  const t = { ...DEFAULT_THEME, ...theme };\n  const reduced = usePrefersReducedMotion();\n  const globeRef = React.useRef<GlobeMethods | undefined>(undefined);\n  const frameRef = React.useRef<HTMLDivElement>(null);\n  const [size, setSize] = React.useState({ w: 0, h: 0 });\n  const [countries, setCountries] = React.useState<object[]>([]);\n  const [innerSel, setInnerSel] = React.useState<string | null>(null);\n  const sel = selectedId !== undefined ? selectedId : innerSel;\n  const selected = sel\n    ? (points.find((p) => pointId(p) === sel) ?? null)\n    : null;\n\n  const material = React.useMemo(\n    () =>\n      new MeshPhongMaterial({\n        color: t.surface,\n        emissive: t.emissive,\n        emissiveIntensity: 0.32,\n        shininess: 4,\n      }),\n    [t.surface, t.emissive]\n  );\n\n  const arcData = React.useMemo<Arc[]>(\n    () =>\n      arcs\n        ? arcs.map((a) => ({ kind: 'spoke', speed: 4600, gap: 0, ...a }))\n        : buildArcs(points, connectHubs),\n    [arcs, points, connectHubs]\n  );\n\n  // Size to the frame.\n  React.useEffect(() => {\n    const el = frameRef.current;\n    if (!el || typeof globalThis.ResizeObserver === 'undefined') return;\n    const ro = new globalThis.ResizeObserver(([e]) => {\n      const { width, height: h } = e.contentRect;\n      setSize({ w: Math.round(width), h: Math.round(h) });\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  React.useEffect(() => {\n    if (!geoUrl) return;\n    let live = true;\n    fetch(geoUrl)\n      .then((r) => r.json())\n      .then(\n        (geo: { features?: object[] }) =>\n          live && setCountries(geo.features ?? [])\n      )\n      .catch(() => live && setCountries([]));\n    return () => {\n      live = false;\n    };\n  }, [geoUrl]);\n\n  const onReady = React.useCallback(() => {\n    const g = globeRef.current;\n    if (!g) return;\n    const c = g.controls();\n    c.enableZoom = enableZoom;\n    c.enablePan = false;\n    c.autoRotate = !reduced && autoRotateSpeed > 0;\n    c.autoRotateSpeed = autoRotateSpeed;\n    c.minPolarAngle = Math.PI * 0.16;\n    c.maxPolarAngle = Math.PI * 0.84;\n    g.pointOfView(pointOfView);\n    // let the page still scroll vertically over the canvas on touch\n    g.renderer().domElement.style.touchAction = 'pan-y';\n  }, [enableZoom, reduced, autoRotateSpeed, pointOfView]);\n\n  const select = (p: GlobePoint | null) => {\n    if (selectedId === undefined) setInnerSel(p ? pointId(p) : null);\n    onSelect?.(p);\n  };\n\n  return (\n    <div\n      ref={frameRef}\n      data-slot=\"globe\"\n      style={{ height }}\n      className={cn('relative w-full overflow-hidden', className)}\n    >\n      {size.w > 0 && (\n        <ReactGlobe\n          ref={globeRef}\n          width={size.w}\n          height={size.h}\n          onGlobeReady={onReady}\n          backgroundColor=\"rgba(0,0,0,0)\"\n          globeMaterial={material}\n          showAtmosphere\n          atmosphereColor={t.atmosphere}\n          atmosphereAltitude={0.16}\n          hexPolygonsData={countries}\n          hexPolygonResolution={hexResolution}\n          hexPolygonMargin={0.4}\n          hexPolygonUseDots\n          hexPolygonColor={() => t.land}\n          pointsData={points}\n          pointLat=\"lat\"\n          pointLng=\"lng\"\n          pointAltitude={(d: object) => ((d as GlobePoint).hub ? 0.013 : 0.006)}\n          pointRadius={(d: object) => ((d as GlobePoint).hub ? 0.48 : 0.3)}\n          pointResolution={18}\n          pointColor={(d: object) => {\n            const p = d as GlobePoint;\n            return p.color ?? (p.hub ? t.hub : t.city);\n          }}\n          pointLabel={(d: object) => {\n            const p = d as GlobePoint;\n            if (pointLabel) return pointLabel(p);\n            // react-globe.gl renders this as tooltip HTML, so caller-provided\n            // strings must be escaped or `<img onerror=…>` in a name executes.\n            return `<b>${escapeHtml(p.name)}</b>${p.sub ? ` &middot; ${escapeHtml(p.sub)}` : ''}`;\n          }}\n          onPointHover={(d: object | null) =>\n            onPointHover?.((d as GlobePoint) ?? null)\n          }\n          onPointClick={(d: object) => select(d as GlobePoint)}\n          onGlobeClick={() => select(null)}\n          arcsData={arcData}\n          arcStartLat=\"startLat\"\n          arcStartLng=\"startLng\"\n          arcEndLat=\"endLat\"\n          arcEndLng=\"endLng\"\n          arcColor={(d: object) =>\n            (d as Arc).kind === 'backbone' ? t.backbone : t.spoke\n          }\n          arcStroke={(d: object) =>\n            (d as Arc).kind === 'backbone' ? 0.5 : 0.3\n          }\n          arcAltitudeAutoScale={0.45}\n          arcDashLength={(d: object) =>\n            reduced ? 1 : (d as Arc).kind === 'backbone' ? 0.5 : 0.35\n          }\n          arcDashGap={(d: object) =>\n            reduced ? 0 : (d as Arc).kind === 'backbone' ? 0.2 : 0.7\n          }\n          arcDashInitialGap={(d: object) => (reduced ? 0 : (d as Arc).gap)}\n          arcDashAnimateTime={(d: object) => (reduced ? 0 : (d as Arc).speed)}\n        />\n      )}\n\n      {callout && selected && (\n        <Callout point={selected} onClose={() => select(null)} />\n      )}\n    </div>\n  );\n}\n\n// =============================================================================\n// Callout\n// =============================================================================\n\nfunction useLocalTime(timeZone?: string) {\n  const fmt = React.useMemo(\n    () =>\n      timeZone\n        ? new Intl.DateTimeFormat(undefined, {\n            hour: '2-digit',\n            minute: '2-digit',\n            timeZone,\n            timeZoneName: 'short',\n          })\n        : null,\n    [timeZone]\n  );\n  const [now, setNow] = React.useState(() => new Date());\n  React.useEffect(() => {\n    if (!fmt) return;\n    const t = window.setInterval(() => setNow(new Date()), 15_000);\n    return () => window.clearInterval(t);\n  }, [fmt]);\n  return fmt ? fmt.format(now) : null;\n}\n\nfunction Callout({\n  point,\n  onClose,\n}: {\n  point: GlobePoint;\n  onClose: () => void;\n}) {\n  const time = useLocalTime(point.timeZone);\n  const Body = point.href ? 'a' : 'span';\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      data-slot=\"globe-callout\"\n      className=\"absolute bottom-4 left-1/2 z-10 inline-flex max-w-[min(90%,360px)] -translate-x-1/2 items-center gap-2.5 rounded-full border border-white/15 bg-neutral-950/70 py-1.5 ps-3.5 pe-1.5 text-white shadow-xl backdrop-blur-md motion-safe:animate-[mie-fade-in_0.28s_ease]\"\n    >\n      <span\n        aria-hidden\n        className=\"h-2 w-2 shrink-0 rounded-full bg-[var(--mieweb-accent,#ffe7b0)] shadow-[0_0_8px_var(--mieweb-accent,#ffe7b0)]\"\n      />\n      <Body\n        href={point.href}\n        className=\"flex min-w-0 flex-col leading-tight no-underline\"\n      >\n        <b className=\"truncate text-sm\">\n          {point.flag && <span className=\"me-1.5\">{point.flag}</span>}\n          {point.name}\n        </b>\n        {(point.sub || time) && (\n          <span className=\"truncate text-[11px] tracking-wider text-white/70 uppercase\">\n            {point.sub}\n            {point.sub && time && ' · '}\n            {time && (\n              <span className=\"tracking-normal normal-case tabular-nums\">\n                {time}\n              </span>\n            )}\n          </span>\n        )}\n      </Body>\n      <button\n        type=\"button\"\n        onClick={onClose}\n        aria-label=\"Dismiss\"\n        className=\"ms-1 grid h-7 w-7 shrink-0 place-items-center rounded-full text-white/70 hover:bg-white/10 hover:text-white\"\n      >\n        <X size={14} aria-hidden />\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/globe.d.cts

@@ -0,0 +1,99 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface GlobePoint {
+    id?: string;
+    lat: number;
+    lng: number;
+    name: string;
+    /** Secondary line in tooltip/callout, e.g. "Distribution". */
+    sub?: string;
+    /** Hubs are drawn larger, raised, and become arc anchors. */
+    hub?: boolean;
+    /** Per-point dot colour. */
+    color?: string;
+    /** IANA zone, e.g. `America/Sao_Paulo` — shows a live local clock in the callout. */
+    timeZone?: string;
+    /** Emoji flag or short code shown before the name in the callout. */
+    flag?: string;
+    /** Destination when the callout is clicked. */
+    href?: string;
+}
+interface GlobeArc {
+    startLat: number;
+    startLng: number;
+    endLat: number;
+    endLng: number;
+    /** `backbone` arcs are brighter and thicker than `spoke` arcs. */
+    kind?: 'backbone' | 'spoke';
+    /** Dash cycle time in ms. */
+    speed?: number;
+    /** Dash start offset 0–1. */
+    gap?: number;
+}
+interface GlobeTheme {
+    /** Globe body. */
+    surface?: string;
+    emissive?: string;
+    atmosphere?: string;
+    /** Dotted-continent colour. */
+    land?: string;
+    /** Hub dot / city dot. */
+    hub?: string;
+    city?: string;
+    /** Arc gradients, start → end. */
+    backbone?: [string, string];
+    spoke?: [string, string];
+}
+interface GlobeProps {
+    points?: GlobePoint[];
+    /** Explicit arcs. Omit to auto-connect every non-hub point to its nearest hub. */
+    arcs?: GlobeArc[];
+    /** Also connect hubs to each other in a ring. Default true when ≥2 hubs. */
+    connectHubs?: boolean;
+    /**
+     * GeoJSON FeatureCollection URL for the dotted continents. Defaults to the
+     * Natural Earth 110m countries file shipped with react-globe.gl's examples.
+     */
+    geoUrl?: string | null;
+    /** Hex resolution (2 coarse … 4 fine). Default 3. */
+    hexResolution?: number;
+    theme?: GlobeTheme;
+    /** Initial camera. Default lat 18 / lng −22 / altitude 2.35. */
+    pointOfView?: {
+        lat?: number;
+        lng?: number;
+        altitude?: number;
+    };
+    /** Auto-rotate speed; 0 disables. Default 0.5. Off under reduced motion. */
+    autoRotateSpeed?: number;
+    enableZoom?: boolean;
+    /** Show the pill callout for the selected point. Default true. */
+    callout?: boolean;
+    /** Controlled selection. */
+    selectedId?: string | null;
+    onSelect?: (point: GlobePoint | null) => void;
+    onPointHover?: (point: GlobePoint | null) => void;
+    /** Custom hover tooltip HTML. */
+    pointLabel?: (point: GlobePoint) => string;
+    /** Fixed height. Default `clamp(360px, 54vw, 560px)`. */
+    height?: string;
+    className?: string;
+}
+declare const DEFAULT_GEO_URL = "https://raw.githubusercontent.com/vasturiano/react-globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson";
+type Arc = Required<Pick<GlobeArc, 'startLat' | 'startLng' | 'endLat' | 'endLng' | 'kind' | 'speed' | 'gap'>>;
+/** Spokes from each city to its nearest hub, plus an optional hub ring. */
+declare function buildArcs(points: GlobePoint[], connectHubs?: boolean): Arc[];
+/**
+ * A branded WebGL globe on react-globe.gl: dotted-hex continents, hub and
+ * city dots with hover tooltips, animated hub-and-spoke arcs, slow
+ * auto-rotation (paused while dragging, off under reduced motion), and a
+ * pill callout for the selected point with an optional live local clock.
+ * Transparent background so it sits on any surface. Ported from the
+ * Enterprise Health global-reach section.
+ *
+ * Client-only — import from `@mieweb/ui/globe` behind `ssr: false`.
+ * Requires the optional peers `react-globe.gl` and `three`.
+ */
+declare function Globe({ points, arcs, connectHubs, geoUrl, hexResolution, theme, pointOfView, autoRotateSpeed, enableZoom, callout, selectedId, onSelect, onPointHover, pointLabel, height, className, }: GlobeProps): react_jsx_runtime.JSX.Element;
+
+export { DEFAULT_GEO_URL, Globe, type GlobeArc, type GlobePoint, type GlobeProps, type GlobeTheme, buildArcs };

package/dist/globe.d.ts

@@ -0,0 +1,99 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface GlobePoint {
+    id?: string;
+    lat: number;
+    lng: number;
+    name: string;
+    /** Secondary line in tooltip/callout, e.g. "Distribution". */
+    sub?: string;
+    /** Hubs are drawn larger, raised, and become arc anchors. */
+    hub?: boolean;
+    /** Per-point dot colour. */
+    color?: string;
+    /** IANA zone, e.g. `America/Sao_Paulo` — shows a live local clock in the callout. */
+    timeZone?: string;
+    /** Emoji flag or short code shown before the name in the callout. */
+    flag?: string;
+    /** Destination when the callout is clicked. */
+    href?: string;
+}
+interface GlobeArc {
+    startLat: number;
+    startLng: number;
+    endLat: number;
+    endLng: number;
+    /** `backbone` arcs are brighter and thicker than `spoke` arcs. */
+    kind?: 'backbone' | 'spoke';
+    /** Dash cycle time in ms. */
+    speed?: number;
+    /** Dash start offset 0–1. */
+    gap?: number;
+}
+interface GlobeTheme {
+    /** Globe body. */
+    surface?: string;
+    emissive?: string;
+    atmosphere?: string;
+    /** Dotted-continent colour. */
+    land?: string;
+    /** Hub dot / city dot. */
+    hub?: string;
+    city?: string;
+    /** Arc gradients, start → end. */
+    backbone?: [string, string];
+    spoke?: [string, string];
+}
+interface GlobeProps {
+    points?: GlobePoint[];
+    /** Explicit arcs. Omit to auto-connect every non-hub point to its nearest hub. */
+    arcs?: GlobeArc[];
+    /** Also connect hubs to each other in a ring. Default true when ≥2 hubs. */
+    connectHubs?: boolean;
+    /**
+     * GeoJSON FeatureCollection URL for the dotted continents. Defaults to the
+     * Natural Earth 110m countries file shipped with react-globe.gl's examples.
+     */
+    geoUrl?: string | null;
+    /** Hex resolution (2 coarse … 4 fine). Default 3. */
+    hexResolution?: number;
+    theme?: GlobeTheme;
+    /** Initial camera. Default lat 18 / lng −22 / altitude 2.35. */
+    pointOfView?: {
+        lat?: number;
+        lng?: number;
+        altitude?: number;
+    };
+    /** Auto-rotate speed; 0 disables. Default 0.5. Off under reduced motion. */
+    autoRotateSpeed?: number;
+    enableZoom?: boolean;
+    /** Show the pill callout for the selected point. Default true. */
+    callout?: boolean;
+    /** Controlled selection. */
+    selectedId?: string | null;
+    onSelect?: (point: GlobePoint | null) => void;
+    onPointHover?: (point: GlobePoint | null) => void;
+    /** Custom hover tooltip HTML. */
+    pointLabel?: (point: GlobePoint) => string;
+    /** Fixed height. Default `clamp(360px, 54vw, 560px)`. */
+    height?: string;
+    className?: string;
+}
+declare const DEFAULT_GEO_URL = "https://raw.githubusercontent.com/vasturiano/react-globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson";
+type Arc = Required<Pick<GlobeArc, 'startLat' | 'startLng' | 'endLat' | 'endLng' | 'kind' | 'speed' | 'gap'>>;
+/** Spokes from each city to its nearest hub, plus an optional hub ring. */
+declare function buildArcs(points: GlobePoint[], connectHubs?: boolean): Arc[];
+/**
+ * A branded WebGL globe on react-globe.gl: dotted-hex continents, hub and
+ * city dots with hover tooltips, animated hub-and-spoke arcs, slow
+ * auto-rotation (paused while dragging, off under reduced motion), and a
+ * pill callout for the selected point with an optional live local clock.
+ * Transparent background so it sits on any surface. Ported from the
+ * Enterprise Health global-reach section.
+ *
+ * Client-only — import from `@mieweb/ui/globe` behind `ssr: false`.
+ * Requires the optional peers `react-globe.gl` and `three`.
+ */
+declare function Globe({ points, arcs, connectHubs, geoUrl, hexResolution, theme, pointOfView, autoRotateSpeed, enableZoom, callout, selectedId, onSelect, onPointHover, pointLabel, height, className, }: GlobeProps): react_jsx_runtime.JSX.Element;
+
+export { DEFAULT_GEO_URL, Globe, type GlobeArc, type GlobePoint, type GlobeProps, type GlobeTheme, buildArcs };