@deepfuture/dui-map 1.1.0

package/map/map.js

@@ -0,0 +1,628 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+import { css, html, LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+import { provide } from "@lit/context";
+import { base } from "@deepfuture/dui-primitives/core/base";
+import { customEvent } from "@deepfuture/dui-primitives/core/event";
+import { mapThemeStyles } from "../theme/map-theme.js";
+import MapLibreGL from "maplibre-gl";
+// @ts-ignore — loaded as text via esbuild cssRawTextPlugin
+import maplibreCssText from "maplibre-gl/dist/maplibre-gl.css";
+import { mapContext } from "./map-context.js";
+const DEFAULT_STYLES = {
+    dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
+    light: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+};
+/** Fired when the map viewport changes (pan, zoom, rotate, pitch). */
+export const viewportChangeEvent = customEvent("dui-map-viewport-change", { bubbles: true, composed: true });
+/** Fired when the map finishes initial load. */
+export const mapLoadEvent = customEvent("dui-map-load", { bubbles: true, composed: true });
+/** Fired on single click on the map canvas. */
+export const mapClickEvent = customEvent("dui-map-click", { bubbles: true, composed: true });
+/** Fired on double-click on the map canvas. */
+export const mapDblClickEvent = customEvent("dui-map-dblclick", { bubbles: true, composed: true });
+/** Fired on right-click / long-press on the map canvas. */
+export const mapContextMenuEvent = customEvent("dui-map-contextmenu", { bubbles: true, composed: true });
+function getDocumentTheme() {
+    if (typeof document === "undefined")
+        return null;
+    if (document.documentElement.getAttribute("data-theme") === "dark")
+        return "dark";
+    if (document.documentElement.getAttribute("data-theme") === "light")
+        return "light";
+    // Fallback: check class (for compatibility with next-themes, etc.)
+    if (document.documentElement.classList.contains("dark"))
+        return "dark";
+    if (document.documentElement.classList.contains("light"))
+        return "light";
+    return null;
+}
+function getSystemTheme() {
+    if (typeof window === "undefined")
+        return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+/** MapLibre CSS adopted into shadow DOM. */
+const maplibreSheet = new CSSStyleSheet();
+maplibreSheet.replaceSync(maplibreCssText);
+/** Structural styles only — layout and behavioral CSS. */
+const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  [part="container"] {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  [part="loader"] {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .loader-dots {
+    display: flex;
+    gap: 4px;
+  }
+
+  .loader-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    animation: pulse 1s ease-in-out infinite;
+  }
+
+  .loader-dot:nth-child(2) { animation-delay: 150ms; }
+  .loader-dot:nth-child(3) { animation-delay: 300ms; }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 1; }
+  }
+`;
+/**
+ * `<dui-map>` — Root map component wrapping MapLibre GL JS.
+ *
+ * Initializes a MapLibre map inside its shadow DOM with CSS properly adopted.
+ * Provides map context to child components via Lit Context.
+ * Auto-detects light/dark theme from `data-theme` attribute on `<html>`.
+ *
+ * @slot - Map overlay content (controls, markers, popups, routes, etc.)
+ * @csspart container - The map container div.
+ * @csspart loader - The loading indicator overlay.
+ * @fires dui-map-viewport-change - Fired on pan/zoom/rotate/pitch. Detail: MapViewport
+ * @fires dui-map-load - Fired when map finishes loading.
+ * @fires dui-map-click - Fired on single click. Detail: MapClickDetail
+ * @fires dui-map-dblclick - Fired on double-click. Detail: MapClickDetail
+ * @fires dui-map-contextmenu - Fired on right-click / long-press. Detail: MapClickDetail
+ */
+let DuiMap = (() => {
+    let _classSuper = LitElement;
+    let _center_decorators;
+    let _center_initializers = [];
+    let _center_extraInitializers = [];
+    let _zoom_decorators;
+    let _zoom_initializers = [];
+    let _zoom_extraInitializers = [];
+    let _bearing_decorators;
+    let _bearing_initializers = [];
+    let _bearing_extraInitializers = [];
+    let _pitch_decorators;
+    let _pitch_initializers = [];
+    let _pitch_extraInitializers = [];
+    let _theme_decorators;
+    let _theme_initializers = [];
+    let _theme_extraInitializers = [];
+    let _styleLight_decorators;
+    let _styleLight_initializers = [];
+    let _styleLight_extraInitializers = [];
+    let _styleDark_decorators;
+    let _styleDark_initializers = [];
+    let _styleDark_extraInitializers = [];
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    let _noWorldCopies_decorators;
+    let _noWorldCopies_initializers = [];
+    let _noWorldCopies_extraInitializers = [];
+    let _controlled_decorators;
+    let _controlled_initializers = [];
+    let _controlled_extraInitializers = [];
+    let _minZoom_decorators;
+    let _minZoom_initializers = [];
+    let _minZoom_extraInitializers = [];
+    let _maxZoom_decorators;
+    let _maxZoom_initializers = [];
+    let _maxZoom_extraInitializers = [];
+    let _maxBounds_decorators;
+    let _maxBounds_initializers = [];
+    let _maxBounds_extraInitializers = [];
+    let _bounds_decorators;
+    let _bounds_initializers = [];
+    let _bounds_extraInitializers = [];
+    let _boundsPadding_decorators;
+    let _boundsPadding_initializers = [];
+    let _boundsPadding_extraInitializers = [];
+    let _private_mapInstance_decorators;
+    let _private_mapInstance_initializers = [];
+    let _private_mapInstance_extraInitializers = [];
+    let _private_mapInstance_descriptor;
+    let _private_isLoaded_decorators;
+    let _private_isLoaded_initializers = [];
+    let _private_isLoaded_extraInitializers = [];
+    let _private_isLoaded_descriptor;
+    let _private_isStyleLoaded_decorators;
+    let _private_isStyleLoaded_initializers = [];
+    let _private_isStyleLoaded_extraInitializers = [];
+    let _private_isStyleLoaded_descriptor;
+    let _private_resolvedTheme_decorators;
+    let _private_resolvedTheme_initializers = [];
+    let _private_resolvedTheme_extraInitializers = [];
+    let _private_resolvedTheme_descriptor;
+    let __ctx_decorators;
+    let __ctx_initializers = [];
+    let __ctx_extraInitializers = [];
+    return class DuiMap extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _center_decorators = [property({ type: Array })];
+            _zoom_decorators = [property({ type: Number })];
+            _bearing_decorators = [property({ type: Number })];
+            _pitch_decorators = [property({ type: Number })];
+            _theme_decorators = [property()];
+            _styleLight_decorators = [property({ attribute: "style-light" })];
+            _styleDark_decorators = [property({ attribute: "style-dark" })];
+            _loading_decorators = [property({ type: Boolean })];
+            _noWorldCopies_decorators = [property({ type: Boolean, attribute: "no-world-copies" })];
+            _controlled_decorators = [property({ type: Boolean })];
+            _minZoom_decorators = [property({ type: Number, attribute: "min-zoom" })];
+            _maxZoom_decorators = [property({ type: Number, attribute: "max-zoom" })];
+            _maxBounds_decorators = [property({ type: Array })];
+            _bounds_decorators = [property({ type: Array })];
+            _boundsPadding_decorators = [property({ type: Number, attribute: "bounds-padding" })];
+            _private_mapInstance_decorators = [state()];
+            _private_isLoaded_decorators = [state()];
+            _private_isStyleLoaded_decorators = [state()];
+            _private_resolvedTheme_decorators = [state()];
+            __ctx_decorators = [provide({ context: mapContext }), state()];
+            __esDecorate(this, null, _center_decorators, { kind: "accessor", name: "center", static: false, private: false, access: { has: obj => "center" in obj, get: obj => obj.center, set: (obj, value) => { obj.center = value; } }, metadata: _metadata }, _center_initializers, _center_extraInitializers);
+            __esDecorate(this, null, _zoom_decorators, { kind: "accessor", name: "zoom", static: false, private: false, access: { has: obj => "zoom" in obj, get: obj => obj.zoom, set: (obj, value) => { obj.zoom = value; } }, metadata: _metadata }, _zoom_initializers, _zoom_extraInitializers);
+            __esDecorate(this, null, _bearing_decorators, { kind: "accessor", name: "bearing", static: false, private: false, access: { has: obj => "bearing" in obj, get: obj => obj.bearing, set: (obj, value) => { obj.bearing = value; } }, metadata: _metadata }, _bearing_initializers, _bearing_extraInitializers);
+            __esDecorate(this, null, _pitch_decorators, { kind: "accessor", name: "pitch", static: false, private: false, access: { has: obj => "pitch" in obj, get: obj => obj.pitch, set: (obj, value) => { obj.pitch = value; } }, metadata: _metadata }, _pitch_initializers, _pitch_extraInitializers);
+            __esDecorate(this, null, _theme_decorators, { kind: "accessor", name: "theme", static: false, private: false, access: { has: obj => "theme" in obj, get: obj => obj.theme, set: (obj, value) => { obj.theme = value; } }, metadata: _metadata }, _theme_initializers, _theme_extraInitializers);
+            __esDecorate(this, null, _styleLight_decorators, { kind: "accessor", name: "styleLight", static: false, private: false, access: { has: obj => "styleLight" in obj, get: obj => obj.styleLight, set: (obj, value) => { obj.styleLight = value; } }, metadata: _metadata }, _styleLight_initializers, _styleLight_extraInitializers);
+            __esDecorate(this, null, _styleDark_decorators, { kind: "accessor", name: "styleDark", static: false, private: false, access: { has: obj => "styleDark" in obj, get: obj => obj.styleDark, set: (obj, value) => { obj.styleDark = value; } }, metadata: _metadata }, _styleDark_initializers, _styleDark_extraInitializers);
+            __esDecorate(this, null, _loading_decorators, { kind: "accessor", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
+            __esDecorate(this, null, _noWorldCopies_decorators, { kind: "accessor", name: "noWorldCopies", static: false, private: false, access: { has: obj => "noWorldCopies" in obj, get: obj => obj.noWorldCopies, set: (obj, value) => { obj.noWorldCopies = value; } }, metadata: _metadata }, _noWorldCopies_initializers, _noWorldCopies_extraInitializers);
+            __esDecorate(this, null, _controlled_decorators, { kind: "accessor", name: "controlled", static: false, private: false, access: { has: obj => "controlled" in obj, get: obj => obj.controlled, set: (obj, value) => { obj.controlled = value; } }, metadata: _metadata }, _controlled_initializers, _controlled_extraInitializers);
+            __esDecorate(this, null, _minZoom_decorators, { kind: "accessor", name: "minZoom", static: false, private: false, access: { has: obj => "minZoom" in obj, get: obj => obj.minZoom, set: (obj, value) => { obj.minZoom = value; } }, metadata: _metadata }, _minZoom_initializers, _minZoom_extraInitializers);
+            __esDecorate(this, null, _maxZoom_decorators, { kind: "accessor", name: "maxZoom", static: false, private: false, access: { has: obj => "maxZoom" in obj, get: obj => obj.maxZoom, set: (obj, value) => { obj.maxZoom = value; } }, metadata: _metadata }, _maxZoom_initializers, _maxZoom_extraInitializers);
+            __esDecorate(this, null, _maxBounds_decorators, { kind: "accessor", name: "maxBounds", static: false, private: false, access: { has: obj => "maxBounds" in obj, get: obj => obj.maxBounds, set: (obj, value) => { obj.maxBounds = value; } }, metadata: _metadata }, _maxBounds_initializers, _maxBounds_extraInitializers);
+            __esDecorate(this, null, _bounds_decorators, { kind: "accessor", name: "bounds", static: false, private: false, access: { has: obj => "bounds" in obj, get: obj => obj.bounds, set: (obj, value) => { obj.bounds = value; } }, metadata: _metadata }, _bounds_initializers, _bounds_extraInitializers);
+            __esDecorate(this, null, _boundsPadding_decorators, { kind: "accessor", name: "boundsPadding", static: false, private: false, access: { has: obj => "boundsPadding" in obj, get: obj => obj.boundsPadding, set: (obj, value) => { obj.boundsPadding = value; } }, metadata: _metadata }, _boundsPadding_initializers, _boundsPadding_extraInitializers);
+            __esDecorate(this, _private_mapInstance_descriptor = { get: __setFunctionName(function () { return this.#mapInstance_accessor_storage; }, "#mapInstance", "get"), set: __setFunctionName(function (value) { this.#mapInstance_accessor_storage = value; }, "#mapInstance", "set") }, _private_mapInstance_decorators, { kind: "accessor", name: "#mapInstance", static: false, private: true, access: { has: obj => #mapInstance in obj, get: obj => obj.#mapInstance, set: (obj, value) => { obj.#mapInstance = value; } }, metadata: _metadata }, _private_mapInstance_initializers, _private_mapInstance_extraInitializers);
+            __esDecorate(this, _private_isLoaded_descriptor = { get: __setFunctionName(function () { return this.#isLoaded_accessor_storage; }, "#isLoaded", "get"), set: __setFunctionName(function (value) { this.#isLoaded_accessor_storage = value; }, "#isLoaded", "set") }, _private_isLoaded_decorators, { kind: "accessor", name: "#isLoaded", static: false, private: true, access: { has: obj => #isLoaded in obj, get: obj => obj.#isLoaded, set: (obj, value) => { obj.#isLoaded = value; } }, metadata: _metadata }, _private_isLoaded_initializers, _private_isLoaded_extraInitializers);
+            __esDecorate(this, _private_isStyleLoaded_descriptor = { get: __setFunctionName(function () { return this.#isStyleLoaded_accessor_storage; }, "#isStyleLoaded", "get"), set: __setFunctionName(function (value) { this.#isStyleLoaded_accessor_storage = value; }, "#isStyleLoaded", "set") }, _private_isStyleLoaded_decorators, { kind: "accessor", name: "#isStyleLoaded", static: false, private: true, access: { has: obj => #isStyleLoaded in obj, get: obj => obj.#isStyleLoaded, set: (obj, value) => { obj.#isStyleLoaded = value; } }, metadata: _metadata }, _private_isStyleLoaded_initializers, _private_isStyleLoaded_extraInitializers);
+            __esDecorate(this, _private_resolvedTheme_descriptor = { get: __setFunctionName(function () { return this.#resolvedTheme_accessor_storage; }, "#resolvedTheme", "get"), set: __setFunctionName(function (value) { this.#resolvedTheme_accessor_storage = value; }, "#resolvedTheme", "set") }, _private_resolvedTheme_decorators, { kind: "accessor", name: "#resolvedTheme", static: false, private: true, access: { has: obj => #resolvedTheme in obj, get: obj => obj.#resolvedTheme, set: (obj, value) => { obj.#resolvedTheme = value; } }, metadata: _metadata }, _private_resolvedTheme_initializers, _private_resolvedTheme_extraInitializers);
+            __esDecorate(this, null, __ctx_decorators, { kind: "accessor", name: "_ctx", static: false, private: false, access: { has: obj => "_ctx" in obj, get: obj => obj._ctx, set: (obj, value) => { obj._ctx = value; } }, metadata: _metadata }, __ctx_initializers, __ctx_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-map";
+        static styles = [base, styles, mapThemeStyles];
+        #center_accessor_storage = __runInitializers(this, _center_initializers, [0, 0]);
+        /**
+         * Center coordinates as `[longitude, latitude]`.
+         * Accepts a JSON array string or is set programmatically.
+         */
+        get center() { return this.#center_accessor_storage; }
+        set center(value) { this.#center_accessor_storage = value; }
+        #zoom_accessor_storage = (__runInitializers(this, _center_extraInitializers), __runInitializers(this, _zoom_initializers, 1));
+        /** Zoom level (0–22). */
+        get zoom() { return this.#zoom_accessor_storage; }
+        set zoom(value) { this.#zoom_accessor_storage = value; }
+        #bearing_accessor_storage = (__runInitializers(this, _zoom_extraInitializers), __runInitializers(this, _bearing_initializers, 0));
+        /** Bearing (rotation) in degrees. */
+        get bearing() { return this.#bearing_accessor_storage; }
+        set bearing(value) { this.#bearing_accessor_storage = value; }
+        #pitch_accessor_storage = (__runInitializers(this, _bearing_extraInitializers), __runInitializers(this, _pitch_initializers, 0));
+        /** Pitch (tilt) in degrees. */
+        get pitch() { return this.#pitch_accessor_storage; }
+        set pitch(value) { this.#pitch_accessor_storage = value; }
+        #theme_accessor_storage = (__runInitializers(this, _pitch_extraInitializers), __runInitializers(this, _theme_initializers, undefined));
+        /** Force a specific theme. When unset, auto-detects from document. */
+        get theme() { return this.#theme_accessor_storage; }
+        set theme(value) { this.#theme_accessor_storage = value; }
+        #styleLight_accessor_storage = (__runInitializers(this, _theme_extraInitializers), __runInitializers(this, _styleLight_initializers, undefined));
+        /** Custom style URL for light theme. */
+        get styleLight() { return this.#styleLight_accessor_storage; }
+        set styleLight(value) { this.#styleLight_accessor_storage = value; }
+        #styleDark_accessor_storage = (__runInitializers(this, _styleLight_extraInitializers), __runInitializers(this, _styleDark_initializers, undefined));
+        /** Custom style URL for dark theme. */
+        get styleDark() { return this.#styleDark_accessor_storage; }
+        set styleDark(value) { this.#styleDark_accessor_storage = value; }
+        #loading_accessor_storage = (__runInitializers(this, _styleDark_extraInitializers), __runInitializers(this, _loading_initializers, false));
+        /** Show loading overlay. */
+        get loading() { return this.#loading_accessor_storage; }
+        set loading(value) { this.#loading_accessor_storage = value; }
+        #noWorldCopies_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _noWorldCopies_initializers, false));
+        /** Disable world copies (repeating map). */
+        get noWorldCopies() { return this.#noWorldCopies_accessor_storage; }
+        set noWorldCopies(value) { this.#noWorldCopies_accessor_storage = value; }
+        #controlled_accessor_storage = (__runInitializers(this, _noWorldCopies_extraInitializers), __runInitializers(this, _controlled_initializers, false));
+        /** Whether the viewport is controlled externally. */
+        get controlled() { return this.#controlled_accessor_storage; }
+        set controlled(value) { this.#controlled_accessor_storage = value; }
+        #minZoom_accessor_storage = (__runInitializers(this, _controlled_extraInitializers), __runInitializers(this, _minZoom_initializers, 0));
+        /** Minimum zoom level (0–22). */
+        get minZoom() { return this.#minZoom_accessor_storage; }
+        set minZoom(value) { this.#minZoom_accessor_storage = value; }
+        #maxZoom_accessor_storage = (__runInitializers(this, _minZoom_extraInitializers), __runInitializers(this, _maxZoom_initializers, 22));
+        /** Maximum zoom level (0–22). */
+        get maxZoom() { return this.#maxZoom_accessor_storage; }
+        set maxZoom(value) { this.#maxZoom_accessor_storage = value; }
+        #maxBounds_accessor_storage = (__runInitializers(this, _maxZoom_extraInitializers), __runInitializers(this, _maxBounds_initializers, undefined));
+        /** SW and NE corners constraining the viewable area. */
+        get maxBounds() { return this.#maxBounds_accessor_storage; }
+        set maxBounds(value) { this.#maxBounds_accessor_storage = value; }
+        #bounds_accessor_storage = (__runInitializers(this, _maxBounds_extraInitializers), __runInitializers(this, _bounds_initializers, undefined));
+        /** SW and NE corners as [[swLng, swLat], [neLng, neLat]]. Flies to fit when set. */
+        get bounds() { return this.#bounds_accessor_storage; }
+        set bounds(value) { this.#bounds_accessor_storage = value; }
+        #boundsPadding_accessor_storage = (__runInitializers(this, _bounds_extraInitializers), __runInitializers(this, _boundsPadding_initializers, 50));
+        /** Padding in pixels applied to fitBounds calls. */
+        get boundsPadding() { return this.#boundsPadding_accessor_storage; }
+        set boundsPadding(value) { this.#boundsPadding_accessor_storage = value; }
+        #mapInstance_accessor_storage = (__runInitializers(this, _boundsPadding_extraInitializers), __runInitializers(this, _private_mapInstance_initializers, null));
+        get #mapInstance() { return _private_mapInstance_descriptor.get.call(this); }
+        set #mapInstance(value) { return _private_mapInstance_descriptor.set.call(this, value); }
+        #isLoaded_accessor_storage = (__runInitializers(this, _private_mapInstance_extraInitializers), __runInitializers(this, _private_isLoaded_initializers, false));
+        get #isLoaded() { return _private_isLoaded_descriptor.get.call(this); }
+        set #isLoaded(value) { return _private_isLoaded_descriptor.set.call(this, value); }
+        #isStyleLoaded_accessor_storage = (__runInitializers(this, _private_isLoaded_extraInitializers), __runInitializers(this, _private_isStyleLoaded_initializers, false));
+        get #isStyleLoaded() { return _private_isStyleLoaded_descriptor.get.call(this); }
+        set #isStyleLoaded(value) { return _private_isStyleLoaded_descriptor.set.call(this, value); }
+        #resolvedTheme_accessor_storage = (__runInitializers(this, _private_isStyleLoaded_extraInitializers), __runInitializers(this, _private_resolvedTheme_initializers, getDocumentTheme() ?? getSystemTheme()));
+        get #resolvedTheme() { return _private_resolvedTheme_descriptor.get.call(this); }
+        set #resolvedTheme(value) { return _private_resolvedTheme_descriptor.set.call(this, value); }
+        #currentStyle = (__runInitializers(this, _private_resolvedTheme_extraInitializers), null);
+        #themeObserver = null;
+        #mediaQuery = null;
+        #mediaHandler = null;
+        #internalUpdate = false;
+        #resizeObserver = null;
+        #_ctx_accessor_storage = __runInitializers(this, __ctx_initializers, { map: null, isLoaded: false });
+        get _ctx() { return this.#_ctx_accessor_storage; }
+        set _ctx(value) { this.#_ctx_accessor_storage = value; }
+        #getMapStyle() {
+            if (this.#resolvedTheme === "dark") {
+                return this.styleDark ?? DEFAULT_STYLES.dark;
+            }
+            return this.styleLight ?? DEFAULT_STYLES.light;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            // Adopt MapLibre CSS into shadow root
+            this.shadowRoot.adoptedStyleSheets = [
+                ...this.shadowRoot.adoptedStyleSheets,
+                maplibreSheet,
+            ];
+            this.#startThemeDetection();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.#stopThemeDetection();
+            this.#destroyMap();
+        }
+        firstUpdated() {
+            this.#initMap();
+        }
+        updated(changed) {
+            // Theme change → swap style
+            if (this.#mapInstance && this.#currentStyle !== this.#getMapStyle()) {
+                this.#isStyleLoaded = false;
+                this.#currentStyle = this.#getMapStyle();
+                this.#mapInstance.setStyle(this.#currentStyle, { diff: true });
+            }
+            // Controlled viewport sync
+            if (this.controlled && this.#mapInstance && !this.#mapInstance.isMoving()) {
+                if (changed.has("center") || changed.has("zoom") || changed.has("bearing") || changed.has("pitch")) {
+                    this.#syncViewport();
+                }
+            }
+            // Min/Max zoom
+            if (this.#mapInstance && changed.has("minZoom")) {
+                this.#mapInstance.setMinZoom(this.minZoom);
+            }
+            if (this.#mapInstance && changed.has("maxZoom")) {
+                this.#mapInstance.setMaxZoom(this.maxZoom);
+            }
+            // Max bounds
+            if (this.#mapInstance && changed.has("maxBounds")) {
+                this.#mapInstance.setMaxBounds(this.maxBounds ?? null);
+            }
+            // Bounds — fly to fit
+            if (this.#mapInstance && changed.has("bounds") && this.bounds) {
+                this.fitBounds(this.bounds, { padding: this.boundsPadding, duration: 500 });
+            }
+            // Update context only when values actually change
+            const isLoaded = this.#isLoaded && this.#isStyleLoaded;
+            if (this._ctx.map !== this.#mapInstance || this._ctx.isLoaded !== isLoaded) {
+                this._ctx = { map: this.#mapInstance, isLoaded };
+            }
+        }
+        /** Get the raw MapLibre GL instance. */
+        getMapInstance() {
+            return this.#mapInstance;
+        }
+        /**
+         * Suppress viewport-change events during an animation, then dispatch
+         * a single final event on moveend.
+         */
+        #animateAndDispatch(action) {
+            if (!this.#mapInstance)
+                return;
+            this.#internalUpdate = true;
+            action();
+            this.#mapInstance.once("moveend", () => {
+                this.#internalUpdate = false;
+                const c = this.#mapInstance.getCenter();
+                this.dispatchEvent(viewportChangeEvent({
+                    center: [c.lng, c.lat],
+                    zoom: this.#mapInstance.getZoom(),
+                    bearing: this.#mapInstance.getBearing(),
+                    pitch: this.#mapInstance.getPitch(),
+                }));
+            });
+        }
+        /** Animate to a position with a parabolic flight path. */
+        flyTo(options) {
+            this.#animateAndDispatch(() => {
+                this.#mapInstance.flyTo({
+                    ...options,
+                    duration: options.duration ?? 1500,
+                    curve: options.curve ?? 1.42,
+                });
+            });
+        }
+        /** Animate to a position with a linear ease. */
+        easeTo(options) {
+            this.#animateAndDispatch(() => {
+                this.#mapInstance.easeTo({
+                    ...options,
+                    duration: options.duration ?? 500,
+                });
+            });
+        }
+        /** Fly to fit the given bounds. */
+        fitBounds(bounds, options) {
+            this.#animateAndDispatch(() => {
+                this.#mapInstance.fitBounds(bounds, {
+                    padding: options?.padding ?? this.boundsPadding,
+                    maxZoom: options?.maxZoom,
+                    duration: options?.duration ?? 500,
+                });
+            });
+        }
+        /** Compute a bounding box from all child dui-map-marker elements and fly to fit them. */
+        fitToMarkers(options) {
+            const markers = this.querySelectorAll("dui-map-marker");
+            if (!markers.length)
+                return;
+            let minLng = Infinity, minLat = Infinity, maxLng = -Infinity, maxLat = -Infinity;
+            for (const marker of markers) {
+                const lng = marker.longitude;
+                const lat = marker.latitude;
+                if (lng < minLng)
+                    minLng = lng;
+                if (lng > maxLng)
+                    maxLng = lng;
+                if (lat < minLat)
+                    minLat = lat;
+                if (lat > maxLat)
+                    maxLat = lat;
+            }
+            this.fitBounds([[minLng, minLat], [maxLng, maxLat]], options);
+        }
+        #initMap() {
+            const container = this.shadowRoot.querySelector("[part='container']");
+            if (!container)
+                return;
+            const initialStyle = this.#getMapStyle();
+            this.#currentStyle = initialStyle;
+            const map = new MapLibreGL.Map({
+                container,
+                style: initialStyle,
+                center: this.center,
+                zoom: this.zoom,
+                bearing: this.bearing,
+                pitch: this.pitch,
+                minZoom: this.minZoom,
+                maxZoom: this.maxZoom,
+                maxBounds: this.maxBounds,
+                renderWorldCopies: !this.noWorldCopies,
+                attributionControl: { compact: true },
+            });
+            map.on("load", () => {
+                this.#isLoaded = true;
+                this.requestUpdate();
+                this.dispatchEvent(mapLoadEvent());
+            });
+            map.on("styledata", () => {
+                // Small delay to ensure style is fully processed
+                setTimeout(() => {
+                    this.#isStyleLoaded = true;
+                    this.requestUpdate();
+                }, 100);
+            });
+            map.on("move", () => {
+                if (this.#internalUpdate)
+                    return;
+                const c = map.getCenter();
+                this.dispatchEvent(viewportChangeEvent({
+                    center: [c.lng, c.lat],
+                    zoom: map.getZoom(),
+                    bearing: map.getBearing(),
+                    pitch: map.getPitch(),
+                }));
+            });
+            // Map interaction events
+            map.on("click", (e) => {
+                this.dispatchEvent(mapClickEvent({
+                    lngLat: { lng: e.lngLat.lng, lat: e.lngLat.lat },
+                    point: { x: e.point.x, y: e.point.y },
+                }));
+            });
+            map.on("dblclick", (e) => {
+                this.dispatchEvent(mapDblClickEvent({
+                    lngLat: { lng: e.lngLat.lng, lat: e.lngLat.lat },
+                    point: { x: e.point.x, y: e.point.y },
+                }));
+            });
+            map.on("contextmenu", (e) => {
+                this.dispatchEvent(mapContextMenuEvent({
+                    lngLat: { lng: e.lngLat.lng, lat: e.lngLat.lat },
+                    point: { x: e.point.x, y: e.point.y },
+                }));
+            });
+            // ResizeObserver so map resizes when host element resizes
+            this.#resizeObserver = new ResizeObserver(() => {
+                map.resize();
+            });
+            this.#resizeObserver.observe(this);
+            this.#mapInstance = map;
+            // Context is updated in updated() — just trigger re-render
+            this.requestUpdate();
+        }
+        #destroyMap() {
+            this.#resizeObserver?.disconnect();
+            this.#resizeObserver = null;
+            if (this.#mapInstance) {
+                this.#mapInstance.remove();
+                this.#mapInstance = null;
+            }
+            this.#isLoaded = false;
+            this.#isStyleLoaded = false;
+            this._ctx = { map: null, isLoaded: false };
+        }
+        #syncViewport() {
+            const map = this.#mapInstance;
+            const current = map.getCenter();
+            const c = this.center;
+            if (current.lng === c[0] &&
+                current.lat === c[1] &&
+                map.getZoom() === this.zoom &&
+                map.getBearing() === this.bearing &&
+                map.getPitch() === this.pitch)
+                return;
+            this.#internalUpdate = true;
+            map.jumpTo({
+                center: this.center,
+                zoom: this.zoom,
+                bearing: this.bearing,
+                pitch: this.pitch,
+            });
+            this.#internalUpdate = false;
+        }
+        #startThemeDetection() {
+            if (this.theme) {
+                this.#resolvedTheme = this.theme;
+                return;
+            }
+            // Watch data-theme and class changes on <html>
+            this.#themeObserver = new MutationObserver(() => {
+                const docTheme = getDocumentTheme();
+                if (docTheme)
+                    this.#resolvedTheme = docTheme;
+            });
+            this.#themeObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ["data-theme", "class"],
+            });
+            // Watch system preference
+            this.#mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+            this.#mediaHandler = (e) => {
+                if (!getDocumentTheme()) {
+                    this.#resolvedTheme = e.matches ? "dark" : "light";
+                }
+            };
+            this.#mediaQuery.addEventListener("change", this.#mediaHandler);
+        }
+        #stopThemeDetection() {
+            this.#themeObserver?.disconnect();
+            this.#themeObserver = null;
+            if (this.#mediaQuery && this.#mediaHandler) {
+                this.#mediaQuery.removeEventListener("change", this.#mediaHandler);
+            }
+            this.#mediaQuery = null;
+            this.#mediaHandler = null;
+        }
+        render() {
+            return html `
+      <div part="container">
+        ${(!this.#isLoaded || this.loading) ? html `
+          <div part="loader">
+            <div class="loader-dots">
+              <div class="loader-dot"></div>
+              <div class="loader-dot"></div>
+              <div class="loader-dot"></div>
+            </div>
+          </div>
+        ` : ""}
+        ${this.#mapInstance ? html `<slot></slot>` : ""}
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, __ctx_extraInitializers);
+        }
+    };
+})();
+export { DuiMap };
+customElements.define(DuiMap.tagName, DuiMap);

package/marker/index.d.ts

@@ -0,0 +1,9 @@
+import { DuiMapMarker, dragStartEvent, dragEvent, dragEndEvent } from "./map-marker.js";
+import { DuiMapMarkerContent } from "./map-marker-content.js";
+import { DuiMapMarkerPopup } from "./map-marker-popup.js";
+import { DuiMapMarkerTooltip } from "./map-marker-tooltip.js";
+import { DuiMapMarkerLabel } from "./map-marker-label.js";
+export { DuiMapMarker, DuiMapMarkerContent, DuiMapMarkerPopup, DuiMapMarkerTooltip, DuiMapMarkerLabel, dragStartEvent, dragEvent, dragEndEvent, };
+export { markerContext } from "./marker-context.js";
+export type { MarkerContext } from "./marker-context.js";
+export type { LngLat } from "./map-marker.js";

package/marker/index.js

@@ -0,0 +1,7 @@
+import { DuiMapMarker, dragStartEvent, dragEvent, dragEndEvent } from "./map-marker.js";
+import { DuiMapMarkerContent } from "./map-marker-content.js";
+import { DuiMapMarkerPopup } from "./map-marker-popup.js";
+import { DuiMapMarkerTooltip } from "./map-marker-tooltip.js";
+import { DuiMapMarkerLabel } from "./map-marker-label.js";
+export { DuiMapMarker, DuiMapMarkerContent, DuiMapMarkerPopup, DuiMapMarkerTooltip, DuiMapMarkerLabel, dragStartEvent, dragEvent, dragEndEvent, };
+export { markerContext } from "./marker-context.js";