@sindicum/libre-draw 0.1.1 → 0.2.0

package/dist/libre-draw.js

@@ -1,6 +1,44 @@
-class ue {
+function J(s) {
+  if (Array.isArray(s))
+    return s.map((e) => J(e));
+  if (s !== null && typeof s == "object") {
+    const e = {};
+    for (const [t, r] of Object.entries(
+      s
+    ))
+      e[t] = J(r);
+    return e;
+  }
+  return s;
+}
+function fe(s) {
+  return s.map(
+    (e) => e.map((t) => [t[0], t[1]])
+  );
+}
+function pe(s) {
+  return J(s);
+}
+function v(s) {
+  return {
+    id: s.id,
+    type: "Feature",
+    geometry: {
+      type: "Polygon",
+      coordinates: fe(s.geometry.coordinates)
+    },
+    properties: pe(s.properties)
+  };
+}
+function ye(s) {
+  return {
+    type: "FeatureCollection",
+    features: s.features.map((e) => v(e))
+  };
+}
+class me {
   constructor(e) {
-    this.feature = e, this.type = "create";
+    this.type = "create", this.feature = v(e);
   }
   apply(e) {
     e.add(this.feature);
@@ -9,9 +47,9 @@ class ue {
     e.remove(this.feature.id);
   }
 }
-class $ {
-  constructor(e, t, s) {
-    this.id = e, this.oldFeature = t, this.newFeature = s, this.type = "update";
+class ae {
+  constructor(e, t, r) {
+    this.type = "update", this.id = e, this.oldFeature = v(t), this.newFeature = v(r);
   }
   apply(e) {
     e.update(this.id, this.newFeature);
@@ -20,9 +58,9 @@ class $ {
     e.update(this.id, this.oldFeature);
   }
 }
-class oe {
+class le {
   constructor(e) {
-    this.feature = e, this.type = "delete";
+    this.type = "delete", this.feature = v(e);
   }
   apply(e) {
     e.remove(this.feature.id);
@@ -31,7 +69,7 @@ class oe {
     e.add(this.feature);
   }
 }
-class ge {
+class ve {
   constructor() {
     this.listeners = /* @__PURE__ */ new Map();
   }
@@ -41,8 +79,8 @@ class ge {
    * @param listener - The callback to invoke when the event fires.
    */
   on(e, t) {
-    let s = this.listeners.get(e);
-    s || (s = /* @__PURE__ */ new Set(), this.listeners.set(e, s)), s.add(t);
+    let r = this.listeners.get(e);
+    r || (r = /* @__PURE__ */ new Set(), this.listeners.set(e, r)), r.add(t);
   }
   /**
    * Remove a listener for a specific event type.
@@ -50,8 +88,8 @@ class ge {
    * @param listener - The callback to remove.
    */
   off(e, t) {
-    const s = this.listeners.get(e);
-    s && s.delete(t);
+    const r = this.listeners.get(e);
+    r && r.delete(t);
   }
   /**
    * Emit an event, invoking all registered listeners.
@@ -59,10 +97,10 @@ class ge {
    * @param payload - The event payload.
    */
   emit(e, t) {
-    const s = this.listeners.get(e);
-    if (s)
-      for (const i of s)
-        i(t);
+    const r = this.listeners.get(e);
+    if (r)
+      for (const n of r)
+        n(t);
   }
   /**
    * Remove all listeners for all event types.
@@ -71,7 +109,7 @@ class ge {
     this.listeners.clear();
   }
 }
-class R {
+class we {
   constructor() {
     this.features = /* @__PURE__ */ new Map();
   }
@@ -82,8 +120,8 @@ class R {
    * @returns The added feature (with ID assigned).
    */
   add(e) {
-    const t = e.id || crypto.randomUUID(), s = { ...e, id: t };
-    return this.features.set(t, s), s;
+    const t = e.id || crypto.randomUUID(), r = v({ ...e, id: t });
+    return this.features.set(t, r), v(r);
   }
   /**
    * Update a feature in the store by ID.
@@ -91,7 +129,7 @@ class R {
    * @param feature - The new feature data.
    */
   update(e, t) {
-    this.features.has(e) && this.features.set(e, { ...t, id: e });
+    this.features.has(e) && this.features.set(e, v({ ...t, id: e }));
   }
   /**
    * Remove a feature from the store by ID.
@@ -100,14 +138,18 @@ class R {
    */
   remove(e) {
     const t = this.features.get(e);
-    return t && this.features.delete(e), t;
+    if (t)
+      return this.features.delete(e), v(t);
   }
   /**
    * Get all features in the store.
    * @returns An array of all features.
    */
   getAll() {
-    return Array.from(this.features.values());
+    return Array.from(
+      this.features.values(),
+      (e) => v(e)
+    );
   }
   /**
    * Get a feature by its ID.
@@ -115,7 +157,8 @@ class R {
    * @returns The feature, or undefined if not found.
    */
   getById(e) {
-    return this.features.get(e);
+    const t = this.features.get(e);
+    return t ? v(t) : void 0;
   }
   /**
    * Remove all features from the store.
@@ -130,8 +173,8 @@ class R {
   setAll(e) {
     this.features.clear();
     for (const t of e) {
-      const s = t.id || crypto.randomUUID();
-      this.features.set(s, { ...t, id: s });
+      const r = t.id || crypto.randomUUID();
+      this.features.set(r, v({ ...t, id: r }));
     }
   }
   /**
@@ -139,10 +182,9 @@ class R {
    * @returns A GeoJSON FeatureCollection.
    */
   toGeoJSON() {
-    return {
-      type: "FeatureCollection",
-      features: this.getAll()
-    };
+    return ye({
+      features: Array.from(this.features.values())
+    });
   }
   /**
    * Create a deep clone of a feature suitable for history snapshots.
@@ -150,20 +192,10 @@ class R {
    * @returns A deep-cloned feature.
    */
   static cloneFeature(e) {
-    return {
-      id: e.id,
-      type: "Feature",
-      geometry: {
-        type: "Polygon",
-        coordinates: e.geometry.coordinates.map(
-          (t) => t.map((s) => [...s])
-        )
-      },
-      properties: { ...e.properties }
-    };
+    return v(e);
   }
 }
-class fe {
+class Se {
   /**
    * Create a new HistoryManager.
    * @param limit - Maximum number of actions to retain. Defaults to 100.
@@ -216,7 +248,7 @@ class fe {
     this.undoStack = [], this.redoStack = [];
   }
 }
-class pe {
+class be {
   constructor() {
     this.modes = /* @__PURE__ */ new Map(), this.currentModeName = "idle";
   }
@@ -243,10 +275,10 @@ class pe {
   setMode(e) {
     if (e === this.currentModeName)
       return;
-    const t = this.currentModeName, s = this.modes.get(this.currentModeName);
-    s && s.deactivate(), this.currentModeName = e;
-    const i = this.modes.get(e);
-    i && i.activate(), this.onModeChange && this.onModeChange(e, t);
+    const t = this.currentModeName, r = this.modes.get(this.currentModeName);
+    r && r.deactivate(), this.currentModeName = e;
+    const n = this.modes.get(e);
+    n && n.activate(), this.onModeChange && this.onModeChange(e, t);
   }
   /**
    * Get the current mode name.
@@ -268,52 +300,52 @@ class E extends Error {
     super(e), this.name = "LibreDrawError";
   }
 }
-function z(r, e, t) {
-  const s = (e[1] - r[1]) * (t[0] - e[0]) - (e[0] - r[0]) * (t[1] - e[1]);
-  return Math.abs(s) < 1e-10 ? 0 : s > 0 ? 1 : 2;
+function j(s, e, t) {
+  const r = (e[1] - s[1]) * (t[0] - e[0]) - (e[0] - s[0]) * (t[1] - e[1]);
+  return Math.abs(r) < 1e-10 ? 0 : r > 0 ? 1 : 2;
 }
-function j(r, e, t) {
-  return e[0] <= Math.max(r[0], t[0]) && e[0] >= Math.min(r[0], t[0]) && e[1] <= Math.max(r[1], t[1]) && e[1] >= Math.min(r[1], t[1]);
+function W(s, e, t) {
+  return e[0] <= Math.max(s[0], t[0]) && e[0] >= Math.min(s[0], t[0]) && e[1] <= Math.max(s[1], t[1]) && e[1] >= Math.min(s[1], t[1]);
 }
-function X(r, e) {
-  return Math.abs(r[0] - e[0]) < 1e-10 && Math.abs(r[1] - e[1]) < 1e-10;
+function G(s, e) {
+  return Math.abs(s[0] - e[0]) < 1e-10 && Math.abs(s[1] - e[1]) < 1e-10;
 }
-function J(r, e, t, s) {
-  if (X(r, t) || X(r, s) || X(e, t) || X(e, s))
+function X(s, e, t, r) {
+  if (G(s, t) || G(s, r) || G(e, t) || G(e, r))
     return !1;
-  const i = z(r, e, t), n = z(r, e, s), o = z(t, s, r), l = z(t, s, e);
-  return !!(i !== n && o !== l || i === 0 && j(r, t, e) || n === 0 && j(r, s, e) || o === 0 && j(t, r, s) || l === 0 && j(t, e, s));
+  const n = j(s, e, t), i = j(s, e, r), o = j(t, r, s), a = j(t, r, e);
+  return !!(n !== i && o !== a || n === 0 && W(s, t, e) || i === 0 && W(s, r, e) || o === 0 && W(t, s, r) || a === 0 && W(t, e, r));
 }
-function ae(r) {
-  const e = r.length - 1;
+function he(s) {
+  const e = s.length - 1;
   if (e < 3) return !1;
   for (let t = 0; t < e; t++)
-    for (let s = t + 2; s < e; s++)
-      if (!(t === 0 && s === e - 1) && J(r[t], r[t + 1], r[s], r[s + 1]))
+    for (let r = t + 2; r < e; r++)
+      if (!(t === 0 && r === e - 1) && X(s[t], s[t + 1], s[r], s[r + 1]))
         return !0;
   return !1;
 }
-function ye(r, e) {
-  if (r.length < 2) return !1;
-  const t = r[r.length - 1];
-  for (let s = 0; s < r.length - 2; s++)
-    if (J(t, e, r[s], r[s + 1]))
+function Ee(s, e) {
+  if (s.length < 2) return !1;
+  const t = s[s.length - 1];
+  for (let r = 0; r < s.length - 2; r++)
+    if (X(t, e, s[r], s[r + 1]))
       return !0;
   return !1;
 }
-function q(r) {
-  if (r.length < 3) return !1;
-  const e = r[0], t = r[r.length - 1];
-  for (let s = 1; s < r.length - 2; s++)
-    if (J(t, e, r[s], r[s + 1]))
+function Z(s) {
+  if (s.length < 3) return !1;
+  const e = s[0], t = s[s.length - 1];
+  for (let r = 1; r < s.length - 2; r++)
+    if (X(t, e, s[r], s[r + 1]))
       return !0;
   return !1;
 }
-function me(r, e) {
-  return r[0] === e[0] && r[1] === e[1];
+function Ie(s, e) {
+  return s[0] === e[0] && s[1] === e[1];
 }
-function be(r) {
-  const [e, t] = r;
+function Me(s) {
+  const [e, t] = s;
   if (typeof e != "number" || typeof t != "number")
     throw new E(
       `Invalid coordinate: expected [number, number], got [${typeof e}, ${typeof t}]`
@@ -327,34 +359,34 @@ function be(r) {
       `Invalid latitude: ${t}. Must be between -90 and 90.`
     );
 }
-function ve(r) {
-  if (!Array.isArray(r))
+function xe(s) {
+  if (!Array.isArray(s))
     throw new E("Ring must be an array of positions.");
-  if (r.length < 4)
+  if (s.length < 4)
     throw new E(
-      `Ring must have at least 4 positions (got ${r.length}). A valid polygon ring requires 3 unique vertices plus a closing vertex.`
+      `Ring must have at least 4 positions (got ${s.length}). A valid polygon ring requires 3 unique vertices plus a closing vertex.`
     );
-  const e = r[0], t = r[r.length - 1];
-  if (!me(e, t))
+  const e = s[0], t = s[s.length - 1];
+  if (!Ie(e, t))
     throw new E(
       "Ring is not closed. The first and last positions must be identical."
     );
-  for (const s of r) {
-    if (!Array.isArray(s) || s.length < 2)
+  for (const r of s) {
+    if (!Array.isArray(r) || r.length < 2)
       throw new E(
         "Each position in a ring must be an array of at least 2 numbers."
       );
-    be(s);
+    Me(r);
   }
-  if (ae(r))
+  if (he(s))
     throw new E(
       "Ring has self-intersections. Polygon edges must not cross each other."
     );
 }
-function le(r) {
-  if (r == null || typeof r != "object")
+function ce(s) {
+  if (s == null || typeof s != "object")
     throw new E("Feature must be a non-null object.");
-  const e = r;
+  const e = s;
   if (e.type !== "Feature")
     throw new E(
       `Feature.type must be "Feature", got "${String(e.type)}".`
@@ -370,40 +402,57 @@ function le(r) {
     throw new E(
       "Feature.geometry.coordinates must be an array."
     );
-  const s = t.coordinates;
-  if (s.length === 0)
+  const r = t.coordinates;
+  if (r.length === 0)
     throw new E(
       "Polygon must have at least one ring (outer ring)."
     );
-  for (const i of s)
-    ve(i);
-  return r;
+  for (const a of r)
+    xe(a);
+  const n = typeof e.id == "string" ? e.id : "", i = e.properties, o = i != null && typeof i == "object" && !Array.isArray(i) ? J(i) : {};
+  return {
+    id: n,
+    type: "Feature",
+    geometry: {
+      type: "Polygon",
+      coordinates: r.map(
+        (a) => a.map((h) => [h[0], h[1]])
+      )
+    },
+    properties: o
+  };
 }
-function Ee(r) {
-  if (r == null || typeof r != "object")
+function Pe(s) {
+  if (s == null || typeof s != "object")
     throw new E("GeoJSON must be a non-null object.");
-  const e = r;
+  const e = s;
   if (e.type !== "FeatureCollection")
     throw new E(
       `GeoJSON.type must be "FeatureCollection", got "${String(e.type)}".`
     );
   if (!Array.isArray(e.features))
     throw new E("GeoJSON.features must be an array.");
-  const t = r, s = [];
-  for (let i = 0; i < t.features.length; i++)
+  const t = s, r = [];
+  for (let n = 0; n < t.features.length; n++)
     try {
-      s.push(le(t.features[i]));
-    } catch (n) {
-      throw n instanceof E ? new E(
-        `Invalid feature at index ${i}: ${n.message}`
-      ) : n;
+      r.push(ce(t.features[n]));
+    } catch (i) {
+      throw i instanceof E ? new E(
+        `Invalid feature at index ${n}: ${i.message}`
+      ) : i;
     }
   return {
     type: "FeatureCollection",
-    features: s
+    features: r
   };
 }
-class Ie {
+class Ce {
+  mapInteractions() {
+    return {
+      dragPan: !0,
+      doubleClickZoom: !0
+    };
+  }
   activate() {
   }
   deactivate() {
@@ -421,32 +470,38 @@ class Ie {
   onKeyDown(e, t) {
   }
 }
-const we = 10, W = 3;
-class Se {
+const De = 10, $ = 3;
+class Fe {
   constructor(e) {
-    this.vertices = [], this.isActive = !1, this.callbacks = e;
+    this.vertices = [], this.isActive = !1, this.context = e;
+  }
+  mapInteractions() {
+    return {
+      dragPan: !1,
+      doubleClickZoom: !1
+    };
   }
   activate() {
     this.isActive = !0, this.vertices = [];
   }
   deactivate() {
-    this.isActive = !1, this.vertices = [], this.callbacks.clearPreview();
+    this.isActive = !1, this.vertices = [], this.context.render.clearPreview();
   }
   onPointerDown(e) {
     if (!this.isActive) return;
     const t = [e.lngLat.lng, e.lngLat.lat];
-    if (this.vertices.length >= W) {
-      const s = this.vertices[0], i = this.callbacks.getScreenPoint({
-        lng: s[0],
-        lat: s[1]
-      }), n = e.point.x - i.x, o = e.point.y - i.y;
-      if (Math.sqrt(n * n + o * o) <= we) {
-        if (q(this.vertices)) return;
+    if (this.vertices.length >= $) {
+      const r = this.vertices[0], n = this.context.getScreenPoint({
+        lng: r[0],
+        lat: r[1]
+      }), i = e.point.x - n.x, o = e.point.y - n.y;
+      if (Math.sqrt(i * i + o * o) <= De) {
+        if (Z(this.vertices)) return;
         this.finalizePolygon();
         return;
       }
     }
-    ye(this.vertices, t) || (this.vertices.push(t), this.updatePreview(e));
+    Ee(this.vertices, t) || (this.vertices.push(t), this.updatePreview(e));
   }
   onPointerMove(e) {
     !this.isActive || this.vertices.length === 0 || this.updatePreview(e);
@@ -454,10 +509,10 @@ class Se {
   onPointerUp(e) {
   }
   onDoubleClick(e) {
-    this.isActive && (this.vertices.length > W && this.vertices.pop(), this.vertices.length >= W && (q(this.vertices) || this.finalizePolygon()), e.originalEvent.preventDefault(), e.originalEvent.stopPropagation());
+    this.isActive && (this.vertices.length > $ && this.vertices.pop(), this.vertices.length >= $ && (Z(this.vertices) || this.finalizePolygon()), e.originalEvent.preventDefault(), e.originalEvent.stopPropagation());
   }
   onLongPress(e) {
-    this.isActive && this.vertices.length > 0 && (this.vertices.pop(), this.vertices.length === 0 ? this.callbacks.clearPreview() : this.callbacks.renderPreview(this.buildPreviewCoordinates()));
+    this.isActive && this.vertices.length > 0 && (this.vertices.pop(), this.vertices.length === 0 ? this.context.render.clearPreview() : this.context.render.renderPreview(this.buildPreviewCoordinates()));
   }
   onKeyDown(e, t) {
     this.isActive && e === "Escape" && this.cancelDrawing();
@@ -474,14 +529,14 @@ class Se {
    * Update the preview rendering with the current cursor position.
    */
   updatePreview(e) {
-    const t = [e.lngLat.lng, e.lngLat.lat], s = this.buildPreviewCoordinates(t);
-    this.callbacks.renderPreview(s);
+    const t = [e.lngLat.lng, e.lngLat.lat], r = this.buildPreviewCoordinates(t);
+    this.context.render.renderPreview(r);
   }
   /**
    * Finalize the polygon: create the feature, push to history, emit event.
    */
   finalizePolygon() {
-    if (this.vertices.length < W) return;
+    if (this.vertices.length < $) return;
     const e = [
       ...this.vertices,
       [...this.vertices[0]]
@@ -493,500 +548,526 @@ class Se {
         coordinates: [e]
       },
       properties: {}
-    }, s = this.callbacks.addFeatureToStore(t), i = new ue(s);
-    this.callbacks.pushToHistory(i), this.callbacks.emitEvent("create", { feature: s }), this.callbacks.renderFeatures(), this.vertices = [], this.callbacks.clearPreview();
+    }, r = this.context.store.add(t), n = new me(r);
+    this.context.history.push(n), this.context.events.emit("create", { feature: v(r) }), this.context.render.renderFeatures(), this.vertices = [], this.context.render.clearPreview();
   }
   /**
    * Cancel the current drawing operation.
    */
   cancelDrawing() {
-    this.vertices = [], this.callbacks.clearPreview();
+    this.vertices = [], this.context.render.clearPreview();
+  }
+}
+class Te {
+  constructor(e, t) {
+    this.selectedIds = /* @__PURE__ */ new Set(), this.context = e, this.onSelectionChange = t;
+  }
+  getSelectedIds() {
+    return Array.from(this.selectedIds);
+  }
+  getFirstSelectedId() {
+    return this.selectedIds.values().next().value;
+  }
+  hasSelection() {
+    return this.selectedIds.size > 0;
+  }
+  has(e) {
+    return this.selectedIds.has(e);
   }
+  selectOnly(e) {
+    this.selectedIds.clear(), this.selectedIds.add(e);
+  }
+  remove(e) {
+    this.selectedIds.delete(e);
+  }
+  clear() {
+    this.selectedIds.clear();
+  }
+  clearAndNotify() {
+    return this.hasSelection() ? (this.clear(), this.notify(), !0) : !1;
+  }
+  notify() {
+    const e = this.getSelectedIds();
+    this.context.render.setSelectedIds(e), this.context.events.emit("selectionchange", { selectedIds: e }), this.onSelectionChange && this.onSelectionChange(e);
+  }
+}
+function z(s) {
+  const e = s.geometry.coordinates[0];
+  return e.slice(0, e.length - 1);
 }
-const N = 11102230246251565e-32, F = 134217729, Te = (3 + 8 * N) * N;
-function Y(r, e, t, s, i) {
-  let n, o, l, h, d = e[0], u = s[0], a = 0, c = 0;
-  u > d == u > -d ? (n = d, d = e[++a]) : (n = u, u = s[++c]);
+function Q(s) {
+  const e = [];
+  for (let t = 0; t < s.length; t++) {
+    const r = (t + 1) % s.length;
+    e.push([
+      (s[t][0] + s[r][0]) / 2,
+      (s[t][1] + s[r][1]) / 2
+    ]);
+  }
+  return e;
+}
+function Le(s, e, t) {
+  const r = [...s.geometry.coordinates[0]];
+  return r[e] = t, e === 0 && (r[r.length - 1] = t), e === r.length - 1 && (r[0] = t), {
+    ...s,
+    geometry: {
+      type: "Polygon",
+      coordinates: [r]
+    }
+  };
+}
+function Ae(s, e, t) {
+  const r = s.geometry.coordinates[0].map(
+    (n) => [n[0] + e, n[1] + t]
+  );
+  return {
+    ...s,
+    geometry: {
+      type: "Polygon",
+      coordinates: [r]
+    }
+  };
+}
+function ke(s, e, t) {
+  const r = [...s.geometry.coordinates[0]];
+  return r.splice(e, 0, t), {
+    ...s,
+    geometry: {
+      type: "Polygon",
+      coordinates: [r]
+    }
+  };
+}
+function Ve(s, e) {
+  const r = z(s).filter((i, o) => o !== e), n = [...r, [...r[0]]];
+  return {
+    ...s,
+    geometry: {
+      type: "Polygon",
+      coordinates: [n]
+    }
+  };
+}
+const ee = 10, Re = 24, _e = 3;
+class Ne {
+  constructor(e) {
+    this.dragging = !1, this.dragVertexIndex = -1, this.dragStartFeature = null, this.highlightedVertexIndex = -1, this.context = e;
+  }
+  isDragging() {
+    return this.dragging;
+  }
+  getDragStartFeature() {
+    return this.dragStartFeature;
+  }
+  resetInteractionState() {
+    this.endDrag(), this.highlightedVertexIndex = -1;
+  }
+  clearHighlight() {
+    this.highlightedVertexIndex = -1;
+  }
+  tryStartVertexDragOrInsert(e, t, r) {
+    const n = z(e), i = this.getThreshold(r), o = this.findNearestVertex(n, r.point, i);
+    if (o >= 0)
+      return this.startDrag(e, o), !0;
+    const a = Q(n), h = this.findNearestPoint(a, r.point, i);
+    if (h >= 0) {
+      const d = v(e), u = ke(e, h + 1, a[h]);
+      return this.context.store.update(t, u), this.renderHandles(u), this.startDrag(u, h + 1, d), !0;
+    }
+    return !1;
+  }
+  handleDragMove(e, t) {
+    if (!this.dragging) return !1;
+    const r = this.context.store.getById(e);
+    if (!r) return !0;
+    const n = [t.lngLat.lng, t.lngLat.lat], i = Le(r, this.dragVertexIndex, n);
+    return he(i.geometry.coordinates[0]) || (this.context.store.update(e, i), this.context.render.renderFeatures(), this.renderHandles(i)), !0;
+  }
+  updateHighlightIfNeeded(e, t) {
+    const r = z(e), n = this.getThreshold(t), i = this.findNearestVertex(r, t.point, n);
+    i !== this.highlightedVertexIndex && (this.highlightedVertexIndex = i, this.renderHandles(e));
+  }
+  deleteVertexAtPointer(e, t, r) {
+    const n = z(t), i = this.getThreshold(r), o = this.findNearestVertex(n, r.point, i);
+    if (o < 0 || n.length <= _e)
+      return !1;
+    const a = v(t), h = Ve(t, o);
+    this.context.store.update(e, h);
+    const d = new ae(
+      e,
+      a,
+      v(h)
+    );
+    return this.context.history.push(d), this.context.events.emit("update", {
+      feature: v(h),
+      oldFeature: v(a)
+    }), this.context.render.renderFeatures(), this.renderHandles(h), !0;
+  }
+  renderHandles(e) {
+    const t = z(e), r = Q(t);
+    this.context.render.renderVertices(
+      t,
+      r,
+      this.highlightedVertexIndex >= 0 ? this.highlightedVertexIndex : void 0
+    );
+  }
+  endDrag() {
+    this.dragging && this.context.setDragPan(!0), this.dragging = !1, this.dragVertexIndex = -1, this.dragStartFeature = null;
+  }
+  startDrag(e, t, r = v(e)) {
+    this.dragging = !0, this.dragVertexIndex = t, this.dragStartFeature = r, this.context.setDragPan(!1);
+  }
+  getThreshold(e) {
+    return e.inputType === "touch" ? Re : ee;
+  }
+  findNearestVertex(e, t, r) {
+    return this.findNearestPoint(e, t, r);
+  }
+  findNearestPoint(e, t, r = ee) {
+    let n = 1 / 0, i = -1;
+    for (let o = 0; o < e.length; o++) {
+      const a = this.context.getScreenPoint({
+        lng: e[o][0],
+        lat: e[o][1]
+      }), h = t.x - a.x, d = t.y - a.y, u = Math.sqrt(h * h + d * d);
+      u <= r && u < n && (n = u, i = o);
+    }
+    return i;
+  }
+}
+class Be {
+  constructor(e, t) {
+    this.dragging = !1, this.dragStartFeature = null, this.dragStartLngLat = null, this.context = e, this.onFeatureMoved = t;
+  }
+  isDragging() {
+    return this.dragging;
+  }
+  getDragStartFeature() {
+    return this.dragStartFeature;
+  }
+  startDrag(e, t) {
+    this.dragging = !0, this.dragStartFeature = v(e), this.dragStartLngLat = t, this.context.setDragPan(!1);
+  }
+  handleDragMove(e, t) {
+    if (!this.dragging) return !1;
+    if (!this.dragStartFeature || !this.dragStartLngLat) return !0;
+    const r = t.lngLat.lng - this.dragStartLngLat.lng, n = t.lngLat.lat - this.dragStartLngLat.lat, i = Ae(this.dragStartFeature, r, n);
+    return this.context.store.update(e, i), this.context.render.renderFeatures(), this.onFeatureMoved(i), !0;
+  }
+  endDrag() {
+    this.dragging && this.context.setDragPan(!0), this.dragging = !1, this.dragStartFeature = null, this.dragStartLngLat = null;
+  }
+  resetInteractionState() {
+    this.endDrag();
+  }
+}
+const _ = 11102230246251565e-32, D = 134217729, Ue = (3 + 8 * _) * _;
+function Y(s, e, t, r, n) {
+  let i, o, a, h, d = e[0], u = r[0], l = 0, c = 0;
+  u > d == u > -d ? (i = d, d = e[++l]) : (i = u, u = r[++c]);
   let g = 0;
-  if (a < r && c < t)
-    for (u > d == u > -d ? (o = d + n, l = n - (o - d), d = e[++a]) : (o = u + n, l = n - (o - u), u = s[++c]), n = o, l !== 0 && (i[g++] = l); a < r && c < t; )
-      u > d == u > -d ? (o = n + d, h = o - n, l = n - (o - h) + (d - h), d = e[++a]) : (o = n + u, h = o - n, l = n - (o - h) + (u - h), u = s[++c]), n = o, l !== 0 && (i[g++] = l);
-  for (; a < r; )
-    o = n + d, h = o - n, l = n - (o - h) + (d - h), d = e[++a], n = o, l !== 0 && (i[g++] = l);
+  if (l < s && c < t)
+    for (u > d == u > -d ? (o = d + i, a = i - (o - d), d = e[++l]) : (o = u + i, a = i - (o - u), u = r[++c]), i = o, a !== 0 && (n[g++] = a); l < s && c < t; )
+      u > d == u > -d ? (o = i + d, h = o - i, a = i - (o - h) + (d - h), d = e[++l]) : (o = i + u, h = o - i, a = i - (o - h) + (u - h), u = r[++c]), i = o, a !== 0 && (n[g++] = a);
+  for (; l < s; )
+    o = i + d, h = o - i, a = i - (o - h) + (d - h), d = e[++l], i = o, a !== 0 && (n[g++] = a);
   for (; c < t; )
-    o = n + u, h = o - n, l = n - (o - h) + (u - h), u = s[++c], n = o, l !== 0 && (i[g++] = l);
-  return (n !== 0 || g === 0) && (i[g++] = n), g;
+    o = i + u, h = o - i, a = i - (o - h) + (u - h), u = r[++c], i = o, a !== 0 && (n[g++] = a);
+  return (i !== 0 || g === 0) && (n[g++] = i), g;
 }
-function Me(r, e) {
+function Oe(s, e) {
   let t = e[0];
-  for (let s = 1; s < r; s++) t += e[s];
+  for (let r = 1; r < s; r++) t += e[r];
   return t;
 }
-function H(r) {
-  return new Float64Array(r);
+function H(s) {
+  return new Float64Array(s);
 }
-const Pe = (3 + 16 * N) * N, ke = (2 + 12 * N) * N, Fe = (9 + 64 * N) * N * N, O = H(4), Q = H(8), Z = H(12), ee = H(16), D = H(4);
-function De(r, e, t, s, i, n, o) {
-  let l, h, d, u, a, c, g, y, p, m, f, b, T, I, M, P, C, k;
-  const L = r - i, x = t - i, V = e - n, A = s - n;
-  I = L * A, c = F * L, g = c - (c - L), y = L - g, c = F * A, p = c - (c - A), m = A - p, M = y * m - (I - g * p - y * p - g * m), P = V * x, c = F * V, g = c - (c - V), y = V - g, c = F * x, p = c - (c - x), m = x - p, C = y * m - (P - g * p - y * p - g * m), f = M - C, a = M - f, O[0] = M - (f + a) + (a - C), b = I + f, a = b - I, T = I - (b - a) + (f - a), f = T - P, a = T - f, O[1] = T - (f + a) + (a - P), k = b + f, a = k - b, O[2] = b - (k - a) + (f - a), O[3] = k;
-  let _ = Me(4, O), U = ke * o;
-  if (_ >= U || -_ >= U || (a = r - L, l = r - (L + a) + (a - i), a = t - x, d = t - (x + a) + (a - i), a = e - V, h = e - (V + a) + (a - n), a = s - A, u = s - (A + a) + (a - n), l === 0 && h === 0 && d === 0 && u === 0) || (U = Fe * o + Te * Math.abs(_), _ += L * u + A * l - (V * d + x * h), _ >= U || -_ >= U)) return _;
-  I = l * A, c = F * l, g = c - (c - l), y = l - g, c = F * A, p = c - (c - A), m = A - p, M = y * m - (I - g * p - y * p - g * m), P = h * x, c = F * h, g = c - (c - h), y = h - g, c = F * x, p = c - (c - x), m = x - p, C = y * m - (P - g * p - y * p - g * m), f = M - C, a = M - f, D[0] = M - (f + a) + (a - C), b = I + f, a = b - I, T = I - (b - a) + (f - a), f = T - P, a = T - f, D[1] = T - (f + a) + (a - P), k = b + f, a = k - b, D[2] = b - (k - a) + (f - a), D[3] = k;
-  const ce = Y(4, O, 4, D, Q);
-  I = L * u, c = F * L, g = c - (c - L), y = L - g, c = F * u, p = c - (c - u), m = u - p, M = y * m - (I - g * p - y * p - g * m), P = V * d, c = F * V, g = c - (c - V), y = V - g, c = F * d, p = c - (c - d), m = d - p, C = y * m - (P - g * p - y * p - g * m), f = M - C, a = M - f, D[0] = M - (f + a) + (a - C), b = I + f, a = b - I, T = I - (b - a) + (f - a), f = T - P, a = T - f, D[1] = T - (f + a) + (a - P), k = b + f, a = k - b, D[2] = b - (k - a) + (f - a), D[3] = k;
-  const he = Y(ce, Q, 4, D, Z);
-  I = l * u, c = F * l, g = c - (c - l), y = l - g, c = F * u, p = c - (c - u), m = u - p, M = y * m - (I - g * p - y * p - g * m), P = h * d, c = F * h, g = c - (c - h), y = h - g, c = F * d, p = c - (c - d), m = d - p, C = y * m - (P - g * p - y * p - g * m), f = M - C, a = M - f, D[0] = M - (f + a) + (a - C), b = I + f, a = b - I, T = I - (b - a) + (f - a), f = T - P, a = T - f, D[1] = T - (f + a) + (a - P), k = b + f, a = k - b, D[2] = b - (k - a) + (f - a), D[3] = k;
-  const de = Y(he, Z, 4, D, ee);
-  return ee[de - 1];
+const ze = (3 + 16 * _) * _, He = (2 + 12 * _) * _, je = (9 + 64 * _) * _ * _, B = H(4), te = H(8), re = H(12), se = H(16), F = H(4);
+function We(s, e, t, r, n, i, o) {
+  let a, h, d, u, l, c, g, m, p, y, f, w, M, I, x, P, T, C;
+  const L = s - n, A = t - n, k = e - i, V = r - i;
+  I = L * V, c = D * L, g = c - (c - L), m = L - g, c = D * V, p = c - (c - V), y = V - p, x = m * y - (I - g * p - m * p - g * y), P = k * A, c = D * k, g = c - (c - k), m = k - g, c = D * A, p = c - (c - A), y = A - p, T = m * y - (P - g * p - m * p - g * y), f = x - T, l = x - f, B[0] = x - (f + l) + (l - T), w = I + f, l = w - I, M = I - (w - l) + (f - l), f = M - P, l = M - f, B[1] = M - (f + l) + (l - P), C = w + f, l = C - w, B[2] = w - (C - l) + (f - l), B[3] = C;
+  let R = Oe(4, B), U = He * o;
+  if (R >= U || -R >= U || (l = s - L, a = s - (L + l) + (l - n), l = t - A, d = t - (A + l) + (l - n), l = e - k, h = e - (k + l) + (l - i), l = r - V, u = r - (V + l) + (l - i), a === 0 && h === 0 && d === 0 && u === 0) || (U = je * o + Ue * Math.abs(R), R += L * u + V * a - (k * d + A * h), R >= U || -R >= U)) return R;
+  I = a * V, c = D * a, g = c - (c - a), m = a - g, c = D * V, p = c - (c - V), y = V - p, x = m * y - (I - g * p - m * p - g * y), P = h * A, c = D * h, g = c - (c - h), m = h - g, c = D * A, p = c - (c - A), y = A - p, T = m * y - (P - g * p - m * p - g * y), f = x - T, l = x - f, F[0] = x - (f + l) + (l - T), w = I + f, l = w - I, M = I - (w - l) + (f - l), f = M - P, l = M - f, F[1] = M - (f + l) + (l - P), C = w + f, l = C - w, F[2] = w - (C - l) + (f - l), F[3] = C;
+  const de = Y(4, B, 4, F, te);
+  I = L * u, c = D * L, g = c - (c - L), m = L - g, c = D * u, p = c - (c - u), y = u - p, x = m * y - (I - g * p - m * p - g * y), P = k * d, c = D * k, g = c - (c - k), m = k - g, c = D * d, p = c - (c - d), y = d - p, T = m * y - (P - g * p - m * p - g * y), f = x - T, l = x - f, F[0] = x - (f + l) + (l - T), w = I + f, l = w - I, M = I - (w - l) + (f - l), f = M - P, l = M - f, F[1] = M - (f + l) + (l - P), C = w + f, l = C - w, F[2] = w - (C - l) + (f - l), F[3] = C;
+  const ue = Y(de, te, 4, F, re);
+  I = a * u, c = D * a, g = c - (c - a), m = a - g, c = D * u, p = c - (c - u), y = u - p, x = m * y - (I - g * p - m * p - g * y), P = h * d, c = D * h, g = c - (c - h), m = h - g, c = D * d, p = c - (c - d), y = d - p, T = m * y - (P - g * p - m * p - g * y), f = x - T, l = x - f, F[0] = x - (f + l) + (l - T), w = I + f, l = w - I, M = I - (w - l) + (f - l), f = M - P, l = M - f, F[1] = M - (f + l) + (l - P), C = w + f, l = C - w, F[2] = w - (C - l) + (f - l), F[3] = C;
+  const ge = Y(ue, re, 4, F, se);
+  return se[ge - 1];
 }
-function Ce(r, e, t, s, i, n) {
-  const o = (e - n) * (t - i), l = (r - i) * (s - n), h = o - l, d = Math.abs(o + l);
-  return Math.abs(h) >= Pe * d ? h : -De(r, e, t, s, i, n, d);
+function Ge(s, e, t, r, n, i) {
+  const o = (e - i) * (t - n), a = (s - n) * (r - i), h = o - a, d = Math.abs(o + a);
+  return Math.abs(h) >= ze * d ? h : -We(s, e, t, r, n, i, d);
 }
-function Le(r, e) {
-  var t, s, i = 0, n, o, l, h, d, u, a, c = r[0], g = r[1], y = e.length;
-  for (t = 0; t < y; t++) {
-    s = 0;
-    var p = e[t], m = p.length - 1;
-    if (u = p[0], u[0] !== p[m][0] && u[1] !== p[m][1])
+function $e(s, e) {
+  var t, r, n = 0, i, o, a, h, d, u, l, c = s[0], g = s[1], m = e.length;
+  for (t = 0; t < m; t++) {
+    r = 0;
+    var p = e[t], y = p.length - 1;
+    if (u = p[0], u[0] !== p[y][0] && u[1] !== p[y][1])
       throw new Error("First and last coordinates in a ring must be the same");
-    for (o = u[0] - c, l = u[1] - g, s; s < m; s++) {
-      if (a = p[s + 1], h = a[0] - c, d = a[1] - g, l === 0 && d === 0) {
+    for (o = u[0] - c, a = u[1] - g, r; r < y; r++) {
+      if (l = p[r + 1], h = l[0] - c, d = l[1] - g, a === 0 && d === 0) {
         if (h <= 0 && o >= 0 || o <= 0 && h >= 0)
           return 0;
-      } else if (d >= 0 && l <= 0 || d <= 0 && l >= 0) {
-        if (n = Ce(o, h, l, d, 0, 0), n === 0)
+      } else if (d >= 0 && a <= 0 || d <= 0 && a >= 0) {
+        if (i = Ge(o, h, a, d, 0, 0), i === 0)
           return 0;
-        (n > 0 && d > 0 && l <= 0 || n < 0 && d <= 0 && l > 0) && i++;
+        (i > 0 && d > 0 && a <= 0 || i < 0 && d <= 0 && a > 0) && n++;
       }
-      u = a, l = d, o = h;
+      u = l, a = d, o = h;
     }
   }
-  return i % 2 !== 0;
+  return n % 2 !== 0;
 }
-function xe(r, e, t = {}) {
-  const s = { type: "Feature" };
-  return (t.id === 0 || t.id) && (s.id = t.id), t.bbox && (s.bbox = t.bbox), s.properties = {}, s.geometry = r, s;
+function Je(s, e, t = {}) {
+  const r = { type: "Feature" };
+  return (t.id === 0 || t.id) && (r.id = t.id), t.bbox && (r.bbox = t.bbox), r.properties = {}, r.geometry = s, r;
 }
-function te(r, e, t = {}) {
-  if (!r)
+function ie(s, e, t = {}) {
+  if (!s)
     throw new Error("coordinates is required");
-  if (!Array.isArray(r))
+  if (!Array.isArray(s))
     throw new Error("coordinates must be an Array");
-  if (r.length < 2)
+  if (s.length < 2)
     throw new Error("coordinates must be at least 2 numbers long");
-  if (!se(r[0]) || !se(r[1]))
+  if (!ne(s[0]) || !ne(s[1]))
     throw new Error("coordinates must contain numbers");
-  return xe({
+  return Je({
     type: "Point",
-    coordinates: r
+    coordinates: s
   }, e, t);
 }
-function se(r) {
-  return !isNaN(r) && r !== null && !Array.isArray(r);
+function ne(s) {
+  return !isNaN(s) && s !== null && !Array.isArray(s);
 }
-function Ve(r) {
-  if (!r)
+function Ke(s) {
+  if (!s)
     throw new Error("coord is required");
-  if (!Array.isArray(r)) {
-    if (r.type === "Feature" && r.geometry !== null && r.geometry.type === "Point")
-      return [...r.geometry.coordinates];
-    if (r.type === "Point")
-      return [...r.coordinates];
-  }
-  if (Array.isArray(r) && r.length >= 2 && !Array.isArray(r[0]) && !Array.isArray(r[1]))
-    return [...r];
+  if (!Array.isArray(s)) {
+    if (s.type === "Feature" && s.geometry !== null && s.geometry.type === "Point")
+      return [...s.geometry.coordinates];
+    if (s.type === "Point")
+      return [...s.coordinates];
+  }
+  if (Array.isArray(s) && s.length >= 2 && !Array.isArray(s[0]) && !Array.isArray(s[1]))
+    return [...s];
   throw new Error("coord must be GeoJSON Point or an Array of numbers");
 }
-function Ae(r) {
-  return r.type === "Feature" ? r.geometry : r;
+function Ye(s) {
+  return s.type === "Feature" ? s.geometry : s;
 }
-function _e(r, e, t = {}) {
-  if (!r)
+function qe(s, e, t = {}) {
+  if (!s)
     throw new Error("point is required");
   if (!e)
     throw new Error("polygon is required");
-  const s = Ve(r), i = Ae(e), n = i.type, o = e.bbox;
-  let l = i.coordinates;
-  if (o && Re(s, o) === !1)
+  const r = Ke(s), n = Ye(e), i = n.type, o = e.bbox;
+  let a = n.coordinates;
+  if (o && Xe(r, o) === !1)
     return !1;
-  n === "Polygon" && (l = [l]);
+  i === "Polygon" && (a = [a]);
   let h = !1;
-  for (var d = 0; d < l.length; ++d) {
-    const u = Le(s, l[d]);
+  for (var d = 0; d < a.length; ++d) {
+    const u = $e(r, a[d]);
     if (u === 0) return !t.ignoreBoundary;
     u && (h = !0);
   }
   return h;
 }
-function Re(r, e) {
-  return e[0] <= r[0] && e[1] <= r[1] && e[2] >= r[0] && e[3] >= r[1];
+function Xe(s, e) {
+  return e[0] <= s[0] && e[1] <= s[1] && e[2] >= s[0] && e[3] >= s[1];
 }
-var ie = _e;
-const re = 10, Ne = 24, ne = 3;
-class Oe {
+var oe = qe;
+class Ze {
   constructor(e, t) {
-    this.selectedIds = /* @__PURE__ */ new Set(), this.isActive = !1, this.dragging = !1, this.dragVertexIndex = -1, this.dragStartFeature = null, this.draggingPolygon = !1, this.dragPolygonStartLngLat = null, this.highlightedVertexIndex = -1, this.callbacks = e, this.onSelectionChange = t;
+    this.isActive = !1, this.context = e, this.selection = new Te(e, t), this.vertexEditor = new Ne(e), this.polygonDragger = new Be(e, (r) => {
+      this.vertexEditor.renderHandles(r);
+    });
+  }
+  mapInteractions() {
+    return {
+      dragPan: !0,
+      doubleClickZoom: !1
+    };
   }
   activate() {
     this.isActive = !0;
   }
   deactivate() {
-    this.isActive = !1, this.highlightedVertexIndex = -1, this.endDrag(), this.selectedIds.size > 0 && (this.selectedIds.clear(), this.callbacks.clearVertices(), this.notifySelectionChange());
+    this.isActive = !1, this.forceClearSelectionState();
   }
   /**
    * Get the currently selected feature IDs.
    */
   getSelectedIds() {
-    return Array.from(this.selectedIds);
+    return this.selection.getSelectedIds();
   }
   /**
    * Programmatically select a feature by ID.
-   *
-   * Replaces any existing selection. Renders vertex handles and
-   * emits a selectionchange event. Cancels any in-progress drag.
-   *
-   * @param id - The feature ID to select.
-   * @returns `true` if the feature was found and selected, `false` otherwise.
    */
   selectFeature(e) {
     if (!this.isActive) return !1;
-    const t = this.callbacks.getFeatureById(e);
-    return t ? (this.highlightedVertexIndex = -1, this.endDrag(), this.selectedIds.clear(), this.selectedIds.add(e), this.showVertexHandles(t), this.notifySelectionChange(), this.callbacks.renderFeatures(), !0) : !1;
+    const t = this.context.store.getById(e);
+    return t ? (this.vertexEditor.resetInteractionState(), this.polygonDragger.resetInteractionState(), this.selection.selectOnly(e), this.vertexEditor.renderHandles(t), this.selection.notify(), this.context.render.renderFeatures(), !0) : !1;
   }
   /**
    * Programmatically clear the current selection.
-   *
-   * Removes vertex handles and emits a selectionchange event.
-   * No-op if nothing is selected or mode is not active.
+   * Public API keeps the active-mode guard.
    */
   clearSelection() {
-    this.isActive && this.selectedIds.size !== 0 && (this.highlightedVertexIndex = -1, this.endDrag(), this.selectedIds.clear(), this.callbacks.clearVertices(), this.notifySelectionChange(), this.callbacks.renderFeatures());
+    this.isActive && this.selection.hasSelection() && (this.forceClearSelectionState(), this.context.render.renderFeatures());
   }
   onPointerDown(e) {
     if (!this.isActive) return;
-    const t = this.getFirstSelectedId();
+    const t = this.selection.getFirstSelectedId();
     if (t) {
-      const o = this.callbacks.getFeatureById(t);
+      const o = this.context.store.getById(t);
       if (o) {
-        const l = this.getVertices(o), h = this.getThreshold(e), d = this.findNearestVertex(
-          l,
-          e.point,
-          h
-        );
-        if (d >= 0) {
-          this.startDrag(o, d);
-          return;
-        }
-        const u = this.computeMidpoints(l), a = this.findNearestPoint(u, e.point, h);
-        if (a >= 0) {
-          const g = R.cloneFeature(o), y = this.insertVertex(o, a + 1, u[a]);
-          this.callbacks.updateFeatureInStore(t, y), this.showVertexHandles(y), this.startDrag(y, a + 1), this.dragStartFeature = g;
+        if (this.vertexEditor.tryStartVertexDragOrInsert(o, t, e))
           return;
-        }
-        const c = te([e.lngLat.lng, e.lngLat.lat]);
-        if (ie(c, o.geometry)) {
-          this.startPolygonDrag(o, e.lngLat);
+        const a = ie([e.lngLat.lng, e.lngLat.lat]);
+        if (oe(a, o.geometry)) {
+          this.polygonDragger.startDrag(o, e.lngLat);
           return;
         }
       }
     }
-    this.highlightedVertexIndex = -1;
-    const s = te([e.lngLat.lng, e.lngLat.lat]), i = this.callbacks.getAllFeatures();
-    let n;
-    for (let o = i.length - 1; o >= 0; o--) {
-      const l = i[o], h = l.geometry;
-      if (ie(s, h)) {
-        n = l;
+    this.vertexEditor.clearHighlight();
+    const r = ie([e.lngLat.lng, e.lngLat.lat]), n = this.context.store.getAll();
+    let i;
+    for (let o = n.length - 1; o >= 0; o--) {
+      const a = n[o];
+      if (oe(r, a.geometry)) {
+        i = a;
         break;
       }
     }
-    n ? this.selectedIds.has(n.id) ? (this.selectedIds.delete(n.id), this.callbacks.clearVertices()) : (this.selectedIds.clear(), this.selectedIds.add(n.id), this.showVertexHandles(n)) : (this.selectedIds.clear(), this.callbacks.clearVertices()), this.notifySelectionChange(), this.callbacks.renderFeatures();
+    i ? this.selection.has(i.id) ? (this.selection.remove(i.id), this.context.render.clearVertices()) : (this.selection.selectOnly(i.id), this.vertexEditor.renderHandles(i)) : (this.selection.clear(), this.context.render.clearVertices()), this.selection.notify(), this.context.render.renderFeatures();
   }
   onPointerMove(e) {
     if (!this.isActive) return;
-    if (this.dragging) {
-      const l = this.getFirstSelectedId();
-      if (!l) return;
-      const h = this.callbacks.getFeatureById(l);
-      if (!h) return;
-      const d = [e.lngLat.lng, e.lngLat.lat], u = this.moveVertex(h, this.dragVertexIndex, d);
-      if (ae(u.geometry.coordinates[0]))
-        return;
-      this.callbacks.updateFeatureInStore(l, u), this.callbacks.renderFeatures(), this.showVertexHandles(u);
-      return;
-    }
-    if (this.draggingPolygon) {
-      const l = this.getFirstSelectedId();
-      if (!l || !this.dragStartFeature || !this.dragPolygonStartLngLat) return;
-      const h = e.lngLat.lng - this.dragPolygonStartLngLat.lng, d = e.lngLat.lat - this.dragPolygonStartLngLat.lat, u = this.movePolygon(this.dragStartFeature, h, d);
-      this.callbacks.updateFeatureInStore(l, u), this.callbacks.renderFeatures(), this.showVertexHandles(u);
-      return;
-    }
-    const t = this.getFirstSelectedId();
-    if (!t) return;
-    const s = this.callbacks.getFeatureById(t);
-    if (!s) return;
-    const i = this.getVertices(s), n = this.getThreshold(e), o = this.findNearestVertex(i, e.point, n);
-    o !== this.highlightedVertexIndex && (this.highlightedVertexIndex = o, this.showVertexHandles(s));
+    const t = this.selection.getFirstSelectedId();
+    if (!t || this.vertexEditor.handleDragMove(t, e) || this.polygonDragger.handleDragMove(t, e)) return;
+    const r = this.context.store.getById(t);
+    r && this.vertexEditor.updateHighlightIfNeeded(r, e);
   }
   onPointerUp(e) {
-    if (!this.isActive || !this.dragging && !this.draggingPolygon) return;
-    const t = this.getFirstSelectedId();
-    if (!t || !this.dragStartFeature) {
-      this.endDrag();
+    if (!this.isActive) return;
+    const t = this.vertexEditor.isDragging(), r = this.polygonDragger.isDragging();
+    if (!t && !r) return;
+    const n = this.selection.getFirstSelectedId();
+    if (!n) {
+      this.vertexEditor.endDrag(), this.polygonDragger.endDrag();
       return;
     }
-    const s = this.callbacks.getFeatureById(t);
-    if (s) {
-      const i = new $(
-        t,
-        this.dragStartFeature,
-        R.cloneFeature(s)
-      );
-      this.callbacks.pushToHistory(i), this.callbacks.emitEvent("update", {
-        feature: s,
-        oldFeature: this.dragStartFeature
-      });
+    if (t) {
+      this.commitDragUpdate(n, this.vertexEditor.getDragStartFeature()), this.vertexEditor.endDrag();
+      return;
     }
-    this.endDrag();
+    r && (this.commitDragUpdate(
+      n,
+      this.polygonDragger.getDragStartFeature()
+    ), this.polygonDragger.endDrag());
   }
   onDoubleClick(e) {
     if (!this.isActive) return;
-    const t = this.getFirstSelectedId();
+    const t = this.selection.getFirstSelectedId();
     if (!t) return;
-    const s = this.callbacks.getFeatureById(t);
-    if (!s) return;
-    const i = this.getVertices(s), n = this.getThreshold(e), o = this.findNearestVertex(i, e.point, n);
-    if (o >= 0 && i.length > ne) {
-      const l = R.cloneFeature(s), h = this.removeVertex(s, o);
-      this.callbacks.updateFeatureInStore(t, h);
-      const d = new $(t, l, R.cloneFeature(h));
-      this.callbacks.pushToHistory(d), this.callbacks.emitEvent("update", {
-        feature: h,
-        oldFeature: l
-      }), this.callbacks.renderFeatures(), this.showVertexHandles(h), e.originalEvent.preventDefault(), e.originalEvent.stopPropagation();
-    }
+    const r = this.context.store.getById(t);
+    r && this.vertexEditor.deleteVertexAtPointer(t, r, e) && (e.originalEvent.preventDefault(), e.originalEvent.stopPropagation());
   }
   onLongPress(e) {
     if (!this.isActive) return;
-    const t = this.getFirstSelectedId();
-    if (!t)
-      return;
-    const s = this.callbacks.getFeatureById(t);
-    if (!s) return;
-    const i = this.getVertices(s), n = this.getThreshold(e), o = this.findNearestVertex(i, e.point, n);
-    if (o >= 0 && i.length > ne) {
-      const l = R.cloneFeature(s), h = this.removeVertex(s, o);
-      this.callbacks.updateFeatureInStore(t, h);
-      const d = new $(t, l, R.cloneFeature(h));
-      this.callbacks.pushToHistory(d), this.callbacks.emitEvent("update", {
-        feature: h,
-        oldFeature: l
-      }), this.callbacks.renderFeatures(), this.showVertexHandles(h);
-    }
+    const t = this.selection.getFirstSelectedId();
+    if (!t) return;
+    const r = this.context.store.getById(t);
+    r && this.vertexEditor.deleteVertexAtPointer(t, r, e);
   }
   onKeyDown(e, t) {
     this.isActive && (e === "Delete" || e === "Backspace") && this.deleteSelected();
   }
   /**
-   * Get the hit-test threshold based on input type.
-   */
-  getThreshold(e) {
-    return e.inputType === "touch" ? Ne : re;
-  }
-  /**
-   * Get the unique vertices (excluding closing point) of a polygon.
-   */
-  getVertices(e) {
-    const t = e.geometry.coordinates[0];
-    return t.slice(0, t.length - 1);
-  }
-  /**
-   * Find the nearest vertex within the hit threshold.
-   * @returns The vertex index, or -1 if none is close enough.
-   */
-  findNearestVertex(e, t, s) {
-    return this.findNearestPoint(e, t, s);
-  }
-  /**
-   * Find the nearest point (vertex or midpoint) within the hit threshold.
-   * @returns The index, or -1 if none is close enough.
-   */
-  findNearestPoint(e, t, s = re) {
-    let i = 1 / 0, n = -1;
-    for (let o = 0; o < e.length; o++) {
-      const l = this.callbacks.getScreenPoint({
-        lng: e[o][0],
-        lat: e[o][1]
-      }), h = t.x - l.x, d = t.y - l.y, u = Math.sqrt(h * h + d * d);
-      u <= s && u < i && (i = u, n = o);
-    }
-    return n;
-  }
-  /**
-   * Compute midpoints for each edge of the polygon.
-   */
-  computeMidpoints(e) {
-    const t = [];
-    for (let s = 0; s < e.length; s++) {
-      const i = (s + 1) % e.length;
-      t.push([
-        (e[s][0] + e[i][0]) / 2,
-        (e[s][1] + e[i][1]) / 2
-      ]);
-    }
-    return t;
-  }
-  /**
-   * Start a vertex drag operation.
-   */
-  startDrag(e, t) {
-    this.dragging = !0, this.dragVertexIndex = t, this.dragStartFeature = R.cloneFeature(e), this.callbacks.setDragPan(!1);
-  }
-  /**
-   * Start a polygon drag (whole-polygon move) operation.
-   */
-  startPolygonDrag(e, t) {
-    this.draggingPolygon = !0, this.dragPolygonStartLngLat = t, this.dragStartFeature = R.cloneFeature(e), this.callbacks.setDragPan(!1);
-  }
-  /**
-   * End a drag operation and restore map interactions.
-   */
-  endDrag() {
-    (this.dragging || this.draggingPolygon) && this.callbacks.setDragPan(!0), this.dragging = !1, this.dragVertexIndex = -1, this.dragStartFeature = null, this.draggingPolygon = !1, this.dragPolygonStartLngLat = null, this.highlightedVertexIndex = -1;
-  }
-  /**
-   * Create a new feature with a vertex moved to a new position.
-   */
-  moveVertex(e, t, s) {
-    const i = [...e.geometry.coordinates[0]];
-    return i[t] = s, t === 0 && (i[i.length - 1] = s), t === i.length - 1 && (i[0] = s), {
-      ...e,
-      geometry: {
-        type: "Polygon",
-        coordinates: [i]
-      }
-    };
-  }
-  /**
-   * Create a new feature with all vertices translated by the given delta.
-   */
-  movePolygon(e, t, s) {
-    const i = e.geometry.coordinates[0].map(
-      (n) => [n[0] + t, n[1] + s]
-    );
-    return {
-      ...e,
-      geometry: {
-        type: "Polygon",
-        coordinates: [i]
-      }
-    };
-  }
-  /**
-   * Create a new feature with a vertex inserted at the given index.
-   */
-  insertVertex(e, t, s) {
-    const i = [...e.geometry.coordinates[0]];
-    return i.splice(t, 0, s), {
-      ...e,
-      geometry: {
-        type: "Polygon",
-        coordinates: [i]
-      }
-    };
-  }
-  /**
-   * Create a new feature with a vertex removed at the given index.
-   */
-  removeVertex(e, t) {
-    const i = this.getVertices(e).filter((o, l) => l !== t), n = [...i, [...i[0]]];
-    return {
-      ...e,
-      geometry: {
-        type: "Polygon",
-        coordinates: [n]
-      }
-    };
-  }
-  /**
-   * Refresh vertex/midpoint handles for the currently selected feature.
-   * Call this after external geometry changes (e.g. undo/redo).
+   * Refresh vertex/midpoint handles after external geometry changes.
    */
   refreshVertexHandles() {
     if (!this.isActive) return;
-    const e = this.getFirstSelectedId();
+    const e = this.selection.getFirstSelectedId();
     if (!e) return;
-    const t = this.callbacks.getFeatureById(e);
-    t ? this.showVertexHandles(t) : (this.selectedIds.delete(e), this.callbacks.clearVertices(), this.notifySelectionChange());
+    const t = this.context.store.getById(e);
+    t ? this.vertexEditor.renderHandles(t) : (this.selection.remove(e), this.context.render.clearVertices(), this.selection.notify());
   }
-  /**
-   * Show vertex and midpoint handles for a selected feature.
-   */
-  showVertexHandles(e) {
-    const t = this.getVertices(e), s = this.computeMidpoints(t);
-    this.callbacks.renderVertices(
-      e.id,
+  forceClearSelectionState() {
+    this.vertexEditor.resetInteractionState(), this.polygonDragger.resetInteractionState(), this.selection.clearAndNotify() && this.context.render.clearVertices();
+  }
+  commitDragUpdate(e, t) {
+    if (!t) return;
+    const r = this.context.store.getById(e);
+    if (!r || !this.hasGeometryChanged(t, r))
+      return;
+    const n = new ae(
+      e,
       t,
-      s,
-      this.highlightedVertexIndex >= 0 ? this.highlightedVertexIndex : void 0
+      v(r)
     );
+    this.context.history.push(n), this.context.events.emit("update", {
+      feature: v(r),
+      oldFeature: v(t)
+    });
   }
-  /**
-   * Get the first selected feature ID.
-   */
-  getFirstSelectedId() {
-    return this.selectedIds.values().next().value;
-  }
-  /**
-   * Delete all currently selected features.
-   */
   deleteSelected() {
-    if (this.selectedIds.size === 0) return;
-    const e = Array.from(this.selectedIds);
+    if (!this.selection.hasSelection()) return;
+    const e = this.selection.getSelectedIds();
     for (const t of e) {
-      const s = this.callbacks.getFeatureById(t);
-      if (s) {
-        this.callbacks.removeFeatureFromStore(t);
-        const i = new oe(s);
-        this.callbacks.pushToHistory(i), this.callbacks.emitEvent("delete", { feature: s });
-      }
+      const r = this.context.store.getById(t);
+      if (!r) continue;
+      this.context.store.remove(t);
+      const n = new le(r);
+      this.context.history.push(n), this.context.events.emit("delete", { feature: v(r) });
     }
-    this.selectedIds.clear(), this.callbacks.clearVertices(), this.notifySelectionChange(), this.callbacks.renderFeatures();
-  }
-  /**
-   * Notify the host about selection changes.
-   */
-  notifySelectionChange() {
-    const e = this.getSelectedIds();
-    this.callbacks.emitEvent("selectionchange", { selectedIds: e }), this.onSelectionChange && this.onSelectionChange(e);
+    this.selection.clear(), this.context.render.clearVertices(), this.selection.notify(), this.context.render.renderFeatures();
+  }
+  hasGeometryChanged(e, t) {
+    const r = e.geometry.coordinates, n = t.geometry.coordinates;
+    if (r.length !== n.length) return !0;
+    for (let i = 0; i < r.length; i++) {
+      const o = r[i], a = n[i];
+      if (o.length !== a.length) return !0;
+      for (let h = 0; h < o.length; h++)
+        if (o[h][0] !== a[h][0] || o[h][1] !== a[h][1])
+          return !0;
+    }
+    return !1;
   }
 }
-class Ue {
+class Qe {
   constructor(e, t) {
-    this.handleMouseDown = (s) => {
-      this.callbacks.onPointerDown(this.normalize(s));
-    }, this.handleMouseMove = (s) => {
-      this.callbacks.onPointerMove(this.normalize(s));
-    }, this.handleMouseUp = (s) => {
-      this.callbacks.onPointerUp(this.normalize(s));
-    }, this.handleDblClick = (s) => {
-      this.callbacks.onDoubleClick(this.normalize(s));
+    this.isPointerDown = !1, this.handleMouseDown = (r) => {
+      this.isPointerDown = !0, this.callbacks.onPointerDown(this.normalize(r));
+    }, this.handleMouseMoveCanvas = (r) => {
+      this.isPointerDown || this.callbacks.onPointerMove(this.normalize(r));
+    }, this.handleMouseMoveWindow = (r) => {
+      this.isPointerDown && this.callbacks.onPointerMove(this.normalize(r));
+    }, this.handleMouseUpWindow = (r) => {
+      this.isPointerDown && (this.isPointerDown = !1, this.callbacks.onPointerUp(this.normalize(r)));
+    }, this.handleDblClick = (r) => {
+      this.callbacks.onDoubleClick(this.normalize(r));
     }, this.map = e, this.callbacks = t, this.canvas = e.getCanvasContainer();
   }
   /**
    * Start listening for mouse events on the map canvas.
    */
   enable() {
-    this.canvas.addEventListener("mousedown", this.handleMouseDown), this.canvas.addEventListener("mousemove", this.handleMouseMove), this.canvas.addEventListener("mouseup", this.handleMouseUp), this.canvas.addEventListener("dblclick", this.handleDblClick);
+    this.canvas.addEventListener("mousedown", this.handleMouseDown), this.canvas.addEventListener("mousemove", this.handleMouseMoveCanvas), window.addEventListener("mousemove", this.handleMouseMoveWindow), window.addEventListener("mouseup", this.handleMouseUpWindow), this.canvas.addEventListener("dblclick", this.handleDblClick);
   }
   /**
    * Stop listening for mouse events.
    */
   disable() {
-    this.canvas.removeEventListener("mousedown", this.handleMouseDown), this.canvas.removeEventListener("mousemove", this.handleMouseMove), this.canvas.removeEventListener("mouseup", this.handleMouseUp), this.canvas.removeEventListener("dblclick", this.handleDblClick);
+    this.canvas.removeEventListener("mousedown", this.handleMouseDown), this.canvas.removeEventListener("mousemove", this.handleMouseMoveCanvas), window.removeEventListener("mousemove", this.handleMouseMoveWindow), window.removeEventListener("mouseup", this.handleMouseUpWindow), this.canvas.removeEventListener("dblclick", this.handleDblClick), this.isPointerDown = !1;
   }
   /**
    * Destroy the mouse input handler and remove all listeners.
@@ -998,47 +1079,60 @@ class Ue {
    * Convert a raw MouseEvent into a NormalizedInputEvent.
    */
   normalize(e) {
-    const t = this.canvas.getBoundingClientRect(), s = e.clientX - t.left, i = e.clientY - t.top, n = this.map.unproject([s, i]);
+    const t = this.canvas.getBoundingClientRect(), r = e.clientX - t.left, n = e.clientY - t.top, i = this.map.unproject([r, n]);
     return {
-      lngLat: { lng: n.lng, lat: n.lat },
-      point: { x: s, y: i },
+      lngLat: { lng: i.lng, lat: i.lat },
+      point: { x: r, y: n },
       originalEvent: e,
       inputType: "mouse"
     };
   }
 }
-const Be = 300, He = 500, ze = 15;
-class je {
+const et = 300, tt = 500, rt = 15;
+class st {
   constructor(e, t) {
-    this.lastTapTime = 0, this.longPressTimer = null, this.touchStartPos = null, this.isPinching = !1, this.handleTouchStart = (s) => {
-      if (s.touches.length >= 2) {
-        this.isPinching = !0, this.cancelLongPress();
+    this.lastTapTime = 0, this.longPressTimer = null, this.touchStartPos = null, this.isPinching = !1, this.longPressFired = !1, this.handleTouchStart = (r) => {
+      if (r.touches.length >= 2) {
+        const i = this.normalize(r);
+        this.isPinching = !0, this.cancelLongPress(), this.endPointerIfActive(i), this.longPressFired = !1;
         return;
       }
       this.isPinching = !1;
-      const i = this.normalize(s);
-      this.touchStartPos = { x: i.point.x, y: i.point.y }, this.cancelLongPress(), this.longPressTimer = setTimeout(() => {
-        this.touchStartPos && (this.callbacks.onLongPress(i), this.touchStartPos = null);
-      }, He), this.callbacks.onPointerDown(i);
-    }, this.handleTouchMove = (s) => {
-      if (this.isPinching || s.touches.length >= 2) {
+      const n = this.normalize(r);
+      this.touchStartPos = { x: n.point.x, y: n.point.y }, this.longPressFired = !1, this.cancelLongPress(), this.longPressTimer = setTimeout(() => {
+        !this.touchStartPos || this.isPinching || (this.endPointerIfActive(n), this.longPressFired = !0, this.callbacks.onLongPress(n));
+      }, tt), this.callbacks.onPointerDown(n);
+    }, this.handleTouchMove = (r) => {
+      if (r.touches.length >= 2) {
+        const i = this.normalize(r);
+        this.isPinching = !0, this.endPointerIfActive(i), this.cancelLongPress();
+        return;
+      }
+      if (this.isPinching) {
         this.cancelLongPress();
         return;
       }
-      const i = this.normalize(s);
+      const n = this.normalize(r);
       if (this.touchStartPos) {
-        const n = i.point.x - this.touchStartPos.x, o = i.point.y - this.touchStartPos.y;
-        Math.sqrt(n * n + o * o) > ze && this.cancelLongPress();
+        const i = n.point.x - this.touchStartPos.x, o = n.point.y - this.touchStartPos.y;
+        Math.sqrt(i * i + o * o) > rt && this.cancelLongPress();
       }
-      this.callbacks.onPointerMove(i);
-    }, this.handleTouchEnd = (s) => {
-      if (this.cancelLongPress(), this.isPinching) {
-        s.touches.length === 0 && (this.isPinching = !1);
+      this.callbacks.onPointerMove(n);
+    }, this.handleTouchEnd = (r) => {
+      if (this.cancelLongPress(), r.changedTouches.length === 0) return;
+      const n = this.normalizeChangedTouch(r);
+      if (this.endPointerIfActive(n), this.isPinching) {
+        r.touches.length === 0 && (this.isPinching = !1), this.longPressFired = !1;
         return;
       }
-      if (s.changedTouches.length === 0) return;
-      const i = this.normalizeChangedTouch(s), n = Date.now();
-      n - this.lastTapTime < Be ? (this.callbacks.onDoubleClick(i), this.lastTapTime = 0) : this.lastTapTime = n, this.touchStartPos && (this.callbacks.onPointerUp(i), this.touchStartPos = null);
+      if (this.longPressFired) {
+        this.longPressFired = !1, this.lastTapTime = 0;
+        return;
+      }
+      const i = Date.now();
+      i - this.lastTapTime < et ? (this.callbacks.onDoubleClick(n), this.lastTapTime = 0) : this.lastTapTime = i;
+    }, this.handleTouchCancel = (r) => {
+      this.cancelLongPress(), r.changedTouches.length > 0 && this.endPointerIfActive(this.normalizeChangedTouch(r)), this.touchStartPos = null, this.isPinching = !1, this.longPressFired = !1, this.lastTapTime = 0;
     }, this.map = e, this.callbacks = t, this.canvas = e.getCanvasContainer();
   }
   /**
@@ -1049,13 +1143,13 @@ class je {
       passive: !1
     }), this.canvas.addEventListener("touchmove", this.handleTouchMove, {
       passive: !1
-    }), this.canvas.addEventListener("touchend", this.handleTouchEnd);
+    }), this.canvas.addEventListener("touchend", this.handleTouchEnd), this.canvas.addEventListener("touchcancel", this.handleTouchCancel);
   }
   /**
    * Stop listening for touch events.
    */
   disable() {
-    this.canvas.removeEventListener("touchstart", this.handleTouchStart), this.canvas.removeEventListener("touchmove", this.handleTouchMove), this.canvas.removeEventListener("touchend", this.handleTouchEnd), this.cancelLongPress();
+    this.canvas.removeEventListener("touchstart", this.handleTouchStart), this.canvas.removeEventListener("touchmove", this.handleTouchMove), this.canvas.removeEventListener("touchend", this.handleTouchEnd), this.canvas.removeEventListener("touchcancel", this.handleTouchCancel), this.cancelLongPress(), this.touchStartPos = null, this.isPinching = !1, this.longPressFired = !1, this.lastTapTime = 0;
   }
   /**
    * Destroy the touch input handler and remove all listeners.
@@ -1069,14 +1163,20 @@ class je {
   cancelLongPress() {
     this.longPressTimer !== null && (clearTimeout(this.longPressTimer), this.longPressTimer = null);
   }
+  /**
+   * End the current pointer interaction if active.
+   */
+  endPointerIfActive(e) {
+    this.touchStartPos && (this.callbacks.onPointerUp(e), this.touchStartPos = null);
+  }
   /**
    * Convert a TouchEvent into a NormalizedInputEvent using the first touch.
    */
   normalize(e) {
-    const t = e.touches[0], s = this.canvas.getBoundingClientRect(), i = t.clientX - s.left, n = t.clientY - s.top, o = this.map.unproject([i, n]);
+    const t = e.touches[0], r = this.canvas.getBoundingClientRect(), n = t.clientX - r.left, i = t.clientY - r.top, o = this.map.unproject([n, i]);
     return {
       lngLat: { lng: o.lng, lat: o.lat },
-      point: { x: i, y: n },
+      point: { x: n, y: i },
       originalEvent: e,
       inputType: "touch"
     };
@@ -1086,10 +1186,10 @@ class je {
    * (for touchend events where touches array is empty).
    */
   normalizeChangedTouch(e) {
-    const t = e.changedTouches[0], s = this.canvas.getBoundingClientRect(), i = t.clientX - s.left, n = t.clientY - s.top, o = this.map.unproject([i, n]);
+    const t = e.changedTouches[0], r = this.canvas.getBoundingClientRect(), n = t.clientX - r.left, i = t.clientY - r.top, o = this.map.unproject([n, i]);
     return {
       lngLat: { lng: o.lng, lat: o.lat },
-      point: { x: i, y: n },
+      point: { x: n, y: i },
       originalEvent: e,
       inputType: "touch"
     };
@@ -1125,36 +1225,36 @@ K.RELEVANT_KEYS = /* @__PURE__ */ new Set([
   "Delete",
   "Backspace"
 ]);
-let G = K;
-class Xe {
+let q = K;
+class it {
   constructor(e, t) {
     this.getActiveMode = t;
-    const s = {
-      onPointerDown: (i) => {
-        var n;
-        (n = this.getActiveMode()) == null || n.onPointerDown(i);
+    const r = {
+      onPointerDown: (n) => {
+        var i;
+        (i = this.getActiveMode()) == null || i.onPointerDown(n);
       },
-      onPointerMove: (i) => {
-        var n;
-        (n = this.getActiveMode()) == null || n.onPointerMove(i);
+      onPointerMove: (n) => {
+        var i;
+        (i = this.getActiveMode()) == null || i.onPointerMove(n);
       },
-      onPointerUp: (i) => {
-        var n;
-        (n = this.getActiveMode()) == null || n.onPointerUp(i);
+      onPointerUp: (n) => {
+        var i;
+        (i = this.getActiveMode()) == null || i.onPointerUp(n);
       },
-      onDoubleClick: (i) => {
-        var n;
-        (n = this.getActiveMode()) == null || n.onDoubleClick(i);
+      onDoubleClick: (n) => {
+        var i;
+        (i = this.getActiveMode()) == null || i.onDoubleClick(n);
       },
-      onLongPress: (i) => {
-        var n;
-        (n = this.getActiveMode()) == null || n.onLongPress(i);
+      onLongPress: (n) => {
+        var i;
+        (i = this.getActiveMode()) == null || i.onLongPress(n);
       }
     };
-    this.mouseInput = new Ue(e, s), this.touchInput = new je(e, s), this.keyboardInput = new G({
-      onKeyDown: (i, n) => {
+    this.mouseInput = new Qe(e, r), this.touchInput = new st(e, r), this.keyboardInput = new q({
+      onKeyDown: (n, i) => {
         var o;
-        (o = this.getActiveMode()) == null || o.onKeyDown(i, n);
+        (o = this.getActiveMode()) == null || o.onKeyDown(n, i);
       }
     });
   }
@@ -1177,32 +1277,38 @@ class Xe {
     this.mouseInput.destroy(), this.touchInput.destroy(), this.keyboardInput.destroy();
   }
 }
-const v = {
+const b = {
   FEATURES: "libre-draw-features",
   PREVIEW: "libre-draw-preview",
   EDIT_VERTICES: "libre-draw-edit-vertices"
-}, B = {
+}, O = {
   type: "FeatureCollection",
   features: []
 };
-class We {
+class nt {
   constructor(e) {
     this.initialized = !1, this.map = e;
   }
+  /**
+   * Whether all required GeoJSON sources exist on the current style.
+   */
+  hasAllSources() {
+    return !!(this.map.getSource(b.FEATURES) && this.map.getSource(b.PREVIEW) && this.map.getSource(b.EDIT_VERTICES));
+  }
   /**
    * Initialize the GeoJSON sources on the map.
    * Should be called after the map style has loaded.
    */
   initialize() {
-    this.initialized || (this.map.getSource(v.FEATURES) || this.map.addSource(v.FEATURES, {
+    this.initialized && this.hasAllSources() || (this.map.getSource(b.FEATURES) || this.map.addSource(b.FEATURES, {
       type: "geojson",
-      data: B
-    }), this.map.getSource(v.PREVIEW) || this.map.addSource(v.PREVIEW, {
+      data: O
+    }), this.map.getSource(b.PREVIEW) || this.map.addSource(b.PREVIEW, {
       type: "geojson",
-      data: B
-    }), this.map.getSource(v.EDIT_VERTICES) || this.map.addSource(v.EDIT_VERTICES, {
+      data: O
+    }), this.map.getSource(b.EDIT_VERTICES) || this.map.addSource(b.EDIT_VERTICES, {
       type: "geojson",
-      data: B
+      data: O
     }), this.initialized = !0);
   }
   /**
@@ -1210,7 +1316,7 @@ class We {
    * @param data - A GeoJSON FeatureCollection.
    */
   updateFeatures(e) {
-    const t = this.map.getSource(v.FEATURES);
+    const t = this.map.getSource(b.FEATURES);
     t && t.setData(e);
   }
   /**
@@ -1218,36 +1324,106 @@ class We {
    * @param data - A GeoJSON FeatureCollection.
    */
   updatePreview(e) {
-    const t = this.map.getSource(v.PREVIEW);
+    const t = this.map.getSource(b.PREVIEW);
     t && t.setData(e);
   }
   /**
    * Clear the preview source.
    */
   clearPreview() {
-    this.updatePreview(B);
+    this.updatePreview(O);
   }
   /**
    * Update the edit vertices source with new GeoJSON data.
    * @param data - A GeoJSON FeatureCollection of Point features.
    */
   updateEditVertices(e) {
-    const t = this.map.getSource(v.EDIT_VERTICES);
+    const t = this.map.getSource(b.EDIT_VERTICES);
     t && t.setData(e);
   }
   /**
    * Clear the edit vertices source.
    */
   clearEditVertices() {
-    this.updateEditVertices(B);
+    this.updateEditVertices(O);
   }
   /**
    * Remove all sources from the map.
    */
   destroy() {
-    this.map.getSource(v.FEATURES) && this.map.removeSource(v.FEATURES), this.map.getSource(v.PREVIEW) && this.map.removeSource(v.PREVIEW), this.map.getSource(v.EDIT_VERTICES) && this.map.removeSource(v.EDIT_VERTICES), this.initialized = !1;
+    this.map.getSource(b.FEATURES) && this.map.removeSource(b.FEATURES), this.map.getSource(b.PREVIEW) && this.map.removeSource(b.PREVIEW), this.map.getSource(b.EDIT_VERTICES) && this.map.removeSource(b.EDIT_VERTICES), this.initialized = !1;
   }
 }
+const N = {
+  fill: {
+    color: "#3bb2d0",
+    opacity: 0.2,
+    selectedColor: "#fbb03b",
+    selectedOpacity: 0.4
+  },
+  outline: {
+    color: "#3bb2d0",
+    width: 2,
+    selectedColor: "#fbb03b"
+  },
+  vertex: {
+    color: "#ffffff",
+    strokeColor: "#3bb2d0",
+    strokeWidth: 2,
+    radius: 4
+  },
+  preview: {
+    color: "#3bb2d0",
+    width: 2,
+    dasharray: [2, 2]
+  },
+  editVertex: {
+    color: "#ffffff",
+    strokeColor: "#3bb2d0",
+    strokeWidth: 2,
+    radius: 5,
+    highlightedColor: "#ff4444",
+    highlightedStrokeColor: "#cc0000",
+    highlightedRadius: 7
+  },
+  midpoint: {
+    color: "#3bb2d0",
+    opacity: 0.5,
+    radius: 3
+  }
+};
+function ot(s) {
+  var e;
+  return {
+    fill: {
+      ...N.fill,
+      ...s == null ? void 0 : s.fill
+    },
+    outline: {
+      ...N.outline,
+      ...s == null ? void 0 : s.outline
+    },
+    vertex: {
+      ...N.vertex,
+      ...s == null ? void 0 : s.vertex
+    },
+    preview: {
+      ...N.preview,
+      ...s == null ? void 0 : s.preview,
+      dasharray: [
+        ...((e = s == null ? void 0 : s.preview) == null ? void 0 : e.dasharray) ?? N.preview.dasharray
+      ]
+    },
+    editVertex: {
+      ...N.editVertex,
+      ...s == null ? void 0 : s.editVertex
+    },
+    midpoint: {
+      ...N.midpoint,
+      ...s == null ? void 0 : s.midpoint
+    }
+  };
+}
 const S = {
   FILL: "libre-draw-fill",
   OUTLINE: "libre-draw-outline",
@@ -1255,124 +1431,116 @@ const S = {
   PREVIEW: "libre-draw-preview",
   EDIT_VERTICES: "libre-draw-edit-vertices",
   EDIT_MIDPOINTS: "libre-draw-edit-midpoints"
-}, w = {
-  FILL: "#3bb2d0",
-  FILL_OPACITY: 0.2,
-  FILL_SELECTED: "#fbb03b",
-  FILL_SELECTED_OPACITY: 0.4,
-  OUTLINE: "#3bb2d0",
-  OUTLINE_WIDTH: 2,
-  OUTLINE_SELECTED: "#fbb03b",
-  VERTEX_COLOR: "#ffffff",
-  VERTEX_STROKE: "#3bb2d0",
-  VERTEX_RADIUS: 4,
-  PREVIEW_OUTLINE: "#3bb2d0",
-  PREVIEW_OUTLINE_DASH: [2, 2],
-  EDIT_VERTEX_COLOR: "#ffffff",
-  EDIT_VERTEX_STROKE: "#3bb2d0",
-  EDIT_VERTEX_RADIUS: 5,
-  EDIT_VERTEX_STROKE_WIDTH: 2,
-  MIDPOINT_COLOR: "#3bb2d0",
-  MIDPOINT_OPACITY: 0.5,
-  MIDPOINT_RADIUS: 3
 };
-class Ke {
-  constructor(e, t) {
-    this.selectedIds = /* @__PURE__ */ new Set(), this.pendingRender = !1, this.pendingFeatures = null, this.initialized = !1, this.map = e, this.sourceManager = t;
+class at {
+  constructor(e, t, r) {
+    this.selectedIds = /* @__PURE__ */ new Set(), this.pendingRender = !1, this.pendingFeatures = null, this.initialized = !1, this.map = e, this.sourceManager = t, this.style = ot(r);
+  }
+  /**
+   * Whether render layers and sources are ready on the current style.
+   */
+  isReadyForCurrentStyle() {
+    return this.sourceManager.hasAllSources() && this.hasAllLayers();
   }
   /**
    * Initialize rendering layers on the map.
    * Should be called after the map style and sources are ready.
    */
   initialize() {
-    this.initialized || (this.sourceManager.initialize(), this.map.getLayer(S.FILL) || this.map.addLayer({
-      id: S.FILL,
-      type: "fill",
-      source: v.FEATURES,
-      paint: {
-        "fill-color": [
-          "case",
-          ["boolean", ["get", "_selected"], !1],
-          w.FILL_SELECTED,
-          w.FILL
-        ],
-        "fill-opacity": [
-          "case",
-          ["boolean", ["get", "_selected"], !1],
-          w.FILL_SELECTED_OPACITY,
-          w.FILL_OPACITY
-        ]
-      }
-    }), this.map.getLayer(S.OUTLINE) || this.map.addLayer({
-      id: S.OUTLINE,
-      type: "line",
-      source: v.FEATURES,
-      paint: {
-        "line-color": [
-          "case",
-          ["boolean", ["get", "_selected"], !1],
-          w.OUTLINE_SELECTED,
-          w.OUTLINE
-        ],
-        "line-width": w.OUTLINE_WIDTH
-      }
-    }), this.map.getLayer(S.VERTICES) || this.map.addLayer({
-      id: S.VERTICES,
-      type: "circle",
-      source: v.FEATURES,
-      filter: ["==", "$type", "Point"],
-      paint: {
-        "circle-radius": w.VERTEX_RADIUS,
-        "circle-color": w.VERTEX_COLOR,
-        "circle-stroke-color": w.VERTEX_STROKE,
-        "circle-stroke-width": 2
-      }
-    }), this.map.getLayer(S.PREVIEW) || this.map.addLayer({
-      id: S.PREVIEW,
-      type: "line",
-      source: v.PREVIEW,
-      paint: {
-        "line-color": w.PREVIEW_OUTLINE,
-        "line-width": 2,
-        "line-dasharray": w.PREVIEW_OUTLINE_DASH
-      }
-    }), this.map.getLayer(S.EDIT_MIDPOINTS) || this.map.addLayer({
-      id: S.EDIT_MIDPOINTS,
-      type: "circle",
-      source: v.EDIT_VERTICES,
-      filter: ["==", ["get", "_type"], "midpoint"],
-      paint: {
-        "circle-radius": w.MIDPOINT_RADIUS,
-        "circle-color": w.MIDPOINT_COLOR,
-        "circle-opacity": w.MIDPOINT_OPACITY
-      }
-    }), this.map.getLayer(S.EDIT_VERTICES) || this.map.addLayer({
-      id: S.EDIT_VERTICES,
-      type: "circle",
-      source: v.EDIT_VERTICES,
-      filter: ["==", ["get", "_type"], "vertex"],
-      paint: {
-        "circle-radius": [
-          "case",
-          ["boolean", ["get", "_highlighted"], !1],
-          7,
-          w.EDIT_VERTEX_RADIUS
-        ],
-        "circle-color": [
-          "case",
-          ["boolean", ["get", "_highlighted"], !1],
-          "#ff4444",
-          w.EDIT_VERTEX_COLOR
-        ],
-        "circle-stroke-color": [
-          "case",
-          ["boolean", ["get", "_highlighted"], !1],
-          "#cc0000",
-          w.EDIT_VERTEX_STROKE
-        ],
-        "circle-stroke-width": w.EDIT_VERTEX_STROKE_WIDTH
+    if (!(this.initialized && this.isReadyForCurrentStyle())) {
+      if (this.sourceManager.initialize(), this.hasAllLayers()) {
+        this.initialized = !0;
+        return;
       }
-    }), this.initialized = !0);
+      this.map.getLayer(S.FILL) || this.map.addLayer({
+        id: S.FILL,
+        type: "fill",
+        source: b.FEATURES,
+        paint: {
+          "fill-color": [
+            "case",
+            ["boolean", ["get", "_selected"], !1],
+            this.style.fill.selectedColor,
+            this.style.fill.color
+          ],
+          "fill-opacity": [
+            "case",
+            ["boolean", ["get", "_selected"], !1],
+            this.style.fill.selectedOpacity,
+            this.style.fill.opacity
+          ]
+        }
+      }), this.map.getLayer(S.OUTLINE) || this.map.addLayer({
+        id: S.OUTLINE,
+        type: "line",
+        source: b.FEATURES,
+        paint: {
+          "line-color": [
+            "case",
+            ["boolean", ["get", "_selected"], !1],
+            this.style.outline.selectedColor,
+            this.style.outline.color
+          ],
+          "line-width": this.style.outline.width
+        }
+      }), this.map.getLayer(S.VERTICES) || this.map.addLayer({
+        id: S.VERTICES,
+        type: "circle",
+        source: b.FEATURES,
+        filter: ["==", "$type", "Point"],
+        paint: {
+          "circle-radius": this.style.vertex.radius,
+          "circle-color": this.style.vertex.color,
+          "circle-stroke-color": this.style.vertex.strokeColor,
+          "circle-stroke-width": this.style.vertex.strokeWidth
+        }
+      }), this.map.getLayer(S.PREVIEW) || this.map.addLayer({
+        id: S.PREVIEW,
+        type: "line",
+        source: b.PREVIEW,
+        paint: {
+          "line-color": this.style.preview.color,
+          "line-width": this.style.preview.width,
+          "line-dasharray": this.style.preview.dasharray
+        }
+      }), this.map.getLayer(S.EDIT_MIDPOINTS) || this.map.addLayer({
+        id: S.EDIT_MIDPOINTS,
+        type: "circle",
+        source: b.EDIT_VERTICES,
+        filter: ["==", ["get", "_type"], "midpoint"],
+        paint: {
+          "circle-radius": this.style.midpoint.radius,
+          "circle-color": this.style.midpoint.color,
+          "circle-opacity": this.style.midpoint.opacity
+        }
+      }), this.map.getLayer(S.EDIT_VERTICES) || this.map.addLayer({
+        id: S.EDIT_VERTICES,
+        type: "circle",
+        source: b.EDIT_VERTICES,
+        filter: ["==", ["get", "_type"], "vertex"],
+        paint: {
+          "circle-radius": [
+            "case",
+            ["boolean", ["get", "_highlighted"], !1],
+            this.style.editVertex.highlightedRadius,
+            this.style.editVertex.radius
+          ],
+          "circle-color": [
+            "case",
+            ["boolean", ["get", "_highlighted"], !1],
+            this.style.editVertex.highlightedColor,
+            this.style.editVertex.color
+          ],
+          "circle-stroke-color": [
+            "case",
+            ["boolean", ["get", "_highlighted"], !1],
+            this.style.editVertex.highlightedStrokeColor,
+            this.style.editVertex.strokeColor
+          ],
+          "circle-stroke-width": this.style.editVertex.strokeWidth
+        }
+      }), this.initialized = !0;
+    }
   }
   /**
    * Render features to the map. Uses requestAnimationFrame
@@ -1394,8 +1562,8 @@ class Ke {
       return;
     }
     const t = e.map(
-      (i) => [i[0], i[1]]
-    ), s = {
+      (n) => [n[0], n[1]]
+    ), r = {
       type: "FeatureCollection",
       features: [
         {
@@ -1408,7 +1576,7 @@ class Ke {
         }
       ]
     };
-    this.sourceManager.updatePreview(s);
+    this.sourceManager.updatePreview(r);
   }
   /**
    * Clear the drawing preview.
@@ -1422,28 +1590,28 @@ class Ke {
    * @param midpoints - The edge midpoint positions.
    * @param highlightIndex - Optional index of the vertex to highlight.
    */
-  renderVertices(e, t, s) {
-    const i = [];
-    for (let n = 0; n < e.length; n++) {
-      const o = e[n];
-      i.push({
+  renderVertices(e, t, r) {
+    const n = [];
+    for (let i = 0; i < e.length; i++) {
+      const o = e[i];
+      n.push({
         type: "Feature",
         properties: {
           _type: "vertex",
-          _highlighted: n === s
+          _highlighted: i === r
         },
         geometry: { type: "Point", coordinates: [o[0], o[1]] }
       });
     }
-    for (const n of t)
-      i.push({
+    for (const i of t)
+      n.push({
         type: "Feature",
         properties: { _type: "midpoint" },
-        geometry: { type: "Point", coordinates: [n[0], n[1]] }
+        geometry: { type: "Point", coordinates: [i[0], i[1]] }
       });
     this.sourceManager.updateEditVertices({
       type: "FeatureCollection",
-      features: i
+      features: n
     });
   }
   /**
@@ -1484,22 +1652,28 @@ class Ke {
     const t = {
       type: "FeatureCollection",
       features: this.pendingFeatures.map(
-        (s) => ({
+        (r) => ({
           type: "Feature",
-          id: s.id,
+          id: r.id,
           properties: {
-            ...s.properties,
-            _id: s.id,
-            _selected: this.selectedIds.has(s.id)
+            ...r.properties,
+            _id: r.id,
+            _selected: this.selectedIds.has(r.id)
           },
-          geometry: s.geometry
+          geometry: r.geometry
         })
       )
     };
     this.sourceManager.updateFeatures(t), this.pendingFeatures = null;
   }
+  /**
+   * Whether all draw layers exist on the current style.
+   */
+  hasAllLayers() {
+    return !!(this.map.getLayer(S.FILL) && this.map.getLayer(S.OUTLINE) && this.map.getLayer(S.VERTICES) && this.map.getLayer(S.PREVIEW) && this.map.getLayer(S.EDIT_MIDPOINTS) && this.map.getLayer(S.EDIT_VERTICES));
+  }
 }
-class $e {
+class lt {
   constructor(e) {
     this.options = e, this.element = document.createElement("button"), this.element.type = "button", this.element.title = e.title, this.element.setAttribute("aria-label", e.title), this.element.dataset.libreDrawButton = e.id, this.applyStyles(), this.iconContainer = document.createElement("span"), this.iconContainer.style.display = "flex", this.iconContainer.style.alignItems = "center", this.iconContainer.style.justifyContent = "center", this.setIcon(e.icon), this.element.appendChild(this.iconContainer), this.element.addEventListener("click", (t) => {
       t.preventDefault(), t.stopPropagation(), this.element.disabled || e.onClick();
@@ -1535,11 +1709,11 @@ class $e {
    * Set the icon SVG content using DOM parsing (no innerHTML).
    */
   setIcon(e) {
-    const i = new DOMParser().parseFromString(e, "image/svg+xml").documentElement;
+    const n = new DOMParser().parseFromString(e, "image/svg+xml").documentElement;
     for (; this.iconContainer.firstChild; )
       this.iconContainer.removeChild(this.iconContainer.firstChild);
     this.iconContainer.appendChild(
-      document.importNode(i, !0)
+      document.importNode(n, !0)
     );
   }
   /**
@@ -1550,24 +1724,24 @@ class $e {
     e.display = "flex", e.alignItems = "center", e.justifyContent = "center", e.width = "44px", e.height = "44px", e.padding = "0", e.margin = "0", e.border = "1px solid #ddd", e.borderRadius = "4px", e.backgroundColor = "#ffffff", e.color = "#333333", e.cursor = "pointer", e.outline = "none", e.transition = "background-color 0.15s, color 0.15s", e.boxSizing = "border-box";
   }
 }
-const Ye = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l8.5 6.2-3.2 9.8H6.7L3.5 8.2z"/></svg>', Ge = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg>', Je = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>', qe = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 00-4-4H4"/></svg>', Qe = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 14 20 9 15 4"/><path d="M4 20v-7a4 4 0 014-4h12"/></svg>', Ze = {
+const ht = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l8.5 6.2-3.2 9.8H6.7L3.5 8.2z"/></svg>', ct = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg>', dt = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>', ut = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 00-4-4H4"/></svg>', gt = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 14 20 9 15 4"/><path d="M4 20v-7a4 4 0 014-4h12"/></svg>', ft = {
   draw: !0,
   select: !0,
   delete: !0,
   undo: !0,
   redo: !0
 };
-class et {
-  constructor(e, t, s = {}) {
-    this.buttons = /* @__PURE__ */ new Map(), this.map = e, this.callbacks = t, this.options = s, this.container = document.createElement("div"), this.container.className = "libre-draw-toolbar", this.applyContainerStyles(), this.createButtons(), this.mount();
+class pt {
+  constructor(e, t, r = {}) {
+    this.buttons = /* @__PURE__ */ new Map(), this.map = e, this.callbacks = t, this.options = r, this.container = document.createElement("div"), this.container.className = "libre-draw-toolbar", this.applyContainerStyles(), this.createButtons(), this.mount();
   }
   /**
    * Update the active mode displayed in the toolbar.
    * @param mode - The active mode name ('idle', 'draw', 'select').
    */
   setActiveMode(e) {
-    const t = this.buttons.get("draw"), s = this.buttons.get("select");
-    t && t.setActive(e === "draw"), s && s.setActive(e === "select");
+    const t = this.buttons.get("draw"), r = this.buttons.get("select");
+    t && t.setActive(e === "draw"), r && r.setActive(e === "select");
   }
   /**
    * Update the undo/redo button states.
@@ -1575,8 +1749,8 @@ class et {
    * @param canRedo - Whether redo is available.
    */
   setHistoryState(e, t) {
-    const s = this.buttons.get("undo"), i = this.buttons.get("redo");
-    s && s.setDisabled(!e), i && i.setDisabled(!t);
+    const r = this.buttons.get("undo"), n = this.buttons.get("redo");
+    r && r.setDisabled(!e), n && n.setDisabled(!t);
   }
   /**
    * Remove the toolbar from the map and clean up.
@@ -1591,36 +1765,36 @@ class et {
    */
   createButtons() {
     const e = {
-      ...Ze,
+      ...ft,
       ...this.options.controls
     };
-    e.draw && this.addButton("draw", Ye, "Draw polygon", () => {
+    e.draw && this.addButton("draw", ht, "Draw polygon", () => {
       this.callbacks.onDrawClick();
-    }, !0), e.select && this.addButton("select", Ge, "Select feature", () => {
+    }, !0), e.select && this.addButton("select", ct, "Select feature", () => {
       this.callbacks.onSelectClick();
-    }, !0), e.delete && this.addButton("delete", Je, "Delete selected", () => {
+    }, !0), e.delete && this.addButton("delete", dt, "Delete selected", () => {
       this.callbacks.onDeleteClick();
-    }), e.undo && this.addButton("undo", qe, "Undo", () => {
+    }), e.undo && this.addButton("undo", ut, "Undo", () => {
       this.callbacks.onUndoClick();
-    }), e.redo && this.addButton("redo", Qe, "Redo", () => {
+    }), e.redo && this.addButton("redo", gt, "Redo", () => {
       this.callbacks.onRedoClick();
     });
   }
   /**
    * Create a button and add it to the toolbar.
    */
-  addButton(e, t, s, i, n) {
-    const o = new $e({ id: e, icon: t, title: s, onClick: i, isToggle: n });
+  addButton(e, t, r, n, i) {
+    const o = new lt({ id: e, icon: t, title: r, onClick: n, isToggle: i });
     this.buttons.set(e, o), this.container.appendChild(o.getElement());
   }
   /**
    * Mount the toolbar container to the map's control container.
    */
   mount() {
-    const e = this.options.position || "top-right", t = this.map.getContainer(), s = t.querySelector(
+    const e = this.options.position || "top-right", t = this.map.getContainer(), r = t.querySelector(
       `.maplibregl-ctrl-${e}`
     );
-    s ? s.appendChild(this.container) : t.appendChild(this.container);
+    r ? r.appendChild(this.container) : t.appendChild(this.container);
   }
   /**
    * Apply CSS styles to the toolbar container.
@@ -1630,7 +1804,7 @@ class et {
     e.display = "flex", e.flexDirection = "column", e.gap = "4px", e.padding = "4px", e.backgroundColor = "rgba(255, 255, 255, 0.9)", e.borderRadius = "4px", e.boxShadow = "0 1px 4px rgba(0, 0, 0, 0.3)", e.zIndex = "1", e.pointerEvents = "auto";
   }
 }
-class tt {
+class yt {
   /**
    * Create a new LibreDraw instance attached to a MapLibre GL JS map.
    *
@@ -1652,55 +1826,59 @@ class tt {
    * ```
    */
   constructor(e, t = {}) {
-    this.toolbar = null, this.destroyed = !1, this.map = e, this.eventBus = new ge(), this.featureStore = new R(), this.historyManager = new fe(t.historyLimit ?? 100), this.modeManager = new pe(), this.sourceManager = new We(e), this.renderManager = new Ke(e, this.sourceManager);
-    const s = new Se({
-      addFeatureToStore: (i) => this.featureStore.add(i),
-      pushToHistory: (i) => {
-        this.historyManager.push(i), this.updateToolbarHistoryState();
+    this.toolbar = null, this.destroyed = !1, this.inputEnabled = !1, this.handleStyleData = () => {
+      this.destroyed || !this.map.isStyleLoaded() || this.renderManager.isReadyForCurrentStyle() || (this.renderManager.initialize(), this.renderAllFeatures(), this.modeManager.getMode() === "select" ? this.selectMode.refreshVertexHandles() : this.renderManager.clearVertices());
+    }, this.map = e, this.eventBus = new ve(), this.featureStore = new we(), this.historyManager = new Se(t.historyLimit ?? 100), this.modeManager = new be(), this.sourceManager = new nt(e), this.renderManager = new at(
+      e,
+      this.sourceManager,
+      t.style
+    );
+    const r = {
+      store: {
+        add: (o) => this.featureStore.add(o),
+        update: (o, a) => this.featureStore.update(o, a),
+        remove: (o) => this.featureStore.remove(o),
+        getById: (o) => this.featureStore.getById(o),
+        getAll: () => this.featureStore.getAll()
       },
-      emitEvent: (i, n) => this.eventBus.emit(i, n),
-      renderPreview: (i) => this.renderManager.renderPreview(i),
-      clearPreview: () => this.renderManager.clearPreview(),
-      renderFeatures: () => this.renderAllFeatures(),
-      getScreenPoint: (i) => {
-        const n = e.project([i.lng, i.lat]);
-        return { x: n.x, y: n.y };
-      }
-    });
-    if (this.selectMode = new Oe(
-      {
-        removeFeatureFromStore: (i) => this.featureStore.remove(i),
-        pushToHistory: (i) => {
-          this.historyManager.push(i), this.updateToolbarHistoryState();
-        },
-        emitEvent: (i, n) => this.eventBus.emit(i, n),
+      history: {
+        push: (o) => {
+          this.historyManager.push(o), this.updateToolbarHistoryState();
+        }
+      },
+      events: {
+        emit: (o, a) => this.eventBus.emit(o, a)
+      },
+      render: {
         renderFeatures: () => this.renderAllFeatures(),
-        getFeatureById: (i) => this.featureStore.getById(i),
-        getAllFeatures: () => this.featureStore.getAll(),
-        getScreenPoint: (i) => {
-          const n = e.project([i.lng, i.lat]);
-          return { x: n.x, y: n.y };
-        },
-        updateFeatureInStore: (i, n) => this.featureStore.update(i, n),
-        renderVertices: (i, n, o, l) => this.renderManager.renderVertices(n, o, l),
+        renderPreview: (o) => this.renderManager.renderPreview(o),
+        clearPreview: () => this.renderManager.clearPreview(),
+        renderVertices: (o, a, h) => this.renderManager.renderVertices(o, a, h),
         clearVertices: () => this.renderManager.clearVertices(),
-        setDragPan: (i) => {
-          i ? e.dragPan.enable() : e.dragPan.disable();
-        }
+        setSelectedIds: (o) => this.renderManager.setSelectedIds(o)
       },
-      (i) => {
-        this.renderManager.setSelectedIds(i);
+      getScreenPoint: (o) => {
+        const a = e.project([o.lng, o.lat]);
+        return { x: a.x, y: a.y };
+      },
+      setDragPan: (o) => {
+        o ? e.dragPan.enable() : e.dragPan.disable();
       }
-    ), this.modeManager.registerMode("idle", new Ie()), this.modeManager.registerMode("draw", s), this.modeManager.registerMode("select", this.selectMode), this.modeManager.setOnModeChange((i, n) => {
-      this.eventBus.emit("modechange", { mode: i, previousMode: n }), this.toolbar && this.toolbar.setActiveMode(i), i === "draw" ? (e.dragPan.disable(), e.doubleClickZoom.disable()) : i === "select" ? e.doubleClickZoom.disable() : (e.dragPan.enable(), e.doubleClickZoom.enable());
-    }), this.inputHandler = new Xe(
+    }, n = new Fe(r);
+    this.selectMode = new Ze(r), this.modeManager.registerMode("idle", new Ce()), this.modeManager.registerMode("draw", n), this.modeManager.registerMode("select", this.selectMode), this.modeManager.setOnModeChange((o, a) => {
+      this.eventBus.emit("modechange", { mode: o, previousMode: a }), this.toolbar && this.toolbar.setActiveMode(o);
+      const h = this.modeManager.getCurrentMode();
+      h && this.applyMapInteractions(h.mapInteractions());
+    });
+    const i = this.modeManager.getCurrentMode();
+    if (i && this.applyMapInteractions(i.mapInteractions()), this.inputHandler = new it(
       e,
       () => this.modeManager.getCurrentMode()
     ), t.toolbar !== !1 && t.toolbar !== void 0) {
-      const i = typeof t.toolbar == "object" ? t.toolbar : {};
-      this.createToolbar(i);
+      const o = typeof t.toolbar == "object" ? t.toolbar : {};
+      this.createToolbar(o);
     }
-    e.isStyleLoaded() ? this.initialize() : e.once("load", () => {
+    e.on("styledata", this.handleStyleData), e.isStyleLoaded() ? this.initialize() : e.once("load", () => {
       this.initialize();
     });
   }
@@ -1811,8 +1989,8 @@ class tt {
    */
   setFeatures(e) {
     this.assertNotDestroyed();
-    const t = Ee(e);
-    this.featureStore.setAll(t.features), this.historyManager.clear(), this.renderAllFeatures(), this.updateToolbarHistoryState();
+    const t = Pe(e);
+    this.featureStore.setAll(t.features), this.resetSelectionState(), this.historyManager.clear(), this.renderAllFeatures(), this.updateToolbarHistoryState();
   }
   /**
    * Add features to the store from an array of GeoJSON Feature objects.
@@ -1840,8 +2018,8 @@ class tt {
   addFeatures(e) {
     this.assertNotDestroyed();
     for (const t of e) {
-      const s = le(t);
-      this.featureStore.add(s);
+      const r = ce(t);
+      this.featureStore.add(r);
     }
     this.renderAllFeatures();
   }
@@ -1910,8 +2088,8 @@ class tt {
     const t = this.featureStore.getById(e);
     if (!t) return;
     this.selectMode.getSelectedIds().includes(e) && this.selectMode.clearSelection(), this.featureStore.remove(e);
-    const i = new oe(t);
-    return this.historyManager.push(i), this.eventBus.emit("delete", { feature: t }), this.renderAllFeatures(), this.updateToolbarHistoryState(), t;
+    const n = new le(t);
+    return this.historyManager.push(n), this.eventBus.emit("delete", { feature: v(t) }), this.renderAllFeatures(), this.updateToolbarHistoryState(), t;
   }
   /**
    * Programmatically select a feature by its ID.
@@ -2057,13 +2235,13 @@ class tt {
    * ```
    */
   destroy() {
-    this.destroyed || (this.destroyed = !0, this.modeManager.setMode("idle"), this.inputHandler.destroy(), this.renderManager.destroy(), this.eventBus.removeAllListeners(), this.historyManager.clear(), this.featureStore.clear(), this.toolbar && (this.toolbar.destroy(), this.toolbar = null));
+    this.destroyed || (this.destroyed = !0, this.map.off("styledata", this.handleStyleData), this.modeManager.setMode("idle"), this.inputHandler.destroy(), this.renderManager.destroy(), this.eventBus.removeAllListeners(), this.historyManager.clear(), this.featureStore.clear(), this.toolbar && (this.toolbar.destroy(), this.toolbar = null));
   }
   /**
    * Initialize rendering and input handling after the map is ready.
    */
   initialize() {
-    this.destroyed || (this.renderManager.initialize(), this.inputHandler.enable());
+    this.destroyed || (this.renderManager.initialize(), this.inputEnabled || (this.inputHandler.enable(), this.inputEnabled = !0), this.renderAllFeatures());
   }
   /**
    * Render all features from the store to the map.
@@ -2076,7 +2254,7 @@ class tt {
    * Create the toolbar UI.
    */
   createToolbar(e) {
-    this.toolbar = new et(
+    this.toolbar = new pt(
       this.map,
       {
         onDrawClick: () => {
@@ -2092,8 +2270,8 @@ class tt {
         onDeleteClick: () => {
           if (this.modeManager.getMode() === "select") {
             const t = this.selectMode.getSelectedIds();
-            for (const s of t)
-              this.deleteFeature(s);
+            for (const r of t)
+              this.deleteFeature(r);
           }
         },
         onUndoClick: () => {
@@ -2109,6 +2287,12 @@ class tt {
       this.historyManager.canRedo()
     );
   }
+  /**
+   * Apply map interaction settings declared by the active mode.
+   */
+  applyMapInteractions(e) {
+    e.dragPan ? this.map.dragPan.enable() : this.map.dragPan.disable(), e.doubleClickZoom ? this.map.doubleClickZoom.enable() : this.map.doubleClickZoom.disable();
+  }
   /**
    * Update toolbar undo/redo button states.
    */
@@ -2118,6 +2302,12 @@ class tt {
       this.historyManager.canRedo()
     );
   }
+  /**
+   * Clear selection-related rendering and state.
+   */
+  resetSelectionState() {
+    this.selectMode.clearSelection(), this.renderManager.setSelectedIds([]), this.renderManager.clearVertices();
+  }
   /**
    * Assert that this instance has not been destroyed.
    * @throws LibreDrawError if destroyed.
@@ -2130,7 +2320,9 @@ class tt {
   }
 }
 export {
-  tt as LibreDraw,
-  E as LibreDrawError
+  N as DEFAULT_STYLE_CONFIG,
+  yt as LibreDraw,
+  E as LibreDrawError,
+  ot as mergeStyleConfig
 };
 //# sourceMappingURL=libre-draw.js.map