leaflet-anvil 0.2.1 → 0.2.2

package/dist/index.mjs

@@ -73,6 +73,49 @@ var ModeManager = class {
 // src/modes/draw-polygon-mode.ts
 import * as L3 from "leaflet";
 
+// src/utils/mode-styles.ts
+function getModePathOptions(options, mode, defaults = {}) {
+  return {
+    ...defaults,
+    ...options.pathOptions || {},
+    ...options.modeStyles?.[mode]?.pathOptions || {}
+  };
+}
+function getModeGhostPathOptions(options, mode, defaults = {}) {
+  return {
+    ...getModePathOptions(options, mode),
+    ...defaults,
+    ...options.ghostPathOptions || {},
+    ...options.modeStyles?.[mode]?.ghostPathOptions || {}
+  };
+}
+function getModeVertexOptions(options, mode, defaults = {}) {
+  return {
+    ...defaults,
+    ...options.vertexOptions || {},
+    ...options.modeStyles?.[mode]?.vertexOptions || {}
+  };
+}
+function getModeHandleOptions(options, mode, defaults = {}) {
+  const pathOptions = getModePathOptions(options, mode);
+  return {
+    radius: 5,
+    color: pathOptions.color || "#3388ff",
+    weight: 2,
+    fillColor: "#fff",
+    fillOpacity: 1,
+    ...defaults,
+    ...options.modeStyles?.[mode]?.handleOptions || {}
+  };
+}
+function getModeSelectionPathOptions(options, mode, base = {}, defaults = {}) {
+  return {
+    ...base,
+    ...defaults,
+    ...options.modeStyles?.[mode]?.selectionPathOptions || {}
+  };
+}
+
 // src/utils/snapping.ts
 import * as L from "leaflet";
 function getSnapLatLng(map, latlng, store, options, additionalPoints = [], skipLayer) {
@@ -233,11 +276,14 @@ var DrawPolygonMode = class {
     const snapLatLng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options, this.points) : e.latlng;
     const lastPoint = this.points[this.points.length - 1];
     if (!this.ghostLine) {
-      this.ghostLine = L3.polyline([lastPoint, snapLatLng], {
-        dashArray: "5, 5",
-        color: "#3388ff",
-        weight: 2
-      }).addTo(this.map);
+      this.ghostLine = L3.polyline(
+        [lastPoint, snapLatLng],
+        getModeGhostPathOptions(this.options, "polygon" /* Polygon */, {
+          dashArray: "5, 5",
+          color: "#3388ff",
+          weight: 2
+        })
+      ).addTo(this.map);
     } else {
       this.ghostLine.setLatLngs([lastPoint, snapLatLng]);
     }
@@ -251,26 +297,32 @@ var DrawPolygonMode = class {
     if (this.polyline) {
       this.polyline.setLatLngs(this.points);
     } else {
-      this.polyline = L3.polyline(this.points, { color: "#3388ff" }).addTo(this.map);
+      this.polyline = L3.polyline(
+        this.points,
+        getModePathOptions(this.options, "polygon" /* Polygon */, { color: "#3388ff" })
+      ).addTo(this.map);
     }
     if (this.points.length === 1 && this.markers.length === 0) {
-      const marker4 = L3.circleMarker(this.points[0], {
-        radius: 5,
-        fillColor: "#fff",
-        fillOpacity: 1,
-        color: "#3388ff",
-        weight: 2
-      }).addTo(this.map);
-      marker4.on("click", (e) => {
+      const marker3 = L3.circleMarker(
+        this.points[0],
+        getModeHandleOptions(this.options, "polygon" /* Polygon */, {
+          radius: 5,
+          color: "#3388ff"
+        })
+      ).addTo(this.map);
+      marker3.on("click", (e) => {
         L3.DomEvent.stopPropagation(e);
         this.finish();
       });
-      this.markers.push(marker4);
+      this.markers.push(marker3);
     }
   }
   finish() {
     if (this.points.length < 3) return;
-    const polygon7 = L3.polygon(this.points).addTo(this.map);
+    const polygon7 = L3.polygon(
+      this.points,
+      getModePathOptions(this.options, "polygon" /* Polygon */)
+    ).addTo(this.map);
     this.map.fire(ANVIL_EVENTS.CREATED, { layer: polygon7 });
     this.reset();
   }
@@ -326,11 +378,14 @@ var DrawPolylineMode = class {
     const snapLatLng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options, this.points) : e.latlng;
     const lastPoint = this.points[this.points.length - 1];
     if (!this.ghostLine) {
-      this.ghostLine = L4.polyline([lastPoint, e.latlng], {
-        dashArray: "5, 5",
-        color: "#3388ff",
-        weight: 2
-      }).addTo(this.map);
+      this.ghostLine = L4.polyline(
+        [lastPoint, e.latlng],
+        getModeGhostPathOptions(this.options, "polyline" /* Polyline */, {
+          dashArray: "5, 5",
+          color: "#3388ff",
+          weight: 2
+        })
+      ).addTo(this.map);
     } else {
       this.ghostLine.setLatLngs([lastPoint, snapLatLng]);
     }
@@ -350,12 +405,18 @@ var DrawPolylineMode = class {
     if (this.polyline) {
       this.polyline.setLatLngs(this.points);
     } else {
-      this.polyline = L4.polyline(this.points, { color: "#3388ff" }).addTo(this.map);
+      this.polyline = L4.polyline(
+        this.points,
+        getModePathOptions(this.options, "polyline" /* Polyline */, { color: "#3388ff" })
+      ).addTo(this.map);
     }
   }
   finish() {
     if (this.points.length < 2) return;
-    const polyline6 = L4.polyline(this.points).addTo(this.map);
+    const polyline6 = L4.polyline(
+      this.points,
+      getModePathOptions(this.options, "polyline" /* Polyline */)
+    ).addTo(this.map);
     this.map.fire(ANVIL_EVENTS.CREATED, { layer: polyline6 });
     this.reset();
   }
@@ -386,8 +447,8 @@ var DrawMarkerMode = class {
   }
   onClick(e) {
     const latlng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options) : e.latlng;
-    const marker4 = L5.marker(latlng, this.options.vertexOptions).addTo(this.map);
-    this.map.fire(ANVIL_EVENTS.CREATED, { layer: marker4 });
+    const marker3 = L5.marker(latlng, getModeVertexOptions(this.options, "marker" /* Marker */)).addTo(this.map);
+    this.map.fire(ANVIL_EVENTS.CREATED, { layer: marker3 });
   }
 };
 
@@ -424,7 +485,13 @@ var DrawRectangleMode = class {
     const currentLatLng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options) : e.latlng;
     const bounds = L6.latLngBounds(this.startLatLng, currentLatLng);
     if (!this.rectangle) {
-      this.rectangle = L6.rectangle(bounds, { color: "#3388ff", weight: 2 }).addTo(this.map);
+      this.rectangle = L6.rectangle(
+        bounds,
+        getModeGhostPathOptions(this.options, "rectangle" /* Rectangle */, {
+          color: "#3388ff",
+          weight: 2
+        })
+      ).addTo(this.map);
     } else {
       this.rectangle.setBounds(bounds);
     }
@@ -433,7 +500,10 @@ var DrawRectangleMode = class {
     if (!this.startLatLng) return;
     const currentLatLng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options) : e.latlng;
     const bounds = L6.latLngBounds(this.startLatLng, currentLatLng);
-    const rectangle3 = L6.rectangle(bounds).addTo(this.map);
+    const rectangle3 = L6.rectangle(
+      bounds,
+      getModePathOptions(this.options, "rectangle" /* Rectangle */)
+    ).addTo(this.map);
     this.map.fire(ANVIL_EVENTS.CREATED, { layer: rectangle3 });
     this.reset();
   }
@@ -477,7 +547,13 @@ var DrawSquareMode = class {
     const currentLatLng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options) : e.latlng;
     const squareBounds = this.getSquareBounds(this.startLatLng, currentLatLng);
     if (!this.rectangle) {
-      this.rectangle = L7.rectangle(squareBounds, { color: "#3388ff", weight: 2 }).addTo(this.map);
+      this.rectangle = L7.rectangle(
+        squareBounds,
+        getModeGhostPathOptions(this.options, "square" /* Square */, {
+          color: "#3388ff",
+          weight: 2
+        })
+      ).addTo(this.map);
     } else {
       this.rectangle.setBounds(squareBounds);
     }
@@ -486,12 +562,15 @@ var DrawSquareMode = class {
     if (!this.startLatLng) return;
     const currentLatLng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options) : e.latlng;
     const squareBounds = this.getSquareBounds(this.startLatLng, currentLatLng);
-    const polygon7 = L7.polygon([
-      squareBounds.getNorthWest(),
-      squareBounds.getNorthEast(),
-      squareBounds.getSouthEast(),
-      squareBounds.getSouthWest()
-    ]).addTo(this.map);
+    const polygon7 = L7.polygon(
+      [
+        squareBounds.getNorthWest(),
+        squareBounds.getNorthEast(),
+        squareBounds.getSouthEast(),
+        squareBounds.getSouthWest()
+      ],
+      getModePathOptions(this.options, "square" /* Square */)
+    ).addTo(this.map);
     this.map.fire(ANVIL_EVENTS.CREATED, { layer: polygon7 });
     this.reset();
   }
@@ -547,7 +626,13 @@ var DrawTriangleMode = class {
     const currentLatLng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options) : e.latlng;
     const trianglePoints = this.getTrianglePoints(this.startLatLng, currentLatLng);
     if (!this.ghostTriangle) {
-      this.ghostTriangle = L8.polygon(trianglePoints, { color: "#3388ff", weight: 2 }).addTo(this.map);
+      this.ghostTriangle = L8.polygon(
+        trianglePoints,
+        getModeGhostPathOptions(this.options, "triangle" /* Triangle */, {
+          color: "#3388ff",
+          weight: 2
+        })
+      ).addTo(this.map);
     } else {
       this.ghostTriangle.setLatLngs(trianglePoints);
     }
@@ -556,7 +641,10 @@ var DrawTriangleMode = class {
     if (!this.startLatLng) return;
     const currentLatLng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options) : e.latlng;
     const trianglePoints = this.getTrianglePoints(this.startLatLng, currentLatLng);
-    const polygon7 = L8.polygon(trianglePoints).addTo(this.map);
+    const polygon7 = L8.polygon(
+      trianglePoints,
+      getModePathOptions(this.options, "triangle" /* Triangle */)
+    ).addTo(this.map);
     this.map.fire(ANVIL_EVENTS.CREATED, { layer: polygon7 });
     this.reset();
   }
@@ -611,7 +699,13 @@ var DrawCircleMode = class {
     const currentLatLng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options) : e.latlng;
     const radius = this.map.distance(this.centerLatLng, currentLatLng);
     if (!this.circle) {
-      this.circle = L9.circle(this.centerLatLng, { radius, color: "#3388ff", weight: 2 }).addTo(this.map);
+      this.circle = L9.circle(this.centerLatLng, {
+        radius,
+        ...getModeGhostPathOptions(this.options, "circle" /* Circle */, {
+          color: "#3388ff",
+          weight: 2
+        })
+      }).addTo(this.map);
     } else {
       this.circle.setRadius(radius);
     }
@@ -620,7 +714,10 @@ var DrawCircleMode = class {
     if (!this.centerLatLng) return;
     const currentLatLng = this.store ? getSnapLatLng(this.map, e.latlng, this.store, this.options) : e.latlng;
     const radius = this.map.distance(this.centerLatLng, currentLatLng);
-    const circle2 = L9.circle(this.centerLatLng, { radius }).addTo(this.map);
+    const circle2 = L9.circle(this.centerLatLng, {
+      radius,
+      ...getModePathOptions(this.options, "circle" /* Circle */)
+    }).addTo(this.map);
     this.map.fire(ANVIL_EVENTS.CREATED, { layer: circle2 });
     this.reset();
   }
@@ -685,12 +782,15 @@ var FreehandMode = class {
     if (this.polyline) {
       this.polyline.setLatLngs(this.points);
     } else {
-      this.polyline = L10.polyline(this.points, {
-        color: "#3388ff",
-        weight: 3,
-        opacity: 0.8,
-        dashArray: "5, 5"
-      }).addTo(this.map);
+      this.polyline = L10.polyline(
+        this.points,
+        getModeGhostPathOptions(this.options, "freehand" /* Freehand */, {
+          color: "#3388ff",
+          weight: 3,
+          opacity: 0.8,
+          dashArray: "5, 5"
+        })
+      ).addTo(this.map);
     }
   }
   finish() {
@@ -705,7 +805,10 @@ var FreehandMode = class {
     if (finalCoords.length > 0 && (finalCoords[0][0] !== finalCoords[finalCoords.length - 1][0] || finalCoords[0][1] !== finalCoords[finalCoords.length - 1][1])) {
       finalCoords.push(finalCoords[0]);
     }
-    const finalPolygon = L10.polygon(finalCoords.map((c) => [c[1], c[0]])).addTo(this.map);
+    const finalPolygon = L10.polygon(
+      finalCoords.map((c) => [c[1], c[0]]),
+      getModePathOptions(this.options, "freehand" /* Freehand */)
+    ).addTo(this.map);
     this.map.fire(ANVIL_EVENTS.CREATED, { layer: finalPolygon });
     this.resetDrawing();
   }
@@ -764,11 +867,14 @@ var CutMode = class {
     const snapLatLng = getSnapLatLng(this.map, e.latlng, this.store, this.options, this.points);
     const lastPoint = this.points[this.points.length - 1];
     if (!this.ghostLine) {
-      this.ghostLine = L11.polyline([lastPoint, snapLatLng], {
-        dashArray: "5, 5",
-        color: "#ff0000",
-        weight: 2
-      }).addTo(this.map);
+      this.ghostLine = L11.polyline(
+        [lastPoint, snapLatLng],
+        getModeGhostPathOptions(this.options, "cut" /* Cut */, {
+          dashArray: "5, 5",
+          color: "#ff0000",
+          weight: 2
+        })
+      ).addTo(this.map);
     } else {
       this.ghostLine.setLatLngs([lastPoint, snapLatLng]);
     }
@@ -782,21 +888,24 @@ var CutMode = class {
     if (this.polyline) {
       this.polyline.setLatLngs(this.points);
     } else {
-      this.polyline = L11.polyline(this.points, { color: "#ff0000" }).addTo(this.map);
+      this.polyline = L11.polyline(
+        this.points,
+        getModePathOptions(this.options, "cut" /* Cut */, { color: "#ff0000" })
+      ).addTo(this.map);
     }
     if (this.points.length === 1 && this.markers.length === 0) {
-      const marker4 = L11.circleMarker(this.points[0], {
-        radius: 6,
-        fillColor: "#fff",
-        fillOpacity: 1,
-        color: "#ff0000",
-        weight: 2
-      }).addTo(this.map);
-      marker4.on("click", (e) => {
+      const marker3 = L11.circleMarker(
+        this.points[0],
+        getModeHandleOptions(this.options, "cut" /* Cut */, {
+          radius: 6,
+          color: "#ff0000"
+        })
+      ).addTo(this.map);
+      marker3.on("click", (e) => {
         L11.DomEvent.stopPropagation(e);
         if (this.points.length >= 3) this.finish();
       });
-      this.markers.push(marker4);
+      this.markers.push(marker3);
     }
   }
   finish() {
@@ -823,7 +932,9 @@ var CutMode = class {
         this.map.removeLayer(polygon7);
         const flattened = turf2.flatten(result);
         flattened.features.forEach((f) => {
-          const l = L11.geoJSON(f).getLayers()[0];
+          const l = L11.geoJSON(f, {
+            style: getModePathOptions(this.options, "cut" /* Cut */)
+          }).getLayers()[0];
           l.addTo(this.map);
           this.map.fire(ANVIL_EVENTS.CREATED, { layer: l });
         });
@@ -887,11 +998,14 @@ var SplitMode = class {
     const snapLatLng = getSnapLatLng(this.map, e.latlng, this.store, this.options, this.points);
     const lastPoint = this.points[this.points.length - 1];
     if (!this.ghostLine) {
-      this.ghostLine = L12.polyline([lastPoint, snapLatLng], {
-        dashArray: "5, 5",
-        color: "#ff3300",
-        weight: 2
-      }).addTo(this.map);
+      this.ghostLine = L12.polyline(
+        [lastPoint, snapLatLng],
+        getModeGhostPathOptions(this.options, "split" /* Split */, {
+          dashArray: "5, 5",
+          color: "#ff3300",
+          weight: 2
+        })
+      ).addTo(this.map);
     } else {
       this.ghostLine.setLatLngs([lastPoint, snapLatLng]);
     }
@@ -905,23 +1019,28 @@ var SplitMode = class {
     if (this.polyline) {
       this.polyline.setLatLngs(this.points);
     } else {
-      this.polyline = L12.polyline(this.points, { color: "#ff3300", weight: 3 }).addTo(this.map);
+      this.polyline = L12.polyline(
+        this.points,
+        getModePathOptions(this.options, "split" /* Split */, {
+          color: "#ff3300",
+          weight: 3
+        })
+      ).addTo(this.map);
     }
     const lastPoint = this.points[this.points.length - 1];
     if (this.markers.length === 0) {
-      const marker4 = L12.marker(lastPoint, {
-        icon: L12.divIcon({
-          className: "anvil-split-finish",
-          html: '<div style="width: 10px; height: 10px; background: #ff3300; border: 2px solid white; border-radius: 50%;"></div>',
-          iconSize: [10, 10],
-          iconAnchor: [5, 5]
+      const marker3 = L12.circleMarker(
+        lastPoint,
+        getModeHandleOptions(this.options, "split" /* Split */, {
+          radius: 5,
+          color: "#ff3300"
         })
-      }).addTo(this.map);
-      marker4.on("click", (e) => {
+      ).addTo(this.map);
+      marker3.on("click", (e) => {
         L12.DomEvent.stopPropagation(e);
         this.finish();
       });
-      this.markers.push(marker4);
+      this.markers.push(marker3);
     } else {
       this.markers[0].setLatLng(lastPoint);
     }
@@ -976,7 +1095,9 @@ var SplitMode = class {
         const processResult = (result) => {
           const flattened = turf3.flatten(result);
           flattened.features.forEach((f) => {
-            const l = L12.geoJSON(f).getLayers()[0];
+            const l = L12.geoJSON(f, {
+              style: getModePathOptions(this.options, "split" /* Split */)
+            }).getLayers()[0];
             l.addTo(this.map);
             this.map.fire(ANVIL_EVENTS.CREATED, { layer: l });
           });
@@ -1057,6 +1178,7 @@ var DragMode = class {
     __publicField(this, "draggingLayer", null);
     __publicField(this, "startLatLng", null);
     __publicField(this, "initialLatLngs", null);
+    __publicField(this, "originalPathStyle", null);
     this.store.getGroup().on("layeradd", (e) => {
       if (this.isEnabled) {
         this.addLayerListener(e.layer);
@@ -1104,7 +1226,13 @@ var DragMode = class {
       } else if (this.draggingLayer instanceof L13.Polyline) {
         this.initialLatLngs = JSON.parse(JSON.stringify(this.draggingLayer.getLatLngs()));
       }
-      this.draggingLayer.setStyle({ weight: 4, color: "#ffcc00" });
+      this.originalPathStyle = { ...this.draggingLayer.options };
+      this.draggingLayer.setStyle(
+        getModeSelectionPathOptions(this.options, "drag" /* Drag */, this.originalPathStyle, {
+          weight: 4,
+          color: "#ffcc00"
+        })
+      );
     }
     this.map.on("mousemove", this.onMouseMove, this);
     this.map.on("mouseup", this.onMouseUp, this);
@@ -1139,7 +1267,7 @@ var DragMode = class {
   onMouseUp() {
     if (this.draggingLayer) {
       if (this.draggingLayer instanceof L13.Path) {
-        this.draggingLayer.setStyle({ weight: 3, color: "#3388ff" });
+        this.draggingLayer.setStyle(this.originalPathStyle || {});
       }
       this.map.fire(ANVIL_EVENTS.EDITED, { layer: this.draggingLayer });
     }
@@ -1149,16 +1277,20 @@ var DragMode = class {
     this.map.off("mousemove", this.onMouseMove, this);
     this.map.off("mouseup", this.onMouseUp, this);
     this.map.dragging.enable();
+    if (this.draggingLayer instanceof L13.Path && this.originalPathStyle) {
+      this.draggingLayer.setStyle(this.originalPathStyle);
+    }
     this.draggingLayer = null;
     this.startLatLng = null;
     this.initialLatLngs = null;
+    this.originalPathStyle = null;
   }
 };
 
 // src/modes/scale-mode.ts
 import * as L14 from "leaflet";
 var ScaleMode = class {
-  constructor(map, store, options) {
+  constructor(map, store, options = {}) {
     this.map = map;
     this.store = store;
     this.options = options;
@@ -1167,6 +1299,7 @@ var ScaleMode = class {
     __publicField(this, "initialLatLngs", null);
     __publicField(this, "initialRadius", 0);
     __publicField(this, "initialDistance", 0);
+    __publicField(this, "originalPathStyle", null);
   }
   enable() {
     this.store.getGroup().eachLayer((layer) => {
@@ -1195,11 +1328,20 @@ var ScaleMode = class {
     if (this.selectedLayer instanceof L14.Circle) {
       this.centerLatLng = this.selectedLayer.getLatLng();
       this.initialRadius = this.selectedLayer.getRadius();
-    } else if (this.selectedLayer instanceof L14.Path) {
-      const bounds = this.selectedLayer.getBounds();
-      this.centerLatLng = bounds.getCenter();
-      this.initialLatLngs = JSON.parse(JSON.stringify(this.selectedLayer.getLatLngs()));
-      this.selectedLayer.setStyle({ weight: 4, color: "#ffcc00" });
+    }
+    if (this.selectedLayer instanceof L14.Path) {
+      this.originalPathStyle = { ...this.selectedLayer.options };
+      this.selectedLayer.setStyle(
+        getModeSelectionPathOptions(this.options, "scale" /* Scale */, this.originalPathStyle, {
+          weight: 4,
+          color: "#ffcc00"
+        })
+      );
+      if (!(this.selectedLayer instanceof L14.Circle)) {
+        const bounds = this.selectedLayer.getBounds();
+        this.centerLatLng = bounds.getCenter();
+        this.initialLatLngs = JSON.parse(JSON.stringify(this.selectedLayer.getLatLngs()));
+      }
     }
     if (this.centerLatLng) {
       this.initialDistance = this.map.distance(this.centerLatLng, e.latlng);
@@ -1230,7 +1372,7 @@ var ScaleMode = class {
   onMouseUp() {
     if (this.selectedLayer) {
       if (this.selectedLayer instanceof L14.Path) {
-        this.selectedLayer.setStyle({ weight: 3, color: "#3388ff" });
+        this.selectedLayer.setStyle(this.originalPathStyle || {});
       }
       this.map.fire(ANVIL_EVENTS.EDITED, { layer: this.selectedLayer });
     }
@@ -1240,16 +1382,20 @@ var ScaleMode = class {
     this.map.off("mousemove", this.onMouseMove, this);
     this.map.off("mouseup", this.onMouseUp, this);
     this.map.dragging.enable();
+    if (this.selectedLayer instanceof L14.Path && this.originalPathStyle) {
+      this.selectedLayer.setStyle(this.originalPathStyle);
+    }
     this.selectedLayer = null;
     this.centerLatLng = null;
     this.initialLatLngs = null;
+    this.originalPathStyle = null;
   }
 };
 
 // src/modes/rotate-mode.ts
 import * as L15 from "leaflet";
 var RotateMode = class {
-  constructor(map, store, options) {
+  constructor(map, store, options = {}) {
     this.map = map;
     this.store = store;
     this.options = options;
@@ -1257,6 +1403,7 @@ var RotateMode = class {
     __publicField(this, "centerLatLng", null);
     __publicField(this, "initialLatLngs", null);
     __publicField(this, "startAngle", 0);
+    __publicField(this, "originalPathStyle", null);
   }
   enable() {
     this.store.getGroup().eachLayer((layer) => {
@@ -1286,10 +1433,16 @@ var RotateMode = class {
     const bounds = pathLayer.getBounds();
     this.centerLatLng = bounds.getCenter();
     this.initialLatLngs = JSON.parse(JSON.stringify(pathLayer.getLatLngs()));
+    this.originalPathStyle = { ...pathLayer.options };
     const point2 = this.map.latLngToContainerPoint(e.latlng);
     const centerPoint = this.map.latLngToContainerPoint(this.centerLatLng);
     this.startAngle = Math.atan2(point2.y - centerPoint.y, point2.x - centerPoint.x);
-    pathLayer.setStyle({ weight: 4, color: "#ffcc00" });
+    pathLayer.setStyle(
+      getModeSelectionPathOptions(this.options, "rotate" /* Rotate */, this.originalPathStyle, {
+        weight: 4,
+        color: "#ffcc00"
+      })
+    );
     this.map.on("mousemove", this.onMouseMove, this);
     this.map.on("mouseup", this.onMouseUp, this);
     this.map.dragging.disable();
@@ -1319,7 +1472,7 @@ var RotateMode = class {
   }
   onMouseUp() {
     if (this.selectedLayer) {
-      this.selectedLayer.setStyle({ weight: 3, color: "#3388ff" });
+      this.selectedLayer.setStyle(this.originalPathStyle || {});
       this.map.fire(ANVIL_EVENTS.EDITED, { layer: this.selectedLayer });
     }
     this.stopRotating();
@@ -1328,9 +1481,13 @@ var RotateMode = class {
     this.map.off("mousemove", this.onMouseMove, this);
     this.map.off("mouseup", this.onMouseUp, this);
     this.map.dragging.enable();
+    if (this.selectedLayer && this.originalPathStyle) {
+      this.selectedLayer.setStyle(this.originalPathStyle);
+    }
     this.selectedLayer = null;
     this.centerLatLng = null;
     this.initialLatLngs = null;
+    this.originalPathStyle = null;
   }
 };
 
@@ -1343,6 +1500,7 @@ var UnionMode = class {
     this.store = store;
     this.options = options;
     __publicField(this, "firstLayer", null);
+    __publicField(this, "firstLayerStyle", null);
   }
   enable() {
     this.store.getGroup().eachLayer((layer) => {
@@ -1366,7 +1524,13 @@ var UnionMode = class {
     const layer = e.target;
     if (!this.firstLayer) {
       this.firstLayer = layer;
-      this.firstLayer.setStyle({ color: "#ff00ff", weight: 4 });
+      this.firstLayerStyle = { ...layer.options };
+      this.firstLayer.setStyle(
+        getModeSelectionPathOptions(this.options, "union" /* Union */, this.firstLayerStyle, {
+          color: "#ff00ff",
+          weight: 4
+        })
+      );
       return;
     }
     if (this.firstLayer === layer) {
@@ -1388,18 +1552,20 @@ var UnionMode = class {
     const flattened = turf4.flatten(united);
     flattened.features.forEach((f) => {
       const newLayerGroup = L16.geoJSON(f, {
-        style: this.options.pathOptions
+        style: getModePathOptions(this.options, "union" /* Union */)
       });
       const l = newLayerGroup.getLayers()[0];
       l.addTo(this.map);
       this.map.fire(ANVIL_EVENTS.CREATED, { layer: l });
     });
     this.firstLayer = null;
+    this.firstLayerStyle = null;
   }
   reset() {
     if (this.firstLayer) {
-      this.firstLayer.setStyle({ color: "#3388ff", weight: 3, ...this.options.pathOptions });
+      this.firstLayer.setStyle(this.firstLayerStyle || {});
       this.firstLayer = null;
+      this.firstLayerStyle = null;
     }
   }
 };
@@ -1413,6 +1579,7 @@ var SubtractMode = class {
     this.store = store;
     this.options = options;
     __publicField(this, "baseLayer", null);
+    __publicField(this, "baseLayerStyle", null);
   }
   enable() {
     this.store.getGroup().eachLayer((layer) => {
@@ -1436,7 +1603,13 @@ var SubtractMode = class {
     const layer = e.target;
     if (!this.baseLayer) {
       this.baseLayer = layer;
-      this.baseLayer.setStyle({ color: "#ff0000", weight: 4 });
+      this.baseLayerStyle = { ...layer.options };
+      this.baseLayer.setStyle(
+        getModeSelectionPathOptions(this.options, "subtract" /* Subtract */, this.baseLayerStyle, {
+          color: "#ff0000",
+          weight: 4
+        })
+      );
       return;
     }
     if (this.baseLayer === layer) {
@@ -1453,18 +1626,22 @@ var SubtractMode = class {
     if (diff) {
       const flattened = turf5.flatten(diff);
       flattened.features.forEach((f) => {
-        const newLayerGroup = L17.geoJSON(f);
+        const newLayerGroup = L17.geoJSON(f, {
+          style: getModePathOptions(this.options, "subtract" /* Subtract */)
+        });
         const l = newLayerGroup.getLayers()[0];
         l.addTo(this.map);
         this.map.fire(ANVIL_EVENTS.CREATED, { layer: l });
       });
     }
     this.baseLayer = null;
+    this.baseLayerStyle = null;
   }
   reset() {
     if (this.baseLayer) {
-      this.baseLayer.setStyle({ color: "#3388ff", weight: 3 });
+      this.baseLayer.setStyle(this.baseLayerStyle || {});
       this.baseLayer = null;
+      this.baseLayerStyle = null;
     }
   }
 };
@@ -1481,6 +1658,7 @@ var EditMode = class {
     __publicField(this, "ghostMarker", null);
     __publicField(this, "segments", []);
     __publicField(this, "_isDragging", false);
+    __publicField(this, "originalLayerStyles", /* @__PURE__ */ new Map());
   }
   enable() {
     this.store.getGroup().eachLayer((layer) => {
@@ -1499,13 +1677,11 @@ var EditMode = class {
         layer.off("click", this.onLayerClick, this);
         layer.off("mousemove", this.onMouseMove, this);
         layer.getElement()?.style.setProperty("cursor", "");
-        if (layer instanceof L18.Path) {
-          layer.setStyle({ color: "#3388ff", weight: 3, fillOpacity: 0.2 });
-        }
       }
     });
     this.map.off("click", this.onMapClick, this);
     this.map.off("mousemove", this.onMouseMove, this);
+    this.restoreAllPathStyles();
     this.clearMarkers();
     this.activeLayers.clear();
   }
@@ -1515,27 +1691,26 @@ var EditMode = class {
     const isMultiSelect = e.originalEvent.shiftKey || this.options.magnetic;
     if (!isMultiSelect) {
       if (this.activeLayers.has(layer) && this.activeLayers.size === 1) return;
-      this.activeLayers.forEach((l) => {
-        if (l instanceof L18.Path) l.setStyle({ color: "#3388ff", weight: 3 });
-      });
+      this.restoreAllPathStyles();
       this.clearMarkers();
       this.activeLayers.clear();
       this.activeLayers.add(layer);
     } else {
       if (this.activeLayers.has(layer)) {
         this.activeLayers.delete(layer);
-        if (layer instanceof L18.Path) layer.setStyle({ color: "#3388ff", weight: 3 });
+        if (layer instanceof L18.Path) this.restorePathStyle(layer);
       } else {
         this.activeLayers.add(layer);
       }
       this.clearMarkers();
     }
     this.activeLayers.forEach((l) => {
-      if (l instanceof L18.Path) l.setStyle({ color: "#ff00ff", weight: 4 });
+      if (l instanceof L18.Path) this.applySelectionStyle(l);
     });
     this.createMarkers();
   }
   onMapClick() {
+    this.restoreAllPathStyles();
     this.clearMarkers();
     this.activeLayers.clear();
   }
@@ -1590,17 +1765,17 @@ var EditMode = class {
     });
     this.segments = Array.from(segmentMap.values());
     vertexMap.forEach((group) => {
-      const marker4 = this.createEditMarker(group.latlng);
-      group.marker = marker4;
-      this.markers.push(marker4);
-      marker4.on("dragstart", () => {
+      const marker3 = this.createEditMarker(group.latlng);
+      group.marker = marker3;
+      this.markers.push(marker3);
+      marker3.on("dragstart", () => {
         this._isDragging = true;
       });
-      marker4.on("drag", (e) => {
+      marker3.on("drag", (e) => {
         const mouseEvent = e;
         const skipLayersArray = Array.from(this.activeLayers);
         const additionalPoints = [
-          ...this.markers.filter((m) => m !== marker4).map((m) => m.getLatLng()),
+          ...this.markers.filter((m) => m !== marker3).map((m) => m.getLatLng()),
           ...Array.from(this.activeLayers).filter((l) => l instanceof L18.Marker).map((l) => l.getLatLng())
         ];
         const snapped = getSnapLatLng(this.map, mouseEvent.latlng, this.store, this.options, additionalPoints, skipLayersArray);
@@ -1621,7 +1796,7 @@ var EditMode = class {
           });
           if (wouldIntersect) return;
         }
-        marker4.setLatLng(snapped);
+        marker3.setLatLng(snapped);
         group.latlng = snapped;
         group.refs.forEach((ref) => {
           const fullStructure = ref.layer.getLatLngs();
@@ -1634,12 +1809,12 @@ var EditMode = class {
           ref.layer.redraw();
         });
       });
-      marker4.on("dragend", () => {
+      marker3.on("dragend", () => {
         this._isDragging = false;
         this.activeLayers.forEach((l) => this.map.fire(ANVIL_EVENTS.EDITED, { layer: l }));
         this.refreshMarkers();
       });
-      marker4.on("contextmenu", (e) => {
+      marker3.on("contextmenu", (e) => {
         const mouseEvent = e;
         L18.DomEvent.stopPropagation(mouseEvent);
         this.deleteVertex(group);
@@ -1668,6 +1843,9 @@ var EditMode = class {
     });
     layersToDelete.forEach((layer) => {
       this.activeLayers.delete(layer);
+      if (layer instanceof L18.Path) {
+        this.originalLayerStyles.delete(layer);
+      }
       this.map.removeLayer(layer);
       this.map.fire(ANVIL_EVENTS.DELETED, { layer });
     });
@@ -1709,14 +1887,15 @@ var EditMode = class {
     }
   }
   createEditMarker(latlng) {
+    const visuals = this.getEditHandleVisuals();
     return L18.marker(latlng, {
       draggable: true,
       zIndexOffset: 2e3,
       icon: L18.divIcon({
         className: "anvil-edit-marker",
-        html: '<div style="width: 12px; height: 12px; background: #fff; border: 2px solid #ff00ff; border-radius: 50%; box-sizing: border-box; box-shadow: 0 0 4px rgba(0,0,0,0.3);"></div>',
-        iconSize: [12, 12],
-        iconAnchor: [6, 6]
+        html: this.createHandleHtml(visuals.size, visuals.fillColor, visuals.borderColor, visuals.borderWidth),
+        iconSize: [visuals.size, visuals.size],
+        iconAnchor: [visuals.size / 2, visuals.size / 2]
       })
     }).addTo(this.map);
   }
@@ -1728,15 +1907,16 @@ var EditMode = class {
       }
       return;
     }
+    const visuals = this.getGhostHandleVisuals();
     this.ghostMarker = L18.marker(latlng, {
       draggable: true,
       opacity: 0.7,
       zIndexOffset: 3e3,
       icon: L18.divIcon({
         className: "anvil-ghost-marker",
-        html: '<div style="width: 10px; height: 10px; background: #ff00ff; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; box-shadow: 0 0 4px rgba(0,0,0,0.3);"></div>',
-        iconSize: [10, 10],
-        iconAnchor: [5, 5]
+        html: this.createHandleHtml(visuals.size, visuals.fillColor, visuals.borderColor, visuals.borderWidth),
+        iconSize: [visuals.size, visuals.size],
+        iconAnchor: [visuals.size / 2, visuals.size / 2]
       })
     }).addTo(this.map);
     this.ghostMarker.on("dragstart", () => {
@@ -1805,47 +1985,48 @@ var EditMode = class {
       this.ghostMarker = null;
     }
   }
-  handleMarkerEdit(marker4) {
-    marker4.dragging?.enable();
-    marker4.on("drag", (e) => {
+  handleMarkerEdit(marker3) {
+    marker3.dragging?.enable();
+    marker3.on("drag", (e) => {
       const mouseEvent = e;
       const additionalPoints = this.markers.map((m) => m.getLatLng());
-      const snapped = getSnapLatLng(this.map, mouseEvent.latlng, this.store, this.options, additionalPoints, marker4);
-      marker4.setLatLng(snapped);
+      const snapped = getSnapLatLng(this.map, mouseEvent.latlng, this.store, this.options, additionalPoints, marker3);
+      marker3.setLatLng(snapped);
     });
-    marker4.on("dragend", () => {
-      this.map.fire(ANVIL_EVENTS.EDITED, { layer: marker4 });
+    marker3.on("dragend", () => {
+      this.map.fire(ANVIL_EVENTS.EDITED, { layer: marker3 });
     });
-    marker4.on("contextmenu", (e) => {
+    marker3.on("contextmenu", (e) => {
       const mouseEvent = e;
       L18.DomEvent.stopPropagation(mouseEvent);
-      this.activeLayers.delete(marker4);
-      this.map.removeLayer(marker4);
-      this.map.fire(ANVIL_EVENTS.DELETED, { layer: marker4 });
+      this.activeLayers.delete(marker3);
+      this.map.removeLayer(marker3);
+      this.map.fire(ANVIL_EVENTS.DELETED, { layer: marker3 });
       this.refreshMarkers();
     });
   }
   handleCircleEdit(circle2) {
-    const marker4 = this.createEditMarker(circle2.getLatLng());
-    marker4.on("drag", (e) => {
+    const marker3 = this.createEditMarker(circle2.getLatLng());
+    marker3.on("drag", (e) => {
       const mouseEvent = e;
-      const additionalPoints = this.markers.filter((m) => m !== marker4).map((m) => m.getLatLng());
+      const additionalPoints = this.markers.filter((m) => m !== marker3).map((m) => m.getLatLng());
       const snapped = getSnapLatLng(this.map, mouseEvent.latlng, this.store, this.options, additionalPoints, circle2);
-      marker4.setLatLng(snapped);
+      marker3.setLatLng(snapped);
       circle2.setLatLng(snapped);
     });
-    marker4.on("dragend", () => {
+    marker3.on("dragend", () => {
       this.map.fire(ANVIL_EVENTS.EDITED, { layer: circle2 });
     });
-    marker4.on("contextmenu", (e) => {
+    marker3.on("contextmenu", (e) => {
       const mouseEvent = e;
       L18.DomEvent.stopPropagation(mouseEvent);
       this.activeLayers.delete(circle2);
+      this.originalLayerStyles.delete(circle2);
       this.map.removeLayer(circle2);
       this.map.fire(ANVIL_EVENTS.DELETED, { layer: circle2 });
       this.refreshMarkers();
     });
-    this.markers.push(marker4);
+    this.markers.push(marker3);
   }
   clearMarkers() {
     this.activeLayers.forEach((layer) => {
@@ -1864,6 +2045,64 @@ var EditMode = class {
     this.clearMarkers();
     this.createMarkers();
   }
+  applySelectionStyle(layer) {
+    if (!this.originalLayerStyles.has(layer)) {
+      this.originalLayerStyles.set(layer, { ...layer.options });
+    }
+    layer.setStyle(
+      getModeSelectionPathOptions(this.options, "edit" /* Edit */, this.originalLayerStyles.get(layer) || {}, {
+        color: "#ff00ff",
+        weight: 4
+      })
+    );
+  }
+  restorePathStyle(layer) {
+    const original = this.originalLayerStyles.get(layer);
+    if (!original) return;
+    layer.setStyle(original);
+    this.originalLayerStyles.delete(layer);
+  }
+  restoreAllPathStyles() {
+    this.originalLayerStyles.forEach((style, layer) => {
+      layer.setStyle(style);
+    });
+    this.originalLayerStyles.clear();
+  }
+  getEditHandleVisuals() {
+    const selection = getModeSelectionPathOptions(this.options, "edit" /* Edit */, {}, { color: "#ff00ff" });
+    const handle = getModeHandleOptions(this.options, "edit" /* Edit */, {
+      radius: 6,
+      color: selection.color || "#ff00ff",
+      fillColor: "#fff",
+      fillOpacity: 1,
+      weight: 2
+    });
+    return {
+      size: (handle.radius || 6) * 2,
+      fillColor: handle.fillColor || "#fff",
+      borderColor: handle.color || (selection.color || "#ff00ff"),
+      borderWidth: handle.weight || 2
+    };
+  }
+  getGhostHandleVisuals() {
+    const selection = getModeSelectionPathOptions(this.options, "edit" /* Edit */, {}, { color: "#ff00ff" });
+    const handle = getModeHandleOptions(this.options, "edit" /* Edit */, {
+      radius: 5,
+      color: "#fff",
+      fillColor: selection.color || "#ff00ff",
+      fillOpacity: 1,
+      weight: 2
+    });
+    return {
+      size: (handle.radius || 5) * 2,
+      fillColor: handle.fillColor || (selection.color || "#ff00ff"),
+      borderColor: handle.color || "#fff",
+      borderWidth: handle.weight || 2
+    };
+  }
+  createHandleHtml(size, fillColor, borderColor, borderWidth) {
+    return `<div style="width: ${size}px; height: ${size}px; background: ${fillColor}; border: ${borderWidth}px solid ${borderColor}; border-radius: 50%; box-sizing: border-box; box-shadow: 0 0 4px rgba(0,0,0,0.3);"></div>`;
+  }
 };
 
 // src/modes/delete-mode.ts
@@ -1938,45 +2177,117 @@ var LayerStore = class {
 
 // src/controls/anvil-control.ts
 import * as L21 from "leaflet";
-var SVG_ATTRS = 'xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
-var ICONS = {
-  // Marker: Map-Pin mit Punkt in der Mitte
-  ["marker" /* Marker */]: `<svg ${SVG_ATTRS}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>`,
-  // Polyline: Kurvige Route mit Endpunkten
-  ["polyline" /* Polyline */]: `<svg ${SVG_ATTRS}><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/><circle cx="6" cy="19" r="3"/></svg>`,
-  // Polygon: Klassische unregelmäßige 5-Eck-Form
-  ["polygon" /* Polygon */]: `<svg ${SVG_ATTRS}><path d="m12 2 10 7-3 12H5l-3-12Z"/></svg>`,
-  // Rectangle: Horizontales Rechteck
-  ["rectangle" /* Rectangle */]: `<svg ${SVG_ATTRS}><rect width="20" height="12" x="2" y="6" rx="2"/></svg>`,
-  // Square: Quadratisches Rechteck (1:1)
-  ["square" /* Square */]: `<svg ${SVG_ATTRS}><rect width="18" height="18" x="3" y="3" rx="2"/></svg>`,
-  // Triangle: Gleichschenkliges Dreieck
-  ["triangle" /* Triangle */]: `<svg ${SVG_ATTRS}><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>`,
-  // Circle: Klassischer Kreis
-  ["circle" /* Circle */]: `<svg ${SVG_ATTRS}><circle cx="12" cy="12" r="10"/></svg>`,
-  // Freehand: Geschwungene Signatur-Linie
-  ["freehand" /* Freehand */]: `<svg ${SVG_ATTRS}><path d="m3 16 2 2 16-16"/><path d="M7 21h14"/><path d="M3 11c0 2 2 2 2 2z"/></svg>`,
-  // Cut: Offene Schere
-  ["cut" /* Cut */]: `<svg ${SVG_ATTRS}><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M20 4 8.12 15.88"/><path d="M14.47 14.48 20 20"/><path d="M8.12 8.12 12 12"/></svg>`,
-  // Split: Linie, die eine Form teilt
-  ["split" /* Split */]: `<svg ${SVG_ATTRS}><path d="M3 12h18"/><path d="M8 3v18"/><path d="M16 3v18"/><rect width="18" height="18" x="3" y="3" rx="2" stroke-dasharray="4 4" opacity="0.5"/></svg>`,
-  // Union: Zwei verschmolzene Rechtecke
-  ["union" /* Union */]: `<svg ${SVG_ATTRS}><path d="M8 4H4v4"/><path d="M4 12v4a2 2 0 0 0 2 2h4"/><path d="M14 18h4v-4"/><path d="M20 10V6a2 2 0 0 0-2-2h-4"/><path d="M14 10h-4v4" stroke-dasharray="2 2"/></svg>`,
-  // Subtract: Hauptform mit "ausgeschnittenem" Bereich (Minus-Metapher)
-  ["subtract" /* Subtract */]: `<svg ${SVG_ATTRS}><path d="M4 4h16v16H4z"/><path d="M10 10h10v10H10z" stroke-dasharray="2 2" opacity="0.7"/><path d="M15 6h-6"/></svg>`,
-  // Drag: Vier-Wege-Pfeil (Move-Metapher)
-  ["drag" /* Drag */]: `<svg ${SVG_ATTRS}><path d="m5 9-3 3 3 3"/><path d="m9 5 3-3 3 3"/><path d="m15 19 3 3 3-3"/><path d="m19 9 3 3-3 3"/><path d="M2 12h20"/><path d="M12 2v20"/></svg>`,
-  // Scale: Diagonal-Pfeile (Maximize-Metapher)
-  ["scale" /* Scale */]: `<svg ${SVG_ATTRS}><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3 14 10"/><path d="M3 21l7-7"/></svg>`,
-  // Rotate: Kreispfeil mit Ziel-Icon
-  ["rotate" /* Rotate */]: `<svg ${SVG_ATTRS}><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>`,
-  // Edit: Stift, der über einen Pfad zeichnet
-  ["edit" /* Edit */]: `<svg ${SVG_ATTRS}><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>`,
-  // Delete: Mülleimer mit Deckel und Schlitzen
-  ["delete" /* Delete */]: `<svg ${SVG_ATTRS}><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
-  // Off: Durchgestrichener Kreis (Power-Off/Disable Metapher)
-  ["off" /* Off */]: `<svg ${SVG_ATTRS}><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`
-};
+import {
+  Circle as Circle6,
+  Hand,
+  MapPin,
+  Move,
+  Pentagon,
+  Power,
+  RectangleHorizontal,
+  RotateCw,
+  Scaling,
+  Scissors,
+  Split,
+  Square,
+  SquarePen,
+  SquaresSubtract,
+  SquaresUnite,
+  Trash2,
+  Triangle,
+  Waypoints,
+  createElement
+} from "lucide";
+var ANVIL_TOOLBAR_STYLE_ID = "anvil-toolbar-styles";
+var MODE_CONFIGS = [
+  { id: "marker" /* Marker */, title: "Marker", icon: MapPin },
+  { id: "polyline" /* Polyline */, title: "Line", icon: Waypoints },
+  { id: "polygon" /* Polygon */, title: "Polygon", icon: Pentagon },
+  { id: "rectangle" /* Rectangle */, title: "Rectangle", icon: RectangleHorizontal },
+  { id: "square" /* Square */, title: "Square", icon: Square },
+  { id: "triangle" /* Triangle */, title: "Triangle", icon: Triangle },
+  { id: "circle" /* Circle */, title: "Circle", icon: Circle6 },
+  { id: "freehand" /* Freehand */, title: "Freehand", icon: Hand },
+  { id: "cut" /* Cut */, title: "Cut", icon: Scissors },
+  { id: "split" /* Split */, title: "Split", icon: Split },
+  { id: "union" /* Union */, title: "Union", icon: SquaresUnite },
+  { id: "subtract" /* Subtract */, title: "Subtract", icon: SquaresSubtract },
+  { id: "drag" /* Drag */, title: "Drag", icon: Move },
+  { id: "scale" /* Scale */, title: "Scale", icon: Scaling },
+  { id: "rotate" /* Rotate */, title: "Rotate", icon: RotateCw },
+  { id: "edit" /* Edit */, title: "Edit", icon: SquarePen },
+  { id: "delete" /* Delete */, title: "Delete", icon: Trash2 },
+  { id: "off" /* Off */, title: "Turn Off", icon: Power }
+];
+function ensureToolbarStyles() {
+  if (typeof document === "undefined" || document.getElementById(ANVIL_TOOLBAR_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = ANVIL_TOOLBAR_STYLE_ID;
+  style.textContent = `
+        .anvil-toolbar-container {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .anvil-toolbar-group {
+            overflow: hidden;
+        }
+
+        .anvil-toolbar-group .anvil-control-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 30px;
+            height: 30px;
+            color: #2f3b52;
+            transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
+        }
+
+        .anvil-toolbar-group .anvil-control-btn svg {
+            width: 16px;
+            height: 16px;
+            stroke-width: 2.1;
+        }
+
+        .anvil-toolbar-group .anvil-control-btn:hover,
+        .anvil-toolbar-group .anvil-control-btn:focus-visible {
+            background-color: #f3f6fb;
+            color: #0f172a;
+        }
+
+        .anvil-toolbar-group .anvil-control-btn:focus-visible {
+            outline: none;
+            box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.35);
+        }
+
+        .anvil-toolbar-group .anvil-control-btn.is-active {
+            background-color: #2563eb;
+            color: #fff;
+            box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.45), 0 1px 3px rgba(37, 99, 235, 0.25);
+        }
+
+        .anvil-toolbar-group .anvil-control-btn.is-active:hover,
+        .anvil-toolbar-group .anvil-control-btn.is-active:focus-visible {
+            background-color: #1d4ed8;
+            color: #fff;
+        }
+    `;
+  document.head.appendChild(style);
+}
+function setButtonState(button, active) {
+  button.classList.toggle("is-active", active);
+  button.setAttribute("aria-pressed", active ? "true" : "false");
+}
+function buildIcon(iconNode) {
+  return createElement(iconNode, {
+    width: 16,
+    height: 16,
+    "stroke-width": 2.1,
+    "aria-hidden": "true",
+    focusable: "false"
+  });
+}
 var AnvilControl = class extends L21.Control {
   constructor(anvil, options) {
     super(L21.Util.extend({ position: "topleft" }, options));
@@ -1987,88 +2298,43 @@ var AnvilControl = class extends L21.Control {
     this._options = { ...options };
   }
   onAdd(map) {
-    console.log("AnvilControl: triggering onAdd");
+    ensureToolbarStyles();
     const container = L21.DomUtil.create("div", "anvil-toolbar-container");
-    container.style.display = "flex";
-    container.style.flexDirection = "column";
-    container.style.gap = "10px";
-    const allModeConfigs = [
-      { id: "marker" /* Marker */, title: "Marker" },
-      { id: "polyline" /* Polyline */, title: "Line" },
-      { id: "polygon" /* Polygon */, title: "Polygon" },
-      { id: "rectangle" /* Rectangle */, title: "Rectangle" },
-      { id: "square" /* Square */, title: "Square" },
-      { id: "triangle" /* Triangle */, title: "Triangle" },
-      { id: "circle" /* Circle */, title: "Circle" },
-      { id: "freehand" /* Freehand */, title: "Freehand" },
-      { id: "cut" /* Cut */, title: "Cut" },
-      { id: "split" /* Split */, title: "Split" },
-      { id: "union" /* Union */, title: "Union" },
-      { id: "subtract" /* Subtract */, title: "Subtract" },
-      { id: "drag" /* Drag */, title: "Drag" },
-      { id: "scale" /* Scale */, title: "Scale" },
-      { id: "rotate" /* Rotate */, title: "Rotate" },
-      { id: "edit" /* Edit */, title: "Edit" },
-      { id: "delete" /* Delete */, title: "Delete" }
-    ];
-    const modesInput = this._options.modes || allModeConfigs.map((m) => m.id);
+    const modesInput = this._options.modes || MODE_CONFIGS.filter(({ id }) => id !== "off" /* Off */).map(({ id }) => id);
     const blocks = Array.isArray(modesInput[0]) ? modesInput : [modesInput];
+    const createButton = (group, config) => {
+      const btn = L21.DomUtil.create("a", "anvil-control-btn", group);
+      btn.href = "#";
+      btn.title = config.title;
+      btn.setAttribute("role", "button");
+      btn.setAttribute("aria-label", config.title);
+      btn.appendChild(buildIcon(config.icon));
+      L21.DomEvent.disableClickPropagation(btn);
+      L21.DomEvent.on(btn, "click", (e) => {
+        L21.DomEvent.preventDefault(e);
+        if (config.id === "off" /* Off */) {
+          this._anvil.disable();
+        } else {
+          this._anvil.enable(config.id);
+        }
+      });
+      this._btns[config.id] = btn;
+    };
     blocks.forEach((block, index) => {
       const group = L21.DomUtil.create("div", "leaflet-bar anvil-toolbar-group", container);
-      group.style.display = "flex";
-      group.style.flexDirection = "column";
-      group.style.backgroundColor = "white";
       block.forEach((modeId) => {
-        const config = allModeConfigs.find((c) => c.id === modeId);
-        if (!config && modeId !== "off" /* Off */) return;
-        const id = modeId;
-        const title = config ? config.title : "Turn Off";
-        const btn = L21.DomUtil.create("a", "anvil-control-btn", group);
-        btn.innerHTML = ICONS[id] || title;
-        btn.href = "#";
-        btn.title = title;
-        btn.style.display = "flex";
-        btn.style.alignItems = "center";
-        btn.style.justifyContent = "center";
-        btn.style.width = "30px";
-        btn.style.height = "30px";
-        btn.style.color = "#333";
-        btn.style.cursor = "pointer";
-        L21.DomEvent.disableClickPropagation(btn);
-        L21.DomEvent.on(btn, "click", (e) => {
-          L21.DomEvent.preventDefault(e);
-          if (id === "off" /* Off */) {
-            this._anvil.disable();
-          } else {
-            this._anvil.enable(id);
-          }
-        });
-        this._btns[id] = btn;
+        const config = MODE_CONFIGS.find(({ id }) => id === modeId);
+        if (!config) return;
+        createButton(group, config);
       });
       if (index === blocks.length - 1 && !this._btns["off" /* Off */]) {
-        const offBtn = L21.DomUtil.create("a", "anvil-control-btn", group);
-        offBtn.innerHTML = ICONS["off" /* Off */];
-        offBtn.href = "#";
-        offBtn.title = "Turn Off";
-        offBtn.style.display = "flex";
-        offBtn.style.alignItems = "center";
-        offBtn.style.justifyContent = "center";
-        offBtn.style.width = "30px";
-        offBtn.style.height = "30px";
-        offBtn.style.color = "#333";
-        offBtn.style.cursor = "pointer";
-        L21.DomEvent.disableClickPropagation(offBtn);
-        L21.DomEvent.on(offBtn, "click", (e) => {
-          L21.DomEvent.preventDefault(e);
-          this._anvil.disable();
-        });
-        this._btns["off" /* Off */] = offBtn;
+        createButton(group, MODE_CONFIGS.find(({ id }) => id === "off" /* Off */));
       }
     });
-    const updateFn = (m) => {
+    const updateFn = (mode) => {
       for (const id in this._btns) {
-        const active = id === m || id === "off" /* Off */ && !m;
-        this._btns[id].style.backgroundColor = active ? "#eee" : "#fff";
+        const active = id === mode || id === "off" /* Off */ && !mode;
+        setButtonState(this._btns[id], active);
       }
     };
     updateFn(null);