@nika-js/onlymap 0.6.0 → 0.6.2

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";
-import { createPortal as de } from "react-dom";
-const ue = xe(null);
+var oe = (e, t, s) => Re(e, typeof t != "symbol" ? t + "" : t, s);
+import { jsxs as X, jsx as O } 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 L, useLayoutEffect as ie, useEffect as x, useImperativeHandle as Pe, useSyncExternalStore as de } from "react";
+import { MANAGED_SLOTS as Ce, slotContainerStyle as ke, FOLD_SIDES as A, MapController as Le, parseWidgetStyle as Me, 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 ue } from "react-dom";
+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: m, updateTriggers: c, ...l } = t;
+  return Q(i, l) && Q(s, m) && Q(o, c);
 }
 class qe {
   constructor(t) {
-    ne(this, "descriptors", /* @__PURE__ */ new Map());
+    oe(this, "descriptors", /* @__PURE__ */ new Map());
     this.controller = t;
   }
   upsert(t) {
@@ -33,37 +33,37 @@ 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]));
-function Ye(e) {
+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 Je(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) {
+function Ye(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 nt = Te(function(t, s) {
+  const { center: o, zoom: i, pitch: m, bearing: c, basemap: l, basemapKey: g, attribution: p, headless: d, widgetStyle: F, widgetsHidden: v, widgetsFold: b = !0, className: y, style: T, children: w } = t, E = h(null), C = h(null), [a, M] = j(null), [k, q] = j(null), [P, D] = j(
     () => Object.fromEntries(N.map((r) => [r, null]))
-  ), [k, fe] = L(!1), [X, me] = L(Be), [ge, be] = L(
+  ), [R, 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(":", "")}`, he = h(new Map(A.map((r) => [r, /* @__PURE__ */ new Set()]))), ee = d ? JSON.stringify(d) : "", z = h({
     badge: null,
     attribution: null
-  }), he = oe((r) => {
-    D((n) => n === r ? n : r);
-  }, []), ve = P(
+  }), pe = se((r) => {
+    q((n) => n === r ? n : r);
+  }, []), ve = L(
     () => Object.fromEntries(
       N.map((r) => [
         r,
         (n) => {
-          I((u) => u[r] === n ? u : { ...u, [r]: n });
+          D((u) => u[r] === n ? u : { ...u, [r]: n });
         }
       ])
     ),
     []
-  ), Se = P(
+  ), Se = L(
     () => Object.fromEntries(
       A.map((r) => [
         r,
@@ -73,147 +73,147 @@ const rt = Ce(function(t, s) {
       ])
     ),
     []
-  ), 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, u) => {
+    const f = he.current.get(r), S = f.size;
+    u ? f.add(n) : f.delete(n), f.size !== S && ye((_) => ({ ..._, [r]: f.size }));
   }, []);
-  se(() => {
-    const r = R.current;
+  ie(() => {
+    const r = E.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));
+      const U = getComputedStyle(r).getPropertyValue("--om-widget-fold-breakpoint").trim();
+      U !== n && (n = U, u = Ae(U, r)), I((we) => b && 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 S = new ResizeObserver(([_]) => f(_.contentRect.width));
+    return S.observe(r), () => S.disconnect();
+  }, [b, ee]), x(() => {
+    (!R || v) && B(null);
+  }, [R, v]);
+  const re = h({ center: o, zoom: i, pitch: m, bearing: c });
+  re.current = { center: o, zoom: i, pitch: m, bearing: c };
   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(() => {
+  const J = h(l);
+  J.current = l;
+  const Y = h(void 0);
+  ie(() => {
     if (!C.current) return;
-    const r = te.current;
-    B.current = V.current;
-    const n = new Me(C.current, {
+    const r = re.current;
+    Y.current = J.current;
+    const n = new Le(C.current, {
       center: r.center,
       zoom: r.zoom,
       pitch: r.pitch,
       bearing: r.bearing,
-      basemap: V.current,
-      basemapKey: l,
-      attribution: g,
+      basemap: J.current,
+      basemapKey: g,
+      attribution: p,
       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);
+        var S;
+        return (S = H.current) == null ? void 0 : S.call(H, f);
       }
     });
-    T(n);
+    M(n);
     let u = !0;
     return n.ready.then(() => {
       var f;
       u && ((f = K.current) == null || f.call(K));
     }), () => {
-      u = !1, T(null), n.destroy();
+      u = !1, M(null), n.destroy();
     };
-  }, [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(() => {
+  }, [ee]), x(() => {
+    !a || Y.current === l || (Y.current = l, a.setBasemap(l ?? null));
+  }, [a, l]), Pe(s, () => a, [a]), x(() => {
+    if (!a) return;
+    const r = { longitude: o == null ? void 0 : o[0], latitude: o == null ? void 0 : o[1], zoom: i, pitch: m, bearing: c };
+    Ye(a.getViewState(), r) && a.setView(r);
+  }, [a, o == null ? void 0 : o[0], o == null ? void 0 : o[1], i, m, c]), x(() => {
     var r;
-    if (c)
-      return (r = M.current) == null || r.call(M, c.getViewState()), c.getStore("viewport").subscribe(() => {
+    if (a)
+      return (r = $.current) == null || r.call($, a.getViewState()), a.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($, a.getViewState());
       });
-  }, [c]);
-  const Oe = P(
+  }, [a]);
+  const Oe = L(
     () => ({
       position: "absolute",
       inset: 0,
       zIndex: 20,
       pointerEvents: "none",
       opacity: "var(--om-widget-opacity, 1)",
-      ...w ? Le(w).properties : void 0
+      ...F ? Me(F).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]
+    [F]
+  ), G = L(() => a ? new qe(a) : null, [a]), ne = L(
+    () => a && G && k ? { controller: a, layers: G, overlayPane: k, corners: P, widgetsHidden: !!v, widgetsFolded: R, foldPanels: V, registerFoldedWidget: te } : null,
+    [a, G, k, P, v, R, 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: E, className: y, style: { position: "relative", overflow: "hidden", ...T }, children: [
+    /* @__PURE__ */ O("div", { ref: C, style: { position: "absolute", inset: 0 } }),
+    /* @__PURE__ */ O(
       "div",
       {
-        ref: he,
+        ref: pe,
         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__ */ O("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
+          ...R && 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(
+          R && A.filter((n) => $e(n) === r && ge[n] > 0).map((n) => {
+            const u = 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" || !u || (B(null), (S = f.currentTarget.querySelector("[data-om-fold-toggle]")) == null || S.focus(), f.preventDefault(), f.stopPropagation());
                 },
                 children: [
-                  /* @__PURE__ */ E(
+                  /* @__PURE__ */ O(
                     "button",
                     {
                       type: "button",
                       "data-om-fold-toggle": n,
                       "aria-expanded": u,
-                      "aria-controls": `${Q}-${n}`,
+                      "aria-controls": `${Z}-${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);
+                        B(u ? null : n), u || requestAnimationFrame(() => {
+                          var S;
+                          const f = (S = E.current) == null ? void 0 : S.querySelector(`[data-om-fold-panel="${n}"]`);
+                          f && Je(f);
                         });
                       },
                       children: "⋯"
                     }
                   ),
-                  /* @__PURE__ */ E(
+                  /* @__PURE__ */ O(
                     "div",
                     {
-                      id: `${Q}-${n}`,
+                      id: `${Z}-${n}`,
                       ref: Se[n],
                       "data-om-fold-panel": n,
                       role: "region",
@@ -227,33 +227,33 @@ const rt = Ce(function(t, s) {
               `fold-${n}`
             );
           }),
-          r === "bottom-start" && /* @__PURE__ */ E(
+          r === "bottom-start" && /* @__PURE__ */ O(
             "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__ */ O(
             "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__ */ O(fe.Provider, { value: ne, children: w })
   ] });
-}), Je = /* @__PURE__ */ new Set([
+}), Ge = /* @__PURE__ */ new Set([
   "id",
   "type",
   "data",
@@ -264,6 +264,8 @@ const rt = Ce(function(t, s) {
   "filterSoftRange",
   "filterCategoryField",
   "filterCategories",
+  "dash",
+  "dashJustified",
   "source",
   "streamKey",
   "flush",
@@ -273,12 +275,12 @@ const rt = Ce(function(t, s) {
   "onClick",
   "onHover"
 ]);
-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,
+function Ue(e) {
+  const t = {};
+  for (const [s, o] of Object.entries(e))
+    !Ge.has(s) && o !== void 0 && (t[s] = o);
+  return {
+    id: e.id,
     type: e.type,
     data: e.data,
     label: e.label,
@@ -288,63 +290,68 @@ function nt(e) {
     filterSoftRange: e.filterSoftRange,
     filterCategoryField: e.filterCategoryField,
     filterCategories: e.filterCategories,
+    dash: e.dash,
+    dashJustified: e.dashJustified,
     source: e.source,
     key: e.streamKey,
     flush: e.flush,
     refresh: e.refresh,
     terrain: e.terrain,
     updateTriggers: e.updateTriggers,
-    props: i
+    ...Object.keys(t).length > 0 ? { props: t } : {}
   };
+}
+function ot(e) {
+  const { controller: t, layers: s } = W("OmLayer"), { id: o } = e, i = Ue(e);
   x(() => {
-    s.upsert(b);
+    s.upsert(i);
   }), 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(
+  const c = h(e.onHover);
+  return c.current = e.onHover, x(
     () => t.watchPicks((l) => {
-      var g, d, w;
+      var g, p, d;
       if (l === null) {
-        (g = a.current) == null || g.call(a, null);
+        (g = c.current) == null || g.call(c, 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" ? (p = m.current) == null || p.call(m, l) : (d = c.current) == null || d.call(c, 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);
+function st({ position: e = "top-start", order: t, fold: s, className: o, style: i, children: m }) {
+  const { corners: c, widgetsHidden: l, widgetsFolded: g, foldPanels: p, registerFoldedWidget: d } = W("OmWidget"), F = ce(), v = Ke(e) ?? "top-start", b = g && 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(
+      return d(y, F, b), () => d(y, F, !1);
+  }, [y, F, b, d]), v === "manual")
+    return /* @__PURE__ */ O("div", { className: o, style: { pointerEvents: "auto", ...i }, children: m });
+  const T = b && y ? p[y] : c[v];
+  return T ? ue(
+    /* @__PURE__ */ O(
       "div",
       {
         "data-om-react-widget": "",
-        "data-om-fold-origin-slot": p ? v : void 0,
+        "data-om-fold-origin-slot": b ? 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
+          pointerEvents: l ? "none" : (i == null ? void 0 : i.pointerEvents) ?? "auto",
+          visibility: l ? "hidden" : i == null ? void 0 : i.visibility
         },
-        children: b
+        children: m
       }
     ),
-    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 = {
+const Xe = {
   "top-left": "translate(0, 0)",
   "top-center": "translate(-50%, 0)",
   "top-right": "translate(-100%, 0)",
@@ -355,52 +362,52 @@ const Ue = {
   "bottom-center": "translate(-50%, -100%)",
   "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 p = t.getStore("selection");
-    let y, S, $ = null;
+function it(e) {
+  const { controller: t, overlayPane: s } = W("OmOverlay"), o = h(null), i = h(void 0), m = h(e);
+  m.current = e;
+  const c = L(() => {
+    const b = t.getStore("selection");
+    let y, T, w = null;
     return {
-      subscribe: p.subscribe,
+      subscribe: b.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 E = b.getSnapshot(), { anchorFrom: C, layer: a, selectionType: M } = m.current, k = `${C ?? ""}|${a ?? ""}|${M ?? ""}`;
+        return (E !== y || k !== T) && (y = E, T = k, C === "selection" && le(E, a, M, t.getLastPickType()) && (w = E)), w;
       }
     };
-  }, [t]), a = ce(
-    m.subscribe,
-    m.getSnapshot,
-    m.getSnapshot
+  }, [t]), l = de(
+    c.subscribe,
+    c.getSnapshot,
+    c.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";
+    () => t.registerOverlay((b, y, T) => {
+      const w = o.current;
+      if (!w) return;
+      const { anchor: E, anchorFrom: C, layer: a, selectionType: M, visible: k = !0, anchorOffset: q } = m.current;
+      let P;
+      if (C === "selection" ? (le(y, a, M, T) && (i.current = (y == null ? void 0 : y.coordinate) ?? void 0), P = i.current) : P = E, !k || !P || !b) {
+        w.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, R, I] = b.project([P[0], P[1], P[2] ?? 0]);
+      if (!(D >= 0 && D <= b.width && R >= 0 && R <= b.height) || I !== void 0 && I < 0) {
+        w.style.visibility = "hidden";
         return;
       }
-      S.style.visibility = "visible", S.style.transform = `translate(${D}px, ${j}px) ${Ue[T ?? "bottom-center"]}`;
+      w.style.visibility = "visible", w.style.transform = `translate(${D}px, ${R}px) ${Xe[q ?? "bottom-center"]}`;
     }),
     [t]
   ), x(() => {
     t.refreshOverlays();
   });
-  const { children: l, className: g, style: d, interactive: w = !0 } = e, v = typeof l == "function" ? l(a) : l;
-  return de(
-    /* @__PURE__ */ E(
+  const { children: g, className: p, style: d, interactive: F = !0 } = e, v = typeof g == "function" ? g(l) : g;
+  return ue(
+    /* @__PURE__ */ O(
       "div",
       {
         ref: o,
-        className: g,
+        className: p,
         style: {
           position: "absolute",
           top: 0,
@@ -408,7 +415,7 @@ function st(e) {
           visibility: "hidden",
           // hidden until the first flush positions it — never flashes at the origin
           willChange: "transform",
-          pointerEvents: w ? "auto" : "none",
+          pointerEvents: F ? "auto" : "none",
           ...d
         },
         children: v
@@ -417,29 +424,29 @@ function st(e) {
     s
   );
 }
-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;
+function at(e = []) {
+  const { controller: t } = W("useOmMap"), s = e.join(" "), o = L(() => {
+    const c = (s ? s.split(" ") : []).flatMap((g) => Ne(g) ? [t.getStore(g)] : (console.warn(`[onlymapjs] useOmMap: "${g}" is not a watch token on the React front-end — expected viewport, selection, layers, or data:<layerId>.`), []));
+    let l;
     return {
-      subscribe: (l) => {
-        const g = m.map((d) => d.subscribe(l));
+      subscribe: (g) => {
+        const p = c.map((d) => d.subscribe(g));
         return () => {
-          for (const d of g) d();
+          for (const d of p) d();
         };
       },
       getSnapshot: () => {
-        const l = m.map((g) => g.getSnapshot());
-        return (!a || l.some((g, d) => g !== a[d])) && (a = l), a;
+        const g = c.map((p) => p.getSnapshot());
+        return (!l || g.some((p, d) => p !== l[d])) && (l = g), l;
       }
     };
-  }, [t, s]), i = ce(o.subscribe, o.getSnapshot, o.getSnapshot);
-  return P(() => t.buildCtx(), [t, i]);
+  }, [t, s]), i = de(o.subscribe, o.getSnapshot, o.getSnapshot);
+  return L(() => t.buildCtx(), [t, i]);
 }
 export {
-  nt as OmLayer,
-  rt as OmMap,
-  st as OmOverlay,
-  ot as OmWidget,
-  it as useOmMap
+  ot as OmLayer,
+  nt as OmMap,
+  it as OmOverlay,
+  st as OmWidget,
+  at as useOmMap
 };

package/dist/region-export-controller.d.ts

@@ -0,0 +1,37 @@
+declare class RegionExportController {
+    private readonly mapEl;
+    /** `hadElement` records whether an authored `<om-layer>` existed WHEN THE TILESET LOADED — see `visibleTilesets` for why "no element now" alone can't mean "removed". */
+    private tilesets;
+    constructor(mapEl: Element);
+    /** The last committed ring on `target` — a draw widget's own polygon, same coords `snapshotIR`/measure read. `null` when nothing's been drawn yet (or the last shape isn't a polygon). */
+    private lastRing;
+    /**
+     * Registered tilesets whose OWN `<om-layer>` is currently visible (spec:
+     * issue #34 tier 1 — "measure/export only what's visible"). `visible`
+     * reads directly off the DOM attribute — `!== "false"`, the exact check
+     * `toggle-layer` itself uses (actions.ts) — not a reactive-props lookup,
+     * so this stays consistent with a plain `visible="false"` author edit AND
+     * with a live `toggle-layer` click, without needing this controller to
+     * carry `layerIRs` around just for one boolean. A layer hidden AFTER it
+     * loaded (the common case — someone toggles it off before exporting) is
+     * excluded; one never registered at all (never fired `om-tileset-load`)
+     * was already excluded by construction.
+     *
+     * A layer whose `<om-layer>` has since been REMOVED from the DOM (a
+     * manifest edit, a story step, a framework re-render) is excluded too, and
+     * its registry entry dropped on the way past — `this.tilesets` is only ever
+     * appended to, so otherwise a deleted layer's geometry kept exporting
+     * indefinitely.
+     *
+     * That's gated on `hadElement`, captured when the load event fired, rather
+     * than on "no element right now": a programmatically-built layer legitimately
+     * has no `<om-layer>` at all, and treating a missing element as removal
+     * would exclude every such layer from export permanently. Seen-then-gone is
+     * removal; never-seen is a DOM-less layer, which stays exportable.
+     */
+    private visibleTilesets;
+    exportRegion(target: string, format: "glb" | "b3dm"): Promise<void>;
+}
+/** Exported so the `draw` widget can call this EAGERLY at render time (when `export-3d` is configured), before the user has drawn anything — see the constructor's own doc comment for why lazy binding on first export doesn't work. */
+export declare function getRegionExportController(mapEl: Element): RegionExportController;
+export {};