@local-logic/maps 0.0.23 → 0.0.24

package/dist/index-DJx0avMT.js

@@ -0,0 +1,75 @@
+import { jsxs as g, jsx as M } from "react/jsx-runtime";
+import { useState as v, useRef as y, useCallback as B, useEffect as c } from "react";
+import { M as L, N as P, u as k } from "./scale-control-Dsir9fWY.js";
+import { u as b, D as p, a as E, m as A } from "./index-Ct-3yYUx.js";
+import { t as Z } from "./index-DscDx7HE.js";
+const _ = () => {
+  const { current: e } = k(), { markerPoints: o, setZoom: i, mapPadding: m } = b(), [n, f] = v(void 0), s = y(void 0), r = B(() => {
+    e && i(e.getZoom());
+  }, [e, i]);
+  return c(() => (r(), e?.on("zoom", r), () => {
+    e?.off("zoom", r);
+  }), [e, r]), c(() => {
+    if (!e || typeof o > "u" || o.length === 0)
+      return;
+    const t = Z(A(o));
+    (!s.current || !t.every((a, u) => a === s.current?.[u])) && (s.current = t, f(t));
+  }, [e, o]), c(() => {
+    if (!e || typeof n > "u")
+      return;
+    const [t, a, u, d] = n, l = (u - t) * 0.05 || 1e-3, x = (d - a) * 0.05 || 1e-3;
+    e.fitBounds(
+      [
+        [t - l, a - x],
+        [u + l, d + x]
+      ],
+      {
+        // Mapbox seems to retain padding, thus further calls
+        // to map.getBounds() include the padding and make calculations
+        // harder. Explicitly turning this off.
+        retainPadding: !1,
+        padding: m,
+        maxZoom: 17,
+        duration: 700
+      }
+    );
+  }, [e, n, m]), null;
+};
+function C({ children: e }) {
+  const {
+    mapProvider: o,
+    center: i,
+    zoom: m = p.zoom,
+    minZoom: n,
+    maxZoom: f,
+    pitch: s = p.pitch,
+    bearing: r = p.bearing,
+    cooperativeGestures: t = p.cooperativeGestures,
+    zoomPosition: a
+  } = b();
+  return o.name !== "mapbox" ? null : /* @__PURE__ */ g(
+    L,
+    {
+      mapboxAccessToken: o.apiKey,
+      initialViewState: {
+        ...i,
+        zoom: m,
+        pitch: s,
+        bearing: r
+      },
+      cooperativeGestures: t,
+      minZoom: n,
+      maxZoom: f,
+      mapStyle: `mapbox://styles/${o.theme || E.mapbox}`,
+      interactiveLayerIds: ["road-label", "waterway-label"],
+      children: [
+        /* @__PURE__ */ M(_, {}),
+        a && /* @__PURE__ */ M(P, { position: a }),
+        e
+      ]
+    }
+  );
+}
+export {
+  C as default
+};

package/dist/{index-B85VZGVP.js → index-DOkeQ2e4.js}

@@ -1,8 +1,8 @@
 import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { a as k } from "./scale-control-jBKptTbw.js";
+import { a as k } from "./scale-control-Dsir9fWY.js";
 import "react";
-import { u, M } from "./index-CN_dNOir.js";
-import { C as g, c as C, M as b } from "./index-CmajMf1d.js";
+import { u, M } from "./index-Ct-3yYUx.js";
+import { C as g, c as C, M as b } from "./index-DntG4mBo.js";
 function _({
   clusters: n,
   colors: r,

package/dist/{index-ufLC1PLO.js → index-DbyYOXrb.js}

@@ -1,25 +1,25 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { u as f, a as k } from "./index.modern-B-ChKejQ.js";
-import { u as M, M as g } from "./index-CN_dNOir.js";
-import { C, c as v, M as I } from "./index-CmajMf1d.js";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { useMap as k, AdvancedMarker as u } from "@vis.gl/react-google-maps";
+import { u as M, M as g } from "./index-Ct-3yYUx.js";
+import { C, c as v, M as I } from "./index-DntG4mBo.js";
 function x({
-  clusters: t,
+  clusters: a,
   colors: o,
-  clusterIcon: s,
-  onClick: n,
+  clusterIcon: n,
+  onClick: s,
   doesSuperclusterContainActiveMarker: p
 }) {
-  f();
+  k();
   const { activeMarker: d, zoom: c } = M(), m = (e) => () => {
-    e.properties.disableClick || n?.(e);
+    e.properties.disableClick || s?.(e);
   };
-  return t?.map((e, l) => {
-    const i = e.geometry.coordinates[0], a = e.geometry.coordinates[1];
-    return /* @__PURE__ */ u(
-      k,
+  return a?.map((e, l) => {
+    const i = e.geometry.coordinates[0], t = e.geometry.coordinates[1];
+    return /* @__PURE__ */ f(
+      u,
       {
         position: {
-          lat: a,
+          lat: t,
           lng: i
         },
         onClick: m(e),
@@ -28,7 +28,7 @@ function x({
             C,
             {
               colors: o,
-              icon: s,
+              icon: n,
               isActive: p(e.properties.cluster_id)
             }
           ),
@@ -48,7 +48,7 @@ function x({
           )
         ]
       },
-      `map-marker-${i}-${a}-${l}`
+      `map-marker-${i}-${t}-${l}`
     );
   });
 }

package/dist/index-DntG4mBo.js

@@ -0,0 +1,75 @@
+import { jsx as r, jsxs as l, Fragment as d } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { u as h, M as n } from "./index-Ct-3yYUx.js";
+import { MapPinIcon as g } from "@phosphor-icons/react";
+const a = `
+  group/marker cursor-pointer rounded-full
+  relative h-7 w-7 flex items-center justify-center
+  text-base-white ring-1 ring-inset
+  transition-colors
+
+  bg-[var(--background,theme(colors.base.white))]
+  ring-[var(--fill,theme(colors.primary.100))]
+
+  hover:bg-[var(--fill,theme(colors.primary.100))]
+
+  data-[is-zoomed-out=true]:bg-[var(--fill,theme(colors.primary.100))]
+  data-[is-zoomed-out=true]:h-4
+  data-[is-zoomed-out=true]:w-4
+
+  data-[is-active=true]:bg-[var(--fill,theme(colors.primary.100))]
+`, m = `
+  m-auto transition-all w-4 h-4 
+
+  fill-[var(--fill,theme(colors.primary.100))]
+  group-hover/marker:fill-[var(--background,theme(colors.base.white))]
+
+  group-data-[is-zoomed-out=true]/marker:hidden
+
+  group-data-[is-active=true]/marker:fill-[var(--background,theme(colors.base.white))]
+`;
+function v({ icon: e }) {
+  return typeof e < "u" ? /* @__PURE__ */ r(e, { className: m }) : /* @__PURE__ */ r(g, { className: m });
+}
+const p = `
+  relative flex
+`, c = `
+  -ml-6 -z-10 last:-z-20
+`;
+function M({
+  isActive: e = !1,
+  colors: t,
+  icon: u
+}) {
+  const { zoom: o, mapProvider: i } = h(), s = f(() => i.name === "google" ? o - 1 < n + 1 : o < n, [o, i]);
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: p,
+      style: {
+        "--background": t?.background,
+        "--fill": t?.fill
+      },
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: a,
+            "data-is-zoomed-out": s,
+            "data-is-active": e,
+            children: /* @__PURE__ */ r(v, { icon: u })
+          }
+        ),
+        !s && /* @__PURE__ */ l(d, { children: [
+          /* @__PURE__ */ r("div", { className: `${a} ${c}` }),
+          /* @__PURE__ */ r("div", { className: `${a} ${c}` })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  M as C,
+  v as M,
+  a as c
+};

package/dist/{index-CFomI3Il.js → index-DscDx7HE.js}

@@ -1,13 +1,13 @@
 function g(t, o, f) {
   if (t !== null)
-    for (var i, n, b, h, p, r, c, u = 0, s = 0, C, v = t.type, M = v === "FeatureCollection", k = v === "Feature", w = M ? t.features.length : 1, e = 0; e < w; e++) {
-      c = M ? t.features[e].geometry : k ? t.geometry : t, C = c ? c.type === "GeometryCollection" : !1, p = C ? c.geometries.length : 1;
-      for (var P = 0; P < p; P++) {
+    for (var i, n, y, h, P, r, b, u = 0, s = 0, v, p = t.type, M = p === "FeatureCollection", k = p === "Feature", w = M ? t.features.length : 1, e = 0; e < w; e++) {
+      b = M ? t.features[e].geometry : k ? t.geometry : t, v = b ? b.type === "GeometryCollection" : !1, P = v ? b.geometries.length : 1;
+      for (var C = 0; C < P; C++) {
         var l = 0, a = 0;
-        if (h = C ? c.geometries[P] : c, h !== null) {
+        if (h = v ? b.geometries[C] : b, h !== null) {
           r = h.coordinates;
-          var y = h.type;
-          switch (u = 0, y) {
+          var c = h.type;
+          switch (u = 0, c) {
             case null:
               break;
             case "Point":
@@ -32,9 +32,9 @@ function g(t, o, f) {
                   a
                 ) === !1)
                   return !1;
-                s++, y === "MultiPoint" && l++;
+                s++, c === "MultiPoint" && l++;
               }
-              y === "LineString" && l++;
+              c === "LineString" && l++;
               break;
             case "Polygon":
             case "MultiLineString":
@@ -50,16 +50,16 @@ function g(t, o, f) {
                     return !1;
                   s++;
                 }
-                y === "MultiLineString" && l++, y === "Polygon" && a++;
+                c === "MultiLineString" && l++, c === "Polygon" && a++;
               }
-              y === "Polygon" && l++;
+              c === "Polygon" && l++;
               break;
             case "MultiPolygon":
               for (i = 0; i < r.length; i++) {
                 for (a = 0, n = 0; n < r[i].length; n++) {
-                  for (b = 0; b < r[i][n].length - u; b++) {
+                  for (y = 0; y < r[i][n].length - u; y++) {
                     if (o(
-                      r[i][n][b],
+                      r[i][n][y],
                       s,
                       e,
                       l,
@@ -93,6 +93,7 @@ function G(t, o = {}) {
     f[0] > i[0] && (f[0] = i[0]), f[1] > i[1] && (f[1] = i[1]), f[2] < i[0] && (f[2] = i[0]), f[3] < i[1] && (f[3] = i[1]);
   }), f;
 }
+var S = G;
 export {
-  G as b
+  S as t
 };

package/dist/{index-DfhwDiOS.js → index-GGtrKiJn.js}

@@ -1,21 +1,21 @@
-import { jsx as c, Fragment as x } from "react/jsx-runtime";
+import { jsx as f, Fragment as x } from "react/jsx-runtime";
 import * as $ from "react";
 import { useContext as S, useRef as k, useState as b, useMemo as g, useEffect as w, cloneElement as j } from "react";
-import { b as C, d as u } from "./logo-control-VgN6MEKI.js";
+import { b as C, d as u } from "./logo-control-CHapR1Dt.js";
 import { g as I } from "./utils-DJ13veBM.js";
 function s(t, e) {
   if (!t)
     throw new Error(e);
 }
 let M = 0;
-function z(t, e, n) {
+function R(t, e, n) {
   if (t.style && t.style._loaded) {
     const a = { ...n };
     return delete a.id, delete a.children, t.addSource(e, a), t.getSource(e);
   }
   return null;
 }
-function A(t, e, n) {
+function z(t, e, n) {
   s(e.id === n.id, "source id changed"), s(e.type === n.type, "source type changed");
   let a = "", r = 0;
   for (const o in e)
@@ -45,7 +45,7 @@ function A(t, e, n) {
         console.warn(`Unable to update <Source> prop: ${a}`);
     }
 }
-function E(t) {
+function A(t) {
   const e = S(C).map.getMap(), n = k(t), [, a] = b(0), r = g(() => t.id || `jsx-source-${M++}`, []);
   w(() => {
     if (e) {
@@ -54,39 +54,39 @@ function E(t) {
         if (e.off("styledata", o), e.style && e.style._loaded && e.getSource(r)) {
           const y = e.getStyle()?.layers;
           if (y)
-            for (const d of y)
-              d.source === r && e.removeLayer(d.id);
+            for (const c of y)
+              c.source === r && e.removeLayer(c.id);
           e.removeSource(r);
         }
       };
     }
   }, [e]);
   let l = e && e.style && e.getSource(r);
-  return l ? A(l, t, n.current) : l = z(e, r, t), n.current = t, l && $.Children.map(t.children, (o) => o && j(o, {
+  return l ? z(l, t, n.current) : l = R(e, r, t), n.current = t, l && $.Children.map(t.children, (o) => o && j(o, {
     source: r
   })) || null;
 }
-function F(t, e, n, a) {
+function E(t, e, n, a) {
   if (s(n.id === a.id, "layer id changed"), s(n.type === a.type, "layer type changed"), n.type === "custom" || a.type === "custom")
     return;
-  const { layout: r = {}, paint: l = {}, filter: o, minzoom: y, maxzoom: d, beforeId: m } = n;
+  const { layout: r = {}, paint: l = {}, filter: o, minzoom: y, maxzoom: c, beforeId: m } = n;
   if (m !== a.beforeId && t.moveLayer(e, m), r !== a.layout) {
-    const f = a.layout || {};
+    const d = a.layout || {};
     for (const i in r)
-      u(r[i], f[i]) || t.setLayoutProperty(e, i, r[i]);
-    for (const i in f)
+      u(r[i], d[i]) || t.setLayoutProperty(e, i, r[i]);
+    for (const i in d)
       r.hasOwnProperty(i) || t.setLayoutProperty(e, i, void 0);
   }
   if (l !== a.paint) {
-    const f = a.paint || {};
+    const d = a.paint || {};
     for (const i in l)
-      u(l[i], f[i]) || t.setPaintProperty(e, i, l[i]);
-    for (const i in f)
+      u(l[i], d[i]) || t.setPaintProperty(e, i, l[i]);
+    for (const i in d)
       l.hasOwnProperty(i) || t.setPaintProperty(e, i, void 0);
   }
-  u(o, a.filter) || t.setFilter(e, o), (y !== a.minzoom || d !== a.maxzoom) && t.setLayerZoomRange(e, y, d);
+  u(o, a.filter) || t.setFilter(e, o), (y !== a.minzoom || c !== a.maxzoom) && t.setLayerZoomRange(e, y, c);
 }
-function R(t, e, n) {
+function F(t, e, n) {
   if (t.style && t.style._loaded && (!("source" in n) || t.getSource(n.source))) {
     const a = { ...n, id: e };
     delete a.beforeId, t.addLayer(a, n.beforeId);
@@ -104,12 +104,12 @@ function h(t) {
     }
   }, [e]), e && e.style && e.getLayer(r))
     try {
-      F(e, r, t, n.current);
+      E(e, r, t, n.current);
     } catch (o) {
       console.warn(o);
     }
   else
-    R(e, r, t);
+    F(e, r, t);
   return n.current = t, null;
 }
 function L(t, e, n) {
@@ -133,7 +133,7 @@ function T({ sources: t }) {
     ...n,
     geoJson: n.geometry ? I(n.geometry, n.type) : null
   })), [t]);
-  return e?.length === 0 ? null : /* @__PURE__ */ c(x, { children: e?.map((n) => /* @__PURE__ */ c("div", { children: n.geoJson && /* @__PURE__ */ c(E, { id: n.key, type: "geojson", data: n.geoJson, children: n.layer && (Array.isArray(n.layer) ? n.layer.map((a, r) => /* @__PURE__ */ c(
+  return e?.length === 0 ? null : /* @__PURE__ */ f(x, { children: e?.map((n) => /* @__PURE__ */ f("div", { children: n.geoJson && /* @__PURE__ */ f(A, { id: n.key, type: "geojson", data: n.geoJson, children: n.layer && (Array.isArray(n.layer) ? n.layer.map((a, r) => /* @__PURE__ */ f(
     h,
     {
       id: `${n.key}-${r}`,
@@ -141,7 +141,7 @@ function T({ sources: t }) {
       paint: L(a.type, a.color, n.type)
     },
     `${n.key}-${r}`
-  )) : /* @__PURE__ */ c(
+  )) : /* @__PURE__ */ f(
     h,
     {
       id: n.key,

package/dist/index-Y5T20C1G.js

@@ -0,0 +1,92 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useRef as d, useEffect as M } from "react";
+import { u as z, P as D } from "./scale-control-Dsir9fWY.js";
+import { u as H, P as T } from "./index-Ct-3yYUx.js";
+import { c as j, m as A } from "./styles-BNaT0cTi.js";
+function Z({
+  latitude: h,
+  longitude: l,
+  anchor: B,
+  offset: C = [0, -35],
+  onClose: a,
+  children: O
+}) {
+  const p = d(null), { current: n } = z(), { activeMarker: e, clusterPoints: u, mapPadding: t } = H(), m = d(u), g = d(e);
+  return M(() => {
+    const i = m.current !== u, o = g.current === e;
+    i && o && typeof e < "u" && a?.(), m.current = u, g.current = e;
+  }, [u, e, a]), M(() => {
+    const i = p?.current;
+    let o = { width: 0, height: 0 };
+    const x = () => {
+      if (!n || !i || typeof e > "u")
+        return;
+      const c = n.getBounds(), P = n.getCenter(), f = n.getCanvas(), r = i.getElement()?.getBoundingClientRect();
+      if (!c || !r)
+        return;
+      const y = Math.abs(r.width - o.width), I = Math.abs(r.height - o.height);
+      if (o.width !== 0 && y < T && I < T)
+        return;
+      o = { width: r.width, height: r.height };
+      const R = f.getBoundingClientRect(), N = {
+        width: f.clientWidth,
+        height: f.clientHeight,
+        top: R.top,
+        left: R.left
+      }, S = {
+        latitude: P.lat,
+        longitude: P.lng
+      }, _ = {
+        left: c.getWest(),
+        right: c.getEast(),
+        top: c.getNorth(),
+        bottom: c.getSouth()
+      }, k = {
+        left: t.left || 0,
+        right: t.right || 0,
+        top: t.top || 0,
+        bottom: t.bottom || 0
+      };
+      A(r, S, _, N, k, (w) => {
+        n.easeTo({
+          center: [w.longitude, w.latitude],
+          duration: 500
+        });
+      });
+    };
+    let s;
+    const v = new ResizeObserver(() => {
+      s && clearTimeout(s), s = window.setTimeout(() => {
+        x();
+      }, 100);
+    }), b = i?.getElement();
+    return b && v.observe(b), () => {
+      s && clearTimeout(s), v.disconnect();
+    };
+  }, [
+    n,
+    p,
+    e,
+    t.top,
+    t.bottom,
+    t.left,
+    t.right
+  ]), typeof h > "u" || typeof l > "u" ? null : /* @__PURE__ */ E(
+    D,
+    {
+      ref: p,
+      className: "mapbox-popup",
+      focusAfterOpen: !0,
+      latitude: h,
+      longitude: l,
+      anchor: B,
+      offset: C,
+      onClose: a,
+      closeButton: !1,
+      children: /* @__PURE__ */ E("div", { className: j, children: O })
+    }
+  );
+}
+export {
+  Z as default
+};

package/dist/{index-CiWKwaC4.js → index-eWv3le07.js}

@@ -1,18 +1,19 @@
 import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import { t as a, b as o, S as r, o as s, i as c, c as d } from "./styles-BR85tnqI.js";
-import { a as l } from "./scale-control-jBKptTbw.js";
+import { t as o, b as a, S as r, i as s, c } from "./styles-BhmqUA5C.js";
+import { a as d } from "./scale-control-Dsir9fWY.js";
 import "react";
+import { HouseLineIcon as l } from "@phosphor-icons/react";
 function b({ marker: t, className: n }) {
   return /* @__PURE__ */ e(
-    l,
+    d,
     {
       anchor: "bottom",
       longitude: t.longitude,
       latitude: t.latitude,
-      className: a(d.trim(), n),
+      className: o(c.trim(), n),
       children: [
-        /* @__PURE__ */ i("span", { id: "center-pin-background", className: o, children: /* @__PURE__ */ i(r, {}) }),
-        /* @__PURE__ */ i(s, { id: "center-pin-icon", className: c })
+        /* @__PURE__ */ i("span", { id: "center-pin-background", className: a, children: /* @__PURE__ */ i(r, {}) }),
+        /* @__PURE__ */ i(l, { id: "center-pin-icon", className: s })
       ]
     },
     `center-pin-marker-${t.longitude}-${t.latitude}`

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { i as c } from "./index-CN_dNOir.js";
+import { i as c } from "./index-Ct-3yYUx.js";
 export {
   c as LocalLogicMap
 };