@mongoosejs/studio 0.2.6 → 0.2.8

package/frontend/public/tw.css

@@ -1038,6 +1038,10 @@ video {
   min-height: 200px;
 }
 
+.min-h-\[400px\] {
+  min-height: 400px;
+}
+
 .\!w-0 {
   width: 0px !important;
 }
@@ -1652,6 +1656,11 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.bg-emerald-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
+}
+
 .bg-forest-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 202 44 / var(--tw-bg-opacity));
@@ -2503,6 +2512,11 @@ video {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-emerald-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-forest-green-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(0 242 58 / var(--tw-bg-opacity));
@@ -2692,6 +2706,11 @@ video {
   border-color: transparent;
 }
 
+.focus\:border-ultramarine-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(63 83 255 / var(--tw-border-opacity));
+}
+
 .focus\:opacity-100:focus {
   opacity: 1;
 }
@@ -2943,6 +2962,10 @@ video {
     flex: none;
   }
 
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
   .sm\:flex-col {
     flex-direction: column;
   }

package/frontend/src/api.js

@@ -147,6 +147,14 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     updateDocument: function updateDocument(params) {
       return client.post('', { action: 'Model.updateDocument', ...params }).then(res => res.data);
     },
+    createChatMessage(params) {
+      return client.post('', { action: 'Model.createChatMessage', ...params }).then(res => res.data);
+    },
+    streamChatMessage: async function* streamChatMessage(params) {
+      // Don't stream on Next.js or Netlify for now.
+      const data = await client.post('', { action: 'Model.createChatMessage', ...params }).then(res => res.data);
+      yield { textPart: data.text };
+    },
     updateDocuments: function updateDocuments(params) {
       return client.post('', { action: 'Model.updateDocuments', ...params }).then(res => res.data);
     }
@@ -250,6 +258,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     createChart: function(params) {
       return client.post('/Model/createChart', params).then(res => res.data);
     },
+    createChatMessage: function(params) {
+      return client.post('/Model/createChatMessage', params).then(res => res.data);
+    },
     createDocument: function(params) {
       return client.post('/Model/createDocument', params).then(res => res.data);
     },
@@ -356,6 +367,55 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     updateDocument: function updateDocument(params) {
       return client.post('/Model/updateDocument', params).then(res => res.data);
     },
+    streamChatMessage: async function* streamChatMessage(params) {
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+      const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/streamChatMessage?' + new URLSearchParams(params).toString();
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: `${accessToken}`,
+          Accept: 'text/event-stream'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder('utf-8');
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        let eventEnd;
+        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
+          const eventStr = buffer.slice(0, eventEnd);
+          buffer = buffer.slice(eventEnd + 2);
+
+          // Parse SSE event
+          const lines = eventStr.split('\n');
+          let data = '';
+          for (const line of lines) {
+            if (line.startsWith('data:')) {
+              data += line.slice(5).trim();
+            }
+          }
+          if (data) {
+            try {
+              yield JSON.parse(data);
+            } catch (err) {
+              // If not JSON, yield as string
+              yield data;
+            }
+          }
+        }
+      }
+    },
     updateDocuments: function updateDocument(params) {
       return client.post('/Model/updateDocuments', params).then(res => res.data);
     }

package/frontend/src/create-document/create-document.html

@@ -1,6 +1,41 @@
 <div>
+  <div class="mb-4">
+    <label class="block text-sm font-bold text-gray-900">AI Mode</label>
+    <div class="mt-2 flex flex-col gap-2 sm:flex-row sm:items-center">
+      <input
+        v-model="aiPrompt"
+        type="text"
+        placeholder="Describe the document you'd like to create..."
+        @keydown.enter.prevent="requestAiSuggestion()"
+        class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-ultramarine-500 focus:outline-none focus:ring-1 focus:ring-ultramarine-500"
+      />
+      <button
+        @click="requestAiSuggestion()"
+        :disabled="aiStreaming || !aiPrompt.trim()"
+        class="inline-flex items-center justify-center rounded-md bg-ultramarine-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {{ aiStreaming ? 'Generating...' : 'Generate' }}
+      </button>
+    </div>
+    <p class="mt-2 text-xs text-gray-500">Use AI to draft the document. You can accept or reject the suggestion once it finishes.</p>
+    <div v-if="aiSuggestionReady" class="mt-3 flex flex-wrap gap-2">
+      <button
+        @click="acceptAiSuggestion()"
+        class="rounded-md bg-emerald-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500"
+      >
+        Accept suggestion
+      </button>
+      <button
+        @click="rejectAiSuggestion()"
+        class="rounded-md bg-gray-100 px-2.5 py-1.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-200"
+      >
+        Reject suggestion
+      </button>
+    </div>
+  </div>
   <div class="mb-2">
-    <textarea class="border border-gray-200 p-2 h-[300px] w-full" ref="codeEditor"></textarea>
+    <label class="block text-sm font-bold text-gray-900">Document to Create</label>
+    <textarea class="border border-gray-200 p-2 h-[300px] w-full mt-2" ref="codeEditor"></textarea>
   </div>
   <button @click="createDocument()" class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Submit</button>
   <div v-if="errors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">

package/frontend/src/create-document/create-document.js

@@ -23,10 +23,60 @@ module.exports = app => app.component('create-document', {
     return {
       documentData: '',
       editor: null,
-      errors: []
+      errors: [],
+      aiPrompt: '',
+      aiSuggestion: '',
+      aiOriginalDocument: '',
+      aiStreaming: false,
+      aiSuggestionReady: false
     };
   },
   methods: {
+    async requestAiSuggestion() {
+      if (this.aiStreaming) {
+        return;
+      }
+      const prompt = this.aiPrompt.trim();
+      if (!prompt) {
+        return;
+      }
+
+      this.aiOriginalDocument = this.editor.getValue();
+      this.aiSuggestion = '';
+      this.aiSuggestionReady = false;
+      this.aiStreaming = true;
+
+      try {
+        for await (const event of api.Model.streamChatMessage({
+          model: this.currentModel,
+          content: prompt,
+          documentData: this.aiOriginalDocument
+        })) {
+          if (event?.textPart) {
+            this.aiSuggestion += event.textPart;
+          }
+        }
+        this.editor.setValue(this.aiSuggestion);
+        this.aiSuggestionReady = true;
+      } catch (err) {
+        this.editor.setValue(this.aiOriginalDocument);
+        this.$toast.error('Failed to generate a document suggestion.');
+        throw err;
+      } finally {
+        this.aiStreaming = false;
+      }
+    },
+    acceptAiSuggestion() {
+      this.aiSuggestionReady = false;
+      this.aiSuggestion = '';
+      this.aiOriginalDocument = '';
+    },
+    rejectAiSuggestion() {
+      this.editor.setValue(this.aiOriginalDocument);
+      this.aiSuggestionReady = false;
+      this.aiSuggestion = '';
+      this.aiOriginalDocument = '';
+    },
     async createDocument() {
       const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
       try {

package/frontend/src/dashboard/dashboard.js

@@ -127,7 +127,7 @@ module.exports = {
       this.code = this.dashboard.code;
       this.title = this.dashboard.title;
       this.description = this.dashboard.description ?? '';
-      this.dashboardResults = dashboardResults;
+      this.dashboardResults = Array.isArray(dashboardResults) ? dashboardResults : [];
       if (this.shouldEvaluateDashboard()) {
         await this.evaluateDashboard();
         return;

package/frontend/src/models/models.html

@@ -34,7 +34,7 @@
     </nav>
   </aside>
   <div class="documents bg-slate-50" ref="documentsList">
-    <div class="relative h-[42px] z-10">
+    <div class="relative h-[42px]" style="z-index: 1000">
       <div class="documents-menu bg-slate-50">
         <div class="flex flex-row items-center w-full gap-2">
           <document-search
@@ -46,7 +46,7 @@
           </document-search>
           <div>
             <span v-if="numDocuments == null">Loading ...</span>
-            <span v-else-if="typeof numDocuments === 'number'">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>
+            <span v-else-if="typeof numDocuments === 'number'">{{documents.length}}/{{numDocuments === 1 ? numDocuments + ' document' : numDocuments + ' documents'}}</span>
           </div>
           <button
             @click="stagingSelect"
@@ -143,10 +143,24 @@
             <button
               @click="setOutputType('json')"
               type="button"
-              class="relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+              class="relative -ml-px inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
               :class="outputType === 'json' ? 'bg-gray-200' : 'bg-white'">
               <img class="h-5 w-5" src="images/json.svg">
             </button>
+            <button
+              @click="setOutputType('map')"
+              :disabled="geoJsonFields.length === 0"
+              type="button"
+              :title="geoJsonFields.length > 0 ? 'Map view' : 'No GeoJSON fields detected'"
+              class="relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-10"
+              :class="[
+                geoJsonFields.length === 0 ? 'text-gray-300 cursor-not-allowed bg-gray-100' : 'text-gray-400 hover:bg-gray-50',
+                outputType === 'map' ? 'bg-gray-200' : (geoJsonFields.length > 0 ? 'bg-white' : '')
+              ]">
+              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
+              </svg>
+            </button>
           </span>
         </div>
       </div>
@@ -202,6 +216,30 @@
           </list-json>
         </div>
       </div>
+      <div v-else-if="outputType === 'map'" class="flex flex-col h-full">
+        <div class="p-2 bg-white border-b flex items-center gap-2">
+          <label class="text-sm font-medium text-gray-700">GeoJSON Field:</label>
+          <select
+            :value="selectedGeoField"
+            @change="setSelectedGeoField($event.target.value)"
+            class="rounded-md border border-gray-300 py-1 px-2 text-sm focus:border-ultramarine-500 focus:ring-ultramarine-500"
+          >
+            <option v-for="field in geoJsonFields" :key="field.path" :value="field.path">
+              {{ field.label }}
+            </option>
+          </select>
+          <async-button
+            @click="loadMoreDocuments"
+            :disabled="loadedAllDocs"
+            type="button"
+            class="rounded px-2 py-1 text-xs font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600"
+            :class="loadedAllDocs ? 'bg-gray-400 cursor-not-allowed' : 'bg-ultramarine-600 hover:bg-ultramarine-500'"
+          >
+            Load more
+          </async-button>
+        </div>
+        <div class="flex-1 min-h-[400px]" ref="modelsMap"></div>
+      </div>
       <div v-if="status === 'loading'" class="loader">
         <img src="images/loader.gif">
       </div>

package/frontend/src/models/models.js

@@ -1,14 +1,18 @@
 'use strict';
 
+/* global L */
+
 const api = require('../api');
 const template = require('./models.html');
 const mpath = require('mpath');
+const xss = require('xss');
 
 const appendCSS = require('../appendCSS');
 appendCSS(require('./models.css'));
 
 const limit = 20;
 const OUTPUT_TYPE_STORAGE_KEY = 'studio:model-output-type';
+const SELECTED_GEO_FIELD_STORAGE_KEY = 'studio:model-selected-geo-field';
 
 module.exports = app => app.component('models', {
   template: template,
@@ -42,7 +46,10 @@ module.exports = app => app.component('models', {
     query: {},
     scrollHeight: 0,
     interval: null,
-    outputType: 'table', // json, table
+    outputType: 'table', // json, table, map
+    selectedGeoField: null,
+    mapInstance: null,
+    mapLayer: null,
     hideSidebar: null,
     lastSelectedIndex: null,
     error: null,
@@ -52,11 +59,13 @@ module.exports = app => app.component('models', {
   created() {
     this.currentModel = this.model;
     this.loadOutputPreference();
+    this.loadSelectedGeoField();
   },
   beforeDestroy() {
     document.removeEventListener('scroll', this.onScroll, true);
     window.removeEventListener('popstate', this.onPopState, true);
     document.removeEventListener('click', this.onOutsideActionsMenuClick, true);
+    this.destroyMap();
   },
   async mounted() {
     this.onScroll = () => this.checkIfScrolledToBottom();
@@ -88,6 +97,37 @@ module.exports = app => app.component('models', {
 
     await this.initSearchFromUrl();
   },
+  watch: {
+    documents: {
+      handler() {
+        if (this.outputType === 'map' && this.mapInstance) {
+          this.$nextTick(() => {
+            this.updateMapFeatures();
+          });
+        }
+      },
+      deep: true
+    },
+    geoJsonFields: {
+      handler(newFields) {
+        // Switch off map view if map is selected but no GeoJSON fields available
+        if (this.outputType === 'map' && newFields.length === 0) {
+          this.setOutputType('json');
+          return;
+        }
+        // Auto-select first field if current selection is not valid
+        if (this.outputType === 'map' && newFields.length > 0) {
+          const isCurrentValid = newFields.some(f => f.path === this.selectedGeoField);
+          if (!isCurrentValid) {
+            this.selectedGeoField = newFields[0].path;
+            this.$nextTick(() => {
+              this.updateMapFeatures();
+            });
+          }
+        }
+      }
+    }
+  },
   computed: {
     referenceMap() {
       const map = {};
@@ -97,6 +137,56 @@ module.exports = app => app.component('models', {
         }
       }
       return map;
+    },
+    geoJsonFields() {
+      // Find schema paths that look like GeoJSON fields
+      // GeoJSON fields have nested 'type' and 'coordinates' properties
+      const geoFields = [];
+      const pathsByPrefix = {};
+
+      // Group paths by their parent prefix
+      for (const schemaPath of this.schemaPaths) {
+        const path = schemaPath.path;
+        const parts = path.split('.');
+        if (parts.length >= 2) {
+          const parent = parts.slice(0, -1).join('.');
+          const child = parts[parts.length - 1];
+          if (!pathsByPrefix[parent]) {
+            pathsByPrefix[parent] = {};
+          }
+          pathsByPrefix[parent][child] = schemaPath;
+        }
+      }
+
+      // Check which parents have both 'type' and 'coordinates' children
+      for (const [parent, children] of Object.entries(pathsByPrefix)) {
+        if (children.type && children.coordinates) {
+          geoFields.push({
+            path: parent,
+            label: parent
+          });
+        }
+      }
+
+      // Also check for Embedded/Mixed fields that might contain GeoJSON
+      // by looking at actual document data
+      for (const schemaPath of this.schemaPaths) {
+        if (schemaPath.instance === 'Embedded' || schemaPath.instance === 'Mixed') {
+          // Check if any document has this field with GeoJSON structure
+          const hasGeoJsonData = this.documents.some(doc => {
+            const value = mpath.get(schemaPath.path, doc);
+            return this.isGeoJsonValue(value);
+          });
+          if (hasGeoJsonData && !geoFields.find(f => f.path === schemaPath.path)) {
+            geoFields.push({
+              path: schemaPath.path,
+              label: schemaPath.path
+            });
+          }
+        }
+      }
+
+      return geoFields;
     }
   },
   methods: {
@@ -105,18 +195,170 @@ module.exports = app => app.component('models', {
         return;
       }
       const storedPreference = window.localStorage.getItem(OUTPUT_TYPE_STORAGE_KEY);
-      if (storedPreference === 'json' || storedPreference === 'table') {
+      if (storedPreference === 'json' || storedPreference === 'table' || storedPreference === 'map') {
         this.outputType = storedPreference;
       }
     },
+    loadSelectedGeoField() {
+      if (typeof window === 'undefined' || !window.localStorage) {
+        return;
+      }
+      const storedField = window.localStorage.getItem(SELECTED_GEO_FIELD_STORAGE_KEY);
+      if (storedField) {
+        this.selectedGeoField = storedField;
+      }
+    },
     setOutputType(type) {
-      if (type !== 'json' && type !== 'table') {
+      if (type !== 'json' && type !== 'table' && type !== 'map') {
         return;
       }
       this.outputType = type;
       if (typeof window !== 'undefined' && window.localStorage) {
         window.localStorage.setItem(OUTPUT_TYPE_STORAGE_KEY, type);
       }
+      if (type === 'map') {
+        this.$nextTick(() => {
+          this.initMap();
+        });
+      } else {
+        this.destroyMap();
+      }
+    },
+    setSelectedGeoField(field) {
+      this.selectedGeoField = field;
+      if (typeof window !== 'undefined' && window.localStorage) {
+        window.localStorage.setItem(SELECTED_GEO_FIELD_STORAGE_KEY, field);
+      }
+      if (this.outputType === 'map') {
+        this.$nextTick(() => {
+          this.updateMapFeatures();
+        });
+      }
+    },
+    isGeoJsonValue(value) {
+      return value != null &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        Object.prototype.hasOwnProperty.call(value, 'type') &&
+        typeof value.type === 'string' &&
+        Object.prototype.hasOwnProperty.call(value, 'coordinates') &&
+        Array.isArray(value.coordinates);
+    },
+    initMap() {
+      if (typeof L === 'undefined') {
+        console.error('Leaflet (L) is not defined');
+        return;
+      }
+      if (!this.$refs.modelsMap) {
+        return;
+      }
+      if (this.mapInstance) {
+        this.updateMapFeatures();
+        return;
+      }
+
+      const mapElement = this.$refs.modelsMap;
+      mapElement.style.setProperty('height', '100%', 'important');
+      mapElement.style.setProperty('min-height', '400px', 'important');
+      mapElement.style.setProperty('width', '100%', 'important');
+
+      this.mapInstance = L.map(this.$refs.modelsMap).setView([0, 0], 2);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors'
+      }).addTo(this.mapInstance);
+
+      this.$nextTick(() => {
+        if (this.mapInstance) {
+          this.mapInstance.invalidateSize();
+          this.updateMapFeatures();
+        }
+      });
+    },
+    destroyMap() {
+      if (this.mapLayer) {
+        this.mapLayer.remove();
+        this.mapLayer = null;
+      }
+      if (this.mapInstance) {
+        this.mapInstance.remove();
+        this.mapInstance = null;
+      }
+    },
+    updateMapFeatures() {
+      if (!this.mapInstance) {
+        return;
+      }
+
+      // Remove existing layer
+      if (this.mapLayer) {
+        this.mapLayer.remove();
+        this.mapLayer = null;
+      }
+
+      // Auto-select first geoJSON field if none selected
+      if (!this.selectedGeoField && this.geoJsonFields.length > 0) {
+        this.selectedGeoField = this.geoJsonFields[0].path;
+      }
+
+      if (!this.selectedGeoField) {
+        return;
+      }
+
+      // Build GeoJSON FeatureCollection from documents
+      const features = [];
+      for (const doc of this.documents) {
+        const geoValue = mpath.get(this.selectedGeoField, doc);
+        if (this.isGeoJsonValue(geoValue)) {
+          features.push({
+            type: 'Feature',
+            geometry: geoValue,
+            properties: {
+              _id: doc._id,
+              documentId: doc._id
+            }
+          });
+        }
+      }
+
+      if (features.length === 0) {
+        return;
+      }
+
+      const featureCollection = {
+        type: 'FeatureCollection',
+        features: features
+      };
+
+      // Add layer with click handler for popups
+      this.mapLayer = L.geoJSON(featureCollection, {
+        style: {
+          color: '#3388ff',
+          weight: 2,
+          opacity: 0.8,
+          fillOpacity: 0.3
+        },
+        pointToLayer: (feature, latlng) => {
+          return L.marker(latlng);
+        },
+        onEachFeature: (feature, layer) => {
+          const docId = feature.properties._id;
+          const docUrl = `#/model/${this.currentModel}/document/${xss(docId)}`;
+          const popupContent = `
+            <div style="min-width: 150px;">
+              <div style="font-weight: bold; margin-bottom: 8px;">Document</div>
+              <div style="font-family: monospace; font-size: 12px; word-break: break-all; margin-bottom: 8px;">${docId}</div>
+              <a href="${docUrl}" style="color: #3388ff; text-decoration: underline;">Open Document</a>
+            </div>
+          `;
+          layer.bindPopup(popupContent);
+        }
+      }).addTo(this.mapInstance);
+
+      // Fit bounds to show all features
+      const bounds = this.mapLayer.getBounds();
+      if (bounds.isValid()) {
+        this.mapInstance.fitBounds(bounds, { padding: [20, 20], maxZoom: 16 });
+      }
     },
     buildDocumentFetchParams(options = {}) {
       const params = {
@@ -170,6 +412,13 @@ module.exports = app => app.component('models', {
         this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
       }
       this.status = 'loaded';
+
+      // Initialize map if output type is map
+      if (this.outputType === 'map') {
+        this.$nextTick(() => {
+          this.initMap();
+        });
+      }
     },
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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": {
@@ -22,7 +22,8 @@
     "tailwindcss": "3.4.0",
     "vue": "3.x",
     "vue-toastification": "^2.0.0-rc.5",
-    "webpack": "5.x"
+    "webpack": "5.x",
+    "xss": "^1.0.15"
   },
   "peerDependencies": {
     "mongoose": "7.x || 8.x || ^9.0.0"