@mongoosejs/studio 0.2.5 → 0.2.6

package/frontend/public/app.js

@@ -1515,7 +1515,9 @@ module.exports = {
           this.$toast.success('Chat thread created!');
         }
 
+        const userChatMessageIndex = this.chatMessages.length;
         this.chatMessages.push({
+          _id: Math.random().toString(36).substr(2, 9),
           content,
           role: 'user'
         });
@@ -1533,11 +1535,12 @@ module.exports = {
           if (event.chatMessage) {
             if (!userChatMessage) {
               userChatMessage = event.chatMessage;
-            } else if (!assistantChatMessage) {
+              this.chatMessages.splice(userChatMessageIndex, 1, userChatMessage);
+            } else {
               const assistantChatMessageIndex = this.chatMessages.indexOf(assistantChatMessage);
               assistantChatMessage = event.chatMessage;
               if (assistantChatMessageIndex !== -1) {
-                this.chatMessages[assistantChatMessageIndex] = assistantChatMessage;
+                this.chatMessages.splice(assistantChatMessageIndex, 1, assistantChatMessage);
               } else {
                 this.chatMessages.push(assistantChatMessage);
               }
@@ -1551,6 +1554,7 @@ module.exports = {
           } else if (event.textPart) {
             if (!assistantChatMessage) {
               assistantChatMessage = {
+                _id: Math.random().toString(36).substr(2, 9),
                 content: event.textPart,
                 role: 'assistant'
               };
@@ -2713,7 +2717,7 @@ module.exports = app => app.component('detail-array', {
 (module) {
 
 "use strict";
-module.exports = "<div class=\"w-full\">\n  <pre class=\"w-full whitespace-pre-wrap break-words font-mono text-sm text-gray-700 m-0\">{{displayValue}}</pre>\n</div>";
+module.exports = "<div class=\"w-full\">\n  <pre v-if=\"!isGeoJsonGeometry || !mapVisible\" class=\"w-full whitespace-pre-wrap break-words font-mono text-sm text-gray-700 m-0\">{{displayValue}}</pre>\n  <div v-show=\"isGeoJsonGeometry && mapVisible\" class=\"mt-2 border border-gray-200 rounded relative\">\n    <div ref=\"map\" class=\"h-64 w-full\" style=\"min-height: 256px; height: 256px;\"></div>\n    <!-- Undo button below map -->\n    <div v-if=\"isEditable && canUndo\" class=\"mt-2 flex justify-end\">\n      <button\n        @click=\"undoDelete\"\n        class=\"text-xs px-3 py-1.5 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors\"\n        title=\"Undo all changes\"\n      >\n        Undo\n      </button>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -2726,10 +2730,63 @@ module.exports = "<div class=\"w-full\">\n  <pre class=\"w-full whitespace-pre-w
 "use strict";
 
 
+/* global L */
 const template = __webpack_require__(/*! ./detail-default.html */ "./frontend/src/detail-default/detail-default.html");
+const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
+
+// Add CSS for polygon vertex markers and context menu
+appendCSS(`
+  .polygon-vertex-marker {
+    pointer-events: auto !important;
+  }
+  .polygon-vertex-marker > div {
+    pointer-events: auto !important;
+  }
+  .leaflet-context-menu {
+    position: absolute;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    z-index: 10000;
+    min-width: 120px;
+    padding: 4px 0;
+  }
+  .leaflet-context-menu-item {
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #333;
+  }
+  .leaflet-context-menu-item:hover {
+    background-color: #f0f0f0;
+  }
+  .leaflet-context-menu-item.delete {
+    color: #dc3545;
+  }
+  .leaflet-context-menu-item.delete:hover {
+    background-color: #fee;
+  }
+`);
+
 module.exports = app => app.component('detail-default', {
   template: template,
-  props: ['value'],
+  props: ['value', 'viewMode', 'onChange'],
+  data() {
+    return {
+      mapVisible: false,
+      mapInstance: null,
+      mapLayer: null,
+      draggableMarker: null,
+      draggableMarkers: [], // For polygon vertices
+      hasUnsavedChanges: false,
+      currentEditedGeometry: null, // Track the current edited geometry state
+      contextMenu: null, // Custom context menu element
+      contextMenuMarker: null, // Marker that triggered context menu
+      originalGeometry: null, // Store the original geometry when editing starts
+      isCreatingMarkers: false // Guard against re-entrant marker creation
+    };
+  },
   computed: {
     displayValue() {
       if (this.value === null) {
@@ -2749,10 +2806,1022 @@ module.exports = app => app.component('detail-default', {
       } catch (err) {
         return String(this.value);
       }
+    },
+    isGeoJsonGeometry() {
+      return this.value != null
+        && typeof this.value === 'object'
+        && !Array.isArray(this.value)
+        && Object.prototype.hasOwnProperty.call(this.value, 'type')
+        && Object.prototype.hasOwnProperty.call(this.value, 'coordinates');
+    },
+    isGeoJsonPoint() {
+      return this.isGeoJsonGeometry && this.value.type === 'Point';
+    },
+    isGeoJsonPolygon() {
+      return this.isGeoJsonGeometry && (this.value.type === 'Polygon' || this.value.type === 'MultiPolygon');
+    },
+    isMultiPolygon() {
+      return this.isGeoJsonGeometry && this.value.type === 'MultiPolygon';
+    },
+    isEditable() {
+      return (this.isGeoJsonPoint || this.isGeoJsonPolygon) && typeof this.onChange === 'function';
+    },
+    canUndo() {
+      // Can undo if there are any changes from the original geometry
+      return this.hasUnsavedChanges && this.originalGeometry != null;
+    }
+  },
+  watch: {
+    viewMode: {
+      handler(newValue) {
+        this.mapVisible = newValue === 'map';
+        if (this.mapVisible) {
+          this.$nextTick(() => {
+            this.ensureMap();
+          });
+        }
+      },
+      immediate: true
+    },
+    value: {
+      handler(newValue) {
+        if (this.mapVisible) {
+          this.$nextTick(() => {
+            this.ensureMap();
+          });
+        }
+        // Reset unsaved changes flag when value changes externally (e.g., after save)
+        if (this.hasUnsavedChanges && (this.isGeoJsonPoint || this.isGeoJsonPolygon)) {
+          this.hasUnsavedChanges = false;
+          this.currentEditedGeometry = null; // Reset edited geometry when value changes externally
+        }
+        // Store the new value as the original geometry for future edits
+        if (newValue && this.isGeoJsonGeometry) {
+          this.originalGeometry = JSON.parse(JSON.stringify(newValue));
+        } else {
+          this.originalGeometry = null;
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  beforeDestroy() {
+    this.hideContextMenu();
+    if (this.draggableMarker) {
+      this.draggableMarker.remove();
+      this.draggableMarker = null;
+    }
+    // Clean up polygon vertex markers
+    this.draggableMarkers.forEach(marker => {
+      if (marker) {
+        marker.remove();
+      }
+    });
+    this.draggableMarkers = [];
+    if (this.mapInstance) {
+      this.mapInstance.remove();
+      this.mapInstance = null;
+      this.mapLayer = null;
+    }
+  },
+  methods: {
+    ensureMap() {
+      if (!this.mapVisible || !this.isGeoJsonGeometry || !this.$refs.map) {
+        return;
+      }
+
+      if (typeof L === 'undefined') {
+        return;
+      }
+
+      if (!this.mapInstance) {
+        // Ensure the map container has explicit dimensions
+        const mapElement = this.$refs.map;
+        if (mapElement) {
+          // Set explicit dimensions inline with !important to override any CSS
+          mapElement.style.setProperty('height', '256px', 'important');
+          mapElement.style.setProperty('min-height', '256px', 'important');
+          mapElement.style.setProperty('width', '100%', 'important');
+          mapElement.style.setProperty('display', 'block', 'important');
+
+          // Force a reflow to ensure dimensions are applied
+          void mapElement.offsetHeight;
+        }
+
+        try {
+          this.mapInstance = L.map(this.$refs.map, {
+            preferCanvas: false
+          }).setView([0, 0], 1);
+
+          // Ensure map container has relative positioning for context menu
+          const mapContainer = this.mapInstance.getContainer();
+          if (mapContainer) {
+            mapContainer.style.position = 'relative';
+          }
+
+          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+          }).addTo(this.mapInstance);
+
+          // Explicitly invalidate size after creation to ensure proper rendering
+          this.$nextTick(() => {
+            if (this.mapInstance) {
+              this.mapInstance.invalidateSize();
+            }
+          });
+        } catch (error) {
+          return;
+        }
+      }
+
+      this.updateMapLayer();
+      this.$nextTick(() => {
+        if (this.mapInstance) {
+          this.mapInstance.invalidateSize();
+        }
+      });
+    },
+    updateMapLayer() {
+      if (!this.mapInstance || !this.isGeoJsonGeometry) {
+        return;
+      }
+
+      // For Point geometries in edit mode, use a draggable marker
+      if (this.isGeoJsonPoint && this.isEditable) {
+        const [lng, lat] = this.value.coordinates;
+
+        // If marker exists, update its position instead of recreating
+        if (this.draggableMarker) {
+          const currentLatLng = this.draggableMarker.getLatLng();
+          // Only update if coordinates actually changed (avoid interrupting drag)
+          if (Math.abs(currentLatLng.lat - lat) > 0.0001 || Math.abs(currentLatLng.lng - lng) > 0.0001) {
+            this.draggableMarker.setLatLng([lat, lng]);
+          }
+        } else {
+          // Create new draggable marker
+          this.draggableMarker = L.marker([lat, lng], {
+            draggable: true
+          }).addTo(this.mapInstance);
+
+          // Add dragend event handler
+          this.draggableMarker.on('dragend', () => {
+            const newLat = this.draggableMarker.getLatLng().lat;
+            const newLng = this.draggableMarker.getLatLng().lng;
+            const newGeometry = {
+              type: 'Point',
+              coordinates: [newLng, newLat]
+            };
+            this.hasUnsavedChanges = true;
+            if (this.onChange) {
+              this.onChange(newGeometry);
+            }
+          });
+
+          // Center map on marker with appropriate zoom level
+          const currentZoom = this.mapInstance.getZoom();
+          // If zoom is too low (less than 10), set a good default zoom level (13)
+          const targetZoom = currentZoom < 10 ? 13 : currentZoom;
+          this.mapInstance.setView([lat, lng], targetZoom);
+        }
+
+        // Remove any existing non-draggable layer
+        if (this.mapLayer) {
+          this.mapLayer.remove();
+          this.mapLayer = null;
+        }
+
+        // Clean up polygon markers if they exist
+        this.draggableMarkers.forEach(marker => {
+          if (marker) marker.remove();
+        });
+        this.draggableMarkers = [];
+      } else if (this.isGeoJsonPolygon && this.isEditable) {
+        // Initialize current edited geometry if not set
+        if (!this.currentEditedGeometry) {
+          this.currentEditedGeometry = JSON.parse(JSON.stringify(this.value));
+        }
+
+        // For Polygon geometries in edit mode, create polygon layer with draggable vertex markers
+        // Use current edited geometry if available, otherwise use value
+        const polygonGeometryToUse = this.currentEditedGeometry || this.value;
+        const feature = {
+          type: 'Feature',
+          geometry: polygonGeometryToUse,
+          properties: {}
+        };
+
+        // Update or create polygon layer
+        if (this.mapLayer) {
+          this.mapLayer.remove();
+        }
+        this.mapLayer = L.geoJSON(feature, {
+          style: {
+            color: '#3388ff',
+            weight: 2,
+            opacity: 0.8,
+            fillOpacity: 0.2
+          },
+          interactive: this.isMultiPolygon // Only interactive for MultiPolygon (to allow edge clicks)
+        }).addTo(this.mapInstance);
+
+        // Add contextmenu handler to polygon edges to add vertices (only for MultiPolygon)
+        if (this.isMultiPolygon) {
+          this.mapLayer.eachLayer((layer) => {
+            layer.on('contextmenu', (e) => {
+              e.originalEvent.preventDefault();
+              e.originalEvent.stopPropagation();
+
+              // Check if clicking near an existing marker (using pixel distance)
+              const clickPoint = e.latlng;
+              const clickContainerPoint = this.mapInstance.latLngToContainerPoint(clickPoint);
+
+              const isClickingOnMarker = this.draggableMarkers.some(marker => {
+                if (!marker || !marker._icon) return false;
+                const markerLatLng = marker.getLatLng();
+                const markerContainerPoint = this.mapInstance.latLngToContainerPoint(markerLatLng);
+
+                // Calculate pixel distance
+                const dx = clickContainerPoint.x - markerContainerPoint.x;
+                const dy = clickContainerPoint.y - markerContainerPoint.y;
+                const pixelDistance = Math.sqrt(dx * dx + dy * dy);
+
+                // 15 pixel threshold - marker icon is about 12px, so 15px gives some buffer
+                return pixelDistance < 15;
+              });
+
+              if (!isClickingOnMarker) {
+                this.showAddVertexContextMenu(e.originalEvent, clickPoint);
+              }
+            });
+          });
+        }
+
+        // Make polygon layers non-interactive to avoid interfering with marker dragging
+        this.mapLayer.eachLayer((layer) => {
+          layer.setStyle({
+            interactive: this.isMultiPolygon, // Only interactive for MultiPolygon (for context menu)
+            stroke: true,
+            weight: 2,
+            opacity: 0.8
+          });
+          layer._path.style.pointerEvents = this.isMultiPolygon ? 'stroke' : 'none';
+        });
+
+        // Get the outer ring coordinates
+        // For Polygon: coordinates[0] is the outer ring
+        // For MultiPolygon: coordinates[0][0] is the first polygon's outer ring
+        // Use current edited geometry if available
+        const ringGeometryToUse = this.currentEditedGeometry || this.value;
+        let outerRing = [];
+
+        if (this.isMultiPolygon) {
+          // MultiPolygon structure: [[[[lng, lat], ...]], [[[lng, lat], ...]]]
+          // Get the first polygon's outer ring
+          if (ringGeometryToUse.coordinates[0] && ringGeometryToUse.coordinates[0][0]) {
+            outerRing = ringGeometryToUse.coordinates[0][0];
+          }
+        } else {
+          // Polygon structure: [[[lng, lat], ...]]
+          outerRing = ringGeometryToUse.coordinates[0] || [];
+        }
+
+        if (outerRing.length === 0) {
+          return;
+        }
+
+        // Determine how many markers we should have (accounting for closed rings)
+        const isClosedRing = outerRing.length > 0 &&
+          outerRing[0][0] === outerRing[outerRing.length - 1][0] &&
+          outerRing[0][1] === outerRing[outerRing.length - 1][1];
+        const expectedMarkerCount = isClosedRing ? outerRing.length - 1 : outerRing.length;
+
+        // Remove existing markers if count doesn't match
+        if (this.draggableMarkers.length !== expectedMarkerCount && !this.isCreatingMarkers) {
+          this.isCreatingMarkers = true;
+          this.draggableMarkers.forEach(marker => {
+            if (marker) marker.remove();
+          });
+          this.draggableMarkers = [];
+
+          // Create draggable markers for each vertex
+          // Use setTimeout to ensure markers are added after polygon layer is fully rendered
+          this.$nextTick(() => {
+            // GeoJSON polygons typically have the first and last coordinate the same (closed ring)
+            // We'll create markers for all coordinates except the last one if it's a duplicate
+            // But we need to track the original index for updating the correct coordinate
+            const isClosedRing = outerRing.length > 0 &&
+              outerRing[0][0] === outerRing[outerRing.length - 1][0] &&
+              outerRing[0][1] === outerRing[outerRing.length - 1][1];
+
+            const coordsToProcess = isClosedRing
+              ? outerRing.slice(0, -1) // Skip last coordinate if it's a duplicate of first
+              : outerRing;
+
+            coordsToProcess.forEach((coord, visibleIndex) => {
+              // visibleIndex is the index in the visible markers array
+              // actualIndex is the index in the coordinates array (same for non-closed rings)
+              const actualIndex = visibleIndex;
+              if (!Array.isArray(coord) || coord.length < 2) {
+                return;
+              }
+
+              const [lng, lat] = coord;
+
+              // Create a custom icon for the vertex marker
+              const icon = L.divIcon({
+                className: 'polygon-vertex-marker',
+                html: '<div style="width: 12px; height: 12px; background-color: #3388ff; border: 2px solid white; border-radius: 50%; cursor: move;"></div>',
+                iconSize: [12, 12],
+                iconAnchor: [6, 6]
+              });
+
+              const marker = L.marker([lat, lng], {
+                draggable: true,
+                icon: icon,
+                zIndexOffset: 1000, // Ensure markers are above polygon layer
+                riseOnHover: true, // Bring marker to front on hover
+                bubblingMouseEvents: false // Prevent events from bubbling to polygon
+              });
+
+              // Add marker to map
+              marker.addTo(this.mapInstance);
+
+              // Ensure marker is in the marker pane (above overlay pane where polygon is)
+              // Note: markers don't have bringToFront(), we use zIndexOffset and DOM manipulation
+              if (marker._icon) {
+                marker._icon.style.pointerEvents = 'auto';
+                marker._icon.style.zIndex = (1001 + visibleIndex).toString(); // Unique z-index for each marker
+                // Move marker icon to top of marker pane
+                if (marker._icon.parentNode) {
+                  marker._icon.parentNode.appendChild(marker._icon);
+                }
+              }
+
+              // Add dragend event handler
+              // Store the actualIndex in closure for this marker
+              const markerActualIndex = actualIndex;
+              const markerIsFirstInClosedRing = isClosedRing && actualIndex === 0;
+
+              // Add right-click handler to show context menu
+              marker.on('contextmenu', (e) => {
+                e.originalEvent.preventDefault();
+                e.originalEvent.stopPropagation();
+                this.showContextMenu(e.originalEvent, markerActualIndex, marker);
+                return false;
+              });
+
+              // Also attach directly to icon element as the event might not bubble to marker
+              if (marker._icon) {
+                marker._icon.addEventListener('contextmenu', (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  this.showContextMenu(e, markerActualIndex, marker);
+                  return false;
+                }, true); // Use capture phase
+              }
+
+              marker.on('dragend', () => {
+                const newLat = marker.getLatLng().lat;
+                const newLng = marker.getLatLng().lng;
+
+                // Use current edited geometry if available, otherwise use original value
+                const baseGeometry = this.currentEditedGeometry || this.value;
+                const newCoordinates = JSON.parse(JSON.stringify(baseGeometry.coordinates));
+
+                // Get the outer ring to check if it's closed
+                let outerRing = [];
+                if (this.isMultiPolygon) {
+                  outerRing = newCoordinates[0][0] || [];
+                } else {
+                  outerRing = newCoordinates[0] || [];
+                }
+
+                // Check if this is a closed ring
+                const isClosedRingNow = outerRing.length > 0 &&
+                  outerRing[0][0] === outerRing[outerRing.length - 1][0] &&
+                  outerRing[0][1] === outerRing[outerRing.length - 1][1];
+
+                // Update the coordinate
+                if (this.isMultiPolygon) {
+                  // MultiPolygon: coordinates[0][0][index] = [lng, lat]
+                  newCoordinates[0][0][markerActualIndex] = [newLng, newLat];
+                  // If closed ring and this is the first coordinate, also update the closing coordinate
+                  if (isClosedRingNow && markerIsFirstInClosedRing) {
+                    newCoordinates[0][0][outerRing.length - 1] = [newLng, newLat];
+                  }
+                } else {
+                  // Polygon: coordinates[0][index] = [lng, lat]
+                  newCoordinates[0][markerActualIndex] = [newLng, newLat];
+                  // If closed ring and this is the first coordinate, also update the closing coordinate
+                  if (isClosedRingNow && markerIsFirstInClosedRing) {
+                    newCoordinates[0][outerRing.length - 1] = [newLng, newLat];
+                  }
+                }
+
+                // Validate coordinate structure before creating geometry
+                try {
+                  // Ensure coordinates are valid numbers
+                  if (isNaN(newLng) || isNaN(newLat)) {
+                    throw new Error(`Invalid coordinates: [${newLng}, ${newLat}]`);
+                  }
+
+                  const newGeometry = {
+                    type: baseGeometry.type, // Preserve Polygon or MultiPolygon type
+                    coordinates: newCoordinates
+                  };
+
+                  // Validate the geometry structure
+                  if (!newGeometry.type || !Array.isArray(newGeometry.coordinates)) {
+                    throw new Error('Invalid geometry structure');
+                  }
+
+                  // Store the current edited geometry state
+                  this.currentEditedGeometry = newGeometry;
+                  this.hasUnsavedChanges = true;
+
+                  // Update the polygon layer immediately for visual feedback
+                  this.updatePolygonLayer(newGeometry);
+
+                  // Notify parent of the change
+                  if (this.onChange) {
+                    this.onChange(newGeometry);
+                  }
+                } catch (error) {
+                  // Log errors to aid debugging while still preventing UI crashes
+                  console.error('Error updating geometry on marker dragend:', error);
+                }
+              });
+
+              this.draggableMarkers.push(marker);
+            });
+            // Reset the guard after all markers are created
+            this.isCreatingMarkers = false;
+          });
+        } else {
+          // Update existing marker positions if coordinates changed
+          // Get the correct outer ring based on geometry type
+          // Use current edited geometry if available
+          const updateGeometryToUse = this.currentEditedGeometry || this.value;
+          let currentOuterRing = [];
+          if (this.isMultiPolygon) {
+            if (updateGeometryToUse.coordinates[0] && updateGeometryToUse.coordinates[0][0]) {
+              currentOuterRing = updateGeometryToUse.coordinates[0][0];
+            }
+          } else {
+            currentOuterRing = updateGeometryToUse.coordinates[0] || [];
+          }
+
+          currentOuterRing.forEach((coord, index) => {
+            const [lng, lat] = coord;
+            const marker = this.draggableMarkers[index];
+            if (marker) {
+              const currentLatLng = marker.getLatLng();
+              // Only update if coordinates actually changed (avoid interrupting drag)
+              if (Math.abs(currentLatLng.lat - lat) > 0.0001 || Math.abs(currentLatLng.lng - lng) > 0.0001) {
+                marker.setLatLng([lat, lng]);
+              }
+            }
+          });
+
+          // Update polygon layer to reflect any coordinate changes
+          // Use current edited geometry if available, otherwise use value
+          const layerGeometryToUse = this.currentEditedGeometry || this.value;
+          this.updatePolygonLayer(layerGeometryToUse);
+        }
+
+        // Remove point marker if it exists
+        if (this.draggableMarker) {
+          this.draggableMarkers = this.draggableMarkers.filter(marker => marker !== this.draggableMarker);
+          this.draggableMarker.remove();
+          this.draggableMarker = null;
+        }
+
+        // Fit bounds to polygon
+        const bounds = this.mapLayer.getBounds();
+        if (bounds.isValid()) {
+          const currentZoom = this.mapInstance.getZoom();
+          if (currentZoom < 10) {
+            this.mapInstance.fitBounds(bounds, { maxZoom: 16 });
+          } else {
+            // Just ensure polygon is visible, don't change zoom if already zoomed in
+            if (!bounds.contains(this.mapInstance.getBounds())) {
+              this.mapInstance.fitBounds(bounds, { maxZoom: 16 });
+            }
+          }
+        }
+      } else {
+        // For other geometries or non-editable mode, use standard GeoJSON layer
+        if (this.draggableMarker) {
+          this.draggableMarker.remove();
+          this.draggableMarker = null;
+        }
+
+        // Clean up polygon markers
+        this.draggableMarkers.forEach(marker => {
+          if (marker) marker.remove();
+        });
+        this.draggableMarkers = [];
+
+        if (this.mapLayer) {
+          this.mapLayer.remove();
+        }
+
+        const feature = {
+          type: 'Feature',
+          geometry: this.value,
+          properties: {}
+        };
+
+        this.mapLayer = L.geoJSON(feature).addTo(this.mapInstance);
+        const bounds = this.mapLayer.getBounds();
+        if (bounds.isValid()) {
+          this.mapInstance.fitBounds(bounds, { maxZoom: 16 });
+        }
+      }
+    },
+    updatePolygonLayer(geometry) {
+      if (!this.mapInstance || !this.mapLayer) {
+        return;
+      }
+
+      // Remove old layer
+      this.mapLayer.remove();
+
+      // Create new layer with updated geometry
+      const feature = {
+        type: 'Feature',
+        geometry: geometry,
+        properties: {}
+      };
+
+      this.mapLayer = L.geoJSON(feature, {
+        style: {
+          color: '#3388ff',
+          weight: 2,
+          opacity: 0.8,
+          fillOpacity: 0.2
+        },
+        interactive: this.isMultiPolygon // Only interactive for MultiPolygon (to allow edge clicks)
+      }).addTo(this.mapInstance);
+
+      // Add contextmenu handler to polygon edges to add vertices (only for MultiPolygon)
+      if (this.isMultiPolygon && this.mapLayer.eachLayer) {
+        this.mapLayer.eachLayer((layer) => {
+          // Remove any existing contextmenu handlers first
+          layer.off('contextmenu');
+
+          layer.on('contextmenu', (e) => {
+            e.originalEvent.preventDefault();
+            e.originalEvent.stopPropagation();
+
+            const clickPoint = e.latlng;
+            const clickContainerPoint = this.mapInstance.latLngToContainerPoint(clickPoint);
+
+            // Check if clicking near an existing marker
+            const isClickingOnMarker = this.draggableMarkers.some(marker => {
+              if (!marker || !marker._icon) return false;
+              const markerLatLng = marker.getLatLng();
+              const markerContainerPoint = this.mapInstance.latLngToContainerPoint(markerLatLng);
+
+              const dx = clickContainerPoint.x - markerContainerPoint.x;
+              const dy = clickContainerPoint.y - markerContainerPoint.y;
+              const pixelDistance = Math.sqrt(dx * dx + dy * dy);
+
+              return pixelDistance < 15;
+            });
+
+            if (!isClickingOnMarker) {
+              this.showAddVertexContextMenu(e.originalEvent, clickPoint);
+            }
+          });
+
+          // Style polygon layer
+          if (layer.setStyle) {
+            layer.setStyle({
+              interactive: true,
+              stroke: true,
+              weight: 2,
+              opacity: 0.8
+            });
+          }
+
+          if (layer._path) {
+            layer._path.style.pointerEvents = 'stroke';
+          }
+        });
+      } else if (!this.isMultiPolygon && this.mapLayer.eachLayer) {
+        // For regular Polygon, ensure it's non-interactive
+        this.mapLayer.eachLayer((layer) => {
+          layer.off('contextmenu'); // Remove any contextmenu handlers
+          if (layer.setStyle) {
+            layer.setStyle({ interactive: false });
+          }
+          if (layer._path) {
+            layer._path.style.pointerEvents = 'none';
+          }
+        });
+      }
+
+      // Bring all markers to front after updating polygon
+      // Note: markers don't have bringToFront(), we manipulate DOM directly
+      this.draggableMarkers.forEach((marker, index) => {
+        if (marker && marker._icon && marker._icon.parentNode) {
+          marker._icon.style.zIndex = (1001 + index).toString();
+          marker._icon.parentNode.appendChild(marker._icon);
+        }
+      });
+    },
+    showContextMenu(event, index, marker) {
+      // Hide any existing context menu
+      this.hideContextMenu();
+
+      // Store the marker for deletion
+      this.contextMenuMarker = { index, marker, type: 'vertex' };
+
+      // Create context menu if it doesn't exist
+      if (!this.contextMenu) {
+        this.contextMenu = document.createElement('div');
+        this.contextMenu.className = 'leaflet-context-menu';
+
+        // Append to map container so it's positioned relative to the map
+        if (this.mapInstance && this.mapInstance.getContainer()) {
+          this.mapInstance.getContainer().appendChild(this.contextMenu);
+        } else {
+          document.body.appendChild(this.contextMenu);
+        }
+      }
+
+      // Clear existing menu items
+      this.contextMenu.innerHTML = '';
+
+      // Add Delete option for vertices
+      const deleteItem = document.createElement('div');
+      deleteItem.className = 'leaflet-context-menu-item delete';
+      deleteItem.textContent = 'Delete';
+      deleteItem.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (this.contextMenuMarker && this.contextMenuMarker.type === 'vertex') {
+          this.deleteVertex(this.contextMenuMarker.index, this.contextMenuMarker.marker);
+        }
+        this.hideContextMenu();
+      });
+      this.contextMenu.appendChild(deleteItem);
+
+      // Get map container position for relative positioning
+      const mapContainer = this.mapInstance ? this.mapInstance.getContainer() : null;
+      let left = event.clientX;
+      let top = event.clientY;
+
+      if (mapContainer) {
+        const rect = mapContainer.getBoundingClientRect();
+        left = event.clientX - rect.left;
+        top = event.clientY - rect.top;
+        this.contextMenu.style.position = 'absolute';
+      } else {
+        this.contextMenu.style.position = 'fixed';
+      }
+
+      // Position the context menu at the click location
+      this.contextMenu.style.left = left + 'px';
+      this.contextMenu.style.top = top + 'px';
+      this.contextMenu.style.display = 'block';
+
+      // Hide context menu when clicking elsewhere
+      const hideMenu = (e) => {
+        if (this.contextMenu && !this.contextMenu.contains(e.target)) {
+          this.hideContextMenu();
+          document.removeEventListener('click', hideMenu);
+          document.removeEventListener('contextmenu', hideMenu);
+        }
+      };
+
+      // Use setTimeout to avoid immediate hide from the current click
+      setTimeout(() => {
+        document.addEventListener('click', hideMenu);
+        document.addEventListener('contextmenu', hideMenu);
+      }, 10);
+    },
+    hideContextMenu() {
+      if (this.contextMenu) {
+        this.contextMenu.style.display = 'none';
+      }
+      this.contextMenuMarker = null;
+    },
+    showAddVertexContextMenu(event, latlng) {
+      // Hide any existing context menu
+      this.hideContextMenu();
+
+      // Store the location for adding vertex
+      this.contextMenuMarker = { latlng, type: 'edge' };
+
+      // Create context menu if it doesn't exist
+      if (!this.contextMenu) {
+        this.contextMenu = document.createElement('div');
+        this.contextMenu.className = 'leaflet-context-menu';
+
+        // Append to map container so it's positioned relative to the map
+        if (this.mapInstance && this.mapInstance.getContainer()) {
+          this.mapInstance.getContainer().appendChild(this.contextMenu);
+        } else {
+          document.body.appendChild(this.contextMenu);
+        }
+      }
+
+      // Clear existing menu items
+      this.contextMenu.innerHTML = '';
+
+      // Add "Add Vertex" option
+      const addVertexItem = document.createElement('div');
+      addVertexItem.className = 'leaflet-context-menu-item';
+      addVertexItem.textContent = 'Add Vertex';
+      addVertexItem.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (this.contextMenuMarker && this.contextMenuMarker.type === 'edge') {
+          this.addVertexAtLocation(this.contextMenuMarker.latlng);
+        }
+        this.hideContextMenu();
+      });
+      this.contextMenu.appendChild(addVertexItem);
+
+      // Position the context menu
+      const mapContainer = this.mapInstance ? this.mapInstance.getContainer() : null;
+      let left = event.clientX;
+      let top = event.clientY;
+
+      if (mapContainer) {
+        const rect = mapContainer.getBoundingClientRect();
+        left = event.clientX - rect.left;
+        top = event.clientY - rect.top;
+        this.contextMenu.style.position = 'absolute';
+      } else {
+        this.contextMenu.style.position = 'fixed';
+      }
+
+      this.contextMenu.style.left = left + 'px';
+      this.contextMenu.style.top = top + 'px';
+      this.contextMenu.style.display = 'block';
+
+      // Hide menu when clicking elsewhere
+      const hideMenu = (e) => {
+        if (!this.contextMenu || !this.contextMenu.contains(e.target)) {
+          this.hideContextMenu();
+          document.removeEventListener('click', hideMenu);
+        }
+      };
+      setTimeout(() => {
+        document.addEventListener('click', hideMenu);
+      }, 0);
+    },
+    addVertexAtLocation(latlng) {
+      // Get current geometry
+      const baseGeometry = this.currentEditedGeometry || this.value;
+      const newCoordinates = JSON.parse(JSON.stringify(baseGeometry.coordinates));
+
+      // Get the outer ring
+      let outerRing = [];
+      if (this.isMultiPolygon) {
+        outerRing = newCoordinates[0][0] || [];
+      } else {
+        outerRing = newCoordinates[0] || [];
+      }
+
+      if (outerRing.length === 0) {
+        return;
+      }
+
+      // Check if this is a closed ring
+      const isClosedRing = outerRing.length > 0 &&
+        outerRing[0][0] === outerRing[outerRing.length - 1][0] &&
+        outerRing[0][1] === outerRing[outerRing.length - 1][1];
+
+      // Convert latlng to [lng, lat] format
+      const newCoord = [latlng.lng, latlng.lat];
+
+      // Find the closest edge segment and insert the vertex
+      let closestEdgeIndex = 0;
+      let minDistance = Infinity;
+
+      // Check each edge segment
+      for (let i = 0; i < outerRing.length - 1; i++) {
+        const p1 = outerRing[i];
+        const p2 = outerRing[i + 1];
+
+        // Calculate distance from click point to edge segment
+        const distance = this.distanceToLineSegment(
+          [latlng.lng, latlng.lat],
+          [p1[0], p1[1]],
+          [p2[0], p2[1]]
+        );
+
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestEdgeIndex = i + 1; // Insert after point i
+        }
+      }
+
+      // For closed rings, also check the edge from last to first
+      if (isClosedRing) {
+        const p1 = outerRing[outerRing.length - 1];
+        const p2 = outerRing[0];
+        const distance = this.distanceToLineSegment(
+          [latlng.lng, latlng.lat],
+          [p1[0], p1[1]],
+          [p2[0], p2[1]]
+        );
+
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestEdgeIndex = outerRing.length; // Insert at end (before closing coordinate)
+        }
+      }
+
+      // Insert the new coordinate
+      if (this.isMultiPolygon) {
+        newCoordinates[0][0].splice(closestEdgeIndex, 0, newCoord);
+        // If it was a closed ring, update the closing coordinate
+        if (isClosedRing) {
+          newCoordinates[0][0][newCoordinates[0][0].length - 1] = newCoordinates[0][0][0];
+        }
+      } else {
+        newCoordinates[0].splice(closestEdgeIndex, 0, newCoord);
+        // If it was a closed ring, update the closing coordinate
+        if (isClosedRing) {
+          newCoordinates[0][newCoordinates[0].length - 1] = newCoordinates[0][0];
+        }
+      }
+
+      const newGeometry = {
+        type: baseGeometry.type,
+        coordinates: newCoordinates
+      };
+
+      // Store the current edited geometry state
+      this.currentEditedGeometry = newGeometry;
+      this.hasUnsavedChanges = true;
+
+      // Update the polygon layer and recreate markers
+      this.updatePolygonLayer(newGeometry);
+      this.$nextTick(() => {
+        this.updateMapLayer();
+      });
+
+      // Notify parent of the change
+      if (this.onChange) {
+        this.onChange(newGeometry);
+      }
+    },
+    distanceToLineSegment(point, lineStart, lineEnd) {
+      // Calculate distance from point to line segment
+      // point, lineStart, lineEnd are [lng, lat] arrays
+      const A = point[0] - lineStart[0];
+      const B = point[1] - lineStart[1];
+      const C = lineEnd[0] - lineStart[0];
+      const D = lineEnd[1] - lineStart[1];
+
+      const dot = A * C + B * D;
+      const lenSq = C * C + D * D;
+      let param = -1;
+
+      if (lenSq !== 0) {
+        param = dot / lenSq;
+      }
+
+      let xx, yy;
+
+      if (param < 0) {
+        xx = lineStart[0];
+        yy = lineStart[1];
+      } else if (param > 1) {
+        xx = lineEnd[0];
+        yy = lineEnd[1];
+      } else {
+        xx = lineStart[0] + param * C;
+        yy = lineStart[1] + param * D;
+      }
+
+      const dx = point[0] - xx;
+      const dy = point[1] - yy;
+
+      // Use simple Euclidean distance (approximation for small areas)
+      return Math.sqrt(dx * dx + dy * dy);
+    },
+    deleteVertex(index, marker) {
+      // Get current geometry
+      const baseGeometry = this.currentEditedGeometry || this.value;
+      const newCoordinates = JSON.parse(JSON.stringify(baseGeometry.coordinates));
+
+      // Get the outer ring
+      let outerRing = [];
+      if (this.isMultiPolygon) {
+        outerRing = newCoordinates[0][0] || [];
+      } else {
+        outerRing = newCoordinates[0] || [];
+      }
+
+      // Check if this is a closed ring
+      const isClosedRing = outerRing.length > 0 &&
+        outerRing[0][0] === outerRing[outerRing.length - 1][0] &&
+        outerRing[0][1] === outerRing[outerRing.length - 1][1];
+
+      // Minimum vertices for a valid polygon (3 for triangle, but GeoJSON requires at least 4 for closed ring)
+      const minVertices = isClosedRing ? 4 : 3;
+
+      // Don't allow deletion if we'd have too few vertices
+      const currentVertexCount = isClosedRing ? outerRing.length - 1 : outerRing.length;
+      if (currentVertexCount < minVertices) {
+        const message = isClosedRing
+          ? `Cannot delete vertex. A polygon requires at least ${minVertices} vertices (including the closing vertex).`
+          : `Cannot delete vertex. A polygon requires at least ${minVertices} vertices.`;
+        this.$toast.error(message, {
+          timeout: 5000
+        });
+        this.hideContextMenu();
+        return; // Can't delete - would make invalid polygon
+      }
+
+      // Remove the coordinate
+      if (this.isMultiPolygon) {
+        newCoordinates[0][0].splice(index, 1);
+        // If it was a closed ring and we removed a coordinate, update the closing coordinate
+        if (isClosedRing && index === 0) {
+          // If we deleted the first coordinate, the new first becomes the closing coordinate
+          newCoordinates[0][0][newCoordinates[0][0].length - 1] = newCoordinates[0][0][0];
+        } else if (isClosedRing && index === outerRing.length - 1) {
+          // If we deleted the closing coordinate, update it to match the first
+          newCoordinates[0][0][newCoordinates[0][0].length - 1] = newCoordinates[0][0][0];
+        }
+      } else {
+        newCoordinates[0].splice(index, 1);
+        // If it was a closed ring and we removed a coordinate, update the closing coordinate
+        if (isClosedRing && index === 0) {
+          // If we deleted the first coordinate, the new first becomes the closing coordinate
+          newCoordinates[0][newCoordinates[0].length - 1] = newCoordinates[0][0];
+        } else if (isClosedRing && index === outerRing.length - 1) {
+          // If we deleted the closing coordinate, update it to match the first
+          newCoordinates[0][newCoordinates[0].length - 1] = newCoordinates[0][0];
+        }
+      }
+
+      const newGeometry = {
+        type: baseGeometry.type,
+        coordinates: newCoordinates
+      };
+
+      // Store the current edited geometry state
+      this.currentEditedGeometry = newGeometry;
+      this.hasUnsavedChanges = true;
+
+      // Remove all markers and force recreation (needed because marker closures capture indices)
+      this.draggableMarkers.forEach(m => {
+        if (m) m.remove();
+      });
+      this.draggableMarkers = [];
+
+      // Update the polygon layer and recreate markers
+      this.updatePolygonLayer(newGeometry);
+      this.$nextTick(() => {
+        this.updateMapLayer();
+      });
+
+      // Notify parent of the change
+      if (this.onChange) {
+        this.onChange(newGeometry);
+      }
+    },
+    undoDelete() {
+      // Restore the original geometry (undo all changes)
+      if (!this.originalGeometry) {
+        return;
+      }
+
+      const restoredGeometry = JSON.parse(JSON.stringify(this.originalGeometry));
+
+      // Clear all edited state
+      this.currentEditedGeometry = null;
+      this.hasUnsavedChanges = false;
+
+      // Update the map to show the original geometry
+      if (this.isGeoJsonPoint) {
+        this.$nextTick(() => {
+          this.updateMapLayer();
+        });
+      } else if (this.isGeoJsonPolygon) {
+        this.updatePolygonLayer(restoredGeometry);
+        this.$nextTick(() => {
+          this.updateMapLayer();
+        });
+      }
+
+      // Notify parent of the change (restore to original)
+      if (this.onChange) {
+        this.onChange(restoredGeometry);
+      }
     }
   }
 });
 
+
 /***/ },
 
 /***/ "./frontend/src/document-details/document-details.css"
@@ -3289,7 +4358,7 @@ module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-de
 (module) {
 
 "use strict";
-module.exports = "<div class=\"border border-gray-200 bg-white rounded-lg mb-2\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-1 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out\"\n    :class=\"{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-gray-100': !highlight }\"\n  >\n    <div class=\"flex items-center\" >\n      <svg\n        :class=\"isCollapsed ? 'rotate-0' : 'rotate-90'\"\n        class=\"w-4 h-4 text-gray-500 mr-2 transition-transform duration-200\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n      </svg>\n      <span class=\"font-medium text-gray-900\">{{path.path}}</span>\n      <span class=\"ml-2 text-sm text-gray-500\">({{(path.instance || 'unknown').toLowerCase()}})</span>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-gray-300 bg-white\"\n        @click.stop.prevent=\"copyPropertyValue\"\n        title=\"Copy value\"\n        aria-label=\"Copy property value\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h8m-8 4h8m-8 4h5m-7-9a2 2 0 012-2h7a2 2 0 012 2v10a2 2 0 01-2 2H8l-4-4V7a2 2 0 012-2z\" />\n        </svg>\n        {{copyButtonLabel}}\n      </button>\n      <router-link\n        v-if=\"path.ref && getValueForPath(path.path)\"\n        :to=\"`/model/${path.ref}/document/${getValueForPath(path.path)}`\"\n        class=\"bg-ultramarine-600 hover:bg-ultramarine-500 text-white px-2 py-1 text-sm rounded-md\"\n        @click.stop\n        >View Document\n      </router-link>\n    </div>\n  </div>\n\n  <!-- Collapsible Content -->\n  <div v-if=\"!isCollapsed\" class=\"p-2\">\n    <!-- Date Type Selector (when editing dates) -->\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"mb-3 flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n\n    <!-- Field Content -->\n    <div v-if=\"editting && path.path !== '_id'\">\n      <component\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        v-bind=\"getEditComponentProps(path)\"\n        @input=\"handleInputChange($event)\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else>\n      <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->\n      <!-- Special handling for truncated arrays -->\n      <div v-if=\"isArray && shouldShowTruncated\" class=\"w-full\">\n        <div class=\"mt-2\">\n          <div\n            v-for=\"(item, index) in truncatedArrayItems\"\n            :key=\"index\"\n            class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600\">\n            <div class=\"absolute -left-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600\">{{ index }}</div>\n            <div v-if=\"arrayUtils.isObjectItem(item)\" class=\"flex flex-col gap-1 mt-1 px-2\">\n              <div\n                v-for=\"key in arrayUtils.getItemKeys(item)\"\n                :key=\"key\"\n                class=\"flex items-start gap-2 text-xs font-mono\">\n                <span class=\"font-semibold text-gray-600 flex-shrink-0 min-w-[80px]\">{{ key }}:</span>\n                <span class=\"text-gray-800 break-words whitespace-pre-wrap flex-1\">{{ arrayUtils.formatItemValue(item, key) }}</span>\n              </div>\n            </div>\n            <div v-else class=\"text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1\">{{ arrayUtils.formatValue(item) }}</div>\n          </div>\n          <div class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative opacity-70 hover:opacity-100\">\n            <div class=\"text-xs py-1.5 px-2 font-mono text-gray-500 italic break-words whitespace-pre-wrap mt-1\">\n              ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}\n            </div>\n          </div>\n        </div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show all {{ arrayValue.length }} items\n        </button>\n      </div>\n      <!-- Non-array truncated view -->\n      <div v-else-if=\"shouldShowTruncated && !isArray\" class=\"relative\">\n        <div class=\"text-gray-700 whitespace-pre-wrap break-words font-mono text-sm\">{{truncatedString}}</div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show more ({{valueAsString.length}} characters)\n        </button>\n      </div>\n      <!-- Expanded view -->\n      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"relative\">\n        <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show less\n        </button>\n      </div>\n      <!-- Full view (no truncation needed) -->\n      <div v-else>\n        <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"border border-gray-200 bg-white rounded-lg mb-2\" style=\"overflow: visible;\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-1 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out\"\n    :class=\"{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-gray-100': !highlight }\"\n    style=\"overflow: visible; position: relative;\"\n  >\n    <div class=\"flex items-center\" >\n      <svg\n        :class=\"isCollapsed ? 'rotate-0' : 'rotate-90'\"\n        class=\"w-4 h-4 text-gray-500 mr-2 transition-transform duration-200\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n      </svg>\n      <span class=\"font-medium text-gray-900\">{{path.path}}</span>\n      <span class=\"ml-2 text-sm text-gray-500\">({{(path.instance || 'unknown').toLowerCase()}})</span>\n      <div v-if=\"isGeoJsonGeometry\" class=\"ml-3 inline-flex items-center gap-2\">\n        <div class=\"inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold\">\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-gray-700 hover:text-gray-900'\"\n            :style=\"detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('text')\">\n            Text\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-gray-700 hover:text-gray-900'\"\n            :style=\"detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('map')\">\n            Map\n          </button>\n        </div>\n        <!-- Info icon with tooltip -->\n        <div v-if=\"editting\" class=\"relative inline-block\" style=\"z-index: 10002;\" @mouseenter=\"showTooltip = true\" @mouseleave=\"showTooltip = false\" @click.stop>\n          <svg\n            ref=\"infoIcon\"\n            class=\"w-6 h-6 text-gray-400 hover:text-gray-600 cursor-help\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n          </svg>\n          <div\n            v-show=\"showTooltip\"\n            ref=\"tooltip\"\n            class=\"absolute left-full top-0 ml-2 w-64 p-3 text-white text-xs rounded-lg shadow-xl\"\n            style=\"z-index: 99999; pointer-events: none; white-space: normal; position: fixed; background-color: #111827;\"\n            :style=\"getTooltipStyle()\"\n          >\n            <div class=\"font-semibold mb-2\">Map Controls:</div>\n            <div v-if=\"isGeoJsonPoint\" class=\"space-y-1\">\n              <div>• Drag pin to move location</div>\n            </div>\n            <div v-else-if=\"isGeoJsonPolygon\" class=\"space-y-1\">\n              <div>• Drag vertices to reshape polygon</div>\n              <div v-if=\"isMultiPolygon\">• Right-click edge to add new vertex</div>\n              <div>• Right-click vertex to delete</div>\n            </div>\n            <div class=\"absolute top-2 -left-1 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-gray-900\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-gray-300 bg-white\"\n        @click.stop.prevent=\"copyPropertyValue\"\n        title=\"Copy value\"\n        aria-label=\"Copy property value\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h8m-8 4h8m-8 4h5m-7-9a2 2 0 012-2h7a2 2 0 012 2v10a2 2 0 01-2 2H8l-4-4V7a2 2 0 012-2z\" />\n        </svg>\n        {{copyButtonLabel}}\n      </button>\n      <router-link\n        v-if=\"path.ref && getValueForPath(path.path)\"\n        :to=\"`/model/${path.ref}/document/${getValueForPath(path.path)}`\"\n        class=\"bg-ultramarine-600 hover:bg-ultramarine-500 text-white px-2 py-1 text-sm rounded-md\"\n        @click.stop\n        >View Document\n      </router-link>\n    </div>\n  </div>\n\n  <!-- Collapsible Content -->\n  <div v-if=\"!isCollapsed\" class=\"p-2\">\n    <!-- Date Type Selector (when editing dates) -->\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"mb-3 flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n\n    <!-- Field Content -->\n    <div v-if=\"editting && path.path !== '_id'\">\n      <!-- Use detail-default with map editing for GeoJSON geometries -->\n      <component\n        v-if=\"isGeoJsonGeometry\"\n        :is=\"getComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :view-mode=\"detailViewMode\"\n        :on-change=\"handleInputChange\"\n        >\n      </component>\n      <!-- Use standard edit components for other types -->\n      <component\n        v-else\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        v-bind=\"getEditComponentProps(path)\"\n        @input=\"handleInputChange($event)\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else>\n      <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->\n      <!-- Special handling for truncated arrays -->\n      <div v-if=\"isArray && shouldShowTruncated\" class=\"w-full\">\n        <div class=\"mt-2\">\n          <div\n            v-for=\"(item, index) in truncatedArrayItems\"\n            :key=\"index\"\n            class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600\">\n            <div class=\"absolute -left-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600\">{{ index }}</div>\n            <div v-if=\"arrayUtils.isObjectItem(item)\" class=\"flex flex-col gap-1 mt-1 px-2\">\n              <div\n                v-for=\"key in arrayUtils.getItemKeys(item)\"\n                :key=\"key\"\n                class=\"flex items-start gap-2 text-xs font-mono\">\n                <span class=\"font-semibold text-gray-600 flex-shrink-0 min-w-[80px]\">{{ key }}:</span>\n                <span class=\"text-gray-800 break-words whitespace-pre-wrap flex-1\">{{ arrayUtils.formatItemValue(item, key) }}</span>\n              </div>\n            </div>\n            <div v-else class=\"text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1\">{{ arrayUtils.formatValue(item) }}</div>\n          </div>\n          <div class=\"mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative opacity-70 hover:opacity-100\">\n            <div class=\"text-xs py-1.5 px-2 font-mono text-gray-500 italic break-words whitespace-pre-wrap mt-1\">\n              ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}\n            </div>\n          </div>\n        </div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show all {{ arrayValue.length }} items\n        </button>\n      </div>\n      <!-- Non-array truncated view -->\n      <div v-else-if=\"shouldShowTruncated && !isArray\" class=\"relative\">\n        <div class=\"text-gray-700 whitespace-pre-wrap break-words font-mono text-sm\">{{truncatedString}}</div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show more ({{valueAsString.length}} characters)\n        </button>\n      </div>\n      <!-- Expanded view -->\n      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"relative\">\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"getValueForPath(path.path)\"\n          :view-mode=\"detailViewMode\"></component>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show less\n        </button>\n      </div>\n      <!-- Full view (no truncation needed) -->\n      <div v-else>\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"getValueForPath(path.path)\"\n          :view-mode=\"detailViewMode\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -3319,8 +4388,10 @@ module.exports = app => app.component('document-property', {
       dateType: 'picker', // picker, iso
       isCollapsed: false, // Start uncollapsed by default
       isValueExpanded: false, // Track if the value is expanded
+      detailViewMode: 'text',
       copyButtonLabel: 'Copy',
-      copyResetTimeoutId: null
+      copyResetTimeoutId: null,
+      showTooltip: false
     };
   },
   beforeDestroy() {
@@ -3394,9 +4465,58 @@ module.exports = app => app.component('document-property', {
         return this.arrayValue.length - 2;
       }
       return 0;
+    },
+    isGeoJsonGeometry() {
+      const value = this.getValueForPath(this.path.path);
+      return value != null
+        && typeof value === 'object'
+        && !Array.isArray(value)
+        && Object.prototype.hasOwnProperty.call(value, 'type')
+        && Object.prototype.hasOwnProperty.call(value, 'coordinates');
+    },
+    isGeoJsonPoint() {
+      const value = this.getValueForPath(this.path.path);
+      return this.isGeoJsonGeometry && value.type === 'Point';
+    },
+    isGeoJsonPolygon() {
+      const value = this.getValueForPath(this.path.path);
+      return this.isGeoJsonGeometry && (value.type === 'Polygon' || value.type === 'MultiPolygon');
+    },
+    isMultiPolygon() {
+      const value = this.getValueForPath(this.path.path);
+      return this.isGeoJsonGeometry && value.type === 'MultiPolygon';
+    }
+  },
+  watch: {
+    isGeoJsonGeometry(newValue) {
+      if (!newValue) {
+        this.detailViewMode = 'text';
+      } else if (this.editting) {
+        // Default to map view when editing GeoJSON
+        this.detailViewMode = 'map';
+      }
+    },
+    editting(newValue) {
+      // When entering edit mode for GeoJSON, default to map view
+      if (newValue && this.isGeoJsonGeometry) {
+        this.detailViewMode = 'map';
+      }
     }
   },
   methods: {
+    setDetailViewMode(mode) {
+      this.detailViewMode = mode;
+      
+      // When switching to map view, expand the container and value so the map is visible
+      if (mode === 'map' && this.isGeoJsonGeometry) {
+        if (this.isCollapsed) {
+          this.isCollapsed = false;
+        }
+        if (this.needsTruncation && !this.isValueExpanded) {
+          this.isValueExpanded = true;
+        }
+      }
+    },
     handleInputChange(newValue) {
       const currentValue = this.getValueForPath(this.path.path);
 
@@ -3467,6 +4587,11 @@ module.exports = app => app.component('document-property', {
       if (!this.document) {
         return;
       }
+      // If there are unsaved changes for this path, use the changed value
+      if (Object.prototype.hasOwnProperty.call(this.changes, path)) {
+        return this.changes[path];
+      }
+      // Otherwise, use the document value
       const documentValue = mpath.get(path, this.document);
       return documentValue;
     },
@@ -3486,6 +4611,16 @@ module.exports = app => app.component('document-property', {
         this.copyResetTimeoutId = null;
       }, 5000);
     },
+    getTooltipStyle() {
+      if (!this.$refs.infoIcon || !this.showTooltip) {
+        return {};
+      }
+      const rect = this.$refs.infoIcon.getBoundingClientRect();
+      return {
+        left: (rect.right + 8) + 'px',
+        top: rect.top + 'px'
+      };
+    },
     copyPropertyValue() {
       const textToCopy = this.valueAsString;
       if (textToCopy == null) {
@@ -32454,7 +33589,7 @@ const compile = () => {
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.2.5","description":"A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.","homepage":"https://mongoosestudio.app/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js","test:frontend":"mocha test/frontend/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.2.6","description":"A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.","homepage":"https://mongoosestudio.app/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js","test:frontend":"mocha test/frontend/*.test.js"}}');
 
 /***/ }