@dxos/solid-ui-geo 0.0.0 → 0.8.4-main.59c2e9b

package/dist/lib/browser/index.mjs

@@ -0,0 +1,1172 @@
+import {
+  loadTopology
+} from "./chunk-KONL6N4F.mjs";
+
+// src/components/Globe/Globe.tsx
+import { jsx as _jsx3 } from "solid-js/jsx-runtime";
+import { createResizeObserver } from "@solid-primitives/resize-observer";
+import { easeLinear, easeSinOut, geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition } from "d3";
+import { Show, createEffect as createEffect5, createMemo, createSignal as createSignal4 } from "solid-js";
+
+// src/hooks/context.tsx
+import { jsx as _jsx } from "solid-js/jsx-runtime";
+import { createContext, createEffect, createSignal, useContext } from "solid-js";
+import { raise } from "@dxos/debug";
+var defaults = {
+  center: {
+    lat: 51,
+    lng: 0
+  },
+  zoom: 4
+};
+var GlobeContext = createContext();
+var GlobeContextProvider = (props) => {
+  const [size, setSize] = createSignal(props.size ?? {
+    width: 0,
+    height: 0
+  });
+  const [center, setCenter] = createSignal(props.center ?? defaults.center);
+  const [zoom, setZoom] = createSignal(props.zoom ?? defaults.zoom);
+  const [translation, setTranslation] = createSignal(props.translation);
+  const [rotation, setRotation] = createSignal(props.rotation);
+  createEffect(() => {
+    if (props.size) {
+      setSize(props.size);
+    }
+  });
+  return /* @__PURE__ */ _jsx(GlobeContext.Provider, {
+    value: {
+      size,
+      center,
+      zoom,
+      translation,
+      rotation,
+      setCenter,
+      setZoom,
+      setTranslation,
+      setRotation
+    },
+    children: props.children
+  });
+};
+var useGlobeContext = () => {
+  return useContext(GlobeContext) ?? raise(new Error("Missing GlobeContext"));
+};
+
+// src/hooks/useDrag.ts
+import { select as select2 } from "d3";
+import { createEffect as createEffect2, onCleanup } from "solid-js";
+
+// src/util/debug.ts
+var debug = false;
+var timer = (cb) => {
+  const start = Date.now();
+  const data = cb();
+  const t = Date.now() - start / 1e3;
+  if (debug) {
+    console.log({
+      t,
+      data
+    });
+  }
+  return data;
+};
+
+// src/util/inertia.ts
+import { drag, select, timer as timer2 } from "d3";
+import versor from "versor";
+var restrictAxis = (axis) => (original, current) => current.map((d, i) => axis[i] ? d : original[i]);
+var geoInertiaDrag = (target, render, projection, options) => {
+  if (!options) {
+    options = {};
+  }
+  if (target.node) {
+    target = target.node();
+  }
+  target = select(target);
+  const inertia = geoInertiaDragHelper({
+    projection,
+    render: (rotation) => {
+      projection.rotate(rotation);
+      render && render();
+    },
+    axis: restrictAxis(options.xAxis ? [
+      true,
+      false,
+      false
+    ] : [
+      true,
+      true,
+      true
+    ]),
+    start: options.start,
+    move: options.move,
+    end: options.end,
+    stop: options.stop,
+    finish: options.finish,
+    time: options.time,
+    hold: options.hold
+  });
+  target.call(drag().on("start", inertia.start).on("drag", inertia.move).on("end", inertia.end));
+  return inertia;
+};
+var geoInertiaDragHelper = (opt) => {
+  const projection = opt.projection;
+  let v0;
+  let r0;
+  let q0;
+  let v10;
+  let v11;
+  let q10;
+  const inertia = inertiaHelper({
+    axis: opt.axis,
+    start: () => {
+      v0 = versor.cartesian(projection.invert(inertia.position));
+      r0 = projection.rotate();
+      q0 = versor(r0);
+      opt.start && opt.start();
+    },
+    move: () => {
+      const inv = projection.rotate(r0).invert(inertia.position);
+      if (isNaN(inv[0])) {
+        return;
+      }
+      const v1 = versor.cartesian(inv);
+      const q1 = versor.multiply(q0, versor.delta(v0, v1));
+      const r1 = versor.rotation(q1);
+      const r2 = opt.axis(r0, r1);
+      opt.render(r2);
+      opt.move && opt.move();
+    },
+    end: () => {
+      v10 = versor.cartesian(projection.invert(inertia.position.map((d, i) => d - inertia.velocity[i] / 1e3)));
+      q10 = versor(projection.rotate());
+      v11 = versor.cartesian(projection.invert(inertia.position));
+      opt.end && opt.end();
+    },
+    stop: opt.stop,
+    finish: opt.finish,
+    render: (t) => {
+      const r1 = versor.rotation(versor.multiply(q10, versor.delta(v10, v11, t * 1e3)));
+      const r2 = opt.axis(r0, r1);
+      opt.render && opt.render(r2);
+    },
+    time: opt.time
+  });
+  return inertia;
+};
+function inertiaHelper(opt) {
+  const A = opt.time || 5e3;
+  const limit = 1.0001;
+  const B = -Math.log(1 - 1 / limit);
+  const inertia = {
+    position: [
+      0,
+      0
+    ],
+    velocity: [
+      0,
+      0
+    ],
+    timer: timer2(() => {
+    }),
+    time: 0,
+    t: 0,
+    start: function(ev) {
+      const position = [
+        ev.x,
+        ev.y
+      ];
+      inertia.position = position;
+      inertia.velocity = [
+        0,
+        0
+      ];
+      inertia.timer.stop();
+      this.classList.remove("inertia");
+      this.classList.add("dragging");
+      opt.start && opt.start.call(this, position);
+    },
+    move: function(ev) {
+      const position = [
+        ev.x,
+        ev.y
+      ];
+      const time = performance.now();
+      const deltaTime = time - inertia.time;
+      const decay = 1 - Math.exp(-deltaTime / 1e3);
+      inertia.velocity = inertia.velocity.map((d, i) => {
+        const deltaPos = position[i] - inertia.position[i];
+        const deltaTime2 = time - inertia.time;
+        return 1e3 * (1 - decay) * deltaPos / deltaTime2 + d * decay;
+      });
+      inertia.velocity = opt.axis([
+        0,
+        0
+      ], inertia.velocity);
+      inertia.time = time;
+      inertia.position = position;
+      opt.move && opt.move.call(this, position);
+    },
+    end: function(ev) {
+      this.classList.remove("dragging", "inertia");
+      const v = inertia.velocity;
+      if (v[0] * v[0] + v[1] * v[1] < 100) {
+        inertia.timer.stop();
+        return opt.stop && opt.stop();
+      }
+      const time = performance.now();
+      const deltaTime = time - inertia.time;
+      if (opt.hold === void 0) {
+        opt.hold = 100;
+      }
+      if (deltaTime >= opt.hold) {
+        inertia.timer.stop();
+        return opt.stop && opt.stop();
+      }
+      this.classList.add("inertia");
+      opt.end && opt.end();
+      const self = this;
+      inertia.timer.restart((e) => {
+        inertia.t = limit * (1 - Math.exp(-B * e / A));
+        opt.render && opt.render(inertia.t);
+        if (inertia.t > 1) {
+          inertia.timer.stop();
+          self.classList.remove("inertia");
+          inertia.velocity = [
+            0,
+            0
+          ];
+          inertia.t = 1;
+          opt.finish && opt.finish();
+        }
+      });
+    }
+  };
+  inertia.timer.stop();
+  return inertia;
+}
+
+// src/util/path.ts
+import { geoCircle as d3GeoCircle } from "d3";
+var positionToRotation = ([lng, lat], tilt = 0) => [
+  -lng,
+  tilt - lat,
+  0
+];
+var geoToPosition = ({ lat, lng }) => [
+  lng,
+  lat
+];
+var geoPoint = (point) => ({
+  type: "Point",
+  coordinates: geoToPosition(point)
+});
+var geoCircle = ({ lat, lng }, radius) => d3GeoCircle().radius(radius).center([
+  lng,
+  lat
+])();
+var geoLine = (p1, p2) => ({
+  type: "LineString",
+  coordinates: [
+    [
+      p1.lng,
+      p1.lat
+    ],
+    [
+      p2.lng,
+      p2.lat
+    ]
+  ]
+});
+var closestPoint = (points, target) => {
+  if (points.length === 0) {
+    return target;
+  }
+  let closestPoint2 = points[0];
+  let minDistance = getDistance(points[0], target);
+  for (const point of points) {
+    const distance = getDistance(point, target);
+    if (distance < minDistance) {
+      minDistance = distance;
+      closestPoint2 = point;
+    }
+  }
+  return closestPoint2;
+};
+var getDistance = (point1, point2) => {
+  const dx = point1[0] - point2[0];
+  const dy = point1[1] - point2[1];
+  return Math.sqrt(dx * dx + dy * dy);
+};
+
+// src/util/render.ts
+import { geoGraticule } from "d3";
+import { feature, mesh } from "topojson-client";
+var createLayers = (topology, features, styles) => {
+  const layers = [];
+  if (styles.water) {
+    layers.push({
+      styles: styles.water,
+      path: {
+        type: "Sphere"
+      }
+    });
+  }
+  if (styles.graticule) {
+    layers.push({
+      styles: styles.graticule,
+      path: geoGraticule().step([
+        6,
+        6
+      ])()
+    });
+  }
+  if (topology) {
+    if (topology.objects.land && styles.land) {
+      layers.push({
+        styles: styles.land,
+        path: feature(topology, topology.objects.land)
+      });
+    }
+    if (topology.objects.countries && styles.border) {
+      layers.push({
+        styles: styles.border,
+        path: mesh(topology, topology.objects.countries, (a, b) => a !== b)
+      });
+    }
+    if (topology.objects.dots && styles.dots) {
+      layers.push({
+        styles: styles.dots,
+        path: topology.objects.dots
+      });
+    }
+  }
+  if (features) {
+    const { points, lines } = features;
+    if (points && styles.point) {
+      layers.push({
+        styles: styles.point,
+        path: {
+          type: "GeometryCollection",
+          geometries: points.map((point) => geoPoint(point))
+        }
+      });
+    }
+    if (lines && styles.line) {
+      layers.push({
+        styles: styles.line,
+        path: {
+          type: "GeometryCollection",
+          geometries: lines.map(({ source, target }) => geoLine(source, target))
+        }
+      });
+    }
+  }
+  return layers;
+};
+var renderLayers = (generator, layers = [], scale, styles) => {
+  const context = generator.context();
+  const { canvas: { width, height } } = context;
+  context.reset();
+  if (styles.background) {
+    context.fillStyle = styles.background.fillStyle;
+    context.fillRect(0, 0, width, height);
+  } else {
+    context.clearRect(0, 0, width, height);
+  }
+  layers.forEach(({ path, styles: styles2 }) => {
+    context.save();
+    let fill = false;
+    let stroke = false;
+    if (styles2) {
+      Object.entries(styles2).forEach(([key, value]) => {
+        if (key === "pointRadius") {
+          generator.pointRadius(value * scale);
+        } else {
+          context[key] = value;
+          fill ||= key === "fillStyle";
+          stroke ||= key === "strokeStyle";
+        }
+      });
+    }
+    context.beginPath();
+    generator(path);
+    fill && context.fill();
+    stroke && context.stroke();
+    context.restore();
+  });
+  return context;
+};
+
+// src/hooks/useDrag.ts
+var useDrag = (controller, options = {}) => {
+  createEffect2(() => {
+    const canvas = controller?.canvas;
+    if (!canvas || options.disabled) {
+      return;
+    }
+    geoInertiaDrag(select2(canvas), () => {
+      controller.setRotation(controller.projection.rotate());
+      options.onUpdate?.({
+        type: "move",
+        controller
+      });
+    }, controller.projection, {
+      xAxis: options.xAxis,
+      time: 3e3,
+      start: () => options.onUpdate?.({
+        type: "start",
+        controller
+      }),
+      finish: () => options.onUpdate?.({
+        type: "end",
+        controller
+      })
+    });
+    onCleanup(() => {
+      cancelDrag(select2(canvas));
+    });
+  });
+};
+var cancelDrag = (node) => node.on(".drag", null);
+
+// src/hooks/useGlobeZoomHandler.ts
+var ZOOM_FACTOR = 0.1;
+var useGlobeZoomHandler = (controller) => {
+  return (event) => {
+    if (!controller) {
+      return;
+    }
+    switch (event) {
+      case "zoom-in": {
+        controller.setZoom((zoom) => {
+          return zoom * (1 + ZOOM_FACTOR);
+        });
+        break;
+      }
+      case "zoom-out": {
+        controller.setZoom((zoom) => {
+          return zoom * (1 - ZOOM_FACTOR);
+        });
+        break;
+      }
+    }
+  };
+};
+
+// src/hooks/useMapZoomHandler.ts
+var useMapZoomHandler = (controller) => {
+  return (event) => {
+    if (!controller) {
+      return;
+    }
+    switch (event) {
+      case "zoom-in": {
+        controller.setZoom((scale) => scale + 1);
+        break;
+      }
+      case "zoom-out": {
+        controller.setZoom((scale) => scale - 1);
+        break;
+      }
+    }
+  };
+};
+
+// src/hooks/useSpinner.ts
+import { timer as d3Timer } from "d3";
+import { createEffect as createEffect3, createSignal as createSignal2, onCleanup as onCleanup2 } from "solid-js";
+var useSpinner = (controller, options = {}) => {
+  const [running, setRunning] = createSignal2(false);
+  createEffect3(() => {
+    let timer3;
+    const start = () => {
+      const delta = options.delta ?? [
+        1e-3,
+        0,
+        0
+      ];
+      let t = 0;
+      let lastRotation = controller.projection.rotate();
+      timer3 = d3Timer((elapsed) => {
+        const dt = elapsed - t;
+        t = elapsed;
+        const rotation = [
+          lastRotation[0] + delta[0] * dt,
+          lastRotation[1] + delta[1] * dt,
+          lastRotation[2] + delta[2] * dt
+        ];
+        lastRotation = rotation;
+        controller.setRotation(rotation);
+      });
+    };
+    const stop = () => {
+      if (timer3) {
+        timer3.stop();
+        timer3 = void 0;
+      }
+    };
+    if (controller && running()) {
+      start();
+    } else {
+      stop();
+    }
+    onCleanup2(() => stop());
+  });
+  return {
+    start: () => {
+      if (!options.disabled) {
+        setRunning(true);
+      }
+    },
+    stop: () => setRunning(false)
+  };
+};
+
+// src/hooks/useTour.ts
+import { selection as d3Selection, geoDistance, geoInterpolate, geoPath } from "d3";
+import { createEffect as createEffect4, createSignal as createSignal3, onCleanup as onCleanup3 } from "solid-js";
+import versor2 from "versor";
+var TRANSITION_NAME = "globe-tour";
+var defaultDuration = 1500;
+var useTour = (controller, points, options = {}) => {
+  const selection = d3Selection();
+  const [running, setRunning] = createSignal3(options.running ?? false);
+  createEffect4(() => {
+    if (!running()) {
+      selection.interrupt(TRANSITION_NAME);
+      return;
+    }
+    let t;
+    if (controller && running()) {
+      t = setTimeout(async () => {
+        const { canvas, projection, setRotation } = controller;
+        const context = canvas.getContext("2d", {
+          alpha: false
+        });
+        const path = geoPath(projection, context).pointRadius(2);
+        const tilt = options.tilt ?? 0;
+        let last;
+        try {
+          const p = [
+            ...points ?? []
+          ];
+          if (options.loop) {
+            p.push(p[0]);
+          }
+          for (const next of p) {
+            if (!running()) {
+              break;
+            }
+            const p1 = last ? geoToPosition(last) : void 0;
+            const p2 = geoToPosition(next);
+            const ip = geoInterpolate(p1 || p2, p2);
+            const distance = geoDistance(p1 || p2, p2);
+            const r1 = p1 ? positionToRotation(p1, tilt) : controller.projection.rotate();
+            const r2 = positionToRotation(p2, tilt);
+            const iv = versor2.interpolate(r1, r2);
+            const transition2 = selection.transition(TRANSITION_NAME).duration(Math.max(options.duration ?? defaultDuration, distance * 2e3)).tween("render", () => (t2) => {
+              const t1 = Math.max(0, Math.min(1, t2 * 2 - 1));
+              const t22 = Math.min(1, t2 * 2);
+              context.save();
+              {
+                context.beginPath();
+                context.strokeStyle = options?.styles?.arc?.strokeStyle ?? "yellow";
+                context.lineWidth = (options?.styles?.arc?.lineWidth ?? 1.5) * (controller?.zoom ?? 1);
+                context.setLineDash(options?.styles?.arc?.lineDash ?? []);
+                path({
+                  type: "LineString",
+                  coordinates: [
+                    ip(t1),
+                    ip(t22)
+                  ]
+                });
+                context.stroke();
+                context.beginPath();
+                context.fillStyle = options?.styles?.cursor?.fillStyle ?? "orange";
+                path.pointRadius((options?.styles?.cursor?.pointRadius ?? 2) * (controller?.zoom ?? 1));
+                path({
+                  type: "Point",
+                  coordinates: ip(t22)
+                });
+                context.fill();
+              }
+              context.restore();
+              projection.rotate(iv(t2));
+              setRotation(projection.rotate());
+            });
+            await transition2.end();
+            last = next;
+          }
+        } catch {
+        } finally {
+          setRunning(false);
+        }
+      });
+      onCleanup3(() => {
+        clearTimeout(t);
+        selection.interrupt(TRANSITION_NAME);
+      });
+    }
+  });
+  return {
+    running,
+    setRunning
+  };
+};
+
+// src/components/Toolbar/Controls.tsx
+import { jsx as _jsx2, jsxs as _jsxs } from "solid-js/jsx-runtime";
+var controlPositions = {
+  topleft: "top-2 left-2",
+  topright: "top-2 right-2",
+  bottomleft: "bottom-2 left-2",
+  bottomright: "bottom-2 right-2"
+};
+var ZoomControls = (props) => {
+  return /* @__PURE__ */ _jsxs("div", {
+    class: `flex flex-row gap-2 ${props.class ?? ""}`,
+    children: [
+      /* @__PURE__ */ _jsx2("button", {
+        type: "button",
+        class: "dx-button dx-focus-ring w-10 h-10 min-bs-[2.5rem] pli-3 rounded-sm flex items-center justify-center",
+        onClick: () => props.onAction?.("zoom-in"),
+        title: "Zoom in",
+        children: /* @__PURE__ */ _jsx2("span", {
+          class: "text-xl",
+          children: "+"
+        })
+      }),
+      /* @__PURE__ */ _jsx2("button", {
+        type: "button",
+        class: "dx-button dx-focus-ring w-10 h-10 min-bs-[2.5rem] pli-3 rounded-sm flex items-center justify-center",
+        onClick: () => props.onAction?.("zoom-out"),
+        title: "Zoom out",
+        children: /* @__PURE__ */ _jsx2("span", {
+          class: "text-xl",
+          children: "\u2212"
+        })
+      })
+    ]
+  });
+};
+var ActionControls = (props) => {
+  return /* @__PURE__ */ _jsxs("div", {
+    class: `flex flex-row gap-2 ${props.class ?? ""}`,
+    children: [
+      /* @__PURE__ */ _jsx2("button", {
+        type: "button",
+        class: "dx-button dx-focus-ring w-10 h-10 min-bs-[2.5rem] pli-3 rounded-sm flex items-center justify-center",
+        onClick: () => props.onAction?.("start"),
+        title: "Start",
+        children: /* @__PURE__ */ _jsx2("span", {
+          class: "text-xl",
+          children: "\u25B6"
+        })
+      }),
+      /* @__PURE__ */ _jsx2("button", {
+        type: "button",
+        class: "dx-button dx-focus-ring w-10 h-10 min-bs-[2.5rem] pli-3 rounded-sm flex items-center justify-center",
+        onClick: () => props.onAction?.("toggle"),
+        title: "Toggle",
+        children: /* @__PURE__ */ _jsx2("span", {
+          class: "text-xl",
+          children: "\u{1F30D}"
+        })
+      })
+    ]
+  });
+};
+
+// src/components/Globe/Globe.tsx
+var defaultStyles = {
+  light: {
+    background: {
+      fillStyle: "#EEE"
+    },
+    water: {
+      fillStyle: "#555"
+    },
+    land: {
+      fillStyle: "#999"
+    },
+    line: {
+      strokeStyle: "darkred"
+    },
+    point: {
+      fillStyle: "#111111",
+      strokeStyle: "#111111",
+      strokeWidth: 1,
+      pointRadius: 0.5
+    }
+  },
+  dark: {
+    background: {
+      fillStyle: "#111111"
+    },
+    water: {
+      fillStyle: "#123E6A"
+    },
+    land: {
+      fillStyle: "#032153"
+    },
+    line: {
+      strokeStyle: "#111111"
+    },
+    point: {
+      fillStyle: "#111111",
+      strokeStyle: "#111111",
+      strokeWidth: 1,
+      pointRadius: 0.5
+    }
+  }
+};
+var projectionMap = {
+  orthographic: geoOrthographic,
+  mercator: geoMercator,
+  "transverse-mercator": geoTransverseMercator
+};
+var getProjection = (type = "orthographic") => {
+  if (typeof type === "string") {
+    const constructor = projectionMap[type] ?? geoOrthographic;
+    return constructor();
+  }
+  return type ?? geoOrthographic();
+};
+var GlobeRoot = (props) => {
+  let containerRef;
+  const [size, setSize] = createSignal4({
+    width: 0,
+    height: 0
+  });
+  createResizeObserver(() => containerRef, ({ width, height }) => {
+    setSize({
+      width,
+      height
+    });
+  });
+  return /* @__PURE__ */ _jsx3("div", {
+    ref: containerRef,
+    class: `relative flex grow overflow-hidden ${props.class ?? ""}`,
+    ...props,
+    children: /* @__PURE__ */ _jsx3(GlobeContextProvider, {
+      size: size(),
+      ...props,
+      children: props.children
+    })
+  });
+};
+var GlobeCanvas = (props) => {
+  const themeMode = "dark";
+  const styles = createMemo(() => props.styles ?? defaultStyles[themeMode]);
+  const [canvas, setCanvas] = createSignal4(null);
+  const projection = createMemo(() => getProjection(props.projection));
+  const layers = createMemo(() => {
+    return timer(() => createLayers(props.topology, props.features, styles()));
+  });
+  const { size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation } = useGlobeContext();
+  let zoomValue = zoom();
+  let zooming = false;
+  createEffect5(() => {
+  });
+  createEffect5(() => {
+    const c = center();
+    if (c) {
+      setZoom(1);
+      setRotation(positionToRotation(geoToPosition(c)));
+    }
+  });
+  createEffect5(() => {
+    const canvasEl = canvas();
+    if (canvasEl && props.ref) {
+      const controller = {
+        canvas: canvasEl,
+        projection: projection(),
+        get zoom() {
+          return zoomValue;
+        },
+        translation,
+        rotation,
+        setZoom: (s) => {
+          if (typeof s === "function") {
+            const is = interpolateNumber(zoomValue, s(zoomValue));
+            transition().ease(zooming ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => {
+              const newZoom = is(t);
+              zoomValue = newZoom;
+              setZoom(newZoom);
+            }).on("end", () => {
+              zooming = false;
+            });
+          } else {
+            zoomValue = s;
+            setZoom(s);
+          }
+        },
+        setTranslation,
+        setRotation
+      };
+      props.ref(controller);
+    }
+  });
+  const generator = createMemo(() => {
+    const canvasEl = canvas();
+    const proj = projection();
+    return canvasEl && proj && geoPath2(proj, canvasEl.getContext("2d", {
+      alpha: false
+    }));
+  });
+  createEffect5(() => {
+    const canvasEl = canvas();
+    const proj = projection();
+    const gen = generator();
+    const z = zoom();
+    const t = translation();
+    const r = rotation();
+    const s = size();
+    if (canvasEl && proj && gen) {
+      timer(() => {
+        proj.scale(Math.min(s.width, s.height) / 2 * z).translate([
+          s.width / 2 + (t?.x ?? 0),
+          s.height / 2 + (t?.y ?? 0)
+        ]).rotate(r ?? [
+          0,
+          0,
+          0
+        ]);
+        renderLayers(gen, layers(), z, styles());
+      });
+    }
+  });
+  return /* @__PURE__ */ _jsx3(Show, {
+    when: size().width > 0 && size().height > 0,
+    children: /* @__PURE__ */ _jsx3("canvas", {
+      ref: setCanvas,
+      width: size().width,
+      height: size().height
+    })
+  });
+};
+var GlobeDebug = (props) => {
+  const { size, zoom, translation, rotation } = useGlobeContext();
+  return /* @__PURE__ */ _jsx3("div", {
+    class: `z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded ${controlPositions[props.position ?? "topleft"]}`,
+    children: /* @__PURE__ */ _jsx3("pre", {
+      class: "font-mono text-xs text-green-700",
+      children: JSON.stringify({
+        size,
+        zoom: zoom(),
+        translation: translation(),
+        rotation: rotation()
+      }, null, 2)
+    })
+  });
+};
+var GlobePanel = (props) => {
+  return /* @__PURE__ */ _jsx3("div", {
+    class: `z-10 absolute overflow-hidden ${controlPositions[props.position ?? "topleft"]} ${props.class ?? ""}`,
+    children: props.children
+  });
+};
+var CustomControl = (props) => {
+  return /* @__PURE__ */ _jsx3("div", {
+    class: `z-10 absolute overflow-hidden ${controlPositions[props.position]}`,
+    children: props.children
+  });
+};
+var GlobeZoom = (props) => /* @__PURE__ */ _jsx3(CustomControl, {
+  position: props.position ?? "bottomleft",
+  children: /* @__PURE__ */ _jsx3(ZoomControls, {
+    onAction: props.onAction
+  })
+});
+var GlobeAction = (props) => /* @__PURE__ */ _jsx3(CustomControl, {
+  position: props.position ?? "bottomright",
+  children: /* @__PURE__ */ _jsx3(ActionControls, {
+    onAction: props.onAction
+  })
+});
+var Globe = {
+  Root: GlobeRoot,
+  Canvas: GlobeCanvas,
+  Zoom: GlobeZoom,
+  Action: GlobeAction,
+  Debug: GlobeDebug,
+  Panel: GlobePanel
+};
+
+// src/components/Map/Map.tsx
+import { jsx as _jsx4, jsxs as _jsxs2 } from "solid-js/jsx-runtime";
+import "leaflet/dist/leaflet.css";
+import L, { latLngBounds } from "leaflet";
+import { Show as Show2, createContext as createContext2, createEffect as createEffect6, createSignal as createSignal5, onCleanup as onCleanup4, onMount, useContext as useContext2 } from "solid-js";
+var defaults2 = {
+  center: {
+    lat: 51,
+    lng: 0
+  },
+  zoom: 4
+};
+var MapContext = createContext2();
+var useMapContext = (displayName) => {
+  const context = useContext2(MapContext);
+  if (!context) {
+    throw new Error(`${displayName} must be used within Map.Root`);
+  }
+  return context;
+};
+var MapRoot = (props) => {
+  let mapContainer;
+  const [map, setMap] = createSignal5(null);
+  const [attention, setAttention] = createSignal5(false);
+  onMount(() => {
+    if (!mapContainer) return;
+    const leafletMap = L.map(mapContainer, {
+      center: props.center ?? defaults2.center,
+      zoom: props.zoom ?? defaults2.zoom,
+      attributionControl: false,
+      zoomControl: false,
+      scrollWheelZoom: props.scrollWheelZoom ?? true,
+      doubleClickZoom: props.doubleClickZoom ?? true,
+      touchZoom: props.touchZoom ?? true
+    });
+    setMap(leafletMap);
+    if (props.ref) {
+      props.ref({
+        setCenter: (center, zoom) => {
+          leafletMap.setView(center, zoom);
+        },
+        setZoom: (cb) => {
+          leafletMap.setZoom(cb(leafletMap.getZoom()));
+        }
+      });
+    }
+    onCleanup4(() => {
+      leafletMap.remove();
+    });
+  });
+  createEffect6(() => {
+    const leafletMap = map();
+    if (!leafletMap) return;
+    if (attention()) {
+      leafletMap.scrollWheelZoom.enable();
+    } else {
+      leafletMap.scrollWheelZoom.disable();
+    }
+  });
+  return /* @__PURE__ */ _jsxs2(MapContext.Provider, {
+    value: {
+      map,
+      attention,
+      setAttention,
+      onChange: props.onChange
+    },
+    children: [
+      /* @__PURE__ */ _jsx4("div", {
+        ref: mapContainer,
+        class: `group relative grid h-full w-full bg-gray-100 dark:bg-gray-900 ${props.class ?? ""}`,
+        style: {
+          "z-index": "0"
+        }
+      }),
+      /* @__PURE__ */ _jsx4(Show2, {
+        when: map(),
+        children: props.children
+      })
+    ]
+  });
+};
+var MapTiles = () => {
+  const { map, onChange, attention } = useMapContext(MapTiles.name);
+  let tileLayer = null;
+  createEffect6(() => {
+    const leafletMap = map();
+    if (!leafletMap) return;
+    const att = attention();
+    tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      detectRetina: true,
+      keepBuffer: 4,
+      className: `dark:grayscale dark:invert ${att ? "" : "opacity-80"}`
+    });
+    tileLayer.addTo(leafletMap);
+    leafletMap.on("zoomstart", (ev) => {
+      onChange?.({
+        center: ev.target.getCenter(),
+        zoom: ev.target.getZoom()
+      });
+    });
+    onCleanup4(() => {
+      if (tileLayer) {
+        tileLayer.remove();
+        tileLayer = null;
+      }
+    });
+  });
+  createEffect6(() => {
+    const att = attention();
+    if (tileLayer) {
+      const container = tileLayer.getContainer();
+      if (container) {
+        container.className = `dark:grayscale dark:invert ${att ? "" : "opacity-80"}`;
+      }
+    }
+  });
+  return null;
+};
+var MapMarkers = (props) => {
+  const { map } = useMapContext(MapMarkers.name);
+  const leafletMarkers = [];
+  let lastMarkerIds = /* @__PURE__ */ new Set();
+  onCleanup4(() => {
+    leafletMarkers.forEach((marker) => marker.remove());
+    leafletMarkers.length = 0;
+  });
+  createEffect6(() => {
+    const leafletMap = map();
+    if (!leafletMap) return;
+    const markerList = props.markers?.() ?? [];
+    const currentIds = new Set(markerList.map((m) => m.id));
+    if (currentIds.size === lastMarkerIds.size && [
+      ...currentIds
+    ].every((id) => lastMarkerIds.has(id)) && leafletMarkers.length > 0) {
+      return;
+    }
+    leafletMarkers.forEach((marker) => marker.remove());
+    leafletMarkers.length = 0;
+    lastMarkerIds = currentIds;
+    if (markerList.length > 0) {
+      const bounds = latLngBounds(markerList.map((marker) => marker.location));
+      leafletMap.fitBounds(bounds);
+      markerList.forEach(({ title, location }) => {
+        const marker = L.marker(location, {
+          icon: new L.Icon({
+            iconUrl: "https://dxos.network/marker-icon.png",
+            iconRetinaUrl: "https://dxos.network/marker-icon-2x.png",
+            shadowUrl: "https://dxos.network/marker-shadow.png",
+            iconSize: [
+              25,
+              41
+            ],
+            iconAnchor: [
+              12,
+              41
+            ],
+            popupAnchor: [
+              1,
+              -34
+            ],
+            shadowSize: [
+              41,
+              41
+            ]
+          })
+        });
+        if (title) {
+          marker.bindPopup(title);
+        }
+        marker.addTo(leafletMap);
+        leafletMarkers.push(marker);
+      });
+    } else {
+      leafletMap.setView(defaults2.center, defaults2.zoom);
+    }
+  });
+  return null;
+};
+var CustomControl2 = (props) => {
+  const { map: mapAccessor } = useMapContext(CustomControl2.name);
+  let controlContainer;
+  createEffect6(() => {
+    const map = mapAccessor();
+    if (!map || !controlContainer) return;
+    const Control = L.Control.extend({
+      onAdd: () => {
+        const container = L.DomUtil.create("div", `${controlPositions[props.position]} !m-0`);
+        L.DomEvent.disableClickPropagation(container);
+        L.DomEvent.disableScrollPropagation(container);
+        if (controlContainer) {
+          container.appendChild(controlContainer);
+        }
+        return container;
+      }
+    });
+    const control = new Control({
+      position: props.position
+    });
+    control.addTo(map);
+    onCleanup4(() => {
+      control.remove();
+    });
+  });
+  return /* @__PURE__ */ _jsx4("div", {
+    ref: controlContainer,
+    style: {
+      display: "contents"
+    },
+    children: props.children
+  });
+};
+var MapZoom = (props) => /* @__PURE__ */ _jsx4(CustomControl2, {
+  position: props.position ?? "bottomleft",
+  children: /* @__PURE__ */ _jsx4(ZoomControls, {
+    onAction: props.onAction
+  })
+});
+var MapAction = (props) => /* @__PURE__ */ _jsx4(CustomControl2, {
+  position: props.position ?? "bottomright",
+  children: /* @__PURE__ */ _jsx4(ActionControls, {
+    onAction: props.onAction
+  })
+});
+var Map = {
+  Root: MapRoot,
+  Tiles: MapTiles,
+  Markers: MapMarkers,
+  Zoom: MapZoom,
+  Action: MapAction
+};
+
+// src/translations.ts
+var translationKey = "@dxos/react-ui-geo";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "zoom in icon button": "Zoom in",
+        "zoom out icon button": "Zoom out",
+        "start icon button": "Start",
+        "toggle icon button": "Toggle"
+      }
+    }
+  }
+];
+export {
+  ActionControls,
+  Globe,
+  GlobeContextProvider,
+  Map,
+  ZoomControls,
+  closestPoint,
+  controlPositions,
+  createLayers,
+  geoCircle,
+  geoInertiaDrag,
+  geoLine,
+  geoPoint,
+  geoToPosition,
+  getDistance,
+  loadTopology,
+  positionToRotation,
+  renderLayers,
+  restrictAxis,
+  timer,
+  translationKey,
+  translations,
+  useDrag,
+  useGlobeContext,
+  useGlobeZoomHandler,
+  useMapZoomHandler,
+  useSpinner,
+  useTour
+};
+//# sourceMappingURL=index.mjs.map