@mongoosejs/studio 0.0.130 → 0.0.131

package/frontend/public/app.js

@@ -1639,38 +1639,39 @@ module.exports = app => app.component('document-details', {
     shouldUseDatePicker() {
       return this.fieldData.type === 'Date';
     },
-    filteredSchemaPaths() {
+    typeFilteredSchemaPaths() {
       let paths = this.schemaPaths || [];
 
-      // Filter by search query
-      if (this.searchQuery.trim()) {
-        const query = this.searchQuery.toLowerCase();
-        paths = paths.filter(path =>
-          path.path.toLowerCase().includes(query)
-        );
-      }
-
-      // Filter by data type
       if (this.selectedType) {
-        paths = paths.filter(path =>
-          path.instance === this.selectedType
-        );
+        paths = paths.filter(path => path.instance === this.selectedType);
       }
 
       return paths;
     },
-    filteredVirtuals() {
-      let virtuals = this.virtuals;
+    filteredSchemaPaths() {
+      const paths = this.typeFilteredSchemaPaths.slice();
 
-      // Filter by search query
-      if (this.searchQuery.trim()) {
-        const query = this.searchQuery.toLowerCase();
-        virtuals = virtuals.filter(virtual =>
-          virtual.name.toLowerCase().includes(query)
-        );
+      if (!this.searchQuery.trim()) {
+        return paths;
       }
 
-      // Filter by data type
+      const query = this.searchQuery.toLowerCase();
+      const matches = [];
+      const nonMatches = [];
+
+      paths.forEach(path => {
+        if (path.path.toLowerCase().includes(query)) {
+          matches.push(path);
+        } else {
+          nonMatches.push(path);
+        }
+      });
+
+      return matches.concat(nonMatches);
+    },
+    typeFilteredVirtuals() {
+      let virtuals = this.virtuals;
+
       if (this.selectedType) {
         virtuals = virtuals.filter(virtual => {
           const virtualType = this.getVirtualFieldType(virtual);
@@ -1680,6 +1681,58 @@ module.exports = app => app.component('document-details', {
 
       return virtuals;
     },
+    filteredVirtuals() {
+      const virtuals = this.typeFilteredVirtuals.slice();
+
+      if (!this.searchQuery.trim()) {
+        return virtuals;
+      }
+
+      const query = this.searchQuery.toLowerCase();
+      const matches = [];
+      const nonMatches = [];
+
+      virtuals.forEach(virtual => {
+        if (virtual.name.toLowerCase().includes(query)) {
+          matches.push(virtual);
+        } else {
+          nonMatches.push(virtual);
+        }
+      });
+
+      return matches.concat(nonMatches);
+    },
+    schemaSearchMatchSet() {
+      if (!this.searchQuery.trim()) {
+        return new Set();
+      }
+
+      const query = this.searchQuery.toLowerCase();
+      return new Set(
+        this.typeFilteredSchemaPaths
+          .filter(path => path.path.toLowerCase().includes(query))
+          .map(path => path.path)
+      );
+    },
+    virtualSearchMatchSet() {
+      if (!this.searchQuery.trim()) {
+        return new Set();
+      }
+
+      const query = this.searchQuery.toLowerCase();
+      return new Set(
+        this.typeFilteredVirtuals
+          .filter(virtual => virtual.name.toLowerCase().includes(query))
+          .map(virtual => virtual.name)
+      );
+    },
+    hasSearchMatches() {
+      if (!this.searchQuery.trim()) {
+        return true;
+      }
+
+      return this.schemaSearchMatchSet.size > 0 || this.virtualSearchMatchSet.size > 0;
+    },
     formattedJson() {
       if (!this.document) {
         return '{}';
@@ -1695,6 +1748,20 @@ module.exports = app => app.component('document-details', {
         this.collapsedVirtuals.add(fieldName);
       }
     },
+    isSchemaPathMatched(path) {
+      if (!path) {
+        return false;
+      }
+
+      return this.schemaSearchMatchSet.has(path.path);
+    },
+    isVirtualMatched(virtual) {
+      if (!virtual) {
+        return false;
+      }
+
+      return this.virtualSearchMatchSet.has(virtual.name);
+    },
     isVirtualFieldCollapsed(fieldName) {
       return this.collapsedVirtuals.has(fieldName);
     },
@@ -1909,7 +1976,7 @@ module.exports = app => app.component('document-property', {
       isValueExpanded: false // Track if the value is expanded
     };
   },
-  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid', 'highlight'],
   computed: {
     valueAsString() {
       const value = this.getValueForPath(this.path.path);
@@ -1989,6 +2056,7 @@ module.exports = app => app.component('document-property', {
   }
 });
 
+
 /***/ }),
 
 /***/ "./frontend/src/document/confirm-changes/confirm-changes.js":
@@ -5376,7 +5444,7 @@ module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .v
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document-details\">\n  <!-- View Toggle and Search/Filter Bar -->\n  <div class=\"mb-4 mt-4\">\n\n    <!-- Search and Filter Bar (only show in fields view) -->\n    <div v-if=\"viewMode === 'fields'\" class=\"flex md:gap-3\">\n      <!-- Search Bar -->\n      <div class=\"relative flex-1\">\n        <input\n          ref=\"searchInput\"\n          v-model=\"searchQuery\"\n          type=\"text\"\n          placeholder=\"Search fields...\"\n          class=\"w-full px-4 py-2 pl-10 pr-4 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n        />\n        <div class=\"absolute inset-y-0 left-0 flex items-center pl-3\">\n          <svg class=\"w-4 h-4 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Data Type Filter -->\n      <div class=\"relative\">\n        <select\n          v-model=\"selectedType\"\n          class=\"hidden md:block px-4 py-2 pr-8 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white min-w-[140px] appearance-none\"\n        >\n          <option value=\"\">All Types</option>\n          <option v-for=\"type in availableTypes\" :key=\"type\" :value=\"type\">\n            {{type}}\n          </option>\n        </select>\n        <div class=\"absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none\">\n          <svg class=\"w-4 h-4 text-gray-400\" 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        </div>\n      </div>\n\n      <!-- Add Field Button -->\n      <button\n        @click=\"openAddFieldModal\"\n        class=\"hidden md:block px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 flex items-center gap-2\"\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=\"M12 4v16m8-8H4\"></path>\n        </svg>\n        Add Field\n      </button>\n    </div>\n  </div>\n\n  <!-- Fields View -->\n  <div v-if=\"viewMode === 'fields'\">\n    <!-- Schema Paths -->\n    <div v-for=\"path in filteredSchemaPaths\" :key=\"path\" class=\"value\">\n      <document-property\n        :path=\"path\"\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :invalid=\"invalid\"></document-property>\n    </div>\n\n    <!-- Virtual Fields -->\n    <div v-for=\"path in filteredVirtuals\" class=\"border border-gray-200 rounded-lg mb-2\">\n    <!-- Virtual Field Header (Always Visible) -->\n    <div\n      @click=\"toggleVirtualField(path.name)\"\n      class=\"p-3 bg-slate-50 hover:bg-slate-100 cursor-pointer flex items-center justify-between border-b border-gray-200\"\n    >\n      <div class=\"flex items-center\">\n        <svg\n          :class=\"isVirtualFieldCollapsed(path.name) ? '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.name}}</span>\n        <span v-if=\"path.isVirtual\" class=\"ml-2 text-sm text-purple-600\">(virtual - {{getVirtualFieldType(path)}})</span>\n        <span v-else class=\"ml-2 text-sm text-blue-600\">(user-added - {{getVirtualFieldType(path)}})</span>\n      </div>\n    </div>\n\n    <!-- Virtual Field Content (Collapsible) -->\n    <div v-if=\"!isVirtualFieldCollapsed(path.name)\" class=\"p-3\">\n      <div v-if=\"path.value == null\" class=\"text-sky-800\">\n        {{'' + path.value}}\n      </div>\n      <div v-else>\n        {{path.value}}\n      </div>\n    </div>\n  </div>\n\n    <!-- No Results Message -->\n    <div v-if=\"searchQuery && filteredSchemaPaths.length === 0 && filteredVirtuals.length === 0\" class=\"text-center py-8 text-gray-500\">\n      <svg class=\"w-12 h-12 mx-auto mb-4 text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.29-1.009-5.824-2.709M15 6.291A7.962 7.962 0 0012 5c-2.34 0-4.29 1.009-5.824 2.709\"></path>\n      </svg>\n      <p>No fields found matching \"{{searchQuery}}\"</p>\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  <div v-if=\"viewMode === 'json'\" class=\"json-view\">\n    <div class=\"border border-gray-300 rounded-lg bg-gray-50 p-4 overflow-auto\">\n      <pre class=\"text-sm font-mono text-gray-800 whitespace-pre\">{{formattedJson}}</pre>\n    </div>\n  </div>\n\n  <!-- Add Field Modal -->\n  <modal v-if=\"showAddFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"closeAddFieldModal\">&times;</div>\n      <div class=\"add-field-modal\">\n        <div class=\"mb-6\">\n          <h2 class=\"text-xl font-semibold text-gray-900 mb-2\">Add New Field</h2>\n          <p class=\"text-sm text-gray-600\">Create a new field for this document</p>\n        </div>\n\n        <form @submit.prevent=\"handleAddFieldSubmit\" class=\"space-y-4\">\n          <!-- Field Name -->\n          <div>\n            <label for=\"fieldName\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n              Field Name *\n            </label>\n            <input\n              id=\"fieldName\"\n              v-model=\"fieldData.name\"\n              type=\"text\"\n              required\n              placeholder=\"Enter field name...\"\n              class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n              :class=\"{ 'border-red-500': fieldErrors.name }\"\n            />\n            <p v-if=\"fieldErrors.name\" class=\"mt-1 text-sm text-red-600\">{{fieldErrors.name}}</p>\n            <p v-if=\"fieldData.name && getTransformedFieldName() !== fieldData.name.trim()\" class=\"mt-1 text-sm text-blue-600\">\n              Field name will be: <code class=\"bg-blue-50 px-1 py-0.5 rounded text-xs\">{{getTransformedFieldName()}}</code>\n            </p>\n          </div>\n\n          <!-- Field Type -->\n          <div>\n            <label for=\"fieldType\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n              Field Type *\n            </label>\n            <select\n              id=\"fieldType\"\n              v-model=\"fieldData.type\"\n              required\n              class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n              :class=\"{ 'border-red-500': fieldErrors.type }\"\n            >\n              <option value=\"\">Select field type...</option>\n              <option v-for=\"type in allFieldTypes\" :key=\"type\" :value=\"type\">\n                {{type}}\n              </option>\n            </select>\n            <p v-if=\"fieldErrors.type\" class=\"mt-1 text-sm text-red-600\">{{fieldErrors.type}}</p>\n          </div>\n\n          <!-- Field Value -->\n          <div>\n            <label for=\"fieldValue\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n              Initial Value\n            </label>\n\n            <!-- Date picker for Date type -->\n            <input\n              v-if=\"shouldUseDatePicker\"\n              v-model=\"fieldData.value\"\n              type=\"date\"\n              id=\"fieldValue\"\n              class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n              :class=\"{ 'border-red-500': fieldErrors.value }\"\n            />\n\n            <!-- Simple input for basic types -->\n            <input\n              v-else-if=\"!shouldUseCodeMirror\"\n              v-model=\"fieldData.value\"\n              type=\"text\"\n              id=\"fieldValue\"\n              placeholder=\"Enter initial value (optional)...\"\n              class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n              :class=\"{ 'border-red-500': fieldErrors.value }\"\n            />\n\n            <!-- CodeMirror textarea for complex types -->\n            <textarea\n              v-else\n              ref=\"fieldValueEditor\"\n              id=\"fieldValue\"\n              rows=\"3\"\n              placeholder=\"Enter initial value (optional)...\"\n              class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n              :class=\"{ 'border-red-500': fieldErrors.value }\"\n            ></textarea>\n\n            <p v-if=\"fieldErrors.value\" class=\"mt-1 text-sm text-red-600\">{{fieldErrors.value}}</p>\n            <p class=\"mt-1 text-xs text-gray-500\">\n              <span v-if=\"shouldUseDatePicker\">Select a date or leave empty for null/undefined values.</span>\n              <span v-else-if=\"shouldUseCodeMirror\">Leave empty for null/undefined values. Use valid JSON format.</span>\n              <span v-else>Leave empty for null/undefined values.</span>\n            </p>\n          </div>\n\n\n          <!-- Action Buttons -->\n          <div class=\"flex justify-end gap-3 pt-4 border-t border-gray-200\">\n            <button\n              type=\"button\"\n              @click=\"closeAddFieldModal\"\n              class=\"px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n            >\n              Cancel\n            </button>\n            <button\n              type=\"submit\"\n              :disabled=\"isSubmittingField\"\n              class=\"px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              <span v-if=\"isSubmittingField\">Adding...</span>\n              <span v-else>Add Field</span>\n            </button>\n          </div>\n        </form>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"document-details\">\n  <!-- View Toggle and Search/Filter Bar -->\n  <div class=\"mb-4 mt-4\">\n\n    <!-- Search and Filter Bar (only show in fields view) -->\n    <div v-if=\"viewMode === 'fields'\" class=\"flex md:gap-3\">\n      <!-- Search Bar -->\n      <div class=\"relative flex-1\">\n        <input\n          ref=\"searchInput\"\n          v-model=\"searchQuery\"\n          type=\"text\"\n          placeholder=\"Search fields...\"\n          class=\"w-full px-4 py-2 pl-10 pr-4 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n        />\n        <div class=\"absolute inset-y-0 left-0 flex items-center pl-3\">\n          <svg class=\"w-4 h-4 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Data Type Filter -->\n      <div class=\"relative hidden md:block\">\n        <select\n          v-model=\"selectedType\"\n          class=\"px-4 py-2 pr-8 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white min-w-[140px] appearance-none\"\n        >\n          <option value=\"\">All Types</option>\n          <option v-for=\"type in availableTypes\" :key=\"type\" :value=\"type\">\n            {{type}}\n          </option>\n        </select>\n        <div class=\"absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none\">\n          <svg class=\"w-4 h-4 text-gray-400\" 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        </div>\n      </div>\n\n      <!-- Add Field Button -->\n      <button\n        @click=\"openAddFieldModal\"\n        class=\"hidden md:flex px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 items-center gap-2\"\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=\"M12 4v16m8-8H4\"></path>\n        </svg> Add Field\n      </button>\n    </div>\n  </div>\n\n  <!-- Fields View -->\n  <div v-if=\"viewMode === 'fields'\">\n    <!-- Schema Paths -->\n    <div\n      v-for=\"path in filteredSchemaPaths\"\n      :key=\"path.path || path\"\n      class=\"value\"\n    >\n      <document-property\n        :path=\"path\"\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :highlight=\"isSchemaPathMatched(path)\"\n        :invalid=\"invalid\"></document-property>\n    </div>\n\n    <!-- Virtual Fields -->\n    <div\n      v-for=\"path in filteredVirtuals\"\n      :key=\"path.name\"\n      class=\"border rounded-lg mb-2 transition-all duration-200 ease-in-out\"\n      :class=\"[\n        isVirtualMatched(path)\n          ? 'border-amber-400 ring-2 ring-amber-200 ring-offset-1'\n          : 'border-gray-200'\n      ]\"\n    >\n    <!-- Virtual Field Header (Always Visible) -->\n    <div\n      @click=\"toggleVirtualField(path.name)\"\n      class=\"p-3 bg-slate-50 hover:bg-slate-100 cursor-pointer flex items-center justify-between border-b border-gray-200\"\n    >\n      <div class=\"flex items-center\">\n        <svg\n          :class=\"isVirtualFieldCollapsed(path.name) ? '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.name}}</span>\n        <span v-if=\"path.isVirtual\" class=\"ml-2 text-sm text-purple-600\">(virtual - {{getVirtualFieldType(path)}})</span>\n        <span v-else class=\"ml-2 text-sm text-blue-600\">(user-added - {{getVirtualFieldType(path)}})</span>\n      </div>\n    </div>\n\n    <!-- Virtual Field Content (Collapsible) -->\n    <div v-if=\"!isVirtualFieldCollapsed(path.name)\" class=\"p-3\">\n      <div v-if=\"path.value == null\" class=\"text-sky-800\">\n        {{'' + path.value}}\n      </div>\n      <div v-else>\n        {{path.value}}\n      </div>\n    </div>\n  </div>\n\n    <!-- No Results Message -->\n    <div v-if=\"searchQuery.trim() && !hasSearchMatches\" class=\"text-center py-8 text-gray-500\">\n      <svg class=\"w-12 h-12 mx-auto mb-4 text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.29-1.009-5.824-2.709M15 6.291A7.962 7.962 0 0012 5c-2.34 0-4.29 1.009-5.824 2.709\"></path>\n      </svg>\n      <p>No fields found matching \"{{searchQuery}}\"</p>\n    </div>\n  </div>\n\n  <!-- JSON View -->\n  <div v-if=\"viewMode === 'json'\" class=\"json-view\">\n    <div class=\"border border-gray-300 rounded-lg bg-gray-50 p-4 overflow-auto\">\n      <pre class=\"text-sm font-mono text-gray-800 whitespace-pre\">{{formattedJson}}</pre>\n    </div>\n  </div>\n\n  <!-- Add Field Modal -->\n  <modal v-if=\"showAddFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"closeAddFieldModal\">&times;</div>\n      <div class=\"add-field-modal\">\n        <div class=\"mb-6\">\n          <h2 class=\"text-xl font-semibold text-gray-900 mb-2\">Add New Field</h2>\n          <p class=\"text-sm text-gray-600\">Create a new field for this document</p>\n        </div>\n\n        <form @submit.prevent=\"handleAddFieldSubmit\" class=\"space-y-4\">\n          <!-- Field Name -->\n          <div>\n            <label for=\"fieldName\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n              Field Name *\n            </label>\n            <input\n              id=\"fieldName\"\n              v-model=\"fieldData.name\"\n              type=\"text\"\n              required\n              placeholder=\"Enter field name...\"\n              class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n              :class=\"{ 'border-red-500': fieldErrors.name }\"\n            />\n            <p v-if=\"fieldErrors.name\" class=\"mt-1 text-sm text-red-600\">{{fieldErrors.name}}</p>\n            <p v-if=\"fieldData.name && getTransformedFieldName() !== fieldData.name.trim()\" class=\"mt-1 text-sm text-blue-600\">\n              Field name will be: <code class=\"bg-blue-50 px-1 py-0.5 rounded text-xs\">{{getTransformedFieldName()}}</code>\n            </p>\n          </div>\n\n          <!-- Field Type -->\n          <div>\n            <label for=\"fieldType\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n              Field Type *\n            </label>\n            <select\n              id=\"fieldType\"\n              v-model=\"fieldData.type\"\n              required\n              class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n              :class=\"{ 'border-red-500': fieldErrors.type }\"\n            >\n              <option value=\"\">Select field type...</option>\n              <option v-for=\"type in allFieldTypes\" :key=\"type\" :value=\"type\">\n                {{type}}\n              </option>\n            </select>\n            <p v-if=\"fieldErrors.type\" class=\"mt-1 text-sm text-red-600\">{{fieldErrors.type}}</p>\n          </div>\n\n          <!-- Field Value -->\n          <div>\n            <label for=\"fieldValue\" class=\"block text-sm font-medium text-gray-700 mb-1\">\n              Initial Value\n            </label>\n\n            <!-- Date picker for Date type -->\n            <input\n              v-if=\"shouldUseDatePicker\"\n              v-model=\"fieldData.value\"\n              type=\"date\"\n              id=\"fieldValue\"\n              class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n              :class=\"{ 'border-red-500': fieldErrors.value }\"\n            />\n\n            <!-- Simple input for basic types -->\n            <input\n              v-else-if=\"!shouldUseCodeMirror\"\n              v-model=\"fieldData.value\"\n              type=\"text\"\n              id=\"fieldValue\"\n              placeholder=\"Enter initial value (optional)...\"\n              class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n              :class=\"{ 'border-red-500': fieldErrors.value }\"\n            />\n\n            <!-- CodeMirror textarea for complex types -->\n            <textarea\n              v-else\n              ref=\"fieldValueEditor\"\n              id=\"fieldValue\"\n              rows=\"3\"\n              placeholder=\"Enter initial value (optional)...\"\n              class=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n              :class=\"{ 'border-red-500': fieldErrors.value }\"\n            ></textarea>\n\n            <p v-if=\"fieldErrors.value\" class=\"mt-1 text-sm text-red-600\">{{fieldErrors.value}}</p>\n            <p class=\"mt-1 text-xs text-gray-500\">\n              <span v-if=\"shouldUseDatePicker\">Select a date or leave empty for null/undefined values.</span>\n              <span v-else-if=\"shouldUseCodeMirror\">Leave empty for null/undefined values. Use valid JSON format.</span>\n              <span v-else>Leave empty for null/undefined values.</span>\n            </p>\n          </div>\n\n\n          <!-- Action Buttons -->\n          <div class=\"flex justify-end gap-3 pt-4 border-t border-gray-200\">\n            <button\n              type=\"button\"\n              @click=\"closeAddFieldModal\"\n              class=\"px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n            >\n              Cancel\n            </button>\n            <button\n              type=\"submit\"\n              :disabled=\"isSubmittingField\"\n              class=\"px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              <span v-if=\"isSubmittingField\">Adding...</span>\n              <span v-else>Add Field</span>\n            </button>\n          </div>\n        </form>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ }),
 
@@ -5398,7 +5466,7 @@ module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-de
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"border border-gray-200 rounded-lg mb-2\">\n  <!-- Collapsible Header -->\n  <div \n    @click=\"toggleCollapse\"\n    class=\"p-3 bg-gray-50 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200\"\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      <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-3\">\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        @input=\"changes[path.path] = $event; delete invalid[path.path];\"\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      <div v-if=\"needsTruncation && !isValueExpanded\" class=\"truncated-value-container\">\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\"\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      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"expanded-value-container\">\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\"\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      <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 rounded-lg mb-2\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-3 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out\"\n    :class=\"{ 'bg-amber-100': highlight, 'bg-gray-50': !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      <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-3\">\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        @input=\"changes[path.path] = $event; delete invalid[path.path];\"\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      <div v-if=\"needsTruncation && !isValueExpanded\" class=\"truncated-value-container\">\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\"\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      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"expanded-value-container\">\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\"\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      <div v-else>\n        <component :is=\"getComponentForPath(path)\" :value=\"getValueForPath(path.path)\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -5420,7 +5488,7 @@ module.exports = "<div>\n    <h2>\n        Are you sure you want to save the fol
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div>\n    <h2>\n        Are you sure you want to delete the following document?\n    </h2>\n    <pre class=\"max-h-[50vh] overflow-auto\"><code ref=\"code\" class=\"language-javascript\" v-text=\"displayValue\"></code></pre>\n    <div class=\"flex gap-2 mt-2\">\n    <async-button\n        class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n        @click=\"startDelete\">\n        Confirm\n    </async-button>\n    <button \n        class=\"rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300\"\n        @click=\"closeDelete\">\n        Cancel\n    </button>\n    </div>\n</div>";
+module.exports = "<div>\n  <h2>\n      Are you sure you want to delete the following document?\n  </h2>\n  <pre class=\"max-h-[50vh] overflow-auto\"><code ref=\"code\" class=\"language-javascript\" v-text=\"displayValue\"></code></pre>\n  <div class=\"flex gap-2 mt-2\">\n  <async-button\n      class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n      @click=\"startDelete\">\n      Confirm\n  </async-button>\n  <button\n      class=\"rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300\"\n      @click=\"closeDelete\">\n      Cancel\n  </button>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -5684,7 +5752,7 @@ module.exports = "<div class=\"list-subdocument tooltip\">\n  <pre>\n    <code r
 /***/ ((module) => {
 
 "use strict";
-module.exports = "/** Vue modal */\n\n.modal-mask {\n  position: fixed;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: table;\n  transition: opacity 0.3s ease;\n}\n\n.modal-wrapper {\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.modal-container {\n  width: 600px;\n  margin: 0px auto;\n  padding: 20px 30px;\n  padding-bottom: 40px;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n  position: relative;\n}\n\n.modal-header {\n  margin-top: 0;\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.modal-header-success {\n  color: #42b983;\n}\n\n.modal-header-error {\n  color: #ff0000;\n}\n\n.modal-body {\n  margin: 20px 0;\n  max-height: calc(100vh - 40px - 60px - 10px);\n  overflow: auto;\n}\n\n.modal__button--default {\n  float: right;\n}\n\n/*\n * The following styles are auto-applied to elements with\n * transition=\"modal\" when their visibility is toggled\n * by Vue.js.\n *\n * You can easily play with the modal transition by editing\n * these styles.\n */\n\n.modal-enter {\n  opacity: 0;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\n.modal-leave-active .modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}\n\n.modal-container .modal-exit {\n  position: absolute;\n  right: 0.25em;\n  top: 0.25em;\n  cursor: pointer;\n  font-size: 1.25em;\n  height: 1.25em;\n  width: 1.25em;\n  border-radius: 100%;\n  border: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 0.25em;\n}\n\n.modal-container .modal-exit:hover {\n  background-color: #f1f5ff;\n}\n";
+module.exports = "/** Vue modal */\n\n.modal-mask {\n  position: fixed;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: table;\n  transition: opacity 0.3s ease;\n}\n\n.modal-wrapper {\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.modal-container {\n  width: 600px;\n  margin: 0px auto;\n  padding: 20px 30px;\n  padding-bottom: 40px;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n  position: relative;\n}\n\n.modal-header {\n  margin-top: 0;\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.modal-header-success {\n  color: #42b983;\n}\n\n.modal-header-error {\n  color: #ff0000;\n}\n\n.modal-body {\n  margin: 20px 0;\n  max-height: calc(100vh - 40px - 60px - 10px);\n  overflow: auto;\n}\n\n.modal__button--default {\n  float: right;\n}\n\n/*\n * The following styles are auto-applied to elements with\n * transition=\"modal\" when their visibility is toggled\n * by Vue.js.\n *\n * You can easily play with the modal transition by editing\n * these styles.\n */\n\n.modal-enter {\n  opacity: 0;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\n.modal-leave-active .modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}\n\n.modal-container .modal-exit {\n  position: absolute;\n  right: 0.25em;\n  top: 0.25em;\n  cursor: pointer;\n  font-size: 1.25em;\n  height: 1.25em;\n  width: 1.25em;\n  border-radius: 100%;\n  border: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 0.25em;\n}\n\n.modal-container .modal-exit:hover {\n  background-color: #f1f5ff;\n}\n\n@media (max-width: 767px) {\n  .modal-container {\n    width: calc(100vw - 10px);\n    margin: 0;\n    margin-left: 5px;\n  }\n}\n";
 
 /***/ }),
 
@@ -15835,7 +15903,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.130","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.1.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"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":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.131","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.1.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.x"},"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":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })
 

package/frontend/public/tw.css

@@ -1399,6 +1399,11 @@ video {
   border-style: none;
 }
 
+.border-amber-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 191 36 / var(--tw-border-opacity));
+}
+
 .border-blue-300 {
   --tw-border-opacity: 1;
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
@@ -1433,6 +1438,11 @@ video {
   border-color: rgb(63 83 255 / var(--tw-border-opacity));
 }
 
+.bg-amber-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -2044,6 +2054,11 @@ video {
   --tw-ring-inset: inset;
 }
 
+.ring-amber-200 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity));
+}
+
 .ring-black {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
@@ -2074,6 +2089,10 @@ video {
   --tw-ring-opacity: 0.05;
 }
 
+.ring-offset-1 {
+  --tw-ring-offset-width: 1px;
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

package/frontend/src/document/confirm-delete/confirm-delete.html

@@ -1,18 +1,18 @@
 <div>
-    <h2>
-        Are you sure you want to delete the following document?
-    </h2>
-    <pre class="max-h-[50vh] overflow-auto"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
-    <div class="flex gap-2 mt-2">
-    <async-button
-        class="rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
-        @click="startDelete">
-        Confirm
-    </async-button>
-    <button 
-        class="rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300"
-        @click="closeDelete">
-        Cancel
-    </button>
-    </div>
-</div>
+  <h2>
+      Are you sure you want to delete the following document?
+  </h2>
+  <pre class="max-h-[50vh] overflow-auto"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
+  <div class="flex gap-2 mt-2">
+  <async-button
+      class="rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+      @click="startDelete">
+      Confirm
+  </async-button>
+  <button
+      class="rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300"
+      @click="closeDelete">
+      Cancel
+  </button>
+  </div>
+</div>

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

@@ -21,10 +21,10 @@
       </div>
 
       <!-- Data Type Filter -->
-      <div class="relative">
+      <div class="relative hidden md:block">
         <select
           v-model="selectedType"
-          class="hidden md:block px-4 py-2 pr-8 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white min-w-[140px] appearance-none"
+          class="px-4 py-2 pr-8 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white min-w-[140px] appearance-none"
         >
           <option value="">All Types</option>
           <option v-for="type in availableTypes" :key="type" :value="type">
@@ -41,12 +41,11 @@
       <!-- Add Field Button -->
       <button
         @click="openAddFieldModal"
-        class="hidden md:block px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 flex items-center gap-2"
+        class="hidden md:flex px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 items-center gap-2"
       >
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-        </svg>
-        Add Field
+        </svg> Add Field
       </button>
     </div>
   </div>
@@ -54,18 +53,32 @@
   <!-- Fields View -->
   <div v-if="viewMode === 'fields'">
     <!-- Schema Paths -->
-    <div v-for="path in filteredSchemaPaths" :key="path" class="value">
+    <div
+      v-for="path in filteredSchemaPaths"
+      :key="path.path || path"
+      class="value"
+    >
       <document-property
         :path="path"
         :document="document"
         :schemaPaths="schemaPaths"
         :editting="editting"
         :changes="changes"
+        :highlight="isSchemaPathMatched(path)"
         :invalid="invalid"></document-property>
     </div>
 
     <!-- Virtual Fields -->
-    <div v-for="path in filteredVirtuals" class="border border-gray-200 rounded-lg mb-2">
+    <div
+      v-for="path in filteredVirtuals"
+      :key="path.name"
+      class="border rounded-lg mb-2 transition-all duration-200 ease-in-out"
+      :class="[
+        isVirtualMatched(path)
+          ? 'border-amber-400 ring-2 ring-amber-200 ring-offset-1'
+          : 'border-gray-200'
+      ]"
+    >
     <!-- Virtual Field Header (Always Visible) -->
     <div
       @click="toggleVirtualField(path.name)"
@@ -99,7 +112,7 @@
   </div>
 
     <!-- No Results Message -->
-    <div v-if="searchQuery && filteredSchemaPaths.length === 0 && filteredVirtuals.length === 0" class="text-center py-8 text-gray-500">
+    <div v-if="searchQuery.trim() && !hasSearchMatches" class="text-center py-8 text-gray-500">
       <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.29-1.009-5.824-2.709M15 6.291A7.962 7.962 0 0012 5c-2.34 0-4.29 1.009-5.824 2.709"></path>
       </svg>

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

@@ -115,38 +115,39 @@ module.exports = app => app.component('document-details', {
     shouldUseDatePicker() {
       return this.fieldData.type === 'Date';
     },
-    filteredSchemaPaths() {
+    typeFilteredSchemaPaths() {
       let paths = this.schemaPaths || [];
 
-      // Filter by search query
-      if (this.searchQuery.trim()) {
-        const query = this.searchQuery.toLowerCase();
-        paths = paths.filter(path =>
-          path.path.toLowerCase().includes(query)
-        );
-      }
-
-      // Filter by data type
       if (this.selectedType) {
-        paths = paths.filter(path =>
-          path.instance === this.selectedType
-        );
+        paths = paths.filter(path => path.instance === this.selectedType);
       }
 
       return paths;
     },
-    filteredVirtuals() {
-      let virtuals = this.virtuals;
+    filteredSchemaPaths() {
+      const paths = this.typeFilteredSchemaPaths.slice();
 
-      // Filter by search query
-      if (this.searchQuery.trim()) {
-        const query = this.searchQuery.toLowerCase();
-        virtuals = virtuals.filter(virtual =>
-          virtual.name.toLowerCase().includes(query)
-        );
+      if (!this.searchQuery.trim()) {
+        return paths;
       }
 
-      // Filter by data type
+      const query = this.searchQuery.toLowerCase();
+      const matches = [];
+      const nonMatches = [];
+
+      paths.forEach(path => {
+        if (path.path.toLowerCase().includes(query)) {
+          matches.push(path);
+        } else {
+          nonMatches.push(path);
+        }
+      });
+
+      return matches.concat(nonMatches);
+    },
+    typeFilteredVirtuals() {
+      let virtuals = this.virtuals;
+
       if (this.selectedType) {
         virtuals = virtuals.filter(virtual => {
           const virtualType = this.getVirtualFieldType(virtual);
@@ -156,6 +157,58 @@ module.exports = app => app.component('document-details', {
 
       return virtuals;
     },
+    filteredVirtuals() {
+      const virtuals = this.typeFilteredVirtuals.slice();
+
+      if (!this.searchQuery.trim()) {
+        return virtuals;
+      }
+
+      const query = this.searchQuery.toLowerCase();
+      const matches = [];
+      const nonMatches = [];
+
+      virtuals.forEach(virtual => {
+        if (virtual.name.toLowerCase().includes(query)) {
+          matches.push(virtual);
+        } else {
+          nonMatches.push(virtual);
+        }
+      });
+
+      return matches.concat(nonMatches);
+    },
+    schemaSearchMatchSet() {
+      if (!this.searchQuery.trim()) {
+        return new Set();
+      }
+
+      const query = this.searchQuery.toLowerCase();
+      return new Set(
+        this.typeFilteredSchemaPaths
+          .filter(path => path.path.toLowerCase().includes(query))
+          .map(path => path.path)
+      );
+    },
+    virtualSearchMatchSet() {
+      if (!this.searchQuery.trim()) {
+        return new Set();
+      }
+
+      const query = this.searchQuery.toLowerCase();
+      return new Set(
+        this.typeFilteredVirtuals
+          .filter(virtual => virtual.name.toLowerCase().includes(query))
+          .map(virtual => virtual.name)
+      );
+    },
+    hasSearchMatches() {
+      if (!this.searchQuery.trim()) {
+        return true;
+      }
+
+      return this.schemaSearchMatchSet.size > 0 || this.virtualSearchMatchSet.size > 0;
+    },
     formattedJson() {
       if (!this.document) {
         return '{}';
@@ -171,6 +224,20 @@ module.exports = app => app.component('document-details', {
         this.collapsedVirtuals.add(fieldName);
       }
     },
+    isSchemaPathMatched(path) {
+      if (!path) {
+        return false;
+      }
+
+      return this.schemaSearchMatchSet.has(path.path);
+    },
+    isVirtualMatched(virtual) {
+      if (!virtual) {
+        return false;
+      }
+
+      return this.virtualSearchMatchSet.has(virtual.name);
+    },
     isVirtualFieldCollapsed(fieldName) {
       return this.collapsedVirtuals.has(fieldName);
     },

package/frontend/src/document-details/document-property/document-property.html

@@ -1,15 +1,16 @@
 <div class="border border-gray-200 rounded-lg mb-2">
   <!-- Collapsible Header -->
-  <div 
+  <div
     @click="toggleCollapse"
-    class="p-3 bg-gray-50 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200"
+    class="p-3 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
+    :class="{ 'bg-amber-100': highlight, 'bg-gray-50': !highlight }"
   >
-    <div class="flex items-center">
-      <svg 
+    <div class="flex items-center" >
+      <svg
         :class="isCollapsed ? 'rotate-0' : 'rotate-90'"
         class="w-4 h-4 text-gray-500 mr-2 transition-transform duration-200"
-        fill="none" 
-        stroke="currentColor" 
+        fill="none"
+        stroke="currentColor"
         viewBox="0 0 24 24"
       >
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
@@ -27,7 +28,7 @@
       </router-link>
     </div>
   </div>
-  
+
   <!-- Collapsible Content -->
   <div v-if="!isCollapsed" class="p-3">
     <!-- Date Type Selector (when editing dates) -->
@@ -53,7 +54,7 @@
         </div>
       </div>
     </div>
-    
+
     <!-- Field Content -->
     <div v-if="editting && path.path !== '_id'">
       <component
@@ -69,7 +70,7 @@
       <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->
       <div v-if="needsTruncation && !isValueExpanded" class="truncated-value-container">
         <div class="text-gray-700 whitespace-pre-wrap break-words font-mono text-sm">{{truncatedString}}</div>
-        <button 
+        <button
           @click="toggleValueExpansion"
           class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
         >
@@ -81,7 +82,7 @@
       </div>
       <div v-else-if="needsTruncation && isValueExpanded" class="expanded-value-container">
         <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
-        <button 
+        <button
           @click="toggleValueExpansion"
           class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1"
         >

package/frontend/src/document-details/document-property/document-property.js

@@ -16,7 +16,7 @@ module.exports = app => app.component('document-property', {
       isValueExpanded: false // Track if the value is expanded
     };
   },
-  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid'],
+  props: ['path', 'document', 'schemaPaths', 'editting', 'changes', 'invalid', 'highlight'],
   computed: {
     valueAsString() {
       const value = this.getValueForPath(this.path.path);
@@ -94,4 +94,4 @@ module.exports = app => app.component('document-property', {
       this.isValueExpanded = !this.isValueExpanded;
     }
   }
-});
+});

package/frontend/src/modal/modal.css

@@ -96,3 +96,11 @@
 .modal-container .modal-exit:hover {
   background-color: #f1f5ff;
 }
+
+@media (max-width: 767px) {
+  .modal-container {
+    width: calc(100vw - 10px);
+    margin: 0;
+    margin-left: 5px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.130",
+  "version": "0.0.131",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {