@squirkle-ui/map 0.0.0-stage → 0.1.1

package/dist/types/adapters.d.ts

@@ -0,0 +1,44 @@
+import type { BBox } from './cluster';
+export type LatLng = [number, number];
+export interface MarkerHandle {
+    remove: () => void;
+}
+export interface MapAdapter {
+    readonly engine: 'vector' | 'raster';
+    /** The underlying maplibregl.Map or L.Map. */
+    readonly native: unknown;
+    getCenter: () => LatLng;
+    getZoom: () => number;
+    getBounds: () => BBox;
+    setView: (center: LatLng, zoom: number, animate?: boolean) => void;
+    fitPoints: (points: LatLng[], padding: number, maxZoom: number) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    addMarker: (el: HTMLElement, at: LatLng, anchor: 'bottom' | 'center') => MarkerHandle;
+    openPopup: (at: LatLng, content: HTMLElement, offset: number) => void;
+    setStyle: (style: string | object) => void;
+    on: (event: 'moveend' | 'click' | 'error', cb: (payload?: unknown) => void) => void;
+    destroy: () => void;
+}
+/**
+ * Where MapLibre loads its web worker from. Bundlers don't copy `maplibre-gl-worker.mjs` on their own, so apps pass
+ * a bundler-resolved URL, e.g. `import url from 'maplibre-gl/dist/maplibre-gl-worker.mjs?url'` (Vite). Applied lazily.
+ */
+export declare function setMapWorkerUrl(url: string | null): void;
+/** Keyless vector styles (verified 2026-10-24). */
+export declare const MAP_STYLES: Record<string, string>;
+/** `auto` follows the app theme; names map to MAP_STYLES; anything else is passed through (URL or style object). */
+export declare function resolveMapStyle(style: string | object, dark: boolean): string | object;
+export declare function createVectorAdapter(el: HTMLElement, opts: {
+    center: LatLng;
+    zoom: number;
+    style: string | object;
+    scrollZoom: boolean;
+}): Promise<MapAdapter>;
+export declare function createRasterAdapter(el: HTMLElement, opts: {
+    center: LatLng;
+    zoom: number;
+    tileUrl: string;
+    attribution: string;
+    scrollZoom: boolean;
+}): Promise<MapAdapter>;

package/dist/types/cluster.d.ts

@@ -0,0 +1,40 @@
+/** Engine-independent marker clustering (supercluster). Pure functions — unit-tested in test/cluster.test.ts. */
+import Supercluster from 'supercluster';
+export interface ClusterOptions {
+    /** Cluster radius in screen pixels (default 60). */
+    radius?: number;
+    /** Zoom level above which points are never clustered (default 16). */
+    maxZoom?: number;
+    /** Minimum points to form a cluster (default 2). */
+    minPoints?: number;
+}
+export type ClusterIndex = Supercluster<{
+    i: number;
+}>;
+export type ClusterItem = {
+    kind: 'cluster';
+    id: number;
+    lat: number;
+    lng: number;
+    count: number;
+} | {
+    kind: 'point';
+    index: number;
+    lat: number;
+    lng: number;
+};
+/** West, south, east, north in degrees. */
+export type BBox = [number, number, number, number];
+/** `tileSize` is the engine's tile size in px (MapLibre 512, Leaflet 256) so `radius` stays in screen pixels. */
+export declare function createClusterIndex(points: {
+    lat: number;
+    lng: number;
+}[], opts?: ClusterOptions, tileSize?: number): ClusterIndex;
+/** Clusters and single points visible in `bbox` at `zoom`. */
+export declare function clustersFor(index: ClusterIndex, bbox: BBox, zoom: number): ClusterItem[];
+/** Zoom level at which a cluster splits apart. */
+export declare const expansionZoom: (index: ClusterIndex, clusterId: number) => number;
+/** Indices (into the original points array) of every point inside a cluster. */
+export declare const clusterLeaves: (index: ClusterIndex, clusterId: number) => number[];
+/** Grows a bbox by `ratio` on each side so markers just outside the view are ready before they scroll in. */
+export declare function padBBox([w, s, e, n]: BBox, ratio?: number): BBox;

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import SqMap from './SqMap.vue';
+export { SqMap };
+export { MAP_STYLES, resolveMapStyle, setMapWorkerUrl, createVectorAdapter, createRasterAdapter, type MapAdapter, type LatLng } from './adapters';
+export { markerElement, clusterElement, type MapMarker, type MarkerShape } from './markers';
+export { createClusterIndex, clustersFor, clusterLeaves, expansionZoom, type ClusterOptions, type ClusterItem } from './cluster';
+export declare const componentNames: readonly ["SqMap"];
+export default SqMap;

package/dist/types/markers.d.ts

@@ -0,0 +1,26 @@
+export type MarkerShape = 'pin' | 'dot' | 'squircle' | 'avatar';
+export interface MapMarker {
+    id?: string | number;
+    lat: number;
+    lng: number;
+    title?: string;
+    popup?: string;
+    /** Theme color name or CSS color. */
+    color?: string;
+    /** Short text inside the marker (e.g. "3", "$"). */
+    label?: string;
+    /** Built-in or Iconify icon name, e.g. `lucide:coffee`. */
+    icon?: string;
+    /** Image URL for the `avatar` shape. */
+    image?: string;
+    shape?: MarkerShape;
+    /** Marker size in px (default 30). */
+    size?: number;
+    [key: string]: unknown;
+}
+/** Anchor point used by the engines: pins stand on their tip, other shapes are centred. */
+export declare const markerAnchor: (shape: MarkerShape) => "bottom" | "center";
+/** Builds a marker element with DOM APIs (text is never parsed as HTML). */
+export declare function markerElement(m: MapMarker, defaults?: Partial<MapMarker>): HTMLElement;
+/** Squircle bubble sized by the number of points it holds. */
+export declare function clusterElement(count: number, color?: string): HTMLElement;

package/dist/vue2/index.cjs

@@ -0,0 +1,459 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const core = require("@squirkle-ui/core");
+const ui = require("@squirkle-ui/ui/vue2");
+const Supercluster = require("supercluster");
+let workerUrl = null;
+function setMapWorkerUrl(url) {
+  workerUrl = url;
+}
+const MAP_STYLES = {
+  positron: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+  voyager: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
+  "dark-matter": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
+  liberty: "https://tiles.openfreemap.org/styles/liberty",
+  bright: "https://tiles.openfreemap.org/styles/bright",
+  "openfreemap-dark": "https://tiles.openfreemap.org/styles/dark",
+  fiord: "https://tiles.openfreemap.org/styles/fiord"
+};
+function resolveMapStyle(style, dark) {
+  var _a;
+  if (typeof style !== "string") return style;
+  if (style === "auto") return dark ? MAP_STYLES["dark-matter"] : MAP_STYLES.positron;
+  return (_a = MAP_STYLES[style]) != null ? _a : style;
+}
+const defaultOf = (mod) => {
+  var _a;
+  return (_a = mod.default) != null ? _a : mod;
+};
+async function createVectorAdapter(el, opts) {
+  const [mod] = await Promise.all([import("maplibre-gl"), import("maplibre-gl/dist/maplibre-gl.css")]);
+  const ml = defaultOf(mod);
+  if (workerUrl) ml.setWorkerUrl(workerUrl);
+  const map = new ml.Map({
+    container: el,
+    style: opts.style,
+    center: [opts.center[1], opts.center[0]],
+    zoom: opts.zoom,
+    attributionControl: { compact: true },
+    scrollZoom: opts.scrollZoom,
+    cooperativeGestures: false
+  });
+  let popup = null;
+  return {
+    engine: "vector",
+    native: map,
+    getCenter: () => {
+      const c = map.getCenter();
+      return [c.lat, c.lng];
+    },
+    getZoom: () => map.getZoom(),
+    getBounds: () => {
+      const b = map.getBounds();
+      return [b.getWest(), b.getSouth(), b.getEast(), b.getNorth()];
+    },
+    setView: (c, z, animate) => animate ? map.easeTo({ center: [c[1], c[0]], zoom: z, duration: 450 }) : map.jumpTo({ center: [c[1], c[0]], zoom: z }),
+    fitPoints: (pts, padding, maxZoom) => {
+      if (!pts.length) return;
+      const b = new ml.LngLatBounds([pts[0][1], pts[0][0]], [pts[0][1], pts[0][0]]);
+      pts.forEach((p) => b.extend([p[1], p[0]]));
+      map.fitBounds(b, { padding, maxZoom, duration: 0 });
+    },
+    zoomIn: () => map.zoomIn(),
+    zoomOut: () => map.zoomOut(),
+    addMarker: (element, at, anchor) => {
+      const m = new ml.Marker({ element, anchor }).setLngLat([at[1], at[0]]).addTo(map);
+      return { remove: () => m.remove() };
+    },
+    openPopup: (at, content, offset) => {
+      popup == null ? void 0 : popup.remove();
+      popup = new ml.Popup({ offset, closeButton: false, className: "sq-map__popup", maxWidth: "280px" }).setLngLat([at[1], at[0]]).setDOMContent(content).addTo(map);
+    },
+    setStyle: (style) => map.setStyle(style),
+    on: (event, cb) => {
+      if (event === "click") map.on("click", (e) => cb({ lat: e.lngLat.lat, lng: e.lngLat.lng }));
+      else if (event === "error") map.on("error", (e) => {
+        var _a;
+        return cb((_a = e.error) != null ? _a : e);
+      });
+      else map.on("moveend", () => cb());
+    },
+    destroy: () => map.remove()
+  };
+}
+async function createRasterAdapter(el, opts) {
+  const [mod] = await Promise.all([import("leaflet"), import("leaflet/dist/leaflet.css")]);
+  const L = defaultOf(mod);
+  const map = L.map(el, { center: opts.center, zoom: opts.zoom, zoomControl: false, scrollWheelZoom: opts.scrollZoom });
+  const tiles = L.tileLayer(opts.tileUrl, { attribution: opts.attribution, maxZoom: 19 }).addTo(map);
+  return {
+    engine: "raster",
+    native: map,
+    getCenter: () => {
+      const c = map.getCenter();
+      return [c.lat, c.lng];
+    },
+    getZoom: () => map.getZoom(),
+    getBounds: () => {
+      const b = map.getBounds();
+      return [b.getWest(), b.getSouth(), b.getEast(), b.getNorth()];
+    },
+    setView: (c, z, animate) => map.setView(c, z, { animate: !!animate }),
+    fitPoints: (pts, padding, maxZoom) => pts.length && map.fitBounds(L.latLngBounds(pts), { padding: [padding, padding], maxZoom }),
+    zoomIn: () => map.zoomIn(),
+    zoomOut: () => map.zoomOut(),
+    addMarker: (element, at, anchor) => {
+      const wrap = document.createElement("div");
+      wrap.className = `sq-map__anchor sq-map__anchor--${anchor}`;
+      wrap.appendChild(element);
+      const m = L.marker(at, { icon: L.divIcon({ html: wrap, className: "sq-map__marker-wrap", iconSize: [0, 0] }), keyboard: false }).addTo(map);
+      return { remove: () => m.remove() };
+    },
+    openPopup: (at, content, offset) => {
+      L.popup({ className: "sq-map__popup", offset: [0, -offset], closeButton: false }).setLatLng(at).setContent(content).openOn(map);
+    },
+    setStyle: (style) => typeof style === "string" && tiles.setUrl(style),
+    on: (event, cb) => {
+      if (event === "click") map.on("click", (e) => cb({ lat: e.latlng.lat, lng: e.latlng.lng }));
+      else if (event === "error") tiles.on("tileerror", (e) => cb(e));
+      else map.on("moveend", () => cb());
+    },
+    destroy: () => map.remove()
+  };
+}
+const markerAnchor = (shape) => shape === "pin" ? "bottom" : "center";
+function iconNode(icon) {
+  const r = ui.resolveIcon(icon);
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("aria-hidden", "true");
+  if (r.kind === "path") {
+    svg.setAttribute("viewBox", "0 0 24 24");
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", r.d);
+    svg.appendChild(path);
+    return svg;
+  }
+  if (r.kind === "svg") {
+    svg.setAttribute("viewBox", `0 0 ${r.data.width} ${r.data.height}`);
+    svg.innerHTML = r.data.body;
+    return svg;
+  }
+  return null;
+}
+function markerElement(m, defaults = {}) {
+  var _a, _b, _c, _d, _e, _f;
+  const o = { ...defaults, ...m };
+  const shape = (_a = o.shape) != null ? _a : "pin";
+  const el = document.createElement("div");
+  el.className = `sq-map-marker sq-map-marker--${shape}`;
+  el.style.setProperty("--sq-pin", (_c = ui.colorValue((_b = o.color) != null ? _b : "primary")) != null ? _c : "var(--sq-primary)");
+  el.style.setProperty("--sq-pin-size", `${(_d = o.size) != null ? _d : 30}px`);
+  el.setAttribute("role", "button");
+  el.setAttribute("tabindex", "0");
+  el.setAttribute("aria-label", (_f = (_e = o.title) != null ? _e : o.label) != null ? _f : "Marker");
+  const body = document.createElement("span");
+  body.className = "sq-map-marker__body";
+  if (shape === "avatar" && o.image) {
+    const img = document.createElement("img");
+    img.src = o.image;
+    img.alt = "";
+    img.loading = "lazy";
+    body.appendChild(img);
+  } else if (shape !== "dot") {
+    const icon = o.icon ? iconNode(o.icon) : null;
+    const content = document.createElement("span");
+    content.className = "sq-map-marker__content";
+    if (icon) content.appendChild(icon);
+    else if (o.label) content.textContent = String(o.label);
+    else content.classList.add("sq-map-marker__content--empty");
+    body.appendChild(content);
+  }
+  el.appendChild(body);
+  return el;
+}
+function clusterElement(count, color) {
+  var _a;
+  const el = document.createElement("div");
+  el.className = "sq-map-cluster";
+  const size = Math.round(34 + Math.min(30, Math.log2(count) * 5));
+  el.style.setProperty("--sq-cluster-size", `${size}px`);
+  el.style.setProperty("--sq-pin", (_a = ui.colorValue(color != null ? color : "primary")) != null ? _a : "var(--sq-primary)");
+  el.setAttribute("role", "button");
+  el.setAttribute("tabindex", "0");
+  el.setAttribute("aria-label", `${count} places — zoom in`);
+  const span = document.createElement("span");
+  span.textContent = count >= 1e3 ? `${(count / 1e3).toFixed(count >= 1e4 ? 0 : 1)}k` : String(count);
+  el.appendChild(span);
+  return el;
+}
+function createClusterIndex(points, opts = {}, tileSize = 512) {
+  var _a, _b, _c;
+  const index = new Supercluster({ radius: (_a = opts.radius) != null ? _a : 60, maxZoom: (_b = opts.maxZoom) != null ? _b : 16, minPoints: (_c = opts.minPoints) != null ? _c : 2, extent: tileSize });
+  index.load(points.map((p, i) => ({ type: "Feature", geometry: { type: "Point", coordinates: [p.lng, p.lat] }, properties: { i } })));
+  return index;
+}
+function clustersFor(index, bbox, zoom) {
+  return index.getClusters(bbox, Math.floor(zoom)).map((f) => {
+    const [lng, lat] = f.geometry.coordinates;
+    const p = f.properties;
+    return p.cluster ? { kind: "cluster", id: p.cluster_id, lat, lng, count: p.point_count } : { kind: "point", index: p.i, lat, lng };
+  });
+}
+const expansionZoom = (index, clusterId) => index.getClusterExpansionZoom(clusterId);
+const clusterLeaves = (index, clusterId) => index.getLeaves(clusterId, Infinity).map((f) => f.properties.i);
+function padBBox([w, s, e, n], ratio = 0.25) {
+  const dx = (e - w) * ratio;
+  const dy = (n - s) * ratio;
+  return [Math.max(-180, w - dx), Math.max(-85, s - dy), Math.min(180, e + dx), Math.min(85, n + dy)];
+}
+const _sfc_main = vue.defineComponent({
+  name: "SqMap",
+  components: { SqBtn: ui.SqBtn, SqProgressCircular: ui.SqProgressCircular, SqShape: ui.SqShape },
+  props: {
+    engine: { type: String, default: "vector" },
+    /** Vector style: `auto` (follows light/dark), a preset name (positron, voyager, dark-matter, liberty, bright, openfreemap-dark, fiord), a style URL or a style object. */
+    mapStyle: { type: [String, Object], default: "auto" },
+    center: { type: Array, default: () => [11.5564, 104.9282] },
+    zoom: { type: Number, default: 12 },
+    markers: { type: Array, default: () => [] },
+    /** Defaults merged into every marker (shape, color, size, icon…). */
+    markerDefaults: { type: Object, default: () => ({}) },
+    cluster: { type: [Boolean, Object], default: false },
+    clusterColor: { type: String, default: "primary" },
+    /** Raster engine tile template. */
+    tileUrl: { type: String, default: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" },
+    attribution: { type: String, default: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">OpenStreetMap</a> contributors' },
+    height: { type: [Number, String], default: 400 },
+    rounded: { type: [String, Number], default: "xl" },
+    fitMarkers: Boolean,
+    scrollWheelZoom: { type: Boolean, default: false },
+    label: { type: String, default: "Map" }
+  },
+  emits: ["update:center", "update:zoom", "click", "marker-click", "cluster-click", "ready", "error"],
+  setup(props, { emit, slots }) {
+    const el = vue.ref(null);
+    const adapter = vue.shallowRef(null);
+    const ready = vue.ref(false);
+    const inst = vue.getCurrentInstance();
+    const handles = /* @__PURE__ */ new Map();
+    let index = null;
+    let epoch = 0;
+    const keyOf = (m, i) => {
+      var _a;
+      return String((_a = m.id) != null ? _a : i);
+    };
+    const isDark = vue.computed(() => {
+      var _a;
+      return !!((_a = ui.config.theme.themes[ui.config.theme.name]) == null ? void 0 : _a.dark);
+    });
+    const root = () => {
+      var _a;
+      return (_a = inst == null ? void 0 : inst.proxy) == null ? void 0 : _a.$el;
+    };
+    const clearMarkers = () => {
+      handles.forEach((h) => h.remove());
+      handles.clear();
+    };
+    const pointElement = (m, i) => {
+      var _a;
+      const tpl = slots.marker ? (_a = root().querySelector(`[data-marker="${CSS.escape(keyOf(m, i))}"]`)) == null ? void 0 : _a.firstElementChild : null;
+      const node = tpl ? tpl.cloneNode(true) : markerElement(m, props.markerDefaults);
+      if (tpl) node.classList.add("sq-map-marker", "sq-map-marker--custom");
+      const open = (e) => {
+        var _a2, _b, _c, _d;
+        e.stopPropagation();
+        emit("marker-click", m);
+        const popup = root().querySelector(`[data-popup="${CSS.escape(keyOf(m, i))}"]`);
+        if (popup && ((_a2 = popup.textContent) == null ? void 0 : _a2.trim())) (_d = adapter.value) == null ? void 0 : _d.openPopup([m.lat, m.lng], popup.cloneNode(true), ((_c = (_b = m.size) != null ? _b : props.markerDefaults.size) != null ? _c : 30) + 4);
+      };
+      node.addEventListener("click", open);
+      node.addEventListener("keydown", (e) => (e.key === "Enter" || e.key === " ") && open(e));
+      return node;
+    };
+    const shapeOf = (m) => {
+      var _a, _b;
+      return slots.marker ? "center" : markerAnchor((_b = (_a = m.shape) != null ? _a : props.markerDefaults.shape) != null ? _b : "pin");
+    };
+    const render2 = () => {
+      const a = adapter.value;
+      if (!a) return;
+      const want = /* @__PURE__ */ new Map();
+      if (index) {
+        for (const item of clustersFor(index, padBBox(a.getBounds()), a.getZoom())) {
+          if (item.kind === "cluster") {
+            const key = `c${item.id}`;
+            want.set(key, () => {
+              const node = clusterElement(item.count, props.clusterColor);
+              const zoomIn = (e) => {
+                e.stopPropagation();
+                const idx = index;
+                emit("cluster-click", { count: item.count, markers: clusterLeaves(idx, item.id).map((i) => props.markers[i]) });
+                a.setView([item.lat, item.lng], Math.min(expansionZoom(idx, item.id), 20), true);
+              };
+              node.addEventListener("click", zoomIn);
+              node.addEventListener("keydown", (e) => (e.key === "Enter" || e.key === " ") && zoomIn(e));
+              return a.addMarker(node, [item.lat, item.lng], "center");
+            });
+          } else {
+            const m = props.markers[item.index];
+            want.set(`p${item.index}`, () => a.addMarker(pointElement(m, item.index), [m.lat, m.lng], shapeOf(m)));
+          }
+        }
+      } else {
+        props.markers.forEach((m, i) => want.set(`p${i}`, () => a.addMarker(pointElement(m, i), [m.lat, m.lng], shapeOf(m))));
+      }
+      for (const [k, h] of handles) if (!want.has(k)) {
+        h.remove();
+        handles.delete(k);
+      }
+      for (const [k, make] of want) if (!handles.has(k)) handles.set(k, make());
+    };
+    const rebuild = () => {
+      clearMarkers();
+      index = props.cluster ? createClusterIndex(props.markers, typeof props.cluster === "object" ? props.cluster : {}, props.engine === "raster" ? 256 : 512) : null;
+      render2();
+    };
+    const fit = () => {
+      var _a;
+      return (_a = adapter.value) == null ? void 0 : _a.fitPoints(props.markers.map((m) => [m.lat, m.lng]), 48, 15);
+    };
+    const mount = async () => {
+      const my = ++epoch;
+      if (!el.value) return;
+      ready.value = false;
+      const a = props.engine === "raster" ? await createRasterAdapter(el.value, { center: props.center, zoom: props.zoom, tileUrl: props.tileUrl, attribution: props.attribution, scrollZoom: props.scrollWheelZoom }) : await createVectorAdapter(el.value, { center: props.center, zoom: props.zoom, style: resolveMapStyle(props.mapStyle, isDark.value), scrollZoom: props.scrollWheelZoom });
+      if (my !== epoch) return a.destroy();
+      adapter.value = vue.markRaw(a);
+      a.on("moveend", () => {
+        const c = a.getCenter();
+        emit("update:center", c);
+        emit("update:zoom", Math.round(a.getZoom() * 100) / 100);
+        if (index) render2();
+      });
+      a.on("click", (p) => emit("click", p));
+      a.on("error", (e) => emit("error", e));
+      if (props.fitMarkers) fit();
+      rebuild();
+      ready.value = true;
+      emit("ready", a.native);
+    };
+    const unmountMap = () => {
+      var _a;
+      clearMarkers();
+      (_a = adapter.value) == null ? void 0 : _a.destroy();
+      adapter.value = null;
+    };
+    vue.onMounted(() => {
+      if (el.value) return mount();
+      const stop = vue.watch(el, (node) => {
+        if (node) {
+          stop();
+          return mount();
+        }
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      epoch++;
+      unmountMap();
+    });
+    vue.watch(() => props.engine, () => {
+      unmountMap();
+      mount();
+    });
+    vue.watch(() => props.markers, () => {
+      if (!adapter.value) return;
+      if (props.fitMarkers) fit();
+      requestAnimationFrame(rebuild);
+    }, { deep: true, flush: "post" });
+    vue.watch(() => [props.cluster, props.markerDefaults, props.clusterColor], () => adapter.value && rebuild(), { deep: true });
+    vue.watch(ui.iconStoreVersion, () => adapter.value && props.markers.some((m) => m.icon || props.markerDefaults.icon) && rebuild());
+    vue.watch([() => props.mapStyle, isDark], () => {
+      const a = adapter.value;
+      if (a && a.engine === "vector") a.setStyle(resolveMapStyle(props.mapStyle, isDark.value));
+    });
+    vue.watch(() => props.tileUrl, (url) => {
+      var _a;
+      return ((_a = adapter.value) == null ? void 0 : _a.engine) === "raster" && adapter.value.setStyle(url);
+    });
+    vue.watch(() => [props.center[0], props.center[1], props.zoom], () => {
+      const a = adapter.value;
+      if (!a) return;
+      const c = a.getCenter();
+      if (Math.abs(c[0] - props.center[0]) > 1e-6 || Math.abs(c[1] - props.center[1]) > 1e-6 || Math.abs(a.getZoom() - props.zoom) > 0.01) a.setView(props.center, props.zoom);
+    });
+    return { el, adapter, ready, keyOf, fit, toUnit: core.toUnit, radiusValue: ui.radiusValue, has: (n) => !!slots[n] };
+  }
+});
+function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render2) {
+    options.render = render2;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("div", { staticClass: "sq-map sq-surface", style: { height: _vm.toUnit(_vm.height), "--sq-r": _vm.radiusValue(_vm.rounded), "--sq-bg": "var(--sq-surface-variant)", "--sq-bd": "var(--sq-border)", "--sq-bw": "1px" } }, [_c("SqShape", { attrs: { "clip": "" } }), _c("div", { ref: "el", staticClass: "sq-map__canvas", attrs: { "role": "application", "aria-label": _vm.label } }), !_vm.ready ? _c("div", { staticClass: "sq-map__loading" }, [_c("SqProgressCircular", { attrs: { "indeterminate": "", "size": 24, "width": 3 } })], 1) : _vm._e(), _c("div", { staticClass: "sq-map__controls" }, [_c("SqBtn", { attrs: { "icon": "plus", "color": "surface", "variant": "elevated", "size": "small", "aria-label": "Zoom in" }, on: { "click": function($event) {
+    _vm.adapter && _vm.adapter.zoomIn();
+  } } }), _c("SqBtn", { attrs: { "icon": "minus", "color": "surface", "variant": "elevated", "size": "small", "aria-label": "Zoom out" }, on: { "click": function($event) {
+    _vm.adapter && _vm.adapter.zoomOut();
+  } } }), _vm.markers.length > 1 ? _c("SqBtn", { attrs: { "icon": "place", "color": "surface", "variant": "elevated", "size": "small", "aria-label": "Fit markers" }, on: { "click": _vm.fit } }) : _vm._e()], 1), _c("div", { staticClass: "sq-map__templates", attrs: { "aria-hidden": "true" } }, [_vm._l(_vm.markers, function(m, i) {
+    return _c("div", { key: "p" + _vm.keyOf(m, i), attrs: { "data-popup": _vm.keyOf(m, i) } }, [_vm._t("popup", function() {
+      return [m.title ? _c("b", [_vm._v(_vm._s(m.title))]) : _vm._e(), m.popup ? _c("div", [_vm._v(_vm._s(m.popup))]) : _vm._e()];
+    }, { "marker": m })], 2);
+  }), _vm.has("marker") ? _vm._l(_vm.markers, function(m, i) {
+    return _c("div", { key: "m" + _vm.keyOf(m, i), attrs: { "data-marker": _vm.keyOf(m, i) } }, [_vm._t("marker", null, { "marker": m })], 2);
+  }) : _vm._e()], 2), _vm._t("default", null, { "map": _vm.adapter ? _vm.adapter.native : null })], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns
+);
+const SqMap = __component__.exports;
+const componentNames = ["SqMap"];
+exports.MAP_STYLES = MAP_STYLES;
+exports.SqMap = SqMap;
+exports.clusterElement = clusterElement;
+exports.clusterLeaves = clusterLeaves;
+exports.clustersFor = clustersFor;
+exports.componentNames = componentNames;
+exports.createClusterIndex = createClusterIndex;
+exports.createRasterAdapter = createRasterAdapter;
+exports.createVectorAdapter = createVectorAdapter;
+exports.default = SqMap;
+exports.expansionZoom = expansionZoom;
+exports.markerElement = markerElement;
+exports.resolveMapStyle = resolveMapStyle;
+exports.setMapWorkerUrl = setMapWorkerUrl;
+//# sourceMappingURL=index.cjs.map