@nika-js/onlymap 0.6.1 → 0.6.4

package/dist/react.js

@@ -1,10 +1,10 @@
 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 oe = (e, t, s) => Re(e, typeof t != "symbol" ? t + "" : t, s);
-import { jsxs as X, jsx as w } from "react/jsx-runtime";
-import { createContext as xe, useContext as Fe, forwardRef as Te, useRef as h, useState as j, useId as ce, useCallback as se, useMemo as M, useLayoutEffect as ie, useEffect as F, useImperativeHandle as Pe, useSyncExternalStore as ue } from "react";
-import { MANAGED_SLOTS as Ce, slotContainerStyle as ke, FOLD_SIDES as A, MapController as Me, parseWidgetStyle as Le, foldToggleSlot as $e, foldToggleStyle as je, foldPanelStyle as De, foldDrawerStyle as _e, resolveFoldBreakpointPx as Ae, shouldFoldAtWidth as Ie, DEFAULT_FOLD_BREAKPOINT_PX as ze, resolveSlot as Ke, foldSideForSlot as He, isStoreToken as Ne } from "@nika-js/onlymap";
-import { createPortal as de } from "react-dom";
+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(fe);
@@ -17,8 +17,8 @@ function Q(e, 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: y, updateTriggers: m, ...a } = t;
-  return Q(i, a) && Q(s, y) && Q(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) {
@@ -34,87 +34,87 @@ class qe {
   }
 }
 const N = Ce, Ve = Object.fromEntries(N.map((e) => [e, ke(e)])), ae = { display: "flex", pointerEvents: "none", order: 2147483647 }, Be = Object.fromEntries(A.map((e) => [e, null]));
-function Ye(e) {
+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 = Te(function(t, s) {
-  const { center: o, zoom: i, pitch: y, bearing: m, basemap: a, basemapKey: l, attribution: g, headless: u, widgetStyle: O, widgetsHidden: v, widgetsFold: p = !0, className: b, style: T, children: E } = t, R = h(null), P = h(null), [c, L] = j(null), [C, q] = j(null), [k, D] = j(
+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]))
-  ), [x, I] = j(!1), [V, me] = j(Be), [ge, ye] = j(
+  ), [R, I] = j(!1), [V, me] = j(Be), [ge, ye] = j(
     () => Object.fromEntries(A.map((r) => [r, 0]))
-  ), [be, B] = j(null), Z = `om-react-fold-${ce().replaceAll(":", "")}`, pe = h(new Map(A.map((r) => [r, /* @__PURE__ */ new Set()]))), ee = u ? JSON.stringify(u) : "", z = h({
+  ), [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 = se((r) => {
+  }), pe = se((r) => {
     q((n) => n === r ? n : r);
-  }, []), ve = M(
+  }, []), ve = L(
     () => Object.fromEntries(
       N.map((r) => [
         r,
         (n) => {
-          D((d) => d[r] === n ? d : { ...d, [r]: n });
+          D((u) => u[r] === n ? u : { ...u, [r]: n });
         }
       ])
     ),
     []
-  ), Se = M(
+  ), Se = L(
     () => Object.fromEntries(
       A.map((r) => [
         r,
         (n) => {
-          me((d) => d[r] === n ? d : { ...d, [r]: n });
+          me((u) => u[r] === n ? u : { ...u, [r]: n });
         }
       ])
     ),
     []
-  ), te = se((r, n, d) => {
-    const f = pe.current.get(r), S = f.size;
-    d ? f.add(n) : f.delete(n), f.size !== S && ye((_) => ({ ..._, [r]: f.size }));
+  ), 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 }));
   }, []);
   ie(() => {
-    const r = R.current;
+    const r = E.current;
     if (!r) return;
-    let n, d = ze;
+    let n, u = ze;
     const f = (_) => {
       const U = getComputedStyle(r).getPropertyValue("--om-widget-fold-breakpoint").trim();
-      U !== n && (n = U, d = Ae(U, r)), I((we) => p && Ie(_, d, we));
+      U !== n && (n = U, u = Ae(U, r)), I((we) => b && Ie(_, u, we));
     };
-    if (f(r.getBoundingClientRect().width || (u ? u === !0 ? 800 : u.width ?? 800 : 0)), typeof ResizeObserver > "u") return;
+    if (f(r.getBoundingClientRect().width || (d ? d === !0 ? 800 : d.width ?? 800 : 0)), typeof ResizeObserver > "u") return;
     const S = new ResizeObserver(([_]) => f(_.contentRect.width));
     return S.observe(r), () => S.disconnect();
-  }, [p, ee]), F(() => {
-    (!x || v) && B(null);
-  }, [x, v]);
-  const re = h({ center: o, zoom: i, pitch: y, bearing: m });
-  re.current = { center: o, zoom: i, pitch: y, bearing: m };
+  }, [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 $ = h(t.onViewStateChange);
   $.current = t.onViewStateChange;
   const H = h(t.onRuntimeError);
   H.current = t.onRuntimeError;
-  const Y = h(a);
-  Y.current = a;
-  const G = h(void 0);
+  const J = h(l);
+  J.current = l;
+  const Y = h(void 0);
   ie(() => {
-    if (!P.current) return;
+    if (!C.current) return;
     const r = re.current;
-    G.current = Y.current;
-    const n = new Me(P.current, {
+    Y.current = J.current;
+    const n = new Le(C.current, {
       center: r.center,
       zoom: r.zoom,
       pitch: r.pitch,
       bearing: r.bearing,
-      basemap: Y.current,
-      basemapKey: l,
-      attribution: g,
-      headless: u ? u === !0 ? {} : u : void 0,
+      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
@@ -124,63 +124,63 @@ const rt = Te(function(t, s) {
         return (S = H.current) == null ? void 0 : S.call(H, f);
       }
     });
-    L(n);
-    let d = !0;
+    M(n);
+    let u = !0;
     return n.ready.then(() => {
       var f;
-      d && ((f = K.current) == null || f.call(K));
+      u && ((f = K.current) == null || f.call(K));
     }), () => {
-      d = !1, L(null), n.destroy();
+      u = !1, M(null), n.destroy();
     };
-  }, [ee]), F(() => {
-    !c || G.current === a || (G.current = a, c.setBasemap(a ?? null));
-  }, [c, a]), Pe(s, () => c, [c]), F(() => {
-    if (!c) return;
-    const r = { longitude: o == null ? void 0 : o[0], latitude: o == null ? void 0 : o[1], zoom: i, pitch: y, bearing: m };
-    Ge(c.getViewState(), r) && c.setView(r);
-  }, [c, o == null ? void 0 : o[0], o == null ? void 0 : o[1], i, y, m]), F(() => {
+  }, [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 = $.current) == null || r.call($, c.getViewState()), c.getStore("viewport").subscribe(() => {
+    if (a)
+      return (r = $.current) == null || r.call($, a.getViewState()), a.getStore("viewport").subscribe(() => {
         var n;
-        return (n = $.current) == null ? void 0 : n.call($, c.getViewState());
+        return (n = $.current) == null ? void 0 : n.call($, a.getViewState());
       });
-  }, [c]);
-  const Oe = M(
+  }, [a]);
+  const Oe = L(
     () => ({
       position: "absolute",
       inset: 0,
       zIndex: 20,
       pointerEvents: "none",
       opacity: "var(--om-widget-opacity, 1)",
-      ...O ? Le(O).properties : void 0
+      ...F ? Me(F).properties : void 0
     }),
-    [O]
-  ), J = M(() => c ? new qe(c) : null, [c]), ne = M(
-    () => c && J && C ? { controller: c, layers: J, overlayPane: C, corners: k, widgetsHidden: !!v, widgetsFolded: x, foldPanels: V, registerFoldedWidget: te } : null,
-    [c, J, C, k, v, x, V, te]
+    [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__ */ X("div", { ref: R, className: b, style: { position: "relative", overflow: "hidden", ...T }, children: [
-    /* @__PURE__ */ w("div", { ref: P, style: { position: "absolute", inset: 0 } }),
-    /* @__PURE__ */ w(
+  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__ */ w("div", { "data-om-widget-layer": "", style: Oe, children: N.map((r) => /* @__PURE__ */ X(
+    /* @__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],
-          ...x && 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: [
-          x && A.filter((n) => $e(n) === r && ge[n] > 0).map((n) => {
-            const d = be === n;
+          R && A.filter((n) => $e(n) === r && ge[n] > 0).map((n) => {
+            const u = be === n;
             return /* @__PURE__ */ X(
               "div",
               {
@@ -188,29 +188,29 @@ const rt = Te(function(t, s) {
                 style: { ..._e(n), display: v ? "none" : "flex" },
                 onKeyDown: (f) => {
                   var S;
-                  f.key !== "Escape" || !d || (B(null), (S = f.currentTarget.querySelector("[data-om-fold-toggle]")) == null || S.focus(), f.preventDefault(), f.stopPropagation());
+                  f.key !== "Escape" || !u || (B(null), (S = f.currentTarget.querySelector("[data-om-fold-toggle]")) == null || S.focus(), f.preventDefault(), f.stopPropagation());
                 },
                 children: [
-                  /* @__PURE__ */ w(
+                  /* @__PURE__ */ O(
                     "button",
                     {
                       type: "button",
                       "data-om-fold-toggle": n,
-                      "aria-expanded": d,
+                      "aria-expanded": u,
                       "aria-controls": `${Z}-${n}`,
-                      "aria-label": `${d ? "Close" : "Open"} ${n} map controls`,
+                      "aria-label": `${u ? "Close" : "Open"} ${n} map controls`,
                       style: je(),
                       onClick: () => {
-                        B(d ? null : n), d || requestAnimationFrame(() => {
+                        B(u ? null : n), u || requestAnimationFrame(() => {
                           var S;
-                          const f = (S = R.current) == null ? void 0 : S.querySelector(`[data-om-fold-panel="${n}"]`);
-                          f && Ye(f);
+                          const f = (S = E.current) == null ? void 0 : S.querySelector(`[data-om-fold-panel="${n}"]`);
+                          f && Je(f);
                         });
                       },
                       children: "⋯"
                     }
                   ),
-                  /* @__PURE__ */ w(
+                  /* @__PURE__ */ O(
                     "div",
                     {
                       id: `${Z}-${n}`,
@@ -218,8 +218,8 @@ const rt = Te(function(t, s) {
                       "data-om-fold-panel": n,
                       role: "region",
                       "aria-label": `${n} map controls`,
-                      hidden: !d,
-                      style: { ...De(n), display: d ? "flex" : "none" }
+                      hidden: !u,
+                      style: { ...De(n), display: u ? "flex" : "none" }
                     }
                   )
                 ]
@@ -227,7 +227,7 @@ const rt = Te(function(t, s) {
               `fold-${n}`
             );
           }),
-          r === "bottom-start" && /* @__PURE__ */ w(
+          r === "bottom-start" && /* @__PURE__ */ O(
             "div",
             {
               "data-om-mandated-chrome": "badge",
@@ -237,7 +237,7 @@ const rt = Te(function(t, s) {
               style: ae
             }
           ),
-          r === "bottom-end" && /* @__PURE__ */ w(
+          r === "bottom-end" && /* @__PURE__ */ O(
             "div",
             {
               "data-om-mandated-chrome": "attribution",
@@ -251,9 +251,9 @@ const rt = Te(function(t, s) {
       },
       r
     )) }),
-    ne && /* @__PURE__ */ w(fe.Provider, { value: ne, children: E })
+    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 = Te(function(t, s) {
   "filterSoftRange",
   "filterCategoryField",
   "filterCategories",
+  "dash",
+  "dashJustified",
   "source",
   "streamKey",
   "flush",
@@ -273,12 +275,12 @@ const rt = Te(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 y = {
-    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,54 +290,59 @@ 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 } : {}
   };
-  F(() => {
-    s.upsert(y);
-  }), F(() => () => s.remove(o), [s, o]);
+}
+function ot(e) {
+  const { controller: t, layers: s } = W("OmLayer"), { id: o } = e, i = Ue(e);
+  x(() => {
+    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, F(
+  const c = h(e.onHover);
+  return c.current = e.onHover, x(
     () => t.watchPicks((l) => {
-      var g, u, O;
+      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" ? (u = m.current) == null || u.call(m, l) : (O = a.current) == null || O.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: y }) {
-  const { corners: m, widgetsHidden: a, widgetsFolded: l, foldPanels: g, registerFoldedWidget: u } = W("OmWidget"), O = ce(), v = Ke(e) ?? "top-start", p = l && v !== "manual" && s !== "never", b = v === "manual" ? null : He(v);
-  if (F(() => {
-    if (b)
-      return u(b, O, p), () => u(b, O, !1);
-  }, [b, O, p, u]), v === "manual")
-    return /* @__PURE__ */ w("div", { className: o, style: { pointerEvents: "auto", ...i }, children: y });
-  const T = p && b ? g[b] : m[v];
-  return T ? de(
-    /* @__PURE__ */ w(
+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, 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: y
+        children: m
       }
     ),
     T
@@ -344,7 +351,7 @@ function ot({ position: e = "top-start", order: t, fold: s, className: o, style:
 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), y = h(e);
-  y.current = e;
-  const m = M(() => {
-    const p = t.getStore("selection");
-    let b, T, E = 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: P, layer: c, selectionType: L } = y.current, C = `${P ?? ""}|${c ?? ""}|${L ?? ""}`;
-        return (R !== b || C !== T) && (b = R, T = C, P === "selection" && le(R, c, L, t.getLastPickType()) && (E = R)), E;
+        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 = ue(
-    m.subscribe,
-    m.getSnapshot,
-    m.getSnapshot
+  }, [t]), l = de(
+    c.subscribe,
+    c.getSnapshot,
+    c.getSnapshot
   );
-  F(
-    () => t.registerOverlay((p, b, T) => {
-      const E = o.current;
-      if (!E) return;
-      const { anchor: R, anchorFrom: P, layer: c, selectionType: L, visible: C = !0, anchorOffset: q } = y.current;
-      let k;
-      if (P === "selection" ? (le(b, c, L, T) && (i.current = (b == null ? void 0 : b.coordinate) ?? void 0), k = i.current) : k = R, !C || !k || !p) {
-        E.style.visibility = "hidden";
+  x(
+    () => 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, x, I] = p.project([k[0], k[1], 0]);
-      if (!(D >= 0 && D <= p.width && x >= 0 && x <= p.height) || I !== void 0 && I < 0) {
-        E.style.visibility = "hidden";
+      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;
       }
-      E.style.visibility = "visible", E.style.transform = `translate(${D}px, ${x}px) ${Ue[q ?? "bottom-center"]}`;
+      w.style.visibility = "visible", w.style.transform = `translate(${D}px, ${R}px) ${Xe[q ?? "bottom-center"]}`;
     }),
     [t]
-  ), F(() => {
+  ), x(() => {
     t.refreshOverlays();
   });
-  const { children: l, className: g, style: u, interactive: O = !0 } = e, v = typeof l == "function" ? l(a) : l;
-  return de(
-    /* @__PURE__ */ w(
+  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,8 +415,8 @@ function st(e) {
           visibility: "hidden",
           // hidden until the first flush positions it — never flashes at the origin
           willChange: "transform",
-          pointerEvents: O ? "auto" : "none",
-          ...u
+          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 = M(() => {
-    const m = (s ? s.split(" ") : []).flatMap((l) => Ne(l) ? [t.getStore(l)] : (console.warn(`[onlymapjs] useOmMap: "${l}" is not a watch token on the React front-end — expected viewport, selection, layers, or data:<layerId>.`), []));
-    let a;
+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((u) => u.subscribe(l));
+      subscribe: (g) => {
+        const p = c.map((d) => d.subscribe(g));
         return () => {
-          for (const u of g) u();
+          for (const d of p) d();
         };
       },
       getSnapshot: () => {
-        const l = m.map((g) => g.getSnapshot());
-        return (!a || l.some((g, u) => g !== a[u])) && (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 = ue(o.subscribe, o.getSnapshot, o.getSnapshot);
-  return M(() => 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 {};