feat: add map-editor plugin with interactive OSM map and markers

Implement Phase 1 of custom Kirby plugin for editing interactive maps:
- OpenStreetMap base layer with MapLibre GL JS
- Click to add markers, drag to reposition
- Marker list sidebar with selection and deletion
- Auto-save with debounce (YAML format)
- Add marker button creates marker at current map center
- Max 50 markers per map (configurable)
- Clean UI with marker counter

Blueprint updated to use new map-editor field type instead of placeholder.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

public/site/plugins/map-editor/src/components/map/MapPreview.vue

@@ -0,0 +1,389 @@
+<template>
+  <div class="map-preview">
+    <div ref="mapContainer" class="map-container"></div>
+    <div v-if="loading" class="map-loading">
+      <div class="spinner"></div>
+      <span>Loading map...</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
+import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+export default {
+  props: {
+    center: {
+      type: Object,
+      required: true
+    },
+    zoom: {
+      type: Number,
+      required: true
+    },
+    markers: {
+      type: Array,
+      default: () => []
+    },
+    selectedMarkerId: {
+      type: String,
+      default: null
+    }
+  },
+
+  setup(props, { emit }) {
+    // State
+    const mapContainer = ref(null);
+    const map = ref(null);
+    const loading = ref(true);
+    const markerElements = ref(new Map());
+    const isDragging = ref(false);
+
+    // Lifecycle
+    onMounted(async () => {
+      await nextTick();
+      initMap();
+    });
+
+    onBeforeUnmount(() => {
+      if (map.value) {
+        map.value.remove();
+        map.value = null;
+      }
+      markerElements.value.clear();
+    });
+
+    // Watchers - only for updates FROM parent, not TO parent
+    watch(() => props.center, (newCenter) => {
+      if (map.value && map.value.loaded() && !isDragging.value) {
+        const currentCenter = map.value.getCenter();
+        // Only update if significantly different to avoid render loops
+        if (Math.abs(currentCenter.lat - newCenter.lat) > 0.00001 ||
+            Math.abs(currentCenter.lng - newCenter.lon) > 0.00001) {
+          map.value.setCenter([newCenter.lon, newCenter.lat]);
+        }
+      }
+    }, { deep: true });
+
+    watch(() => props.zoom, (newZoom) => {
+      if (map.value && map.value.loaded()) {
+        const currentZoom = map.value.getZoom();
+        // Only update if significantly different
+        if (Math.abs(currentZoom - newZoom) > 0.01) {
+          map.value.setZoom(newZoom);
+        }
+      }
+    });
+
+    watch(() => props.markers, () => {
+      updateMarkers();
+    }, { deep: true });
+
+    watch(() => props.selectedMarkerId, (newId) => {
+      updateMarkerSelection(newId);
+    });
+
+    // Methods
+    function initMap() {
+      if (!mapContainer.value) {
+        console.error("Map container not found");
+        return;
+      }
+
+      loading.value = true;
+
+      try {
+        map.value = new maplibregl.Map({
+          container: mapContainer.value,
+          style: {
+            version: 8,
+            sources: {
+              osm: {
+                type: "raster",
+                tiles: [
+                  "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                  "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                  "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                ],
+                tileSize: 256,
+                attribution:
+                  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+              }
+            },
+            layers: [
+              {
+                id: "osm",
+                type: "raster",
+                source: "osm",
+                minzoom: 0,
+                maxzoom: 19
+              }
+            ]
+          },
+          center: [props.center.lon, props.center.lat],
+          zoom: props.zoom
+        });
+
+        map.value.on("load", () => {
+          loading.value = false;
+          updateMarkers();
+        });
+
+        // Handle map clicks to add markers
+        map.value.on("click", (e) => {
+          // Check if click was on a marker element
+          const target = e.originalEvent.target;
+          const isMarkerClick = target.closest('.custom-marker');
+
+          if (!isMarkerClick) {
+            emit("map-click", {
+              lat: e.lngLat.lat,
+              lng: e.lngLat.lng
+            });
+          }
+        });
+      } catch (error) {
+        console.error("Error initializing map:", error);
+        loading.value = false;
+      }
+    }
+
+    function updateMarkers() {
+      if (!map.value || !map.value.loaded()) {
+        return;
+      }
+
+      // Remove existing markers
+      markerElements.value.forEach(({ marker }) => {
+        if (marker) {
+          marker.remove();
+        }
+      });
+      markerElements.value.clear();
+
+      // Add markers
+      if (props.markers && Array.isArray(props.markers)) {
+        props.markers.forEach((markerData, index) => {
+          addMarkerToMap(markerData, index);
+        });
+      }
+    }
+
+    function addMarkerToMap(markerData, index) {
+      if (!map.value || !markerData || !markerData.position) {
+        return;
+      }
+
+      // Create marker element
+      const el = document.createElement("div");
+      el.className = "custom-marker";
+      if (props.selectedMarkerId === markerData.id) {
+        el.classList.add("selected");
+      }
+
+      // Add marker number
+      const numberEl = document.createElement("div");
+      numberEl.className = "marker-number";
+      numberEl.textContent = index + 1;
+      el.appendChild(numberEl);
+
+      try {
+        // Create MapLibre marker
+        const marker = new maplibregl.Marker({
+          element: el,
+          draggable: true
+        })
+          .setLngLat([markerData.position.lon, markerData.position.lat])
+          .addTo(map.value);
+
+        // Handle marker drag
+        marker.on("dragstart", () => {
+          isDragging.value = true;
+        });
+
+        marker.on("dragend", () => {
+          const lngLat = marker.getLngLat();
+          emit("marker-moved", {
+            markerId: markerData.id,
+            position: {
+              lat: lngLat.lat,
+              lng: lngLat.lng
+            }
+          });
+          setTimeout(() => {
+            isDragging.value = false;
+          }, 100);
+        });
+
+        // Handle marker click
+        el.addEventListener("click", (e) => {
+          e.stopPropagation();
+          emit("marker-click", markerData.id);
+        });
+
+        // Store marker reference
+        markerElements.value.set(markerData.id, {
+          marker,
+          element: el
+        });
+      } catch (error) {
+        console.error("Error adding marker to map:", error);
+      }
+    }
+
+    function updateMarkerSelection(selectedId) {
+      markerElements.value.forEach(({ element }, markerId) => {
+        if (element) {
+          if (markerId === selectedId) {
+            element.classList.add("selected");
+          } else {
+            element.classList.remove("selected");
+          }
+        }
+      });
+    }
+
+    function getCurrentCenter() {
+      if (map.value && map.value.loaded()) {
+        const center = map.value.getCenter();
+        return {
+          lat: center.lat,
+          lon: center.lng
+        };
+      }
+      return {
+        lat: props.center.lat,
+        lon: props.center.lon
+      };
+    }
+
+    return {
+      mapContainer,
+      loading,
+      getCurrentCenter
+    };
+  }
+};
+</script>
+
+<style>
+.map-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.map-container {
+  width: 100%;
+  height: 100%;
+}
+
+.map-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 1000;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Custom marker styles */
+.custom-marker {
+  width: 40px;
+  height: 40px;
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.custom-marker:active {
+  cursor: grabbing;
+}
+
+.custom-marker::before {
+  content: "";
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  background: #e74c3c;
+  border: 3px solid white;
+  border-radius: 50% 50% 50% 0;
+  transform: rotate(-45deg);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s;
+}
+
+.custom-marker:hover::before {
+  background: #c0392b;
+  transform: rotate(-45deg) scale(1.1);
+}
+
+.custom-marker.selected::before {
+  background: #3498db;
+  border-color: #2980b9;
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.6);
+}
+
+.marker-number {
+  position: relative;
+  z-index: 1;
+  color: white;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  transform: translateY(-4px);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+}
+
+/* MapLibre controls styling */
+.maplibregl-ctrl-group {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.maplibregl-ctrl-group button {
+  width: 30px;
+  height: 30px;
+}
+
+.maplibregl-ctrl-attrib {
+  font-size: 11px;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.maplibregl-canvas-container {
+  cursor: crosshair;
+}
+
+.maplibregl-canvas-container.maplibregl-interactive {
+  cursor: crosshair;
+}
+</style>