@nika-js/onlymap 0.4.0 → 0.4.1

package/dist/react.js

@@ -1,151 +1,143 @@
-var U = Object.defineProperty;
-var X = (e, t, s) => t in e ? U(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
-var A = (e, t, s) => X(e, typeof t != "symbol" ? t + "" : t, s);
-import { jsxs as Y, jsx as P } from "react/jsx-runtime";
-import { createContext as Z, useContext as ee, forwardRef as te, useRef as m, useState as W, useCallback as re, useMemo as T, useLayoutEffect as ne, useEffect as p, useImperativeHandle as se, useSyncExternalStore as H } from "react";
-import { MapController as oe, isStoreToken as le } from "@nika-js/onlymap";
-import { createPortal as G } from "react-dom";
-const J = Z(null);
-function K(e) {
-  const t = ee(J);
-  if (!t) throw new Error(`[onlymapjs] ${e} must be rendered inside <OmMap>.`);
-  return t;
+var X = Object.defineProperty;
+var Z = (t, e, n) => e in t ? X(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var B = (t, e, n) => Z(t, typeof e != "symbol" ? e + "" : e, n);
+import { jsxs as ee, jsx as O } from "react/jsx-runtime";
+import { createContext as te, useContext as re, forwardRef as ne, useRef as g, useState as N, useCallback as se, useMemo as x, useLayoutEffect as oe, useEffect as w, useImperativeHandle as ie, useSyncExternalStore as H } from "react";
+import { MANAGED_SLOTS as ae, slotContainerStyle as ce, MapController as le, parseWidgetStyle as ue, resolveSlot as fe, isStoreToken as de } from "@nika-js/onlymap";
+import { createPortal as J } from "react-dom";
+const Y = te(null);
+function $(t) {
+  const e = re(Y);
+  if (!e) throw new Error(`[onlymapjs] ${t} must be rendered inside <OmMap>.`);
+  return e;
 }
-function D(e, t) {
-  if (e === t) return !0;
-  const s = Object.keys(e ?? {}), r = Object.keys(t ?? {});
-  return s.length !== r.length ? !1 : s.every((a) => e[a] === t[a]);
+function V(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 ie(e, t) {
-  const { props: s, updateTriggers: r, ...a } = e, { props: u, updateTriggers: c, ...o } = t;
-  return D(a, o) && D(s, u) && D(r, c);
+function ye(t, e) {
+  const { props: n, updateTriggers: r, ...l } = t, { props: f, updateTriggers: c, ...s } = e;
+  return V(l, s) && V(n, f) && V(r, c);
 }
-class ae {
-  constructor(t) {
-    A(this, "descriptors", /* @__PURE__ */ new Map());
-    this.controller = t;
+class me {
+  constructor(e) {
+    B(this, "descriptors", /* @__PURE__ */ new Map());
+    this.controller = e;
   }
-  upsert(t) {
-    const s = this.descriptors.get(t.id);
-    s && ie(s, t) || (this.descriptors.set(t.id, t), this.controller.setLayers([...this.descriptors.values()]));
+  upsert(e) {
+    const n = this.descriptors.get(e.id);
+    n && ye(n, e) || (this.descriptors.set(e.id, e), this.controller.setLayers([...this.descriptors.values()]));
   }
-  remove(t) {
-    this.descriptors.delete(t) && this.controller.setLayers([...this.descriptors.values()]);
+  remove(e) {
+    this.descriptors.delete(e) && this.controller.setLayers([...this.descriptors.values()]);
   }
 }
-const q = ["top-left", "top-right", "bottom-left", "bottom-right"];
-function ce(e) {
-  return {
-    position: "absolute",
-    [e.startsWith("top") ? "top" : "bottom"]: 10,
-    [e.endsWith("left") ? "left" : "right"]: 10,
-    display: "flex",
-    flexDirection: "column",
-    gap: 8,
-    alignItems: e.endsWith("left") ? "flex-start" : "flex-end",
-    zIndex: 20,
-    // The container never intercepts the map's pointer events; each
-    // <OmWidget> shell re-enables its own.
-    pointerEvents: "none"
-  };
-}
-function ue(e, t) {
-  return Object.entries(t).some(([s, r]) => r !== void 0 && e[s] !== r);
+const I = ae, ge = Object.fromEntries(I.map((t) => [t, ce(t)]));
+function he(t, e) {
+  return Object.entries(e).some(([n, r]) => r !== void 0 && t[n] !== r);
 }
-const ve = te(function(t, s) {
-  const { center: r, zoom: a, pitch: u, bearing: c, basemap: o, basemapKey: l, attribution: d, headless: f, className: w, style: L, children: b } = t, h = m(null), [n, S] = W(null), [g, C] = W(null), [O, E] = W({
-    "top-left": null,
-    "top-right": null,
-    "bottom-left": null,
-    "bottom-right": null
-  }), R = re((i) => {
-    C((y) => y === i ? y : i);
-  }, []), j = T(
+const Re = ne(function(e, n) {
+  const { center: r, zoom: l, pitch: f, bearing: c, basemap: s, basemapKey: a, attribution: d, headless: u, widgetStyle: p, className: z, style: h, children: b } = e, y = g(null), [o, v] = N(null), [S, T] = N(null), [E, R] = N(
+    () => Object.fromEntries(I.map((i) => [i, null]))
+  ), k = se((i) => {
+    T((m) => m === i ? m : i);
+  }, []), j = x(
     () => Object.fromEntries(
-      q.map((i) => [
+      I.map((i) => [
         i,
-        (y) => {
-          E((M) => M[i] === y ? M : { ...M, [i]: y });
+        (m) => {
+          R((M) => M[i] === m ? M : { ...M, [i]: m });
         }
       ])
     ),
     []
-  ), k = m({ center: r, zoom: a, pitch: u, bearing: c });
-  k.current = { center: r, zoom: a, pitch: u, bearing: c };
-  const x = m(t.onReady);
-  x.current = t.onReady;
-  const v = m(t.onViewStateChange);
-  v.current = t.onViewStateChange;
-  const F = m(t.onRuntimeError);
-  F.current = t.onRuntimeError;
-  const $ = m(o);
-  $.current = o;
-  const z = m(void 0), Q = f ? JSON.stringify(f) : "";
-  ne(() => {
-    if (!h.current) return;
-    const i = k.current;
-    z.current = $.current;
-    const y = new oe(h.current, {
+  ), L = g({ center: r, zoom: l, pitch: f, bearing: c });
+  L.current = { center: r, zoom: l, pitch: f, bearing: c };
+  const P = g(e.onReady);
+  P.current = e.onReady;
+  const C = g(e.onViewStateChange);
+  C.current = e.onViewStateChange;
+  const F = g(e.onRuntimeError);
+  F.current = e.onRuntimeError;
+  const _ = g(s);
+  _.current = s;
+  const A = g(void 0), Q = u ? JSON.stringify(u) : "";
+  oe(() => {
+    if (!y.current) return;
+    const i = L.current;
+    A.current = _.current;
+    const m = new le(y.current, {
       center: i.center,
       zoom: i.zoom,
       pitch: i.pitch,
       bearing: i.bearing,
-      basemap: $.current,
-      basemapKey: l,
+      basemap: _.current,
+      basemapKey: a,
       attribution: d,
-      headless: f ? f === !0 ? {} : f : void 0,
-      onRuntimeError: (I) => {
-        var _;
-        return (_ = F.current) == null ? void 0 : _.call(F, I);
+      headless: u ? u === !0 ? {} : u : void 0,
+      onRuntimeError: (K) => {
+        var q;
+        return (q = F.current) == null ? void 0 : q.call(F, K);
       }
     });
-    S(y);
+    v(m);
     let M = !0;
-    return y.ready.then(() => {
-      var I;
-      M && ((I = x.current) == null || I.call(x));
+    return m.ready.then(() => {
+      var K;
+      M && ((K = P.current) == null || K.call(P));
     }), () => {
-      M = !1, S(null), y.destroy();
+      M = !1, v(null), m.destroy();
     };
-  }, [Q]), p(() => {
-    !n || z.current === o || (z.current = o, n.setBasemap(o ?? null));
-  }, [n, o]), se(s, () => n, [n]), p(() => {
-    if (!n) return;
-    const i = { longitude: r == null ? void 0 : r[0], latitude: r == null ? void 0 : r[1], zoom: a, pitch: u, bearing: c };
-    ue(n.getViewState(), i) && n.setView(i);
-  }, [n, r == null ? void 0 : r[0], r == null ? void 0 : r[1], a, u, c]), p(() => {
+  }, [Q]), w(() => {
+    !o || A.current === s || (A.current = s, o.setBasemap(s ?? null));
+  }, [o, s]), ie(n, () => o, [o]), w(() => {
+    if (!o) return;
+    const i = { longitude: r == null ? void 0 : r[0], latitude: r == null ? void 0 : r[1], zoom: l, pitch: f, bearing: c };
+    he(o.getViewState(), i) && o.setView(i);
+  }, [o, r == null ? void 0 : r[0], r == null ? void 0 : r[1], l, f, c]), w(() => {
     var i;
-    if (n)
-      return (i = v.current) == null || i.call(v, n.getViewState()), n.getStore("viewport").subscribe(() => {
-        var y;
-        return (y = v.current) == null ? void 0 : y.call(v, n.getViewState());
+    if (o)
+      return (i = C.current) == null || i.call(C, o.getViewState()), o.getStore("viewport").subscribe(() => {
+        var m;
+        return (m = C.current) == null ? void 0 : m.call(C, o.getViewState());
       });
-  }, [n]);
-  const N = T(() => n ? new ae(n) : null, [n]), V = T(
-    () => n && N && g ? { controller: n, layers: N, overlayPane: g, corners: O } : null,
-    [n, N, g, O]
+  }, [o]);
+  const U = x(
+    () => ({
+      position: "absolute",
+      inset: 0,
+      zIndex: 20,
+      pointerEvents: "none",
+      opacity: "var(--om-widget-opacity, 1)",
+      ...p ? ue(p).properties : void 0
+    }),
+    [p]
+  ), D = x(() => o ? new me(o) : null, [o]), W = x(
+    () => o && D && S ? { controller: o, layers: D, overlayPane: S, corners: E } : null,
+    [o, D, S, E]
   );
-  return /* @__PURE__ */ Y("div", { className: w, style: { position: "relative", overflow: "hidden", ...L }, children: [
-    /* @__PURE__ */ P("div", { ref: h, style: { position: "absolute", inset: 0 } }),
-    /* @__PURE__ */ P(
+  return /* @__PURE__ */ ee("div", { className: z, style: { position: "relative", overflow: "hidden", ...h }, children: [
+    /* @__PURE__ */ O("div", { ref: y, style: { position: "absolute", inset: 0 } }),
+    /* @__PURE__ */ O(
       "div",
       {
-        ref: R,
+        ref: k,
         style: { position: "absolute", top: 0, left: 0, zIndex: 10, pointerEvents: "none" }
       }
     ),
-    q.map((i) => /* @__PURE__ */ P(
+    /* @__PURE__ */ O("div", { "data-om-widget-layer": "", style: U, children: I.map((i) => /* @__PURE__ */ O(
       "div",
       {
-        "data-om-widget-corner": i,
+        "data-om-widget-slot": i,
         ref: j[i],
-        style: ce(i)
+        style: ge[i]
       },
       i
-    )),
-    V && /* @__PURE__ */ P(J.Provider, { value: V, children: b })
+    )) }),
+    W && /* @__PURE__ */ O(Y.Provider, { value: W, children: b })
   ] });
-}), fe = /* @__PURE__ */ new Set([
+}), be = /* @__PURE__ */ new Set([
   "id",
   "type",
   "data",
@@ -165,58 +157,61 @@ const ve = te(function(t, s) {
   "onClick",
   "onHover"
 ]);
-function pe(e) {
-  const { controller: t, layers: s } = K("OmLayer"), { id: r } = e, a = {};
-  for (const [l, d] of Object.entries(e))
-    !fe.has(l) && d !== void 0 && (a[l] = d);
-  const u = {
+function Ce(t) {
+  const { controller: e, layers: n } = $("OmLayer"), { id: r } = t, l = {};
+  for (const [a, d] of Object.entries(t))
+    !be.has(a) && d !== void 0 && (l[a] = d);
+  const f = {
     id: r,
-    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: a
+    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
   };
-  p(() => {
-    s.upsert(u);
-  }), p(() => () => s.remove(r), [s, r]);
-  const c = m(e.onClick);
-  c.current = e.onClick;
-  const o = m(e.onHover);
-  return o.current = e.onHover, p(
-    () => t.watchPicks((l) => {
-      var d, f, w;
-      if (l === null) {
-        (d = o.current) == null || d.call(o, null);
+  w(() => {
+    n.upsert(f);
+  }), w(() => () => n.remove(r), [n, r]);
+  const c = g(t.onClick);
+  c.current = t.onClick;
+  const s = g(t.onHover);
+  return s.current = t.onHover, w(
+    () => e.watchPicks((a) => {
+      var d, u, p;
+      if (a === null) {
+        (d = s.current) == null || d.call(s, null);
         return;
       }
-      l.layerId === r && (l.type === "click" ? (f = c.current) == null || f.call(c, l) : (w = o.current) == null || w.call(o, l));
+      a.layerId === r && (a.type === "click" ? (u = c.current) == null || u.call(c, a) : (p = s.current) == null || p.call(s, a));
     }),
-    [t, r]
+    [e, r]
   ), null;
 }
-function Se({ position: e = "top-left", className: t, style: s, children: r }) {
-  const { corners: a } = K("OmWidget"), u = a[e];
-  return u ? G(
-    /* @__PURE__ */ P("div", { className: t, style: { pointerEvents: "auto", ...s }, children: r }),
-    u
+function xe({ position: t = "top-start", order: e, className: n, style: r, children: l }) {
+  const { corners: f } = $("OmWidget"), c = fe(t) ?? "top-start";
+  if (c === "manual")
+    return /* @__PURE__ */ O("div", { className: n, style: { pointerEvents: "auto", ...r }, children: l });
+  const s = f[c];
+  return s ? J(
+    /* @__PURE__ */ O("div", { className: n, style: { pointerEvents: "auto", ...e !== void 0 ? { order: e } : void 0, ...r }, children: l }),
+    s
   ) : null;
 }
-function B(e, t) {
-  return !t || (e == null ? void 0 : e.layerId) === t;
+function G(t, e) {
+  return !e || (t == null ? void 0 : t.layerId) === e;
 }
-const de = {
+const ve = {
   "top-left": "translate(0, 0)",
   "top-center": "translate(-50%, 0)",
   "top-right": "translate(-100%, 0)",
@@ -227,48 +222,48 @@ const de = {
   "bottom-center": "translate(-50%, -100%)",
   "bottom-right": "translate(-100%, -100%)"
 };
-function Oe(e) {
-  const { controller: t, overlayPane: s } = K("OmOverlay"), r = m(null), a = m(void 0), u = m(e);
-  u.current = e;
-  const c = T(() => {
-    const b = t.getStore("selection");
-    let h, n, S = null;
+function Te(t) {
+  const { controller: e, overlayPane: n } = $("OmOverlay"), r = g(null), l = g(void 0), f = g(t);
+  f.current = t;
+  const c = x(() => {
+    const h = e.getStore("selection");
+    let b, y, o = null;
     return {
-      subscribe: b.subscribe,
+      subscribe: h.subscribe,
       getSnapshot: () => {
-        const g = b.getSnapshot(), { anchorFrom: C, layer: O } = u.current, E = `${C ?? ""}|${O ?? ""}`;
-        return (g !== h || E !== n) && (h = g, n = E, C === "selection" && B(g, O) && (S = g)), S;
+        const v = h.getSnapshot(), { anchorFrom: S, layer: T } = f.current, E = `${S ?? ""}|${T ?? ""}`;
+        return (v !== b || E !== y) && (b = v, y = E, S === "selection" && G(v, T) && (o = v)), o;
       }
     };
-  }, [t]), o = H(
+  }, [e]), s = H(
     c.subscribe,
     c.getSnapshot,
     c.getSnapshot
   );
-  p(
-    () => t.registerOverlay((b, h) => {
-      const n = r.current;
-      if (!n) return;
-      const { anchor: S, anchorFrom: g, layer: C, visible: O = !0, anchorOffset: E } = u.current;
+  w(
+    () => e.registerOverlay((h, b) => {
+      const y = r.current;
+      if (!y) return;
+      const { anchor: o, anchorFrom: v, layer: S, visible: T = !0, anchorOffset: E } = f.current;
       let R;
-      if (g === "selection" ? (B(h, C) && (a.current = (h == null ? void 0 : h.coordinate) ?? void 0), R = a.current) : R = S, !O || !R || !b) {
-        n.style.visibility = "hidden";
+      if (v === "selection" ? (G(b, S) && (l.current = (b == null ? void 0 : b.coordinate) ?? void 0), R = l.current) : R = o, !T || !R || !h) {
+        y.style.visibility = "hidden";
         return;
       }
-      const [j, k, x] = b.project([R[0], R[1], 0]);
-      if (!(j >= 0 && j <= b.width && k >= 0 && k <= b.height) || x !== void 0 && x < 0) {
-        n.style.visibility = "hidden";
+      const [k, j, L] = h.project([R[0], R[1], 0]);
+      if (!(k >= 0 && k <= h.width && j >= 0 && j <= h.height) || L !== void 0 && L < 0) {
+        y.style.visibility = "hidden";
         return;
       }
-      n.style.visibility = "visible", n.style.transform = `translate(${j}px, ${k}px) ${de[E ?? "bottom-center"]}`;
+      y.style.visibility = "visible", y.style.transform = `translate(${k}px, ${j}px) ${ve[E ?? "bottom-center"]}`;
     }),
-    [t]
-  ), p(() => {
-    t.refreshOverlays();
+    [e]
+  ), w(() => {
+    e.refreshOverlays();
   });
-  const { children: l, className: d, style: f, interactive: w = !0 } = e, L = typeof l == "function" ? l(o) : l;
-  return G(
-    /* @__PURE__ */ P(
+  const { children: a, className: d, style: u, interactive: p = !0 } = t, z = typeof a == "function" ? a(s) : a;
+  return J(
+    /* @__PURE__ */ O(
       "div",
       {
         ref: r,
@@ -280,38 +275,38 @@ function Oe(e) {
           visibility: "hidden",
           // hidden until the first flush positions it — never flashes at the origin
           willChange: "transform",
-          pointerEvents: w ? "auto" : "none",
-          ...f
+          pointerEvents: p ? "auto" : "none",
+          ...u
         },
-        children: L
+        children: z
       }
     ),
-    s
+    n
   );
 }
-function Re(e = []) {
-  const { controller: t } = K("useOmMap"), s = e.join(" "), r = T(() => {
-    const c = (s ? s.split(" ") : []).flatMap((l) => le(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 o;
+function Me(t = []) {
+  const { controller: e } = $("useOmMap"), n = t.join(" "), r = x(() => {
+    const c = (n ? n.split(" ") : []).flatMap((a) => de(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 s;
     return {
-      subscribe: (l) => {
-        const d = c.map((f) => f.subscribe(l));
+      subscribe: (a) => {
+        const d = c.map((u) => u.subscribe(a));
         return () => {
-          for (const f of d) f();
+          for (const u of d) u();
         };
       },
       getSnapshot: () => {
-        const l = c.map((d) => d.getSnapshot());
-        return (!o || l.some((d, f) => d !== o[f])) && (o = l), o;
+        const a = c.map((d) => d.getSnapshot());
+        return (!s || a.some((d, u) => d !== s[u])) && (s = a), s;
       }
     };
-  }, [t, s]), a = H(r.subscribe, r.getSnapshot, r.getSnapshot);
-  return T(() => t.buildCtx(), [t, a]);
+  }, [e, n]), l = H(r.subscribe, r.getSnapshot, r.getSnapshot);
+  return x(() => e.buildCtx(), [e, l]);
 }
 export {
-  pe as OmLayer,
-  ve as OmMap,
-  Oe as OmOverlay,
-  Se as OmWidget,
-  Re as useOmMap
+  Ce as OmLayer,
+  Re as OmMap,
+  Te as OmOverlay,
+  xe as OmWidget,
+  Me as useOmMap
 };

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.0";
+export declare const LIBRARY_VERSION = "0.4.1";

package/dist/widget-layout.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Widget layout vocabulary (spec: "Widget Layout Manager") — the shared,
+ * framework-free half of the slot system: slot names, legacy-corner
+ * aliasing, per-slot flex layout parameters, and the `widget-style` token
+ * sugar parser. Both front-ends derive their containers from THIS table
+ * (the HTML lane as cssText, the React lane as CSSProperties) so the two
+ * lanes cannot drift on placement semantics.
+ *
+ * Names are LOGICAL and RTL-aware: `-start`/`-end` map to CSS
+ * `inset-inline-*` and flex alignment, so an RTL document mirrors the
+ * whole chrome without any per-widget work. Legacy corner names stay as
+ * aliases mapped logically (`top-left` → `top-start`), which means legacy
+ * manifests mirror correctly under RTL too — physical-corner fidelity is
+ * deliberately NOT preserved there.
+ */
+export declare const MANAGED_SLOTS: readonly ["top-start", "top-center", "top-end", "center-start", "center-end", "bottom-start", "bottom-center", "bottom-end"];
+export type ManagedSlot = (typeof MANAGED_SLOTS)[number];
+/** A widget's resolved placement: a managed slot, or the author-styled manual tier. */
+export type WidgetSlot = ManagedSlot | "manual";
+/** Legacy 4-corner vocabulary (pre-0.4.1) — accepted forever, mapped LOGICALLY. */
+export declare const LEGACY_POSITION_ALIASES: Readonly<Record<string, ManagedSlot>>;
+/** Every accepted `position` value (validation + html-data). */
+export declare const ALL_POSITION_VALUES: readonly string[];
+/**
+ * `position` attribute/prop → slot. Absent/empty → the default `top-start`
+ * (today's `top-left` default, aliased). Unknown values → null; callers
+ * warn and fall back to the default (validation carries the loud version).
+ */
+export declare function resolveSlot(raw: string | null | undefined): WidgetSlot | null;
+export interface SlotLayout {
+    /** Stack axis: edge-center slots run ALONG their edge (row); everything else stacks as a column. */
+    axis: "column" | "row";
+    block: "top" | "center" | "bottom";
+    inline: "start" | "center" | "end";
+}
+export declare function slotLayout(slot: ManagedSlot): SlotLayout;
+/**
+ * The slot container's styles as a camelCase style object — ONE builder for
+ * both front-ends (the React lane spreads it as CSSProperties; the HTML
+ * lane serializes it to cssText), so the lanes cannot drift on placement.
+ * Insets/gaps read the layout tokens with the pre-0.4.1 constants as
+ * fallbacks (12px inset, 8px gap), so a single-widget legacy corner renders
+ * pixel-identically. Containers never intercept the map's pointer events;
+ * each widget re-enables its own.
+ */
+export declare function slotContainerStyle(slot: ManagedSlot): Record<string, string | number>;
+/** The HTML lane's serialization of slotContainerStyle. */
+export declare function slotContainerCssText(slot: ManagedSlot): string;
+export declare const WIDGET_STYLE_KEY_NAMES: readonly string[];
+export interface WidgetStyleParse {
+    /** Custom property → CSS value, ready for style.setProperty. */
+    properties: Record<string, string>;
+    /** Unparseable entries (unknown key / non-numeric value) — validation's loud half; the live path skips them. */
+    errors: string[];
+}
+/**
+ * `widget-style="gap:10 opacity:0.9 inset-x:16"` → custom properties — the
+ * no-CSS token surface for agents/authors. Space-separated `key:value`
+ * pairs; numbers get `px` except opacity. One parser serves the live path
+ * (om-map attr → host properties) and validation.
+ */
+export declare function parseWidgetStyle(raw: string): WidgetStyleParse;

package/llms.txt

@@ -26,7 +26,7 @@ OnlyMapJS is NOT raw deck.gl and NOT generic HTML/JSX. The rules below are the d
 
 - `<om-map center="[lng, lat]" zoom="11" pitch="55" bearing="20" basemap="positron">` — the root. `basemap` accepts a free preset (`liberty`, `bright`, `positron`, `dark-matter`, `voyager`, `osm` — no keys; or `maptiler-streets`/`maptiler-dataviz`/`maptiler-satellite` with `basemap-key="…"` or `OmMap.configureBasemap({ maptilerKey })`), `maplibre` (bare demo style), a style URL (e.g. a MapTiler-customized style; any scheme fetch supports, including desktop asset protocols like Tauri's, query strings fine), or `none` (standalone canvas). The attribute is LIVE — writing it switches the basemap in place (camera + layers survive); the `set-basemap {basemap}` action and `<om-widget type="basemap-switcher" options="positron dark-matter osm">` do the same. Register more via `OmMap.registerBasemap(name, { style })`. Required provider attribution renders automatically (`attribution="false"` opts out). `pitch`/`bearing` tilt the initial camera (use for 3D content). Terrain: `terrain="terrarium"` (keyless AWS DEM; also `maptiler-terrain` with a key, a raw `{z}/{x}/{y}` DEM URL + `terrain-decoder="terrarium|mapbox-rgb|<JSON>"`, or `off`) raises a 3D surface — geographic layers DRAPE onto it automatically (per-layer `terrain="drape|offset|off"` overrides; 3D-model layers sit ON it), `terrain-exaggeration` scales relief, `terrain-texture` drapes imagery; terrain REPLACES an active basemap while on (restored when off); `set-terrain` action, `terrain` watch token, `OmMap.registerTerrain(name, {...})` for more sources. Scene lighting for 3D content: `lighting="daylight|studio|flat|custom"` (absent = deck defaults) with `lighting-ambient`/`lighting-sun`/`lighting-sun-azimuth`/`lighting-sun-elevation`/`lighting-camera` overrides and `lighting-sun-date` (ISO/epoch — solar-position sun computed at the map center, wins over azimuth/elevation); attribute-backed (undoable, live-editable), story-steppable via the `set-lighting {lighting, sunAzimuth, ...}` action (`lighting="default"` removes the attribute set; a bare preset is a clean reset — stale overrides clear), native UI via `<om-widget type="lighting">` (preset radios + tuning sliders), widget watch token `lighting`. GeoJsonLayer extrudes polygons declaratively: `extruded get-elevation="$height"` (+ `wireframe`). `validate` attribute enables live validation + on-page error panel. Include a `map-id="<random UUID>"` on complete pages (identifies the map artifact for usage telemetry — not a visitor id; the page author deletes it to opt out); `telemetry="off"` disables usage telemetry + library-error reporting for the map (global: `OmMap.configureTelemetry({ disabled: true })`; schema: docs/telemetry.md). Free plan limits: 5 layers, 25k rows per layer — layers past a limit don't render and validation says why; a `license-key="om_live_…"` attribute (publishable, origin-restricted) or `OmMap.configureLicense(key)` lifts limits and removes the corner badge. When a user's map exceeds free limits, say so and point at the validation message rather than silently restructuring their data. Events on the element: `om-map-ready` (boot complete; `await mapEl.ready` is the promise twin), `om-validation-error`, `om-view-changed` (camera settled after a move, debounced; `detail = {longitude, latitude, zoom, pitch, bearing, origin}` where `origin` is `"user"` for gesture bursts vs `"programmatic"` for API/story moves — the camera-persistence hook, and the echo-suppression signal when syncing camera state to an app store). `await mapEl.snapshot()` returns a canvas-only PNG dataURL of the scene (basemap + layers at device pixels; `{as:"blob"}` for files) — DOM widgets/overlays/attribution are NOT captured, so exports must render provider credits themselves.
 - `<om-layer id="..." type="ScatterplotLayer" data="./points.json">` — any deck.gl layer class by `type` (all 33 bundled, plus the native `COGLayer` raster type), plus `PopupLayer` (WebGL badges/labels at scale: `layout="badge|pin-label|card"`, `min-zoom`/`max-zoom`). Every type's full attribute list ships in the package's `onlymapjs.html-data.json` — consult it instead of guessing attribute names or reading the minified dist. TextLayer's default font atlas covers ASCII only: set `character-set` when label text carries other glyphs (`—`, `·`, accents) or deck warns and renders them blank. External layer classes register via `OmMap.registerLayer({type, deckClass, props})` — build them on `@nika-js/onlymap/deck` (the bundled `CompositeLayer`/`TileLayer`/… re-exports), never a separately-installed deck.gl (different class hierarchy, breaks in the renderer); function-valued props ride the subclass's `static defaultProps`; register at module top level BEFORE the manifest mounts (see docs/custom-layers.md). Data: `data` URL (JSON, GeoJSON, CSV/TSV `.csv` — parsed to typed columns — Shapefile `.shp` (+`.dbf` attributes) and KML `.kml` as GeoJSON features, or Arrow IPC `.arrow`/`.feather` — large point datasets stay columnar, GeoArrow line/polygon geometry becomes GeoJSON features, zstd-compressed IPC is handled; other formats plug in via `OmMap.registerFormat({match, parse})`; data URLs accept any scheme the runtime's fetch supports — desktop webviews (Tauri, Electron) pass asset-protocol URLs straight in), inline `<script type="application/json">` (row arrays or column-oriented `{"columns": {"lon": [...], "lat": [...]}}`; must be a DIRECT child of the `<om-layer>`, and when present it wins — omit the `data` attribute), or `wss://` streaming (`key="mmsi"` upserts entities in place, `flush="250ms"` coalesces bursts, `source="name"` selects a `OmMap.registerSource` decoder plugin), or a polled REST snapshot (`refresh="5s"` re-fetches and replaces — for live endpoints that return the full current state). Authenticated endpoints: call `OmMap.configureData({ headers: {...} })` in a script — never put tokens in attributes. `$field` accessors work identically on all of them — never write column-index code yourself. One columnar restriction: the `js` full-JS opt-in is not allowed on Arrow/columnar layers (validation will tell you; use `$field` accessors instead). For 3D models use `type="ScenegraphLayer"` with `scenegraph="./model.glb"` (required) and `get-orientation="[0, $heading, 90]"` — the roll of 90 stands Y-up glTF models upright; see docs/3d-assets.md. GeoTIFF/COG rasters use `type="COGLayer"` with `src="./dem.tif"` (NOT `data` — rasters stream tiles by Range request, they are not parsed rows): `min`/`max` set the rescale window (default 0–255; ALWAYS set them for float/16-bit data like DEMs), `colormap` picks a bundled ramp for single-band sources (gray, viridis, plasma, inferno, magma, cividis, rdylgn, rdbu, spectral, terrain, jet, turbo), `nodata` overrides the source sentinel (renders transparent); plain 8-bit RGB COGs need no styling attributes; restretch/recolor are GPU uniforms (no refetch) and the legend ramp derives from colormap+min/max automatically. Sources must be Cloud-Optimized (`gdal_translate -of COG` otherwise).
-- `<om-widget type="legend|layer-switcher|basemap-switcher|lighting|zoom-controls|undo-redo|scale-bar|attribution|filter|vega-lite" position="bottom-right">` — static UI panels. Built-ins are themeable from page CSS via custom properties (they inherit through the shadow root): `om-map { --om-widget-bg: #111827; --om-widget-fg: #f9fafb; }` — full set: `--om-widget-bg/-fg/-muted/-border/-hover-bg/-accent`; scope to a single widget with an `om-widget[type=legend]` selector instead. No `type` + HTML + `<script type="om/widget">` = custom widget with `ctx` (`ctx.layers`, `ctx.data(id)`, `ctx.dataInViewport(id)`, `ctx.stats(id, field)`, `ctx.viewport`, `ctx.selection`, `ctx.emit(action, payload)`), `this.watch = ['data:<layerId>', 'viewport', 'selection', 'layers', 'history', 'basemap']` (`layers` also fires on visibility/filter changes; `basemap` on basemap switches; `history` on undo/redo availability), `this.$(sel)`, `vegaEmbed`/`d3` as globals.
+- `<om-widget type="legend|layer-switcher|basemap-switcher|lighting|zoom-controls|undo-redo|scale-bar|attribution|filter|vega-lite" position="bottom-end">` — static UI panels. `position` takes one of 8 managed slots (logical, RTL-aware: `top-start|top-center|top-end|center-start|center-end|bottom-start|bottom-center|bottom-end`; legacy corners `top-left` etc. alias) — same-slot widgets stack with flush edges and a shared gap (never overlap); `order="1"` orders within a slot; `position="manual"` renders a plain block you place with your own CSS (even outside the map). Layout tokens on `<om-map>`: `widget-style="gap:10 opacity:0.9 inset:16"` (keys inset/gap/inset-x/-y/gap-x/-y/opacity/radius/size, px except opacity) or the `--om-widget-inset-x/-y/-gap-x/-y/-opacity/-radius` custom properties. Built-ins are themeable from page CSS via custom properties (they inherit through the shadow root): `om-map { --om-widget-bg: #111827; --om-widget-fg: #f9fafb; }` — full set: `--om-widget-bg/-fg/-muted/-border/-hover-bg/-accent`; scope to a single widget with an `om-widget[type=legend]` selector instead. No `type` + HTML + `<script type="om/widget">` = custom widget with `ctx` (`ctx.layers`, `ctx.data(id)`, `ctx.dataInViewport(id)`, `ctx.stats(id, field)`, `ctx.viewport`, `ctx.selection`, `ctx.emit(action, payload)`), `this.watch = ['data:<layerId>', 'viewport', 'selection', 'layers', 'history', 'basemap']` (`layers` also fires on visibility/filter changes; `basemap` on basemap switches; `history` on undo/redo availability), `this.$(sel)`, `vegaEmbed`/`d3` as globals.
 - `<om-overlay id="..." anchor-from="selection">` — rich geo-anchored HTML (≤ ~20 per map). Anchors: `anchor="[lng, lat]"` (static), `anchor-from="selection"` (follows picks), or `anchor-layer="regions" anchor-feature-id="mission"` (anchored to a feature's own geometry — bbox center — no coordinates in markup; `{{field}}` interpolates that feature's attributes). `{{field}}` interpolates the picked feature HTML-escaped; `{{{field}}}` is raw (avoid). For labels on many features use `PopupLayer`, not overlays.
 - `<om-behavior on="click|hover|drag|load|data-loaded" layer="..." action="...">` — declarative interaction. Built-in actions: `show-overlay`, `hide-overlay`, `show-tooltip`, `hide-tooltip`, `toggle-layer`, `filter-layer`, `highlight-feature`, `zoom-to-feature`, `set-basemap`, `undo`, `redo`. One payload contract everywhere: `{ layer, target, feature, featureId, coordinate }`.
 - Undo/redo is built in: user-facing manifest changes (layer toggles, filter changes, basemap switches, element add/remove, drawn sketches) are recorded automatically — the manifest is the state. `<om-widget type="undo-redo">` renders the buttons; Cmd/Ctrl-Z, Shift-Cmd/Ctrl-Z, and Ctrl-Y work on any map (text inputs keep their native undo). Camera moves, hover effects, and story playback are deliberately NOT undo steps. Widget scripts: `ctx.history.canUndo/canRedo` with watch token `history`; `ctx.emit("undo")`/`ctx.emit("redo")`.