bits-lab 0.0.0-stage → 0.1.0

package/dist/DotGlobe.js

@@ -0,0 +1,312 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const LAND = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf4AP/AAAAAAAAAAAAAAAAAAAAAAAAX/z///+AAAAAAAABAAAAAAAAAAAAAYd8P///wAA+AAAAAA8AAAAAAAAAAAwAnw////4AAIAAAAAAGAAAAAAAAAAADivwAf//wAAAAADAAf/wAHYAAAAAADoi3sAP//gAAAAAMAD///sAAAAgBgACfwz/AD/+gAAAwAEHf///+/8gBAP/7/nJdjwD/+AAAH/AA7f///////f4P//////h8H/gAAAf/6//f////////Mf/////9H4D8AeAA+ev///////////AP/////4A0B4AAAD5/////////////Af3////gHgA4AAAH5///////////LwAHgH///gHkAAAAAH4/////////+CIAABAB///4D+AAAAGCx/////////4A8AAIAAf///n/gAAAOCD/////////wA4AAAAAf///n/wAAAbP///////////AgAAAAAP/////wAAADf//////////9AAAAAAAF////0YAAAB///////////9AAAAAAAD////8EAAAB///////////5AAAAAAAD////2AAAAB/f5fP//////wAAAAAAAD////gAAAAfxnwPP//////jAAAAAAAD////AAAAAPCb3/n/////+CAAAAAAAD///8AAAAAfALf/n////+ECAAAAAAAB///8AAAAAGHQP/n/////mMAAAAAAAA///8AAAAAH+Ai///////E8AAAAAAAAf//wAAAAAP/AA///////BgAAAAAAAAP//gAAAAAf/73///////gAAAAAAAAAD/AQAAAAAf////f/////gAAAAAAAAAF+AQAAAAB///+/n/////AAAAAAAAAAC+AAAAAAB///+f0H////AAAAAAAAAAAeAwAAAAD////f/B///8gAAAAAAAAAAeGEAAAAH////v+B/z/AAAAAAAAAAAAPMAgAAAD////n+A/B+gAAAAAAAAAAAD8AAAAAD////n4AeB/AgAAAAAAAAAAAPAAAAAH////3gAcAfAgAAAAAAAAAAADAAAAAD////6AAcAfggAAAAAAAAAAABDwAAAD////8wAMATAIAAAAAAAAAAAAr/AAAB/////gAKASAAAAAAAAAAAAAAH/gAAA/////gACAAAIAAAAAAAAAAAAH/8AAAaH///AAAAsGAAAAAAAAAAAAAH/+AAAAB//+AAAAUOAAAAAAAAAAAAAP/+AAAAB//8AAAAYegAAAAAAAAAAAAP//gAAAD//4AAAAMeBgAAAAAAAAAAAP//8AAAB//wAAAAGdiuAAAAAAAAAAAf///AAAA//wAAAACAQHgAAAAAAAAAAP///gAAA//wAAAABwAHwgAAAAAAAAAH///AAAA//wAAAAACIDQIAAAAAAAAAH//+AAAAf/wAAAAAAAAAAAAAAAAAAAD//+AAAA//wgAAAAABxAAAAAAAAAAAD//+AAAA//wgAAAAAPxgBAAAAAAAAAA//8AAAA//jgAAAAAf5gAAAAAAAAAAAf/8AAAA//DgAAAAAf/gAAAAAAAAAAAf/8AAAAf/DAAAAAD//4CAAAAAAAAAAf/wAAAAf/DAAAAAH//4AAAAAAAAAAAf/AAAAAf+CAAAAAH//8AAAAAAAAAAAf/AAAAAP8AAAAAAH//+AAAAAAAAAAA/+AAAAAP8AAAAAAH//+AAAAAAAAAAA/+AAAAAH4AAAAAAD//+AAAAAAAAAAA/8AAAAAHwAAAAAADwf8AAAAAAAAAAA/gAAAAAAAAAAAAACAH4AIAAAAAAAAB/wAAAAAAAAAAAAAAAD4AEAAAAAAAAB+AAAAAAAAAAAAAAAAAAAGAAAAAAAAB6AAAAAAAAAAAAAAAAAwAMAAAAAAAAA8AAAAAAAAAAAAAAAAAQAYAAAAAAAAB4AAAAAAAAAAAAAAAAAAAwAAAAAAAAB4AAAAAAAAAAAAAAAAAAAAAAAAAAAADwAAAAAAAAAACAAAAAAAAAAAAAAAAADgAAAAAAAAAAAAAAAAAAAAAAAAAAAABwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAeAAIP+f/gAAAAAAAAAAAMAAAAAAABP/+H//////AAAAAAAAAAA+AAAAAf////8////////AAAAAAAOEAPAAAB///////////////gAAAP//T//8AAAH//////////////+AAAH/////4AAAH///////////////8AAE//////4ABw////////////////8AAAD//////gCA////////////////wAAAf/////////////////////////+A/4A///////////////////////////////////////////////////////////////////////////////////////";
+const STYLE_ID = "bl-dot-globe";
+const CSS = `
+.bl-globe { position: relative; width: 100%; max-width: var(--bl-size); aspect-ratio: 1; margin: 0 auto; touch-action: pan-y; cursor: grab; outline: none; }
+.bl-globe[data-dragging] { cursor: grabbing; }
+.bl-globe:focus-visible { box-shadow: 0 0 0 3px var(--bl-focus); border-radius: 50%; }
+.bl-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+let landBits;
+function isLand(lat, lon) {
+  if (!landBits) landBits = Uint8Array.from(atob(LAND), (c) => c.charCodeAt(0));
+  const col = Math.min(179, Math.max(0, Math.floor((lon + 180) / 2)));
+  const row = Math.min(89, Math.max(0, Math.floor((90 - lat) / 2)));
+  const i = row * 180 + col;
+  return (landBits[i >> 3] & 1 << 7 - (i & 7)) !== 0;
+}
+const RAD = Math.PI / 180;
+const toVec = (lat, lon) => [Math.cos(lat * RAD) * Math.sin(lon * RAD), Math.sin(lat * RAD), Math.cos(lat * RAD) * Math.cos(lon * RAD)];
+function landDots(count) {
+  const dots = [];
+  const golden = Math.PI * (3 - Math.sqrt(5));
+  for (let i = 0; i < count; i++) {
+    const y = 1 - 2 * (i + 0.5) / count;
+    const r = Math.sqrt(1 - y * y);
+    const x = r * Math.cos(i * golden);
+    const z = r * Math.sin(i * golden);
+    if (isLand(Math.asin(y) / RAD, Math.atan2(x, z) / RAD)) dots.push([x, y, z]);
+  }
+  return dots;
+}
+function arcPoints(from, to, samples = 64) {
+  const a = toVec(...from);
+  const b = toVec(...to);
+  const omega = Math.acos(Math.min(1, Math.max(-1, a[0] * b[0] + a[1] * b[1] + a[2] * b[2])));
+  const lift = Math.min(0.4, omega * 0.2);
+  const points = [];
+  for (let s = 0; s <= samples; s++) {
+    const t = s / samples;
+    const ka = omega < 1e-6 ? 1 - t : Math.sin((1 - t) * omega) / Math.sin(omega);
+    const kb = omega < 1e-6 ? t : Math.sin(t * omega) / Math.sin(omega);
+    const h = 1 + lift * Math.sin(Math.PI * t);
+    points.push([(a[0] * ka + b[0] * kb) * h, (a[1] * ka + b[1] * kb) * h, (a[2] * ka + b[2] * kb) * h]);
+  }
+  return points;
+}
+const DEFAULT_MARKERS = [
+  { lat: 37.77, lon: -122.42, label: "San Francisco" },
+  { lat: 51.51, lon: -0.13, label: "London" },
+  { lat: 35.68, lon: 139.69, label: "Tokyo" },
+  { lat: -33.87, lon: 151.21, label: "Sydney" },
+  { lat: -23.55, lon: -46.63, label: "S\xE3o Paulo" },
+  { lat: 1.35, lon: 103.82, label: "Singapore" }
+];
+const DEFAULT_ARCS = [
+  { from: [37.77, -122.42], to: [51.51, -0.13] },
+  { from: [51.51, -0.13], to: [1.35, 103.82] },
+  { from: [1.35, 103.82], to: [35.68, 139.69] },
+  { from: [35.68, 139.69], to: [-33.87, 151.21] },
+  { from: [37.77, -122.42], to: [-23.55, -46.63] }
+];
+function DotGlobe({
+  size = 520,
+  dotCount = 9e3,
+  dotSize = 1,
+  square = false,
+  dotColor = "#73eff7",
+  oceanColor = "rgba(41,54,111,0.55)",
+  glowColor = "rgba(115,239,247,0.25)",
+  arcColor = "#ffcd75",
+  markerColor = "#ef7d57",
+  markers = DEFAULT_MARKERS,
+  arcs = DEFAULT_ARCS,
+  autoRotate = true,
+  rotateSpeed = 8,
+  initialLon = -20,
+  initialLat = 18,
+  draggable = true,
+  label = "Interactive globe",
+  className = "",
+  style
+}) {
+  useStyles();
+  const wrapRef = useRef(null);
+  const canvasRef = useRef(null);
+  const view = useRef({ yaw: -initialLon * RAD, pitch: initialLat * RAD, vy: 0, vp: 0, dragging: false });
+  const config = useRef(null);
+  config.current = { dotSize, square, dotColor, oceanColor, glowColor, arcColor, markerColor, markers, autoRotate, rotateSpeed, draggable };
+  const arcsKey = JSON.stringify(arcs);
+  useEffect(() => {
+    const wrap = wrapRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const dots = landDots(dotCount);
+    const arcPaths = arcs.map((arc) => arcPoints(arc.from, arc.to));
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const state = view.current;
+    let width = 0;
+    let frame = 0;
+    let visible = true;
+    let last = performance.now();
+    let clock = 0;
+    const resize = () => {
+      const dpr = Math.min(2, window.devicePixelRatio || 1);
+      width = wrap.clientWidth;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(width * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      draw();
+    };
+    const project = ([x, y, z], cosY, sinY, cosP, sinP, radius, center) => {
+      const x1 = x * cosY + z * sinY;
+      const z1 = z * cosY - x * sinY;
+      const y2 = y * cosP - z1 * sinP;
+      const z2 = y * sinP + z1 * cosP;
+      return [center + x1 * radius, center - y2 * radius, z2, x1 * x1 + y2 * y2 > 1];
+    };
+    function draw() {
+      const c = config.current;
+      const center = width / 2;
+      const radius = width * 0.42;
+      const cosY = Math.cos(state.yaw);
+      const sinY = Math.sin(state.yaw);
+      const cosP = Math.cos(state.pitch);
+      const sinP = Math.sin(state.pitch);
+      ctx.clearRect(0, 0, width, width);
+      const glow = ctx.createRadialGradient(center, center, radius * 0.9, center, center, radius * 1.18);
+      glow.addColorStop(0, c.glowColor);
+      glow.addColorStop(1, "rgba(0,0,0,0)");
+      ctx.fillStyle = glow;
+      ctx.fillRect(0, 0, width, width);
+      ctx.beginPath();
+      ctx.arc(center, center, radius, 0, Math.PI * 2);
+      ctx.fillStyle = c.oceanColor;
+      ctx.fill();
+      const dotRadius = Math.max(0.6, radius * 68e-4 * c.dotSize);
+      ctx.fillStyle = c.dotColor;
+      for (const dot of dots) {
+        const [sx, sy, depth] = project(dot, cosY, sinY, cosP, sinP, radius, center);
+        if (depth <= 0) continue;
+        ctx.globalAlpha = 0.25 + depth * 0.75;
+        const r = dotRadius * (0.55 + depth * 0.45);
+        if (c.square) ctx.fillRect(sx - r, sy - r, r * 2, r * 2);
+        else {
+          ctx.beginPath();
+          ctx.arc(sx, sy, r, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+      ctx.globalAlpha = 1;
+      ctx.lineCap = "round";
+      arcPaths.forEach((path, index) => {
+        const projected = path.map((point) => project(point, cosY, sinY, cosP, sinP, radius, center));
+        const shown = (p) => p[2] > 0 || p[3];
+        ctx.strokeStyle = c.arcColor;
+        ctx.lineWidth = 1;
+        ctx.globalAlpha = 0.35;
+        ctx.beginPath();
+        projected.forEach((p, i) => i && shown(p) && shown(projected[i - 1]) ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1]));
+        ctx.stroke();
+        const head = reduced ? 1 : (clock * 0.35 + index * 0.37) % 1.4 / 1.1;
+        const tail = 0.28;
+        ctx.lineWidth = 2;
+        for (let i = 1; i < projected.length; i++) {
+          const t = i / (projected.length - 1);
+          if (t > head || t < head - tail || !shown(projected[i]) || !shown(projected[i - 1])) continue;
+          ctx.globalAlpha = 1 - (head - t) / tail;
+          ctx.beginPath();
+          ctx.moveTo(projected[i - 1][0], projected[i - 1][1]);
+          ctx.lineTo(projected[i][0], projected[i][1]);
+          ctx.stroke();
+        }
+      });
+      ctx.globalAlpha = 1;
+      for (const marker of c.markers) {
+        const [sx, sy, depth] = project(toVec(marker.lat, marker.lon), cosY, sinY, cosP, sinP, radius, center);
+        if (depth <= 0.05) continue;
+        const color = marker.color ?? c.markerColor;
+        const pulse = reduced ? 0.5 : ((clock * 0.8 + marker.lon / 90) % 1 + 1) % 1;
+        ctx.globalAlpha = depth * (1 - pulse);
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.arc(sx, sy, 3 + pulse * 12, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.globalAlpha = depth;
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(sx, sy, 3.5, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    }
+    const tick = (now) => {
+      frame = 0;
+      const dt = Math.min(0.05, (now - last) / 1e3);
+      last = now;
+      clock += dt;
+      const c = config.current;
+      if (!state.dragging) {
+        state.yaw += state.vy * dt;
+        state.pitch += state.vp * dt;
+        state.vy *= Math.pow(0.04, dt);
+        state.vp *= Math.pow(0.04, dt);
+        if (c.autoRotate && Math.abs(state.vy) < 0.2) state.yaw += c.rotateSpeed * RAD * dt;
+        state.pitch = Math.max(-1.2, Math.min(1.2, state.pitch));
+      }
+      draw();
+      if (visible) frame = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (reduced || frame || !visible) return;
+      last = performance.now();
+      frame = requestAnimationFrame(tick);
+    };
+    let pointer = null;
+    const onDown = (event) => {
+      if (!config.current.draggable) return;
+      pointer = { id: event.pointerId, x: event.clientX, y: event.clientY, t: performance.now() };
+      state.dragging = true;
+      state.vy = 0;
+      state.vp = 0;
+      wrap.setPointerCapture(event.pointerId);
+      wrap.setAttribute("data-dragging", "");
+    };
+    const onMove = (event) => {
+      if (!pointer || event.pointerId !== pointer.id) return;
+      const now = performance.now();
+      const scale = Math.PI / Math.max(1, width);
+      const dx = (event.clientX - pointer.x) * scale;
+      const dy = (event.clientY - pointer.y) * scale;
+      const dt = Math.max(8e-3, (now - pointer.t) / 1e3);
+      state.yaw += dx;
+      state.pitch = Math.max(-1.2, Math.min(1.2, state.pitch + dy));
+      state.vy = dx / dt;
+      state.vp = dy / dt;
+      pointer = { ...pointer, x: event.clientX, y: event.clientY, t: now };
+      if (reduced) draw();
+    };
+    const onUp = (event) => {
+      if (!pointer || event.pointerId !== pointer.id) return;
+      if (performance.now() - pointer.t > 80) {
+        state.vy = 0;
+        state.vp = 0;
+      }
+      pointer = null;
+      state.dragging = false;
+      wrap.removeAttribute("data-dragging");
+    };
+    const onKey = (event) => {
+      const step = 10 * RAD;
+      const moves = { ArrowLeft: [step, 0], ArrowRight: [-step, 0], ArrowUp: [0, step], ArrowDown: [0, -step] };
+      const move = moves[event.key];
+      if (!move) return;
+      event.preventDefault();
+      state.yaw += move[0];
+      state.pitch = Math.max(-1.2, Math.min(1.2, state.pitch + move[1]));
+      draw();
+    };
+    const observer = new ResizeObserver(resize);
+    observer.observe(wrap);
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) start();
+    });
+    io.observe(wrap);
+    wrap.addEventListener("pointerdown", onDown);
+    wrap.addEventListener("pointermove", onMove);
+    wrap.addEventListener("pointerup", onUp);
+    wrap.addEventListener("pointercancel", onUp);
+    wrap.addEventListener("keydown", onKey);
+    resize();
+    start();
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+      io.disconnect();
+      wrap.removeEventListener("pointerdown", onDown);
+      wrap.removeEventListener("pointermove", onMove);
+      wrap.removeEventListener("pointerup", onUp);
+      wrap.removeEventListener("pointercancel", onUp);
+      wrap.removeEventListener("keydown", onKey);
+    };
+  }, [dotCount, arcsKey]);
+  const names = markers.map((m) => m.label).filter(Boolean);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: wrapRef,
+      className: `bl-globe ${className}`,
+      role: "img",
+      tabIndex: 0,
+      "aria-label": names.length ? `${label}: ${names.join(", ")}. Drag or use arrow keys to rotate.` : `${label}. Drag or use arrow keys to rotate.`,
+      style: { "--bl-size": `${size}px`, "--bl-focus": dotColor, ...style },
+      children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true" })
+    }
+  );
+}
+export {
+  DotGlobe as default,
+  isLand
+};

package/dist/DotMap.d.ts

@@ -0,0 +1,47 @@
+import { type CSSProperties } from 'react';
+export declare function isLand(lat: number, lon: number): boolean;
+/** [latitude, longitude] in degrees. */
+export type LatLon = [number, number];
+export interface MapMarker {
+    lat: number;
+    lon: number;
+    label?: string;
+    color?: string;
+}
+export interface MapRoute {
+    from: LatLon;
+    to: LatLon;
+    color?: string;
+}
+export interface DotMapProps {
+    markers?: MapMarker[];
+    routes?: MapRoute[];
+    /** Grid spacing in degrees (multiples of 2). */
+    dotSpacing?: number;
+    /** Dot size, in map units (1 unit = 1 degree). */
+    dotRadius?: number;
+    /** Square dots, for a pixel look. */
+    square?: boolean;
+    /** Hide latitudes south of 60°S. */
+    cropAntarctica?: boolean;
+    dotColor?: string;
+    markerColor?: string;
+    routeColor?: string;
+    labelColor?: string;
+    /** Outline behind labels, for contrast. */
+    labelHalo?: string;
+    /** Label size, in map units. */
+    labelSize?: number;
+    /** Labels always on, or on hover and focus only. */
+    showLabels?: boolean;
+    /** Route comet loop length, in seconds. */
+    routeSpeed?: number;
+    fontFamily?: string;
+    /** Makes markers buttons (click, Enter or Space). */
+    onMarkerSelect?: (marker: MapMarker, index: number) => void;
+    /** Accessible name of the map. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function DotMap({ markers, routes, dotSpacing, dotRadius, square, cropAntarctica, dotColor, markerColor, routeColor, labelColor, labelHalo, labelSize, showLabels, routeSpeed, fontFamily, onMarkerSelect, label, className, style }: DotMapProps): import("react").JSX.Element;

package/dist/DotMap.js

@@ -0,0 +1,172 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useInsertionEffect, useMemo, useState } from "react";
+const LAND = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf4AP/AAAAAAAAAAAAAAAAAAAAAAAAX/z///+AAAAAAAABAAAAAAAAAAAAAYd8P///wAA+AAAAAA8AAAAAAAAAAAwAnw////4AAIAAAAAAGAAAAAAAAAAADivwAf//wAAAAADAAf/wAHYAAAAAADoi3sAP//gAAAAAMAD///sAAAAgBgACfwz/AD/+gAAAwAEHf///+/8gBAP/7/nJdjwD/+AAAH/AA7f///////f4P//////h8H/gAAAf/6//f////////Mf/////9H4D8AeAA+ev///////////AP/////4A0B4AAAD5/////////////Af3////gHgA4AAAH5///////////LwAHgH///gHkAAAAAH4/////////+CIAABAB///4D+AAAAGCx/////////4A8AAIAAf///n/gAAAOCD/////////wA4AAAAAf///n/wAAAbP///////////AgAAAAAP/////wAAADf//////////9AAAAAAAF////0YAAAB///////////9AAAAAAAD////8EAAAB///////////5AAAAAAAD////2AAAAB/f5fP//////wAAAAAAAD////gAAAAfxnwPP//////jAAAAAAAD////AAAAAPCb3/n/////+CAAAAAAAD///8AAAAAfALf/n////+ECAAAAAAAB///8AAAAAGHQP/n/////mMAAAAAAAA///8AAAAAH+Ai///////E8AAAAAAAAf//wAAAAAP/AA///////BgAAAAAAAAP//gAAAAAf/73///////gAAAAAAAAAD/AQAAAAAf////f/////gAAAAAAAAAF+AQAAAAB///+/n/////AAAAAAAAAAC+AAAAAAB///+f0H////AAAAAAAAAAAeAwAAAAD////f/B///8gAAAAAAAAAAeGEAAAAH////v+B/z/AAAAAAAAAAAAPMAgAAAD////n+A/B+gAAAAAAAAAAAD8AAAAAD////n4AeB/AgAAAAAAAAAAAPAAAAAH////3gAcAfAgAAAAAAAAAAADAAAAAD////6AAcAfggAAAAAAAAAAABDwAAAD////8wAMATAIAAAAAAAAAAAAr/AAAB/////gAKASAAAAAAAAAAAAAAH/gAAA/////gACAAAIAAAAAAAAAAAAH/8AAAaH///AAAAsGAAAAAAAAAAAAAH/+AAAAB//+AAAAUOAAAAAAAAAAAAAP/+AAAAB//8AAAAYegAAAAAAAAAAAAP//gAAAD//4AAAAMeBgAAAAAAAAAAAP//8AAAB//wAAAAGdiuAAAAAAAAAAAf///AAAA//wAAAACAQHgAAAAAAAAAAP///gAAA//wAAAABwAHwgAAAAAAAAAH///AAAA//wAAAAACIDQIAAAAAAAAAH//+AAAAf/wAAAAAAAAAAAAAAAAAAAD//+AAAA//wgAAAAABxAAAAAAAAAAAD//+AAAA//wgAAAAAPxgBAAAAAAAAAA//8AAAA//jgAAAAAf5gAAAAAAAAAAAf/8AAAA//DgAAAAAf/gAAAAAAAAAAAf/8AAAAf/DAAAAAD//4CAAAAAAAAAAf/wAAAAf/DAAAAAH//4AAAAAAAAAAAf/AAAAAf+CAAAAAH//8AAAAAAAAAAAf/AAAAAP8AAAAAAH//+AAAAAAAAAAA/+AAAAAP8AAAAAAH//+AAAAAAAAAAA/+AAAAAH4AAAAAAD//+AAAAAAAAAAA/8AAAAAHwAAAAAADwf8AAAAAAAAAAA/gAAAAAAAAAAAAACAH4AIAAAAAAAAB/wAAAAAAAAAAAAAAAD4AEAAAAAAAAB+AAAAAAAAAAAAAAAAAAAGAAAAAAAAB6AAAAAAAAAAAAAAAAAwAMAAAAAAAAA8AAAAAAAAAAAAAAAAAQAYAAAAAAAAB4AAAAAAAAAAAAAAAAAAAwAAAAAAAAB4AAAAAAAAAAAAAAAAAAAAAAAAAAAADwAAAAAAAAAACAAAAAAAAAAAAAAAAADgAAAAAAAAAAAAAAAAAAAAAAAAAAAABwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAeAAIP+f/gAAAAAAAAAAAMAAAAAAABP/+H//////AAAAAAAAAAA+AAAAAf////8////////AAAAAAAOEAPAAAB///////////////gAAAP//T//8AAAH//////////////+AAAH/////4AAAH///////////////8AAE//////4ABw////////////////8AAAD//////gCA////////////////wAAAf/////////////////////////+A/4A///////////////////////////////////////////////////////////////////////////////////////";
+const STYLE_ID = "bl-dot-map";
+const CSS = `
+.bl-map { position: relative; width: 100%; color: var(--bl-dot); font-family: var(--bl-font, ui-sans-serif, system-ui, sans-serif); }
+.bl-map svg { display: block; width: 100%; height: auto; overflow: visible; }
+.bl-map__route-base { fill: none; stroke: var(--bl-route); stroke-width: 0.5; opacity: 0.35; }
+.bl-map__route-comet { fill: none; stroke: var(--bl-route); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 0.18 1; animation: bl-map-travel var(--bl-speed) linear infinite; }
+.bl-map__pulse { fill: none; stroke: currentColor; stroke-width: 0.6; transform-box: fill-box; transform-origin: center; animation: bl-map-pulse 2.2s ease-out infinite; }
+.bl-map__marker { color: var(--bl-marker); cursor: default; outline: none; }
+.bl-map__marker:focus-visible .bl-map__core, .bl-map__marker:hover .bl-map__core { stroke: var(--bl-label); stroke-width: 0.6; }
+.bl-map__label { fill: var(--bl-label); font-size: var(--bl-label-size); font-weight: 600; paint-order: stroke; stroke: var(--bl-label-halo); stroke-width: 1.2; stroke-linejoin: round; pointer-events: none; opacity: var(--bl-label-opacity); transition: opacity 160ms; }
+.bl-map__marker:hover .bl-map__label, .bl-map__marker:focus-visible .bl-map__label { opacity: 1; }
+@keyframes bl-map-travel { from { stroke-dashoffset: 0.18; } to { stroke-dashoffset: -1; } }
+@keyframes bl-map-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(4); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-map__route-comet { animation: none; stroke-dasharray: none; opacity: 0.8; stroke-width: 0.6; }
+  .bl-map__pulse { animation: none; opacity: 0; }
+}
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+let landBits;
+function isLand(lat, lon) {
+  if (!landBits) landBits = Uint8Array.from(atob(LAND), (c) => c.charCodeAt(0));
+  const col = Math.min(179, Math.max(0, Math.floor((lon + 180) / 2)));
+  const row = Math.min(89, Math.max(0, Math.floor((90 - lat) / 2)));
+  const i = row * 180 + col;
+  return (landBits[i >> 3] & 1 << 7 - (i & 7)) !== 0;
+}
+const project = (lat, lon) => [lon + 180, 90 - lat];
+function dotsPath(spacing, radius, square, southLimit) {
+  let d = "";
+  for (let lat = 90 - spacing / 2; lat > southLimit; lat -= spacing) {
+    for (let lon = -180 + spacing / 2; lon < 180; lon += spacing) {
+      if (!isLand(lat, lon)) continue;
+      const [x, y] = project(lat, lon);
+      d += square ? `M${(x - radius).toFixed(2)} ${(y - radius).toFixed(2)}h${radius * 2}v${radius * 2}h${-radius * 2}z` : `M${(x - radius).toFixed(2)} ${y.toFixed(2)}a${radius} ${radius} 0 1 0 ${radius * 2} 0a${radius} ${radius} 0 1 0 ${-radius * 2} 0`;
+    }
+  }
+  return d;
+}
+function routePath(from, to) {
+  const [x1, y1] = project(...from);
+  let [x2, y2] = project(...to);
+  if (Math.abs(x2 - x1) > 180) x2 += x2 > x1 ? -360 : 360;
+  const distance = Math.hypot(x2 - x1, y2 - y1);
+  const mx = (x1 + x2) / 2;
+  const my = (y1 + y2) / 2 - distance * 0.28;
+  return `M${x1.toFixed(2)} ${y1.toFixed(2)}Q${mx.toFixed(2)} ${my.toFixed(2)} ${x2.toFixed(2)} ${y2.toFixed(2)}`;
+}
+const DEFAULT_MARKERS = [
+  { lat: 37.77, lon: -122.42, label: "San Francisco" },
+  { lat: 40.71, lon: -74, label: "New York" },
+  { lat: 51.51, lon: -0.13, label: "London" },
+  { lat: 6.52, lon: 3.38, label: "Lagos" },
+  { lat: 19.08, lon: 72.88, label: "Mumbai" },
+  { lat: 35.68, lon: 139.69, label: "Tokyo" },
+  { lat: -33.87, lon: 151.21, label: "Sydney" },
+  { lat: -23.55, lon: -46.63, label: "S\xE3o Paulo" }
+];
+const DEFAULT_ROUTES = [
+  { from: [37.77, -122.42], to: [40.71, -74] },
+  { from: [40.71, -74], to: [51.51, -0.13] },
+  { from: [51.51, -0.13], to: [6.52, 3.38] },
+  { from: [51.51, -0.13], to: [19.08, 72.88] },
+  { from: [19.08, 72.88], to: [35.68, 139.69] },
+  { from: [35.68, 139.69], to: [-33.87, 151.21] },
+  { from: [40.71, -74], to: [-23.55, -46.63] }
+];
+function DotMap({
+  markers = DEFAULT_MARKERS,
+  routes = DEFAULT_ROUTES,
+  dotSpacing = 2,
+  dotRadius = 0.55,
+  square = false,
+  cropAntarctica = true,
+  dotColor = "rgba(148,176,194,0.55)",
+  markerColor = "#ef7d57",
+  routeColor = "#ffcd75",
+  labelColor = "#f4f4f4",
+  labelHalo = "#1a1c2c",
+  labelSize = 4,
+  showLabels = true,
+  routeSpeed = 3,
+  fontFamily,
+  onMarkerSelect,
+  label = "World map",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [active, setActive] = useState(null);
+  const southLimit = cropAntarctica ? -60 : -90;
+  const height = 90 - southLimit;
+  const land = useMemo(() => dotsPath(Math.max(2, dotSpacing), dotRadius, square, southLimit), [dotSpacing, dotRadius, square, southLimit]);
+  return /* @__PURE__ */ jsx(
+    "figure",
+    {
+      className: `bl-map ${className}`,
+      style: {
+        "--bl-dot": dotColor,
+        "--bl-marker": markerColor,
+        "--bl-route": routeColor,
+        "--bl-label": labelColor,
+        "--bl-label-halo": labelHalo,
+        "--bl-label-size": `${labelSize}px`,
+        "--bl-label-opacity": showLabels ? 1 : 0,
+        "--bl-speed": `${routeSpeed}s`,
+        ...fontFamily ? { "--bl-font": fontFamily } : null,
+        margin: 0,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 360 ${height}`, role: "group", "aria-label": label, children: [
+        /* @__PURE__ */ jsx("path", { d: land, fill: "currentColor", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("g", { "aria-hidden": "true", children: routes.map((route, index) => {
+          const d = routePath(route.from, route.to);
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx("path", { className: "bl-map__route-base", d }),
+            /* @__PURE__ */ jsx("path", { className: "bl-map__route-comet", d, pathLength: "1", style: { animationDelay: `${-index * 0.53 % routeSpeed}s`, stroke: route.color } })
+          ] }, `${uid}-r${index}`);
+        }) }),
+        markers.map((marker, index) => {
+          const [x, y] = project(marker.lat, marker.lon);
+          const flip = x > 300;
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              className: "bl-map__marker",
+              style: marker.color ? { color: marker.color } : void 0,
+              tabIndex: 0,
+              role: onMarkerSelect ? "button" : "img",
+              "aria-label": marker.label ?? `${marker.lat}, ${marker.lon}`,
+              "aria-pressed": onMarkerSelect ? active === index : void 0,
+              onClick: () => {
+                setActive(index);
+                onMarkerSelect?.(marker, index);
+              },
+              onKeyDown: (event) => {
+                if (onMarkerSelect && (event.key === "Enter" || event.key === " ")) {
+                  event.preventDefault();
+                  setActive(index);
+                  onMarkerSelect(marker, index);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("circle", { className: "bl-map__pulse", cx: x, cy: y, r: "1.6", style: { animationDelay: `${index * 0.37 % 2.2}s` } }),
+                /* @__PURE__ */ jsx("circle", { className: "bl-map__core", cx: x, cy: y, r: active === index ? 2.2 : 1.6, fill: "currentColor" }),
+                /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: "5", fill: "transparent" }),
+                marker.label && /* @__PURE__ */ jsx("text", { className: "bl-map__label", x: flip ? x - 3.5 : x + 3.5, y: y + labelSize * 0.35, textAnchor: flip ? "end" : "start", children: marker.label })
+              ]
+            },
+            `${uid}-m${index}`
+          );
+        })
+      ] })
+    }
+  );
+}
+export {
+  DotMap as default,
+  isLand
+};

package/dist/DropZone.d.ts

@@ -0,0 +1,57 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface DropFile {
+    id: number;
+    file: File;
+    name: string;
+    size: number;
+    type: string;
+    /** Object URL for image thumbnails (revoked on remove and unmount). */
+    preview: string | null;
+    /** 0–1. */
+    progress: number;
+    status: 'uploading' | 'done' | 'error';
+    error: string | null;
+}
+export interface DropRejection {
+    file: File;
+    reason: string;
+}
+export type UploadFn = (file: File, context: {
+    onProgress: (fraction: number) => void;
+    signal: AbortSignal;
+}) => unknown;
+export interface DropZoneProps {
+    /** Same syntax as <input accept>: MIME types, wildcards like image/*, or .extensions. */
+    accept?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    /** Max size per file, in bytes. */
+    maxSize?: number;
+    /** Your uploader: call onProgress(0–1); removing the file aborts via signal. Without it, files are just collected. */
+    upload?: UploadFn;
+    onFilesChange?: (files: DropFile[]) => void;
+    onReject?: (rejections: DropRejection[]) => void;
+    title?: ReactNode;
+    /** Defaults to a summary of the rules. */
+    hint?: ReactNode;
+    disabled?: boolean;
+    /** Lean toward the cursor while files are dragged over. */
+    magnetic?: boolean;
+    width?: number;
+    radius?: number;
+    backgroundColor?: string;
+    /** Card color while files are dragged over. */
+    overColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    chipColor?: string;
+    accentColor?: string;
+    successColor?: string;
+    errorColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function formatBytes(bytes: number): string;
+export default function DropZone({ accept, multiple, maxFiles, maxSize, upload, onFilesChange, onReject, title, hint, disabled, magnetic, width, radius, backgroundColor, overColor, textColor, mutedColor, lineColor, chipColor, accentColor, successColor, errorColor, fontFamily, className, style }: DropZoneProps): import("react").JSX.Element;