@mongoosejs/studio 0.5.7 → 0.5.8

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;
@@ -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('}')) {
@@ -12379,6 +13113,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 +13157,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 +53595,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 +53789,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 +53800,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 +53811,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 +53833,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 +53877,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 +53888,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 +53943,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 +54185,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";
 
 /***/ },
 
@@ -64975,7 +65725,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.8","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"}}');
 
 /***/ }