@deepfuture/dui-map 1.1.0

package/marker/map-marker-tooltip.js

@@ -0,0 +1,159 @@
+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;
+};
+import { css, LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { consume } from "@lit/context";
+import { base } from "@deepfuture/dui-primitives/core/base";
+import MapLibreGL from "maplibre-gl";
+import { markerContext } from "./marker-context.js";
+const styles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-map-marker-tooltip>` — Hover tooltip on a marker.
+ *
+ * Shows a popup when the user hovers over the parent marker.
+ *
+ * @slot - Tooltip content.
+ * @csspart tooltip - The tooltip content wrapper.
+ */
+let DuiMapMarkerTooltip = (() => {
+    let _classSuper = LitElement;
+    let _tooltipOffset_decorators;
+    let _tooltipOffset_initializers = [];
+    let _tooltipOffset_extraInitializers = [];
+    let __markerCtx_decorators;
+    let __markerCtx_initializers = [];
+    let __markerCtx_extraInitializers = [];
+    return class DuiMapMarkerTooltip extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _tooltipOffset_decorators = [property({ type: Number, attribute: "tooltip-offset" })];
+            __markerCtx_decorators = [consume({ context: markerContext, subscribe: true })];
+            __esDecorate(this, null, _tooltipOffset_decorators, { kind: "accessor", name: "tooltipOffset", static: false, private: false, access: { has: obj => "tooltipOffset" in obj, get: obj => obj.tooltipOffset, set: (obj, value) => { obj.tooltipOffset = value; } }, metadata: _metadata }, _tooltipOffset_initializers, _tooltipOffset_extraInitializers);
+            __esDecorate(this, null, __markerCtx_decorators, { kind: "accessor", name: "_markerCtx", static: false, private: false, access: { has: obj => "_markerCtx" in obj, get: obj => obj._markerCtx, set: (obj, value) => { obj._markerCtx = value; } }, metadata: _metadata }, __markerCtx_initializers, __markerCtx_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-map-marker-tooltip";
+        static styles = [base, styles];
+        #tooltipOffset_accessor_storage = __runInitializers(this, _tooltipOffset_initializers, 16);
+        /** Tooltip offset from the marker in pixels. */
+        get tooltipOffset() { return this.#tooltipOffset_accessor_storage; }
+        set tooltipOffset(value) { this.#tooltipOffset_accessor_storage = value; }
+        #_markerCtx_accessor_storage = (__runInitializers(this, _tooltipOffset_extraInitializers), __runInitializers(this, __markerCtx_initializers, void 0));
+        get _markerCtx() { return this.#_markerCtx_accessor_storage; }
+        set _markerCtx(value) { this.#_markerCtx_accessor_storage = value; }
+        #tooltip = (__runInitializers(this, __markerCtx_extraInitializers), null);
+        #container = document.createElement("div");
+        #mouseEnterHandler = null;
+        #mouseLeaveHandler = null;
+        #bound = false;
+        connectedCallback() {
+            super.connectedCallback();
+            this.#tooltip = new MapLibreGL.Popup({
+                offset: this.tooltipOffset,
+                closeOnClick: true,
+                closeButton: false,
+                className: "dui-tooltip",
+            }).setMaxWidth("none");
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.#unbindEvents();
+            this.#tooltip?.remove();
+            this.#tooltip = null;
+        }
+        updated() {
+            if (!this._markerCtx?.marker || !this._markerCtx?.map || !this.#tooltip)
+                return;
+            this.#tooltip.setDOMContent(this.#container);
+            if (!this.#bound) {
+                this.#bindEvents();
+            }
+            // Update offset if changed
+            if (this.#tooltip.options?.offset !== this.tooltipOffset) {
+                this.#tooltip.setOffset(this.tooltipOffset);
+            }
+            this.#renderIntoPortal();
+        }
+        #bindEvents() {
+            const el = this._markerCtx?.marker?.getElement();
+            const map = this._markerCtx?.map;
+            if (!el || !map)
+                return;
+            this.#mouseEnterHandler = () => {
+                this.#tooltip.setLngLat(this._markerCtx.marker.getLngLat()).addTo(map);
+            };
+            this.#mouseLeaveHandler = () => {
+                this.#tooltip.remove();
+            };
+            el.addEventListener("mouseenter", this.#mouseEnterHandler);
+            el.addEventListener("mouseleave", this.#mouseLeaveHandler);
+            this.#bound = true;
+        }
+        #unbindEvents() {
+            const el = this._markerCtx?.marker?.getElement();
+            if (!el)
+                return;
+            if (this.#mouseEnterHandler)
+                el.removeEventListener("mouseenter", this.#mouseEnterHandler);
+            if (this.#mouseLeaveHandler)
+                el.removeEventListener("mouseleave", this.#mouseLeaveHandler);
+            this.#mouseEnterHandler = null;
+            this.#mouseLeaveHandler = null;
+            this.#bound = false;
+        }
+        #renderIntoPortal() {
+            const slot = this.shadowRoot.querySelector("slot");
+            if (!slot)
+                return;
+            const assigned = slot.assignedNodes({ flatten: true });
+            this.#container.innerHTML = "";
+            const wrapper = document.createElement("div");
+            wrapper.setAttribute("part", "tooltip");
+            for (const node of assigned) {
+                wrapper.appendChild(node.cloneNode(true));
+            }
+            this.#container.appendChild(wrapper);
+        }
+        render() {
+            return html `<slot style="display:none" @slotchange=${this.#renderIntoPortal}></slot>`;
+        }
+    };
+})();
+export { DuiMapMarkerTooltip };
+customElements.define(DuiMapMarkerTooltip.tagName, DuiMapMarkerTooltip);

package/marker/map-marker.d.ts

@@ -0,0 +1,48 @@
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+import MapLibreGL from "maplibre-gl";
+import { type MapContext } from "../map/map-context.js";
+import { type MarkerContext } from "./marker-context.js";
+export type LngLat = {
+    lng: number;
+    lat: number;
+};
+/** Fired when marker drag starts. */
+export declare const dragStartEvent: (detail: LngLat) => CustomEvent<LngLat>;
+/** Fired during marker drag. */
+export declare const dragEvent: (detail: LngLat) => CustomEvent<LngLat>;
+/** Fired when marker drag ends. */
+export declare const dragEndEvent: (detail: LngLat) => CustomEvent<LngLat>;
+/**
+ * `<dui-map-marker>` — Places a marker at a coordinate on the map.
+ *
+ * Contains sub-components: `<dui-map-marker-content>`, `<dui-map-marker-popup>`,
+ * `<dui-map-marker-tooltip>`, `<dui-map-marker-label>`.
+ *
+ * @slot - Marker sub-components.
+ * @fires dui-marker-dragstart - Drag started. Detail: { lng, lat }
+ * @fires dui-marker-drag - Dragging. Detail: { lng, lat }
+ * @fires dui-marker-dragend - Drag ended. Detail: { lng, lat }
+ */
+export declare class DuiMapMarker extends LitElement {
+    #private;
+    static tagName: "dui-map-marker";
+    static styles: import("lit").CSSResult[];
+    /** Longitude coordinate. */
+    accessor longitude: number;
+    /** Latitude coordinate. */
+    accessor latitude: number;
+    /** Whether the marker can be dragged. */
+    accessor draggable: boolean;
+    /** Marker rotation in degrees. */
+    accessor rotation: number;
+    /** Offset from the marker center as `[x, y]`. */
+    accessor offset: [number, number];
+    accessor _mapCtx: MapContext;
+    accessor _markerCtx: MarkerContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    /** Get the underlying MapLibre Marker instance. */
+    getMarkerInstance(): MapLibreGL.Marker | null;
+    render(): TemplateResult;
+}

package/marker/map-marker.js

@@ -0,0 +1,220 @@
+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;
+};
+import { css, LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { provide, consume } from "@lit/context";
+import { base } from "@deepfuture/dui-primitives/core/base";
+import { customEvent } from "@deepfuture/dui-primitives/core/event";
+import MapLibreGL from "maplibre-gl";
+import { mapContext } from "../map/map-context.js";
+import { markerContext } from "./marker-context.js";
+/** Fired when marker drag starts. */
+export const dragStartEvent = customEvent("dui-marker-dragstart", { bubbles: true, composed: true });
+/** Fired during marker drag. */
+export const dragEvent = customEvent("dui-marker-drag", { bubbles: true, composed: true });
+/** Fired when marker drag ends. */
+export const dragEndEvent = customEvent("dui-marker-dragend", { bubbles: true, composed: true });
+const styles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-map-marker>` — Places a marker at a coordinate on the map.
+ *
+ * Contains sub-components: `<dui-map-marker-content>`, `<dui-map-marker-popup>`,
+ * `<dui-map-marker-tooltip>`, `<dui-map-marker-label>`.
+ *
+ * @slot - Marker sub-components.
+ * @fires dui-marker-dragstart - Drag started. Detail: { lng, lat }
+ * @fires dui-marker-drag - Dragging. Detail: { lng, lat }
+ * @fires dui-marker-dragend - Drag ended. Detail: { lng, lat }
+ */
+let DuiMapMarker = (() => {
+    let _classSuper = LitElement;
+    let _longitude_decorators;
+    let _longitude_initializers = [];
+    let _longitude_extraInitializers = [];
+    let _latitude_decorators;
+    let _latitude_initializers = [];
+    let _latitude_extraInitializers = [];
+    let _draggable_decorators;
+    let _draggable_initializers = [];
+    let _draggable_extraInitializers = [];
+    let _rotation_decorators;
+    let _rotation_initializers = [];
+    let _rotation_extraInitializers = [];
+    let _offset_decorators;
+    let _offset_initializers = [];
+    let _offset_extraInitializers = [];
+    let __mapCtx_decorators;
+    let __mapCtx_initializers = [];
+    let __mapCtx_extraInitializers = [];
+    let __markerCtx_decorators;
+    let __markerCtx_initializers = [];
+    let __markerCtx_extraInitializers = [];
+    return class DuiMapMarker extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _longitude_decorators = [property({ type: Number })];
+            _latitude_decorators = [property({ type: Number })];
+            _draggable_decorators = [property({ type: Boolean })];
+            _rotation_decorators = [property({ type: Number })];
+            _offset_decorators = [property({ type: Array })];
+            __mapCtx_decorators = [consume({ context: mapContext, subscribe: true })];
+            __markerCtx_decorators = [provide({ context: markerContext }), state()];
+            __esDecorate(this, null, _longitude_decorators, { kind: "accessor", name: "longitude", static: false, private: false, access: { has: obj => "longitude" in obj, get: obj => obj.longitude, set: (obj, value) => { obj.longitude = value; } }, metadata: _metadata }, _longitude_initializers, _longitude_extraInitializers);
+            __esDecorate(this, null, _latitude_decorators, { kind: "accessor", name: "latitude", static: false, private: false, access: { has: obj => "latitude" in obj, get: obj => obj.latitude, set: (obj, value) => { obj.latitude = value; } }, metadata: _metadata }, _latitude_initializers, _latitude_extraInitializers);
+            __esDecorate(this, null, _draggable_decorators, { kind: "accessor", name: "draggable", static: false, private: false, access: { has: obj => "draggable" in obj, get: obj => obj.draggable, set: (obj, value) => { obj.draggable = value; } }, metadata: _metadata }, _draggable_initializers, _draggable_extraInitializers);
+            __esDecorate(this, null, _rotation_decorators, { kind: "accessor", name: "rotation", static: false, private: false, access: { has: obj => "rotation" in obj, get: obj => obj.rotation, set: (obj, value) => { obj.rotation = value; } }, metadata: _metadata }, _rotation_initializers, _rotation_extraInitializers);
+            __esDecorate(this, null, _offset_decorators, { kind: "accessor", name: "offset", static: false, private: false, access: { has: obj => "offset" in obj, get: obj => obj.offset, set: (obj, value) => { obj.offset = value; } }, metadata: _metadata }, _offset_initializers, _offset_extraInitializers);
+            __esDecorate(this, null, __mapCtx_decorators, { kind: "accessor", name: "_mapCtx", static: false, private: false, access: { has: obj => "_mapCtx" in obj, get: obj => obj._mapCtx, set: (obj, value) => { obj._mapCtx = value; } }, metadata: _metadata }, __mapCtx_initializers, __mapCtx_extraInitializers);
+            __esDecorate(this, null, __markerCtx_decorators, { kind: "accessor", name: "_markerCtx", static: false, private: false, access: { has: obj => "_markerCtx" in obj, get: obj => obj._markerCtx, set: (obj, value) => { obj._markerCtx = value; } }, metadata: _metadata }, __markerCtx_initializers, __markerCtx_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-map-marker";
+        static styles = [base, styles];
+        #longitude_accessor_storage = __runInitializers(this, _longitude_initializers, 0);
+        /** Longitude coordinate. */
+        get longitude() { return this.#longitude_accessor_storage; }
+        set longitude(value) { this.#longitude_accessor_storage = value; }
+        #latitude_accessor_storage = (__runInitializers(this, _longitude_extraInitializers), __runInitializers(this, _latitude_initializers, 0));
+        /** Latitude coordinate. */
+        get latitude() { return this.#latitude_accessor_storage; }
+        set latitude(value) { this.#latitude_accessor_storage = value; }
+        #draggable_accessor_storage = (__runInitializers(this, _latitude_extraInitializers), __runInitializers(this, _draggable_initializers, false));
+        /** Whether the marker can be dragged. */
+        get draggable() { return this.#draggable_accessor_storage; }
+        set draggable(value) { this.#draggable_accessor_storage = value; }
+        #rotation_accessor_storage = (__runInitializers(this, _draggable_extraInitializers), __runInitializers(this, _rotation_initializers, 0));
+        /** Marker rotation in degrees. */
+        get rotation() { return this.#rotation_accessor_storage; }
+        set rotation(value) { this.#rotation_accessor_storage = value; }
+        #offset_accessor_storage = (__runInitializers(this, _rotation_extraInitializers), __runInitializers(this, _offset_initializers, [0, 0]));
+        /** Offset from the marker center as `[x, y]`. */
+        get offset() { return this.#offset_accessor_storage; }
+        set offset(value) { this.#offset_accessor_storage = value; }
+        #_mapCtx_accessor_storage = (__runInitializers(this, _offset_extraInitializers), __runInitializers(this, __mapCtx_initializers, void 0));
+        get _mapCtx() { return this.#_mapCtx_accessor_storage; }
+        set _mapCtx(value) { this.#_mapCtx_accessor_storage = value; }
+        #marker = (__runInitializers(this, __mapCtx_extraInitializers), null);
+        #addedToMap = false;
+        #_markerCtx_accessor_storage = __runInitializers(this, __markerCtx_initializers, { marker: null, map: null });
+        get _markerCtx() { return this.#_markerCtx_accessor_storage; }
+        set _markerCtx(value) { this.#_markerCtx_accessor_storage = value; }
+        connectedCallback() {
+            super.connectedCallback();
+            this.#createMarker();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.#destroyMarker();
+        }
+        updated(changed) {
+            const map = this._mapCtx?.map;
+            // Add to map once available
+            if (this.#marker && map && !this.#addedToMap) {
+                this.#marker.addTo(map);
+                this.#addedToMap = true;
+            }
+            // Update position
+            if (this.#marker) {
+                const current = this.#marker.getLngLat();
+                if (current.lng !== this.longitude || current.lat !== this.latitude) {
+                    this.#marker.setLngLat([this.longitude, this.latitude]);
+                }
+            }
+            // Update draggable
+            if (this.#marker && this.#marker.isDraggable() !== this.draggable) {
+                this.#marker.setDraggable(this.draggable);
+            }
+            // Update offset
+            if (this.#marker) {
+                const cur = this.#marker.getOffset();
+                if (cur.x !== this.offset[0] || cur.y !== this.offset[1]) {
+                    this.#marker.setOffset(this.offset);
+                }
+            }
+            // Update rotation
+            if (this.#marker && this.#marker.getRotation() !== this.rotation) {
+                this.#marker.setRotation(this.rotation);
+            }
+            // Update context only when values actually change
+            if (this.#marker && (this._markerCtx.marker !== this.#marker || this._markerCtx.map !== map)) {
+                this._markerCtx = { marker: this.#marker, map };
+            }
+        }
+        /** Get the underlying MapLibre Marker instance. */
+        getMarkerInstance() {
+            return this.#marker;
+        }
+        #createMarker() {
+            this.#marker = new MapLibreGL.Marker({
+                element: document.createElement("div"),
+                draggable: this.draggable,
+            }).setLngLat([this.longitude, this.latitude]);
+            // Drag events
+            this.#marker.on("dragstart", () => {
+                const ll = this.#marker.getLngLat();
+                this.dispatchEvent(dragStartEvent({ lng: ll.lng, lat: ll.lat }));
+            });
+            this.#marker.on("drag", () => {
+                const ll = this.#marker.getLngLat();
+                this.dispatchEvent(dragEvent({ lng: ll.lng, lat: ll.lat }));
+            });
+            this.#marker.on("dragend", () => {
+                const ll = this.#marker.getLngLat();
+                this.dispatchEvent(dragEndEvent({ lng: ll.lng, lat: ll.lat }));
+            });
+            this._markerCtx = { marker: this.#marker, map: this._mapCtx?.map ?? null };
+        }
+        #destroyMarker() {
+            if (this.#marker) {
+                this.#marker.remove();
+                this.#marker = null;
+                this.#addedToMap = false;
+            }
+        }
+        render() {
+            return html `<slot></slot>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, __markerCtx_extraInitializers);
+        }
+    };
+})();
+export { DuiMapMarker };
+customElements.define(DuiMapMarker.tagName, DuiMapMarker);

package/marker/marker-context.d.ts

@@ -0,0 +1,8 @@
+import type MapLibreGL from "maplibre-gl";
+export type MarkerContext = {
+    readonly marker: MapLibreGL.Marker;
+    readonly map: MapLibreGL.Map | null;
+};
+export declare const markerContext: {
+    __context__: MarkerContext;
+};

package/marker/marker-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "@lit/context";
+export const markerContext = createContext(Symbol("dui-map-marker"));

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@deepfuture/dui-map",
+  "version": "1.1.0",
+  "description": "DUI map components — MapLibre GL wrapper with markers, routes, regions, and clustering",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/deepfuturenow/dui.git",
+    "directory": "packages/map"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./map": {
+      "import": "./map/index.js",
+      "types": "./map/index.d.ts"
+    },
+    "./marker": {
+      "import": "./marker/index.js",
+      "types": "./marker/index.d.ts"
+    },
+    "./controls": {
+      "import": "./controls/index.js",
+      "types": "./controls/index.d.ts"
+    },
+    "./popup": {
+      "import": "./popup/index.js",
+      "types": "./popup/index.d.ts"
+    },
+    "./route": {
+      "import": "./route/index.js",
+      "types": "./route/index.d.ts"
+    },
+    "./region": {
+      "import": "./region/index.js",
+      "types": "./region/index.d.ts"
+    },
+    "./cluster-layer": {
+      "import": "./cluster-layer/index.js",
+      "types": "./cluster-layer/index.d.ts"
+    },
+    "./heatmap": {
+      "import": "./heatmap/index.js",
+      "types": "./heatmap/index.d.ts"
+    }
+  },
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.css",
+    "README.md"
+  ],
+  "dependencies": {
+    "@deepfuture/dui-primitives": "1.1.0",
+    "lit": "^3.3.2",
+    "@lit/context": "^1.1.3",
+    "maplibre-gl": "^5.15.0"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "unstyled",
+    "components",
+    "dui",
+    "theme"
+  ]
+}

package/popup/index.d.ts

@@ -0,0 +1,2 @@
+import { DuiMapPopup, popupCloseEvent } from "./map-popup.js";
+export { DuiMapPopup, popupCloseEvent };

package/popup/index.js

@@ -0,0 +1,2 @@
+import { DuiMapPopup, popupCloseEvent } from "./map-popup.js";
+export { DuiMapPopup, popupCloseEvent };

package/popup/map-popup.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, type TemplateResult } from "lit";
+import { type MapContext } from "../map/map-context.js";
+/** Fired when the popup is closed. */
+export declare const popupCloseEvent: (detail: void) => CustomEvent<void>;
+/**
+ * `<dui-map-popup>` — Standalone popup at coordinates on the map.
+ *
+ * @slot - Popup content.
+ * @csspart popup - The popup content wrapper.
+ * @fires dui-map-popup-close - Fired when the popup is closed.
+ */
+export declare class DuiMapPopup extends LitElement {
+    #private;
+    static tagName: "dui-map-popup";
+    static styles: import("lit").CSSResult[];
+    /** Longitude coordinate for popup position. */
+    accessor longitude: number;
+    /** Latitude coordinate for popup position. */
+    accessor latitude: number;
+    /** Popup offset from the anchor in pixels. */
+    accessor popupOffset: number;
+    /** Show a close button. */
+    accessor closeButton: boolean;
+    accessor _mapCtx: MapContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    render(): TemplateResult;
+}