@nika-js/onlymap 0.3.5 → 0.4.1

package/dist/react.js

@@ -1,150 +1,143 @@
-var J = Object.defineProperty;
-var Q = (e, t, n) => t in e ? J(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var A = (e, t, n) => Q(e, typeof t != "symbol" ? t + "" : t, n);
-import { jsxs as U, jsx as C } from "react/jsx-runtime";
-import { createContext as X, useContext as Y, forwardRef as Z, useRef as f, useState as k, useCallback as ee, useMemo as I, useLayoutEffect as te, useEffect as g, useImperativeHandle as re } from "react";
-import { MapController as ne } from "@nika-js/onlymap";
-import { createPortal as B } from "react-dom";
-const H = X(null);
-function K(e) {
-  const t = Y(H);
-  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 n = Object.keys(e ?? {}), r = Object.keys(t ?? {});
-  return n.length !== r.length ? !1 : n.every((l) => e[l] === t[l]);
+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 oe(e, t) {
-  const { props: n, updateTriggers: r, ...l } = e, { props: a, updateTriggers: u, ...i } = t;
-  return D(l, i) && D(n, a) && D(r, u);
+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 se {
-  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 n = this.descriptors.get(t.id);
-    n && oe(n, 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 le(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 ie(e, t) {
-  return Object.entries(t).some(([n, r]) => r !== void 0 && e[n] !== 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 he = Z(function(t, n) {
-  const { center: r, zoom: l, pitch: a, bearing: u, basemap: i, basemapKey: c, attribution: y, headless: m, className: O, style: z, children: R } = t, d = f(null), [o, T] = k(null), [p, M] = k(null), [j, L] = k({
-    "top-left": null,
-    "top-right": null,
-    "bottom-left": null,
-    "bottom-right": null
-  }), v = ee((s) => {
-    M((h) => h === s ? h : s);
-  }, []), w = I(
+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((s) => [
-        s,
-        (h) => {
-          L((x) => x[s] === h ? x : { ...x, [s]: h });
+      I.map((i) => [
+        i,
+        (m) => {
+          R((M) => M[i] === m ? M : { ...M, [i]: m });
         }
       ])
     ),
     []
-  ), S = f({ center: r, zoom: l, pitch: a, bearing: u });
-  S.current = { center: r, zoom: l, pitch: a, bearing: u };
-  const b = f(t.onReady);
-  b.current = t.onReady;
-  const E = f(t.onViewStateChange);
-  E.current = t.onViewStateChange;
-  const P = f(t.onRuntimeError);
-  P.current = t.onRuntimeError;
-  const N = f(i);
-  N.current = i;
-  const V = f(void 0), G = m ? JSON.stringify(m) : "";
-  te(() => {
-    if (!d.current) return;
-    const s = S.current;
-    V.current = N.current;
-    const h = new ne(d.current, {
-      center: s.center,
-      zoom: s.zoom,
-      pitch: s.pitch,
-      bearing: s.bearing,
-      basemap: N.current,
-      basemapKey: c,
-      attribution: y,
-      headless: m ? m === !0 ? {} : m : void 0,
-      onRuntimeError: (F) => {
-        var $;
-        return ($ = P.current) == null ? void 0 : $.call(P, F);
+  ), 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: a,
+      attribution: d,
+      headless: u ? u === !0 ? {} : u : void 0,
+      onRuntimeError: (K) => {
+        var q;
+        return (q = F.current) == null ? void 0 : q.call(F, K);
       }
     });
-    T(h);
-    let x = !0;
-    return h.ready.then(() => {
-      var F;
-      x && ((F = b.current) == null || F.call(b));
+    v(m);
+    let M = !0;
+    return m.ready.then(() => {
+      var K;
+      M && ((K = P.current) == null || K.call(P));
     }), () => {
-      x = !1, T(null), h.destroy();
+      M = !1, v(null), m.destroy();
     };
-  }, [G]), g(() => {
-    !o || V.current === i || (V.current = i, o.setBasemap(i ?? null));
-  }, [o, i]), re(n, () => o, [o]), g(() => {
+  }, [Q]), w(() => {
+    !o || A.current === s || (A.current = s, o.setBasemap(s ?? null));
+  }, [o, s]), ie(n, () => o, [o]), w(() => {
     if (!o) return;
-    const s = { longitude: r == null ? void 0 : r[0], latitude: r == null ? void 0 : r[1], zoom: l, pitch: a, bearing: u };
-    ie(o.getViewState(), s) && o.setView(s);
-  }, [o, r == null ? void 0 : r[0], r == null ? void 0 : r[1], l, a, u]), g(() => {
+    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 (o)
-      return o.watch(["viewport"], () => {
-        var s;
-        return (s = E.current) == null ? void 0 : s.call(E, o.getViewState());
+      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());
       });
   }, [o]);
-  const W = I(() => o ? new se(o) : null, [o]), _ = I(
-    () => o && W && p ? { controller: o, layers: W, overlayPane: p, corners: j } : null,
-    [o, W, p, j]
+  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__ */ U("div", { className: O, style: { position: "relative", overflow: "hidden", ...z }, children: [
-    /* @__PURE__ */ C("div", { ref: d, style: { position: "absolute", inset: 0 } }),
-    /* @__PURE__ */ C(
+  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: v,
+        ref: k,
         style: { position: "absolute", top: 0, left: 0, zIndex: 10, pointerEvents: "none" }
       }
     ),
-    q.map((s) => /* @__PURE__ */ C(
+    /* @__PURE__ */ O("div", { "data-om-widget-layer": "", style: U, children: I.map((i) => /* @__PURE__ */ O(
       "div",
       {
-        "data-om-widget-corner": s,
-        ref: w[s],
-        style: le(s)
+        "data-om-widget-slot": i,
+        ref: j[i],
+        style: ge[i]
       },
-      s
-    )),
-    _ && /* @__PURE__ */ C(H.Provider, { value: _, children: R })
+      i
+    )) }),
+    W && /* @__PURE__ */ O(Y.Provider, { value: W, children: b })
   ] });
-}), ae = /* @__PURE__ */ new Set([
+}), be = /* @__PURE__ */ new Set([
   "id",
   "type",
   "data",
@@ -164,55 +157,61 @@ const he = Z(function(t, n) {
   "onClick",
   "onHover"
 ]);
-function ge(e) {
-  const { controller: t, layers: n } = K("OmLayer"), { id: r } = e, l = {};
-  for (const [c, y] of Object.entries(e))
-    !ae.has(c) && y !== void 0 && (l[c] = y);
-  const a = {
+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,
+    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
   };
-  g(() => {
-    n.upsert(a);
-  }), g(() => () => n.remove(r), [n, r]);
-  const u = f(e.onClick);
-  u.current = e.onClick;
-  const i = f(e.onHover);
-  return i.current = e.onHover, g(
-    () => t.watchPicks((c) => {
-      var y, m, O;
-      if (c === null) {
-        (y = i.current) == null || y.call(i, 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;
       }
-      c.layerId === r && (c.type === "click" ? (m = u.current) == null || m.call(u, c) : (O = i.current) == null || O.call(i, c));
+      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 ve({ position: e = "top-left", className: t, style: n, children: r }) {
-  const { corners: l } = K("OmWidget"), a = l[e];
-  return a ? B(
-    /* @__PURE__ */ C("div", { className: t, style: { pointerEvents: "auto", ...n }, children: r }),
-    a
+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;
 }
-const ce = {
+function G(t, e) {
+  return !e || (t == null ? void 0 : t.layerId) === e;
+}
+const ve = {
   "top-left": "translate(0, 0)",
   "top-center": "translate(-50%, 0)",
   "top-right": "translate(-100%, 0)",
@@ -223,36 +222,52 @@ const ce = {
   "bottom-center": "translate(-50%, -100%)",
   "bottom-right": "translate(-100%, -100%)"
 };
-function be(e) {
-  const { controller: t, overlayPane: n } = K("OmOverlay"), r = f(null), l = f(void 0), [a, u] = k(null), i = f(e);
-  i.current = e, g(
-    () => t.registerOverlay((R, d) => {
-      const o = r.current;
-      if (!o) return;
-      const { anchor: T, anchorFrom: p, layer: M, visible: j = !0, anchorOffset: L } = i.current;
-      let v;
-      if (p === "selection" ? ((!M || (d == null ? void 0 : d.layerId) === M) && (l.current = (d == null ? void 0 : d.coordinate) ?? void 0, u(d)), v = l.current) : v = T, !j || !v || !R) {
-        o.style.visibility = "hidden";
+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: h.subscribe,
+      getSnapshot: () => {
+        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;
+      }
+    };
+  }, [e]), s = H(
+    c.subscribe,
+    c.getSnapshot,
+    c.getSnapshot
+  );
+  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 (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 [w, S, b] = R.project([v[0], v[1], 0]);
-      if (!(w >= 0 && w <= R.width && S >= 0 && S <= R.height) || b !== void 0 && b < 0) {
-        o.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;
       }
-      o.style.visibility = "visible", o.style.transform = `translate(${w}px, ${S}px) ${ce[L ?? "bottom-center"]}`;
+      y.style.visibility = "visible", y.style.transform = `translate(${k}px, ${j}px) ${ve[E ?? "bottom-center"]}`;
     }),
-    [t]
-  ), g(() => {
-    t.refreshOverlays();
+    [e]
+  ), w(() => {
+    e.refreshOverlays();
   });
-  const { children: c, className: y, style: m, interactive: O = !0 } = e, z = typeof c == "function" ? c(a) : c;
-  return B(
-    /* @__PURE__ */ C(
+  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,
-        className: y,
+        className: d,
         style: {
           position: "absolute",
           top: 0,
@@ -260,8 +275,8 @@ function be(e) {
           visibility: "hidden",
           // hidden until the first flush positions it — never flashes at the origin
           willChange: "transform",
-          pointerEvents: O ? "auto" : "none",
-          ...m
+          pointerEvents: p ? "auto" : "none",
+          ...u
         },
         children: z
       }
@@ -269,14 +284,29 @@ function be(e) {
     n
   );
 }
-function Oe(e = []) {
-  const { controller: t } = K("useOmMap"), n = e.join(" "), r = I(() => n ? n.split(" ") : [], [n]), [l, a] = k(() => t.buildCtx());
-  return g(() => t.watch(r, a), [t, r]), l;
+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: (a) => {
+        const d = c.map((u) => u.subscribe(a));
+        return () => {
+          for (const u of d) u();
+        };
+      },
+      getSnapshot: () => {
+        const a = c.map((d) => d.getSnapshot());
+        return (!s || a.some((d, u) => d !== s[u])) && (s = a), s;
+      }
+    };
+  }, [e, n]), l = H(r.subscribe, r.getSnapshot, r.getSnapshot);
+  return x(() => e.buildCtx(), [e, l]);
 }
 export {
-  ge as OmLayer,
-  he as OmMap,
-  be as OmOverlay,
-  ve as OmWidget,
-  Oe as useOmMap
+  Ce as OmLayer,
+  Re as OmMap,
+  Te as OmOverlay,
+  xe as OmWidget,
+  Me as useOmMap
 };

package/dist/runtime-core.d.ts

@@ -1,5 +1,6 @@
 import { type LightingIR } from "./scene-lighting";
 import { type TerrainIR } from "./terrain";
+import type { ViewOrigin } from "./external-store";
 import type { LayerIR } from "./ir";
 import { type Selection } from "./selection";
 import type { ValidationEntry } from "./validation";
@@ -25,8 +26,14 @@ export interface CameraOptions {
     curve?: boolean;
 }
 export interface RuntimeCoreCallbacks {
-    /** Fired whenever the view state changes (pan/zoom/pitch/bearing) — a notification, not a value. */
-    onViewportChange?: () => void;
+    /**
+     * Fired whenever the view state changes (pan/zoom/pitch/bearing) — a
+     * notification, not a value. `origin` (spec: "External-Store Contract")
+     * distinguishes canvas gestures ("user") from camera APIs / actions /
+     * transition frames ("programmatic") — the mapbox `originalEvent`
+     * convention, the echo-loop half of two-way store binding.
+     */
+    onViewportChange?: (origin: ViewOrigin) => void;
     onSelectionChange?: (selection: Selection | null) => void;
     /** Fired once the map (deck.gl standalone, or the basemap) has finished its async init (spec: Behavior Engine "load" event). */
     onLoad?: () => void;

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.3.5";
+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;