@mongoosejs/studio 0.1.16 → 0.1.17

package/frontend/public/tw.css

@@ -631,6 +631,14 @@ video {
   bottom: 0px;
 }
 
+.-left-2 {
+  left: -0.5rem;
+}
+
+.-left-3 {
+  left: -0.75rem;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -659,6 +667,10 @@ video {
   top: 0.25rem;
 }
 
+.top-1\/2 {
+  top: 50%;
+}
+
 .top-2 {
   top: 0.5rem;
 }
@@ -769,6 +781,10 @@ video {
   margin-bottom: 0.25rem;
 }
 
+.mb-1\.5 {
+  margin-bottom: 0.375rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -984,6 +1000,10 @@ video {
   max-height: 50vh;
 }
 
+.max-h-\[6\.5em\] {
+  max-height: 6.5em;
+}
+
 .min-h-0 {
   min-height: 0px;
 }
@@ -1072,6 +1092,10 @@ video {
   min-width: 140px;
 }
 
+.min-w-\[80px\] {
+  min-width: 80px;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -1080,6 +1104,10 @@ video {
   max-width: 64rem;
 }
 
+.max-w-\[30em\] {
+  max-width: 30em;
+}
+
 .max-w-\[calc\(100vw-3rem\)\] {
   max-width: calc(100vw - 3rem);
 }
@@ -1128,6 +1156,11 @@ video {
   transform-origin: top right;
 }
 
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1454,6 +1487,10 @@ video {
   border-bottom-width: 2px;
 }
 
+.border-l-\[3px\] {
+  border-left-width: 3px;
+}
+
 .border-r {
   border-right-width: 1px;
 }
@@ -1470,11 +1507,6 @@ video {
   border-style: none;
 }
 
-.border-amber-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 191 36 / var(--tw-border-opacity));
-}
-
 .border-blue-300 {
   --tw-border-opacity: 1;
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
@@ -1514,11 +1546,21 @@ video {
   border-color: rgb(63 83 255 / var(--tw-border-opacity));
 }
 
+.border-l-blue-500 {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
 .bg-amber-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity));
 }
 
+.bg-amber-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1644,11 +1686,6 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
-.bg-slate-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-}
-
 .bg-slate-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -1776,6 +1813,11 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -1890,6 +1932,10 @@ video {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2143,6 +2189,10 @@ video {
   opacity: 0.5;
 }
 
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .opacity-75 {
   opacity: 0.75;
 }
@@ -2206,11 +2256,6 @@ video {
   --tw-ring-inset: inset;
 }
 
-.ring-amber-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity));
-}
-
 .ring-black {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
@@ -2241,10 +2286,6 @@ video {
   --tw-ring-opacity: 0.05;
 }
 
-.ring-offset-1 {
-  --tw-ring-offset-width: 1px;
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2307,6 +2348,10 @@ video {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.last\:mb-0:last-child {
+  margin-bottom: 0px;
+}
+
 .focus-within\:ring-2:focus-within {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2322,6 +2367,16 @@ video {
   --tw-ring-color: rgb(0 168 165 / var(--tw-ring-opacity));
 }
 
+.hover\:-translate-y-0:hover {
+  --tw-translate-y: -0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:-translate-y-0\.5:hover {
+  --tw-translate-y: -0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:translate-x-0:hover {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2337,6 +2392,16 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.hover\:border-l-blue-600:hover {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(37 99 235 / var(--tw-border-opacity));
+}
+
+.hover\:bg-amber-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -2442,6 +2507,11 @@ video {
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-slate-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-slate-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -2502,6 +2572,16 @@ video {
   color: rgb(6 14 172 / var(--tw-text-opacity));
 }
 
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
+.hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:z-10:focus {
   z-index: 10;
 }

package/frontend/src/array-utils.js

@@ -0,0 +1,66 @@
+'use strict';
+
+const { inspect } = require('node-inspect-extracted');
+
+/**
+ * Format a value for display in array views
+ * @param {*} item - The item to format
+ * @returns {string} - Formatted string representation
+ */
+function formatValue(item) {
+  if (item == null) {
+    return 'null';
+  }
+  if (typeof item === 'object') {
+    return inspect(item, { maxArrayLength: 50 });
+  }
+  return String(item);
+}
+
+/**
+ * Check if an item is a plain object (not array, not null)
+ * @param {*} item - The item to check
+ * @returns {boolean} - True if item is a plain object
+ */
+function isObjectItem(item) {
+  return item != null && typeof item === 'object' && !Array.isArray(item) && item.constructor === Object;
+}
+
+/**
+ * Get the keys of an object item
+ * @param {*} item - The item to get keys from
+ * @returns {string[]} - Array of keys, or empty array if not an object
+ */
+function getItemKeys(item) {
+  if (!isObjectItem(item)) {
+    return [];
+  }
+  return Object.keys(item);
+}
+
+/**
+ * Format a specific value from an object item by key
+ * @param {*} item - The object item
+ * @param {string} key - The key to get the value for
+ * @returns {string} - Formatted string representation of the value
+ */
+function formatItemValue(item, key) {
+  const value = item[key];
+  if (value === null) {
+    return 'null';
+  }
+  if (value === undefined) {
+    return 'undefined';
+  }
+  if (typeof value === 'object') {
+    return inspect(value, { maxArrayLength: 50 });
+  }
+  return String(value);
+}
+
+module.exports = {
+  formatValue,
+  isObjectItem,
+  getItemKeys,
+  formatItemValue
+};

package/frontend/src/dashboard/dashboard.js

@@ -141,5 +141,5 @@ module.exports = app => app.component('dashboard', {
   },
   beforeDestroy() {
     document.removeEventListener('click', this.handleDocumentClick);
-  },
+  }
 });

package/frontend/src/detail-array/detail-array.html

@@ -1,3 +1,25 @@
-<div class="detail-array">
-  <pre><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
-</div>
+<div class="w-full">
+  <div v-if="!arrayValue || arrayValue.length === 0" class="text-gray-400 text-xs py-2 text-center">
+    Empty array
+  </div>
+
+  <div v-else class="mt-2">
+    <div
+      v-for="(item, index) in arrayValue"
+      :key="index"
+      :title="'Index: ' + index"
+      class="mb-1.5 last:mb-0 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600 hover:shadow-lg hover:-translate-y-0.5">
+      <div class="absolute -left-3 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600">{{ index >= 1000 ? '1k+' : index }}</div>
+      <div v-if="arrayUtils.isObjectItem(item)" class="flex flex-col gap-1 mt-1 px-2">
+        <div
+          v-for="key in arrayUtils.getItemKeys(item)"
+          :key="key"
+          class="flex items-start gap-2 text-xs font-mono">
+          <span class="font-semibold text-gray-600 flex-shrink-0 min-w-[80px]">{{ key }}:</span>
+          <span class="text-gray-800 break-words whitespace-pre-wrap flex-1">{{ arrayUtils.formatItemValue(item, key) }}</span>
+        </div>
+      </div>
+      <div v-else class="text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1">{{ arrayUtils.formatValue(item) }}</div>
+    </div>
+  </div>
+</div>

package/frontend/src/detail-array/detail-array.js

@@ -1,20 +1,36 @@
 'use strict';
 
 const template = require('./detail-array.html');
-const { inspect } = require('node-inspect-extracted');
 
 module.exports = app => app.component('detail-array', {
   template: template,
   props: ['value'],
-  computed: {
-    displayValue() {
+  data() {
+    return {
+      arrayValue: []
+    };
+  },
+  methods: {
+    initializeArray() {
       if (this.value == null) {
-        return this.value;
+        this.arrayValue = [];
+      } else if (Array.isArray(this.value)) {
+        this.arrayValue = this.value;
+      } else {
+        this.arrayValue = [];
       }
-      return inspect(this.value, { maxArrayLength: 50 });
     }
   },
   mounted() {
-    Prism.highlightElement(this.$refs.code);
+    this.initializeArray();
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.initializeArray();
+      },
+      deep: true,
+      immediate: true
+    }
   }
 });

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

@@ -52,9 +52,9 @@
 
   <!-- Fields View -->
   <div v-if="viewMode === 'fields'">
-    <!-- Schema Paths -->
+    <!-- Matched Schema Paths (shown first when searching) -->
     <div
-      v-for="path in filteredSchemaPaths"
+      v-for="path in matchedSchemaPaths"
       :key="path.path || path"
       class="value"
     >
@@ -64,25 +64,74 @@
         :schemaPaths="schemaPaths"
         :editting="editting"
         :changes="changes"
-        :highlight="isSchemaPathMatched(path)"
+        :highlight="true"
         :invalid="invalid"></document-property>
     </div>
 
-    <!-- Virtual Fields -->
+    <!-- Matched Virtual Fields (shown after matched schema paths when searching) -->
     <div
-      v-for="path in filteredVirtuals"
+      v-for="path in matchedVirtuals"
       :key="path.name"
-      class="border rounded-lg mb-2 transition-all duration-200 ease-in-out"
-      :class="[
-        isVirtualMatched(path)
-          ? 'border-amber-400 ring-2 ring-amber-200 ring-offset-1'
-          : 'border-gray-200'
-      ]"
+      class="border border-gray-200 rounded-lg mb-2 transition-all duration-200 ease-in-out mt-4"
     >
     <!-- Virtual Field Header (Always Visible) -->
     <div
       @click="toggleVirtualField(path.name)"
-      class="p-3 bg-slate-50 hover:bg-slate-100 cursor-pointer flex items-center justify-between border-b border-gray-200"
+      class="p-3 bg-amber-100 hover:bg-amber-200 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
+    >
+      <div class="flex items-center">
+        <svg
+          :class="isVirtualFieldCollapsed(path.name) ? 'rotate-0' : 'rotate-90'"
+          class="w-4 h-4 text-gray-500 mr-2 transition-transform duration-200"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+        </svg>
+        <span class="font-medium text-gray-900">{{path.name}}</span>
+        <span v-if="path.isVirtual" class="ml-2 text-sm text-purple-600">(virtual - {{getVirtualFieldType(path)}})</span>
+        <span v-else class="ml-2 text-sm text-blue-600">(user-added - {{getVirtualFieldType(path)}})</span>
+      </div>
+    </div>
+
+    <!-- Virtual Field Content (Collapsible) -->
+    <div v-if="!isVirtualFieldCollapsed(path.name)" class="p-3">
+      <div v-if="path.value == null" class="text-sky-800">
+        {{'' + path.value}}
+      </div>
+      <div v-else>
+        {{path.value}}
+      </div>
+    </div>
+    </div>
+
+    <!-- Unmatched Schema Paths (shown after matched items when searching, or all when not searching) -->
+    <div
+      v-for="path in unmatchedSchemaPaths"
+      :key="path.path || path"
+      class="value"
+    >
+      <document-property
+        :path="path"
+        :document="document"
+        :schemaPaths="schemaPaths"
+        :editting="editting"
+        :changes="changes"
+        :highlight="false"
+        :invalid="invalid"></document-property>
+    </div>
+
+    <!-- Unmatched Virtual Fields (shown last) -->
+    <div
+      v-for="path in unmatchedVirtuals"
+      :key="path.name"
+      class="border border-gray-200 rounded-lg mb-2 transition-all duration-200 ease-in-out"
+    >
+    <!-- Virtual Field Header (Always Visible) -->
+    <div
+      @click="toggleVirtualField(path.name)"
+      class="p-3 bg-gray-50 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
     >
       <div class="flex items-center">
         <svg

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

@@ -145,6 +145,20 @@ module.exports = app => app.component('document-details', {
 
       return matches.concat(nonMatches);
     },
+    matchedSchemaPaths() {
+      if (!this.searchQuery.trim()) {
+        return [];
+      }
+      const query = this.searchQuery.toLowerCase();
+      return this.typeFilteredSchemaPaths.filter(path => path.path.toLowerCase().includes(query));
+    },
+    unmatchedSchemaPaths() {
+      if (!this.searchQuery.trim()) {
+        return this.typeFilteredSchemaPaths;
+      }
+      const query = this.searchQuery.toLowerCase();
+      return this.typeFilteredSchemaPaths.filter(path => !path.path.toLowerCase().includes(query));
+    },
     typeFilteredVirtuals() {
       let virtuals = this.virtuals;
 
@@ -178,6 +192,20 @@ module.exports = app => app.component('document-details', {
 
       return matches.concat(nonMatches);
     },
+    matchedVirtuals() {
+      if (!this.searchQuery.trim()) {
+        return [];
+      }
+      const query = this.searchQuery.toLowerCase();
+      return this.typeFilteredVirtuals.filter(virtual => virtual.name.toLowerCase().includes(query));
+    },
+    unmatchedVirtuals() {
+      if (!this.searchQuery.trim()) {
+        return this.typeFilteredVirtuals;
+      }
+      const query = this.searchQuery.toLowerCase();
+      return this.typeFilteredVirtuals.filter(virtual => !virtual.name.toLowerCase().includes(query));
+    },
     schemaSearchMatchSet() {
       if (!this.searchQuery.trim()) {
         return new Set();

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

@@ -2,8 +2,8 @@
   <!-- Collapsible Header -->
   <div
     @click="toggleCollapse"
-    class="p-3 hover:bg-gray-100 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
-    :class="{ 'bg-amber-100': highlight, 'bg-gray-50': !highlight }"
+    class="p-3 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
+    :class="{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-gray-50 hover:bg-gray-100': !highlight }"
   >
     <div class="flex items-center" >
       <svg
@@ -81,7 +81,43 @@
     </div>
     <div v-else>
       <!-- Show truncated or full value based on needsTruncation and isValueExpanded -->
-      <div v-if="needsTruncation && !isValueExpanded" class="relative">
+      <!-- Special handling for truncated arrays -->
+      <div v-if="isArray && shouldShowTruncated" class="w-full">
+        <div class="mt-2">
+          <div
+            v-for="(item, index) in truncatedArrayItems"
+            :key="index"
+            class="mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-blue-600">
+            <div class="absolute -left-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-blue-600">{{ index }}</div>
+            <div v-if="arrayUtils.isObjectItem(item)" class="flex flex-col gap-1 mt-1 px-2">
+              <div
+                v-for="key in arrayUtils.getItemKeys(item)"
+                :key="key"
+                class="flex items-start gap-2 text-xs font-mono">
+                <span class="font-semibold text-gray-600 flex-shrink-0 min-w-[80px]">{{ key }}:</span>
+                <span class="text-gray-800 break-words whitespace-pre-wrap flex-1">{{ arrayUtils.formatItemValue(item, key) }}</span>
+              </div>
+            </div>
+            <div v-else class="text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1">{{ arrayUtils.formatValue(item) }}</div>
+          </div>
+          <div class="mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative opacity-70 hover:opacity-100">
+            <div class="text-xs py-1.5 px-2 font-mono text-gray-500 italic break-words whitespace-pre-wrap mt-1">
+              ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}
+            </div>
+          </div>
+        </div>
+        <button
+          @click="toggleValueExpansion"
+          class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+          Show all {{ arrayValue.length }} items
+        </button>
+      </div>
+      <!-- Non-array truncated view -->
+      <div v-else-if="shouldShowTruncated && !isArray" class="relative">
         <div class="text-gray-700 whitespace-pre-wrap break-words font-mono text-sm">{{truncatedString}}</div>
         <button
           @click="toggleValueExpansion"
@@ -93,6 +129,7 @@
           Show more ({{valueAsString.length}} characters)
         </button>
       </div>
+      <!-- Expanded view -->
       <div v-else-if="needsTruncation && isValueExpanded" class="relative">
         <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
         <button
@@ -105,6 +142,7 @@
           Show less
         </button>
       </div>
+      <!-- Full view (no truncation needed) -->
       <div v-else>
         <component :is="getComponentForPath(path)" :value="getValueForPath(path.path)"></component>
       </div>