@mongoosejs/studio 0.2.2 → 0.2.4

package/backend/actions/Model/updateDocument.js

@@ -16,13 +16,16 @@ const UpdateDocumentsParams = new Archetype({
     $type: Object,
     $required: true
   },
+  unset: {
+    $type: Object
+  },
   roles: {
     $type: ['string']
   }
 }).compile('UpdateDocumentsParams');
 
 module.exports = ({ db }) => async function updateDocument(params) {
-  const { model, _id, update, roles } = new UpdateDocumentsParams(params);
+  const { model, _id, update, unset, roles } = new UpdateDocumentsParams(params);
 
   await authorize('Model.updateDocument', roles);
 
@@ -32,16 +35,11 @@ module.exports = ({ db }) => async function updateDocument(params) {
   }
 
   const setFields = {};
-  const unsetFields = {};
-  
+  const unsetFields = unset || {};
+
   if (Object.keys(update).length > 0) {
     Object.entries(update).forEach(([key, value]) => {
-      if (value === 'null') {
-        setFields[key] = null;
-      } else if (value === 'undefined') {
-        // Use $unset to remove the field for undefined values
-        unsetFields[key] = 1;
-      } else if (value === '') {
+      if (value === '') {
         // Treat empty strings as undefined - unset the field
         unsetFields[key] = 1;
       } else {

package/frontend/public/app.js

@@ -9,6 +9,10 @@
 
 var map = {
 	"./": "./frontend/src/index.js",
+	"./_util/baseComponent": "./frontend/src/_util/baseComponent.js",
+	"./_util/baseComponent.js": "./frontend/src/_util/baseComponent.js",
+	"./_util/deepEqual": "./frontend/src/_util/deepEqual.js",
+	"./_util/deepEqual.js": "./frontend/src/_util/deepEqual.js",
 	"./_util/document-search-autocomplete": "./frontend/src/_util/document-search-autocomplete.js",
 	"./_util/document-search-autocomplete.js": "./frontend/src/_util/document-search-autocomplete.js",
 	"./api": "./frontend/src/api.js",
@@ -208,6 +212,100 @@ webpackContext.resolve = webpackContextResolve;
 module.exports = webpackContext;
 webpackContext.id = "./frontend/src sync recursive ^\\.\\/.*$";
 
+/***/ },
+
+/***/ "./frontend/src/_util/baseComponent.js"
+/*!*********************************************!*\
+  !*** ./frontend/src/_util/baseComponent.js ***!
+  \*********************************************/
+(module) {
+
+"use strict";
+
+
+module.exports = {
+  destroyed() {
+    this.$parent.$options.$children = this.$parent.$options.$children.filter(
+      (el) => el !== this
+    );
+  },
+  created() {
+    this.$parent.$options.$children = this.$parent.$options.$children || [];
+    this.$parent.$options.$children.push(this);
+  },
+  mounted() {
+    this.isMounted = true;
+  },
+  unmounted() {
+    this.isMounted = false;
+  }
+};
+
+
+/***/ },
+
+/***/ "./frontend/src/_util/deepEqual.js"
+/*!*****************************************!*\
+  !*** ./frontend/src/_util/deepEqual.js ***!
+  \*****************************************/
+(module) {
+
+"use strict";
+
+
+/**
+ * Deep equality check for values (handles primitives, arrays, objects, dates, etc.)
+ * @param {*} a - First value to compare
+ * @param {*} b - Second value to compare
+ * @returns {boolean} - True if values are deeply equal
+ */
+function deepEqual(a, b) {
+  // Handle primitives and same reference
+  if (a === b) return true;
+  
+  // Handle null and undefined
+  if (a == null || b == null) return a === b;
+  
+  // Handle different types
+  if (typeof a !== typeof b) return false;
+  
+  // Handle dates
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+  
+  // Handle arrays - must both be arrays
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b)) return false;
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  
+  // Handle objects (non-arrays)
+  if (typeof a === 'object' && typeof b === 'object') {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    
+    if (keysA.length !== keysB.length) return false;
+    
+    for (const key of keysA) {
+      if (!keysB.includes(key)) return false;
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+    
+    return true;
+  }
+  
+  // Fallback for primitives (strings, numbers, booleans)
+  return false;
+}
+
+module.exports = deepEqual;
+
+
 /***/ },
 
 /***/ "./frontend/src/_util/document-search-autocomplete.js"
@@ -855,6 +953,7 @@ module.exports = function appendCSS(css) {
 
 
 const { inspect } = __webpack_require__(/*! node-inspect-extracted */ "./node_modules/node-inspect-extracted/dist/inspect.js");
+const deepEqual = __webpack_require__(/*! ./_util/deepEqual */ "./frontend/src/_util/deepEqual.js");
 
 /**
  * Format a value for display in array views
@@ -2254,10 +2353,12 @@ module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'load
 
 
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
+const baseComponent = __webpack_require__(/*! ../_util/baseComponent */ "./frontend/src/_util/baseComponent.js");
 const template = __webpack_require__(/*! ./dashboard.html */ "./frontend/src/dashboard/dashboard.html");
 
-module.exports = app => app.component('dashboard', {
+module.exports = {
   template: template,
+  extends: baseComponent,
   props: ['dashboardId'],
   data: function() {
     return {
@@ -2301,7 +2402,7 @@ module.exports = app => app.component('dashboard', {
       }
     },
     shouldEvaluateDashboard() {
-      if (this.dashboardResults.length === 0) {
+      if (!this.dashboardResults || this.dashboardResults.length === 0) {
         return true;
       }
 
@@ -2368,6 +2469,22 @@ module.exports = app => app.component('dashboard', {
         this.startingChat = false;
         this.showActionsMenu = false;
       }
+    },
+    async loadInitial() {
+      const { dashboard, dashboardResults, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: false });
+      if (!dashboard) {
+        return;
+      }
+      this.dashboard = dashboard;
+      this.code = this.dashboard.code;
+      this.title = this.dashboard.title;
+      this.description = this.dashboard.description ?? '';
+      this.dashboardResults = dashboardResults;
+      if (this.shouldEvaluateDashboard()) {
+        await this.evaluateDashboard();
+        return;
+      }
+      this.status = 'loaded';
     }
   },
   computed: {
@@ -2378,25 +2495,12 @@ module.exports = app => app.component('dashboard', {
   mounted: async function() {
     document.addEventListener('click', this.handleDocumentClick);
     this.showEditor = this.$route.query.edit;
-    const { dashboard, dashboardResults, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: false });
-    if (!dashboard) {
-      return;
-    }
-    this.dashboard = dashboard;
-    this.code = this.dashboard.code;
-    this.title = this.dashboard.title;
-    this.description = this.dashboard.description ?? '';
-    this.dashboardResults = dashboardResults;
-    if (this.shouldEvaluateDashboard()) {
-      await this.evaluateDashboard();
-      return;
-    }
-    this.status = 'loaded';
+    await this.loadInitial();
   },
   beforeDestroy() {
     document.removeEventListener('click', this.handleDocumentClick);
   }
-});
+};
 
 
 /***/ },
@@ -3181,7 +3285,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=\"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      <!-- 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\">\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";
 
 /***/ },
 
@@ -3197,7 +3301,7 @@ module.exports = "<div class=\"border border-gray-200 bg-white rounded-lg mb-2\"
 
 
 const mpath = __webpack_require__(/*! mpath */ "./node_modules/mpath/index.js");
-const { inspect } = __webpack_require__(/*! node-inspect-extracted */ "./node_modules/node-inspect-extracted/dist/inspect.js");
+const deepEqual = __webpack_require__(/*! ../../_util/deepEqual */ "./frontend/src/_util/deepEqual.js");
 const template = __webpack_require__(/*! ./document-property.html */ "./frontend/src/document-details/document-property/document-property.html");
 
 const appendCSS = __webpack_require__(/*! ../../appendCSS */ "./frontend/src/appendCSS.js");
@@ -3289,6 +3393,20 @@ module.exports = app => app.component('document-property', {
     }
   },
   methods: {
+    handleInputChange(newValue) {
+      const currentValue = this.getValueForPath(this.path.path);
+
+      // Only record as a change if the value is actually different
+      if (!deepEqual(currentValue, newValue)) {
+        this.changes[this.path.path] = newValue;
+      } else {
+        // If the value is the same as the original, remove it from changes
+        delete this.changes[this.path.path];
+      }
+
+      // Always clear invalid state on input
+      delete this.invalid[this.path.path];
+    },
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
         return 'detail-array';
@@ -3434,6 +3552,16 @@ module.exports = app => app.component('confirm-changes', {
   props: ['value'],
   computed: {
     displayValue() {
+      const hasUnsetFields = Object.keys(this.value).some(key => this.value[key] === undefined);
+      if (hasUnsetFields) {
+        const unsetFields = Object.keys(this.value)
+          .filter(key => this.value[key] === undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: 1 }), {});
+        const setFields = Object.keys(this.value)
+          .filter(key => this.value[key] !== undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: this.value[key] }), {});
+        return JSON.stringify({ $set: setFields, $unset: unsetFields }, null, '  ').trim();
+      }
       return JSON.stringify(this.value, null, '  ').trim();
     }
   },
@@ -3450,6 +3578,7 @@ module.exports = app => app.component('confirm-changes', {
   }
 });
 
+
 /***/ },
 
 /***/ "./frontend/src/document/confirm-delete/confirm-delete.html"
@@ -3515,7 +3644,7 @@ module.exports = ".document .document-menu {\n  display: flex;\n  position: stic
 (module) {
 
 "use strict";
-module.exports = "<div class=\"document px-1 pt-4 md:px-0 bg-slate-50 w-full\">\n  <div class=\"max-w-7xl mx-auto\">\n    <div class=\"flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm\">\n      <div class=\"font-bold overflow-hidden text-ellipsis\">{{model}}: {{documentId}}</div>\n      <div class=\"flex grow\">\n        <button\n          @click=\"viewMode = 'fields'\"\n          :class=\"viewMode === 'fields'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 border-r-0 rounded-l-lg rounded-r-none\"\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=\"M4 6h16M4 10h16M4 14h16M4 18h16\"></path>\n          </svg>\n          Fields\n        </button>\n        <button\n          @click=\"viewMode = 'json'\"\n          :class=\"viewMode === 'json'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 rounded-r-lg rounded-l-none\"\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=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"></path>\n          </svg>\n          JSON\n        </button>\n      </div>\n\n      <div class=\"gap-2 hidden md:flex items-center\">\n        <button\n          v-if=\"!editting\"\n          @click=\"editting = true\"\n          :disabled=\"!canEdit\"\n          :class=\"{'cursor-not-allowed opacity-50': !canEdit}\"\n          type=\"button\"\n          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\">\n          <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n        </button>\n        <button\n          v-if=\"editting\"\n          @click=\"editting = false\"\n          type=\"button\"\n          class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n          &times; Cancel\n        </button>\n        <button\n          v-if=\"editting\"\n          :disabled=\"!canManipulate\"\n          :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n          @click=\"shouldShowConfirmModal=true;\"\n          type=\"button\"\n          class=\"rounded-md bg-forest-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          <img src=\"images/save.svg\" class=\"inline\" /> Save\n        </button>\n\n        <!-- 3-dot menu -->\n        <div class=\"relative\">\n          <button\n            @click=\"desktopMenuOpen = !desktopMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"desktopMenuOpen\"\n            aria-label=\"More options\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"5\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"19\" r=\"2\"></circle>\n            </svg>\n          </button>\n          <div\n            v-show=\"desktopMenuOpen\"\n            @click.away=\"desktopMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                @click=\"addField(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"md:hidden flex items-center\">\n        <div class=\"relative\">\n          <button\n            @click=\"mobileMenuOpen = !mobileMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"mobileMenuOpen\"\n            aria-label=\"Open menu\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"></path>\n            </svg>\n          </button>\n          <div\n            v-show=\"mobileMenuOpen\"\n            @click.away=\"mobileMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                v-if=\"!editting\"\n                @click=\"editting = true; mobileMenuOpen = false\"\n                :disabled=\"!canEdit\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']\"\n                type=\"button\"\n              >\n                Edit\n              </button>\n              <button\n                v-if=\"editting\"\n                @click=\"editting = false; mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100\"\n              >\n                Cancel\n              </button>\n              <button\n                v-if=\"editting\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']\"\n                @click=\"shouldShowConfirmModal=true; mobileMenuOpen = false\"\n                type=\"button\"\n              >\n                Save\n              </button>\n              <button\n                @click=\"addField(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"status === 'loaded'\">\n      <document-details\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :virtualPaths=\"virtualPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :invalid=\"invalid\"\n        :viewMode=\"viewMode\"\n        :model=\"model\"\n        @add-field=\"addField\"\n        @view-mode-change=\"updateViewMode\"></document-details>\n      <modal v-if=\"shouldShowConfirmModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n          <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowDeleteModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowDeleteModal = false;\">&times;</div>\n          <confirm-delete @close=\"shouldShowDeleteModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowCloneModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n            <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n        </template>\n      </modal>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full\">\n  <div class=\"max-w-7xl mx-auto\">\n    <div class=\"flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm\">\n      <div class=\"font-bold overflow-hidden text-ellipsis\">{{model}}: {{documentId}}</div>\n      <div class=\"flex grow\">\n        <button\n          @click=\"viewMode = 'fields'\"\n          :class=\"viewMode === 'fields'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 border-r-0 rounded-l-lg rounded-r-none\"\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=\"M4 6h16M4 10h16M4 14h16M4 18h16\"></path>\n          </svg>\n          Fields\n        </button>\n        <button\n          @click=\"viewMode = 'json'\"\n          :class=\"viewMode === 'json'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-gray-300 rounded-r-lg rounded-l-none\"\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=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"></path>\n          </svg>\n          JSON\n        </button>\n      </div>\n\n      <div class=\"gap-2 hidden md:flex items-center\">\n        <button\n          v-if=\"!editting\"\n          @click=\"editting = true\"\n          :disabled=\"!canEdit\"\n          :class=\"{'cursor-not-allowed opacity-50': !canEdit}\"\n          type=\"button\"\n          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\">\n          <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n        </button>\n        <button\n          v-if=\"editting\"\n          @click=\"editting = false\"\n          type=\"button\"\n          class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n          &times; Cancel\n        </button>\n        <button\n          v-if=\"editting\"\n          :disabled=\"!canManipulate\"\n          :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n          @click=\"shouldShowConfirmModal=true;\"\n          type=\"button\"\n          class=\"rounded-md bg-forest-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          <img src=\"images/save.svg\" class=\"inline\" /> Save\n        </button>\n\n        <!-- 3-dot menu -->\n        <div class=\"relative\">\n          <button\n            @click=\"desktopMenuOpen = !desktopMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"desktopMenuOpen\"\n            aria-label=\"More options\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"5\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"19\" r=\"2\"></circle>\n            </svg>\n          </button>\n          <div\n            v-show=\"desktopMenuOpen\"\n            @click.away=\"desktopMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                @click=\"addField(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"md:hidden flex items-center\">\n        <div class=\"relative\">\n          <button\n            @click=\"mobileMenuOpen = !mobileMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"mobileMenuOpen\"\n            aria-label=\"Open menu\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"></path>\n            </svg>\n          </button>\n          <div\n            v-show=\"mobileMenuOpen\"\n            @click.away=\"mobileMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                v-if=\"!editting\"\n                @click=\"editting = true; mobileMenuOpen = false\"\n                :disabled=\"!canEdit\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']\"\n                type=\"button\"\n              >\n                Edit\n              </button>\n              <button\n                v-if=\"editting\"\n                @click=\"editting = false; mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100\"\n              >\n                Cancel\n              </button>\n              <button\n                v-if=\"editting\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']\"\n                @click=\"shouldShowConfirmModal=true; mobileMenuOpen = false\"\n                type=\"button\"\n              >\n                Save\n              </button>\n              <button\n                @click=\"addField(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"status === 'loaded'\">\n      <document-details\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :virtualPaths=\"virtualPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :invalid=\"invalid\"\n        :viewMode=\"viewMode\"\n        :model=\"model\"\n        @add-field=\"addField\"\n        @view-mode-change=\"updateViewMode\"></document-details>\n      <modal v-if=\"shouldShowConfirmModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n          <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowDeleteModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowDeleteModal = false;\">&times;</div>\n          <confirm-delete @close=\"shouldShowDeleteModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowCloneModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n            <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n        </template>\n      </modal>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -3602,10 +3731,25 @@ module.exports = app => app.component('document', {
       if (Object.keys(this.invalid).length > 0) {
         throw new Error('Invalid paths: ' + Object.keys(this.invalid).join(', '));
       }
+
+      let update = this.changes;
+      let unset = {};
+      const hasUnsetFields = Object.keys(this.changes)
+        .some(key => this.changes[key] === undefined);
+      if (hasUnsetFields) {
+        unset = Object.keys(this.changes)
+          .filter(key => this.changes[key] === undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: 1 }), {});
+        update = Object.keys(this.changes)
+          .filter(key => this.changes[key] !== undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: this.changes[key] }), {});
+      }
+
       const { doc } = await api.Model.updateDocument({
         model: this.model,
         _id: this.document._id,
-        update: this.changes
+        update,
+        unset
       });
       this.document = doc;
       this.changes = {};
@@ -3833,20 +3977,12 @@ module.exports = app => app.component('edit-boolean', {
       this.selectedValue = newValue;
     },
     selectedValue(newValue) {
-      // Convert null/undefined to strings for proper backend serialization
-      const emitValue = this.convertValueToString(newValue);
-      this.$emit('input', emitValue);
+      this.$emit('input', newValue);
     }
   },
   methods: {
     selectValue(value) {
       this.selectedValue = value;
-    },
-    convertValueToString(value) {
-      // Convert null/undefined to strings for proper backend serialization
-      if (value === null) return 'null';
-      if (typeof value === 'undefined') return 'undefined';
-      return value;
     }
   }
 });
@@ -4398,7 +4534,11 @@ requireComponents.keys().forEach((filePath) => {
   // Check if the file name matches the directory name
   if (directoryName === fileName) {
     components[directoryName] = requireComponents(filePath);
-    components[directoryName](app);
+    if (typeof components[directoryName] === 'function') {
+      components[directoryName](app);
+    } else {
+      app.component(directoryName, components[directoryName]);
+    }
   }
 });
 
@@ -4470,7 +4610,7 @@ app.component('app-component', {
 
         this.user = user;
         this.roles = roles;
-        
+
         setTimeout(() => {
           this.$router.replace(this.$router.currentRoute.value.path);
         }, 0);
@@ -6949,7 +7089,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _vue_shared__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/shared */ "./node_modules/@vue/shared/dist/shared.esm-bundler.js");
 /**
-* @vue/reactivity v3.5.26
+* @vue/reactivity v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -8078,20 +8218,20 @@ function createIterableMethod(method, isReadonly2, isShallow2) {
       "iterate",
       isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
     );
-    return {
-      // iterator protocol
-      next() {
-        const { value, done } = innerIterator.next();
-        return done ? { value, done } : {
-          value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
-          done
-        };
-      },
-      // iterable protocol
-      [Symbol.iterator]() {
-        return this;
+    return (0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.extend)(
+      // inheriting all iterator properties
+      Object.create(innerIterator),
+      {
+        // iterator protocol
+        next() {
+          const { value, done } = innerIterator.next();
+          return done ? { value, done } : {
+            value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
+            done
+          };
+        }
       }
-    };
+    );
   };
 }
 function createReadonlyMethod(type) {
@@ -8305,8 +8445,9 @@ function targetTypeMap(rawType) {
 function getTargetType(value) {
   return value["__v_skip"] || !Object.isExtensible(value) ? 0 /* INVALID */ : targetTypeMap((0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.toRawType)(value));
 }
+// @__NO_SIDE_EFFECTS__
 function reactive(target) {
-  if (isReadonly(target)) {
+  if (/* @__PURE__ */ isReadonly(target)) {
     return target;
   }
   return createReactiveObject(
@@ -8317,6 +8458,7 @@ function reactive(target) {
     reactiveMap
   );
 }
+// @__NO_SIDE_EFFECTS__
 function shallowReactive(target) {
   return createReactiveObject(
     target,
@@ -8326,6 +8468,7 @@ function shallowReactive(target) {
     shallowReactiveMap
   );
 }
+// @__NO_SIDE_EFFECTS__
 function readonly(target) {
   return createReactiveObject(
     target,
@@ -8335,6 +8478,7 @@ function readonly(target) {
     readonlyMap
   );
 }
+// @__NO_SIDE_EFFECTS__
 function shallowReadonly(target) {
   return createReactiveObject(
     target,
@@ -8373,24 +8517,29 @@ function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandl
   proxyMap.set(target, proxy);
   return proxy;
 }
+// @__NO_SIDE_EFFECTS__
 function isReactive(value) {
-  if (isReadonly(value)) {
-    return isReactive(value["__v_raw"]);
+  if (/* @__PURE__ */ isReadonly(value)) {
+    return /* @__PURE__ */ isReactive(value["__v_raw"]);
   }
   return !!(value && value["__v_isReactive"]);
 }
+// @__NO_SIDE_EFFECTS__
 function isReadonly(value) {
   return !!(value && value["__v_isReadonly"]);
 }
+// @__NO_SIDE_EFFECTS__
 function isShallow(value) {
   return !!(value && value["__v_isShallow"]);
 }
+// @__NO_SIDE_EFFECTS__
 function isProxy(value) {
   return value ? !!value["__v_raw"] : false;
 }
+// @__NO_SIDE_EFFECTS__
 function toRaw(observed) {
   const raw = observed && observed["__v_raw"];
-  return raw ? toRaw(raw) : observed;
+  return raw ? /* @__PURE__ */ toRaw(raw) : observed;
 }
 function markRaw(value) {
   if (!(0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.hasOwn)(value, "__v_skip") && Object.isExtensible(value)) {
@@ -8398,20 +8547,23 @@ function markRaw(value) {
   }
   return value;
 }
-const toReactive = (value) => (0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isObject)(value) ? reactive(value) : value;
-const toReadonly = (value) => (0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isObject)(value) ? readonly(value) : value;
+const toReactive = (value) => (0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isObject)(value) ? /* @__PURE__ */ reactive(value) : value;
+const toReadonly = (value) => (0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isObject)(value) ? /* @__PURE__ */ readonly(value) : value;
 
+// @__NO_SIDE_EFFECTS__
 function isRef(r) {
   return r ? r["__v_isRef"] === true : false;
 }
+// @__NO_SIDE_EFFECTS__
 function ref(value) {
   return createRef(value, false);
 }
+// @__NO_SIDE_EFFECTS__
 function shallowRef(value) {
   return createRef(value, true);
 }
 function createRef(rawValue, shallow) {
-  if (isRef(rawValue)) {
+  if (/* @__PURE__ */ isRef(rawValue)) {
     return rawValue;
   }
   return new RefImpl(rawValue, shallow);
@@ -8470,7 +8622,7 @@ function triggerRef(ref2) {
   }
 }
 function unref(ref2) {
-  return isRef(ref2) ? ref2.value : ref2;
+  return /* @__PURE__ */ isRef(ref2) ? ref2.value : ref2;
 }
 function toValue(source) {
   return (0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isFunction)(source) ? source() : unref(source);
@@ -8479,7 +8631,7 @@ const shallowUnwrapHandlers = {
   get: (target, key, receiver) => key === "__v_raw" ? target : unref(Reflect.get(target, key, receiver)),
   set: (target, key, value, receiver) => {
     const oldValue = target[key];
-    if (isRef(oldValue) && !isRef(value)) {
+    if (/* @__PURE__ */ isRef(oldValue) && !/* @__PURE__ */ isRef(value)) {
       oldValue.value = value;
       return true;
     } else {
@@ -8509,6 +8661,7 @@ class CustomRefImpl {
 function customRef(factory) {
   return new CustomRefImpl(factory);
 }
+// @__NO_SIDE_EFFECTS__
 function toRefs(object) {
   if ( true && !isProxy(object)) {
     warn(`toRefs() expects a reactive object but received a plain one.`);
@@ -8544,9 +8697,9 @@ class ObjectRefImpl {
     return this._value = val === void 0 ? this._defaultValue : val;
   }
   set value(newVal) {
-    if (this._shallow && isRef(this._raw[this._key])) {
+    if (this._shallow && /* @__PURE__ */ isRef(this._raw[this._key])) {
       const nestedRef = this._object[this._key];
-      if (isRef(nestedRef)) {
+      if (/* @__PURE__ */ isRef(nestedRef)) {
         nestedRef.value = newVal;
         return;
       }
@@ -8568,15 +8721,16 @@ class GetterRefImpl {
     return this._value = this._getter();
   }
 }
+// @__NO_SIDE_EFFECTS__
 function toRef(source, key, defaultValue) {
-  if (isRef(source)) {
+  if (/* @__PURE__ */ isRef(source)) {
     return source;
   } else if ((0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isFunction)(source)) {
     return new GetterRefImpl(source);
   } else if ((0,_vue_shared__WEBPACK_IMPORTED_MODULE_0__.isObject)(source) && arguments.length > 1) {
     return propertyToRef(source, key, defaultValue);
   } else {
-    return ref(source);
+    return /* @__PURE__ */ ref(source);
   }
 }
 function propertyToRef(source, key, defaultValue) {
@@ -8657,6 +8811,7 @@ class ComputedRefImpl {
     }
   }
 }
+// @__NO_SIDE_EFFECTS__
 function computed(getterOrOptions, debugOptions, isSSR = false) {
   let getter;
   let setter;
@@ -9072,7 +9227,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_reactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/reactivity */ "./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js");
 /* harmony import */ var _vue_shared__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/shared */ "./node_modules/@vue/shared/dist/shared.esm-bundler.js");
 /**
-* @vue/runtime-core v3.5.26
+* @vue/runtime-core v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -11223,7 +11378,7 @@ Server rendered element contains more child nodes than client vdom.`
               logMismatchError();
             }
             if (forcePatch && (key.endsWith("value") || key === "indeterminate") || (0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isOn)(key) && !(0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isReservedProp)(key) || // force hydrate v-bind with .prop modifiers
-            key[0] === "." || isCustomElement) {
+            key[0] === "." || isCustomElement && !(0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isReservedProp)(key)) {
               patchProp(el, key, null, props[key], void 0, parentComponent);
             }
           }
@@ -17571,7 +17726,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.26";
+const version = "3.5.27";
 const warn =  true ? warn$1 : 0;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools =  true ? devtools$1 : 0;
@@ -17782,7 +17937,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_runtime_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/runtime-core */ "./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js");
 /* harmony import */ var _vue_runtime_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @vue/shared */ "./node_modules/@vue/shared/dist/shared.esm-bundler.js");
 /**
-* @vue/runtime-dom v3.5.26
+* @vue/runtime-dom v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -19788,7 +19943,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   toTypeString: () => (/* binding */ toTypeString)
 /* harmony export */ });
 /**
-* @vue/shared v3.5.26
+* @vue/shared v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -23512,6 +23667,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   BSONValue: () => (/* binding */ BSONValue),
 /* harmony export */   BSONVersionError: () => (/* binding */ BSONVersionError),
 /* harmony export */   Binary: () => (/* binding */ Binary),
+/* harmony export */   ByteUtils: () => (/* binding */ ByteUtils),
 /* harmony export */   Code: () => (/* binding */ Code),
 /* harmony export */   DBRef: () => (/* binding */ DBRef),
 /* harmony export */   Decimal128: () => (/* binding */ Decimal128),
@@ -23521,6 +23677,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   Long: () => (/* binding */ Long),
 /* harmony export */   MaxKey: () => (/* binding */ MaxKey),
 /* harmony export */   MinKey: () => (/* binding */ MinKey),
+/* harmony export */   NumberUtils: () => (/* binding */ NumberUtils),
 /* harmony export */   ObjectId: () => (/* binding */ ObjectId),
 /* harmony export */   Timestamp: () => (/* binding */ Timestamp),
 /* harmony export */   UUID: () => (/* binding */ UUID),
@@ -23765,6 +23922,7 @@ const nodejsRandomBytes = (() => {
     }
 })();
 const nodeJsByteUtils = {
+    isUint8Array: isUint8Array,
     toLocalBufferType(potentialBuffer) {
         if (Buffer.isBuffer(potentialBuffer)) {
             return potentialBuffer;
@@ -23787,6 +23945,12 @@ const nodeJsByteUtils = {
     allocateUnsafe(size) {
         return Buffer.allocUnsafe(size);
     },
+    compare(a, b) {
+        return nodeJsByteUtils.toLocalBufferType(a).compare(b);
+    },
+    concat(list) {
+        return Buffer.concat(list);
+    },
     equals(a, b) {
         return nodeJsByteUtils.toLocalBufferType(a).equals(b);
     },
@@ -23796,6 +23960,9 @@ const nodeJsByteUtils = {
     fromBase64(base64) {
         return Buffer.from(base64, 'base64');
     },
+    fromUTF8(utf8) {
+        return Buffer.from(utf8, 'utf8');
+    },
     toBase64(buffer) {
         return nodeJsByteUtils.toLocalBufferType(buffer).toString('base64');
     },
@@ -23870,6 +24037,7 @@ const webRandomBytes = (() => {
 })();
 const HEX_DIGIT = /(\d|[a-f])/i;
 const webByteUtils = {
+    isUint8Array: isUint8Array,
     toLocalBufferType(potentialUint8array) {
         const stringTag = potentialUint8array?.[Symbol.toStringTag] ??
             Object.prototype.toString.call(potentialUint8array);
@@ -23896,12 +24064,43 @@ const webByteUtils = {
     allocateUnsafe(size) {
         return webByteUtils.allocate(size);
     },
-    equals(a, b) {
-        if (a.byteLength !== b.byteLength) {
+    compare(uint8Array, otherUint8Array) {
+        if (uint8Array === otherUint8Array)
+            return 0;
+        const len = Math.min(uint8Array.length, otherUint8Array.length);
+        for (let i = 0; i < len; i++) {
+            if (uint8Array[i] < otherUint8Array[i])
+                return -1;
+            if (uint8Array[i] > otherUint8Array[i])
+                return 1;
+        }
+        if (uint8Array.length < otherUint8Array.length)
+            return -1;
+        if (uint8Array.length > otherUint8Array.length)
+            return 1;
+        return 0;
+    },
+    concat(uint8Arrays) {
+        if (uint8Arrays.length === 0)
+            return webByteUtils.allocate(0);
+        let totalLength = 0;
+        for (const uint8Array of uint8Arrays) {
+            totalLength += uint8Array.length;
+        }
+        const result = webByteUtils.allocate(totalLength);
+        let offset = 0;
+        for (const uint8Array of uint8Arrays) {
+            result.set(uint8Array, offset);
+            offset += uint8Array.length;
+        }
+        return result;
+    },
+    equals(uint8Array, otherUint8Array) {
+        if (uint8Array.byteLength !== otherUint8Array.byteLength) {
             return false;
         }
-        for (let i = 0; i < a.byteLength; i++) {
-            if (a[i] !== b[i]) {
+        for (let i = 0; i < uint8Array.byteLength; i++) {
+            if (uint8Array[i] !== otherUint8Array[i]) {
                 return false;
             }
         }
@@ -23913,6 +24112,9 @@ const webByteUtils = {
     fromBase64(base64) {
         return Uint8Array.from(atob(base64), c => c.charCodeAt(0));
     },
+    fromUTF8(utf8) {
+        return new TextEncoder().encode(utf8);
+    },
     toBase64(uint8array) {
         return btoa(webByteUtils.toISO88591(uint8array));
     },
@@ -28148,6 +28350,7 @@ var bson = /*#__PURE__*/Object.freeze({
     BSONValue: BSONValue,
     BSONVersionError: BSONVersionError,
     Binary: Binary,
+    ByteUtils: ByteUtils,
     Code: Code,
     DBRef: DBRef,
     Decimal128: Decimal128,
@@ -28157,6 +28360,7 @@ var bson = /*#__PURE__*/Object.freeze({
     Long: Long,
     MaxKey: MaxKey,
     MinKey: MinKey,
+    NumberUtils: NumberUtils,
     ObjectId: ObjectId,
     Timestamp: Timestamp,
     UUID: UUID,
@@ -32210,7 +32414,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _vue_runtime_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @vue/runtime-dom */ "./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js");
 /* harmony import */ var _vue_runtime_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @vue/runtime-dom */ "./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js");
 /**
-* vue v3.5.26
+* vue v3.5.27
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -32246,7 +32450,7 @@ const compile = () => {
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.2.2","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"},"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.2.4","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"}}');
 
 /***/ }
 

package/frontend/public/tw.css

@@ -1877,6 +1877,10 @@ video {
   padding-bottom: 2rem;
 }
 
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }

package/frontend/src/_util/baseComponent.js

@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = {
+  destroyed() {
+    this.$parent.$options.$children = this.$parent.$options.$children.filter(
+      (el) => el !== this
+    );
+  },
+  created() {
+    this.$parent.$options.$children = this.$parent.$options.$children || [];
+    this.$parent.$options.$children.push(this);
+  },
+  mounted() {
+    this.isMounted = true;
+  },
+  unmounted() {
+    this.isMounted = false;
+  }
+};

package/frontend/src/_util/deepEqual.js

@@ -0,0 +1,53 @@
+'use strict';
+
+/**
+ * Deep equality check for values (handles primitives, arrays, objects, dates, etc.)
+ * @param {*} a - First value to compare
+ * @param {*} b - Second value to compare
+ * @returns {boolean} - True if values are deeply equal
+ */
+function deepEqual(a, b) {
+  // Handle primitives and same reference
+  if (a === b) return true;
+  
+  // Handle null and undefined
+  if (a == null || b == null) return a === b;
+  
+  // Handle different types
+  if (typeof a !== typeof b) return false;
+  
+  // Handle dates
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+  
+  // Handle arrays - must both be arrays
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b)) return false;
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  
+  // Handle objects (non-arrays)
+  if (typeof a === 'object' && typeof b === 'object') {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    
+    if (keysA.length !== keysB.length) return false;
+    
+    for (const key of keysA) {
+      if (!keysB.includes(key)) return false;
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+    
+    return true;
+  }
+  
+  // Fallback for primitives (strings, numbers, booleans)
+  return false;
+}
+
+module.exports = deepEqual;

package/frontend/src/array-utils.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const { inspect } = require('node-inspect-extracted');
+const deepEqual = require('./_util/deepEqual');
 
 /**
  * Format a value for display in array views

package/frontend/src/dashboard/dashboard.js

@@ -1,10 +1,12 @@
 'use strict';
 
 const api = require('../api');
+const baseComponent = require('../_util/baseComponent');
 const template = require('./dashboard.html');
 
-module.exports = app => app.component('dashboard', {
+module.exports = {
   template: template,
+  extends: baseComponent,
   props: ['dashboardId'],
   data: function() {
     return {
@@ -48,7 +50,7 @@ module.exports = app => app.component('dashboard', {
       }
     },
     shouldEvaluateDashboard() {
-      if (this.dashboardResults.length === 0) {
+      if (!this.dashboardResults || this.dashboardResults.length === 0) {
         return true;
       }
 
@@ -115,6 +117,22 @@ module.exports = app => app.component('dashboard', {
         this.startingChat = false;
         this.showActionsMenu = false;
       }
+    },
+    async loadInitial() {
+      const { dashboard, dashboardResults, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: false });
+      if (!dashboard) {
+        return;
+      }
+      this.dashboard = dashboard;
+      this.code = this.dashboard.code;
+      this.title = this.dashboard.title;
+      this.description = this.dashboard.description ?? '';
+      this.dashboardResults = dashboardResults;
+      if (this.shouldEvaluateDashboard()) {
+        await this.evaluateDashboard();
+        return;
+      }
+      this.status = 'loaded';
     }
   },
   computed: {
@@ -125,22 +143,9 @@ module.exports = app => app.component('dashboard', {
   mounted: async function() {
     document.addEventListener('click', this.handleDocumentClick);
     this.showEditor = this.$route.query.edit;
-    const { dashboard, dashboardResults, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: false });
-    if (!dashboard) {
-      return;
-    }
-    this.dashboard = dashboard;
-    this.code = this.dashboard.code;
-    this.title = this.dashboard.title;
-    this.description = this.dashboard.description ?? '';
-    this.dashboardResults = dashboardResults;
-    if (this.shouldEvaluateDashboard()) {
-      await this.evaluateDashboard();
-      return;
-    }
-    this.status = 'loaded';
+    await this.loadInitial();
   },
   beforeDestroy() {
     document.removeEventListener('click', this.handleDocumentClick);
   }
-});
+};

package/frontend/src/document/confirm-changes/confirm-changes.js

@@ -7,6 +7,16 @@ module.exports = app => app.component('confirm-changes', {
   props: ['value'],
   computed: {
     displayValue() {
+      const hasUnsetFields = Object.keys(this.value).some(key => this.value[key] === undefined);
+      if (hasUnsetFields) {
+        const unsetFields = Object.keys(this.value)
+          .filter(key => this.value[key] === undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: 1 }), {});
+        const setFields = Object.keys(this.value)
+          .filter(key => this.value[key] !== undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: this.value[key] }), {});
+        return JSON.stringify({ $set: setFields, $unset: unsetFields }, null, '  ').trim();
+      }
       return JSON.stringify(this.value, null, '  ').trim();
     }
   },
@@ -21,4 +31,4 @@ module.exports = app => app.component('confirm-changes', {
   mounted() {
     Prism.highlightElement(this.$refs.code);
   }
-});
+});

package/frontend/src/document/document.html

@@ -1,4 +1,4 @@
-<div class="document px-1 pt-4 md:px-0 bg-slate-50 w-full">
+<div class="document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full">
   <div class="max-w-7xl mx-auto">
     <div class="flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm">
       <div class="font-bold overflow-hidden text-ellipsis">{{model}}: {{documentId}}</div>

package/frontend/src/document/document.js

@@ -74,10 +74,25 @@ module.exports = app => app.component('document', {
       if (Object.keys(this.invalid).length > 0) {
         throw new Error('Invalid paths: ' + Object.keys(this.invalid).join(', '));
       }
+
+      let update = this.changes;
+      let unset = {};
+      const hasUnsetFields = Object.keys(this.changes)
+        .some(key => this.changes[key] === undefined);
+      if (hasUnsetFields) {
+        unset = Object.keys(this.changes)
+          .filter(key => this.changes[key] === undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: 1 }), {});
+        update = Object.keys(this.changes)
+          .filter(key => this.changes[key] !== undefined)
+          .reduce((obj, key) => Object.assign(obj, { [key]: this.changes[key] }), {});
+      }
+
       const { doc } = await api.Model.updateDocument({
         model: this.model,
         _id: this.document._id,
-        update: this.changes
+        update,
+        unset
       });
       this.document = doc;
       this.changes = {};

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

@@ -74,7 +74,7 @@
         :value="getEditValueForPath(path)"
         :format="dateType"
         v-bind="getEditComponentProps(path)"
-        @input="changes[path.path] = $event; delete invalid[path.path];"
+        @input="handleInputChange($event)"
         @error="invalid[path.path] = $event;"
         >
       </component>

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

@@ -3,7 +3,7 @@
 'use strict';
 
 const mpath = require('mpath');
-const { inspect } = require('node-inspect-extracted');
+const deepEqual = require('../../_util/deepEqual');
 const template = require('./document-property.html');
 
 const appendCSS = require('../../appendCSS');
@@ -95,6 +95,20 @@ module.exports = app => app.component('document-property', {
     }
   },
   methods: {
+    handleInputChange(newValue) {
+      const currentValue = this.getValueForPath(this.path.path);
+
+      // Only record as a change if the value is actually different
+      if (!deepEqual(currentValue, newValue)) {
+        this.changes[this.path.path] = newValue;
+      } else {
+        // If the value is the same as the original, remove it from changes
+        delete this.changes[this.path.path];
+      }
+
+      // Always clear invalid state on input
+      delete this.invalid[this.path.path];
+    },
     getComponentForPath(schemaPath) {
       if (schemaPath.instance === 'Array') {
         return 'detail-array';

package/frontend/src/edit-boolean/edit-boolean.js

@@ -19,20 +19,12 @@ module.exports = app => app.component('edit-boolean', {
       this.selectedValue = newValue;
     },
     selectedValue(newValue) {
-      // Convert null/undefined to strings for proper backend serialization
-      const emitValue = this.convertValueToString(newValue);
-      this.$emit('input', emitValue);
+      this.$emit('input', newValue);
     }
   },
   methods: {
     selectValue(value) {
       this.selectedValue = value;
-    },
-    convertValueToString(value) {
-      // Convert null/undefined to strings for proper backend serialization
-      if (value === null) return 'null';
-      if (typeof value === 'undefined') return 'undefined';
-      return value;
     }
   }
 });

package/frontend/src/index.js

@@ -44,7 +44,11 @@ requireComponents.keys().forEach((filePath) => {
   // Check if the file name matches the directory name
   if (directoryName === fileName) {
     components[directoryName] = requireComponents(filePath);
-    components[directoryName](app);
+    if (typeof components[directoryName] === 'function') {
+      components[directoryName](app);
+    } else {
+      app.component(directoryName, components[directoryName]);
+    }
   }
 });
 
@@ -116,7 +120,7 @@ app.component('app-component', {
 
         this.user = user;
         this.roles = roles;
-        
+
         setTimeout(() => {
           this.$router.replace(this.$router.currentRoute.value.path);
         }, 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "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": {
@@ -34,12 +34,14 @@
     "eslint": "9.30.0",
     "express": "4.x",
     "mocha": "10.2.0",
-    "mongoose": "9.x"
+    "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": "mocha test/*.test.js",
+    "test:frontend": "mocha test/frontend/*.test.js"
   }
 }