@nika-js/onlymap 0.4.2 → 0.4.4

package/dist/react.js

@@ -1,144 +1,258 @@
-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 Oe = Object.defineProperty;
+var we = (e, t, s) => t in e ? Oe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var re = (e, t, s) => we(e, typeof t != "symbol" ? t + "" : t, s);
+import { jsxs as G, jsx as E } from "react/jsx-runtime";
+import { createContext as Ee, useContext as xe, forwardRef as Re, useRef as h, useState as $, useId as ae, useCallback as ne, useMemo as T, useLayoutEffect as oe, useEffect as R, useImperativeHandle as Fe, useSyncExternalStore as le } from "react";
+import { MANAGED_SLOTS as Ce, slotContainerStyle as Te, FOLD_SIDES as I, MapController as Pe, parseWidgetStyle as Me, foldToggleSlot as ke, foldToggleStyle as $e, foldPanelStyle as je, foldDrawerStyle as Le, resolveSlot as De, foldSideForSlot as Ie, isStoreToken as _e } from "@nika-js/onlymap";
+import { createPortal as ce } from "react-dom";
+const ue = Ee(null);
+function N(e) {
+  const t = xe(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 J(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 ze(e, t) {
+  const { props: s, updateTriggers: o, ...i } = e, { props: b, updateTriggers: m, ...a } = t;
+  return J(i, a) && J(s, b) && J(o, m);
 }
-class ge {
-  constructor(e) {
-    B(this, "descriptors", /* @__PURE__ */ new Map());
-    this.controller = e;
+class Ae {
+  constructor(t) {
+    re(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 && ze(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 H = Ce, Ke = Object.fromEntries(H.map((e) => [e, Te(e)])), se = { display: "flex", pointerEvents: "none", order: 2147483647 }, He = Object.fromEntries(I.map((e) => [e, null]));
+function Ne(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 We(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 Ue = Re(function(t, s) {
+  const { center: o, zoom: i, pitch: b, bearing: m, basemap: a, basemapKey: l, attribution: g, headless: u, widgetStyle: w, widgetsHidden: v, widgetsFold: p = !0, className: y, style: O, children: j } = t, x = h(null), C = h(null), [c, P] = $(null), [F, D] = $(null), [L, _] = $(
+    () => Object.fromEntries(H.map((r) => [r, null]))
+  ), [M, de] = $(!1), [Q, fe] = $(He), [me, ge] = $(
+    () => Object.fromEntries(I.map((r) => [r, 0]))
+  ), [be, W] = $(null), U = `om-react-fold-${ae().replaceAll(":", "")}`, ye = h(new Map(I.map((r) => [r, /* @__PURE__ */ new Set()]))), X = u ? JSON.stringify(u) : "", z = h({
+    badge: null,
+    attribution: null
+  }), pe = ne((r) => {
+    D((n) => n === r ? n : r);
+  }, []), he = T(
     () => Object.fromEntries(
-      $.map((i) => [
-        i,
-        (y) => {
-          k((M) => M[i] === y ? M : { ...M, [i]: y });
+      H.map((r) => [
+        r,
+        (n) => {
+          _((d) => d[r] === n ? d : { ...d, [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,
+  ), ve = T(
+    () => Object.fromEntries(
+      I.map((r) => [
+        r,
+        (n) => {
+          fe((d) => d[r] === n ? d : { ...d, [r]: n });
+        }
+      ])
+    ),
+    []
+  ), Z = ne((r, n, d) => {
+    const f = ye.current.get(r), S = f.size;
+    d ? f.add(n) : f.delete(n), f.size !== S && ge((Y) => ({ ...Y, [r]: f.size }));
+  }, []);
+  oe(() => {
+    const r = x.current;
+    if (!r) return;
+    const n = (f) => {
+      const S = getComputedStyle(r).getPropertyValue("--om-widget-fold-breakpoint").trim(), Y = /^-?\d+(?:\.\d+)?px$/i.test(S) ? Number.parseFloat(S) : Number(S) || 640;
+      de(p && f > 0 && f <= Math.max(0, Y));
+    };
+    if (n(r.getBoundingClientRect().width || (u ? u === !0 ? 800 : u.width ?? 800 : 0)), typeof ResizeObserver > "u") return;
+    const d = new ResizeObserver(([f]) => n(f.contentRect.width));
+    return d.observe(r), () => d.disconnect();
+  }, [p, X]), R(() => {
+    (!M || v) && W(null);
+  }, [M, v]);
+  const ee = h({ center: o, zoom: i, pitch: b, bearing: m });
+  ee.current = { center: o, zoom: i, pitch: b, bearing: m };
+  const A = h(t.onReady);
+  A.current = t.onReady;
+  const k = h(t.onViewStateChange);
+  k.current = t.onViewStateChange;
+  const K = h(t.onRuntimeError);
+  K.current = t.onRuntimeError;
+  const q = h(a);
+  q.current = a;
+  const V = h(void 0);
+  oe(() => {
+    if (!C.current) return;
+    const r = ee.current;
+    V.current = q.current;
+    const n = new Pe(C.current, {
+      center: r.center,
+      zoom: r.zoom,
+      pitch: r.pitch,
+      bearing: r.bearing,
+      basemap: q.current,
+      basemapKey: l,
+      attribution: g,
       headless: u ? u === !0 ? {} : u : void 0,
-      onRuntimeError: (I) => {
-        var q;
-        return (q = K.current) == null ? void 0 : q.call(K, I);
+      chromeHosts: {
+        badge: z.current.badge ?? void 0,
+        attribution: z.current.attribution ?? void 0
+      },
+      onRuntimeError: (f) => {
+        var S;
+        return (S = K.current) == null ? void 0 : S.call(K, f);
       }
     });
-    R(y);
-    let M = !0;
-    return y.ready.then(() => {
-      var I;
-      M && ((I = F.current) == null || I.call(F));
+    P(n);
+    let d = !0;
+    return n.ready.then(() => {
+      var f;
+      d && ((f = A.current) == null || f.call(A));
     }), () => {
-      M = !1, R(null), y.destroy();
+      d = !1, P(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());
+  }, [X]), R(() => {
+    !c || V.current === a || (V.current = a, c.setBasemap(a ?? null));
+  }, [c, a]), Fe(s, () => c, [c]), R(() => {
+    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 };
+    We(c.getViewState(), r) && c.setView(r);
+  }, [c, o == null ? void 0 : o[0], o == null ? void 0 : o[1], i, b, m]), R(() => {
+    var r;
+    if (c)
+      return (r = k.current) == null || r.call(k, c.getViewState()), c.getStore("viewport").subscribe(() => {
+        var n;
+        return (n = k.current) == null ? void 0 : n.call(k, c.getViewState());
       });
-  }, [s]);
-  const X = x(
+  }, [c]);
+  const Se = T(
     () => ({
       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 ? Me(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]
+  ), B = T(() => c ? new Ae(c) : null, [c]), te = T(
+    () => c && B && F ? { controller: c, layers: B, overlayPane: F, corners: L, widgetsHidden: !!v, widgetsFolded: M, foldPanels: Q, registerFoldedWidget: Z } : null,
+    [c, B, F, L, v, M, Q, Z]
   );
-  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__ */ G("div", { ref: x, className: y, style: { position: "relative", overflow: "hidden", ...O }, children: [
+    /* @__PURE__ */ E("div", { ref: C, style: { position: "absolute", inset: 0 } }),
+    /* @__PURE__ */ E(
       "div",
       {
-        ref: j,
+        ref: pe,
         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: Se, children: H.map((r) => /* @__PURE__ */ G(
       "div",
       {
-        "data-om-widget-slot": i,
-        ref: P[i],
-        style: he[i]
+        "data-om-widget-slot": r,
+        ref: he[r],
+        style: {
+          ...Ke[r],
+          ...M && r === "bottom-end" ? { bottom: "calc(var(--om-widget-inset-y, 12px) + 28px)" } : void 0
+        },
+        children: [
+          M && I.filter((n) => ke(n) === r && me[n] > 0).map((n) => {
+            const d = be === n;
+            return /* @__PURE__ */ G(
+              "div",
+              {
+                "data-om-fold-drawer": n,
+                style: { ...Le(n), display: v ? "none" : "flex" },
+                onKeyDown: (f) => {
+                  var S;
+                  f.key !== "Escape" || !d || (W(null), (S = f.currentTarget.querySelector("[data-om-fold-toggle]")) == null || S.focus(), f.preventDefault(), f.stopPropagation());
+                },
+                children: [
+                  /* @__PURE__ */ E(
+                    "button",
+                    {
+                      type: "button",
+                      "data-om-fold-toggle": n,
+                      "aria-expanded": d,
+                      "aria-controls": `${U}-${n}`,
+                      "aria-label": `${d ? "Close" : "Open"} ${n} map controls`,
+                      style: $e(),
+                      onClick: () => {
+                        W(d ? null : n), d || requestAnimationFrame(() => {
+                          var S;
+                          const f = (S = x.current) == null ? void 0 : S.querySelector(`[data-om-fold-panel="${n}"]`);
+                          f && Ne(f);
+                        });
+                      },
+                      children: "⋯"
+                    }
+                  ),
+                  /* @__PURE__ */ E(
+                    "div",
+                    {
+                      id: `${U}-${n}`,
+                      ref: ve[n],
+                      "data-om-fold-panel": n,
+                      role: "region",
+                      "aria-label": `${n} map controls`,
+                      hidden: !d,
+                      style: { ...je(n), display: d ? "flex" : "none" }
+                    }
+                  )
+                ]
+              },
+              `fold-${n}`
+            );
+          }),
+          r === "bottom-start" && /* @__PURE__ */ E(
+            "div",
+            {
+              "data-om-mandated-chrome": "badge",
+              ref: (n) => {
+                z.current.badge = n;
+              },
+              style: se
+            }
+          ),
+          r === "bottom-end" && /* @__PURE__ */ E(
+            "div",
+            {
+              "data-om-mandated-chrome": "attribution",
+              ref: (n) => {
+                z.current.attribution = n;
+              },
+              style: se
+            }
+          )
+        ]
       },
-      i
+      r
     )) }),
-    H && /* @__PURE__ */ w(Q.Provider, { value: H, children: g })
+    te && /* @__PURE__ */ E(ue.Provider, { value: te, children: j })
   ] });
-}), ve = /* @__PURE__ */ new Set([
+}), qe = /* @__PURE__ */ new Set([
   "id",
   "type",
   "data",
@@ -158,61 +272,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 Xe(e) {
+  const { controller: t, layers: s } = N("OmLayer"), { id: o } = e, i = {};
+  for (const [l, g] of Object.entries(e))
+    !qe.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);
+  R(() => {
+    s.upsert(b);
+  }), R(() => () => s.remove(o), [s, o]);
+  const m = h(e.onClick);
+  m.current = e.onClick;
+  const a = h(e.onHover);
+  return a.current = e.onHover, R(
+    () => t.watchPicks((l) => {
+      var g, u, 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" ? (u = m.current) == null || u.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 Ze({ position: e = "top-start", order: t, fold: s, className: o, style: i, children: b }) {
+  const { corners: m, widgetsHidden: a, widgetsFolded: l, foldPanels: g, registerFoldedWidget: u } = N("OmWidget"), w = ae(), v = De(e) ?? "top-start", p = l && v !== "manual" && s !== "never", y = v === "manual" ? null : Ie(v);
+  if (R(() => {
+    if (y)
+      return u(y, w, p), () => u(y, w, !1);
+  }, [y, w, p, u]), v === "manual")
+    return /* @__PURE__ */ E("div", { className: o, style: { pointerEvents: "auto", ...i }, children: b });
+  const O = p && y ? g[y] : m[v];
+  return O ? ce(
+    /* @__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
+      }
+    ),
+    O
   ) : null;
 }
-function G(t, e) {
-  return !e || (t == null ? void 0 : t.layerId) === e;
+function ie(e, t) {
+  return !t || (e == null ? void 0 : e.layerId) === t;
 }
-const pe = {
+const Ve = {
   "top-left": "translate(0, 0)",
   "top-center": "translate(-50%, 0)",
   "top-right": "translate(-100%, 0)",
@@ -223,52 +354,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 et(e) {
+  const { controller: t, overlayPane: s } = N("OmOverlay"), o = h(null), i = h(void 0), b = h(e);
+  b.current = e;
+  const m = T(() => {
+    const p = t.getStore("selection");
+    let y, O, j = 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 x = p.getSnapshot(), { anchorFrom: C, layer: c } = b.current, P = `${C ?? ""}|${c ?? ""}`;
+        return (x !== y || P !== O) && (y = x, O = P, C === "selection" && ie(x, c) && (j = x)), j;
       }
     };
-  }, [e]), o = J(
-    c.subscribe,
-    c.getSnapshot,
-    c.getSnapshot
+  }, [t]), a = le(
+    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";
+  R(
+    () => t.registerOverlay((p, y) => {
+      const O = o.current;
+      if (!O) return;
+      const { anchor: j, anchorFrom: x, layer: C, visible: c = !0, anchorOffset: P } = b.current;
+      let F;
+      if (x === "selection" ? (ie(y, C) && (i.current = (y == null ? void 0 : y.coordinate) ?? void 0), F = i.current) : F = j, !c || !F || !p) {
+        O.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, L, _] = p.project([F[0], F[1], 0]);
+      if (!(D >= 0 && D <= p.width && L >= 0 && L <= p.height) || _ !== void 0 && _ < 0) {
+        O.style.visibility = "hidden";
         return;
       }
-      g.style.visibility = "visible", g.style.transform = `translate(${k}px, ${j}px) ${pe[T ?? "bottom-center"]}`;
+      O.style.visibility = "visible", O.style.transform = `translate(${D}px, ${L}px) ${Ve[P ?? "bottom-center"]}`;
     }),
-    [e]
-  ), E(() => {
-    e.refreshOverlays();
+    [t]
+  ), R(() => {
+    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: u, interactive: w = !0 } = e, v = typeof l == "function" ? l(a) : l;
+  return ce(
+    /* @__PURE__ */ E(
       "div",
       {
-        ref: r,
-        className: f,
+        ref: o,
+        className: g,
         style: {
           position: "absolute",
           top: 0,
@@ -276,38 +407,38 @@ function Me(t) {
           visibility: "hidden",
           // hidden until the first flush positions it — never flashes at the origin
           willChange: "transform",
-          pointerEvents: v ? "auto" : "none",
+          pointerEvents: w ? "auto" : "none",
           ...u
         },
-        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 tt(e = []) {
+  const { controller: t } = N("useOmMap"), s = e.join(" "), o = T(() => {
+    const m = (s ? s.split(" ") : []).flatMap((l) => _e(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((u) => u.subscribe(l));
         return () => {
-          for (const u of f) u();
+          for (const u of g) u();
         };
       },
       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, u) => g !== a[u])) && (a = l), a;
       }
     };
-  }, [e, n]), l = J(r.subscribe, r.getSnapshot, r.getSnapshot);
-  return x(() => e.buildCtx(), [e, l]);
+  }, [t, s]), i = le(o.subscribe, o.getSnapshot, o.getSnapshot);
+  return T(() => t.buildCtx(), [t, i]);
 }
 export {
-  xe as OmLayer,
-  Ce as OmMap,
-  Me as OmOverlay,
-  Te as OmWidget,
-  ke as useOmMap
+  Xe as OmLayer,
+  Ue as OmMap,
+  et as OmOverlay,
+  Ze as OmWidget,
+  tt as useOmMap
 };