@mongoosejs/studio 0.5.6 → 0.5.8

package/frontend/public/tw.css

@@ -654,6 +654,11 @@ video {
   inset: 0px;
 }
 
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -779,6 +784,10 @@ video {
   z-index: 50;
 }
 
+.z-\[10000\] {
+  z-index: 10000;
+}
+
 .z-\[10001\] {
   z-index: 10001;
 }
@@ -1025,6 +1034,10 @@ video {
   display: none;
 }
 
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
 .size-12 {
   width: 3rem;
   height: 3rem;
@@ -1112,6 +1125,10 @@ video {
   height: 2rem;
 }
 
+.h-9 {
+  height: 2.25rem;
+}
+
 .h-\[1\.25em\] {
   height: 1.25em;
 }
@@ -1232,10 +1249,18 @@ video {
   width: 2.5rem;
 }
 
+.w-11 {
+  width: 2.75rem;
+}
+
 .w-12 {
   width: 3rem;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -1304,6 +1329,10 @@ video {
   width: 16rem;
 }
 
+.w-7 {
+  width: 1.75rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -1320,6 +1349,10 @@ video {
   width: 40%;
 }
 
+.w-\[400px\] {
+  width: 400px;
+}
+
 .w-\[60\%\] {
   width: 60%;
 }
@@ -1392,6 +1425,18 @@ video {
   max-width: 280px;
 }
 
+.max-w-\[400px\] {
+  max-width: 400px;
+}
+
+.max-w-\[420px\] {
+  max-width: 420px;
+}
+
+.max-w-\[calc\(100vw-2rem\)\] {
+  max-width: calc(100vw - 2rem);
+}
+
 .max-w-\[calc\(100vw-4rem\)\] {
   max-width: calc(100vw - 4rem);
 }
@@ -1563,6 +1608,18 @@ video {
   resize: vertical;
 }
 
+.snap-y {
+  scroll-snap-type: y var(--tw-scroll-snap-strictness);
+}
+
+.snap-mandatory {
+  --tw-scroll-snap-strictness: mandatory;
+}
+
+.snap-center {
+  scroll-snap-align: center;
+}
+
 .list-disc {
   list-style-type: disc;
 }
@@ -1581,6 +1638,10 @@ video {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
 .grid-cols-\[1fr_auto_1fr\] {
   grid-template-columns: 1fr auto 1fr;
 }
@@ -1665,6 +1726,10 @@ video {
   gap: 2rem;
 }
 
+.gap-px {
+  gap: 1px;
+}
+
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -1782,6 +1847,10 @@ video {
   overflow-y: auto;
 }
 
+.overscroll-y-contain {
+  overscroll-behavior-y: contain;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1886,6 +1955,11 @@ video {
   border-width: 2px;
 }
 
+.border-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -2144,6 +2218,11 @@ video {
   background-color: rgb(176 32 43 / var(--tw-bg-opacity));
 }
 
+.bg-merlot-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 30 43 / var(--tw-bg-opacity));
+}
+
 .bg-muted {
   background-color: var(--color-muted);
 }
@@ -2237,6 +2316,10 @@ video {
   background-color: var(--color-surface);
 }
 
+.bg-surface-hover {
+  background-color: var(--color-surface-hover);
+}
+
 .bg-teal-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 168 165 / var(--tw-bg-opacity));
@@ -2617,6 +2700,10 @@ video {
   font-size: 11px;
 }
 
+.text-\[9px\] {
+  font-size: 9px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -3124,6 +3211,11 @@ video {
   --tw-ring-color: rgb(22 163 74 / 0.2);
 }
 
+.ring-merlot-700 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(176 32 43 / var(--tw-ring-opacity));
+}
+
 .ring-red-400 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
@@ -3205,6 +3297,14 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.\[-ms-overflow-style\:none\] {
+  -ms-overflow-style: none;
+}
+
+.\[scrollbar-width\:none\] {
+  scrollbar-width: none;
+}
+
 .placeholder\:text-content-tertiary::-moz-placeholder {
   color: var(--color-content-tertiary);
 }
@@ -3398,6 +3498,11 @@ video {
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-merlot-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 30 43 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-muted:hover {
   background-color: var(--color-muted);
 }
@@ -3472,6 +3577,10 @@ video {
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-surface-hover:hover {
+  background-color: var(--color-surface-hover);
+}
+
 .hover\:bg-teal-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(0 208 201 / var(--tw-bg-opacity));
@@ -4145,4 +4254,8 @@ video {
 :is(:where(.dark) .dark\:text-gray-500) {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
+  display: none;
 }

package/frontend/src/_util/calendar.js

@@ -0,0 +1,155 @@
+'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
+};

package/frontend/src/_util/document-search-autocomplete.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const { dateToDatetimeLocal } = require('./calendar');
+
 const { Trie } = require('../models/trie');
 
 const QUERY_SELECTORS = [
@@ -49,7 +51,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)
@@ -61,13 +63,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]*)$/);
@@ -79,7 +81,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,\}\]:]*)$/);
@@ -91,19 +93,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)
@@ -113,14 +115,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) {
@@ -137,9 +139,9 @@ function getAutocompleteSuggestions(trie, searchText, cursorPos, schemaPaths) {
       }
     }
   }
-  
+
   let suggestions = Array.from(suggestionsSet);
-  
+
   // Preserve quotes if present
   if (leadingQuoteMatch) {
     const leadingQuote = leadingQuoteMatch[0];
@@ -150,14 +152,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) {
@@ -165,30 +167,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('\''));
@@ -202,27 +204,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