@mongoosejs/studio 0.5.4 → 0.5.6

package/frontend/src/array-utils.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const { inspect } = require('node-inspect-extracted');
-const deepEqual = require('./_util/deepEqual');
 
 /**
  * Format a value for display in array views
@@ -59,9 +58,68 @@ function formatItemValue(item, key) {
   return String(value);
 }
 
+/**
+ * True when every element is a plain object (empty array counts as eligible).
+ */
+function isArrayOfObjects(arr) {
+  return Array.isArray(arr) && arr.every(item => isObjectItem(item));
+}
+
+/**
+ * Sorted union of keys across plain object elements.
+ */
+function unionKeysForArrayOfObjects(arr) {
+  if (!Array.isArray(arr)) {
+    return [];
+  }
+  const set = new Set();
+  for (const item of arr) {
+    if (!isObjectItem(item)) {
+      continue;
+    }
+    for (const k of Object.keys(item)) {
+      set.add(k);
+    }
+  }
+  return Array.from(set).sort((a, b) => a.localeCompare(b));
+}
+
+/**
+ * Flat text for substring search over one array element (field names + values, or whole item).
+ * @param {*} item
+ * @returns {string}
+ */
+function searchTextForArrayItem(item) {
+  if (item == null) {
+    return String(item);
+  }
+  if (isObjectItem(item)) {
+    return getItemKeys(item)
+      .map(k => `${k} ${formatItemValue(item, k)}`)
+      .join(' \n ');
+  }
+  return formatValue(item);
+}
+
+/**
+ * Case-insensitive substring match against an array element.
+ * @param {*} item
+ * @param {string} normalizedQuery lowercased trimmed query; empty matches all
+ */
+function arrayItemMatchesSearch(item, normalizedQuery) {
+  if (normalizedQuery == null || normalizedQuery === '') {
+    return true;
+  }
+  return searchTextForArrayItem(item).toLowerCase().includes(normalizedQuery);
+}
+
 module.exports = {
   formatValue,
   isObjectItem,
   getItemKeys,
-  formatItemValue
+  formatItemValue,
+  isArrayOfObjects,
+  unionKeysForArrayOfObjects,
+  searchTextForArrayItem,
+  arrayItemMatchesSearch
 };

package/frontend/src/dashboards/dashboards.html

@@ -10,6 +10,23 @@
       </button>
     </div>
 
+    <div v-if="status !== 'loading'" class="mb-5">
+      <label for="dashboard-search" class="sr-only">Search dashboards</label>
+      <div class="relative max-w-lg">
+        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-content-tertiary">
+          <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+          </svg>
+        </div>
+        <input
+          id="dashboard-search"
+          v-model="searchText"
+          type="search"
+          class="block w-full rounded-md border-0 bg-surface py-2 pl-9 pr-3 text-sm text-content shadow-sm ring-1 ring-inset ring-edge placeholder:text-content-tertiary focus:ring-2 focus:ring-inset focus:ring-primary"
+          placeholder="Search by title or description">
+      </div>
+    </div>
+
     <div v-if="status === 'loading'" class="text-center py-12">
       <svg
         class="inline w-8 h-8 animate-spin text-gray-400"
@@ -38,21 +55,52 @@
       </div>
     </div>
 
+    <div v-else-if="filteredDashboards.length === 0" class="text-center py-12">
+      <h3 class="text-sm font-semibold text-content">No matching dashboards</h3>
+      <p class="mt-1 text-sm text-content-tertiary">Try a different title or description.</p>
+    </div>
+
     <div v-else class="space-y-3">
       <div
-        v-for="dashboard in dashboards"
+        v-for="dashboard in filteredDashboards"
         :key="dashboard._id"
-        class="bg-surface rounded-lg border border-edge px-5 py-4 flex items-center justify-between hover:border-edge-strong transition-colors"
+        class="bg-surface rounded-lg border border-edge px-5 py-4 flex items-start justify-between hover:border-edge-strong transition-colors"
       >
         <div class="min-w-0 flex-1 mr-4">
           <router-link
             :to="'/dashboard/' + dashboard._id"
             class="text-sm font-semibold text-content hover:text-primary block truncate">
-            {{ dashboard.title }}
+            <span v-html="highlightTitle(dashboard.title)"></span>
           </router-link>
-          <p v-if="dashboard.description" class="mt-0.5 text-sm text-content-tertiary truncate">{{ dashboard.description }}</p>
+          <p
+            v-if="dashboard.description"
+            class="mt-0.5 text-sm text-content-tertiary truncate"
+            v-html="highlightDescription(dashboard.description)"></p>
+          <dl class="mt-3 grid grid-cols-1 gap-x-4 gap-y-1 text-xs text-content-tertiary sm:grid-cols-3">
+            <div>
+              <dt class="font-medium text-content-secondary">Created At</dt>
+              <dd>{{ formatDate(dashboard.createdAt) }}</dd>
+            </div>
+            <div>
+              <dt class="font-medium text-content-secondary">Last Evaluated At</dt>
+              <dd>{{ formatDate(dashboard.lastEvaluatedAt) }}</dd>
+            </div>
+            <div v-show="dashboard.createdBy">
+              <dt class="font-medium text-content-secondary">Created By</dt>
+              <dd class="truncate">{{ dashboard.createdBy?.name }}</dd>
+            </div>
+          </dl>
         </div>
         <div class="flex items-center gap-2 shrink-0">
+          <button
+            type="button"
+            @click="togglePin(dashboard)"
+            :title="dashboard.isPinned ? 'Unpin dashboard' : 'Pin dashboard'"
+            :aria-label="dashboard.isPinned ? 'Unpin dashboard' : 'Pin dashboard'"
+            class="rounded-md bg-surface px-2 py-1.5 text-content-tertiary ring-1 ring-inset ring-gray-300 hover:bg-page"
+            :class="dashboard.isPinned ? 'text-primary ring-primary/40' : ''">
+            <img :src="dashboard.isPinned ? 'images/pin-off.svg' : 'images/pin.svg'" class="w-4 h-4" alt="" />
+          </button>
           <router-link
             :to="'/dashboard/' + dashboard._id"
             class="rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover">

package/frontend/src/dashboards/dashboards.js

@@ -9,11 +9,73 @@ module.exports = app => app.component('dashboards', {
   data: () => ({
     status: 'loading',
     dashboards: [],
+    searchText: '',
     showCreateDashboardModal: false,
     showDeleteDashboardModal: null,
     openMenuId: null
   }),
+  computed: {
+    filteredDashboards() {
+      const searchWords = getSearchWords(this.searchText);
+      let dashboards = this.dashboards;
+      if (searchWords.length === 0) {
+        return sortPinnedFirst(dashboards);
+      }
+      const searchPatterns = searchWords.map(word => new RegExp(escapeRegExp(word), 'i'));
+
+      dashboards = dashboards.filter(dashboard => {
+        const searchableText = `${dashboard.title || ''} ${dashboard.description || ''}`;
+        return searchPatterns.every(pattern => pattern.test(searchableText));
+      });
+
+      return sortPinnedFirst(dashboards);
+    }
+  },
   methods: {
+    highlightTitle(value) {
+      return this.highlightSearchText(value, 'underline decoration-primary underline-offset-2');
+    },
+    highlightDescription(value) {
+      return this.highlightSearchText(value, 'font-semibold text-content-secondary');
+    },
+    highlightSearchText(value, className) {
+      const text = value || '';
+      const searchWords = getSearchWords(this.searchText);
+      if (searchWords.length === 0) {
+        return escapeHtml(text);
+      }
+      const searchPattern = new RegExp(searchWords.map(escapeRegExp).join('|'), 'ig');
+
+      let html = '';
+      let lastIndex = 0;
+      let match = searchPattern.exec(text);
+      while (match != null) {
+        html += escapeHtml(text.slice(lastIndex, match.index));
+        html += `<span class="${className}">${escapeHtml(match[0])}</span>`;
+        lastIndex = match.index + match[0].length;
+        match = searchPattern.exec(text);
+      }
+      html += escapeHtml(text.slice(lastIndex));
+      return html;
+    },
+    formatDate(value) {
+      if (!value) {
+        return '-';
+      }
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime())) {
+        return '-';
+      }
+      return new Intl.DateTimeFormat(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short'
+      }).format(date);
+    },
+    formatUser(dashboard) {
+      return dashboard.createdBy?.name ||
+        dashboard.createdBy?.email ||
+        (dashboard.createdById ? dashboard.createdById.toString() : '-');
+    },
     toggleMenu(id) {
       this.openMenuId = this.openMenuId === id ? null : id;
     },
@@ -33,8 +95,19 @@ module.exports = app => app.component('dashboards', {
       this.$toast.success('Dashboard deleted!');
     },
     insertNewDashboard(dashboard) {
-      this.dashboards.push(dashboard);
+      this.dashboards.unshift(dashboard);
       this.showCreateDashboardModal = false;
+    },
+    async togglePin(dashboard) {
+      if (!dashboard) {
+        return;
+      }
+
+      const { doc } = await api.Dashboard.updateDashboard({
+        dashboardId: dashboard._id,
+        isPinned: !dashboard.isPinned
+      });
+      dashboard.isPinned = doc.isPinned;
     }
   },
   directives: {
@@ -58,3 +131,25 @@ module.exports = app => app.component('dashboards', {
     this.status = 'loaded';
   }
 });
+
+function escapeHtml(value) {
+  return value.toString().
+    replace(/&/g, '&amp;').
+    replace(/</g, '&lt;').
+    replace(/>/g, '&gt;').
+    replace(/"/g, '&quot;').
+    replace(/'/g, '&#39;');
+}
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function getSearchWords(searchText) {
+  return Array.from(new Set(searchText.trim().split(/\s+/).filter(Boolean))).
+    sort((a, b) => b.length - a.length);
+}
+
+function sortPinnedFirst(dashboards) {
+  return dashboards.slice().sort((a, b) => Number(Boolean(b.isPinned)) - Number(Boolean(a.isPinned)));
+}

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

@@ -3,23 +3,107 @@
     Empty array
   </div>
 
-  <div v-else class="mt-2">
+  <div v-else>
+    <div class="mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+      <div class="relative min-w-0 flex-1">
+        <input
+          v-model="arraySearchQuery"
+          type="text"
+          autocomplete="off"
+          aria-label="Search in this array"
+          placeholder="Search in this array…"
+          class="w-full rounded-md border border-edge bg-surface py-1.5 pl-2 pr-8 text-xs text-content placeholder:text-content-tertiary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+        />
+        <button
+          v-if="arraySearchNormalized"
+          type="button"
+          class="absolute right-1 top-1/2 -translate-y-1/2 rounded px-1.5 py-0.5 text-[11px] text-content-tertiary hover:bg-slate-100 hover:text-content"
+          title="Clear search"
+          @click="arraySearchQuery = ''">
+          Clear
+        </button>
+      </div>
+      <span v-if="arraySearchNormalized" class="shrink-0 text-xs text-content-tertiary">
+        {{ filteredArrayRows.length }} of {{ arrayValue.length }} shown
+      </span>
+    </div>
+
     <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>
+      v-if="filteredArrayRows.length === 0"
+      class="rounded-md border border-dashed border-edge py-6 text-center text-xs text-content-tertiary">
+      No items match "{{ arraySearchQuery.trim() }}".
+    </div>
+
+    <div v-else-if="showAsTable" class="mt-2 overflow-x-auto rounded-md border border-edge">
+      <table class="min-w-full text-left text-xs font-mono text-content">
+        <thead class="bg-slate-100 text-content-secondary border-b border-edge">
+          <tr>
+            <th scope="col" class="sticky left-0 z-[1] bg-slate-100 px-2 py-2 font-semibold border-r border-edge w-10 text-center">#</th>
+            <th
+              v-for="key in tableColumnKeys"
+              :key="key"
+              scope="col"
+              class="px-3 py-2 font-semibold whitespace-nowrap border-r border-edge last:border-r-0">
+              {{ key }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-edge bg-surface">
+          <tr v-for="row in displayedArrayRows" :key="row.index" class="hover:bg-slate-50/80">
+            <td class="sticky left-0 z-[1] bg-inherit px-2 py-2 text-center text-content-tertiary border-r border-edge">{{ row.index }}</td>
+            <td
+              v-for="key in tableColumnKeys"
+              :key="key"
+              class="px-3 py-2 align-top break-words whitespace-pre-wrap max-w-md border-r border-edge last:border-r-0">
+              {{ Object.prototype.hasOwnProperty.call(row.item, key) ? arrayUtils.formatItemValue(row.item, key) : '' }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-else class="mt-2">
+      <div
+        v-for="row in displayedArrayRows"
+        :key="row.index"
+        :title="'Index: ' + row.index"
+        class="mb-1.5 last:mb-0 py-2.5 px-3 pl-4 bg-transparent border-l-[3px] border-l-slate-100 rounded-none transition-all duration-200 cursor-pointer relative hover:bg-slate-50 hover:border-l-slate-100 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-slate-100 text-content rounded-full flex items-center justify-center text-[10px] font-semibold font-mono z-10 hover:bg-slate-100">{{ row.index >= 1000 ? '1k+' : row.index }}</div>
+        <div v-if="arrayUtils.isObjectItem(row.item)" class="flex flex-col gap-1 mt-1 px-2">
+          <div
+            v-for="key in arrayUtils.getItemKeys(row.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(row.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(row.item) }}</div>
+      </div>
+    </div>
+
+    <div
+      v-if="remainingArrayCount > 0"
+      class="mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-slate-100 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-content-tertiary italic break-words whitespace-pre-wrap mt-1">
+        ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}
       </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>
+
+    <button
+      v-if="canToggleRows"
+      @click="toggleExpansion"
+      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"
+    >
+      <svg
+        class="w-4 h-4"
+        :class="{ 'rotate-180': isExpanded }"
+        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>
+      {{ expansionToggleLabel }}
+    </button>
   </div>
 </div>

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

@@ -1,16 +1,83 @@
 'use strict';
 
 const template = require('./detail-array.html');
+const { isArrayOfObjects, unionKeysForArrayOfObjects, arrayItemMatchesSearch } = require('../array-utils');
 
 module.exports = app => app.component('detail-array', {
   template: template,
-  props: ['value'],
+  props: {
+    value: {},
+    /** 'list' | 'table' — table applies to arrays of plain objects */
+    viewMode: {
+      type: String,
+      default: 'list'
+    },
+    truncate: {
+      type: Boolean,
+      default: false
+    },
+    initialLimit: {
+      type: Number,
+      default: 2
+    }
+  },
   data() {
     return {
-      arrayValue: []
+      arrayValue: [],
+      arraySearchQuery: '',
+      isExpanded: false
     };
   },
+  computed: {
+    effectiveViewMode() {
+      return this.viewMode === 'table' ? 'table' : 'list';
+    },
+    showAsTable() {
+      return this.effectiveViewMode === 'table' && isArrayOfObjects(this.arrayValue);
+    },
+    tableColumnKeys() {
+      return unionKeysForArrayOfObjects(this.arrayValue);
+    },
+    arraySearchNormalized() {
+      return (this.arraySearchQuery || '').trim().toLowerCase();
+    },
+    filteredArrayRows() {
+      if (!Array.isArray(this.arrayValue)) {
+        return [];
+      }
+      return this.arrayValue
+        .map((item, index) => ({ item, index }))
+        .filter(({ item }) => arrayItemMatchesSearch(item, this.arraySearchNormalized));
+    },
+    displayedArrayRows() {
+      if (!this.shouldLimitRows) {
+        return this.filteredArrayRows;
+      }
+      return this.filteredArrayRows.slice(0, this.initialLimit);
+    },
+    shouldLimitRows() {
+      return this.truncate
+        && !this.isExpanded
+        && !this.arraySearchNormalized
+        && this.filteredArrayRows.length > this.initialLimit;
+    },
+    canToggleRows() {
+      return this.truncate && !this.arraySearchNormalized && this.arrayValue.length > this.initialLimit;
+    },
+    expansionToggleLabel() {
+      return this.isExpanded ? 'Show less' : `Show all ${this.arrayValue.length} items`;
+    },
+    remainingArrayCount() {
+      if (!this.shouldLimitRows) {
+        return 0;
+      }
+      return this.filteredArrayRows.length - this.displayedArrayRows.length;
+    }
+  },
   methods: {
+    toggleExpansion() {
+      this.isExpanded = !this.isExpanded;
+    },
     initializeArray() {
       if (this.value == null) {
         this.arrayValue = [];
@@ -28,9 +95,12 @@ module.exports = app => app.component('detail-array', {
     value: {
       handler(newValue) {
         this.initializeArray();
+        if (this.arrayValue.length <= this.initialLimit) {
+          this.isExpanded = false;
+        }
       },
       deep: true,
       immediate: true
     }
   }
-});
+});

package/frontend/src/document/document.html

@@ -120,6 +120,13 @@
               >
                 Copy Document
               </button>
+              <button
+                @click="openValidationModal()"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100"
+              >
+                Validate
+              </button>
               <button
                 @click="openScriptDrawer()"
                 type="button"
@@ -222,6 +229,13 @@
               >
                 Copy Document
               </button>
+              <button
+                @click="openValidationModal()"
+                type="button"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100"
+              >
+                Validate
+              </button>
               <button
                 @click="openScriptDrawer()"
                 type="button"
@@ -280,6 +294,43 @@
             <clone-document :currentModel="model" :doc="document" :schemaPaths="schemaPaths" @close="showClonedDocument"></clone-document>
         </template>
       </modal>
+      <modal v-if="shouldShowValidationModal">
+        <template v-slot:body>
+          <div class="modal-exit" @click="shouldShowValidationModal = false;">&times;</div>
+          <div class="text-xl font-bold mb-2">Validate Document</div>
+          <div v-if="!validationResult" class="space-y-3">
+            <div class="h-4 w-32 animate-pulse rounded bg-muted"></div>
+            <div class="h-20 w-full animate-pulse rounded bg-muted"></div>
+          </div>
+          <div v-else class="space-y-3">
+            <div
+              class="rounded px-3 py-2 text-sm font-semibold"
+              :class="validationResult.valid ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'"
+            >
+              {{ validationResult.valid ? 'Document is valid' : 'Document is invalid' }}
+            </div>
+            <div v-if="!validationResult.valid" class="rounded border border-edge bg-muted p-3 text-sm text-content-secondary">
+              {{ validationResult.error }}
+            </div>
+            <div v-if="validationResult?.errors && Object.keys(validationResult.errors).length > 0" class="rounded border border-edge">
+              <div class="border-b border-edge px-3 py-2 text-sm font-semibold text-content-secondary">Invalid Paths</div>
+              <div class="max-h-72 overflow-auto">
+                <div
+                  v-for="[path, pathError] in Object.entries(validationResult.errors)"
+                  :key="path"
+                  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]"
+                >
+                  <div class="font-mono text-content">{{ path }}</div>
+                  <div class="text-content-secondary">
+                    <div>{{ pathError.message }}</div>
+                    <div v-if="pathError.kind" class="mt-1 text-xs text-content-tertiary">Kind: {{ pathError.kind }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </modal>
     </div>
     <execute-script
       :visible="scriptDrawerOpen"

package/frontend/src/document/document.js

@@ -26,6 +26,8 @@ module.exports = app => app.component('document', {
     shouldShowConfirmModal: false,
     shouldShowDeleteModal: false,
     shouldShowCloneModal: false,
+    shouldShowValidationModal: false,
+    validationResult: null,
     previousQuery: null,
     lastUpdatedAt: null,
     isRefreshing: false,
@@ -351,6 +353,17 @@ module.exports = app => app.component('document', {
       this.desktopMenuOpen = false;
       this.mobileMenuOpen = false;
     },
+    async openValidationModal() {
+      this.desktopMenuOpen = false;
+      this.mobileMenuOpen = false;
+      this.shouldShowValidationModal = true;
+      this.validationResult = null;
+      const { result } = await api.Model.validateDocument({
+        model: this.model,
+        documentId: this.documentId
+      });
+      this.validationResult = result;
+    },
     closeScriptDrawer() {
       this.scriptDrawerOpen = false;
     },

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

@@ -55,6 +55,7 @@
         :editting="editting"
         :changes="changes"
         :highlight="true"
+        :searchQuery="searchQuery"
         :invalid="invalid"></document-property>
     </div>
 
@@ -67,7 +68,7 @@
     <!-- Virtual Field Header (Always Visible) -->
     <div
       @click="toggleVirtualField(path.name)"
-      class="p-3 bg-amber-100 hover:bg-amber-200 cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out"
+      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"
     >
       <div class="flex items-center">
         <svg
@@ -79,7 +80,12 @@
         >
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
         </svg>
-        <span class="font-medium text-content">{{path.name}}</span>
+        <span class="font-medium text-content">
+          <span
+            v-for="(part, index) in getSearchMatchParts(path.name)"
+            :key="index"
+            :class="{ 'font-bold': part.matched }">{{ part.text }}</span>
+        </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>
@@ -109,6 +115,7 @@
         :editting="editting"
         :changes="changes"
         :highlight="false"
+        :searchQuery="searchQuery"
         :invalid="invalid"></document-property>
     </div>
 
@@ -121,7 +128,7 @@
     <!-- Virtual Field Header (Always Visible) -->
     <div
       @click="toggleVirtualField(path.name)"
-      class="p-3 bg-page hover:bg-muted cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out"
+      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"
     >
       <div class="flex items-center">
         <svg