@nika-js/onlymap 0.4.0 → 0.4.1

package/README.md

@@ -69,7 +69,7 @@ Or with no build step at all, straight from a CDN:
 
 The bare package URL serves `dist/onlymap.standalone.js`, a single-file bundle built for exactly this (jsDelivr too). Use a CDN that serves the package's raw files — **not** a rebundling CDN like esm.sh, which re-splits the bundle into duplicate copies of the deck.gl/luma.gl runtime and breaks every layer's shader compilation.
 
-Then `npx @nika-js/onlymap init` wires up VS Code IntelliSense and `!`-prefixed manifest snippets for your project. The library ships with 503 unit/behavioral tests and 30 Playwright GPU tests.
+Then `npx @nika-js/onlymap init` wires up VS Code IntelliSense and `!`-prefixed manifest snippets for your project. The library ships with 518 unit/behavioral tests and 41 Playwright GPU tests.
 
 The [examples](https://github.com/NikaGeospatial/onlymapjs/tree/main/examples) are the best tour: widgets, behaviors & overlays, basemaps, columnar/Arrow data, manual drawing, 3D models, scene lighting (with the native lighting widget), DEM terrain, a live WebSocket ship feed, and a polled driver fleet.
 
@@ -81,7 +81,7 @@ A handful of elements, one rule: **attributes are kebab-case versions of deck.gl
 |---|---|
 | `<om-map>` | The map. `center`, `zoom`, `pitch`, `bearing`; `basemap` takes a free preset (`positron`, `liberty`, `dark-matter`, `osm`, …), a style URL, or `"none"` (standalone canvas) — and switches **live**; `validate` for a live on-page error panel. |
 | `<om-layer>` | Any of **34 layer types** by name — all of deck.gl's core, geo, aggregation, and mesh layers (Scatterplot, GeoJson, Arc, Path, Heatmap, Hexagon, Trips, Tile, Tile3D, Scenegraph, …) plus the built-in `PopupLayer` for WebGL badges/labels at scale and the native `COGLayer` for GeoTIFF rasters. `id` required; `label`/`color` feed the legend. |
-| `<om-widget>` | UI panels. Built-ins: `legend` (symbology-aware: color scales render as gradient ramps or class ranges, categorical ternaries as discrete palettes), `layer-switcher`, `basemap-switcher`, `lighting`, `zoom-controls`, `undo-redo`, `scale-bar`, `attribution`, `filter`, `draw`, `vega-lite` (live charts). Or write your own inline with HTML + a `<script type="om/widget">`. Themeable from plain page CSS via custom properties: `om-map { --om-widget-bg: #111827; --om-widget-fg: #f9fafb; }` (also `-muted`, `-border`, `-hover-bg`, `-accent`). |
+| `<om-widget>` | UI panels. Built-ins: `legend` (symbology-aware: color scales render as gradient ramps or class ranges, categorical ternaries as discrete palettes), `layer-switcher`, `basemap-switcher`, `lighting`, `zoom-controls`, `undo-redo`, `scale-bar`, `attribution`, `filter`, `draw`, `vega-lite` (live charts). Or write your own inline with HTML + a `<script type="om/widget">`. **Placement is managed**: `position` takes one of 8 logical, RTL-aware slots (`top-start`, `top-center`, `top-end`, `center-start`, `center-end`, `bottom-start`, `bottom-center`, `bottom-end`; legacy corner names alias) — same-slot widgets stack with flush edges and a shared gap, `order` sets in-slot ordering, and `position="manual"` opts out entirely (a plain block you style yourself, even outside the map). Themeable from plain page CSS via custom properties: `om-map { --om-widget-bg: #111827; --om-widget-fg: #f9fafb; }` (also `-muted`, `-border`, `-hover-bg`, `-accent`), plus layout tokens (`--om-widget-inset-x/-y`, `--om-widget-gap-x/-y`, `--om-widget-opacity`, `--om-widget-radius`) or the no-CSS sugar `<om-map widget-style="gap:10 opacity:0.9">`. |
 | `<om-overlay>` | Rich HTML anchored to a map location — a static `anchor="[lng, lat]"`, the current selection, or a feature's own geometry via `anchor-layer`/`anchor-feature-id`. `{{field}}` interpolates the picked feature, HTML-escaped by default. |
 | `<om-behavior>` | Declarative interactions: `on="click|hover|drag|load|data-loaded"` → a named action. |
 | `<om-story>` | A storyboard: `<om-step>` children fire actions on a timeline. Controlled by the `player` widget, behaviors, or `storyEl.play()/pause()/seek()`. |

package/dist/{LercDecode.es-CWLcQT4F.js → LercDecode.es-B35eeLUh.js}

@@ -19,7 +19,7 @@ async function v(N = {}) {
   if (n) {
     const { createRequire: I } = await import(
       /*webpackIgnore:true*/
-      "./lerc-CSc9BX_F.js"
+      "./lerc-filCwJiM.js"
     ).then((g) => g._);
     var O = I(import.meta.url);
   }

package/dist/{basemap-CZupn0P2.js → basemap--znNIrJq.js}

@@ -1,4 +1,4 @@
-import { C as ny, L as sy, M as oy, m as ay, c as ka, z as oc, a as Sd, G as sm, V as ly, W as cy, b as uy, g as hy, d as Vu, f as Ed, e as dy, l as py, u as fy, D as Qf, h as my } from "./index-BoxZ3Mec.js";
+import { C as ny, L as sy, M as oy, m as ay, c as ka, z as oc, a as Sd, G as sm, V as ly, W as cy, b as uy, g as hy, d as Vu, f as Ed, e as dy, l as py, u as fy, D as Qf, h as my } from "./index-BKiyX-jQ.js";
 const Cd = Math.PI / 180, gy = 180 / Math.PI;
 function em(Pe, Q = 0) {
   const ge = Math.min(180, Pe) * Cd;

package/dist/elements/om-map.d.ts

@@ -21,6 +21,7 @@ import { HTMLElementBase } from "../env";
 import { type RuntimeContext } from "../ctx";
 import { type LightingIR } from "../scene-lighting";
 import { type TerrainIR } from "../terrain";
+import { type WidgetSlot } from "../widget-layout";
 import { type SnapshotOptions } from "../snapshot";
 import type { LayerIR } from "../ir";
 import type { Selection } from "../selection";
@@ -53,6 +54,35 @@ export declare class OmMapElement extends HTMLElementBase {
     private loadDispatched;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Library-owned stacking layer: one absolutely-positioned flex container per managed slot, created lazily. Rendering plumbing, never authored state. */
+    private widgetLayer;
+    private readonly slotContainers;
+    /** Is this node the widget layer or one of its slot containers? (Their childList churn is plumbing, not manifest edits.) */
+    private isWidgetLayoutPlumbing;
+    /**
+     * Places an <om-widget> into its managed slot container (creating layer/
+     * container on demand), or back into the light DOM for the manual tier.
+     * The reparent is RENDERING PLUMBING: history-suppressed (undo must never
+     * replay it) and filtered out of manifest-change detection. The widget's
+     * authored state — its `position` attribute — never changes here.
+     */
+    /** Per-widget comment anchors marking the AUTHORED light-DOM position — a managed→manual flip restores the widget where the author wrote it, not at the end. */
+    private readonly slotAnchors;
+    /** The widget layer div — lazy, shared by slot containers AND the layout tokens (both lanes put tokens on the layer, never on an authored element). */
+    private ensureWidgetLayer;
+    slotWidgetInternal(el: HTMLElement, slot: WidgetSlot): void;
+    /** Custom properties applied from widget-style — tracked so an edit reverts removed pairs to their defaults (CSSStyleDeclaration iteration of custom props is not portable). */
+    private appliedWidgetStyleProps;
+    /**
+     * `widget-style` sugar → custom properties on the WIDGET LAYER, never the
+     * authored <om-map> element (matching the React lane): inline style on an
+     * authored element would collide with author styles and leak into any
+     * outerHTML serialization. Unparseable/out-of-range pairs are skipped
+     * live; validation carries the loud version. Author page-CSS tokens on
+     * `om-map { --om-widget-*: … }` still cascade INTO the layer; the sugar
+     * (being inline on the layer) wins over page CSS, matching attr > CSS.
+     */
+    private applyWidgetStyle;
     registerWidgetInternal(el: Element, watch: string[], notify: (ctx: RuntimeContext) => void): void;
     unregisterWidgetInternal(el: Element): void;
     registerOverlayInternal(overlay: OverlayHost): void;

package/dist/elements/om-widget.d.ts

@@ -21,8 +21,23 @@ export declare class OmWidgetElement extends HTMLElementBase implements WidgetHo
     private mapEl;
     private renderFn?;
     private watchTokens;
+    private hostStyle;
+    /** Live placement attributes (spec: "Widget Layout Manager") — position/order edits (incl. undo replays) re-slot without a remount. */
+    static readonly observedAttributes: string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /**
+     * Slot placement (spec: "Widget Layout Manager"). Managed slots: the host
+     * is a plain flex item inside the map-owned slot container (flush edges,
+     * gap, stacking come from the container — never from the widget). Manual:
+     * a plain block the author styles and places, including outside the map.
+     * `order` (managed tier) is deterministic in-slot ordering via flex
+     * `order`; default is DOM order.
+     */
+    /** Last-applied tier — hostStyle only rewrites (CSSOM reparse) on an actual manual↔managed flip, not on every replayed identical write. */
+    private appliedTier;
+    private applyPlacement;
     private setUpRenderer;
     $(selector: string): Element | null;
     $$(selector: string): NodeListOf<Element>;