@nika-js/onlymap 0.6.0 → 0.6.1

package/dist/react.js

@@ -1,28 +1,28 @@
 var Ee = Object.defineProperty;
 var Re = (e, t, s) => t in e ? Ee(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
-var ne = (e, t, s) => Re(e, typeof t != "symbol" ? t + "" : t, s);
-import { jsxs as J, jsx as E } from "react/jsx-runtime";
-import { createContext as xe, useContext as Fe, forwardRef as Ce, useRef as h, useState as L, useId as le, useCallback as oe, useMemo as P, useLayoutEffect as se, useEffect as x, useImperativeHandle as Pe, useSyncExternalStore as ce } from "react";
-import { MANAGED_SLOTS as Te, slotContainerStyle as ke, FOLD_SIDES as A, MapController as Me, parseWidgetStyle as Le, foldToggleSlot as $e, foldToggleStyle as je, foldPanelStyle as De, foldDrawerStyle as _e, resolveFoldBreakpointPx as Ae, shouldFoldAtWidth as Ie, DEFAULT_FOLD_BREAKPOINT_PX as ze, resolveSlot as Ke, foldSideForSlot as He, isStoreToken as Ne } from "@nika-js/onlymap";
+var oe = (e, t, s) => Re(e, typeof t != "symbol" ? t + "" : t, s);
+import { jsxs as X, jsx as w } from "react/jsx-runtime";
+import { createContext as xe, useContext as Fe, forwardRef as Te, useRef as h, useState as j, useId as ce, useCallback as se, useMemo as M, useLayoutEffect as ie, useEffect as F, useImperativeHandle as Pe, useSyncExternalStore as ue } from "react";
+import { MANAGED_SLOTS as Ce, slotContainerStyle as ke, FOLD_SIDES as A, MapController as Me, parseWidgetStyle as Le, foldToggleSlot as $e, foldToggleStyle as je, foldPanelStyle as De, foldDrawerStyle as _e, resolveFoldBreakpointPx as Ae, shouldFoldAtWidth as Ie, DEFAULT_FOLD_BREAKPOINT_PX as ze, resolveSlot as Ke, foldSideForSlot as He, isStoreToken as Ne } from "@nika-js/onlymap";
 import { createPortal as de } from "react-dom";
-const ue = xe(null);
+const fe = xe(null);
 function W(e) {
-  const t = Fe(ue);
+  const t = Fe(fe);
   if (!t) throw new Error(`[onlymapjs] ${e} must be rendered inside <OmMap>.`);
   return t;
 }
-function U(e, t) {
+function Q(e, t) {
   if (e === t) return !0;
   const s = Object.keys(e ?? {}), o = Object.keys(t ?? {});
   return s.length !== o.length ? !1 : s.every((i) => e[i] === t[i]);
 }
 function We(e, t) {
-  const { props: s, updateTriggers: o, ...i } = e, { props: b, updateTriggers: m, ...a } = t;
-  return U(i, a) && U(s, b) && U(o, m);
+  const { props: s, updateTriggers: o, ...i } = e, { props: y, updateTriggers: m, ...a } = t;
+  return Q(i, a) && Q(s, y) && Q(o, m);
 }
 class qe {
   constructor(t) {
-    ne(this, "descriptors", /* @__PURE__ */ new Map());
+    oe(this, "descriptors", /* @__PURE__ */ new Map());
     this.controller = t;
   }
   upsert(t) {
@@ -33,7 +33,7 @@ class qe {
     this.descriptors.delete(t) && this.controller.setLayers([...this.descriptors.values()]);
   }
 }
-const N = Te, Ve = Object.fromEntries(N.map((e) => [e, ke(e)])), ie = { display: "flex", pointerEvents: "none", order: 2147483647 }, Be = Object.fromEntries(A.map((e) => [e, null]));
+const N = Ce, Ve = Object.fromEntries(N.map((e) => [e, ke(e)])), ae = { display: "flex", pointerEvents: "none", order: 2147483647 }, Be = Object.fromEntries(A.map((e) => [e, null]));
 function Ye(e) {
   const t = e.querySelector(
     'button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
@@ -43,183 +43,183 @@ function Ye(e) {
 function Ge(e, t) {
   return Object.entries(t).some(([s, o]) => o !== void 0 && e[s] !== o);
 }
-const rt = Ce(function(t, s) {
-  const { center: o, zoom: i, pitch: b, bearing: m, basemap: a, basemapKey: l, attribution: g, headless: d, widgetStyle: w, widgetsHidden: v, widgetsFold: p = !0, className: y, style: S, children: $ } = t, R = h(null), C = h(null), [c, T] = L(null), [F, D] = L(null), [j, I] = L(
+const rt = Te(function(t, s) {
+  const { center: o, zoom: i, pitch: y, bearing: m, basemap: a, basemapKey: l, attribution: g, headless: u, widgetStyle: O, widgetsHidden: v, widgetsFold: p = !0, className: b, style: T, children: E } = t, R = h(null), P = h(null), [c, L] = j(null), [C, q] = j(null), [k, D] = j(
     () => Object.fromEntries(N.map((r) => [r, null]))
-  ), [k, fe] = L(!1), [X, me] = L(Be), [ge, be] = L(
+  ), [x, I] = j(!1), [V, me] = j(Be), [ge, ye] = j(
     () => Object.fromEntries(A.map((r) => [r, 0]))
-  ), [ye, q] = L(null), Q = `om-react-fold-${le().replaceAll(":", "")}`, pe = h(new Map(A.map((r) => [r, /* @__PURE__ */ new Set()]))), Z = d ? JSON.stringify(d) : "", z = h({
+  ), [be, B] = j(null), Z = `om-react-fold-${ce().replaceAll(":", "")}`, pe = h(new Map(A.map((r) => [r, /* @__PURE__ */ new Set()]))), ee = u ? JSON.stringify(u) : "", z = h({
     badge: null,
     attribution: null
-  }), he = oe((r) => {
-    D((n) => n === r ? n : r);
-  }, []), ve = P(
+  }), he = se((r) => {
+    q((n) => n === r ? n : r);
+  }, []), ve = M(
     () => Object.fromEntries(
       N.map((r) => [
         r,
         (n) => {
-          I((u) => u[r] === n ? u : { ...u, [r]: n });
+          D((d) => d[r] === n ? d : { ...d, [r]: n });
         }
       ])
     ),
     []
-  ), Se = P(
+  ), Se = M(
     () => Object.fromEntries(
       A.map((r) => [
         r,
         (n) => {
-          me((u) => u[r] === n ? u : { ...u, [r]: n });
+          me((d) => d[r] === n ? d : { ...d, [r]: n });
         }
       ])
     ),
     []
-  ), ee = oe((r, n, u) => {
-    const f = pe.current.get(r), O = f.size;
-    u ? f.add(n) : f.delete(n), f.size !== O && be((_) => ({ ..._, [r]: f.size }));
+  ), te = se((r, n, d) => {
+    const f = pe.current.get(r), S = f.size;
+    d ? f.add(n) : f.delete(n), f.size !== S && ye((_) => ({ ..._, [r]: f.size }));
   }, []);
-  se(() => {
+  ie(() => {
     const r = R.current;
     if (!r) return;
-    let n, u = ze;
+    let n, d = ze;
     const f = (_) => {
-      const G = getComputedStyle(r).getPropertyValue("--om-widget-fold-breakpoint").trim();
-      G !== n && (n = G, u = Ae(G, r)), fe((we) => p && Ie(_, u, we));
+      const U = getComputedStyle(r).getPropertyValue("--om-widget-fold-breakpoint").trim();
+      U !== n && (n = U, d = Ae(U, r)), I((we) => p && Ie(_, d, we));
     };
-    if (f(r.getBoundingClientRect().width || (d ? d === !0 ? 800 : d.width ?? 800 : 0)), typeof ResizeObserver > "u") return;
-    const O = new ResizeObserver(([_]) => f(_.contentRect.width));
-    return O.observe(r), () => O.disconnect();
-  }, [p, Z]), x(() => {
-    (!k || v) && q(null);
-  }, [k, v]);
-  const te = h({ center: o, zoom: i, pitch: b, bearing: m });
-  te.current = { center: o, zoom: i, pitch: b, bearing: m };
+    if (f(r.getBoundingClientRect().width || (u ? u === !0 ? 800 : u.width ?? 800 : 0)), typeof ResizeObserver > "u") return;
+    const S = new ResizeObserver(([_]) => f(_.contentRect.width));
+    return S.observe(r), () => S.disconnect();
+  }, [p, ee]), F(() => {
+    (!x || v) && B(null);
+  }, [x, v]);
+  const re = h({ center: o, zoom: i, pitch: y, bearing: m });
+  re.current = { center: o, zoom: i, pitch: y, bearing: m };
   const K = h(t.onReady);
   K.current = t.onReady;
-  const M = h(t.onViewStateChange);
-  M.current = t.onViewStateChange;
+  const $ = h(t.onViewStateChange);
+  $.current = t.onViewStateChange;
   const H = h(t.onRuntimeError);
   H.current = t.onRuntimeError;
-  const V = h(a);
-  V.current = a;
-  const B = h(void 0);
-  se(() => {
-    if (!C.current) return;
-    const r = te.current;
-    B.current = V.current;
-    const n = new Me(C.current, {
+  const Y = h(a);
+  Y.current = a;
+  const G = h(void 0);
+  ie(() => {
+    if (!P.current) return;
+    const r = re.current;
+    G.current = Y.current;
+    const n = new Me(P.current, {
       center: r.center,
       zoom: r.zoom,
       pitch: r.pitch,
       bearing: r.bearing,
-      basemap: V.current,
+      basemap: Y.current,
       basemapKey: l,
       attribution: g,
-      headless: d ? d === !0 ? {} : d : void 0,
+      headless: u ? u === !0 ? {} : u : void 0,
       chromeHosts: {
         badge: z.current.badge ?? void 0,
         attribution: z.current.attribution ?? void 0
       },
       onRuntimeError: (f) => {
-        var O;
-        return (O = H.current) == null ? void 0 : O.call(H, f);
+        var S;
+        return (S = H.current) == null ? void 0 : S.call(H, f);
       }
     });
-    T(n);
-    let u = !0;
+    L(n);
+    let d = !0;
     return n.ready.then(() => {
       var f;
-      u && ((f = K.current) == null || f.call(K));
+      d && ((f = K.current) == null || f.call(K));
     }), () => {
-      u = !1, T(null), n.destroy();
+      d = !1, L(null), n.destroy();
     };
-  }, [Z]), x(() => {
-    !c || B.current === a || (B.current = a, c.setBasemap(a ?? null));
-  }, [c, a]), Pe(s, () => c, [c]), x(() => {
+  }, [ee]), F(() => {
+    !c || G.current === a || (G.current = a, c.setBasemap(a ?? null));
+  }, [c, a]), Pe(s, () => c, [c]), F(() => {
     if (!c) return;
-    const r = { longitude: o == null ? void 0 : o[0], latitude: o == null ? void 0 : o[1], zoom: i, pitch: b, bearing: m };
+    const r = { longitude: o == null ? void 0 : o[0], latitude: o == null ? void 0 : o[1], zoom: i, pitch: y, bearing: m };
     Ge(c.getViewState(), r) && c.setView(r);
-  }, [c, o == null ? void 0 : o[0], o == null ? void 0 : o[1], i, b, m]), x(() => {
+  }, [c, o == null ? void 0 : o[0], o == null ? void 0 : o[1], i, y, m]), F(() => {
     var r;
     if (c)
-      return (r = M.current) == null || r.call(M, c.getViewState()), c.getStore("viewport").subscribe(() => {
+      return (r = $.current) == null || r.call($, c.getViewState()), c.getStore("viewport").subscribe(() => {
         var n;
-        return (n = M.current) == null ? void 0 : n.call(M, c.getViewState());
+        return (n = $.current) == null ? void 0 : n.call($, c.getViewState());
       });
   }, [c]);
-  const Oe = P(
+  const Oe = M(
     () => ({
       position: "absolute",
       inset: 0,
       zIndex: 20,
       pointerEvents: "none",
       opacity: "var(--om-widget-opacity, 1)",
-      ...w ? Le(w).properties : void 0
+      ...O ? Le(O).properties : void 0
     }),
-    [w]
-  ), Y = P(() => c ? new qe(c) : null, [c]), re = P(
-    () => c && Y && F ? { controller: c, layers: Y, overlayPane: F, corners: j, widgetsHidden: !!v, widgetsFolded: k, foldPanels: X, registerFoldedWidget: ee } : null,
-    [c, Y, F, j, v, k, X, ee]
+    [O]
+  ), J = M(() => c ? new qe(c) : null, [c]), ne = M(
+    () => c && J && C ? { controller: c, layers: J, overlayPane: C, corners: k, widgetsHidden: !!v, widgetsFolded: x, foldPanels: V, registerFoldedWidget: te } : null,
+    [c, J, C, k, v, x, V, te]
   );
-  return /* @__PURE__ */ J("div", { ref: R, className: y, style: { position: "relative", overflow: "hidden", ...S }, children: [
-    /* @__PURE__ */ E("div", { ref: C, style: { position: "absolute", inset: 0 } }),
-    /* @__PURE__ */ E(
+  return /* @__PURE__ */ X("div", { ref: R, className: b, style: { position: "relative", overflow: "hidden", ...T }, children: [
+    /* @__PURE__ */ w("div", { ref: P, style: { position: "absolute", inset: 0 } }),
+    /* @__PURE__ */ w(
       "div",
       {
         ref: he,
         style: { position: "absolute", top: 0, left: 0, zIndex: 10, pointerEvents: "none" }
       }
     ),
-    /* @__PURE__ */ E("div", { "data-om-widget-layer": "", style: Oe, children: N.map((r) => /* @__PURE__ */ J(
+    /* @__PURE__ */ w("div", { "data-om-widget-layer": "", style: Oe, children: N.map((r) => /* @__PURE__ */ X(
       "div",
       {
         "data-om-widget-slot": r,
         ref: ve[r],
         style: {
           ...Ve[r],
-          ...k && r === "bottom-end" ? { bottom: "calc(var(--om-widget-inset-y, 12px) + 28px)" } : void 0
+          ...x && r === "bottom-end" ? { bottom: "calc(var(--om-widget-inset-y, 12px) + 28px)" } : void 0
         },
         children: [
-          k && A.filter((n) => $e(n) === r && ge[n] > 0).map((n) => {
-            const u = ye === n;
-            return /* @__PURE__ */ J(
+          x && A.filter((n) => $e(n) === r && ge[n] > 0).map((n) => {
+            const d = be === n;
+            return /* @__PURE__ */ X(
               "div",
               {
                 "data-om-fold-drawer": n,
                 style: { ..._e(n), display: v ? "none" : "flex" },
                 onKeyDown: (f) => {
-                  var O;
-                  f.key !== "Escape" || !u || (q(null), (O = f.currentTarget.querySelector("[data-om-fold-toggle]")) == null || O.focus(), f.preventDefault(), f.stopPropagation());
+                  var S;
+                  f.key !== "Escape" || !d || (B(null), (S = f.currentTarget.querySelector("[data-om-fold-toggle]")) == null || S.focus(), f.preventDefault(), f.stopPropagation());
                 },
                 children: [
-                  /* @__PURE__ */ E(
+                  /* @__PURE__ */ w(
                     "button",
                     {
                       type: "button",
                       "data-om-fold-toggle": n,
-                      "aria-expanded": u,
-                      "aria-controls": `${Q}-${n}`,
-                      "aria-label": `${u ? "Close" : "Open"} ${n} map controls`,
+                      "aria-expanded": d,
+                      "aria-controls": `${Z}-${n}`,
+                      "aria-label": `${d ? "Close" : "Open"} ${n} map controls`,
                       style: je(),
                       onClick: () => {
-                        q(u ? null : n), u || requestAnimationFrame(() => {
-                          var O;
-                          const f = (O = R.current) == null ? void 0 : O.querySelector(`[data-om-fold-panel="${n}"]`);
+                        B(d ? null : n), d || requestAnimationFrame(() => {
+                          var S;
+                          const f = (S = R.current) == null ? void 0 : S.querySelector(`[data-om-fold-panel="${n}"]`);
                           f && Ye(f);
                         });
                       },
                       children: "⋯"
                     }
                   ),
-                  /* @__PURE__ */ E(
+                  /* @__PURE__ */ w(
                     "div",
                     {
-                      id: `${Q}-${n}`,
+                      id: `${Z}-${n}`,
                       ref: Se[n],
                       "data-om-fold-panel": n,
                       role: "region",
                       "aria-label": `${n} map controls`,
-                      hidden: !u,
-                      style: { ...De(n), display: u ? "flex" : "none" }
+                      hidden: !d,
+                      style: { ...De(n), display: d ? "flex" : "none" }
                     }
                   )
                 ]
@@ -227,31 +227,31 @@ const rt = Ce(function(t, s) {
               `fold-${n}`
             );
           }),
-          r === "bottom-start" && /* @__PURE__ */ E(
+          r === "bottom-start" && /* @__PURE__ */ w(
             "div",
             {
               "data-om-mandated-chrome": "badge",
               ref: (n) => {
                 z.current.badge = n;
               },
-              style: ie
+              style: ae
             }
           ),
-          r === "bottom-end" && /* @__PURE__ */ E(
+          r === "bottom-end" && /* @__PURE__ */ w(
             "div",
             {
               "data-om-mandated-chrome": "attribution",
               ref: (n) => {
                 z.current.attribution = n;
               },
-              style: ie
+              style: ae
             }
           )
         ]
       },
       r
     )) }),
-    re && /* @__PURE__ */ E(ue.Provider, { value: re, children: $ })
+    ne && /* @__PURE__ */ w(fe.Provider, { value: ne, children: E })
   ] });
 }), Je = /* @__PURE__ */ new Set([
   "id",
@@ -277,7 +277,7 @@ function nt(e) {
   const { controller: t, layers: s } = W("OmLayer"), { id: o } = e, i = {};
   for (const [l, g] of Object.entries(e))
     !Je.has(l) && g !== void 0 && (i[l] = g);
-  const b = {
+  const y = {
     id: o,
     type: e.type,
     data: e.data,
@@ -296,34 +296,34 @@ function nt(e) {
     updateTriggers: e.updateTriggers,
     props: i
   };
-  x(() => {
-    s.upsert(b);
-  }), x(() => () => s.remove(o), [s, o]);
+  F(() => {
+    s.upsert(y);
+  }), F(() => () => s.remove(o), [s, o]);
   const m = h(e.onClick);
   m.current = e.onClick;
   const a = h(e.onHover);
-  return a.current = e.onHover, x(
+  return a.current = e.onHover, F(
     () => t.watchPicks((l) => {
-      var g, d, w;
+      var g, u, O;
       if (l === null) {
         (g = a.current) == null || g.call(a, null);
         return;
       }
-      l.layerId === o && (l.type === "click" ? (d = m.current) == null || d.call(m, l) : (w = a.current) == null || w.call(a, l));
+      l.layerId === o && (l.type === "click" ? (u = m.current) == null || u.call(m, l) : (O = a.current) == null || O.call(a, l));
     }),
     [t, o]
   ), null;
 }
-function ot({ position: e = "top-start", order: t, fold: s, className: o, style: i, children: b }) {
-  const { corners: m, widgetsHidden: a, widgetsFolded: l, foldPanels: g, registerFoldedWidget: d } = W("OmWidget"), w = le(), v = Ke(e) ?? "top-start", p = l && v !== "manual" && s !== "never", y = v === "manual" ? null : He(v);
-  if (x(() => {
-    if (y)
-      return d(y, w, p), () => d(y, w, !1);
-  }, [y, w, p, d]), v === "manual")
-    return /* @__PURE__ */ E("div", { className: o, style: { pointerEvents: "auto", ...i }, children: b });
-  const S = p && y ? g[y] : m[v];
-  return S ? de(
-    /* @__PURE__ */ E(
+function ot({ position: e = "top-start", order: t, fold: s, className: o, style: i, children: y }) {
+  const { corners: m, widgetsHidden: a, widgetsFolded: l, foldPanels: g, registerFoldedWidget: u } = W("OmWidget"), O = ce(), v = Ke(e) ?? "top-start", p = l && v !== "manual" && s !== "never", b = v === "manual" ? null : He(v);
+  if (F(() => {
+    if (b)
+      return u(b, O, p), () => u(b, O, !1);
+  }, [b, O, p, u]), v === "manual")
+    return /* @__PURE__ */ w("div", { className: o, style: { pointerEvents: "auto", ...i }, children: y });
+  const T = p && b ? g[b] : m[v];
+  return T ? de(
+    /* @__PURE__ */ w(
       "div",
       {
         "data-om-react-widget": "",
@@ -335,14 +335,14 @@ function ot({ position: e = "top-start", order: t, fold: s, className: o, style:
           pointerEvents: a ? "none" : (i == null ? void 0 : i.pointerEvents) ?? "auto",
           visibility: a ? "hidden" : i == null ? void 0 : i.visibility
         },
-        children: b
+        children: y
       }
     ),
-    S
+    T
   ) : null;
 }
-function ae(e, t) {
-  return !t || (e == null ? void 0 : e.layerId) === t;
+function le(e, t, s, o) {
+  return t && (e == null ? void 0 : e.layerId) !== t ? !1 : !s || (e ? e.type : o) === s;
 }
 const Ue = {
   "top-left": "translate(0, 0)",
@@ -356,47 +356,47 @@ const Ue = {
   "bottom-right": "translate(-100%, -100%)"
 };
 function st(e) {
-  const { controller: t, overlayPane: s } = W("OmOverlay"), o = h(null), i = h(void 0), b = h(e);
-  b.current = e;
-  const m = P(() => {
+  const { controller: t, overlayPane: s } = W("OmOverlay"), o = h(null), i = h(void 0), y = h(e);
+  y.current = e;
+  const m = M(() => {
     const p = t.getStore("selection");
-    let y, S, $ = null;
+    let b, T, E = null;
     return {
       subscribe: p.subscribe,
       getSnapshot: () => {
-        const R = p.getSnapshot(), { anchorFrom: C, layer: c } = b.current, T = `${C ?? ""}|${c ?? ""}`;
-        return (R !== y || T !== S) && (y = R, S = T, C === "selection" && ae(R, c) && ($ = R)), $;
+        const R = p.getSnapshot(), { anchorFrom: P, layer: c, selectionType: L } = y.current, C = `${P ?? ""}|${c ?? ""}|${L ?? ""}`;
+        return (R !== b || C !== T) && (b = R, T = C, P === "selection" && le(R, c, L, t.getLastPickType()) && (E = R)), E;
       }
     };
-  }, [t]), a = ce(
+  }, [t]), a = ue(
     m.subscribe,
     m.getSnapshot,
     m.getSnapshot
   );
-  x(
-    () => t.registerOverlay((p, y) => {
-      const S = o.current;
-      if (!S) return;
-      const { anchor: $, anchorFrom: R, layer: C, visible: c = !0, anchorOffset: T } = b.current;
-      let F;
-      if (R === "selection" ? (ae(y, C) && (i.current = (y == null ? void 0 : y.coordinate) ?? void 0), F = i.current) : F = $, !c || !F || !p) {
-        S.style.visibility = "hidden";
+  F(
+    () => t.registerOverlay((p, b, T) => {
+      const E = o.current;
+      if (!E) return;
+      const { anchor: R, anchorFrom: P, layer: c, selectionType: L, visible: C = !0, anchorOffset: q } = y.current;
+      let k;
+      if (P === "selection" ? (le(b, c, L, T) && (i.current = (b == null ? void 0 : b.coordinate) ?? void 0), k = i.current) : k = R, !C || !k || !p) {
+        E.style.visibility = "hidden";
         return;
       }
-      const [D, j, I] = p.project([F[0], F[1], 0]);
-      if (!(D >= 0 && D <= p.width && j >= 0 && j <= p.height) || I !== void 0 && I < 0) {
-        S.style.visibility = "hidden";
+      const [D, x, I] = p.project([k[0], k[1], 0]);
+      if (!(D >= 0 && D <= p.width && x >= 0 && x <= p.height) || I !== void 0 && I < 0) {
+        E.style.visibility = "hidden";
         return;
       }
-      S.style.visibility = "visible", S.style.transform = `translate(${D}px, ${j}px) ${Ue[T ?? "bottom-center"]}`;
+      E.style.visibility = "visible", E.style.transform = `translate(${D}px, ${x}px) ${Ue[q ?? "bottom-center"]}`;
     }),
     [t]
-  ), x(() => {
+  ), F(() => {
     t.refreshOverlays();
   });
-  const { children: l, className: g, style: d, interactive: w = !0 } = e, v = typeof l == "function" ? l(a) : l;
+  const { children: l, className: g, style: u, interactive: O = !0 } = e, v = typeof l == "function" ? l(a) : l;
   return de(
-    /* @__PURE__ */ E(
+    /* @__PURE__ */ w(
       "div",
       {
         ref: o,
@@ -408,8 +408,8 @@ function st(e) {
           visibility: "hidden",
           // hidden until the first flush positions it — never flashes at the origin
           willChange: "transform",
-          pointerEvents: w ? "auto" : "none",
-          ...d
+          pointerEvents: O ? "auto" : "none",
+          ...u
         },
         children: v
       }
@@ -418,23 +418,23 @@ function st(e) {
   );
 }
 function it(e = []) {
-  const { controller: t } = W("useOmMap"), s = e.join(" "), o = P(() => {
+  const { controller: t } = W("useOmMap"), s = e.join(" "), o = M(() => {
     const m = (s ? s.split(" ") : []).flatMap((l) => Ne(l) ? [t.getStore(l)] : (console.warn(`[onlymapjs] useOmMap: "${l}" is not a watch token on the React front-end — expected viewport, selection, layers, or data:<layerId>.`), []));
     let a;
     return {
       subscribe: (l) => {
-        const g = m.map((d) => d.subscribe(l));
+        const g = m.map((u) => u.subscribe(l));
         return () => {
-          for (const d of g) d();
+          for (const u of g) u();
         };
       },
       getSnapshot: () => {
         const l = m.map((g) => g.getSnapshot());
-        return (!a || l.some((g, d) => g !== a[d])) && (a = l), a;
+        return (!a || l.some((g, u) => g !== a[u])) && (a = l), a;
       }
     };
-  }, [t, s]), i = ce(o.subscribe, o.getSnapshot, o.getSnapshot);
-  return P(() => t.buildCtx(), [t, i]);
+  }, [t, s]), i = ue(o.subscribe, o.getSnapshot, o.getSnapshot);
+  return M(() => t.buildCtx(), [t, i]);
 }
 export {
   nt as OmLayer,