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

package/dist/globe.js

@@ -0,0 +1,279 @@
+import { usePrefersReducedMotion } from './chunk-HB7C7NB5.js';
+import { cn } from './chunk-TQONQSJO.js';
+import './chunk-PX6F3LHL.js';
+import * as React from 'react';
+import ReactGlobe from 'react-globe.gl';
+import { MeshPhongMaterial } from 'three';
+import { X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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 = usePrefersReducedMotion();
+  const globeRef = React.useRef(void 0);
+  const frameRef = React.useRef(null);
+  const [size, setSize] = React.useState({ w: 0, h: 0 });
+  const [countries, setCountries] = React.useState([]);
+  const [innerSel, setInnerSel] = React.useState(null);
+  const sel = selectedId !== void 0 ? selectedId : innerSel;
+  const selected = sel ? points.find((p) => pointId(p) === sel) ?? null : null;
+  const material = React.useMemo(
+    () => new MeshPhongMaterial({
+      color: t.surface,
+      emissive: t.emissive,
+      emissiveIntensity: 0.32,
+      shininess: 4
+    }),
+    [t.surface, t.emissive]
+  );
+  const arcData = React.useMemo(
+    () => arcs ? arcs.map((a) => ({ kind: "spoke", speed: 4600, gap: 0, ...a })) : buildArcs(points, connectHubs),
+    [arcs, points, connectHubs]
+  );
+  React.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.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.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__ */ jsxs(
+    "div",
+    {
+      ref: frameRef,
+      "data-slot": "globe",
+      style: { height },
+      className: cn("relative w-full overflow-hidden", className),
+      children: [
+        size.w > 0 && /* @__PURE__ */ jsx(
+          ReactGlobe,
+          {
+            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__ */ jsx(Callout, { point: selected, onClose: () => select(null) })
+      ]
+    }
+  );
+}
+function useLocalTime(timeZone) {
+  const fmt = React.useMemo(
+    () => timeZone ? new Intl.DateTimeFormat(void 0, {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone,
+      timeZoneName: "short"
+    }) : null,
+    [timeZone]
+  );
+  const [now, setNow] = React.useState(() => /* @__PURE__ */ new Date());
+  React.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__ */ 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__ */ 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__ */ jsxs(
+          Body,
+          {
+            href: point.href,
+            className: "flex min-w-0 flex-col leading-tight no-underline",
+            children: [
+              /* @__PURE__ */ jsxs("b", { className: "truncate text-sm", children: [
+                point.flag && /* @__PURE__ */ jsx("span", { className: "me-1.5", children: point.flag }),
+                point.name
+              ] }),
+              (point.sub || time) && /* @__PURE__ */ jsxs("span", { className: "truncate text-[11px] tracking-wider text-white/70 uppercase", children: [
+                point.sub,
+                point.sub && time && " \xB7 ",
+                time && /* @__PURE__ */ jsx("span", { className: "tracking-normal normal-case tabular-nums", children: time })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(X, { size: 14, "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { DEFAULT_GEO_URL, Globe, buildArcs };
+//# sourceMappingURL=globe.js.map
+//# sourceMappingURL=globe.js.map

package/dist/globe.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Globe/Globe.tsx"],"names":[],"mappings":"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","file":"globe.js","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/hooks/index.cjs

@@ -1,18 +1,19 @@
 'use strict';
 
-var chunkQO6PRHDX_cjs = require('../chunk-QO6PRHDX.cjs');
+var chunkWNAA6CLE_cjs = require('../chunk-WNAA6CLE.cjs');
 var chunk2O7D6F67_cjs = require('../chunk-2O7D6F67.cjs');
+var chunkIXFC7LK2_cjs = require('../chunk-IXFC7LK2.cjs');
 var chunk7IKLGH3Z_cjs = require('../chunk-7IKLGH3Z.cjs');
 var chunkNPKPCYAT_cjs = require('../chunk-NPKPCYAT.cjs');
 require('../chunk-NUFUV43P.cjs');
 var chunkJYZW2PZS_cjs = require('../chunk-JYZW2PZS.cjs');
 var chunkYVPC65ZJ_cjs = require('../chunk-YVPC65ZJ.cjs');
-var chunk6HFFWEM3_cjs = require('../chunk-6HFFWEM3.cjs');
+var chunkFSGEDDF2_cjs = require('../chunk-FSGEDDF2.cjs');
+var chunkAOHJILLU_cjs = require('../chunk-AOHJILLU.cjs');
 var chunkNNEFAUHV_cjs = require('../chunk-NNEFAUHV.cjs');
 var chunkFHY3K6PL_cjs = require('../chunk-FHY3K6PL.cjs');
 require('../chunk-SCV7C55E.cjs');
-var chunkFSGEDDF2_cjs = require('../chunk-FSGEDDF2.cjs');
-var chunkAOHJILLU_cjs = require('../chunk-AOHJILLU.cjs');
+var chunk6HFFWEM3_cjs = require('../chunk-6HFFWEM3.cjs');
 var chunkNMBYU7D7_cjs = require('../chunk-NMBYU7D7.cjs');
 require('../chunk-EUAMEVVI.cjs');
 
@@ -20,56 +21,60 @@ require('../chunk-EUAMEVVI.cjs');
 
 Object.defineProperty(exports, "RTL_LOCALES", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.RTL_LOCALES; }
+  get: function () { return chunkWNAA6CLE_cjs.RTL_LOCALES; }
 });
 Object.defineProperty(exports, "isRtlLocale", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.isRtlLocale; }
+  get: function () { return chunkWNAA6CLE_cjs.isRtlLocale; }
 });
 Object.defineProperty(exports, "useCommandK", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useCommandK; }
+  get: function () { return chunkWNAA6CLE_cjs.useCommandK; }
 });
 Object.defineProperty(exports, "useDirection", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useDirection; }
+  get: function () { return chunkWNAA6CLE_cjs.useDirection; }
 });
 Object.defineProperty(exports, "useIsDesktop", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsDesktop; }
+  get: function () { return chunkWNAA6CLE_cjs.useIsDesktop; }
 });
 Object.defineProperty(exports, "useIsLargeDesktop", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsLargeDesktop; }
+  get: function () { return chunkWNAA6CLE_cjs.useIsLargeDesktop; }
 });
 Object.defineProperty(exports, "useIsMobile", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsMobile; }
+  get: function () { return chunkWNAA6CLE_cjs.useIsMobile; }
 });
 Object.defineProperty(exports, "useIsMobileOrTablet", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsMobileOrTablet; }
+  get: function () { return chunkWNAA6CLE_cjs.useIsMobileOrTablet; }
 });
 Object.defineProperty(exports, "useIsSmallTablet", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsSmallTablet; }
+  get: function () { return chunkWNAA6CLE_cjs.useIsSmallTablet; }
 });
 Object.defineProperty(exports, "useIsTablet", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsTablet; }
+  get: function () { return chunkWNAA6CLE_cjs.useIsTablet; }
 });
 Object.defineProperty(exports, "useKeyboardShortcut", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useKeyboardShortcut; }
+  get: function () { return chunkWNAA6CLE_cjs.useKeyboardShortcut; }
 });
 Object.defineProperty(exports, "useMediaQuery", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useMediaQuery; }
+  get: function () { return chunkWNAA6CLE_cjs.useMediaQuery; }
 });
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () { return chunk2O7D6F67_cjs.useTheme; }
 });
+Object.defineProperty(exports, "useYouTubeHoverPreview", {
+  enumerable: true,
+  get: function () { return chunkIXFC7LK2_cjs.useYouTubeHoverPreview; }
+});
 Object.defineProperty(exports, "useScrollSpy", {
   enumerable: true,
   get: function () { return chunk7IKLGH3Z_cjs.useScrollSpy; }
@@ -126,9 +131,13 @@ Object.defineProperty(exports, "useLiveAnnouncement", {
   enumerable: true,
   get: function () { return chunkYVPC65ZJ_cjs.useLiveAnnouncement; }
 });
-Object.defineProperty(exports, "usePrefersReducedMotion", {
+Object.defineProperty(exports, "useClickOutside", {
   enumerable: true,
-  get: function () { return chunk6HFFWEM3_cjs.usePrefersReducedMotion; }
+  get: function () { return chunkFSGEDDF2_cjs.useClickOutside; }
+});
+Object.defineProperty(exports, "useAnchoredPosition", {
+  enumerable: true,
+  get: function () { return chunkAOHJILLU_cjs.useAnchoredPosition; }
 });
 Object.defineProperty(exports, "useFocusTrap", {
   enumerable: true,
@@ -138,13 +147,9 @@ Object.defineProperty(exports, "useEscapeKey", {
   enumerable: true,
   get: function () { return chunkFHY3K6PL_cjs.useEscapeKey; }
 });
-Object.defineProperty(exports, "useClickOutside", {
-  enumerable: true,
-  get: function () { return chunkFSGEDDF2_cjs.useClickOutside; }
-});
-Object.defineProperty(exports, "useAnchoredPosition", {
+Object.defineProperty(exports, "usePrefersReducedMotion", {
   enumerable: true,
-  get: function () { return chunkAOHJILLU_cjs.useAnchoredPosition; }
+  get: function () { return chunk6HFFWEM3_cjs.usePrefersReducedMotion; }
 });
 Object.defineProperty(exports, "isDarkMode", {
   enumerable: true,

package/dist/hooks/index.d.cts

@@ -319,6 +319,46 @@ declare function dragIndicatorClasses(drag: Pick<UseDragReorderReturn, 'dragging
  */
 declare function useLiveAnnouncement(): [string, (message: string) => void];
 
+type HoverPreviewState = 'idle' | 'loading' | 'playing';
+interface UseYouTubeHoverPreviewOptions {
+    /** Hover dwell before the player mounts. Default 600ms. */
+    dwellMs?: number;
+    /** Player host. Default `https://www.youtube-nocookie.com`. */
+    host?: string;
+    /** Disable entirely (e.g. when the card has no YouTube id). */
+    enabled?: boolean;
+}
+interface UseYouTubeHoverPreviewReturn {
+    /** Lifecycle phase of the muted preview. */
+    preview: HoverPreviewState;
+    /** Normalised playback position (0–1) for a timeline bar. */
+    progress: number;
+    /** Attach to the element the muted iframe should fill. */
+    hostRef: React.RefObject<HTMLDivElement | null>;
+    /** Wire to the hover target's `onMouseEnter` / `onFocus`. */
+    handleEnter: () => void;
+    /** Wire to the hover target's `onMouseLeave` / `onBlur` (and any manual reset). */
+    stopPreview: () => void;
+}
+/**
+ * Drives a muted, looping YouTube hover preview for a single `youtubeId` — the
+ * "silent autoplay on dwell" pattern from YouTube's own grid. After a short
+ * hover dwell a muted player is mounted lazily inside `hostRef`; `progress`
+ * tracks playback for a timeline bar; everything tears down on leave so only
+ * one preview is ever live. Honours `prefers-reduced-motion` and skips
+ * pointer-less (touch) inputs.
+ *
+ * @example
+ * ```tsx
+ * const { preview, progress, hostRef, handleEnter, stopPreview } =
+ *   useYouTubeHoverPreview('dQw4w9WgXcQ');
+ * <a onMouseEnter={handleEnter} onMouseLeave={stopPreview}>
+ *   <div ref={hostRef} className={preview === 'playing' ? 'opacity-100' : 'opacity-0'} />
+ * </a>
+ * ```
+ */
+declare function useYouTubeHoverPreview(youtubeId: string | undefined, { dwellMs, host, enabled, }?: UseYouTubeHoverPreviewOptions): UseYouTubeHoverPreviewReturn;
+
 type MediaTransportState = 'idle' | 'loading' | 'playing' | 'paused' | 'error';
 interface UseMediaTransportOptions {
     /** Fired on every native `timeupdate` and on metadata load, in milliseconds. */
@@ -404,4 +444,4 @@ interface UseMediaTransportReturn {
  */
 declare function useMediaTransport(options?: UseMediaTransportOptions): UseMediaTransportReturn;
 
-export { type Direction, type DragOverState, type KeyboardShortcutOptions, type MediaTransportState, RTL_LOCALES, type UseDragReorderOptions, type UseDragReorderReturn, type UseMediaTransportOptions, type UseMediaTransportReturn, type UseScrollSpyOptions, type UseScrollSpyReturn, dragIndicatorClasses, isDarkMode, isRtlLocale, reorderIds, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy };
+export { type Direction, type DragOverState, type HoverPreviewState, type KeyboardShortcutOptions, type MediaTransportState, RTL_LOCALES, type UseDragReorderOptions, type UseDragReorderReturn, type UseMediaTransportOptions, type UseMediaTransportReturn, type UseScrollSpyOptions, type UseScrollSpyReturn, type UseYouTubeHoverPreviewOptions, type UseYouTubeHoverPreviewReturn, dragIndicatorClasses, isDarkMode, isRtlLocale, reorderIds, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy, useYouTubeHoverPreview };

package/dist/hooks/index.d.ts

@@ -319,6 +319,46 @@ declare function dragIndicatorClasses(drag: Pick<UseDragReorderReturn, 'dragging
  */
 declare function useLiveAnnouncement(): [string, (message: string) => void];
 
+type HoverPreviewState = 'idle' | 'loading' | 'playing';
+interface UseYouTubeHoverPreviewOptions {
+    /** Hover dwell before the player mounts. Default 600ms. */
+    dwellMs?: number;
+    /** Player host. Default `https://www.youtube-nocookie.com`. */
+    host?: string;
+    /** Disable entirely (e.g. when the card has no YouTube id). */
+    enabled?: boolean;
+}
+interface UseYouTubeHoverPreviewReturn {
+    /** Lifecycle phase of the muted preview. */
+    preview: HoverPreviewState;
+    /** Normalised playback position (0–1) for a timeline bar. */
+    progress: number;
+    /** Attach to the element the muted iframe should fill. */
+    hostRef: React.RefObject<HTMLDivElement | null>;
+    /** Wire to the hover target's `onMouseEnter` / `onFocus`. */
+    handleEnter: () => void;
+    /** Wire to the hover target's `onMouseLeave` / `onBlur` (and any manual reset). */
+    stopPreview: () => void;
+}
+/**
+ * Drives a muted, looping YouTube hover preview for a single `youtubeId` — the
+ * "silent autoplay on dwell" pattern from YouTube's own grid. After a short
+ * hover dwell a muted player is mounted lazily inside `hostRef`; `progress`
+ * tracks playback for a timeline bar; everything tears down on leave so only
+ * one preview is ever live. Honours `prefers-reduced-motion` and skips
+ * pointer-less (touch) inputs.
+ *
+ * @example
+ * ```tsx
+ * const { preview, progress, hostRef, handleEnter, stopPreview } =
+ *   useYouTubeHoverPreview('dQw4w9WgXcQ');
+ * <a onMouseEnter={handleEnter} onMouseLeave={stopPreview}>
+ *   <div ref={hostRef} className={preview === 'playing' ? 'opacity-100' : 'opacity-0'} />
+ * </a>
+ * ```
+ */
+declare function useYouTubeHoverPreview(youtubeId: string | undefined, { dwellMs, host, enabled, }?: UseYouTubeHoverPreviewOptions): UseYouTubeHoverPreviewReturn;
+
 type MediaTransportState = 'idle' | 'loading' | 'playing' | 'paused' | 'error';
 interface UseMediaTransportOptions {
     /** Fired on every native `timeupdate` and on metadata load, in milliseconds. */
@@ -404,4 +444,4 @@ interface UseMediaTransportReturn {
  */
 declare function useMediaTransport(options?: UseMediaTransportOptions): UseMediaTransportReturn;
 
-export { type Direction, type DragOverState, type KeyboardShortcutOptions, type MediaTransportState, RTL_LOCALES, type UseDragReorderOptions, type UseDragReorderReturn, type UseMediaTransportOptions, type UseMediaTransportReturn, type UseScrollSpyOptions, type UseScrollSpyReturn, dragIndicatorClasses, isDarkMode, isRtlLocale, reorderIds, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy };
+export { type Direction, type DragOverState, type HoverPreviewState, type KeyboardShortcutOptions, type MediaTransportState, RTL_LOCALES, type UseDragReorderOptions, type UseDragReorderReturn, type UseMediaTransportOptions, type UseMediaTransportReturn, type UseScrollSpyOptions, type UseScrollSpyReturn, type UseYouTubeHoverPreviewOptions, type UseYouTubeHoverPreviewReturn, dragIndicatorClasses, isDarkMode, isRtlLocale, reorderIds, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy, useYouTubeHoverPreview };

package/dist/hooks/index.js

@@ -1,16 +1,17 @@
-export { RTL_LOCALES, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery } from '../chunk-24SEAAOH.js';
+export { RTL_LOCALES, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery } from '../chunk-JHULS3EC.js';
 export { useTheme } from '../chunk-KJZNEVYM.js';
+export { useYouTubeHoverPreview } from '../chunk-POWS35OT.js';
 export { useScrollSpy } from '../chunk-WBGUYSWY.js';
 export { DEFAULT_FILLER_WORDS, DEFAULT_MIN_SILENCE_MS, DEFAULT_NL_SILENCE_MS, buildPlaybackSegments, getSpeedAtIndex, initEditableWords, insertSilences, useTranscriptEdits } from '../chunk-UUI7WXI5.js';
 import '../chunk-6CGM5H4J.js';
 export { useMediaTransport } from '../chunk-SQHMGT4W.js';
 export { dragIndicatorClasses, reorderIds, useDragReorder, useLiveAnnouncement } from '../chunk-7ZVTLTJF.js';
-export { usePrefersReducedMotion } from '../chunk-HB7C7NB5.js';
+export { useClickOutside } from '../chunk-62ZOA6PX.js';
+export { useAnchoredPosition } from '../chunk-WSNMQQ4P.js';
 export { useFocusTrap } from '../chunk-4SMSH4OY.js';
 export { useEscapeKey } from '../chunk-T4ME7QCT.js';
 import '../chunk-VSQF22GL.js';
-export { useClickOutside } from '../chunk-62ZOA6PX.js';
-export { useAnchoredPosition } from '../chunk-WSNMQQ4P.js';
+export { usePrefersReducedMotion } from '../chunk-HB7C7NB5.js';
 export { isDarkMode, useIsDarkMode } from '../chunk-RUGHNFQG.js';
 import '../chunk-PX6F3LHL.js';
 //# sourceMappingURL=index.js.map