@mongoosejs/studio 0.5.7 → 0.5.9

package/frontend/public/app.js

@@ -60,6 +60,172 @@ module.exports = {
 };
 
 
+/***/ },
+
+/***/ "./frontend/src/_util/calendar.js"
+/*!****************************************!*\
+  !*** ./frontend/src/_util/calendar.js ***!
+  \****************************************/
+(module) {
+
+"use strict";
+
+
+function pad2(n) {
+  return String(n).padStart(2, '0');
+}
+
+function pad3(n) {
+  return String(n).padStart(3, '0');
+}
+
+/**
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ */
+function clampInt(value, min, max) {
+  const n = Math.floor(Number(value));
+  if (Number.isNaN(n)) {
+    return min;
+  }
+  return Math.min(max, Math.max(min, n));
+}
+
+/**
+ * @param {Date} date
+ * @returns {string} YYYY-MM-DDTHH:mm:ss.SSS
+ */
+function dateToDatetimeLocal(date) {
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+    return '';
+  }
+  return [
+    date.getFullYear(),
+    '-',
+    pad2(date.getMonth() + 1),
+    '-',
+    pad2(date.getDate()),
+    'T',
+    pad2(date.getHours()),
+    ':',
+    pad2(date.getMinutes()),
+    ':',
+    pad2(date.getSeconds()),
+    '.',
+    pad3(date.getMilliseconds())
+  ].join('');
+}
+
+/**
+ * @param {Date} date
+ * @returns {string} YYYY-MM-DD
+ */
+function dateToDateOnly(date) {
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+    return '';
+  }
+  return [
+    date.getFullYear(),
+    '-',
+    pad2(date.getMonth() + 1),
+    '-',
+    pad2(date.getDate())
+  ].join('');
+}
+
+/**
+ * @param {unknown} value
+ * @returns {Date|null}
+ */
+function parseValueToDate(value) {
+  if (value == null || value === '') {
+    return null;
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+  return date;
+}
+
+/**
+ * @param {string} localValue - YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss.SSS
+ * @returns {Date|null}
+ */
+function localStringToDate(localValue) {
+  if (!localValue) {
+    return null;
+  }
+  const date = new Date(localValue);
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+  return date;
+}
+
+function isSameDay(a, b) {
+  if (!a || !b) {
+    return false;
+  }
+  return (
+    a.getFullYear() === b.getFullYear()
+    && a.getMonth() === b.getMonth()
+    && a.getDate() === b.getDate()
+  );
+}
+
+function isSameMonth(date, year, month) {
+  return date.getFullYear() === year && date.getMonth() === month;
+}
+
+/**
+ * Build a 6-row calendar grid for the given month (local timezone).
+ * @param {number} year
+ * @param {number} month - 0-indexed
+ * @returns {Array<{ key: string, label: number, date: Date, inMonth: boolean }>}
+ */
+function buildCalendarDays(year, month) {
+  const firstOfMonth = new Date(year, month, 1);
+  const startOffset = firstOfMonth.getDay();
+  const gridStart = new Date(year, month, 1 - startOffset);
+
+  const days = [];
+  for (let i = 0; i < 42; i++) {
+    const date = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i);
+    days.push({
+      key: `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`,
+      label: date.getDate(),
+      date,
+      inMonth: date.getMonth() === month
+    });
+  }
+  return days;
+}
+
+const WEEKDAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+const MONTH_LABELS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+];
+
+module.exports = {
+  pad2,
+  pad3,
+  clampInt,
+  dateToDatetimeLocal,
+  dateToDateOnly,
+  parseValueToDate,
+  localStringToDate,
+  isSameDay,
+  isSameMonth,
+  buildCalendarDays,
+  WEEKDAY_LABELS,
+  MONTH_LABELS
+};
+
+
 /***/ },
 
 /***/ "./frontend/src/_util/dateRange.js"
@@ -228,6 +394,8 @@ module.exports = deepEqual;
 "use strict";
 
 
+const { dateToDatetimeLocal } = __webpack_require__(/*! ./calendar */ "./frontend/src/_util/calendar.js");
+
 const { Trie } = __webpack_require__(/*! ../models/trie */ "./frontend/src/models/trie.js");
 
 const QUERY_SELECTORS = [
@@ -277,7 +445,7 @@ function buildAutocompleteTrie(schemaPaths) {
   trie.bulkInsert(QUERY_SELECTORS, 5, 'operator');
   trie.bulkInsert(QUERY_SELECTORS, 5, 'fieldName');
   trie.bulkInsert(VALUE_HELPERS, 5, 'value');
-  
+
   if (Array.isArray(schemaPaths) && schemaPaths.length > 0) {
     const paths = schemaPaths
       .map(path => path?.path)
@@ -289,13 +457,13 @@ function buildAutocompleteTrie(schemaPaths) {
     }
     trie.bulkInsert(paths, 10, 'fieldName');
   }
-  
+
   return trie;
 }
 
 function getAutocompleteContext(searchText, cursorPos) {
   const before = searchText.slice(0, cursorPos);
-  
+
   // Check if we're in a field name context (after { or ,)
   // This takes precedence over value context to handle cases like { _id: { $gt
   const fieldMatch = before.match(/(?:\{|,)\s*([^:\s]*)$/);
@@ -307,7 +475,7 @@ function getAutocompleteContext(searchText, cursorPos) {
       startPos: cursorPos - token.length
     };
   }
-  
+
   // Check if we're in a value context (after a colon)
   // Match the last colon followed by optional whitespace and capture everything after
   const valueMatch = before.match(/:\s*(\{?\s*)([^\s,\}\]:]*)$/);
@@ -319,19 +487,19 @@ function getAutocompleteContext(searchText, cursorPos) {
       startPos: cursorPos - token.length
     };
   }
-  
+
   return null;
 }
 
 function getAutocompleteSuggestions(trie, searchText, cursorPos, schemaPaths) {
   const context = getAutocompleteContext(searchText, cursorPos);
-  
+
   if (!context) {
     return [];
   }
-  
+
   const { token, role } = context;
-  
+
   // Extract the actual term without quotes
   const leadingQuoteMatch = token.match(/^["']/);
   const trailingQuoteMatch = token.length > 1 && /["']$/.test(token)
@@ -341,14 +509,14 @@ function getAutocompleteSuggestions(trie, searchText, cursorPos, schemaPaths) {
     .replace(/^["']/, '')
     .replace(trailingQuoteMatch ? new RegExp(`[${trailingQuoteMatch}]$`) : '', '')
     .trim();
-  
+
   if (!term) {
     return [];
   }
-  
+
   const primarySuggestions = trie.getSuggestions(term, 10, role);
   const suggestionsSet = new Set(primarySuggestions);
-  
+
   // Add schema path suggestions for field names
   if (role === 'fieldName' && Array.isArray(schemaPaths) && schemaPaths.length > 0) {
     for (const schemaPath of schemaPaths) {
@@ -365,9 +533,9 @@ function getAutocompleteSuggestions(trie, searchText, cursorPos, schemaPaths) {
       }
     }
   }
-  
+
   let suggestions = Array.from(suggestionsSet);
-  
+
   // Preserve quotes if present
   if (leadingQuoteMatch) {
     const leadingQuote = leadingQuoteMatch[0];
@@ -378,14 +546,14 @@ function getAutocompleteSuggestions(trie, searchText, cursorPos, schemaPaths) {
       suggestion.endsWith(trailingQuoteMatch) ? suggestion : `${suggestion}${trailingQuoteMatch}`
     );
   }
-  
+
   return suggestions;
 }
 
 function applySuggestion(searchText, cursorPos, suggestion) {
   const before = searchText.slice(0, cursorPos);
   const after = searchText.slice(cursorPos);
-  
+
   // Check if we're in a value context
   const valueMatch = before.match(/:\s*(\{?\s*)([^\s,\}\]:]*)$/);
   if (valueMatch) {
@@ -393,30 +561,30 @@ function applySuggestion(searchText, cursorPos, suggestion) {
     const start = cursorPos - token.length;
     let replacement = suggestion;
     let cursorOffset = replacement.length;
-    
+
     // Add parentheses for function helpers and position cursor inside
     if (FUNCTION_HELPERS.has(suggestion)) {
       replacement = `${suggestion}()`;
       cursorOffset = suggestion.length + 1; // Position cursor between ()
     }
-    
+
     return {
       text: searchText.slice(0, start) + replacement + after,
       newCursorPos: start + cursorOffset
     };
   }
-  
+
   // Check if we're in a field name context
   const fieldMatch = before.match(/(?:\{|,)\s*([^:\s]*)$/);
   if (fieldMatch) {
     const token = fieldMatch[1];
     const start = cursorPos - token.length;
     let replacement = suggestion;
-    
+
     const leadingQuote = token.startsWith('"') || token.startsWith('\'') ? token[0] : '';
     const trailingQuote = token.length > 1 && (token.endsWith('"') || token.endsWith('\'')) ? token[token.length - 1] : '';
     const colonNeeded = !/^\s*:/.test(after);
-    
+
     // If suggestion already has quotes, use it as-is
     const suggestionHasQuotes = (suggestion.startsWith('"') || suggestion.startsWith('\'')) &&
                                 (suggestion.endsWith('"') || suggestion.endsWith('\''));
@@ -430,27 +598,107 @@ function applySuggestion(searchText, cursorPos, suggestion) {
         replacement = `${replacement}${trailingQuote}`;
       }
     }
-    
+
     // Only insert : if we know the user isn't entering in a nested path
     // If suggestion has full quotes or user typed both quotes, add colon
     if (colonNeeded && (suggestionHasQuotes || !leadingQuote || trailingQuote)) {
       replacement = `${replacement}:`;
     }
-    
+
     return {
       text: searchText.slice(0, start) + replacement + after,
       newCursorPos: start + replacement.length
     };
   }
-  
+
   return null;
 }
 
+/**
+ * When the cursor is inside a Date(…) or new Date(…) argument, returns the
+ * slice indices of that argument so a picker can replace it with a quoted ISO string.
+ */
+function getDatePickerInsertionRange(searchText, cursorPos) {
+  const before = searchText.slice(0, cursorPos);
+  const re = /((?:new\s+)?Date\s*\(\s*)([^)]*)$/i;
+  const m = before.match(re);
+  if (!m) {
+    return null;
+  }
+  const innerStart = m.index + m[1].length;
+  const after = searchText.slice(cursorPos);
+  let closeIdx = -1;
+  let parenDepth = 0;
+  for (let k = 0; k < after.length; k++) {
+    const ch = after[k];
+    if (ch === '(') {
+      parenDepth++;
+    } else if (ch === ')') {
+      if (parenDepth === 0) {
+        closeIdx = cursorPos + k;
+        break;
+      }
+      parenDepth--;
+    }
+  }
+  const innerEnd = closeIdx >= 0 ? closeIdx : cursorPos;
+  const needsClosingParen = closeIdx < 0;
+  return { innerStart, innerEnd, needsClosingParen };
+}
+
+function dateArgumentSliceToDatetimeLocal(slice) {
+  const t = slice.trim();
+  if (!t) {
+    return '';
+  }
+  const unquoted = (t.startsWith('"') && t.endsWith('"')) || (t.startsWith('\'') && t.endsWith('\''))
+    ? t.slice(1, -1)
+    : t;
+  const d = new Date(unquoted);
+  if (Number.isNaN(d.getTime())) {
+    return '';
+  }
+  return dateToDatetimeLocal(d);
+}
+
+/**
+ * @param {Date} date
+ * @param {'quoted'|'timestamp'} format
+ */
+function formatDateArgumentValue(date, format) {
+  if (format === 'quoted') {
+    return JSON.stringify(date.toISOString());
+  }
+  return String(date.getTime());
+}
+
+/**
+ * Inserts a Date argument value as timestamp or quoted ISO string.
+ * @param {string} searchText
+ * @param {{ innerStart: number, innerEnd: number, needsClosingParen?: boolean }} range
+ * @param {Date} date
+ * @param {'quoted'|'timestamp'} [format] - when omitted, inferred from the existing argument
+ */
+function insertDateInDateArgument(searchText, range, date, format) {
+  const slice = searchText.slice(range.innerStart, range.innerEnd);
+  const insertion = formatDateArgumentValue(date, format);
+  const { innerStart, innerEnd } = range;
+  const closing = range.needsClosingParen === true ? ')' : '';
+  return {
+    text: searchText.slice(0, innerStart) + insertion + closing + searchText.slice(innerEnd),
+    newCursorPos: innerStart + insertion.length + closing.length
+  };
+}
+
 module.exports = {
   buildAutocompleteTrie,
   getAutocompleteContext,
   getAutocompleteSuggestions,
   applySuggestion,
+  getDatePickerInsertionRange,
+  dateArgumentSliceToDatetimeLocal,
+  formatDateArgumentValue,
+  insertDateInDateArgument,
   QUERY_SELECTORS,
   VALUE_HELPERS,
   FUNCTION_HELPERS
@@ -2464,6 +2712,424 @@ module.exports = app => app.component('create-document', {
 });
 
 
+/***/ },
+
+/***/ "./frontend/src/custom-date-picker/custom-date-picker.js"
+/*!***************************************************************!*\
+  !*** ./frontend/src/custom-date-picker/custom-date-picker.js ***!
+  \***************************************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./custom-date-picker.html */ "./frontend/src/custom-date-picker/custom-date-picker.html");
+const {
+  dateToDatetimeLocal,
+  dateToDateOnly,
+  parseValueToDate,
+  buildCalendarDays,
+  clampInt,
+  isSameDay,
+  pad2,
+  WEEKDAY_LABELS,
+  MONTH_LABELS
+} = __webpack_require__(/*! ../_util/calendar */ "./frontend/src/_util/calendar.js");
+
+const WHEEL_PAD = 2;
+const HOUR_OPTIONS = Array.from({ length: 24 }, (_, i) => i);
+const MINUTE_OPTIONS = Array.from({ length: 60 }, (_, i) => i);
+const SECOND_OPTIONS = Array.from({ length: 60 }, (_, i) => i);
+
+function timePartsFromDate(date) {
+  if (!date) {
+    return { hour: 0, minute: 0, second: 0, millisecond: 0 };
+  }
+  return {
+    hour: date.getHours(),
+    minute: date.getMinutes(),
+    second: date.getSeconds(),
+    millisecond: date.getMilliseconds()
+  };
+}
+
+module.exports = app => app.component('custom-date-picker', {
+  template,
+  props: {
+    value: {
+      default: null
+    },
+    mode: {
+      type: String,
+      default: 'datetime' // 'date' | 'datetime'
+    },
+    compact: {
+      type: Boolean,
+      default: false
+    },
+    mini: {
+      type: Boolean,
+      default: false
+    },
+    immediate: {
+      type: Boolean,
+      default: true
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    },
+    embedded: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['input', 'commit'],
+  data() {
+    const selected = parseValueToDate(this.value);
+    const anchor = selected || new Date();
+    const time = timePartsFromDate(anchor);
+    return {
+      viewYear: anchor.getFullYear(),
+      viewMonth: anchor.getMonth(),
+      selectedDate: anchor,
+      hour: time.hour,
+      minute: time.minute,
+      second: time.second,
+      millisecond: time.millisecond,
+      pendingValue: null,
+      wheelScrollLock: false,
+      timeApplyTimer: null,
+      hourOptions: HOUR_OPTIONS,
+      minuteOptions: MINUTE_OPTIONS,
+      secondOptions: SECOND_OPTIONS
+    };
+  },
+  watch: {
+    value() {
+      this.syncFromValue();
+    },
+    horizontal() {
+      this.$nextTick(() => this.scrollWheelsToValues());
+    }
+  },
+  computed: {
+    rootClasses() {
+      const sizeClass = this.mini
+        ? 'p-0.5 text-[10px]'
+        : (this.compact ? 'p-2 text-xs' : 'p-3 text-sm');
+      const chromeClass = this.embedded
+        ? ''
+        : (this.mini ? '' : 'bg-surface border border-edge-strong rounded-md shadow-sm');
+      return [sizeClass, chromeClass];
+    },
+    timeSectionClasses() {
+      if (this.horizontal) {
+        return 'flex-1 min-w-0 border-l border-edge-strong pl-2';
+      }
+      return [
+        'border-t border-edge-strong',
+        this.mini ? 'mt-1 pt-1' : 'mt-3 pt-3'
+      ];
+    },
+    wheelPadCount() {
+      return 2;
+    },
+    wheelVisibleRows() {
+      return 5;
+    },
+    weekdayLabels() {
+      return WEEKDAY_LABELS;
+    },
+    monthLabel() {
+      return `${MONTH_LABELS[this.viewMonth]} ${this.viewYear}`;
+    },
+    calendarDays() {
+      return buildCalendarDays(this.viewYear, this.viewMonth);
+    },
+    today() {
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    },
+    showTime() {
+      return this.mode === 'datetime';
+    },
+    dayCellClass() {
+      if (this.mini) {
+        return 'h-6';
+      }
+      if (this.compact) {
+        return 'h-7';
+      }
+      return 'aspect-square';
+    },
+    calendarSectionClass() {
+      if (this.mini) return 'w-36';
+      if (this.compact) return 'w-44';
+      return 'w-48';
+    },
+    wheelItemPx() {
+      if (this.mini) {
+        return 32;
+      }
+      if (this.compact) {
+        return 36;
+      }
+      return 40;
+    },
+    wheelListClass() {
+      return [
+        'overflow-y-auto overscroll-y-contain snap-y snap-mandatory',
+        '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+      ];
+    },
+    wheelListStyle() {
+      return {
+        height: `${this.wheelItemPx * this.wheelVisibleRows}px`
+      };
+    },
+    wheelItemClass() {
+      return [
+        'snap-center shrink-0 w-full flex items-center justify-center font-mono transition-colors',
+        this.mini ? 'h-8 text-sm' : (this.compact ? 'h-9 text-sm' : 'h-10 text-base')
+      ];
+    },
+    wheelHighlightClass() {
+      return this.mini ? 'h-8' : (this.compact ? 'h-9' : 'h-10');
+    },
+    wheelColumnClass() {
+      return this.mini ? 'w-11' : (this.compact ? 'w-12' : 'w-14');
+    }
+  },
+  mounted() {
+    this.$nextTick(() => this.scrollWheelsToValues());
+  },
+  beforeUnmount() {
+    if (this.timeApplyTimer) {
+      clearTimeout(this.timeApplyTimer);
+    }
+  },
+  methods: {
+    syncFromValue() {
+      const selected = parseValueToDate(this.value);
+      const anchor = selected || new Date();
+      this.selectedDate = anchor;
+      this.viewYear = anchor.getFullYear();
+      this.viewMonth = anchor.getMonth();
+      const time = timePartsFromDate(anchor);
+      this.hour = time.hour;
+      this.minute = time.minute;
+      this.second = time.second;
+      this.millisecond = time.millisecond;
+      this.$nextTick(() => this.scrollWheelsToValues());
+    },
+    clampedTimeParts() {
+      return {
+        hour: clampInt(this.hour, 0, 23),
+        minute: clampInt(this.minute, 0, 59),
+        second: clampInt(this.second, 0, 59),
+        millisecond: clampInt(this.millisecond, 0, 999)
+      };
+    },
+    formatWheelValue(value) {
+      return pad2(value);
+    },
+    wheelItemClasses(value, selectedValue) {
+      return value === selectedValue
+        ? 'text-content-primary font-semibold'
+        : 'text-content-tertiary hover:text-content-secondary';
+    },
+    wheelIndexFromScroll(el, max) {
+      return clampInt(Math.round(el.scrollTop / this.wheelItemPx), 0, max);
+    },
+    scrollWheelTo(el, index) {
+      if (!el) {
+        return;
+      }
+      el.scrollTop = index * this.wheelItemPx;
+    },
+    scrollWheelsToValues() {
+      this.wheelScrollLock = true;
+      this.scrollWheelTo(this.$refs.hourWheel, this.hour);
+      this.scrollWheelTo(this.$refs.minuteWheel, this.minute);
+      this.scrollWheelTo(this.$refs.secondWheel, this.second);
+      requestAnimationFrame(() => {
+        this.wheelScrollLock = false;
+      });
+    },
+    scheduleTimeApply() {
+      if (this.timeApplyTimer) {
+        clearTimeout(this.timeApplyTimer);
+      }
+      this.timeApplyTimer = setTimeout(() => {
+        this.timeApplyTimer = null;
+        this.applyTimeToSelection();
+      }, 120);
+    },
+    onHourWheelScroll(event) {
+      if (this.wheelScrollLock) {
+        return;
+      }
+      const hour = this.wheelIndexFromScroll(event.target, 23);
+      if (hour === this.hour) {
+        return;
+      }
+      this.hour = hour;
+      this.scheduleTimeApply();
+    },
+    onMinuteWheelScroll(event) {
+      if (this.wheelScrollLock) {
+        return;
+      }
+      const minute = this.wheelIndexFromScroll(event.target, 59);
+      if (minute === this.minute) {
+        return;
+      }
+      this.minute = minute;
+      this.scheduleTimeApply();
+    },
+    onSecondWheelScroll(event) {
+      if (this.wheelScrollLock) {
+        return;
+      }
+      const second = this.wheelIndexFromScroll(event.target, 59);
+      if (second === this.second) {
+        return;
+      }
+      this.second = second;
+      this.scheduleTimeApply();
+    },
+    selectHour(hour) {
+      this.hour = hour;
+      this.scrollWheelTo(this.$refs.hourWheel, hour);
+      this.applyTimeToSelection();
+    },
+    selectMinute(minute) {
+      this.minute = minute;
+      this.scrollWheelTo(this.$refs.minuteWheel, minute);
+      this.applyTimeToSelection();
+    },
+    selectSecond(second) {
+      this.second = second;
+      this.scrollWheelTo(this.$refs.secondWheel, second);
+      this.applyTimeToSelection();
+    },
+    dayClasses(day) {
+      const selected = this.selectedDate;
+      const isSelected = selected && isSameDay(day.date, selected);
+      const isToday = isSameDay(day.date, this.today);
+      return {
+        'text-content-tertiary': !day.inMonth,
+        'bg-merlot-700 text-white hover:bg-merlot-800': isSelected,
+        'hover:bg-surface-hover': day.inMonth && !isSelected,
+        'ring-1 ring-merlot-700 ring-inset': isToday && !isSelected && day.inMonth,
+        'font-medium': day.inMonth
+      };
+    },
+    prevMonth() {
+      if (this.viewMonth === 0) {
+        this.viewMonth = 11;
+        this.viewYear -= 1;
+      } else {
+        this.viewMonth -= 1;
+      }
+    },
+    nextMonth() {
+      if (this.viewMonth === 11) {
+        this.viewMonth = 0;
+        this.viewYear += 1;
+      } else {
+        this.viewMonth += 1;
+      }
+    },
+    goToToday() {
+      const now = new Date();
+      this.viewYear = now.getFullYear();
+      this.viewMonth = now.getMonth();
+      this.selectDay({
+        date: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
+        inMonth: true
+      });
+    },
+    selectDay(day) {
+      const { hour, minute, second, millisecond } = this.clampedTimeParts();
+      const next = new Date(day.date);
+      if (this.showTime) {
+        next.setHours(hour, minute, second, millisecond);
+      } else {
+        next.setHours(0, 0, 0, 0);
+      }
+      this.selectedDate = next;
+      if (!day.inMonth) {
+        this.viewYear = next.getFullYear();
+        this.viewMonth = next.getMonth();
+      }
+      this.emitValue(next);
+    },
+    applyTimeToSelection() {
+      const { hour, minute, second, millisecond } = this.clampedTimeParts();
+      this.hour = hour;
+      this.minute = minute;
+      this.second = second;
+      this.millisecond = millisecond;
+
+      if (!this.selectedDate) {
+        const now = new Date();
+        this.selectedDate = new Date(
+          now.getFullYear(),
+          now.getMonth(),
+          now.getDate(),
+          hour,
+          minute,
+          second,
+          millisecond
+        );
+        this.viewYear = this.selectedDate.getFullYear();
+        this.viewMonth = this.selectedDate.getMonth();
+      } else {
+        this.selectedDate = new Date(
+          this.selectedDate.getFullYear(),
+          this.selectedDate.getMonth(),
+          this.selectedDate.getDate(),
+          hour,
+          minute,
+          second,
+          millisecond
+        );
+      }
+      this.emitValue(this.selectedDate);
+    },
+    valuePayload(date) {
+      if (this.mode === 'date') {
+        return dateToDateOnly(date);
+      }
+      return dateToDatetimeLocal(date);
+    },
+    emitValue(date) {
+      const payload = this.valuePayload(date);
+      if (!this.immediate) {
+        this.pendingValue = payload;
+        return;
+      }
+      this.$emit('input', payload);
+    },
+    commit() {
+      const payload = this.pendingValue != null
+        ? this.pendingValue
+        : (this.selectedDate ? this.valuePayload(this.selectedDate) : null);
+      if (payload == null) {
+        return;
+      }
+      this.$emit('commit', payload);
+      this.pendingValue = null;
+    },
+    isSelectedDay(day) {
+      return this.selectedDate && isSameDay(day.date, this.selectedDate);
+    }
+  }
+});
+
+
 /***/ },
 
 /***/ "./frontend/src/dashboard-result/dashboard-chart/dashboard-chart.js"
@@ -4880,7 +5546,7 @@ const template = __webpack_require__(/*! ./date-view-mode-picker.html */ "./fron
 
 module.exports = app => app.component('date-view-mode-picker', {
   template,
-  props: ['viewMode', 'path'],
+  props: ['viewMode', 'path', 'editting'],
   emits: ['update:viewMode'],
   computed: {
     format() {
@@ -4937,20 +5603,12 @@ appendCSS(__webpack_require__(/*! ./document-details.css */ "./frontend/src/docu
 
 module.exports = app => app.component('document-details', {
   template,
-  props: ['document', 'schemaPaths', 'virtualPaths', 'editting', 'changes', 'invalid', 'viewMode', 'model'],
+  props: ['document', 'schemaPaths', 'virtualPaths', 'editting', 'changes', 'invalid', 'viewMode'],
   data() {
     return {
       searchQuery: '',
       selectedType: '',
-      collapsedVirtuals: new Set(),
-      showAddFieldModal: false,
-      fieldData: {
-        name: '',
-        type: '',
-        value: ''
-      },
-      fieldErrors: {},
-      isSubmittingField: false
+      collapsedVirtuals: new Set()
     };
   },
   mounted() {
@@ -5020,20 +5678,6 @@ module.exports = app => app.component('document-details', {
 
       return Array.from(types).sort();
     },
-    allFieldTypes() {
-      const schemaTypes = this.availableTypes;
-      const commonTypes = ['String', 'Number', 'Boolean', 'Date', 'Array', 'Object'];
-
-      // Combine schema types with common types, avoiding duplicates
-      const allTypes = new Set([...schemaTypes, ...commonTypes]);
-      return Array.from(allTypes).sort();
-    },
-    shouldUseAce() {
-      return ['Array', 'Object', 'Embedded'].includes(this.fieldData.type);
-    },
-    shouldUseDatePicker() {
-      return this.fieldData.type === 'Date';
-    },
     typeFilteredSchemaPaths() {
       let paths = this.schemaPaths || [];
 
@@ -5245,120 +5889,6 @@ module.exports = app => app.component('document-details', {
     isVirtualFieldCollapsed(fieldName) {
       return this.collapsedVirtuals.has(fieldName);
     },
-    openAddFieldModal() {
-      this.showAddFieldModal = true;
-    },
-    closeAddFieldModal() {
-      this.showAddFieldModal = false;
-      this.resetFieldForm();
-    },
-    async addNewField(fieldData) {
-      // Emit event to parent component to handle the field addition
-      this.$emit('add-field', fieldData);
-      this.closeAddFieldModal();
-    },
-    validateFieldForm() {
-      this.fieldErrors = {};
-
-      // Validate field name
-      const trimmedName = this.fieldData.name.trim();
-      if (!trimmedName) {
-        this.fieldErrors.name = 'Field name is required';
-      } else {
-        const transformedName = this.getTransformedFieldName();
-        if (!transformedName) {
-          this.fieldErrors.name = 'Field name contains only invalid characters';
-        } else if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(transformedName)) {
-          this.fieldErrors.name = 'Field name must start with a letter, underscore, or $ and contain only letters, numbers, underscores, and $';
-        }
-      }
-
-      // Validate field type
-      if (!this.fieldData.type) {
-        this.fieldErrors.type = 'Field type is required';
-      }
-
-      // Validate field value if provided
-      if (this.fieldData.value && this.fieldData.value.trim()) {
-        if (['Object', 'Array'].includes(this.fieldData.type)) {
-          try {
-            JSON.parse(this.fieldData.value);
-          } catch (e) {
-            this.fieldErrors.value = 'Invalid JSON format for object/array type';
-          }
-        } else if (this.fieldData.type === 'Number') {
-          if (isNaN(Number(this.fieldData.value))) {
-            this.fieldErrors.value = 'Invalid number format';
-          }
-        } else if (this.fieldData.type === 'Boolean') {
-          const lowerValue = this.fieldData.value.toLowerCase();
-          if (!['true', 'false', '1', '0', 'yes', 'no'].includes(lowerValue)) {
-            this.fieldErrors.value = 'Invalid boolean value (use true/false, 1/0, yes/no)';
-          }
-        } else if (this.fieldData.type === 'Date') {
-          // Date picker provides YYYY-MM-DD format, validate it
-          const dateValue = new Date(this.fieldData.value);
-          if (isNaN(dateValue.getTime())) {
-            this.fieldErrors.value = 'Invalid date format';
-          }
-        }
-      }
-
-      return Object.keys(this.fieldErrors).length === 0;
-    },
-    parseFieldValue(value, type) {
-      if (!value || !value.trim()) {
-        return null;
-      }
-
-      switch (type) {
-        case 'Number':
-          return Number(value);
-        case 'Boolean':
-          const lowerValue = value.toLowerCase();
-          return ['true', '1', 'yes'].includes(lowerValue);
-        case 'Date':
-          // For date picker, value is already in YYYY-MM-DD format
-          return new Date(value);
-        case 'Object':
-        case 'Array':
-          return JSON.parse(value);
-        default:
-          return value;
-      }
-    },
-    async handleAddFieldSubmit() {
-      if (!this.validateFieldForm()) {
-        return;
-      }
-
-      this.isSubmittingField = true;
-
-      try {
-        const fieldData = {
-          name: this.fieldData.name,
-          type: this.fieldData.type,
-          value: this.parseFieldValue(this.fieldData.value, this.fieldData.type)
-        };
-
-        this.$emit('add-field', fieldData);
-        this.closeAddFieldModal();
-      } catch (error) {
-        console.error('Error adding field:', error);
-        this.fieldErrors.value = 'Error processing field value';
-      } finally {
-        this.isSubmittingField = false;
-      }
-    },
-    resetFieldForm() {
-      this.fieldData = {
-        name: '',
-        type: '',
-        value: ''
-      };
-      this.fieldErrors = {};
-      this.isSubmittingField = false;
-    },
     getVirtualFieldType(virtual) {
       const value = virtual.value;
       if (value === null || value === undefined) {
@@ -5941,7 +6471,15 @@ module.exports = app => app.component('document', {
     shouldShowDeleteModal: false,
     shouldShowCloneModal: false,
     shouldShowValidationModal: false,
+    showAddFieldModal: false,
     validationResult: null,
+    fieldData: {
+      name: '',
+      type: '',
+      value: ''
+    },
+    fieldErrors: {},
+    isSubmittingField: false,
     previousQuery: null,
     lastUpdatedAt: null,
     isRefreshing: false,
@@ -6003,6 +6541,33 @@ module.exports = app => app.component('document', {
       }
       return shortcuts;
     },
+    allFieldTypes() {
+      const types = new Set(['String', 'Number', 'Boolean', 'Date', 'Array', 'Object']);
+
+      (this.schemaPaths || []).forEach(path => {
+        if (path.instance) {
+          types.add(path.instance);
+        }
+      });
+
+      Object.keys(this.document || {}).forEach(key => {
+        if ((this.schemaPaths || []).some(path => path.path === key)) {
+          return;
+        }
+        const fieldType = this.getFieldType(this.document[key]);
+        if (fieldType && fieldType !== 'unknown' && fieldType !== 'null') {
+          types.add(fieldType);
+        }
+      });
+
+      return Array.from(types).sort();
+    },
+    shouldUseAce() {
+      return ['Array', 'Object', 'Embedded'].includes(this.fieldData.type);
+    },
+    shouldUseDatePicker() {
+      return this.fieldData.type === 'Date';
+    },
     isLambda() {
       return !!window?.MONGOOSE_STUDIO_CONFIG?.isLambda;
     }
@@ -6199,16 +6764,143 @@ module.exports = app => app.component('document', {
     showClonedDocument(doc) {
       this.$router.push({ path: `/model/${this.model}/document/${doc._id}` });
     },
-    async addField(fieldData) {
-      const { doc } = await api.Model.addField({
-        model: this.model,
-        _id: this.document._id,
-        fieldName: fieldData.name,
-        fieldValue: fieldData.value
-      });
-      this.document = doc;
+    addField() {
+      this.showAddFieldModal = true;
+    },
+    closeAddFieldModal() {
+      this.showAddFieldModal = false;
+      this.resetFieldForm();
+    },
+    resetFieldForm() {
+      this.fieldData = {
+        name: '',
+        type: '',
+        value: ''
+      };
+      this.fieldErrors = {};
+      this.isSubmittingField = false;
+    },
+    getTransformedFieldName() {
+      const trimmedName = this.fieldData.name.trim();
+      return trimmedName
+        .replace(/[^a-zA-Z0-9_$]/g, '_')
+        .replace(/^[^a-zA-Z_$]+/, '');
+    },
+    validateFieldForm() {
+      this.fieldErrors = {};
 
-      this.$toast.success(`Field added! Field "${fieldData.name}" has been added to the document`);
+      const trimmedName = this.fieldData.name.trim();
+      if (!trimmedName) {
+        this.fieldErrors.name = 'Field name is required';
+      } else {
+        const transformedName = this.getTransformedFieldName();
+        if (!transformedName) {
+          this.fieldErrors.name = 'Field name contains only invalid characters';
+        } else if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(transformedName)) {
+          this.fieldErrors.name = 'Field name must start with a letter, underscore, or $ and contain only letters, numbers, underscores, and $';
+        }
+      }
+
+      if (!this.fieldData.type) {
+        this.fieldErrors.type = 'Field type is required';
+      }
+
+      if (this.fieldData.value && this.fieldData.value.trim()) {
+        if (['Object', 'Array'].includes(this.fieldData.type)) {
+          try {
+            JSON.parse(this.fieldData.value);
+          } catch (err) {
+            this.fieldErrors.value = 'Invalid JSON format for object/array type';
+          }
+        } else if (this.fieldData.type === 'Number') {
+          if (isNaN(Number(this.fieldData.value))) {
+            this.fieldErrors.value = 'Invalid number format';
+          }
+        } else if (this.fieldData.type === 'Boolean') {
+          const lowerValue = this.fieldData.value.toLowerCase();
+          if (!['true', 'false', '1', '0', 'yes', 'no'].includes(lowerValue)) {
+            this.fieldErrors.value = 'Invalid boolean value (use true/false, 1/0, yes/no)';
+          }
+        } else if (this.fieldData.type === 'Date') {
+          const dateValue = new Date(this.fieldData.value);
+          if (isNaN(dateValue.getTime())) {
+            this.fieldErrors.value = 'Invalid date format';
+          }
+        }
+      }
+
+      return Object.keys(this.fieldErrors).length === 0;
+    },
+    parseFieldValue(value, type) {
+      if (!value || !value.trim()) {
+        return null;
+      }
+
+      switch (type) {
+        case 'Number':
+          return Number(value);
+        case 'Boolean':
+          return ['true', '1', 'yes'].includes(value.toLowerCase());
+        case 'Date':
+          return new Date(value);
+        case 'Object':
+        case 'Array':
+          return JSON.parse(value);
+        default:
+          return value;
+      }
+    },
+    async handleAddFieldSubmit() {
+      if (!this.validateFieldForm()) {
+        return;
+      }
+
+      this.isSubmittingField = true;
+
+      try {
+        const fieldName = this.getTransformedFieldName();
+        const fieldValue = this.parseFieldValue(this.fieldData.value, this.fieldData.type);
+
+        const { doc } = await api.Model.addField({
+          model: this.model,
+          _id: this.document._id,
+          fieldName,
+          fieldValue
+        });
+        this.document = doc;
+        this.closeAddFieldModal();
+
+        this.$toast.success(`Field added! Field "${fieldName}" has been added to the document`);
+      } catch (error) {
+        console.error('Error adding field:', error);
+        this.fieldErrors.value = 'Error adding field';
+      } finally {
+        this.isSubmittingField = false;
+      }
+    },
+    getFieldType(value) {
+      if (value === null || value === undefined) {
+        return 'null';
+      }
+      if (Array.isArray(value)) {
+        return 'Array';
+      }
+      if (value instanceof Date) {
+        return 'Date';
+      }
+      if (typeof value === 'object') {
+        return 'Object';
+      }
+      if (typeof value === 'number') {
+        return 'Number';
+      }
+      if (typeof value === 'boolean') {
+        return 'Boolean';
+      }
+      if (typeof value === 'string') {
+        return 'String';
+      }
+      return 'unknown';
     },
     updateViewMode(mode) {
       this.viewMode = mode;
@@ -6639,9 +7331,6 @@ module.exports = app => app.component('edit-date', {
   template: template,
   props: ['value', 'format'],
   emits: ['input'],
-  data: () => ({
-    inputType: ''
-  }),
   methods: {
     updateFromISO($event) {
       const value = $event.target.value;
@@ -6661,23 +7350,6 @@ module.exports = app => app.component('edit-date', {
     }
   },
   computed: {
-    valueAsLocalString() {
-      if (this.value == null) {
-        return this.value;
-      }
-      const date = new Date(this.value);
-      return [
-        date.getFullYear(),
-        '-',
-        (date.getMonth() + 1).toString().padStart(2, '0'),
-        '-',
-        date.getDate().toString().padStart(2, '0'),
-        'T',
-        date.getHours().toString().padStart(2, '0'),
-        ':',
-        date.getMinutes().toString().padStart(2, '0')
-      ].join('');
-    },
     valueAsISOString() {
       if (this.value == null) {
         return '' + this.value;
@@ -7256,7 +7928,7 @@ app.component('app-component', {
     <div v-else-if="!hasAPIKey || user">
       <navbar :user="user" :roles="roles" />
       <div class="view">
-        <router-view :key="$route.fullPath" :user="user" :roles="roles" :hasAPIKey="hasAPIKey" />
+        <router-view :key="$route.meta.preserveStateKey || $route.fullPath" :user="user" :roles="roles" :hasAPIKey="hasAPIKey" />
       </div>
     </div>
   </div>
@@ -8350,7 +9022,10 @@ const template = __webpack_require__(/*! ./document-search.html */ "./frontend/s
 const {
   buildAutocompleteTrie,
   getAutocompleteSuggestions,
-  applySuggestion
+  applySuggestion,
+  getDatePickerInsertionRange,
+  dateArgumentSliceToDatetimeLocal,
+  insertDateInDateArgument
 } = __webpack_require__(/*! ../../_util/document-search-autocomplete */ "./frontend/src/_util/document-search-autocomplete.js");
 
 module.exports = app => app.component('document-search', {
@@ -8370,7 +9045,11 @@ module.exports = app => app.component('document-search', {
       autocompleteSuggestions: [],
       autocompleteIndex: 0,
       autocompleteTrie: null,
-      searchText: this.value || ''
+      searchText: this.value || '',
+      datePickerContext: null,
+      datePickerLocalValue: '',
+      dateInsertFormat: 'quoted', // 'timestamp' | 'quoted'
+      datePickerMinimized: false
     };
   },
   watch: {
@@ -8412,10 +9091,31 @@ module.exports = app => app.component('document-search', {
         });
       }
     },
+    onSearchKeyup(ev) {
+      if (
+        this.autocompleteSuggestions.length > 0 &&
+        (ev.key === 'ArrowUp' || ev.key === 'ArrowDown')
+      ) {
+        return;
+      }
+      this.updateAutocomplete();
+    },
     updateAutocomplete() {
       const input = this.$refs.searchInput;
       const cursorPos = input ? input.selectionStart : 0;
 
+      const dateRange = getDatePickerInsertionRange(this.searchText, cursorPos);
+      if (dateRange && !this.datePickerContext) {
+        this.datePickerMinimized = false;
+      }
+      this.datePickerContext = dateRange;
+      if (dateRange) {
+        const argSlice = this.searchText.slice(dateRange.innerStart, dateRange.innerEnd);
+        this.datePickerLocalValue = dateArgumentSliceToDatetimeLocal(argSlice);
+      } else {
+        this.datePickerLocalValue = '';
+      }
+
       if (this.autocompleteTrie) {
         this.autocompleteSuggestions = getAutocompleteSuggestions(
           this.autocompleteTrie,
@@ -8428,6 +9128,34 @@ module.exports = app => app.component('document-search', {
         this.autocompleteSuggestions = [];
       }
     },
+    applyDateFromPicker(localDateTime) {
+      if (!localDateTime || !this.datePickerContext) {
+        return;
+      }
+      const picked = new Date(localDateTime);
+      if (Number.isNaN(picked.getTime())) {
+        if (this.$toast) {
+          this.$toast.error('Invalid date or time. Enter a valid date and time, then try again.');
+        }
+        return;
+      }
+      const result = insertDateInDateArgument(
+        this.searchText,
+        this.datePickerContext,
+        picked,
+        this.dateInsertFormat
+      );
+      const input = this.$refs.searchInput;
+      this.searchText = result.text;
+      this.autocompleteSuggestions = [];
+      this.$nextTick(() => {
+        if (input) {
+          input.focus();
+          input.setSelectionRange(result.newCursorPos, result.newCursorPos);
+        }
+        this.updateAutocomplete();
+      });
+    },
     handleKeyDown(ev) {
       if (this.autocompleteSuggestions.length === 0) {
         return;
@@ -8462,6 +9190,12 @@ module.exports = app => app.component('document-search', {
       });
       this.autocompleteSuggestions = [];
     },
+    onWrapperFocusOut(ev) {
+      if (!this.$el.contains(ev.relatedTarget)) {
+        this.datePickerContext = null;
+        this.datePickerMinimized = false;
+      }
+    },
     addPathFilter(path) {
       if (this.searchText) {
         if (this.searchText.endsWith('}')) {
@@ -8779,6 +9513,7 @@ module.exports = app => app.component('models', {
     currentModel: null,
     modelDocumentCounts: {},
     documents: [],
+    allSchemaPaths: null,
     schemaPaths: [],
     filteredPaths: [],
     selectedPaths: [],
@@ -8896,8 +9631,9 @@ module.exports = app => app.component('models', {
     this.query = Object.assign({}, this.$route.query);
     // Keep UI mode in sync with the URL on remounts.
     this.isProjectionMenuSelected = this.$route?.query?.[PROJECTION_MODE_QUERY_KEY] === '1';
-    const { models, readyState } = await api.Model.listModels();
+    const { models, modelSchemaPaths, readyState } = await api.Model.listModels();
     this.models = models;
+    this.allSchemaPaths = modelSchemaPaths;
     await this.loadModelCounts();
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
@@ -8908,6 +9644,29 @@ module.exports = app => app.component('models', {
       if (readyState === 0) {
         this.error = 'No models found and Mongoose is not connected. Check our documentation for more information.';
       }
+    } else {
+      this._refreshSidebar = setInterval(async() => {
+        try {
+          const { models, modelSchemaPaths, readyState } = await api.Model.listModels();
+          this.models = models;
+          this.allSchemaPaths = modelSchemaPaths;
+          await this.loadModelCounts();
+          if (this.currentModel) {
+            const schemaPaths = this.allSchemaPaths?.[this.currentModel] ?? {};
+            this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+              if (k1 === '_id' && k2 !== '_id') {
+                return -1;
+              }
+              if (k1 !== '_id' && k2 === '_id') {
+                return 1;
+              }
+              return 0;
+            }).map(key => schemaPaths[key]);
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }, 20000);
     }
 
     await this.initSearchFromUrl();
@@ -8918,25 +9677,33 @@ module.exports = app => app.component('models', {
     this.$nextTick(() => {
       const focusIntent = takeModelsRemountFocusIntent();
       if (focusIntent === 'documentSearch') {
-        const ds = this.$refs.documentSearch;
-        if (ds && typeof ds.focusInput === 'function') {
-          ds.focusInput();
-        }
+        this.$refs.documentSearch?.focusInput();
         return;
       }
       if (focusIntent === 'projection' && this.isProjectionMenuSelected) {
-        const projectionSearch = this.$refs.projectionSearch;
-        if (projectionSearch && typeof projectionSearch.focusInput === 'function') {
-          projectionSearch.focusInput();
-        }
+        this.$refs.projectionSearch?.focusInput();
       }
     });
   },
+  unmounted() {
+    clearInterval(this._refreshSidebar);
+  },
   watch: {
     model(newModel) {
       if (newModel !== this.currentModel) {
         this.currentModel = newModel;
         if (this.currentModel != null) {
+          this.$refs.documentSearch?.focusInput();
+          const schemaPaths = this.allSchemaPaths?.[newModel] ?? {};
+          this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
+            if (k1 === '_id' && k2 !== '_id') {
+              return -1;
+            }
+            if (k1 !== '_id' && k2 === '_id') {
+              return 1;
+            }
+            return 0;
+          }).map(key => schemaPaths[key]);
           this.initSearchFromUrl();
         }
       }
@@ -9380,6 +10147,8 @@ module.exports = app => app.component('models', {
         this.query.sortKey = sortKey;
         this.query.sortDirection = sortDirection;
         delete this.query.sort;
+      } else {
+        this.sortBy = {};
       }
       if (this.currentModel != null) {
         await this.getDocuments();
@@ -9395,6 +10164,8 @@ module.exports = app => app.component('models', {
           this.selectedPaths = [...this.filteredPaths];
           this.syncProjectionInputFromQueryOrPaths();
         }
+      } else {
+        this.selectedPaths = [];
       }
       this.status = 'loaded';
 
@@ -9676,7 +10447,6 @@ module.exports = app => app.component('models', {
 
         // Clear previous data
         this.documents = [];
-        this.schemaPaths = [];
         this.numDocuments = null;
         this.loadedAllDocs = false;
         this.lastSelectedIndex = null;
@@ -10997,7 +11767,8 @@ module.exports = {
       name: 'model',
       component: 'models',
       meta: {
-        authorized: false
+        authorized: false,
+        preserveStateKey: 'model'
       }
     },
     {
@@ -12379,6 +13150,8 @@ var map = {
 	"./": "./frontend/src/index.js",
 	"./_util/baseComponent": "./frontend/src/_util/baseComponent.js",
 	"./_util/baseComponent.js": "./frontend/src/_util/baseComponent.js",
+	"./_util/calendar": "./frontend/src/_util/calendar.js",
+	"./_util/calendar.js": "./frontend/src/_util/calendar.js",
 	"./_util/dateRange": "./frontend/src/_util/dateRange.js",
 	"./_util/dateRange.js": "./frontend/src/_util/dateRange.js",
 	"./_util/deepEqual": "./frontend/src/_util/deepEqual.js",
@@ -12421,6 +13194,9 @@ var map = {
 	"./create-document/create-document.css": "./frontend/src/create-document/create-document.css",
 	"./create-document/create-document.html": "./frontend/src/create-document/create-document.html",
 	"./create-document/create-document.js": "./frontend/src/create-document/create-document.js",
+	"./custom-date-picker/custom-date-picker": "./frontend/src/custom-date-picker/custom-date-picker.js",
+	"./custom-date-picker/custom-date-picker.html": "./frontend/src/custom-date-picker/custom-date-picker.html",
+	"./custom-date-picker/custom-date-picker.js": "./frontend/src/custom-date-picker/custom-date-picker.js",
 	"./dashboard-result/dashboard-chart/dashboard-chart": "./frontend/src/dashboard-result/dashboard-chart/dashboard-chart.js",
 	"./dashboard-result/dashboard-chart/dashboard-chart.html": "./frontend/src/dashboard-result/dashboard-chart/dashboard-chart.html",
 	"./dashboard-result/dashboard-chart/dashboard-chart.js": "./frontend/src/dashboard-result/dashboard-chart/dashboard-chart.js",
@@ -52856,6 +53632,17 @@ module.exports = "<div class=\"px-1\">\n  <div class=\"mb-4\">\n    <label class
 
 /***/ },
 
+/***/ "./frontend/src/custom-date-picker/custom-date-picker.html"
+/*!*****************************************************************!*\
+  !*** ./frontend/src/custom-date-picker/custom-date-picker.html ***!
+  \*****************************************************************/
+(module) {
+
+"use strict";
+module.exports = "<div\n  class=\"custom-date-picker\"\n  :class=\"rootClasses\"\n>\n  <div :class=\"horizontal ? 'flex gap-3 items-start' : ''\">\n    <div :class=\"[horizontal ? 'shrink-0' : '', calendarSectionClass]\">\n      <div class=\"flex items-center justify-between gap-1 mb-1\" :class=\"mini ? 'mb-0.5' : 'mb-2'\">\n        <button\n          type=\"button\"\n          class=\"shrink-0 flex items-center justify-center rounded border border-edge-strong hover:bg-surface-hover text-content-secondary\"\n          :class=\"mini ? 'w-5 h-5 text-[10px]' : 'w-7 h-7'\"\n          aria-label=\"Previous month\"\n          @click=\"prevMonth\"\n        >‹</button>\n        <span\n          class=\"flex-1 min-w-0 text-center font-medium text-content-primary truncate\"\n          :class=\"mini ? 'text-[10px]' : ''\"\n        >{{ monthLabel }}</span>\n        <button\n          type=\"button\"\n          class=\"shrink-0 flex items-center justify-center rounded border border-edge-strong hover:bg-surface-hover text-content-secondary\"\n          :class=\"mini ? 'w-5 h-5 text-[10px]' : 'w-7 h-7'\"\n          aria-label=\"Next month\"\n          @click=\"nextMonth\"\n        >›</button>\n      </div>\n\n      <div class=\"grid grid-cols-7 gap-px mb-0.5\">\n        <div\n          v-for=\"label in weekdayLabels\"\n          :key=\"label\"\n          class=\"flex items-center justify-center text-center text-content-tertiary font-medium min-w-0\"\n          :class=\"[\n            dayCellClass,\n            mini ? 'text-[9px]' : (compact ? 'text-[10px]' : 'text-xs')\n          ]\"\n        >{{ mini ? label.charAt(0) : label }}</div>\n      </div>\n\n      <div class=\"grid grid-cols-7 gap-px\">\n        <button\n          v-for=\"day in calendarDays\"\n          :key=\"day.key\"\n          type=\"button\"\n          class=\"min-w-0 w-full flex items-center justify-center rounded transition-colors\"\n          :class=\"[\n            dayCellClass,\n            mini ? 'text-[10px]' : (compact ? 'text-xs' : 'text-sm'),\n            dayClasses(day)\n          ]\"\n          :aria-label=\"day.label\"\n          :aria-pressed=\"isSelectedDay(day)\"\n          @click=\"selectDay(day)\"\n        >{{ day.label }}</button>\n      </div>\n    </div>\n\n    <div\n      v-if=\"showTime\"\n      :class=\"timeSectionClasses\"\n      @mousedown.stop\n    >\n      <div\n        class=\"text-content-secondary\"\n        :class=\"[\n          horizontal ? 'mb-1 text-xs' : 'mb-2',\n          mini ? 'text-xs' : (horizontal ? '' : 'text-sm')\n        ]\"\n      >Time</div>\n      <div class=\"relative flex items-center justify-center\">\n        <div\n          class=\"pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 border-y border-edge-strong bg-surface-hover/40\"\n          :class=\"wheelHighlightClass\"\n          aria-hidden=\"true\"\n        ></div>\n        <div class=\"relative flex items-center justify-center gap-1\">\n          <div\n            ref=\"hourWheel\"\n            class=\"wheel-column\"\n            :class=\"[wheelListClass, wheelColumnClass]\"\n            :style=\"wheelListStyle\"\n            @scroll=\"onHourWheelScroll\"\n          >\n            <div\n              v-for=\"n in wheelPadCount\"\n              :key=\"'hour-pad-top-' + n\"\n              :class=\"wheelItemClass\"\n              aria-hidden=\"true\"\n            ></div>\n            <button\n              v-for=\"h in hourOptions\"\n              :key=\"'hour-' + h\"\n              type=\"button\"\n              :class=\"[wheelItemClass, wheelItemClasses(h, hour)]\"\n              :aria-label=\"'Hour ' + h\"\n              :aria-selected=\"hour === h\"\n              @click=\"selectHour(h)\"\n            >{{ formatWheelValue(h) }}</button>\n            <div\n              v-for=\"n in wheelPadCount\"\n              :key=\"'hour-pad-bottom-' + n\"\n              :class=\"wheelItemClass\"\n              aria-hidden=\"true\"\n            ></div>\n          </div>\n          <span class=\"text-content-secondary font-medium\" :class=\"mini ? 'text-sm' : 'text-base'\">:</span>\n          <div\n            ref=\"minuteWheel\"\n            class=\"wheel-column\"\n            :class=\"[wheelListClass, wheelColumnClass]\"\n            :style=\"wheelListStyle\"\n            @scroll=\"onMinuteWheelScroll\"\n          >\n            <div\n              v-for=\"n in wheelPadCount\"\n              :key=\"'minute-pad-top-' + n\"\n              :class=\"wheelItemClass\"\n              aria-hidden=\"true\"\n            ></div>\n            <button\n              v-for=\"m in minuteOptions\"\n              :key=\"'minute-' + m\"\n              type=\"button\"\n              :class=\"[wheelItemClass, wheelItemClasses(m, minute)]\"\n              :aria-label=\"'Minute ' + m\"\n              :aria-selected=\"minute === m\"\n              @click=\"selectMinute(m)\"\n            >{{ formatWheelValue(m) }}</button>\n            <div\n              v-for=\"n in wheelPadCount\"\n              :key=\"'minute-pad-bottom-' + n\"\n              :class=\"wheelItemClass\"\n              aria-hidden=\"true\"\n            ></div>\n          </div>\n          <span class=\"text-content-secondary font-medium\" :class=\"mini ? 'text-sm' : 'text-base'\">:</span>\n          <div\n            ref=\"secondWheel\"\n            class=\"wheel-column\"\n            :class=\"[wheelListClass, wheelColumnClass]\"\n            :style=\"wheelListStyle\"\n            @scroll=\"onSecondWheelScroll\"\n          >\n            <div\n              v-for=\"n in wheelPadCount\"\n              :key=\"'second-pad-top-' + n\"\n              :class=\"wheelItemClass\"\n              aria-hidden=\"true\"\n            ></div>\n            <button\n              v-for=\"s in secondOptions\"\n              :key=\"'second-' + s\"\n              type=\"button\"\n              :class=\"[wheelItemClass, wheelItemClasses(s, second)]\"\n              :aria-label=\"'Second ' + s\"\n              :aria-selected=\"second === s\"\n              @click=\"selectSecond(s)\"\n            >{{ formatWheelValue(s) }}</button>\n            <div\n              v-for=\"n in wheelPadCount\"\n              :key=\"'second-pad-bottom-' + n\"\n              :class=\"wheelItemClass\"\n              aria-hidden=\"true\"\n            ></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"flex justify-end items-center gap-2\"\n    :class=\"mini ? 'mt-1' : 'mt-2'\"\n  >\n    <button\n      v-if=\"!immediate\"\n      type=\"button\"\n      class=\"text-xs font-medium text-white bg-merlot-700 hover:bg-merlot-800 px-2 py-1 rounded\"\n      :class=\"mini ? 'py-0.5 px-1.5' : ''\"\n      @click=\"commit\"\n    >Apply</button>\n  </div>\n</div>\n";
+
+/***/ },
+
 /***/ "./frontend/src/dashboard-result/dashboard-chart/dashboard-chart.html"
 /*!****************************************************************************!*\
   !*** ./frontend/src/dashboard-result/dashboard-chart/dashboard-chart.html ***!
@@ -53039,7 +53826,7 @@ module.exports = "<pre class=\"w-full whitespace-pre-wrap break-words font-mono
 (module) {
 
 "use strict";
-module.exports = "<div class=\"flex items-center gap-2\" @click.stop>\n  <select\n    :value=\"format\"\n    @input=\"onFormatChange($event.target.value)\"\n    class=\"text-xs border border-edge rounded-md bg-surface px-2 py-1\"\n  >\n    <option value=\"utc_iso\">UTC (ISO)</option>\n    <option value=\"local_browser\">Local (Browser)</option>\n    <option value=\"unix_ms\">Unix (ms)</option>\n    <option value=\"unix_seconds\">Unix (seconds)</option>\n    <option value=\"duration_relative\">Duration relative to now</option>\n    <option value=\"custom_tz\">Custom TZ...</option>\n  </select>\n  <input\n    v-if=\"format === 'custom_tz'\"\n    :value=\"timezone\"\n    @input=\"onTimezoneChange($event.target.value.trim())\"\n    :list=\"timezoneDatalistId\"\n    type=\"text\"\n    placeholder=\"America/New_York\"\n    class=\"text-xs border border-edge rounded-md bg-surface px-2 py-1 w-40\"\n  >\n  <datalist v-if=\"format === 'custom_tz'\" :id=\"timezoneDatalistId\">\n    <option v-for=\"tz in timezones\" :key=\"tz\" :value=\"tz\"></option>\n  </datalist>\n</div>\n";
+module.exports = "<div class=\"flex items-center gap-2\" @click.stop>\n  <select\n    :value=\"format\"\n    @input=\"onFormatChange($event.target.value)\"\n    :disabled=\"editting\"\n    class=\"text-xs border border-edge rounded-md bg-surface px-2 py-1\"\n  >\n    <option value=\"utc_iso\">UTC (ISO)</option>\n    <option value=\"local_browser\">Local (Browser)</option>\n    <option value=\"unix_ms\">Unix (ms)</option>\n    <option value=\"unix_seconds\">Unix (seconds)</option>\n    <option value=\"duration_relative\">Duration relative to now</option>\n    <option value=\"custom_tz\">Custom TZ...</option>\n  </select>\n  <input\n    v-if=\"format === 'custom_tz'\"\n    :value=\"timezone\"\n    @input=\"onTimezoneChange($event.target.value.trim())\"\n    :list=\"timezoneDatalistId\"\n    type=\"text\"\n    placeholder=\"America/New_York\"\n    class=\"text-xs border border-edge rounded-md bg-surface px-2 py-1 w-40\"\n  >\n  <datalist v-if=\"format === 'custom_tz'\" :id=\"timezoneDatalistId\">\n    <option v-for=\"tz in timezones\" :key=\"tz\" :value=\"tz\"></option>\n  </datalist>\n</div>\n";
 
 /***/ },
 
@@ -53050,7 +53837,7 @@ module.exports = "<div class=\"flex items-center gap-2\" @click.stop>\n  <select
 (module) {
 
 "use strict";
-module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .value {\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n\n.document-details .path-key {\n  background-color: #f0f0f0;\n  margin-bottom: 0.5em;\n}\n\n.document-details .path-type {\n  color: rgba(0,0,0,.36);\n  font-size: 0.8em;\n}\n\n.document-details .date-position {\n  float: right;\n  margin-top: -7px;\n}\n\n/* Add Field Modal Styles */\n.add-field-modal {\n  max-width: 500px;\n  width: 100%;\n}\n\n.add-field-modal .modal-exit {\n  position: absolute;\n  top: 15px;\n  right: 20px;\n  font-size: 24px;\n  cursor: pointer;\n  color: #6b7280;\n  z-index: 10;\n}\n\n.add-field-modal .modal-exit:hover {\n  color: #374151;\n}\n\n.add-field-modal form {\n  max-height: 70vh;\n  overflow-y: auto;\n}\n\n.add-field-modal input[type=\"text\"],\n.add-field-modal input[type=\"email\"],\n.add-field-modal input[type=\"password\"],\n.add-field-modal select,\n.add-field-modal textarea {\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.add-field-modal input:focus,\n.add-field-modal select:focus,\n.add-field-modal textarea:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.add-field-modal .border-red-500 {\n  border-color: #ef4444 !important;\n}\n\n.add-field-modal .border-red-500:focus {\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;\n}\n\n/* Ace editor styling in modal */\n.add-field-modal .add-field-ace-editor.ace_editor {\n  border: 1px solid #d1d5db;\n  border-radius: 0.375rem;\n  font-size: 14px;\n  min-height: 100px;\n}\n\n.add-field-modal .add-field-ace-editor:focus-within.ace_editor,\n.add-field-modal .add-field-ace-editor.ace_focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* JSON View Styles */\n.json-view {\n  width: 100%;\n}\n\n.json-view pre {\n  margin: 0;\n  max-height: 70vh;\n  overflow: auto;\n  line-height: 1.5;\n}\n\n.json-view pre::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n.json-view pre::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 4px;\n}\n\n.json-view pre::-webkit-scrollbar-thumb {\n  background: #888;\n  border-radius: 4px;\n}\n\n.json-view pre::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}";
+module.exports = ".document-details {\n  width: 100%;\n}\n\n.document-details .value {\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n\n.document-details .path-key {\n  background-color: #f0f0f0;\n  margin-bottom: 0.5em;\n}\n\n.document-details .path-type {\n  color: rgba(0,0,0,.36);\n  font-size: 0.8em;\n}\n\n.document-details .date-position {\n  float: right;\n  margin-top: -7px;\n}\n\n/* JSON View Styles */\n.json-view {\n  width: 100%;\n}\n\n.json-view pre {\n  margin: 0;\n  max-height: 70vh;\n  overflow: auto;\n  line-height: 1.5;\n}\n\n.json-view pre::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n.json-view pre::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 4px;\n}\n\n.json-view pre::-webkit-scrollbar-thumb {\n  background: #888;\n  border-radius: 4px;\n}\n\n.json-view pre::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}\n";
 
 /***/ },
 
@@ -53061,7 +53848,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=\"sticky top-[60px] z-40 bg-surface rounded-md p-4 border-b border-edge shadow-sm\">\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-edge-strong 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-edge-strong rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-surface 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    </div>\n  </div>\n\n  <!-- Fields View -->\n  <div v-if=\"viewMode === 'fields'\">\n    <!-- Matched Schema Paths (shown first when searching) -->\n    <div\n      v-for=\"path in matchedSchemaPaths\"\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=\"true\"\n        :searchQuery=\"searchQuery\"\n        :invalid=\"invalid\"></document-property>\n    </div>\n\n    <!-- Matched Virtual Fields (shown after matched schema paths when searching) -->\n    <div\n      v-for=\"path in matchedVirtuals\"\n      :key=\"path.name\"\n      class=\"border border-edge rounded-lg mb-2 transition-all duration-200 ease-in-out mt-4\"\n    >\n    <!-- Virtual Field Header (Always Visible) -->\n    <div\n      @click=\"toggleVirtualField(path.name)\"\n      class=\"p-3 bg-slate-100 hover:bg-muted cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out\"\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-content-tertiary 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-content\">\n          <span\n            v-for=\"(part, index) in getSearchMatchParts(path.name)\"\n            :key=\"index\"\n            :class=\"{ 'font-bold': part.matched }\">{{ part.text }}</span>\n        </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    <!-- Unmatched Schema Paths (shown after matched items when searching, or all when not searching) -->\n    <div\n      v-for=\"path in unmatchedSchemaPaths\"\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=\"false\"\n        :searchQuery=\"searchQuery\"\n        :invalid=\"invalid\"></document-property>\n    </div>\n\n    <!-- Unmatched Virtual Fields (shown last) -->\n    <div\n      v-for=\"path in unmatchedVirtuals\"\n      :key=\"path.name\"\n      class=\"border border-edge rounded-lg mb-2 transition-all duration-200 ease-in-out\"\n    >\n    <!-- Virtual Field Header (Always Visible) -->\n    <div\n      @click=\"toggleVirtualField(path.name)\"\n      class=\"p-3 bg-slate-100 hover:bg-muted cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out\"\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-content-tertiary 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-content\">{{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-content-tertiary\">\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-edge-strong rounded-lg bg-page 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-content 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-content-secondary 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-edge-strong 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-content-secondary 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-edge-strong 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-content-secondary 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-edge-strong 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=\"!shouldUseAce\"\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-edge-strong 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            <!-- Ace editor for complex types (Array/Object/Embedded) -->\n            <ace-editor\n              v-else\n              id=\"fieldValue\"\n              v-model=\"fieldData.value\"\n              mode=\"json\"\n              :line-numbers=\"true\"\n              :min-lines=\"3\"\n              class=\"add-field-ace-editor w-full min-h-[100px]\"\n              :class=\"{ 'border-red-500': fieldErrors.value }\"\n            />\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-content-tertiary\">\n              <span v-if=\"shouldUseDatePicker\">Select a date or leave empty for null/undefined values.</span>\n              <span v-else-if=\"shouldUseAce\">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-edge\">\n            <button\n              type=\"button\"\n              @click=\"closeAddFieldModal\"\n              class=\"px-4 py-2 text-sm font-medium text-content-secondary bg-surface border border-edge-strong rounded-md hover:bg-page 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=\"sticky top-[60px] z-40 bg-surface rounded-md p-4 border-b border-edge shadow-sm\">\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-edge-strong 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-edge-strong rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-surface 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    </div>\n  </div>\n\n  <!-- Fields View -->\n  <div v-if=\"viewMode === 'fields'\">\n    <!-- Matched Schema Paths (shown first when searching) -->\n    <div\n      v-for=\"path in matchedSchemaPaths\"\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=\"true\"\n        :searchQuery=\"searchQuery\"\n        :invalid=\"invalid\"></document-property>\n    </div>\n\n    <!-- Matched Virtual Fields (shown after matched schema paths when searching) -->\n    <div\n      v-for=\"path in matchedVirtuals\"\n      :key=\"path.name\"\n      class=\"border border-edge rounded-lg mb-2 transition-all duration-200 ease-in-out mt-4\"\n    >\n    <!-- Virtual Field Header (Always Visible) -->\n    <div\n      @click=\"toggleVirtualField(path.name)\"\n      class=\"p-3 bg-slate-100 hover:bg-muted cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out\"\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-content-tertiary 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-content\">\n          <span\n            v-for=\"(part, index) in getSearchMatchParts(path.name)\"\n            :key=\"index\"\n            :class=\"{ 'font-bold': part.matched }\">{{ part.text }}</span>\n        </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    <!-- Unmatched Schema Paths (shown after matched items when searching, or all when not searching) -->\n    <div\n      v-for=\"path in unmatchedSchemaPaths\"\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=\"false\"\n        :searchQuery=\"searchQuery\"\n        :invalid=\"invalid\"></document-property>\n    </div>\n\n    <!-- Unmatched Virtual Fields (shown last) -->\n    <div\n      v-for=\"path in unmatchedVirtuals\"\n      :key=\"path.name\"\n      class=\"border border-edge rounded-lg mb-2 transition-all duration-200 ease-in-out\"\n    >\n    <!-- Virtual Field Header (Always Visible) -->\n    <div\n      @click=\"toggleVirtualField(path.name)\"\n      class=\"p-3 bg-slate-100 hover:bg-muted cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out\"\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-content-tertiary 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-content\">{{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-content-tertiary\">\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-edge-strong rounded-lg bg-page p-4 overflow-auto\">\n      <pre class=\"text-sm font-mono text-gray-800 whitespace-pre\">{{formattedJson}}</pre>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -53083,7 +53870,7 @@ module.exports = ".document-details {\n    width: 100%;\n  }\n  \n  .document-de
 (module) {
 
 "use strict";
-module.exports = "<div class=\"border border-edge bg-surface rounded-lg mb-2\" style=\"overflow: visible;\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-1 cursor-pointer flex items-center justify-between border-b border-edge bg-slate-100 hover:bg-muted transition-colors duration-200 ease-in-out\"\n    style=\"overflow: visible; position: relative;\"\n  >\n    <div class=\"flex items-center\" >\n      <svg\n        :class=\"isCollapsed ? 'rotate-0' : 'rotate-90'\"\n        class=\"w-4 h-4 text-content-tertiary 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-content\">\n        <span\n          v-for=\"(part, index) in pathNameParts\"\n          :key=\"index\"\n          :class=\"{ 'font-bold': part.matched }\">{{ part.text }}</span>\n      </span>\n      <span class=\"ml-2 text-sm text-content-tertiary\">({{(path.instance || 'unknown').toLowerCase()}})</span>\n      <div v-if=\"path.instance === 'Array' && canUseArrayTableView\" class=\"ml-3 inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold\">\n        <button\n          type=\"button\"\n          class=\"rounded-full px-2.5 py-0.5 transition\"\n          :class=\"arrayDetailViewMode === 'list' ? 'bg-merlot-700 text-white shadow' : 'text-content-secondary hover:text-content'\"\n          @click.stop=\"setArrayDetailViewMode('list')\">\n          List\n        </button>\n        <button\n          type=\"button\"\n          class=\"rounded-full px-2.5 py-0.5 transition\"\n          :class=\"arrayDetailViewMode === 'table' ? 'bg-merlot-700 text-white shadow' : 'text-content-secondary hover:text-content'\"\n          @click.stop=\"setArrayDetailViewMode('table')\">\n          Table\n        </button>\n      </div>\n      <div v-if=\"isGeoJsonGeometry\" class=\"ml-3 inline-flex items-center gap-2\">\n        <div class=\"inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold\">\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('text')\">\n            Text\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('map')\">\n            Map\n          </button>\n        </div>\n        <!-- Info icon with tooltip -->\n        <div v-if=\"editting\" class=\"relative inline-block\" style=\"z-index: 10002;\" @mouseenter=\"showTooltip = true\" @mouseleave=\"showTooltip = false\" @click.stop>\n          <svg\n            ref=\"infoIcon\"\n            class=\"w-6 h-6 text-gray-400 hover:text-gray-600 cursor-help\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n          </svg>\n          <div\n            v-show=\"showTooltip\"\n            ref=\"tooltip\"\n            class=\"absolute left-full top-0 ml-2 w-64 p-3 text-white text-xs rounded-lg shadow-xl\"\n            style=\"z-index: 99999; pointer-events: none; white-space: normal; position: fixed; background-color: #111827;\"\n            :style=\"getTooltipStyle()\"\n          >\n            <div class=\"font-semibold mb-2\">Map Controls:</div>\n            <div v-if=\"isGeoJsonPoint\" class=\"space-y-1\">\n              <div>• Drag pin to move location</div>\n            </div>\n            <div v-else-if=\"isGeoJsonPolygon\" class=\"space-y-1\">\n              <div>• Drag vertices to reshape polygon</div>\n              <div v-if=\"isMultiPolygon\">• Right-click edge to add new vertex</div>\n              <div>• Right-click vertex to delete</div>\n            </div>\n            <div class=\"absolute top-2 -left-1 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-gray-900\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <date-view-mode-picker\n        v-if=\"isDatePath\"\n        :viewMode=\"dateViewMode\"\n        :path=\"path\"\n        @update:viewMode=\"dateViewMode = $event\"\n      ></date-view-mode-picker>\n      <objectid-view-mode-picker\n        v-if=\"isObjectIdPath\"\n        :viewMode=\"objectIdViewMode\"\n        @update:viewMode=\"objectIdViewMode = $event\"\n      ></objectid-view-mode-picker>\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-edge-strong bg-surface\"\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-primary hover:bg-primary-hover text-primary-text px-2 py-1 text-sm rounded-md\"\n        @click.stop\n        >View Document\n      </router-link>\n    </div>\n  </div>\n\n  <!-- Collapsible Content -->\n  <div v-if=\"!isCollapsed\" class=\"p-2\">\n    <!-- Date Type Selector (when editing dates) -->\n    <div v-if=\"editting && path.instance === 'Date'\" class=\"mb-3 flex gap-1.5\">\n      <div\n        @click=\"dateType = 'picker'\"\n        :class=\"dateType === 'picker' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'picker' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          Date Picker\n        </div>\n      </div>\n      <div\n        @click=\"dateType = 'iso'\"\n        :class=\"dateType === 'iso' ? 'bg-teal-600' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n\n    <!-- Field Content -->\n    <div v-if=\"editting && path.path !== '_id'\">\n      <!-- Use detail-default with map editing for GeoJSON geometries -->\n      <component\n        v-if=\"isGeoJsonGeometry\"\n        :is=\"getComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :viewMode=\"detailViewMode\"\n        :on-change=\"handleInputChange\"\n        >\n      </component>\n      <!-- Use standard edit components for other types -->\n      <component\n        v-else\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        v-bind=\"getEditComponentProps(path)\"\n        @input=\"handleInputChange($event)\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else>\n      <!-- Arrays own their truncation and array search behavior in detail-array. -->\n      <component\n        v-if=\"isArray\"\n        :is=\"getComponentForPath(path)\"\n        :value=\"rawValue\"\n        :viewMode=\"propertyDetailViewMode\"\n        :truncate=\"needsTruncation\"\n        @updated=\"renderedValue = $event\"></component>\n      <!-- Non-array truncated view -->\n      <div v-else-if=\"shouldShowTruncated && !isArray\" class=\"relative\">\n        <div class=\"text-content-secondary whitespace-pre-wrap break-words font-mono text-sm\">{{truncatedString}}</div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-merlot-700 hover:text-merlot-900 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show more ({{valueAsString.length}} characters)\n        </button>\n      </div>\n      <!-- Expanded view -->\n      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"relative\">\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"rawValue\"\n          :viewMode=\"propertyDetailViewMode\"\n          @updated=\"renderedValue = $event\"></component>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-merlot-700 hover:text-merlot-900 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show less\n        </button>\n      </div>\n      <!-- Full view (no truncation needed) -->\n      <div v-else>\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"rawValue\"\n          :viewMode=\"propertyDetailViewMode\"\n          @updated=\"renderedValue = $event\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"border border-edge bg-surface rounded-lg mb-2\" style=\"overflow: visible;\">\n  <!-- Collapsible Header -->\n  <div\n    @click=\"toggleCollapse\"\n    class=\"p-1 cursor-pointer flex items-center justify-between border-b border-edge bg-slate-100 hover:bg-muted transition-colors duration-200 ease-in-out\"\n    style=\"overflow: visible; position: relative;\"\n  >\n    <div class=\"flex items-center\" >\n      <svg\n        :class=\"isCollapsed ? 'rotate-0' : 'rotate-90'\"\n        class=\"w-4 h-4 text-content-tertiary 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-content\">\n        <span\n          v-for=\"(part, index) in pathNameParts\"\n          :key=\"index\"\n          :class=\"{ 'font-bold': part.matched }\">{{ part.text }}</span>\n      </span>\n      <span class=\"ml-2 text-sm text-content-tertiary\">({{(path.instance || 'unknown').toLowerCase()}})</span>\n      <div v-if=\"path.instance === 'Array' && canUseArrayTableView\" class=\"ml-3 inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold\">\n        <button\n          type=\"button\"\n          class=\"rounded-full px-2.5 py-0.5 transition\"\n          :class=\"arrayDetailViewMode === 'list' ? 'bg-merlot-700 text-white shadow' : 'text-content-secondary hover:text-content'\"\n          @click.stop=\"setArrayDetailViewMode('list')\">\n          List\n        </button>\n        <button\n          type=\"button\"\n          class=\"rounded-full px-2.5 py-0.5 transition\"\n          :class=\"arrayDetailViewMode === 'table' ? 'bg-merlot-700 text-white shadow' : 'text-content-secondary hover:text-content'\"\n          @click.stop=\"setArrayDetailViewMode('table')\">\n          Table\n        </button>\n      </div>\n      <div v-if=\"isGeoJsonGeometry\" class=\"ml-3 inline-flex items-center gap-2\">\n        <div class=\"inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold\">\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('text')\">\n            Text\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-full px-2.5 py-0.5 transition\"\n            :class=\"detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'\"\n            :style=\"detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''\"\n            @click.stop=\"setDetailViewMode('map')\">\n            Map\n          </button>\n        </div>\n        <!-- Info icon with tooltip -->\n        <div v-if=\"editting\" class=\"relative inline-block\" style=\"z-index: 10002;\" @mouseenter=\"showTooltip = true\" @mouseleave=\"showTooltip = false\" @click.stop>\n          <svg\n            ref=\"infoIcon\"\n            class=\"w-6 h-6 text-gray-400 hover:text-gray-600 cursor-help\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n          </svg>\n          <div\n            v-show=\"showTooltip\"\n            ref=\"tooltip\"\n            class=\"absolute left-full top-0 ml-2 w-64 p-3 text-white text-xs rounded-lg shadow-xl\"\n            style=\"z-index: 99999; pointer-events: none; white-space: normal; position: fixed; background-color: #111827;\"\n            :style=\"getTooltipStyle()\"\n          >\n            <div class=\"font-semibold mb-2\">Map Controls:</div>\n            <div v-if=\"isGeoJsonPoint\" class=\"space-y-1\">\n              <div>• Drag pin to move location</div>\n            </div>\n            <div v-else-if=\"isGeoJsonPolygon\" class=\"space-y-1\">\n              <div>• Drag vertices to reshape polygon</div>\n              <div v-if=\"isMultiPolygon\">• Right-click edge to add new vertex</div>\n              <div>• Right-click vertex to delete</div>\n            </div>\n            <div class=\"absolute top-2 -left-1 w-0 h-0 border-t-4 border-b-4 border-r-4 border-transparent border-r-gray-900\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <date-view-mode-picker\n        v-if=\"isDatePath\"\n        :viewMode=\"dateViewMode\"\n        :path=\"path\"\n        :editting=\"editting\"\n        @update:viewMode=\"dateViewMode = $event\"\n      ></date-view-mode-picker>\n      <objectid-view-mode-picker\n        v-if=\"isObjectIdPath\"\n        :viewMode=\"objectIdViewMode\"\n        @update:viewMode=\"objectIdViewMode = $event\"\n      ></objectid-view-mode-picker>\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-edge-strong bg-surface\"\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-primary hover:bg-primary-hover text-primary-text 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-merlot-700' : ''\"\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-merlot-700' : ''\"\n        class=\"self-stretch px-2 py-1 rounded-sm justify-center items-center gap-1.5 flex cursor-pointer\">\n        <div\n          :class=\"dateType === 'iso' ? 'text-white' : ''\"\n          class=\"text-xs font-medium font-['Lato'] capitalize leading-tight\">\n          ISO String\n        </div>\n      </div>\n    </div>\n\n    <!-- Field Content -->\n    <div v-if=\"editting && path.path !== '_id'\">\n      <!-- Use detail-default with map editing for GeoJSON geometries -->\n      <component\n        v-if=\"isGeoJsonGeometry\"\n        :is=\"getComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :viewMode=\"detailViewMode\"\n        :on-change=\"handleInputChange\"\n        >\n      </component>\n      <!-- Use standard edit components for other types -->\n      <component\n        v-else\n        :is=\"getEditComponentForPath(path)\"\n        :value=\"getEditValueForPath(path)\"\n        :format=\"dateType\"\n        v-bind=\"getEditComponentProps(path)\"\n        @input=\"handleInputChange($event)\"\n        @error=\"invalid[path.path] = $event;\"\n        >\n      </component>\n    </div>\n    <div v-else>\n      <!-- Arrays own their truncation and array search behavior in detail-array. -->\n      <component\n        v-if=\"isArray\"\n        :is=\"getComponentForPath(path)\"\n        :value=\"rawValue\"\n        :viewMode=\"propertyDetailViewMode\"\n        :truncate=\"needsTruncation\"\n        @updated=\"renderedValue = $event\"></component>\n      <!-- Non-array truncated view -->\n      <div v-else-if=\"shouldShowTruncated && !isArray\" class=\"relative\">\n        <div class=\"text-content-secondary whitespace-pre-wrap break-words font-mono text-sm\">{{truncatedString}}</div>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-merlot-700 hover:text-merlot-900 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show more ({{valueAsString.length}} characters)\n        </button>\n      </div>\n      <!-- Expanded view -->\n      <div v-else-if=\"needsTruncation && isValueExpanded\" class=\"relative\">\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"rawValue\"\n          :viewMode=\"propertyDetailViewMode\"\n          @updated=\"renderedValue = $event\"></component>\n        <button\n          @click=\"toggleValueExpansion\"\n          class=\"mt-2 text-merlot-700 hover:text-merlot-900 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5\"\n        >\n          <svg class=\"w-4 h-4 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path>\n          </svg>\n          Show less\n        </button>\n      </div>\n      <!-- Full view (no truncation needed) -->\n      <div v-else>\n        <component\n          :is=\"getComponentForPath(path)\"\n          :value=\"rawValue\"\n          :viewMode=\"propertyDetailViewMode\"\n          @updated=\"renderedValue = $event\"></component>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -53127,7 +53914,7 @@ module.exports = "<div>\n  <h2>\n      Are you sure you want to delete the follo
 (module) {
 
 "use strict";
-module.exports = ".document .document-menu {\n  display: flex;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  background-color: var(--studio-bg-surface);\n  border-radius: 5px;\n  padding: 15px 15px;\n  margin: -15px 0 15px 0;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.document .document-menu .left {\n  flex-grow: 1;\n}\n\n.document .document-menu .right {\n  flex-grow: 1;\n  text-align: right;\n}\n\n.document .document-menu .right button:not(:last-child) {\n  margin-right: 0.5em;\n}\n\n.document button img {\n  height: 1em;\n}\n";
+module.exports = ".document .document-menu {\n  display: flex;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  background-color: var(--studio-bg-surface);\n  border-radius: 5px;\n  padding: 15px 15px;\n  margin: -15px 0 15px 0;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.document .document-menu .left {\n  flex-grow: 1;\n}\n\n.document .document-menu .right {\n  flex-grow: 1;\n  text-align: right;\n}\n\n.document .document-menu .right button:not(:last-child) {\n  margin-right: 0.5em;\n}\n\n.document button img {\n  height: 1em;\n}\n\n/* Add Field Modal Styles */\n.add-field-modal {\n  max-width: 500px;\n  width: 100%;\n}\n\n.add-field-modal .modal-exit {\n  position: absolute;\n  top: 15px;\n  right: 20px;\n  font-size: 24px;\n  cursor: pointer;\n  color: #6b7280;\n  z-index: 10;\n}\n\n.add-field-modal .modal-exit:hover {\n  color: #374151;\n}\n\n.add-field-modal form {\n  max-height: 70vh;\n  overflow-y: auto;\n}\n\n.add-field-modal input[type=\"text\"],\n.add-field-modal input[type=\"email\"],\n.add-field-modal input[type=\"password\"],\n.add-field-modal select,\n.add-field-modal textarea {\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.add-field-modal input:focus,\n.add-field-modal select:focus,\n.add-field-modal textarea:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.add-field-modal .border-red-500 {\n  border-color: #ef4444 !important;\n}\n\n.add-field-modal .border-red-500:focus {\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;\n}\n\n/* Ace editor styling in modal */\n.add-field-modal .add-field-ace-editor.ace_editor {\n  border: 1px solid #d1d5db;\n  border-radius: 0.375rem;\n  font-size: 14px;\n  min-height: 100px;\n}\n\n.add-field-modal .add-field-ace-editor:focus-within.ace_editor,\n.add-field-modal .add-field-ace-editor.ace_focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n";
 
 /***/ },
 
@@ -53138,7 +53925,7 @@ module.exports = ".document .document-menu {\n  display: flex;\n  position: stic
 (module) {
 
 "use strict";
-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-surface p-4 border-b border-edge 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-primary text-white z-10'\n            : 'bg-gray-200 text-content-secondary 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-edge-strong 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-primary text-white z-10'\n            : 'bg-gray-200 text-content-secondary 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-edge-strong 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=\"hidden md:flex items-center gap-3 text-sm text-slate-600\">\n        <div class=\"text-right leading-tight\">\n          <div class=\"text-xs uppercase tracking-wide text-slate-400 flex items-center gap-2 justify-end\">\n            <span>Loaded at</span>\n            <span class=\"inline-flex items-center gap-1 text-[10px] font-semibold\" :class=\"autoRefreshEnabled ? 'text-forest-green-600' : 'text-slate-400'\">\n              <span class=\"inline-block h-1.5 w-1.5 rounded-full\" :class=\"autoRefreshEnabled ? 'bg-forest-green-500' : 'bg-slate-300'\"></span>\n            </span>\n          </div>\n          <div class=\"font-medium text-slate-700\">{{lastUpdatedLabel}}</div>\n        </div>\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-primary px-2.5 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover 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-content-secondary 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-surface ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); desktopMenuOpen = false\"\n                :disabled=\"isLambda\"\n                type=\"button\"\n                :class=\"['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-content-secondary hover:bg-slate-100']\"\n                :title=\"isLambda ? 'Auto-refresh only available on Express deployments' : ''\"\n              >\n                {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}\n              </button>\n              <button\n                @click=\"addField(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openValidationModal()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Validate\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100\"\n              >\n                Run Script\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-content-secondary', !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-content-secondary', !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-content-secondary 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-surface 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-content-secondary', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-primary-subtle']\"\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-content-secondary 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-content-secondary', !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=\"refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-slate-100\"\n              >\n                Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}\n              </button>\n              <button\n                @click=\"addField(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openValidationModal()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Validate\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100\"\n              >\n                Run Script\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-content-secondary', !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-content-secondary', !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      <modal v-if=\"shouldShowValidationModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowValidationModal = false;\">&times;</div>\n          <div class=\"text-xl font-bold mb-2\">Validate Document</div>\n          <div v-if=\"!validationResult\" class=\"space-y-3\">\n            <div class=\"h-4 w-32 animate-pulse rounded bg-muted\"></div>\n            <div class=\"h-20 w-full animate-pulse rounded bg-muted\"></div>\n          </div>\n          <div v-else class=\"space-y-3\">\n            <div\n              class=\"rounded px-3 py-2 text-sm font-semibold\"\n              :class=\"validationResult.valid ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'\"\n            >\n              {{ validationResult.valid ? 'Document is valid' : 'Document is invalid' }}\n            </div>\n            <div v-if=\"!validationResult.valid\" class=\"rounded border border-edge bg-muted p-3 text-sm text-content-secondary\">\n              {{ validationResult.error }}\n            </div>\n            <div v-if=\"validationResult?.errors && Object.keys(validationResult.errors).length > 0\" class=\"rounded border border-edge\">\n              <div class=\"border-b border-edge px-3 py-2 text-sm font-semibold text-content-secondary\">Invalid Paths</div>\n              <div class=\"max-h-72 overflow-auto\">\n                <div\n                  v-for=\"[path, pathError] in Object.entries(validationResult.errors)\"\n                  :key=\"path\"\n                  class=\"grid gap-2 border-b border-edge px-3 py-2 text-sm last:border-b-0 md:grid-cols-[minmax(160px,220px)_1fr]\"\n                >\n                  <div class=\"font-mono text-content\">{{ path }}</div>\n                  <div class=\"text-content-secondary\">\n                    <div>{{ pathError.message }}</div>\n                    <div v-if=\"pathError.kind\" class=\"mt-1 text-xs text-content-tertiary\">Kind: {{ pathError.kind }}</div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </template>\n      </modal>\n    </div>\n    <execute-script\n      :visible=\"scriptDrawerOpen\"\n      :model=\"model\"\n      :document-id=\"documentId\"\n      :editting=\"editting\"\n      @close=\"closeScriptDrawer\"\n      @refresh=\"handleScriptRefresh\"\n    ></execute-script>\n    <div\n      v-if=\"keyboardShortcuts.length > 0\"\n      class=\"fixed bottom-4 left-4 z-40 group\"\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Keyboard shortcuts\"\n        title=\"Keyboard shortcuts\"\n        class=\"rounded-full border border-slate-300 bg-surface p-2 text-slate-700 shadow-sm transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-primary\"\n      >\n        <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <rect x=\"2.5\" y=\"6.5\" width=\"19\" height=\"11\" rx=\"2\" stroke-width=\"1.5\"></rect>\n          <path d=\"M6 10.5h1.5M9 10.5h1.5M12 10.5h1.5M15 10.5h1.5M18 10.5h.01M6 13.5h1.5M9 13.5h6M16.5 13.5h1.5\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"pointer-events-none absolute left-0 bottom-full mb-2 min-w-[220px] translate-y-1 rounded-lg bg-slate-900 px-3 py-2.5 text-slate-200 opacity-0 shadow-xl transition-all duration-150 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n        <div\n          v-for=\"shortcut in keyboardShortcuts\"\n          :key=\"shortcut.command + shortcut.description\"\n          class=\"flex items-center justify-between gap-3 text-xs\"\n        >\n          <span class=\"font-mono font-semibold text-slate-50\">{{shortcut.command}}</span>\n          <span class=\"text-slate-300\">{{shortcut.description}}</span>\n        </div>\n      </div>\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-surface p-4 border-b border-edge 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-primary text-white z-10'\n            : 'bg-gray-200 text-content-secondary 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-edge-strong 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-primary text-white z-10'\n            : 'bg-gray-200 text-content-secondary 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-edge-strong 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=\"hidden md:flex items-center gap-3 text-sm text-slate-600\">\n        <div class=\"text-right leading-tight\">\n          <div class=\"text-xs uppercase tracking-wide text-slate-400 flex items-center gap-2 justify-end\">\n            <span>Loaded at</span>\n            <span class=\"inline-flex items-center gap-1 text-[10px] font-semibold\" :class=\"autoRefreshEnabled ? 'text-forest-green-600' : 'text-slate-400'\">\n              <span class=\"inline-block h-1.5 w-1.5 rounded-full\" :class=\"autoRefreshEnabled ? 'bg-forest-green-500' : 'bg-slate-300'\"></span>\n            </span>\n          </div>\n          <div class=\"font-medium text-slate-700\">{{lastUpdatedLabel}}</div>\n        </div>\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-primary px-2.5 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover 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-content-secondary 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-surface ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); desktopMenuOpen = false\"\n                :disabled=\"isLambda\"\n                type=\"button\"\n                :class=\"['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-content-secondary hover:bg-slate-100']\"\n                :title=\"isLambda ? 'Auto-refresh only available on Express deployments' : ''\"\n              >\n                {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}\n              </button>\n              <button\n                @click=\"addField(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openValidationModal()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Validate\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100\"\n              >\n                Run Script\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-content-secondary', !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-content-secondary', !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-content-secondary 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-surface 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-content-secondary', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-primary-subtle']\"\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-content-secondary 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-content-secondary', !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=\"refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-slate-100\"\n              >\n                Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}\n              </button>\n              <button\n                @click=\"addField(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openValidationModal()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Validate\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100\"\n              >\n                Run Script\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-content-secondary', !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-content-secondary', !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        @view-mode-change=\"updateViewMode\"></document-details>\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-content 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              <div>\n                <label for=\"fieldName\" class=\"block text-sm font-medium text-content-secondary 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-edge-strong 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              <div>\n                <label for=\"fieldType\" class=\"block text-sm font-medium text-content-secondary 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-edge-strong 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              <div>\n                <label for=\"fieldValue\" class=\"block text-sm font-medium text-content-secondary mb-1\">\n                  Initial Value\n                </label>\n\n                <custom-date-picker\n                  v-if=\"shouldUseDatePicker\"\n                  id=\"fieldValue\"\n                  mode=\"date\"\n                  :value=\"fieldData.value\"\n                  :class=\"{ 'border-red-500': fieldErrors.value, 'max-w-[400px]': true }\"\n                  :horizontal=\"true\"\n                  @input=\"fieldData.value = $event\"\n                />\n\n                <input\n                  v-else-if=\"!shouldUseAce\"\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-edge-strong 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                <ace-editor\n                  v-else\n                  id=\"fieldValue\"\n                  v-model=\"fieldData.value\"\n                  mode=\"json\"\n                  :line-numbers=\"true\"\n                  :min-lines=\"3\"\n                  class=\"add-field-ace-editor w-full min-h-[100px]\"\n                  :class=\"{ 'border-red-500': fieldErrors.value }\"\n                />\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-content-tertiary\">\n                  <span v-if=\"shouldUseDatePicker\">Select a date or leave empty for null/undefined values.</span>\n                  <span v-else-if=\"shouldUseAce\">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              <div class=\"flex justify-end gap-3 pt-4 border-t border-edge\">\n                <button\n                  type=\"button\"\n                  @click=\"closeAddFieldModal\"\n                  class=\"px-4 py-2 text-sm font-medium text-content-secondary bg-surface border border-edge-strong rounded-md hover:bg-page 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      <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      <modal v-if=\"shouldShowValidationModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowValidationModal = false;\">&times;</div>\n          <div class=\"text-xl font-bold mb-2\">Validate Document</div>\n          <div v-if=\"!validationResult\" class=\"space-y-3\">\n            <div class=\"h-4 w-32 animate-pulse rounded bg-muted\"></div>\n            <div class=\"h-20 w-full animate-pulse rounded bg-muted\"></div>\n          </div>\n          <div v-else class=\"space-y-3\">\n            <div\n              class=\"rounded px-3 py-2 text-sm font-semibold\"\n              :class=\"validationResult.valid ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'\"\n            >\n              {{ validationResult.valid ? 'Document is valid' : 'Document is invalid' }}\n            </div>\n            <div v-if=\"!validationResult.valid\" class=\"rounded border border-edge bg-muted p-3 text-sm text-content-secondary\">\n              {{ validationResult.error }}\n            </div>\n            <div v-if=\"validationResult?.errors && Object.keys(validationResult.errors).length > 0\" class=\"rounded border border-edge\">\n              <div class=\"border-b border-edge px-3 py-2 text-sm font-semibold text-content-secondary\">Invalid Paths</div>\n              <div class=\"max-h-72 overflow-auto\">\n                <div\n                  v-for=\"[path, pathError] in Object.entries(validationResult.errors)\"\n                  :key=\"path\"\n                  class=\"grid gap-2 border-b border-edge px-3 py-2 text-sm last:border-b-0 md:grid-cols-[minmax(160px,220px)_1fr]\"\n                >\n                  <div class=\"font-mono text-content\">{{ path }}</div>\n                  <div class=\"text-content-secondary\">\n                    <div>{{ pathError.message }}</div>\n                    <div v-if=\"pathError.kind\" class=\"mt-1 text-xs text-content-tertiary\">Kind: {{ pathError.kind }}</div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </template>\n      </modal>\n    </div>\n    <execute-script\n      :visible=\"scriptDrawerOpen\"\n      :model=\"model\"\n      :document-id=\"documentId\"\n      :editting=\"editting\"\n      @close=\"closeScriptDrawer\"\n      @refresh=\"handleScriptRefresh\"\n    ></execute-script>\n    <div\n      v-if=\"keyboardShortcuts.length > 0\"\n      class=\"fixed bottom-4 left-4 z-40 group\"\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Keyboard shortcuts\"\n        title=\"Keyboard shortcuts\"\n        class=\"rounded-full border border-slate-300 bg-surface p-2 text-slate-700 shadow-sm transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-primary\"\n      >\n        <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <rect x=\"2.5\" y=\"6.5\" width=\"19\" height=\"11\" rx=\"2\" stroke-width=\"1.5\"></rect>\n          <path d=\"M6 10.5h1.5M9 10.5h1.5M12 10.5h1.5M15 10.5h1.5M18 10.5h.01M6 13.5h1.5M9 13.5h6M16.5 13.5h1.5\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"pointer-events-none absolute left-0 bottom-full mb-2 min-w-[220px] translate-y-1 rounded-lg bg-slate-900 px-3 py-2.5 text-slate-200 opacity-0 shadow-xl transition-all duration-150 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n        <div\n          v-for=\"shortcut in keyboardShortcuts\"\n          :key=\"shortcut.command + shortcut.description\"\n          class=\"flex items-center justify-between gap-3 text-xs\"\n        >\n          <span class=\"font-mono font-semibold text-slate-50\">{{shortcut.command}}</span>\n          <span class=\"text-slate-300\">{{shortcut.description}}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -53193,7 +53980,7 @@ module.exports = "<div class=\"edit-boolean\">\n  <div class=\"flex flex-wrap ga
 (module) {
 
 "use strict";
-module.exports = "<div>\n  <input\n    v-if=\"dateSelection == 'picker'\"\n    class=\"w-64 h-8 border border-edge-strong outline-0\"\n    type=\"datetime-local\"\n    :value=\"valueAsLocalString\"\n    @input=\"$emit('input', $event.target.value)\">\n  <input\n    v-if=\"dateSelection == 'iso'\"\n    type=\"text\"\n    class=\"w-64 h-8 border border-edge-strong outline-0\"\n    :value=\"valueAsISOString\"\n    @input=\"updateFromISO\">\n</div>";
+module.exports = "<div>\n  <custom-date-picker\n    v-if=\"dateSelection == 'picker'\"\n    :value=\"value\"\n    mode=\"datetime\"\n    :horizontal=\"true\"\n    class=\"max-w-[420px]\"\n    @input=\"$emit('input', $event)\"\n  />\n  <input\n    v-if=\"dateSelection == 'iso'\"\n    type=\"text\"\n    class=\"w-64 h-8 border border-edge-strong outline-0\"\n    :value=\"valueAsISOString\"\n    @input=\"updateFromISO\">\n</div>\n";
 
 /***/ },
 
@@ -53435,7 +54222,7 @@ module.exports = "<div>\n  <div class=\"modal-exit\" @click=\"close\">&times;</d
 (module) {
 
 "use strict";
-module.exports = "<form @submit.prevent=\"emitSearch\" class=\"relative flex-grow m-0\">\n  <input\n    ref=\"searchInput\"\n    class=\"w-full font-mono rounded-md p-1 border border-edge-strong outline-edge-strong text-lg focus:ring-1 focus:ring-primary-subtle focus:ring-offset-0 focus:outline-none\"\n    type=\"text\"\n    placeholder=\"Filter (supports JS, dates, ObjectIds, and more)\"\n    v-model=\"searchText\"\n    @click=\"initFilter\"\n    @input=\"updateAutocomplete\"\n    @keydown=\"handleKeyDown\"\n  />\n  <ul v-if=\"autocompleteSuggestions.length\" class=\"absolute z-[9999] bg-surface border border-edge-strong rounded mt-1 w-full max-h-40 overflow-y-auto shadow\">\n    <li\n      v-for=\"(suggestion, index) in autocompleteSuggestions\"\n      :key=\"suggestion\"\n      class=\"px-2 py-1 cursor-pointer\"\n      :class=\"{ 'bg-primary-subtle': index === autocompleteIndex }\"\n      @mousedown.prevent=\"applySuggestion(index)\"\n    >\n      {{ suggestion }}\n    </li>\n  </ul>\n</form>\n";
+module.exports = "<div class=\"relative flex-grow m-0\" @focusout=\"onWrapperFocusOut\">\n  <form @submit.prevent=\"emitSearch\" class=\"w-full mb-0\">\n    <input\n      ref=\"searchInput\"\n      class=\"w-full font-mono rounded-md p-1 border border-edge-strong outline-edge-strong text-lg focus:ring-1 focus:ring-primary-subtle focus:ring-offset-0 focus:outline-none\"\n      type=\"text\"\n      placeholder=\"Filter (supports JS, dates, ObjectIds, and more)\"\n      v-model=\"searchText\"\n      @click=\"initFilter($event); updateAutocomplete()\"\n      @input=\"updateAutocomplete\"\n      @keyup=\"onSearchKeyup\"\n      @keydown=\"handleKeyDown\"\n    />\n    <div\n      v-if=\"autocompleteSuggestions.length\"\n      ref=\"autocompleteDropdown\"\n      class=\"absolute z-[9999] bg-surface border border-edge-strong rounded mt-1 w-full shadow\"\n    >\n      <ul class=\"max-h-40 overflow-y-auto\">\n        <li\n          v-for=\"(suggestion, index) in autocompleteSuggestions\"\n          :key=\"suggestion\"\n          class=\"px-2 py-1 cursor-pointer\"\n          :class=\"{ 'bg-primary-subtle': index === autocompleteIndex }\"\n          @mousedown.prevent=\"applySuggestion(index)\"\n        >\n          {{ suggestion }}\n        </li>\n      </ul>\n    </div>\n  </form>\n\n  <div\n    v-if=\"datePickerContext\"\n    class=\"absolute top-full left-0 z-[10000] mt-0 w-[400px] max-w-[calc(100vw-2rem)] bg-surface border border-edge-strong rounded-lg shadow-xl\"\n    role=\"dialog\"\n    aria-label=\"Date picker\"\n    @mousedown.stop\n  >\n    <div class=\"flex items-center justify-between gap-2 px-3 py-2 border-b border-edge-strong\">\n      <span class=\"text-sm font-medium text-content-primary\">Insert date into filter</span>\n      <div class=\"flex items-center gap-2 shrink-0\">\n        <select\n          v-if=\"!datePickerMinimized\"\n          v-model=\"dateInsertFormat\"\n          class=\"text-xs border border-edge rounded-md bg-surface px-2 py-1\"\n          @mousedown.stop\n        >\n          <option value=\"timestamp\">Milliseconds</option>\n          <option value=\"quoted\">Date string</option>\n        </select>\n        <button\n          type=\"button\"\n          class=\"flex items-center justify-center w-5 h-5 rounded hover:bg-surface-hover text-content-secondary\"\n          :aria-label=\"datePickerMinimized ? 'Expand date picker' : 'Minimize date picker'\"\n          @click.stop=\"datePickerMinimized = !datePickerMinimized\"\n        >\n          <svg v-if=\"datePickerMinimized\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" class=\"w-3.5 h-3.5\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n          </svg>\n          <svg v-else xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" class=\"w-3.5 h-3.5\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m4.5 15.75 7.5-7.5 7.5 7.5\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!datePickerMinimized\" class=\"p-2\">\n      <custom-date-picker\n        compact\n        horizontal\n        embedded\n        :immediate=\"false\"\n        mode=\"datetime\"\n        :value=\"datePickerLocalValue\"\n        @commit=\"applyDateFromPicker\"\n      />\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -59848,7 +60635,7 @@ class Binary extends BSONValue {
             !Array.isArray(buffer)) {
             throw new BSONError('Binary can only be constructed from Uint8Array or number[]');
         }
-        this.sub_type = subType ?? Binary.BSON_BINARY_SUBTYPE_DEFAULT;
+        this.sub_type = (subType ?? Binary.BSON_BINARY_SUBTYPE_DEFAULT) & 0xff;
         if (buffer == null) {
             this.buffer = ByteUtils.allocate(Binary.BUFFER_SIZE);
             this.position = 0;
@@ -59954,7 +60741,7 @@ class Binary extends BSONValue {
         if (this.sub_type === Binary.SUBTYPE_UUID) {
             return new UUID(this.buffer.subarray(0, this.position));
         }
-        throw new BSONError(`Binary sub_type "${this.sub_type}" is not supported for converting to UUID. Only "${Binary.SUBTYPE_UUID}" is currently supported.`);
+        throw new BSONError(`Binary sub_type "${this.sub_type}" (${typeof this.sub_type}) is not supported for converting to UUID. Only 0x${Binary.SUBTYPE_UUID.toString(16).padStart(2, '0')} is currently supported.`);
     }
     static createFromHexString(hex, subType) {
         return new Binary(ByteUtils.fromHex(hex), subType);
@@ -61743,13 +62530,24 @@ class MinKey extends BSONValue {
     }
 }
 
-let PROCESS_UNIQUE = null;
 const __idCache = new WeakMap();
 class ObjectId extends BSONValue {
     get _bsontype() {
         return 'ObjectId';
     }
-    static index = Math.floor(Math.random() * 0xffffff);
+    static index = 0;
+    static PROCESS_UNIQUE = null;
+    static resetState = () => {
+        this.index = Math.floor(Math.random() * 0x1000000);
+        this.PROCESS_UNIQUE = ByteUtils.randomBytes(5);
+    };
+    static {
+        this.resetState();
+        const { startupSnapshot } = globalThis?.process?.getBuiltinModule('v8') ?? {};
+        if (startupSnapshot?.isBuildingSnapshot()) {
+            startupSnapshot?.addDeserializeCallback(this.resetState);
+        }
+    }
     static cacheHexString;
     buffer;
     constructor(inputId) {
@@ -61826,7 +62624,7 @@ class ObjectId extends BSONValue {
         return hexString;
     }
     static getInc() {
-        return (ObjectId.index = (ObjectId.index + 1) % 0xffffff);
+        return (ObjectId.index = (ObjectId.index + 1) % 0x1000000);
     }
     static generate(time) {
         if ('number' !== typeof time) {
@@ -61835,9 +62633,7 @@ class ObjectId extends BSONValue {
         const inc = ObjectId.getInc();
         const buffer = ByteUtils.allocateUnsafe(12);
         NumberUtils.setInt32BE(buffer, 0, time);
-        if (PROCESS_UNIQUE === null) {
-            PROCESS_UNIQUE = ByteUtils.randomBytes(5);
-        }
+        const PROCESS_UNIQUE = this.PROCESS_UNIQUE;
         buffer[4] = PROCESS_UNIQUE[0];
         buffer[5] = PROCESS_UNIQUE[1];
         buffer[6] = PROCESS_UNIQUE[2];
@@ -61955,23 +62751,33 @@ class ObjectId extends BSONValue {
 }
 
 function internalCalculateObjectSize(object, serializeFunctions, ignoreUndefined) {
-    let totalLength = 4 + 1;
-    if (Array.isArray(object)) {
-        for (let i = 0; i < object.length; i++) {
-            totalLength += calculateElement(i.toString(), object[i], serializeFunctions, true, ignoreUndefined);
+    const objectStack = [
+        { obj: object, ignoreUndefined: ignoreUndefined ?? false }
+    ];
+    let total = 0;
+    while (objectStack.length > 0) {
+        const { obj, ignoreUndefined: frameIgnoreUndefined } = objectStack.pop();
+        total += 5;
+        const isObjArray = Array.isArray(obj);
+        let target = obj;
+        if (!isObjArray && typeof obj?.toBSON === 'function') {
+            target = obj.toBSON();
         }
-    }
-    else {
-        if (typeof object?.toBSON === 'function') {
-            object = object.toBSON();
+        if (isObjArray) {
+            const array = target;
+            for (let i = 0; i < array.length; i++) {
+                total += calculateElementSize(i.toString(), array[i], serializeFunctions, true, frameIgnoreUndefined, objectStack);
+            }
         }
-        for (const key of Object.keys(object)) {
-            totalLength += calculateElement(key, object[key], serializeFunctions, false, ignoreUndefined);
+        else {
+            for (const key of Object.keys(target)) {
+                total += calculateElementSize(key, target[key], serializeFunctions, false, frameIgnoreUndefined, objectStack);
+            }
         }
     }
-    return totalLength;
+    return total;
 }
-function calculateElement(name, value, serializeFunctions = false, isArray = false, ignoreUndefined = false) {
+function calculateElementSize(name, value, serializeFunctions = false, isArray = false, ignoreUndefined = false, objectStack) {
     if (typeof value?.toBSON === 'function') {
         value = value.toBSON();
     }
@@ -61983,21 +62789,21 @@ function calculateElement(name, value, serializeFunctions = false, isArray = fal
                 value >= JS_INT_MIN &&
                 value <= JS_INT_MAX) {
                 if (value >= BSON_INT32_MIN && value <= BSON_INT32_MAX) {
-                    return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (4 + 1);
+                    return ByteUtils.utf8ByteLength(name) + 1 + (4 + 1);
                 }
                 else {
-                    return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (8 + 1);
+                    return ByteUtils.utf8ByteLength(name) + 1 + (8 + 1);
                 }
             }
             else {
-                return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (8 + 1);
+                return ByteUtils.utf8ByteLength(name) + 1 + (8 + 1);
             }
         case 'undefined':
             if (isArray || !ignoreUndefined)
-                return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + 1;
+                return ByteUtils.utf8ByteLength(name) + 1 + 1;
             return 0;
         case 'boolean':
-            return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (1 + 1);
+            return ByteUtils.utf8ByteLength(name) + 1 + (1 + 1);
         case 'object':
             if (value != null &&
                 typeof value._bsontype === 'string' &&
@@ -62005,39 +62811,41 @@ function calculateElement(name, value, serializeFunctions = false, isArray = fal
                 throw new BSONVersionError();
             }
             else if (value == null || value._bsontype === 'MinKey' || value._bsontype === 'MaxKey') {
-                return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + 1;
+                return ByteUtils.utf8ByteLength(name) + 1 + 1;
             }
             else if (value._bsontype === 'ObjectId') {
-                return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (12 + 1);
+                return ByteUtils.utf8ByteLength(name) + 1 + (12 + 1);
             }
             else if (value instanceof Date || isDate(value)) {
-                return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (8 + 1);
+                return ByteUtils.utf8ByteLength(name) + 1 + (8 + 1);
             }
             else if (ArrayBuffer.isView(value) ||
                 value instanceof ArrayBuffer ||
                 isAnyArrayBuffer(value)) {
-                return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (1 + 4 + 1) + value.byteLength);
+                return ByteUtils.utf8ByteLength(name) + 1 + (1 + 4 + 1) + value.byteLength;
             }
             else if (value._bsontype === 'Long' ||
                 value._bsontype === 'Double' ||
                 value._bsontype === 'Timestamp') {
-                return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (8 + 1);
+                return ByteUtils.utf8ByteLength(name) + 1 + (8 + 1);
             }
             else if (value._bsontype === 'Decimal128') {
-                return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (16 + 1);
+                return ByteUtils.utf8ByteLength(name) + 1 + (16 + 1);
             }
             else if (value._bsontype === 'Code') {
                 if (value.scope != null && Object.keys(value.scope).length > 0) {
-                    return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) +
+                    objectStack.push({ obj: value.scope, ignoreUndefined });
+                    return (ByteUtils.utf8ByteLength(name) +
+                        1 +
                         1 +
                         4 +
                         4 +
                         ByteUtils.utf8ByteLength(value.code.toString()) +
-                        1 +
-                        internalCalculateObjectSize(value.scope, serializeFunctions, ignoreUndefined));
+                        1);
                 }
                 else {
-                    return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) +
+                    return (ByteUtils.utf8ByteLength(name) +
+                        1 +
                         1 +
                         4 +
                         ByteUtils.utf8ByteLength(value.code.toString()) +
@@ -62047,19 +62855,14 @@ function calculateElement(name, value, serializeFunctions = false, isArray = fal
             else if (value._bsontype === 'Binary') {
                 const binary = value;
                 if (binary.sub_type === Binary.SUBTYPE_BYTE_ARRAY) {
-                    return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) +
-                        (binary.position + 1 + 4 + 1 + 4));
+                    return ByteUtils.utf8ByteLength(name) + 1 + (binary.position + 1 + 4 + 1 + 4);
                 }
                 else {
-                    return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (binary.position + 1 + 4 + 1));
+                    return ByteUtils.utf8ByteLength(name) + 1 + (binary.position + 1 + 4 + 1);
                 }
             }
             else if (value._bsontype === 'Symbol') {
-                return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) +
-                    ByteUtils.utf8ByteLength(value.value) +
-                    4 +
-                    1 +
-                    1);
+                return (ByteUtils.utf8ByteLength(name) + 1 + ByteUtils.utf8ByteLength(value.value) + 4 + 1 + 1);
             }
             else if (value._bsontype === 'DBRef') {
                 const ordered_values = Object.assign({
@@ -62069,12 +62872,12 @@ function calculateElement(name, value, serializeFunctions = false, isArray = fal
                 if (value.db != null) {
                     ordered_values['$db'] = value.db;
                 }
-                return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) +
-                    1 +
-                    internalCalculateObjectSize(ordered_values, serializeFunctions, ignoreUndefined));
+                objectStack.push({ obj: ordered_values, ignoreUndefined: true });
+                return ByteUtils.utf8ByteLength(name) + 1 + 1;
             }
             else if (value instanceof RegExp || isRegExp(value)) {
-                return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) +
+                return (ByteUtils.utf8ByteLength(name) +
+                    1 +
                     1 +
                     ByteUtils.utf8ByteLength(value.source) +
                     1 +
@@ -62084,7 +62887,8 @@ function calculateElement(name, value, serializeFunctions = false, isArray = fal
                     1);
             }
             else if (value._bsontype === 'BSONRegExp') {
-                return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) +
+                return (ByteUtils.utf8ByteLength(name) +
+                    1 +
                     1 +
                     ByteUtils.utf8ByteLength(value.pattern) +
                     1 +
@@ -62092,13 +62896,13 @@ function calculateElement(name, value, serializeFunctions = false, isArray = fal
                     1);
             }
             else {
-                return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) +
-                    internalCalculateObjectSize(value, serializeFunctions, ignoreUndefined) +
-                    1);
+                objectStack.push({ obj: value, ignoreUndefined });
+                return ByteUtils.utf8ByteLength(name) + 1 + 1;
             }
         case 'function':
             if (serializeFunctions) {
-                return ((name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) +
+                return (ByteUtils.utf8ByteLength(name) +
+                    1 +
                     1 +
                     4 +
                     ByteUtils.utf8ByteLength(value.toString()) +
@@ -62106,7 +62910,7 @@ function calculateElement(name, value, serializeFunctions = false, isArray = fal
             }
             return 0;
         case 'bigint':
-            return (name != null ? ByteUtils.utf8ByteLength(name) + 1 : 0) + (8 + 1);
+            return ByteUtils.utf8ByteLength(name) + 1 + (8 + 1);
         case 'symbol':
             return 0;
         default:
@@ -62322,7 +63126,28 @@ function internalDeserialize(buffer, options, isArray) {
     return deserializeObject(buffer, index, options, isArray);
 }
 const allowedDBRefKeys = /^\$ref$|^\$id$|^\$db$/;
+function assignValue(dest, name, value) {
+    if (name === '__proto__') {
+        Object.defineProperty(dest, name, {
+            value,
+            writable: true,
+            enumerable: true,
+            configurable: true
+        });
+    }
+    else {
+        dest[name] = value;
+    }
+}
+function toPotentialDbRef(doc) {
+    if (isDBRefLike(doc)) {
+        const { $ref, $id, $db, ...fields } = doc;
+        return new DBRef($ref, $id, $db, fields);
+    }
+    return doc;
+}
 function deserializeObject(buffer, index, options, isArray = false) {
+    options = { ...options };
     const fieldsAsRaw = options['fieldsAsRaw'] == null ? null : options['fieldsAsRaw'];
     const raw = options['raw'] == null ? false : options['raw'];
     const bsonRegExp = typeof options['bsonRegExp'] === 'boolean' ? options['bsonRegExp'] : false;
@@ -62373,31 +63198,87 @@ function deserializeObject(buffer, index, options, isArray = false) {
     index += 4;
     if (size < 5 || size > buffer.length)
         throw new BSONError('corrupt bson message');
-    const object = isArray ? [] : {};
+    const rootObject = isArray ? [] : {};
     let arrayIndex = 0;
     let isPossibleDBRef = isArray ? false : null;
+    let currentFrame = null;
+    let currentDest = rootObject;
+    let currentIsArray = isArray;
     while (true) {
         const elementType = buffer[index++];
-        if (elementType === 0)
-            break;
+        if (elementType === 0) {
+            if (currentFrame) {
+                if (index === currentFrame.lastIndex) {
+                    const completedFrame = currentFrame;
+                    currentFrame = completedFrame.prev;
+                    if (currentFrame === null) {
+                        currentDest = rootObject;
+                        currentIsArray = isArray;
+                    }
+                    else {
+                        currentDest = currentFrame.holdingDocument;
+                        currentIsArray = currentFrame.isArray;
+                    }
+                    let result = completedFrame.holdingDocument;
+                    switch (completedFrame.elementType) {
+                        case BSON_DATA_OBJECT:
+                            if (completedFrame.isPossibleDBRef) {
+                                result = toPotentialDbRef(result);
+                            }
+                            break;
+                        case BSON_DATA_ARRAY:
+                            break;
+                        case BSON_DATA_CODE_W_SCOPE:
+                            result = new Code(completedFrame.functionString, completedFrame.holdingDocument);
+                            break;
+                        default:
+                            throw new BSONError('Unexpected element type in frame stack');
+                    }
+                    assignValue(currentDest, completedFrame.propertyName, result);
+                    continue;
+                }
+                else {
+                    if (currentFrame.elementType === BSON_DATA_ARRAY) {
+                        throw new BSONError('corrupted array bson');
+                    }
+                    throw new BSONError('Bad BSON Document: object not properly terminated');
+                }
+            }
+            else {
+                break;
+            }
+        }
         let i = index;
         while (buffer[i] !== 0x00 && i < buffer.length) {
             i++;
         }
         if (i >= buffer.byteLength)
             throw new BSONError('Bad BSON Document: illegal CString');
-        const name = isArray ? arrayIndex++ : ByteUtils.toUTF8(buffer, index, i, false);
-        let shouldValidateKey = true;
-        if (globalUTFValidation || utf8KeysSet?.has(name)) {
+        const name = currentIsArray
+            ? currentFrame !== null
+                ? currentFrame.arrayIndex++
+                : arrayIndex++
+            : ByteUtils.toUTF8(buffer, index, i, false);
+        let shouldValidateKey;
+        if (currentFrame !== null) {
+            shouldValidateKey = currentFrame.validationSetting;
+        }
+        else if (globalUTFValidation || utf8KeysSet?.has(name)) {
             shouldValidateKey = validationSetting;
         }
         else {
             shouldValidateKey = !validationSetting;
         }
-        if (isPossibleDBRef !== false && name[0] === '$') {
+        if (currentFrame !== null) {
+            if (currentFrame.isPossibleDBRef !== false && typeof name === 'string' && name[0] === '$') {
+                currentFrame.isPossibleDBRef = allowedDBRefKeys.test(name);
+            }
+        }
+        else if (isPossibleDBRef !== false && name[0] === '$') {
             isPossibleDBRef = allowedDBRefKeys.test(name);
         }
         let value;
+        let isDeferredValue = false;
         index = i + 1;
         if (elementType === BSON_DATA_STRING) {
             const stringSize = NumberUtils.getInt32LE(buffer, index);
@@ -62443,39 +63324,58 @@ function deserializeObject(buffer, index, options, isArray = false) {
             value = buffer[index++] === 1;
         }
         else if (elementType === BSON_DATA_OBJECT) {
-            const _index = index;
             const objectSize = NumberUtils.getInt32LE(buffer, index);
-            if (objectSize <= 0 || objectSize > buffer.length - index)
+            if (objectSize < 5 || objectSize > buffer.length - index)
                 throw new BSONError('bad embedded document length in bson');
-            if (raw) {
+            if (raw || (currentFrame?.raw ?? false)) {
                 value = buffer.subarray(index, index + objectSize);
+                index = index + objectSize;
             }
             else {
-                let objectOptions = options;
-                if (!globalUTFValidation) {
-                    objectOptions = { ...options, validation: { utf8: shouldValidateKey } };
-                }
-                value = deserializeObject(buffer, _index, objectOptions, false);
+                isDeferredValue = true;
+                const objectFrame = {
+                    holdingDocument: {},
+                    elementType: BSON_DATA_OBJECT,
+                    propertyName: name,
+                    functionString: null,
+                    lastIndex: index + objectSize,
+                    isArray: false,
+                    arrayIndex: 0,
+                    raw: false,
+                    isPossibleDBRef: null,
+                    validationSetting: shouldValidateKey,
+                    prev: currentFrame
+                };
+                currentFrame = objectFrame;
+                currentDest = objectFrame.holdingDocument;
+                currentIsArray = false;
+                index = index + 4;
             }
-            index = index + objectSize;
         }
         else if (elementType === BSON_DATA_ARRAY) {
-            const _index = index;
             const objectSize = NumberUtils.getInt32LE(buffer, index);
-            let arrayOptions = options;
+            if (objectSize < 5 || objectSize > buffer.length - index)
+                throw new BSONError('bad embedded array length in bson');
             const stopIndex = index + objectSize;
-            if (fieldsAsRaw && fieldsAsRaw[name]) {
-                arrayOptions = { ...options, raw: true };
-            }
-            if (!globalUTFValidation) {
-                arrayOptions = { ...arrayOptions, validation: { utf8: shouldValidateKey } };
-            }
-            value = deserializeObject(buffer, _index, arrayOptions, true);
-            index = index + objectSize;
-            if (buffer[index - 1] !== 0)
-                throw new BSONError('invalid array terminator byte');
-            if (index !== stopIndex)
-                throw new BSONError('corrupted array bson');
+            const arrayRaw = !!(fieldsAsRaw && fieldsAsRaw[name]) || (currentFrame?.raw ?? false);
+            isDeferredValue = true;
+            const arrayFrame = {
+                holdingDocument: [],
+                elementType: BSON_DATA_ARRAY,
+                propertyName: name,
+                functionString: null,
+                lastIndex: stopIndex,
+                isArray: true,
+                arrayIndex: 0,
+                raw: arrayRaw,
+                isPossibleDBRef: false,
+                validationSetting: shouldValidateKey,
+                prev: currentFrame
+            };
+            currentFrame = arrayFrame;
+            currentDest = arrayFrame.holdingDocument;
+            currentIsArray = true;
+            index = index + 4;
         }
         else if (elementType === BSON_DATA_UNDEFINED) {
             value = undefined;
@@ -62647,15 +63547,32 @@ function deserializeObject(buffer, index, options, isArray = false) {
             index = index + stringSize;
             const _index = index;
             const objectSize = NumberUtils.getInt32LE(buffer, index);
-            const scopeObject = deserializeObject(buffer, _index, options, false);
-            index = index + objectSize;
+            if (objectSize < 5 || objectSize > buffer.length - index)
+                throw new BSONError('bad scope document size in code_w_scope');
             if (totalSize < 4 + 4 + objectSize + stringSize) {
                 throw new BSONError('code_w_scope total size is too short, truncating scope');
             }
             if (totalSize > 4 + 4 + objectSize + stringSize) {
                 throw new BSONError('code_w_scope total size is too long, clips outer document');
             }
-            value = new Code(functionString, scopeObject);
+            isDeferredValue = true;
+            const scopeFrame = {
+                holdingDocument: {},
+                elementType: BSON_DATA_CODE_W_SCOPE,
+                propertyName: name,
+                functionString: functionString,
+                lastIndex: _index + objectSize,
+                isArray: false,
+                arrayIndex: 0,
+                raw: false,
+                isPossibleDBRef: null,
+                validationSetting: shouldValidateKey,
+                prev: currentFrame
+            };
+            currentFrame = scopeFrame;
+            currentDest = scopeFrame.holdingDocument;
+            currentIsArray = false;
+            index = index + 4;
         }
         else if (elementType === BSON_DATA_DBPOINTER) {
             const stringSize = NumberUtils.getInt32LE(buffer, index);
@@ -62676,18 +63593,14 @@ function deserializeObject(buffer, index, options, isArray = false) {
         else {
             throw new BSONError(`Detected unknown BSON type ${elementType.toString(16)} for fieldname "${name}"`);
         }
-        if (name === '__proto__') {
-            Object.defineProperty(object, name, {
-                value,
-                writable: true,
-                enumerable: true,
-                configurable: true
-            });
-        }
-        else {
-            object[name] = value;
+        if (!isDeferredValue) {
+            assignValue(currentDest, name, value);
         }
     }
+    if (currentFrame !== null) {
+        throw new BSONError('corrupted bson, more objects expected based on the current document size');
+    }
+    const object = rootObject;
     if (size !== index - startIndex) {
         if (isArray)
             throw new BSONError('corrupt array bson');
@@ -62695,14 +63608,7 @@ function deserializeObject(buffer, index, options, isArray = false) {
     }
     if (!isPossibleDBRef)
         return object;
-    if (isDBRefLike(object)) {
-        const copy = Object.assign({}, object);
-        delete copy.$ref;
-        delete copy.$id;
-        delete copy.$db;
-        return new DBRef(object.$ref, object.$id, object.$db, copy);
-    }
-    return object;
+    return toPotentialDbRef(object);
 }
 
 const regexp = /\x00/;
@@ -62811,7 +63717,7 @@ function serializeMinMax(buffer, key, value, index) {
     if (value === null) {
         buffer[index++] = BSON_DATA_NULL;
     }
-    else if (value._bsontype === 'MinKey') {
+    else if (value[bsonType] === 'MinKey') {
         buffer[index++] = BSON_DATA_MIN_KEY;
     }
     else {
@@ -62848,19 +63754,6 @@ function serializeBuffer(buffer, key, value, index) {
     index = index + size;
     return index;
 }
-function serializeObject(buffer, key, value, index, checkKeys, depth, serializeFunctions, ignoreUndefined, path) {
-    if (path.has(value)) {
-        throw new BSONError('Cannot convert circular structure to BSON');
-    }
-    path.add(value);
-    buffer[index++] = Array.isArray(value) ? BSON_DATA_ARRAY : BSON_DATA_OBJECT;
-    const numberOfWrittenBytes = ByteUtils.encodeUTF8Into(buffer, key, index);
-    index = index + numberOfWrittenBytes;
-    buffer[index++] = 0;
-    const endIndex = serializeInto(buffer, value, checkKeys, index, depth + 1, serializeFunctions, ignoreUndefined, path);
-    path.delete(value);
-    return endIndex;
-}
 function serializeDecimal128(buffer, key, value, index) {
     buffer[index++] = BSON_DATA_DECIMAL128;
     const numberOfWrittenBytes = ByteUtils.encodeUTF8Into(buffer, key, index);
@@ -62872,7 +63765,7 @@ function serializeDecimal128(buffer, key, value, index) {
 }
 function serializeLong(buffer, key, value, index) {
     buffer[index++] =
-        value._bsontype === 'Long' ? BSON_DATA_LONG : BSON_DATA_TIMESTAMP;
+        value[bsonType] === 'Long' ? BSON_DATA_LONG : BSON_DATA_TIMESTAMP;
     const numberOfWrittenBytes = ByteUtils.encodeUTF8Into(buffer, key, index);
     index = index + numberOfWrittenBytes;
     buffer[index++] = 0;
@@ -62911,38 +63804,6 @@ function serializeFunction(buffer, key, value, index) {
     buffer[index++] = 0;
     return index;
 }
-function serializeCode(buffer, key, value, index, checkKeys = false, depth = 0, serializeFunctions = false, ignoreUndefined = true, path) {
-    if (value.scope && typeof value.scope === 'object') {
-        buffer[index++] = BSON_DATA_CODE_W_SCOPE;
-        const numberOfWrittenBytes = ByteUtils.encodeUTF8Into(buffer, key, index);
-        index = index + numberOfWrittenBytes;
-        buffer[index++] = 0;
-        let startIndex = index;
-        const functionString = value.code;
-        index = index + 4;
-        const codeSize = ByteUtils.encodeUTF8Into(buffer, functionString, index + 4) + 1;
-        NumberUtils.setInt32LE(buffer, index, codeSize);
-        buffer[index + 4 + codeSize - 1] = 0;
-        index = index + codeSize + 4;
-        const endIndex = serializeInto(buffer, value.scope, checkKeys, index, depth + 1, serializeFunctions, ignoreUndefined, path);
-        index = endIndex - 1;
-        const totalSize = endIndex - startIndex;
-        startIndex += NumberUtils.setInt32LE(buffer, startIndex, totalSize);
-        buffer[index++] = 0;
-    }
-    else {
-        buffer[index++] = BSON_DATA_CODE;
-        const numberOfWrittenBytes = ByteUtils.encodeUTF8Into(buffer, key, index);
-        index = index + numberOfWrittenBytes;
-        buffer[index++] = 0;
-        const functionString = value.code.toString();
-        const size = ByteUtils.encodeUTF8Into(buffer, functionString, index + 4) + 1;
-        NumberUtils.setInt32LE(buffer, index, size);
-        index = index + 4 + size - 1;
-        buffer[index++] = 0;
-    }
-    return index;
-}
 function serializeBinary(buffer, key, value, index) {
     buffer[index++] = BSON_DATA_BINARY;
     const numberOfWrittenBytes = ByteUtils.encodeUTF8Into(buffer, key, index);
@@ -62982,26 +63843,59 @@ function serializeSymbol(buffer, key, value, index) {
     buffer[index++] = 0;
     return index;
 }
-function serializeDBRef(buffer, key, value, index, depth, serializeFunctions, path) {
-    buffer[index++] = BSON_DATA_OBJECT;
-    const numberOfWrittenBytes = ByteUtils.encodeUTF8Into(buffer, key, index);
-    index = index + numberOfWrittenBytes;
-    buffer[index++] = 0;
-    let startIndex = index;
-    let output = {
-        $ref: value.collection || value.namespace,
-        $id: value.oid
-    };
-    if (value.db != null) {
-        output.$db = value.db;
+function makeFrame(sourceObject, objectSizeIndex, codeSizeIndex, prev, checkKeys, ignoreUndefined) {
+    if (Array.isArray(sourceObject)) {
+        return {
+            sourceObject,
+            isArray: true,
+            objectSizeIndex,
+            codeSizeIndex,
+            iterTarget: sourceObject,
+            keys: null,
+            keyIndex: 0,
+            mapIterator: null,
+            prev,
+            checkKeys,
+            ignoreUndefined
+        };
     }
-    output = Object.assign(output, value.fields);
-    const endIndex = serializeInto(buffer, output, false, index, depth + 1, serializeFunctions, true, path);
-    const size = endIndex - startIndex;
-    startIndex += NumberUtils.setInt32LE(buffer, index, size);
-    return endIndex;
-}
-function serializeInto(buffer, object, checkKeys, startingIndex, depth, serializeFunctions, ignoreUndefined, path) {
+    if (sourceObject instanceof Map || isMap(sourceObject)) {
+        return {
+            sourceObject,
+            isArray: false,
+            objectSizeIndex,
+            codeSizeIndex,
+            iterTarget: sourceObject,
+            keys: null,
+            keyIndex: 0,
+            mapIterator: sourceObject.entries(),
+            prev,
+            checkKeys,
+            ignoreUndefined
+        };
+    }
+    let target = sourceObject;
+    if (typeof target?.toBSON === 'function') {
+        target = target.toBSON();
+        if (target != null && typeof target !== 'object') {
+            throw new BSONError('toBSON function did not return an object');
+        }
+    }
+    return {
+        sourceObject,
+        isArray: false,
+        objectSizeIndex,
+        codeSizeIndex,
+        iterTarget: target,
+        keys: Object.keys(target),
+        keyIndex: 0,
+        mapIterator: null,
+        prev,
+        checkKeys,
+        ignoreUndefined
+    };
+}
+function serializeInto(buffer, object, checkKeys, startingIndex, serializeFunctions, ignoreUndefined, path) {
     if (path == null) {
         if (object == null) {
             buffer[0] = 0x05;
@@ -63029,308 +63923,200 @@ function serializeInto(buffer, object, checkKeys, startingIndex, depth, serializ
         path = new Set();
     }
     path.add(object);
+    let currentFrame = makeFrame(object, startingIndex, null, null, checkKeys, ignoreUndefined);
     let index = startingIndex + 4;
-    if (Array.isArray(object)) {
-        for (let i = 0; i < object.length; i++) {
-            const key = `${i}`;
-            let value = object[i];
-            if (typeof value?.toBSON === 'function') {
-                value = value.toBSON();
-            }
-            const type = typeof value;
-            if (value === undefined) {
-                index = serializeNull(buffer, key, value, index);
-            }
-            else if (value === null) {
-                index = serializeNull(buffer, key, value, index);
-            }
-            else if (type === 'string') {
-                index = serializeString(buffer, key, value, index);
-            }
-            else if (type === 'number') {
-                index = serializeNumber(buffer, key, value, index);
-            }
-            else if (type === 'bigint') {
-                index = serializeBigInt(buffer, key, value, index);
-            }
-            else if (type === 'boolean') {
-                index = serializeBoolean(buffer, key, value, index);
-            }
-            else if (type === 'object' && value._bsontype == null) {
-                if (value instanceof Date || isDate(value)) {
-                    index = serializeDate(buffer, key, value, index);
-                }
-                else if (value instanceof Uint8Array || isUint8Array(value)) {
-                    index = serializeBuffer(buffer, key, value, index);
-                }
-                else if (value instanceof RegExp || isRegExp(value)) {
-                    index = serializeRegExp(buffer, key, value, index);
-                }
-                else {
-                    index = serializeObject(buffer, key, value, index, checkKeys, depth, serializeFunctions, ignoreUndefined, path);
+    while (currentFrame !== null) {
+        const frame = currentFrame;
+        let key;
+        let value;
+        if (frame.mapIterator !== null) {
+            const next = frame.mapIterator.next();
+            if (next.done) {
+                buffer[index++] = 0x00;
+                NumberUtils.setInt32LE(buffer, frame.objectSizeIndex, index - frame.objectSizeIndex);
+                if (frame.codeSizeIndex !== null) {
+                    NumberUtils.setInt32LE(buffer, frame.codeSizeIndex, index - frame.codeSizeIndex);
                 }
+                path.delete(frame.sourceObject);
+                currentFrame = frame.prev;
+                continue;
             }
-            else if (type === 'object') {
-                if (value[BSON_VERSION_SYMBOL] !== BSON_MAJOR_VERSION) {
-                    throw new BSONVersionError();
-                }
-                else if (value._bsontype === 'ObjectId') {
-                    index = serializeObjectId(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Decimal128') {
-                    index = serializeDecimal128(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Long' || value._bsontype === 'Timestamp') {
-                    index = serializeLong(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Double') {
-                    index = serializeDouble(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Code') {
-                    index = serializeCode(buffer, key, value, index, checkKeys, depth, serializeFunctions, ignoreUndefined, path);
-                }
-                else if (value._bsontype === 'Binary') {
-                    index = serializeBinary(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'BSONSymbol') {
-                    index = serializeSymbol(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'DBRef') {
-                    index = serializeDBRef(buffer, key, value, index, depth, serializeFunctions, path);
-                }
-                else if (value._bsontype === 'BSONRegExp') {
-                    index = serializeBSONRegExp(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Int32') {
-                    index = serializeInt32(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'MinKey' || value._bsontype === 'MaxKey') {
-                    index = serializeMinMax(buffer, key, value, index);
-                }
-                else if (typeof value._bsontype !== 'undefined') {
-                    throw new BSONError(`Unrecognized or invalid _bsontype: ${String(value._bsontype)}`);
+            key = next.value[0];
+            value = next.value[1];
+        }
+        else if (frame.keys !== null) {
+            if (frame.keyIndex >= frame.keys.length) {
+                buffer[index++] = 0x00;
+                NumberUtils.setInt32LE(buffer, frame.objectSizeIndex, index - frame.objectSizeIndex);
+                if (frame.codeSizeIndex !== null) {
+                    NumberUtils.setInt32LE(buffer, frame.codeSizeIndex, index - frame.codeSizeIndex);
                 }
+                path.delete(frame.sourceObject);
+                currentFrame = frame.prev;
+                continue;
             }
-            else if (type === 'function' && serializeFunctions) {
-                index = serializeFunction(buffer, key, value, index);
-            }
+            key = frame.keys[frame.keyIndex++];
+            value = frame.iterTarget[key];
         }
-    }
-    else if (object instanceof Map || isMap(object)) {
-        const iterator = object.entries();
-        let done = false;
-        while (!done) {
-            const entry = iterator.next();
-            done = !!entry.done;
-            if (done)
-                continue;
-            const key = entry.value ? entry.value[0] : undefined;
-            let value = entry.value ? entry.value[1] : undefined;
-            if (typeof value?.toBSON === 'function') {
-                value = value.toBSON();
-            }
-            const type = typeof value;
-            if (typeof key === 'string' && !ignoreKeys.has(key)) {
-                if (key.match(regexp) != null) {
-                    throw new BSONError('key ' + key + ' must not contain null bytes');
-                }
-                if (checkKeys) {
-                    if ('$' === key[0]) {
-                        throw new BSONError('key ' + key + " must not start with '$'");
-                    }
-                    else if (key.includes('.')) {
-                        throw new BSONError('key ' + key + " must not contain '.'");
-                    }
+        else {
+            const arr = frame.iterTarget;
+            if (frame.keyIndex >= arr.length) {
+                buffer[index++] = 0x00;
+                NumberUtils.setInt32LE(buffer, frame.objectSizeIndex, index - frame.objectSizeIndex);
+                if (frame.codeSizeIndex !== null) {
+                    NumberUtils.setInt32LE(buffer, frame.codeSizeIndex, index - frame.codeSizeIndex);
                 }
+                path.delete(frame.sourceObject);
+                currentFrame = frame.prev;
+                continue;
             }
-            if (value === undefined) {
-                if (ignoreUndefined === false)
-                    index = serializeNull(buffer, key, value, index);
-            }
-            else if (value === null) {
-                index = serializeNull(buffer, key, value, index);
+            const i = frame.keyIndex++;
+            key = String(i);
+            value = arr[i];
+        }
+        if (typeof value?.toBSON === 'function') {
+            value = value.toBSON();
+        }
+        if (!frame.isArray && typeof key === 'string' && !(key[0] === '$' && ignoreKeys.has(key))) {
+            if (regexp.test(key)) {
+                throw new BSONError('key ' + key + ' must not contain null bytes');
             }
-            else if (type === 'string') {
-                index = serializeString(buffer, key, value, index);
+            if (frame.checkKeys) {
+                if ('$' === key[0]) {
+                    throw new BSONError('key ' + key + " must not start with '$'");
+                }
+                else if (key.includes('.')) {
+                    throw new BSONError('key ' + key + " must not contain '.'");
+                }
             }
-            else if (type === 'number') {
-                index = serializeNumber(buffer, key, value, index);
+        }
+        const type = typeof value;
+        if (value === undefined) {
+            if (frame.isArray || frame.ignoreUndefined === false) {
+                index = serializeNull(buffer, key, value, index);
             }
-            else if (type === 'bigint') {
-                index = serializeBigInt(buffer, key, value, index);
+        }
+        else if (value === null) {
+            index = serializeNull(buffer, key, value, index);
+        }
+        else if (type === 'string') {
+            index = serializeString(buffer, key, value, index);
+        }
+        else if (type === 'number') {
+            index = serializeNumber(buffer, key, value, index);
+        }
+        else if (type === 'bigint') {
+            index = serializeBigInt(buffer, key, value, index);
+        }
+        else if (type === 'boolean') {
+            index = serializeBoolean(buffer, key, value, index);
+        }
+        else if (type === 'object' && value._bsontype == null) {
+            if (value instanceof Date || isDate(value)) {
+                index = serializeDate(buffer, key, value, index);
             }
-            else if (type === 'boolean') {
-                index = serializeBoolean(buffer, key, value, index);
+            else if (value instanceof Uint8Array || isUint8Array(value)) {
+                index = serializeBuffer(buffer, key, value, index);
             }
-            else if (type === 'object' && value._bsontype == null) {
-                if (value instanceof Date || isDate(value)) {
-                    index = serializeDate(buffer, key, value, index);
-                }
-                else if (value instanceof Uint8Array || isUint8Array(value)) {
-                    index = serializeBuffer(buffer, key, value, index);
-                }
-                else if (value instanceof RegExp || isRegExp(value)) {
-                    index = serializeRegExp(buffer, key, value, index);
-                }
-                else {
-                    index = serializeObject(buffer, key, value, index, checkKeys, depth, serializeFunctions, ignoreUndefined, path);
-                }
+            else if (value instanceof RegExp || isRegExp(value)) {
+                index = serializeRegExp(buffer, key, value, index);
             }
-            else if (type === 'object') {
-                if (value[BSON_VERSION_SYMBOL] !== BSON_MAJOR_VERSION) {
-                    throw new BSONVersionError();
-                }
-                else if (value._bsontype === 'ObjectId') {
-                    index = serializeObjectId(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Decimal128') {
-                    index = serializeDecimal128(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Long' || value._bsontype === 'Timestamp') {
-                    index = serializeLong(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Double') {
-                    index = serializeDouble(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Code') {
-                    index = serializeCode(buffer, key, value, index, checkKeys, depth, serializeFunctions, ignoreUndefined, path);
-                }
-                else if (value._bsontype === 'Binary') {
-                    index = serializeBinary(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'BSONSymbol') {
-                    index = serializeSymbol(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'DBRef') {
-                    index = serializeDBRef(buffer, key, value, index, depth, serializeFunctions, path);
-                }
-                else if (value._bsontype === 'BSONRegExp') {
-                    index = serializeBSONRegExp(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Int32') {
-                    index = serializeInt32(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'MinKey' || value._bsontype === 'MaxKey') {
-                    index = serializeMinMax(buffer, key, value, index);
-                }
-                else if (typeof value._bsontype !== 'undefined') {
-                    throw new BSONError(`Unrecognized or invalid _bsontype: ${String(value._bsontype)}`);
+            else {
+                if (path.has(value)) {
+                    throw new BSONError('Cannot convert circular structure to BSON');
                 }
-            }
-            else if (type === 'function' && serializeFunctions) {
-                index = serializeFunction(buffer, key, value, index);
-            }
-        }
-    }
-    else {
-        if (typeof object?.toBSON === 'function') {
-            object = object.toBSON();
-            if (object != null && typeof object !== 'object') {
-                throw new BSONError('toBSON function did not return an object');
+                const nestedIsArray = Array.isArray(value);
+                buffer[index++] = nestedIsArray ? BSON_DATA_ARRAY : BSON_DATA_OBJECT;
+                index += ByteUtils.encodeUTF8Into(buffer, key, index);
+                buffer[index++] = 0x00;
+                const nestedStartIndex = index;
+                path.add(value);
+                currentFrame = makeFrame(value, nestedStartIndex, null, frame, frame.checkKeys, frame.ignoreUndefined);
+                index += 4;
             }
         }
-        for (const key of Object.keys(object)) {
-            let value = object[key];
-            if (typeof value?.toBSON === 'function') {
-                value = value.toBSON();
+        else if (type === 'object') {
+            if (value[BSON_VERSION_SYMBOL] !== BSON_MAJOR_VERSION) {
+                throw new BSONVersionError();
             }
-            const type = typeof value;
-            if (typeof key === 'string' && !ignoreKeys.has(key)) {
-                if (key.match(regexp) != null) {
-                    throw new BSONError('key ' + key + ' must not contain null bytes');
-                }
-                if (checkKeys) {
-                    if ('$' === key[0]) {
-                        throw new BSONError('key ' + key + " must not start with '$'");
-                    }
-                    else if (key.includes('.')) {
-                        throw new BSONError('key ' + key + " must not contain '.'");
+            const tag = value[bsonType];
+            if (tag === 'ObjectId') {
+                index = serializeObjectId(buffer, key, value, index);
+            }
+            else if (tag === 'Decimal128') {
+                index = serializeDecimal128(buffer, key, value, index);
+            }
+            else if (tag === 'Long' || tag === 'Timestamp') {
+                index = serializeLong(buffer, key, value, index);
+            }
+            else if (tag === 'Double') {
+                index = serializeDouble(buffer, key, value, index);
+            }
+            else if (tag === 'Code') {
+                const codeValue = value;
+                if (codeValue.scope && typeof codeValue.scope === 'object') {
+                    buffer[index++] = BSON_DATA_CODE_W_SCOPE;
+                    index += ByteUtils.encodeUTF8Into(buffer, key, index);
+                    buffer[index++] = 0x00;
+                    const codeTotalSizeIndex = index;
+                    index += 4;
+                    const functionString = codeValue.code;
+                    const codeSize = ByteUtils.encodeUTF8Into(buffer, functionString, index + 4) + 1;
+                    NumberUtils.setInt32LE(buffer, index, codeSize);
+                    buffer[index + 4 + codeSize - 1] = 0;
+                    index = index + codeSize + 4;
+                    const scope = codeValue.scope;
+                    if (path.has(scope)) {
+                        throw new BSONError('Cannot convert circular structure to BSON');
                     }
+                    path.add(scope);
+                    currentFrame = makeFrame(scope, index, codeTotalSizeIndex, frame, frame.checkKeys, frame.ignoreUndefined);
+                    index += 4;
+                }
+                else {
+                    buffer[index++] = BSON_DATA_CODE;
+                    index += ByteUtils.encodeUTF8Into(buffer, key, index);
+                    buffer[index++] = 0x00;
+                    const functionString = codeValue.code.toString();
+                    const size = ByteUtils.encodeUTF8Into(buffer, functionString, index + 4) + 1;
+                    NumberUtils.setInt32LE(buffer, index, size);
+                    index = index + 4 + size - 1;
+                    buffer[index++] = 0;
                 }
             }
-            if (value === undefined) {
-                if (ignoreUndefined === false)
-                    index = serializeNull(buffer, key, value, index);
-            }
-            else if (value === null) {
-                index = serializeNull(buffer, key, value, index);
-            }
-            else if (type === 'string') {
-                index = serializeString(buffer, key, value, index);
+            else if (tag === 'Binary') {
+                index = serializeBinary(buffer, key, value, index);
             }
-            else if (type === 'number') {
-                index = serializeNumber(buffer, key, value, index);
+            else if (tag === 'BSONSymbol') {
+                index = serializeSymbol(buffer, key, value, index);
             }
-            else if (type === 'bigint') {
-                index = serializeBigInt(buffer, key, value, index);
+            else if (tag === 'DBRef') {
+                const dbref = value;
+                const orderedValues = Object.assign({ $ref: dbref.collection, $id: dbref.oid }, dbref.db != null ? { $db: dbref.db } : null, dbref.fields);
+                buffer[index++] = BSON_DATA_OBJECT;
+                index += ByteUtils.encodeUTF8Into(buffer, key, index);
+                buffer[index++] = 0x00;
+                path.add(orderedValues);
+                currentFrame = makeFrame(orderedValues, index, null, frame, false, true);
+                index += 4;
             }
-            else if (type === 'boolean') {
-                index = serializeBoolean(buffer, key, value, index);
+            else if (tag === 'BSONRegExp') {
+                index = serializeBSONRegExp(buffer, key, value, index);
             }
-            else if (type === 'object' && value._bsontype == null) {
-                if (value instanceof Date || isDate(value)) {
-                    index = serializeDate(buffer, key, value, index);
-                }
-                else if (value instanceof Uint8Array || isUint8Array(value)) {
-                    index = serializeBuffer(buffer, key, value, index);
-                }
-                else if (value instanceof RegExp || isRegExp(value)) {
-                    index = serializeRegExp(buffer, key, value, index);
-                }
-                else {
-                    index = serializeObject(buffer, key, value, index, checkKeys, depth, serializeFunctions, ignoreUndefined, path);
-                }
+            else if (tag === 'Int32') {
+                index = serializeInt32(buffer, key, value, index);
             }
-            else if (type === 'object') {
-                if (value[BSON_VERSION_SYMBOL] !== BSON_MAJOR_VERSION) {
-                    throw new BSONVersionError();
-                }
-                else if (value._bsontype === 'ObjectId') {
-                    index = serializeObjectId(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Decimal128') {
-                    index = serializeDecimal128(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Long' || value._bsontype === 'Timestamp') {
-                    index = serializeLong(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Double') {
-                    index = serializeDouble(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Code') {
-                    index = serializeCode(buffer, key, value, index, checkKeys, depth, serializeFunctions, ignoreUndefined, path);
-                }
-                else if (value._bsontype === 'Binary') {
-                    index = serializeBinary(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'BSONSymbol') {
-                    index = serializeSymbol(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'DBRef') {
-                    index = serializeDBRef(buffer, key, value, index, depth, serializeFunctions, path);
-                }
-                else if (value._bsontype === 'BSONRegExp') {
-                    index = serializeBSONRegExp(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'Int32') {
-                    index = serializeInt32(buffer, key, value, index);
-                }
-                else if (value._bsontype === 'MinKey' || value._bsontype === 'MaxKey') {
-                    index = serializeMinMax(buffer, key, value, index);
-                }
-                else if (typeof value._bsontype !== 'undefined') {
-                    throw new BSONError(`Unrecognized or invalid _bsontype: ${String(value._bsontype)}`);
-                }
+            else if (tag === 'MinKey' || tag === 'MaxKey') {
+                index = serializeMinMax(buffer, key, value, index);
             }
-            else if (type === 'function' && serializeFunctions) {
-                index = serializeFunction(buffer, key, value, index);
+            else if (typeof value._bsontype !== 'undefined') {
+                throw new BSONError(`Unrecognized or invalid _bsontype: ${String(value._bsontype)}`);
             }
         }
+        else if (type === 'function' && serializeFunctions) {
+            index = serializeFunction(buffer, key, value, index);
+        }
     }
-    path.delete(object);
-    buffer[index++] = 0x00;
-    const size = index - startingIndex;
-    startingIndex += NumberUtils.setInt32LE(buffer, startingIndex, size);
     return index;
 }
 
@@ -63613,21 +64399,22 @@ function parse(text, options) {
         return deserializeValue(value, ejsonOptions);
     });
 }
-function stringify(value, replacer, space, options) {
-    if (space != null && typeof space === 'object') {
-        options = space;
-        space = 0;
+function stringify(value, replacerOrOptions, spaceOrOptions, options) {
+    if (spaceOrOptions != null && typeof spaceOrOptions === 'object') {
+        options = spaceOrOptions;
+        spaceOrOptions = undefined;
     }
-    if (replacer != null && typeof replacer === 'object' && !Array.isArray(replacer)) {
-        options = replacer;
-        replacer = undefined;
-        space = 0;
+    if (replacerOrOptions != null &&
+        typeof replacerOrOptions === 'object' &&
+        !Array.isArray(replacerOrOptions)) {
+        options = replacerOrOptions;
+        replacerOrOptions = undefined;
     }
     const serializeOptions = Object.assign({ relaxed: true, legacy: false }, options, {
         seenObjects: [{ propertyName: '(root)', obj: null }]
     });
     const doc = serializeValue(value, serializeOptions);
-    return JSON.stringify(doc, replacer, space);
+    return JSON.stringify(doc, replacerOrOptions, spaceOrOptions);
 }
 function EJSONserialize(value, options) {
     options = options || {};
@@ -63789,7 +64576,7 @@ function serialize(object, options = {}) {
     if (buffer.length < minInternalBufferSize) {
         buffer = ByteUtils.allocate(minInternalBufferSize);
     }
-    const serializationIndex = serializeInto(buffer, object, checkKeys, 0, 0, serializeFunctions, ignoreUndefined, null);
+    const serializationIndex = serializeInto(buffer, object, checkKeys, 0, serializeFunctions, ignoreUndefined, null);
     const finishedBuffer = ByteUtils.allocateUnsafe(serializationIndex);
     finishedBuffer.set(buffer.subarray(0, serializationIndex), 0);
     return finishedBuffer;
@@ -63799,7 +64586,7 @@ function serializeWithBufferAndIndex(object, finalBuffer, options = {}) {
     const serializeFunctions = typeof options.serializeFunctions === 'boolean' ? options.serializeFunctions : false;
     const ignoreUndefined = typeof options.ignoreUndefined === 'boolean' ? options.ignoreUndefined : true;
     const startIndex = typeof options.index === 'number' ? options.index : 0;
-    const serializationIndex = serializeInto(buffer, object, checkKeys, 0, 0, serializeFunctions, ignoreUndefined, null);
+    const serializationIndex = serializeInto(buffer, object, checkKeys, 0, serializeFunctions, ignoreUndefined, null);
     finalBuffer.set(buffer.subarray(0, serializationIndex), startIndex);
     return startIndex + serializationIndex - 1;
 }
@@ -64975,7 +65762,7 @@ var src_default = VueToastificationPlugin;
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.5.7","description":"AI-Powered Data Workspace for MongoDB: Turn your MongoDB data into dashboards, maps, and interactive workflows - powered by your Mongoose models and AI.","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","ace-builds":"^1.43.6","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","mpath":"^0.9.0","node-inspect-extracted":"3.x","regexp.escape":"^2.0.1","tailwindcss":"3.4.0","time-commando":"1.0.1","typescript":"^6.0.2","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x","xss":"^1.0.15"},"peerDependencies":{"@nestjs/common":"10.x || 11.x","mongoose":"7.x || 8.x || ^9.0.0"},"peerDependenciesMeta":{"@nestjs/common":{"optional":true}},"optionalPeerDependencies":{"@mongoosejs/task":"0.5.x || 0.6.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","@nestjs/common":"^11.1.9","express":"4.x","mocha":"10.2.0","mongodb-memory-server":"^11.0.1","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","seed":"node seed/index.js","start":"node ./local.js","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","eval:agent":"node eval/agent/run.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.5.9","description":"AI-Powered Data Workspace for MongoDB: Turn your MongoDB data into dashboards, maps, and interactive workflows - powered by your Mongoose models and AI.","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","ace-builds":"^1.43.6","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","mpath":"^0.9.0","node-inspect-extracted":"3.x","regexp.escape":"^2.0.1","tailwindcss":"3.4.0","time-commando":"1.0.1","typescript":"^6.0.2","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x","xss":"^1.0.15"},"peerDependencies":{"@nestjs/common":"10.x || 11.x","mongoose":"7.x || 8.x || ^9.0.0"},"peerDependenciesMeta":{"@nestjs/common":{"optional":true}},"optionalPeerDependencies":{"@mongoosejs/task":"0.5.x || 0.6.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","@nestjs/common":"^11.1.9","express":"4.x","mocha":"10.2.0","mongodb-memory-server":"^11.0.1","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","seed":"node seed/index.js","start":"node ./local.js","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","eval:agent":"node eval/agent/run.js"}}');
 
 /***/ }