@mongoosejs/studio 0.2.13 → 0.3.0

package/frontend/src/document/document.html

@@ -1,14 +1,14 @@
 <div class="document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full">
   <div class="max-w-7xl mx-auto">
-    <div class="flex gap-4 items-center sticky top-0 z-50 bg-white p-4 border-b border-gray-200 shadow-sm">
+    <div class="flex gap-4 items-center sticky top-0 z-50 bg-surface p-4 border-b border-edge shadow-sm">
       <div class="font-bold overflow-hidden text-ellipsis">{{model}}: {{documentId}}</div>
       <div class="flex grow">
         <button
           @click="viewMode = 'fields'"
           :class="viewMode === 'fields'
             ? 'bg-blue-600 text-white z-10'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
-          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-gray-300 border-r-0 rounded-l-lg rounded-r-none"
+            : 'bg-gray-200 text-content-secondary hover:bg-gray-300'"
+          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"
         >
           <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="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
@@ -19,8 +19,8 @@
           @click="viewMode = 'json'"
           :class="viewMode === 'json'
             ? 'bg-blue-600 text-white z-10'
-            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
-          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-gray-300 rounded-r-lg rounded-l-none"
+            : 'bg-gray-200 text-content-secondary hover:bg-gray-300'"
+          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"
         >
           <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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
@@ -48,7 +48,7 @@
           :disabled="!canEdit"
           :class="{'cursor-not-allowed opacity-50': !canEdit}"
           type="button"
-          class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
+          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">
           <img src="images/edit.svg" class="inline" /> Edit
         </button>
         <button
@@ -73,7 +73,7 @@
           <button
             @click="desktopMenuOpen = !desktopMenuOpen"
             type="button"
-            class="inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            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"
             aria-expanded="desktopMenuOpen"
             aria-label="More options"
           >
@@ -86,13 +86,13 @@
           <div
             v-show="desktopMenuOpen"
             @click.away="desktopMenuOpen = false"
-            class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
+            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"
           >
             <div class="py-1 flex flex-col">
               <button
                 @click="refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false"
                 :disabled="isRefreshing"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
                 type="button"
               >
                 {{isRefreshing ? 'Refreshing...' : 'Refresh'}}
@@ -101,7 +101,7 @@
                 @click="toggleAutoRefresh(); desktopMenuOpen = false"
                 :disabled="isLambda"
                 type="button"
-                :class="['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700 hover:bg-slate-100']"
+                :class="['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-content-secondary hover:bg-slate-100']"
                 :title="isLambda ? 'Auto-refresh only available on Express deployments' : ''"
               >
                 {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}
@@ -109,28 +109,28 @@
               <button
                 @click="addField(); desktopMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100"
               >
                 Add Field
               </button>
               <button
                 @click="copyDocument(); desktopMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100"
               >
                 Copy Document
               </button>
               <button
                 @click="openScriptDrawer()"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100"
               >
                 Run Script
               </button>
               <button
                 @click="shouldShowDeleteModal=true; desktopMenuOpen = false"
                 :disabled="!canManipulate"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
                 type="button"
               >
                 Delete
@@ -138,7 +138,7 @@
               <button
                 @click="shouldShowCloneModal=true; desktopMenuOpen = false"
                 :disabled="!canManipulate"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
                 type="button"
               >
                 Clone
@@ -152,7 +152,7 @@
           <button
             @click="mobileMenuOpen = !mobileMenuOpen"
             type="button"
-            class="inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            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"
             aria-expanded="mobileMenuOpen"
             aria-label="Open menu"
           >
@@ -164,14 +164,14 @@
           <div
             v-show="mobileMenuOpen"
             @click.away="mobileMenuOpen = false"
-            class="origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
+            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"
           >
             <div class="py-1 flex flex-col">
               <button
                 v-if="!editting"
                 @click="editting = true; mobileMenuOpen = false"
                 :disabled="!canEdit"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-ultramarine-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-primary-subtle']"
                 type="button"
               >
                 Edit
@@ -180,14 +180,14 @@
                 v-if="editting"
                 @click="editting = false; mobileMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-slate-100"
               >
                 Cancel
               </button>
               <button
                 v-if="editting"
                 :disabled="!canManipulate"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']"
                 @click="shouldShowConfirmModal=true; mobileMenuOpen = false"
                 type="button"
               >
@@ -196,7 +196,7 @@
               <button
                 @click="refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false"
                 :disabled="isRefreshing"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']"
                 type="button"
               >
                 {{isRefreshing ? 'Refreshing...' : 'Refresh'}}
@@ -204,35 +204,35 @@
               <button
                 @click="toggleAutoRefresh(); mobileMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-slate-100"
               >
                 Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}
               </button>
               <button
                 @click="addField(); mobileMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-green-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100"
               >
                 Add Field
               </button>
               <button
                 @click="copyDocument(); mobileMenuOpen = false"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100"
               >
                 Copy Document
               </button>
               <button
                 @click="openScriptDrawer()"
                 type="button"
-                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-indigo-100"
+                class="flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100"
               >
                 Run Script
               </button>
               <button
                 @click="shouldShowDeleteModal=true; mobileMenuOpen = false"
                 :disabled="!canManipulate"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']"
                 type="button"
               >
                 Delete
@@ -240,7 +240,7 @@
               <button
                 @click="shouldShowCloneModal=true; mobileMenuOpen = false"
                 :disabled="!canManipulate"
-                :class="['flex items-center px-4 py-2 text-sm text-gray-700', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
+                :class="['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']"
                 type="button"
               >
                 Clone
@@ -297,7 +297,7 @@
         type="button"
         aria-label="Keyboard shortcuts"
         title="Keyboard shortcuts"
-        class="rounded-full border border-slate-300 bg-white p-2 text-slate-700 shadow-sm transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+        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"
       >
         <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
           <rect x="2.5" y="6.5" width="19" height="11" rx="2" stroke-width="1.5"></rect>

package/frontend/src/document/execute-script/execute-script.html

@@ -1,10 +1,10 @@
 <div v-if="isOpen" class="fixed inset-0 z-50 execute-script-drawer" :class="{ 'is-closing': isClosing }">
   <div class="execute-script-backdrop absolute inset-0 bg-black/40" @click="close"></div>
-  <div class="execute-script-panel absolute right-0 top-0 h-full w-full max-w-xl bg-white shadow-xl flex flex-col">
-    <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200">
+  <div class="execute-script-panel absolute right-0 top-0 h-full w-full max-w-xl bg-surface shadow-xl flex flex-col">
+    <div class="flex items-center justify-between px-5 py-4 border-b border-edge">
       <div>
-        <h2 class="text-lg font-semibold text-gray-900">Run Script</h2>
-        <p class="text-xs text-gray-500">Use <code class="bg-gray-100 px-1 rounded">doc</code> for this document.</p>
+        <h2 class="text-lg font-semibold text-content">Run Script</h2>
+        <p class="text-xs text-content-tertiary">Use <code class="bg-muted px-1 rounded">doc</code> for this document.</p>
       </div>
       <button
         type="button"
@@ -17,16 +17,15 @@
     </div>
     <div class="flex-1 overflow-auto p-5 space-y-4">
       <div class="space-y-2">
-        <label class="text-sm font-medium text-gray-700">Script</label>
-        <textarea
-          ref="scriptEditor"
-          :value="scriptText"
-          @input="updateScriptText"
-          rows="8"
-          placeholder="await doc.updateName('new name')&#10;return doc"
-          class="w-full rounded-md border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 font-mono text-sm"
-        ></textarea>
-        <p class="text-xs text-gray-500">Return a value to see it in the output panel.</p>
+        <label class="text-sm font-medium text-content-secondary">Script</label>
+        <ace-editor
+          v-model="scriptText"
+          mode="javascript"
+          :line-numbers="true"
+          :wrap="true"
+          class="min-h-[200px]"
+        />
+        <p class="text-xs text-content-tertiary">Return a value to see it in the output panel.</p>
       </div>
       <div class="flex items-center gap-3">
         <button
@@ -41,7 +40,7 @@
         <button
           type="button"
           @click="clearScript"
-          class="text-sm text-gray-500 hover:text-gray-700"
+          class="text-sm text-content-tertiary hover:text-content-secondary"
         >
           Clear
         </button>
@@ -50,17 +49,17 @@
         <div v-if="scriptError" class="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700">
           {{scriptError}}
         </div>
-        <div v-if="scriptHasRun" class="rounded-md border border-gray-200 bg-gray-50 p-3">
-          <div class="text-xs uppercase tracking-wide text-gray-500 mb-2">Output</div>
+        <div v-if="scriptHasRun" class="rounded-md border border-edge bg-page p-3">
+          <div class="text-xs uppercase tracking-wide text-content-tertiary mb-2">Output</div>
           <pre class="whitespace-pre-wrap text-sm text-gray-800">{{formatScriptOutput(scriptResult)}}</pre>
         </div>
-        <div v-if="scriptLogs" class="rounded-md border border-gray-200 bg-white p-3">
-          <div class="text-xs uppercase tracking-wide text-gray-500 mb-2">Logs</div>
-          <pre class="whitespace-pre-wrap text-xs text-gray-700">{{scriptLogs}}</pre>
+        <div v-if="scriptLogs" class="rounded-md border border-edge bg-surface p-3">
+          <div class="text-xs uppercase tracking-wide text-content-tertiary mb-2">Logs</div>
+          <pre class="whitespace-pre-wrap text-xs text-content-secondary">{{scriptLogs}}</pre>
         </div>
       </div>
     </div>
-    <div class="border-t border-gray-200 px-5 py-3 text-xs text-gray-500">
+    <div class="border-t border-edge px-5 py-3 text-xs text-content-tertiary">
       Scripts run on the server with access to the Mongoose document instance.
     </div>
   </div>

package/frontend/src/document/execute-script/execute-script.js

@@ -17,7 +17,6 @@ module.exports = app => app.component('execute-script', {
       scriptError: null,
       scriptHasRun: false,
       scriptRunning: false,
-      scriptEditor: null,
       isOpen: false,
       isClosing: false
     };
@@ -29,19 +28,11 @@ module.exports = app => app.component('execute-script', {
         this.isClosing = false;
       } else if (this.isOpen) {
         this.isClosing = true;
-        this.destroyScriptEditor();
         setTimeout(() => {
           this.isOpen = false;
           this.isClosing = false;
         }, 200);
       }
-    },
-    isOpen(newVal) {
-      if (newVal) {
-        this.$nextTick(() => {
-          this.initializeScriptEditor();
-        });
-      }
     }
   },
   mounted() {
@@ -49,46 +40,16 @@ module.exports = app => app.component('execute-script', {
       this.isOpen = true;
     }
   },
-  beforeDestroy() {
-    this.destroyScriptEditor();
-  },
   methods: {
     close() {
       this.$emit('close');
     },
-    initializeScriptEditor() {
-      if (!this.$refs.scriptEditor || this.scriptEditor || typeof CodeMirror === 'undefined') {
-        return;
-      }
-
-      this.$refs.scriptEditor.value = this.scriptText;
-      this.scriptEditor = CodeMirror.fromTextArea(this.$refs.scriptEditor, {
-        mode: 'javascript',
-        lineNumbers: true,
-        lineWrapping: true
-      });
-      this.scriptEditor.on('change', () => {
-        this.scriptText = this.scriptEditor.getValue();
-      });
-    },
-    destroyScriptEditor() {
-      if (this.scriptEditor) {
-        this.scriptEditor.toTextArea();
-        this.scriptEditor = null;
-      }
-    },
-    updateScriptText(event) {
-      this.scriptText = event.target.value;
-    },
     clearScript() {
       this.scriptText = '';
       this.scriptResult = null;
       this.scriptLogs = '';
       this.scriptError = null;
       this.scriptHasRun = false;
-      if (this.scriptEditor) {
-        this.scriptEditor.setValue('');
-      }
     },
     formatScriptOutput(value) {
       if (value === undefined) {
@@ -107,7 +68,7 @@ module.exports = app => app.component('execute-script', {
       }
     },
     async runDocumentScript() {
-      const scriptToRun = (this.scriptEditor ? this.scriptEditor.getValue() : this.scriptText || '').trim();
+      const scriptToRun = (this.scriptText || '').trim();
       if (!scriptToRun) {
         this.$toast.error('Script cannot be empty.');
         return;
@@ -123,9 +84,6 @@ module.exports = app => app.component('execute-script', {
           script: scriptToRun
         });
         this.scriptText = scriptToRun;
-        if (this.scriptEditor) {
-          this.scriptEditor.setValue(scriptToRun);
-        }
         this.scriptResult = result;
         this.scriptLogs = logs;
         this.scriptHasRun = true;

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

@@ -70,21 +70,16 @@
   box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
 }
 
-/* CodeMirror styling in modal */
-.add-field-modal .CodeMirror {
+/* Ace editor styling in modal */
+.add-field-modal .add-field-ace-editor.ace_editor {
   border: 1px solid #d1d5db;
   border-radius: 0.375rem;
   font-size: 14px;
-  height: auto;
   min-height: 100px;
 }
 
-.add-field-modal .CodeMirror:focus-within {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.add-field-modal .CodeMirror.CodeMirror-focused {
+.add-field-modal .add-field-ace-editor:focus-within.ace_editor,
+.add-field-modal .add-field-ace-editor.ace_focus {
   border-color: #3b82f6;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }

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

@@ -1,6 +1,6 @@
 <div class="document-details">
   <!-- View Toggle and Search/Filter Bar -->
-  <div class="sticky top-[60px] z-40 bg-white rounded-md p-4 border-b border-gray-200 shadow-sm">
+  <div class="sticky top-[60px] z-40 bg-surface rounded-md p-4 border-b border-edge shadow-sm">
 
     <!-- Search and Filter Bar (only show in fields view) -->
     <div v-if="viewMode === 'fields'" class="flex md:gap-3">
@@ -11,7 +11,7 @@
           v-model="searchQuery"
           type="text"
           placeholder="Search fields..."
-          class="w-full px-4 py-2 pl-10 pr-4 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          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"
         />
         <div class="absolute inset-y-0 left-0 flex items-center pl-3">
           <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -24,7 +24,7 @@
       <div class="relative hidden md:block">
         <select
           v-model="selectedType"
-          class="px-4 py-2 pr-8 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white min-w-[140px] appearance-none"
+          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"
         >
           <option value="">All Types</option>
           <option v-for="type in availableTypes" :key="type" :value="type">
@@ -62,24 +62,24 @@
     <div
       v-for="path in matchedVirtuals"
       :key="path.name"
-      class="border border-gray-200 rounded-lg mb-2 transition-all duration-200 ease-in-out mt-4"
+      class="border border-edge 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-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"
+      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"
     >
       <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"
+          class="w-4 h-4 text-content-tertiary 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 class="font-medium text-content">{{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>
@@ -116,24 +116,24 @@
     <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"
+      class="border border-edge 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"
+      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"
     >
       <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"
+          class="w-4 h-4 text-content-tertiary 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 class="font-medium text-content">{{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>
@@ -151,7 +151,7 @@
   </div>
 
     <!-- No Results Message -->
-    <div v-if="searchQuery.trim() && !hasSearchMatches" class="text-center py-8 text-gray-500">
+    <div v-if="searchQuery.trim() && !hasSearchMatches" class="text-center py-8 text-content-tertiary">
       <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <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>
       </svg>
@@ -161,7 +161,7 @@
 
   <!-- JSON View -->
   <div v-if="viewMode === 'json'" class="json-view">
-    <div class="border border-gray-300 rounded-lg bg-gray-50 p-4 overflow-auto">
+    <div class="border border-edge-strong rounded-lg bg-page p-4 overflow-auto">
       <pre class="text-sm font-mono text-gray-800 whitespace-pre">{{formattedJson}}</pre>
     </div>
   </div>
@@ -172,14 +172,14 @@
       <div class="modal-exit" @click="closeAddFieldModal">&times;</div>
       <div class="add-field-modal">
         <div class="mb-6">
-          <h2 class="text-xl font-semibold text-gray-900 mb-2">Add New Field</h2>
+          <h2 class="text-xl font-semibold text-content mb-2">Add New Field</h2>
           <p class="text-sm text-gray-600">Create a new field for this document</p>
         </div>
 
         <form @submit.prevent="handleAddFieldSubmit" class="space-y-4">
           <!-- Field Name -->
           <div>
-            <label for="fieldName" class="block text-sm font-medium text-gray-700 mb-1">
+            <label for="fieldName" class="block text-sm font-medium text-content-secondary mb-1">
               Field Name *
             </label>
             <input
@@ -188,7 +188,7 @@
               type="text"
               required
               placeholder="Enter field name..."
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              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"
               :class="{ 'border-red-500': fieldErrors.name }"
             />
             <p v-if="fieldErrors.name" class="mt-1 text-sm text-red-600">{{fieldErrors.name}}</p>
@@ -199,14 +199,14 @@
 
           <!-- Field Type -->
           <div>
-            <label for="fieldType" class="block text-sm font-medium text-gray-700 mb-1">
+            <label for="fieldType" class="block text-sm font-medium text-content-secondary mb-1">
               Field Type *
             </label>
             <select
               id="fieldType"
               v-model="fieldData.type"
               required
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              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"
               :class="{ 'border-red-500': fieldErrors.type }"
             >
               <option value="">Select field type...</option>
@@ -219,7 +219,7 @@
 
           <!-- Field Value -->
           <div>
-            <label for="fieldValue" class="block text-sm font-medium text-gray-700 mb-1">
+            <label for="fieldValue" class="block text-sm font-medium text-content-secondary mb-1">
               Initial Value
             </label>
 
@@ -229,47 +229,48 @@
               v-model="fieldData.value"
               type="date"
               id="fieldValue"
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              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"
               :class="{ 'border-red-500': fieldErrors.value }"
             />
 
             <!-- Simple input for basic types -->
             <input
-              v-else-if="!shouldUseCodeMirror"
+              v-else-if="!shouldUseAce"
               v-model="fieldData.value"
               type="text"
               id="fieldValue"
               placeholder="Enter initial value (optional)..."
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              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"
               :class="{ 'border-red-500': fieldErrors.value }"
             />
 
-            <!-- CodeMirror textarea for complex types -->
-            <textarea
+            <!-- Ace editor for complex types (Array/Object/Embedded) -->
+            <ace-editor
               v-else
-              ref="fieldValueEditor"
               id="fieldValue"
-              rows="3"
-              placeholder="Enter initial value (optional)..."
-              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              v-model="fieldData.value"
+              mode="json"
+              :line-numbers="true"
+              :min-lines="3"
+              class="add-field-ace-editor w-full min-h-[100px]"
               :class="{ 'border-red-500': fieldErrors.value }"
-            ></textarea>
+            />
 
             <p v-if="fieldErrors.value" class="mt-1 text-sm text-red-600">{{fieldErrors.value}}</p>
-            <p class="mt-1 text-xs text-gray-500">
+            <p class="mt-1 text-xs text-content-tertiary">
               <span v-if="shouldUseDatePicker">Select a date or leave empty for null/undefined values.</span>
-              <span v-else-if="shouldUseCodeMirror">Leave empty for null/undefined values. Use valid JSON format.</span>
+              <span v-else-if="shouldUseAce">Leave empty for null/undefined values. Use valid JSON format.</span>
               <span v-else>Leave empty for null/undefined values.</span>
             </p>
           </div>
 
 
           <!-- Action Buttons -->
-          <div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
+          <div class="flex justify-end gap-3 pt-4 border-t border-edge">
             <button
               type="button"
               @click="closeAddFieldModal"
-              class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              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"
             >
               Cancel
             </button>