@nika-js/onlymap 0.4.3 → 0.4.6

package/dist/react.js

@@ -1,144 +1,259 @@
-var Z = Object.defineProperty;
-var ee = (t, e, n) => e in t ? Z(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var B = (t, e, n) => ee(t, typeof e != "symbol" ? e + "" : e, n);
-import { jsxs as te, jsx as w } from "react/jsx-runtime";
-import { createContext as re, useContext as ne, forwardRef as se, useRef as m, useState as V, useCallback as oe, useMemo as x, useLayoutEffect as ie, useEffect as E, useImperativeHandle as ae, useSyncExternalStore as J } from "react";
-import { MANAGED_SLOTS as ce, slotContainerStyle as le, MapController as ue, parseWidgetStyle as de, resolveSlot as fe, isStoreToken as ye } from "@nika-js/onlymap";
-import { createPortal as Y } from "react-dom";
-const Q = re(null);
-function z(t) {
-  const e = ne(Q);
-  if (!e) throw new Error(`[onlymapjs] ${t} must be rendered inside <OmMap>.`);
-  return e;
+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";
+import { createPortal as de } from "react-dom";
+const ue = xe(null);
+function W(e) {
+  const t = Fe(ue);
+  if (!t) throw new Error(`[onlymapjs] ${e} must be rendered inside <OmMap>.`);
+  return t;
 }
-function W(t, e) {
-  if (t === e) return !0;
-  const n = Object.keys(t ?? {}), r = Object.keys(e ?? {});
-  return n.length !== r.length ? !1 : n.every((l) => t[l] === e[l]);
+function U(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 me(t, e) {
-  const { props: n, updateTriggers: r, ...l } = t, { props: d, updateTriggers: c, ...o } = e;
-  return W(l, o) && W(n, d) && W(r, c);
+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);
 }
-class ge {
-  constructor(e) {
-    B(this, "descriptors", /* @__PURE__ */ new Map());
-    this.controller = e;
+class qe {
+  constructor(t) {
+    ne(this, "descriptors", /* @__PURE__ */ new Map());
+    this.controller = t;
   }
-  upsert(e) {
-    const n = this.descriptors.get(e.id);
-    n && me(n, e) || (this.descriptors.set(e.id, e), this.controller.setLayers([...this.descriptors.values()]));
+  upsert(t) {
+    const s = this.descriptors.get(t.id);
+    s && We(s, t) || (this.descriptors.set(t.id, t), this.controller.setLayers([...this.descriptors.values()]));
   }
-  remove(e) {
-    this.descriptors.delete(e) && this.controller.setLayers([...this.descriptors.values()]);
+  remove(t) {
+    this.descriptors.delete(t) && this.controller.setLayers([...this.descriptors.values()]);
   }
 }
-const $ = ce, he = Object.fromEntries($.map((t) => [t, le(t)]));
-function be(t, e) {
-  return Object.entries(e).some(([n, r]) => r !== void 0 && t[n] !== r);
+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]));
+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"])'
+  );
+  t ? t.focus() : (e.tabIndex = -1, e.focus());
+}
+function Ge(e, t) {
+  return Object.entries(t).some(([s, o]) => o !== void 0 && e[s] !== o);
 }
-const Ce = se(function(e, n) {
-  const { center: r, zoom: l, pitch: d, bearing: c, basemap: o, basemapKey: a, attribution: f, headless: u, widgetStyle: v, widgetsHidden: L, className: h, style: b, children: g } = e, p = m(null), [s, R] = V(null), [S, T] = V(null), [O, k] = V(
-    () => Object.fromEntries($.map((i) => [i, null]))
-  ), j = oe((i) => {
-    T((y) => y === i ? y : i);
-  }, []), P = x(
+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(
+    () => Object.fromEntries(N.map((r) => [r, null]))
+  ), [k, fe] = L(!1), [X, me] = L(Be), [ge, be] = L(
+    () => 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({
+    badge: null,
+    attribution: null
+  }), he = oe((r) => {
+    D((n) => n === r ? n : r);
+  }, []), ve = P(
     () => Object.fromEntries(
-      $.map((i) => [
-        i,
-        (y) => {
-          k((M) => M[i] === y ? M : { ...M, [i]: y });
+      N.map((r) => [
+        r,
+        (n) => {
+          I((u) => u[r] === n ? u : { ...u, [r]: n });
         }
       ])
     ),
     []
-  ), _ = m({ center: r, zoom: l, pitch: d, bearing: c });
-  _.current = { center: r, zoom: l, pitch: d, bearing: c };
-  const F = m(e.onReady);
-  F.current = e.onReady;
-  const C = m(e.onViewStateChange);
-  C.current = e.onViewStateChange;
-  const K = m(e.onRuntimeError);
-  K.current = e.onRuntimeError;
-  const A = m(o);
-  A.current = o;
-  const D = m(void 0), U = u ? JSON.stringify(u) : "";
-  ie(() => {
-    if (!p.current) return;
-    const i = _.current;
-    D.current = A.current;
-    const y = new ue(p.current, {
-      center: i.center,
-      zoom: i.zoom,
-      pitch: i.pitch,
-      bearing: i.bearing,
-      basemap: A.current,
-      basemapKey: a,
-      attribution: f,
-      headless: u ? u === !0 ? {} : u : void 0,
-      onRuntimeError: (I) => {
-        var q;
-        return (q = K.current) == null ? void 0 : q.call(K, I);
+  ), Se = P(
+    () => Object.fromEntries(
+      A.map((r) => [
+        r,
+        (n) => {
+          me((u) => u[r] === n ? u : { ...u, [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 }));
+  }, []);
+  se(() => {
+    const r = R.current;
+    if (!r) return;
+    let n, u = 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));
+    };
+    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 };
+  const K = h(t.onReady);
+  K.current = t.onReady;
+  const M = h(t.onViewStateChange);
+  M.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, {
+      center: r.center,
+      zoom: r.zoom,
+      pitch: r.pitch,
+      bearing: r.bearing,
+      basemap: V.current,
+      basemapKey: l,
+      attribution: g,
+      headless: d ? d === !0 ? {} : d : 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);
       }
     });
-    R(y);
-    let M = !0;
-    return y.ready.then(() => {
-      var I;
-      M && ((I = F.current) == null || I.call(F));
+    T(n);
+    let u = !0;
+    return n.ready.then(() => {
+      var f;
+      u && ((f = K.current) == null || f.call(K));
     }), () => {
-      M = !1, R(null), y.destroy();
+      u = !1, T(null), n.destroy();
     };
-  }, [U]), E(() => {
-    !s || D.current === o || (D.current = o, s.setBasemap(o ?? null));
-  }, [s, o]), ae(n, () => s, [s]), E(() => {
-    if (!s) return;
-    const i = { longitude: r == null ? void 0 : r[0], latitude: r == null ? void 0 : r[1], zoom: l, pitch: d, bearing: c };
-    be(s.getViewState(), i) && s.setView(i);
-  }, [s, r == null ? void 0 : r[0], r == null ? void 0 : r[1], l, d, c]), E(() => {
-    var i;
-    if (s)
-      return (i = C.current) == null || i.call(C, s.getViewState()), s.getStore("viewport").subscribe(() => {
-        var y;
-        return (y = C.current) == null ? void 0 : y.call(C, s.getViewState());
+  }, [Z]), x(() => {
+    !c || B.current === a || (B.current = a, c.setBasemap(a ?? null));
+  }, [c, a]), Pe(s, () => c, [c]), x(() => {
+    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 };
+    Ge(c.getViewState(), r) && c.setView(r);
+  }, [c, o == null ? void 0 : o[0], o == null ? void 0 : o[1], i, b, m]), x(() => {
+    var r;
+    if (c)
+      return (r = M.current) == null || r.call(M, c.getViewState()), c.getStore("viewport").subscribe(() => {
+        var n;
+        return (n = M.current) == null ? void 0 : n.call(M, c.getViewState());
       });
-  }, [s]);
-  const X = x(
+  }, [c]);
+  const Oe = P(
     () => ({
       position: "absolute",
       inset: 0,
       zIndex: 20,
       pointerEvents: "none",
       opacity: "var(--om-widget-opacity, 1)",
-      ...L ? { visibility: "hidden" } : void 0,
-      ...v ? de(v).properties : void 0
+      ...w ? Le(w).properties : void 0
     }),
-    [v, L]
-  ), N = x(() => s ? new ge(s) : null, [s]), H = x(
-    () => s && N && S ? { controller: s, layers: N, overlayPane: S, corners: O } : null,
-    [s, N, S, O]
+    [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]
   );
-  return /* @__PURE__ */ te("div", { className: h, style: { position: "relative", overflow: "hidden", ...b }, children: [
-    /* @__PURE__ */ w("div", { ref: p, style: { position: "absolute", inset: 0 } }),
-    /* @__PURE__ */ w(
+  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(
       "div",
       {
-        ref: j,
+        ref: he,
         style: { position: "absolute", top: 0, left: 0, zIndex: 10, pointerEvents: "none" }
       }
     ),
-    /* @__PURE__ */ w("div", { "data-om-widget-layer": "", style: X, children: $.map((i) => /* @__PURE__ */ w(
+    /* @__PURE__ */ E("div", { "data-om-widget-layer": "", style: Oe, children: N.map((r) => /* @__PURE__ */ J(
       "div",
       {
-        "data-om-widget-slot": i,
-        ref: P[i],
-        style: he[i]
+        "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
+        },
+        children: [
+          k && A.filter((n) => $e(n) === r && ge[n] > 0).map((n) => {
+            const u = ye === n;
+            return /* @__PURE__ */ J(
+              "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());
+                },
+                children: [
+                  /* @__PURE__ */ E(
+                    "button",
+                    {
+                      type: "button",
+                      "data-om-fold-toggle": n,
+                      "aria-expanded": u,
+                      "aria-controls": `${Q}-${n}`,
+                      "aria-label": `${u ? "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}"]`);
+                          f && Ye(f);
+                        });
+                      },
+                      children: "⋯"
+                    }
+                  ),
+                  /* @__PURE__ */ E(
+                    "div",
+                    {
+                      id: `${Q}-${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" }
+                    }
+                  )
+                ]
+              },
+              `fold-${n}`
+            );
+          }),
+          r === "bottom-start" && /* @__PURE__ */ E(
+            "div",
+            {
+              "data-om-mandated-chrome": "badge",
+              ref: (n) => {
+                z.current.badge = n;
+              },
+              style: ie
+            }
+          ),
+          r === "bottom-end" && /* @__PURE__ */ E(
+            "div",
+            {
+              "data-om-mandated-chrome": "attribution",
+              ref: (n) => {
+                z.current.attribution = n;
+              },
+              style: ie
+            }
+          )
+        ]
       },
-      i
+      r
     )) }),
-    H && /* @__PURE__ */ w(Q.Provider, { value: H, children: g })
+    re && /* @__PURE__ */ E(ue.Provider, { value: re, children: $ })
   ] });
-}), ve = /* @__PURE__ */ new Set([
+}), Je = /* @__PURE__ */ new Set([
   "id",
   "type",
   "data",
@@ -158,61 +273,78 @@ const Ce = se(function(e, n) {
   "onClick",
   "onHover"
 ]);
-function xe(t) {
-  const { controller: e, layers: n } = z("OmLayer"), { id: r } = t, l = {};
-  for (const [a, f] of Object.entries(t))
-    !ve.has(a) && f !== void 0 && (l[a] = f);
-  const d = {
-    id: r,
-    type: t.type,
-    data: t.data,
-    label: t.label,
-    color: t.color,
-    filterField: t.filterField,
-    filterRange: t.filterRange,
-    filterSoftRange: t.filterSoftRange,
-    filterCategoryField: t.filterCategoryField,
-    filterCategories: t.filterCategories,
-    source: t.source,
-    key: t.streamKey,
-    flush: t.flush,
-    refresh: t.refresh,
-    terrain: t.terrain,
-    updateTriggers: t.updateTriggers,
-    props: l
+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 = {
+    id: o,
+    type: e.type,
+    data: e.data,
+    label: e.label,
+    color: e.color,
+    filterField: e.filterField,
+    filterRange: e.filterRange,
+    filterSoftRange: e.filterSoftRange,
+    filterCategoryField: e.filterCategoryField,
+    filterCategories: e.filterCategories,
+    source: e.source,
+    key: e.streamKey,
+    flush: e.flush,
+    refresh: e.refresh,
+    terrain: e.terrain,
+    updateTriggers: e.updateTriggers,
+    props: i
   };
-  E(() => {
-    n.upsert(d);
-  }), E(() => () => n.remove(r), [n, r]);
-  const c = m(t.onClick);
-  c.current = t.onClick;
-  const o = m(t.onHover);
-  return o.current = t.onHover, E(
-    () => e.watchPicks((a) => {
-      var f, u, v;
-      if (a === null) {
-        (f = o.current) == null || f.call(o, null);
+  x(() => {
+    s.upsert(b);
+  }), x(() => () => 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(
+    () => t.watchPicks((l) => {
+      var g, d, w;
+      if (l === null) {
+        (g = a.current) == null || g.call(a, null);
         return;
       }
-      a.layerId === r && (a.type === "click" ? (u = c.current) == null || u.call(c, a) : (v = o.current) == null || v.call(o, a));
+      l.layerId === o && (l.type === "click" ? (d = m.current) == null || d.call(m, l) : (w = a.current) == null || w.call(a, l));
     }),
-    [e, r]
+    [t, o]
   ), null;
 }
-function Te({ position: t = "top-start", order: e, className: n, style: r, children: l }) {
-  const { corners: d } = z("OmWidget"), c = fe(t) ?? "top-start";
-  if (c === "manual")
-    return /* @__PURE__ */ w("div", { className: n, style: { pointerEvents: "auto", ...r }, children: l });
-  const o = d[c];
-  return o ? Y(
-    /* @__PURE__ */ w("div", { className: n, style: { pointerEvents: "auto", ...e !== void 0 ? { order: e } : void 0, ...r }, children: l }),
-    o
+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(
+      "div",
+      {
+        "data-om-react-widget": "",
+        "data-om-fold-origin-slot": p ? v : void 0,
+        className: o,
+        style: {
+          ...t !== void 0 ? { order: t } : void 0,
+          ...i,
+          pointerEvents: a ? "none" : (i == null ? void 0 : i.pointerEvents) ?? "auto",
+          visibility: a ? "hidden" : i == null ? void 0 : i.visibility
+        },
+        children: b
+      }
+    ),
+    S
   ) : null;
 }
-function G(t, e) {
-  return !e || (t == null ? void 0 : t.layerId) === e;
+function ae(e, t) {
+  return !t || (e == null ? void 0 : e.layerId) === t;
 }
-const pe = {
+const Ue = {
   "top-left": "translate(0, 0)",
   "top-center": "translate(-50%, 0)",
   "top-right": "translate(-100%, 0)",
@@ -223,52 +355,52 @@ const pe = {
   "bottom-center": "translate(-50%, -100%)",
   "bottom-right": "translate(-100%, -100%)"
 };
-function Me(t) {
-  const { controller: e, overlayPane: n } = z("OmOverlay"), r = m(null), l = m(void 0), d = m(t);
-  d.current = t;
-  const c = x(() => {
-    const h = e.getStore("selection");
-    let b, g, p = null;
+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 p = t.getStore("selection");
+    let y, S, $ = null;
     return {
-      subscribe: h.subscribe,
+      subscribe: p.subscribe,
       getSnapshot: () => {
-        const s = h.getSnapshot(), { anchorFrom: R, layer: S } = d.current, T = `${R ?? ""}|${S ?? ""}`;
-        return (s !== b || T !== g) && (b = s, g = T, R === "selection" && G(s, S) && (p = s)), p;
+        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)), $;
       }
     };
-  }, [e]), o = J(
-    c.subscribe,
-    c.getSnapshot,
-    c.getSnapshot
+  }, [t]), a = ce(
+    m.subscribe,
+    m.getSnapshot,
+    m.getSnapshot
   );
-  E(
-    () => e.registerOverlay((h, b) => {
-      const g = r.current;
-      if (!g) return;
-      const { anchor: p, anchorFrom: s, layer: R, visible: S = !0, anchorOffset: T } = d.current;
-      let O;
-      if (s === "selection" ? (G(b, R) && (l.current = (b == null ? void 0 : b.coordinate) ?? void 0), O = l.current) : O = p, !S || !O || !h) {
-        g.style.visibility = "hidden";
+  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";
         return;
       }
-      const [k, j, P] = h.project([O[0], O[1], 0]);
-      if (!(k >= 0 && k <= h.width && j >= 0 && j <= h.height) || P !== void 0 && P < 0) {
-        g.style.visibility = "hidden";
+      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";
         return;
       }
-      g.style.visibility = "visible", g.style.transform = `translate(${k}px, ${j}px) ${pe[T ?? "bottom-center"]}`;
+      S.style.visibility = "visible", S.style.transform = `translate(${D}px, ${j}px) ${Ue[T ?? "bottom-center"]}`;
     }),
-    [e]
-  ), E(() => {
-    e.refreshOverlays();
+    [t]
+  ), x(() => {
+    t.refreshOverlays();
   });
-  const { children: a, className: f, style: u, interactive: v = !0 } = t, L = typeof a == "function" ? a(o) : a;
-  return Y(
-    /* @__PURE__ */ w(
+  const { children: l, className: g, style: d, interactive: w = !0 } = e, v = typeof l == "function" ? l(a) : l;
+  return de(
+    /* @__PURE__ */ E(
       "div",
       {
-        ref: r,
-        className: f,
+        ref: o,
+        className: g,
         style: {
           position: "absolute",
           top: 0,
@@ -276,38 +408,38 @@ function Me(t) {
           visibility: "hidden",
           // hidden until the first flush positions it — never flashes at the origin
           willChange: "transform",
-          pointerEvents: v ? "auto" : "none",
-          ...u
+          pointerEvents: w ? "auto" : "none",
+          ...d
         },
-        children: L
+        children: v
       }
     ),
-    n
+    s
   );
 }
-function ke(t = []) {
-  const { controller: e } = z("useOmMap"), n = t.join(" "), r = x(() => {
-    const c = (n ? n.split(" ") : []).flatMap((a) => ye(a) ? [e.getStore(a)] : (console.warn(`[onlymapjs] useOmMap: "${a}" is not a watch token on the React front-end — expected viewport, selection, layers, or data:<layerId>.`), []));
-    let o;
+function it(e = []) {
+  const { controller: t } = W("useOmMap"), s = e.join(" "), o = P(() => {
+    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: (a) => {
-        const f = c.map((u) => u.subscribe(a));
+      subscribe: (l) => {
+        const g = m.map((d) => d.subscribe(l));
         return () => {
-          for (const u of f) u();
+          for (const d of g) d();
         };
       },
       getSnapshot: () => {
-        const a = c.map((f) => f.getSnapshot());
-        return (!o || a.some((f, u) => f !== o[u])) && (o = a), o;
+        const l = m.map((g) => g.getSnapshot());
+        return (!a || l.some((g, d) => g !== a[d])) && (a = l), a;
       }
     };
-  }, [e, n]), l = J(r.subscribe, r.getSnapshot, r.getSnapshot);
-  return x(() => e.buildCtx(), [e, l]);
+  }, [t, s]), i = ce(o.subscribe, o.getSnapshot, o.getSnapshot);
+  return P(() => t.buildCtx(), [t, i]);
 }
 export {
-  xe as OmLayer,
-  Ce as OmMap,
-  Me as OmOverlay,
-  Te as OmWidget,
-  ke as useOmMap
+  nt as OmLayer,
+  rt as OmMap,
+  st as OmOverlay,
+  ot as OmWidget,
+  it as useOmMap
 };