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

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,20 @@
 'use strict';
 
-var chunkQO6PRHDX_cjs = require('../chunk-QO6PRHDX.cjs');
+var chunkAR7AKDM2_cjs = require('../chunk-AR7AKDM2.cjs');
+var chunkIXFC7LK2_cjs = require('../chunk-IXFC7LK2.cjs');
 var chunk2O7D6F67_cjs = require('../chunk-2O7D6F67.cjs');
+var chunkVPTASZ2O_cjs = require('../chunk-VPTASZ2O.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 +22,68 @@ require('../chunk-EUAMEVVI.cjs');
 
 Object.defineProperty(exports, "RTL_LOCALES", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.RTL_LOCALES; }
+  get: function () { return chunkAR7AKDM2_cjs.RTL_LOCALES; }
 });
 Object.defineProperty(exports, "isRtlLocale", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.isRtlLocale; }
+  get: function () { return chunkAR7AKDM2_cjs.isRtlLocale; }
 });
 Object.defineProperty(exports, "useCommandK", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useCommandK; }
+  get: function () { return chunkAR7AKDM2_cjs.useCommandK; }
 });
 Object.defineProperty(exports, "useDirection", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useDirection; }
+  get: function () { return chunkAR7AKDM2_cjs.useDirection; }
 });
 Object.defineProperty(exports, "useIsDesktop", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsDesktop; }
+  get: function () { return chunkAR7AKDM2_cjs.useIsDesktop; }
 });
 Object.defineProperty(exports, "useIsLargeDesktop", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsLargeDesktop; }
+  get: function () { return chunkAR7AKDM2_cjs.useIsLargeDesktop; }
 });
 Object.defineProperty(exports, "useIsMobile", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsMobile; }
+  get: function () { return chunkAR7AKDM2_cjs.useIsMobile; }
 });
 Object.defineProperty(exports, "useIsMobileOrTablet", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsMobileOrTablet; }
+  get: function () { return chunkAR7AKDM2_cjs.useIsMobileOrTablet; }
 });
 Object.defineProperty(exports, "useIsSmallTablet", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsSmallTablet; }
+  get: function () { return chunkAR7AKDM2_cjs.useIsSmallTablet; }
 });
 Object.defineProperty(exports, "useIsTablet", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useIsTablet; }
+  get: function () { return chunkAR7AKDM2_cjs.useIsTablet; }
 });
 Object.defineProperty(exports, "useKeyboardShortcut", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useKeyboardShortcut; }
+  get: function () { return chunkAR7AKDM2_cjs.useKeyboardShortcut; }
 });
 Object.defineProperty(exports, "useMediaQuery", {
   enumerable: true,
-  get: function () { return chunkQO6PRHDX_cjs.useMediaQuery; }
+  get: function () { return chunkAR7AKDM2_cjs.useMediaQuery; }
+});
+Object.defineProperty(exports, "useYouTubeHoverPreview", {
+  enumerable: true,
+  get: function () { return chunkIXFC7LK2_cjs.useYouTubeHoverPreview; }
 });
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () { return chunk2O7D6F67_cjs.useTheme; }
 });
+Object.defineProperty(exports, "useStickToBottom", {
+  enumerable: true,
+  get: function () { return chunkVPTASZ2O_cjs.useStickToBottom; }
+});
+Object.defineProperty(exports, "useStreamEndedBelowFold", {
+  enumerable: true,
+  get: function () { return chunkVPTASZ2O_cjs.useStreamEndedBelowFold; }
+});
 Object.defineProperty(exports, "useScrollSpy", {
   enumerable: true,
   get: function () { return chunk7IKLGH3Z_cjs.useScrollSpy; }
@@ -126,9 +140,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 +156,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,146 @@ declare function dragIndicatorClasses(drag: Pick<UseDragReorderReturn, 'dragging
  */
 declare function useLiveAnnouncement(): [string, (message: string) => void];
 
+/**
+ * Options for {@link useStickToBottom}.
+ */
+interface UseStickToBottomOptions {
+    /**
+     * Distance from the bottom (px) within which the user still counts as "at
+     * the bottom" — small offsets from rounding or momentum scrolling shouldn't
+     * break pinning.
+     */
+    threshold?: number;
+    /**
+     * Disable all behavior (listeners and observers detach). Useful when the
+     * scroll container anchors somewhere other than the bottom (e.g. a
+     * newest-first feed).
+     */
+    disabled?: boolean;
+}
+interface UseStickToBottomReturn {
+    /** Attach to the scrollable container. */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * Attach to the element wrapping the container's content. Its growth (e.g.
+     * a streaming message) re-pins the scroll while the user is at the bottom.
+     */
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    /** Whether the user is currently at (or within `threshold` of) the bottom. */
+    isAtBottom: boolean;
+    /** Scroll to the bottom and resume pinning. */
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+    /**
+     * Scroll so `target`'s top aligns with the viewport top and enter “reading”
+     * mode: content growing past the fold no longer auto-follows, so the reader
+     * consumes the response at their own pace (the ChatGPT/Claude send UX).
+     * Following resumes when they explicitly return to the bottom — a
+     * jump-to-bottom click (`scrollToBottom`) or scrolling there by hand.
+     */
+    anchorToTurnStart: (target: HTMLElement, behavior?: ScrollBehavior) => void;
+    /**
+     * Scroll to the bottom only while actually following (at the bottom and not
+     * in reading mode). Returns whether it scrolled — hosts use this to decide
+     * between following an appended message and raising a “new messages” hint.
+     */
+    followIfPinned: (behavior?: ScrollBehavior) => boolean;
+    /**
+     * Hold the current position: enter reading mode without scrolling, so an
+     * incoming stream fills below the fold instead of pushing the view up.
+     * Call right after a streaming message appends (optionally after revealing
+     * its first line with `followIfPinned`). Following resumes exactly as after
+     * `anchorToTurnStart`: an explicit `scrollToBottom` or the reader returning
+     * to the bottom by hand.
+     */
+    stopFollowing: () => void;
+}
+/**
+ * Keeps a scroll container pinned to its bottom edge while the user is there,
+ * and — crucially — leaves the scroll position alone once they scroll up.
+ *
+ * Designed for chat threads with streaming responses:
+ * - While the user is at the bottom, content growth (new tokens, new
+ *   messages) and container resizes (on-screen keyboard, growing composer)
+ *   keep the newest content in view via a `ResizeObserver` on both the
+ *   content and the container.
+ * - Once the user scrolls up, nothing moves until they return to the bottom
+ *   themselves or the host calls `scrollToBottom` (e.g. a jump-to-bottom
+ *   button, or an outgoing message from the local user).
+ *
+ * The hook only pins; *when* to force a scroll (own message sent, thread
+ * switched) stays a host decision through `scrollToBottom`,
+ * `anchorToTurnStart` (ChatGPT-style: scroll a fresh turn to the viewport top
+ * and pause following while the reader digests the reply), and
+ * `followIfPinned` (follow an append only while actually at the bottom).
+ *
+ * @example
+ * ```tsx
+ * const { containerRef, contentRef, isAtBottom, scrollToBottom } =
+ *   useStickToBottom();
+ * return (
+ *   <div className="relative min-h-0 flex-1">
+ *     <div ref={containerRef} className="h-full overflow-y-auto">
+ *       <div ref={contentRef}>{rows}</div>
+ *     </div>
+ *     {!isAtBottom && <JumpToBottom onClick={() => scrollToBottom('smooth')} />}
+ *   </div>
+ * );
+ * ```
+ */
+declare function useStickToBottom({ threshold, disabled, }?: UseStickToBottomOptions): UseStickToBottomReturn;
+/**
+ * Companion to {@link useStickToBottom}: fires `onEnded` when the newest
+ * message finishes streaming while the reader is away from the bottom — the
+ * end of the reply landed below the fold, so the jump-to-bottom button should
+ * upgrade to its “new messages” hint. When the whole reply fit above the fold
+ * (the reader is still at the bottom), `onEndedAtBottom` fires instead so the
+ * host can exit the stream's hold and resume following (`scrollToBottom`).
+ */
+declare function useStreamEndedBelowFold(newest: {
+    id: string;
+    status?: string;
+} | undefined, isAtBottom: boolean, onEnded: () => void, onEndedAtBottom?: () => void): 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 +544,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 UseStickToBottomOptions, type UseStickToBottomReturn, 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, useStickToBottom, useStreamEndedBelowFold, useYouTubeHoverPreview };