@nika-js/onlymap 0.4.4 → 0.4.6

package/dist/react.js

@@ -1,193 +1,194 @@
-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);
+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 J(e, t) {
+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 ze(e, t) {
+function We(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);
+  return U(i, a) && U(s, b) && U(o, m);
 }
-class Ae {
+class qe {
   constructor(t) {
-    re(this, "descriptors", /* @__PURE__ */ new Map());
+    ne(this, "descriptors", /* @__PURE__ */ new Map());
     this.controller = t;
   }
   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()]));
+    s && We(s, t) || (this.descriptors.set(t.id, t), this.controller.setLayers([...this.descriptors.values()]));
   }
   remove(t) {
     this.descriptors.delete(t) && this.controller.setLayers([...this.descriptors.values()]);
   }
 }
-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 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 We(e, t) {
+function Ge(e, t) {
   return Object.entries(t).some(([s, o]) => o !== void 0 && e[s] !== o);
 }
-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({
+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
-  }), pe = ne((r) => {
+  }), he = oe((r) => {
     D((n) => n === r ? n : r);
-  }, []), he = T(
+  }, []), ve = P(
     () => Object.fromEntries(
-      H.map((r) => [
+      N.map((r) => [
         r,
         (n) => {
-          _((d) => d[r] === n ? d : { ...d, [r]: n });
+          I((u) => u[r] === n ? u : { ...u, [r]: n });
         }
       ])
     ),
     []
-  ), ve = T(
+  ), Se = P(
     () => Object.fromEntries(
-      I.map((r) => [
+      A.map((r) => [
         r,
         (n) => {
-          fe((d) => d[r] === n ? d : { ...d, [r]: n });
+          me((u) => u[r] === n ? u : { ...u, [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 }));
+  ), 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 }));
   }, []);
-  oe(() => {
-    const r = x.current;
+  se(() => {
+    const r = R.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));
+    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 (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 (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 = ee.current;
-    V.current = q.current;
-    const n = new Pe(C.current, {
+    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: q.current,
+      basemap: V.current,
       basemapKey: l,
       attribution: g,
-      headless: u ? u === !0 ? {} : u : void 0,
+      headless: d ? d === !0 ? {} : d : void 0,
       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);
+        var O;
+        return (O = H.current) == null ? void 0 : O.call(H, f);
       }
     });
-    P(n);
-    let d = !0;
+    T(n);
+    let u = !0;
     return n.ready.then(() => {
       var f;
-      d && ((f = A.current) == null || f.call(A));
+      u && ((f = K.current) == null || f.call(K));
     }), () => {
-      d = !1, P(null), n.destroy();
+      u = !1, T(null), n.destroy();
     };
-  }, [X]), R(() => {
-    !c || V.current === a || (V.current = a, c.setBasemap(a ?? null));
-  }, [c, a]), Fe(s, () => c, [c]), R(() => {
+  }, [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 };
-    We(c.getViewState(), r) && c.setView(r);
-  }, [c, o == null ? void 0 : o[0], o == null ? void 0 : o[1], i, b, m]), R(() => {
+    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 = k.current) == null || r.call(k, c.getViewState()), c.getStore("viewport").subscribe(() => {
+      return (r = M.current) == null || r.call(M, c.getViewState()), c.getStore("viewport").subscribe(() => {
         var n;
-        return (n = k.current) == null ? void 0 : n.call(k, c.getViewState());
+        return (n = M.current) == null ? void 0 : n.call(M, c.getViewState());
       });
   }, [c]);
-  const Se = T(
+  const Oe = P(
     () => ({
       position: "absolute",
       inset: 0,
       zIndex: 20,
       pointerEvents: "none",
       opacity: "var(--om-widget-opacity, 1)",
-      ...w ? Me(w).properties : void 0
+      ...w ? Le(w).properties : void 0
     }),
     [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]
+  ), 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__ */ G("div", { ref: x, className: y, style: { position: "relative", overflow: "hidden", ...O }, children: [
+  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: pe,
+        ref: he,
         style: { position: "absolute", top: 0, left: 0, zIndex: 10, pointerEvents: "none" }
       }
     ),
-    /* @__PURE__ */ E("div", { "data-om-widget-layer": "", style: Se, children: H.map((r) => /* @__PURE__ */ G(
+    /* @__PURE__ */ E("div", { "data-om-widget-layer": "", style: Oe, children: N.map((r) => /* @__PURE__ */ J(
       "div",
       {
         "data-om-widget-slot": r,
-        ref: he[r],
+        ref: ve[r],
         style: {
-          ...Ke[r],
-          ...M && r === "bottom-end" ? { bottom: "calc(var(--om-widget-inset-y, 12px) + 28px)" } : void 0
+          ...Ve[r],
+          ...k && 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(
+          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: { ...Le(n), display: v ? "none" : "flex" },
+                style: { ..._e(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());
+                  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(
@@ -195,15 +196,15 @@ const Ue = Re(function(t, s) {
                     {
                       type: "button",
                       "data-om-fold-toggle": n,
-                      "aria-expanded": d,
-                      "aria-controls": `${U}-${n}`,
-                      "aria-label": `${d ? "Close" : "Open"} ${n} map controls`,
-                      style: $e(),
+                      "aria-expanded": u,
+                      "aria-controls": `${Q}-${n}`,
+                      "aria-label": `${u ? "Close" : "Open"} ${n} map controls`,
+                      style: je(),
                       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);
+                        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: "⋯"
@@ -212,13 +213,13 @@ const Ue = Re(function(t, s) {
                   /* @__PURE__ */ E(
                     "div",
                     {
-                      id: `${U}-${n}`,
-                      ref: ve[n],
+                      id: `${Q}-${n}`,
+                      ref: Se[n],
                       "data-om-fold-panel": n,
                       role: "region",
                       "aria-label": `${n} map controls`,
-                      hidden: !d,
-                      style: { ...je(n), display: d ? "flex" : "none" }
+                      hidden: !u,
+                      style: { ...De(n), display: u ? "flex" : "none" }
                     }
                   )
                 ]
@@ -233,7 +234,7 @@ const Ue = Re(function(t, s) {
               ref: (n) => {
                 z.current.badge = n;
               },
-              style: se
+              style: ie
             }
           ),
           r === "bottom-end" && /* @__PURE__ */ E(
@@ -243,16 +244,16 @@ const Ue = Re(function(t, s) {
               ref: (n) => {
                 z.current.attribution = n;
               },
-              style: se
+              style: ie
             }
           )
         ]
       },
       r
     )) }),
-    te && /* @__PURE__ */ E(ue.Provider, { value: te, children: j })
+    re && /* @__PURE__ */ E(ue.Provider, { value: re, children: $ })
   ] });
-}), qe = /* @__PURE__ */ new Set([
+}), Je = /* @__PURE__ */ new Set([
   "id",
   "type",
   "data",
@@ -272,10 +273,10 @@ const Ue = Re(function(t, s) {
   "onClick",
   "onHover"
 ]);
-function Xe(e) {
-  const { controller: t, layers: s } = N("OmLayer"), { id: o } = e, i = {};
+function nt(e) {
+  const { controller: t, layers: s } = W("OmLayer"), { id: o } = e, i = {};
   for (const [l, g] of Object.entries(e))
-    !qe.has(l) && g !== void 0 && (i[l] = g);
+    !Je.has(l) && g !== void 0 && (i[l] = g);
   const b = {
     id: o,
     type: e.type,
@@ -295,33 +296,33 @@ function Xe(e) {
     updateTriggers: e.updateTriggers,
     props: i
   };
-  R(() => {
+  x(() => {
     s.upsert(b);
-  }), R(() => () => s.remove(o), [s, o]);
+  }), 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, R(
+  return a.current = e.onHover, x(
     () => t.watchPicks((l) => {
-      var g, u, w;
+      var g, d, w;
       if (l === null) {
         (g = a.current) == null || g.call(a, null);
         return;
       }
-      l.layerId === o && (l.type === "click" ? (u = m.current) == null || u.call(m, l) : (w = a.current) == null || w.call(a, l));
+      l.layerId === o && (l.type === "click" ? (d = m.current) == null || d.call(m, l) : (w = a.current) == null || w.call(a, l));
     }),
     [t, o]
   ), null;
 }
-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(() => {
+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 u(y, w, p), () => u(y, w, !1);
-  }, [y, w, p, u]), v === "manual")
+      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 O = p && y ? g[y] : m[v];
-  return O ? ce(
+  const S = p && y ? g[y] : m[v];
+  return S ? de(
     /* @__PURE__ */ E(
       "div",
       {
@@ -337,13 +338,13 @@ function Ze({ position: e = "top-start", order: t, fold: s, className: o, style:
         children: b
       }
     ),
-    O
+    S
   ) : null;
 }
-function ie(e, t) {
+function ae(e, t) {
   return !t || (e == null ? void 0 : e.layerId) === t;
 }
-const Ve = {
+const Ue = {
   "top-left": "translate(0, 0)",
   "top-center": "translate(-50%, 0)",
   "top-right": "translate(-100%, 0)",
@@ -354,47 +355,47 @@ const Ve = {
   "bottom-center": "translate(-50%, -100%)",
   "bottom-right": "translate(-100%, -100%)"
 };
-function et(e) {
-  const { controller: t, overlayPane: s } = N("OmOverlay"), o = h(null), i = h(void 0), b = h(e);
+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 = T(() => {
+  const m = P(() => {
     const p = t.getStore("selection");
-    let y, O, j = null;
+    let y, S, $ = null;
     return {
       subscribe: p.subscribe,
       getSnapshot: () => {
-        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;
+        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)), $;
       }
     };
-  }, [t]), a = le(
+  }, [t]), a = ce(
     m.subscribe,
     m.getSnapshot,
     m.getSnapshot
   );
-  R(
+  x(
     () => 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;
+      const S = o.current;
+      if (!S) return;
+      const { anchor: $, anchorFrom: R, layer: C, visible: c = !0, anchorOffset: T } = 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";
+      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 [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";
+      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;
       }
-      O.style.visibility = "visible", O.style.transform = `translate(${D}px, ${L}px) ${Ve[P ?? "bottom-center"]}`;
+      S.style.visibility = "visible", S.style.transform = `translate(${D}px, ${j}px) ${Ue[T ?? "bottom-center"]}`;
     }),
     [t]
-  ), R(() => {
+  ), x(() => {
     t.refreshOverlays();
   });
-  const { children: l, className: g, style: u, interactive: w = !0 } = e, v = typeof l == "function" ? l(a) : l;
-  return ce(
+  const { children: l, className: g, style: d, interactive: w = !0 } = e, v = typeof l == "function" ? l(a) : l;
+  return de(
     /* @__PURE__ */ E(
       "div",
       {
@@ -408,7 +409,7 @@ function et(e) {
           // hidden until the first flush positions it — never flashes at the origin
           willChange: "transform",
           pointerEvents: w ? "auto" : "none",
-          ...u
+          ...d
         },
         children: v
       }
@@ -416,29 +417,29 @@ function et(e) {
     s
   );
 }
-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>.`), []));
+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: (l) => {
-        const g = m.map((u) => u.subscribe(l));
+        const g = m.map((d) => d.subscribe(l));
         return () => {
-          for (const u of g) u();
+          for (const d of g) d();
         };
       },
       getSnapshot: () => {
         const l = m.map((g) => g.getSnapshot());
-        return (!a || l.some((g, u) => g !== a[u])) && (a = l), a;
+        return (!a || l.some((g, d) => g !== a[d])) && (a = l), a;
       }
     };
-  }, [t, s]), i = le(o.subscribe, o.getSnapshot, o.getSnapshot);
-  return T(() => t.buildCtx(), [t, i]);
+  }, [t, s]), i = ce(o.subscribe, o.getSnapshot, o.getSnapshot);
+  return P(() => t.buildCtx(), [t, i]);
 }
 export {
-  Xe as OmLayer,
-  Ue as OmMap,
-  et as OmOverlay,
-  Ze as OmWidget,
-  tt as useOmMap
+  nt as OmLayer,
+  rt as OmMap,
+  st as OmOverlay,
+  ot as OmWidget,
+  it as useOmMap
 };

package/dist/runtime-core.d.ts

@@ -52,6 +52,14 @@ export interface RuntimeCoreCallbacks {
      * deck reports none (e.g. off-globe).
      */
     onMapPoint?: (coordinate: [number, number] | null, kind: "click" | "hover") => void;
+    /**
+     * A tileset-bearing layer (Tile3DLayer) finished loading its root tileset
+     * — the consumer hook for tools that must reach the LIVE deck tileset
+     * (region export, custom traversal) which the IR/metadata surface can't
+     * expose. `tileset` is deck's `Tileset3D` (typed `unknown` here to avoid a
+     * @loaders.gl/tiles type dependency in the core).
+     */
+    onTilesetLoad?: (layerId: string, tileset: unknown) => void;
     /**
      * Runtime error boundary (spec: "Runtime error boundary") — deck.gl-level
      * failures (a crashing accessor, an incompatible prop) formatted into the

package/dist/testing.d.ts

@@ -51,6 +51,12 @@ export interface TestHarness {
     pick(opts: PickOptions): Promise<void>;
     /** Ends the current selection (a hover-off) — the path that auto-hides tooltips. */
     clearSelection(): Promise<void>;
+    /**
+     * Feeds a map coordinate through the same path a real deck click/hover
+     * takes — drives the draw controller and fires the `om-map-point` event.
+     * For testing custom capture tools (sketch/AOI) without a GPU.
+     */
+    mapPoint(coordinate: [number, number] | null, kind?: "click" | "hover"): Promise<void>;
     /**
      * Sets the camera directly (center/zoom/pitch/bearing) — everything
      * viewport-derived reacts for real: `viewport`-watching widgets,

package/dist/version.d.ts

@@ -5,4 +5,4 @@
  * the build rootDir, and a `define` would need repeating across vite/vitest/
  * vite-node configs.
  */
-export declare const LIBRARY_VERSION = "0.4.4";
+export declare const LIBRARY_VERSION = "0.4.6";

package/dist/widget-layout.d.ts

@@ -32,6 +32,26 @@ export declare function foldToggleSlot(side: FoldSide): ManagedSlot;
 /** Shared drawer plumbing styles for the HTML and React front-ends. */
 export declare function foldDrawerStyle(side?: FoldSide): Record<string, string | number>;
 export declare function foldPanelStyle(side: FoldSide): Record<string, string | number>;
+/** Default fold breakpoint (px) when `--om-widget-fold-breakpoint` is unset. */
+export declare const DEFAULT_FOLD_BREAKPOINT_PX = 640;
+/**
+ * Hysteresis band (px) so a map whose width oscillates around the breakpoint
+ * (drag-resize, flex, split-pane, a CSS transition) doesn't flap fold/unfold
+ * every ResizeObserver tick: fold at width ≤ breakpoint, unfold only once
+ * width ≥ breakpoint + this margin.
+ */
+export declare const FOLD_HYSTERESIS_PX = 40;
+/**
+ * `--om-widget-fold-breakpoint` (already read to `raw`) → px — ONE resolver
+ * for both front-ends so they can't fold at different widths. Accepts px, a
+ * bare number, or author units (rem/em/vw…) resolved through a transient
+ * probe appended to `probeParent` (the browser is the unit converter — no
+ * second implementation). Takes the raw string (not the element) so callers
+ * can cache on it and skip the probe when unchanged.
+ */
+export declare function resolveFoldBreakpointPx(raw: string, probeParent: HTMLElement): number;
+/** Fold decision with hysteresis — pure, shared by both lanes. `currentlyFolded` supplies the band's direction. */
+export declare function shouldFoldAtWidth(width: number, breakpointPx: number, currentlyFolded: boolean): boolean;
 export declare function foldToggleStyle(): Record<string, string | number>;
 /** Legacy 4-corner vocabulary (pre-0.4.1) — accepted forever, mapped LOGICALLY. */
 export declare const LEGACY_POSITION_ALIASES: Readonly<Record<string, ManagedSlot>>;

package/docs/testing.md

@@ -111,7 +111,7 @@ it("panning away empties viewport-scoped widgets", async () => {
 });
 ```
 
-The harness API: `pick` (synthetic picks fed through the exact code path real deck.gl picks take — columnar layers pick object-less by index, exactly like live), `clearSelection` (hover-off; runs the tooltip auto-hide path), `emit` (any action, same payload contract as `ctx.emit`/`data-emit`), `setView`, `layers()` (the live IR), `flush`, `unmount`. Every verb settles the library's internal batching before resolving — **you never write a sleep**.
+The harness API: `pick` (synthetic picks fed through the exact code path real deck.gl picks take — columnar layers pick object-less by index, exactly like live), `clearSelection` (hover-off; runs the tooltip auto-hide path), `mapPoint` (a click/hover map coordinate through the real onMapPoint path — fires `om-map-point`, drives the draw controller), `emit` (any action, same payload contract as `ctx.emit`/`data-emit`), `setView`, `layers()` (the live IR), `flush`, `unmount`. Every verb settles the library's internal batching before resolving — **you never write a sleep**.
 
 **Remote data:** mock `fetch` and the harness waits for it via the readiness signal:
 
@@ -137,7 +137,9 @@ npx playwright install chromium
 npx onlymapjs check-layout public/dashboard.html
 ```
 
-`check-layout` serves the manifest over loopback HTTP (so relative data URLs work), executes it in an isolated headless Chromium context, opens responsive drawers, and checks real geometry/hit-testing at 360, 640, 768, and 1024px. It prints one JSON diagnostic per problem and exits 0 when clean or 1 on layout errors. Because it executes the page, only run it on manifests you trust.
+`check-layout` serves the manifest over loopback HTTP (so relative data URLs work), executes it in an isolated headless Chromium context, opens responsive drawers, and checks real geometry/hit-testing at 360, 640, 768, and 1024px. It prints one JSON diagnostic per problem and exits 0 when clean or 1 on layout errors. Because it executes the page, only run it on manifests you trust. Point it at a **browser-runnable** manifest — one that imports the built library (`@nika-js/onlymap`) — not a framework dev-server page that relies on on-the-fly transpilation (a page importing raw `.ts` will fail to render a canvas, and the tool reports exactly that).
+
+To run the same audit inside your own Playwright suite instead of the CLI, import it: `auditLayout(page, { widths })` returns the `LayoutDiagnostic[]` (the CLI is a thin wrapper over it), and `settleLayout(page)` awaits the render/fonts/attribution settle contract. Both come from `@nika-js/onlymap`.
 
 1. **`await mapEl.ready`** — resolves when the renderer initialized *and* the first reconcile ran *and* every declared `data` URL settled. Never `waitForTimeout`.
 2. **`mapEl.projectInternal([lng, lat])`** — derive click/hover pixels from the map's own projection instead of hardcoding coordinates.