@mongoosejs/studio 0.2.12 → 0.3.0

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>

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

@@ -22,8 +22,7 @@ module.exports = app => app.component('document-details', {
         value: ''
       },
       fieldErrors: {},
-      isSubmittingField: false,
-      fieldValueEditor: null
+      isSubmittingField: false
     };
   },
   mounted() {
@@ -32,32 +31,11 @@ module.exports = app => app.component('document-details', {
       if (this.$refs.searchInput) {
         this.$refs.searchInput.focus();
       }
-
-      if (this.showAddFieldModal) {
-        this.initializeFieldValueEditor();
-      }
     });
 
     this.searchQuery = this.getSearchQueryFromRoute();
   },
-  beforeDestroy() {
-    this.destroyFieldValueEditor();
-  },
   watch: {
-    'fieldData.type'(newType, oldType) {
-      // When field type changes, we need to handle the transition
-      if (newType !== oldType) {
-        // Destroy existing CodeMirror if it exists
-        this.destroyFieldValueEditor();
-
-        // If switching to a type that needs CodeMirror, initialize it
-        if (this.shouldUseCodeMirror) {
-          this.$nextTick(() => {
-            this.initializeFieldValueEditor();
-          });
-        }
-      }
-    },
     searchQuery(newValue) {
       this.syncSearchQueryToUrl(newValue);
     },
@@ -122,7 +100,7 @@ module.exports = app => app.component('document-details', {
       const allTypes = new Set([...schemaTypes, ...commonTypes]);
       return Array.from(allTypes).sort();
     },
-    shouldUseCodeMirror() {
+    shouldUseAce() {
       return ['Array', 'Object', 'Embedded'].includes(this.fieldData.type);
     },
     shouldUseDatePicker() {
@@ -313,15 +291,9 @@ module.exports = app => app.component('document-details', {
     },
     openAddFieldModal() {
       this.showAddFieldModal = true;
-      this.$nextTick(() => {
-        if (this.shouldUseCodeMirror) {
-          this.initializeFieldValueEditor();
-        }
-      });
     },
     closeAddFieldModal() {
       this.showAddFieldModal = false;
-      this.destroyFieldValueEditor();
       this.resetFieldForm();
     },
     async addNewField(fieldData) {
@@ -430,29 +402,6 @@ module.exports = app => app.component('document-details', {
       };
       this.fieldErrors = {};
       this.isSubmittingField = false;
-      // Reset CodeMirror editor if it exists
-      if (this.fieldValueEditor) {
-        this.fieldValueEditor.setValue('');
-      }
-    },
-    initializeFieldValueEditor() {
-      if (this.$refs.fieldValueEditor && !this.fieldValueEditor && this.shouldUseCodeMirror) {
-        this.$refs.fieldValueEditor.value = this.fieldData.value || '';
-        this.fieldValueEditor = CodeMirror.fromTextArea(this.$refs.fieldValueEditor, {
-          mode: 'javascript',
-          lineNumbers: true,
-          height: 'auto'
-        });
-        this.fieldValueEditor.on('change', () => {
-          this.fieldData.value = this.fieldValueEditor.getValue();
-        });
-      }
-    },
-    destroyFieldValueEditor() {
-      if (this.fieldValueEditor) {
-        this.fieldValueEditor.toTextArea();
-        this.fieldValueEditor = null;
-      }
     },
     getVirtualFieldType(virtual) {
       const value = virtual.value;

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

@@ -1,29 +1,29 @@
-<div class="border border-gray-200 bg-white rounded-lg mb-2" style="overflow: visible;">
+<div class="border border-edge bg-surface rounded-lg mb-2" style="overflow: visible;">
   <!-- Collapsible Header -->
   <div
     @click="toggleCollapse"
-    class="p-1 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-slate-100 hover:bg-gray-100': !highlight }"
+    class="p-1 cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out"
+    :class="{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-muted': !highlight }"
     style="overflow: visible; position: relative;"
   >
     <div class="flex items-center" >
       <svg
         :class="isCollapsed ? '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.path}}</span>
-      <span class="ml-2 text-sm text-gray-500">({{(path.instance || 'unknown').toLowerCase()}})</span>
+      <span class="font-medium text-content">{{path.path}}</span>
+      <span class="ml-2 text-sm text-content-tertiary">({{(path.instance || 'unknown').toLowerCase()}})</span>
       <div v-if="isGeoJsonGeometry" class="ml-3 inline-flex items-center gap-2">
         <div class="inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold">
           <button
             type="button"
             class="rounded-full px-2.5 py-0.5 transition"
-            :class="detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-gray-700 hover:text-gray-900'"
+            :class="detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'"
             :style="detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''"
             @click.stop="setDetailViewMode('text')">
             Text
@@ -31,7 +31,7 @@
           <button
             type="button"
             class="rounded-full px-2.5 py-0.5 transition"
-            :class="detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-gray-700 hover:text-gray-900'"
+            :class="detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'"
             :style="detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''"
             @click.stop="setDetailViewMode('map')">
             Map
@@ -72,7 +72,7 @@
     <div class="flex items-center gap-2">
       <button
         type="button"
-        class="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-gray-300 bg-white"
+        class="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-edge-strong bg-surface"
         @click.stop.prevent="copyPropertyValue"
         title="Copy value"
         aria-label="Copy property value"
@@ -85,7 +85,7 @@
       <router-link
         v-if="path.ref && getValueForPath(path.path)"
         :to="`/model/${path.ref}/document/${getValueForPath(path.path)}`"
-        class="bg-ultramarine-600 hover:bg-ultramarine-500 text-white px-2 py-1 text-sm rounded-md"
+        class="bg-primary hover:bg-primary-hover text-primary-text px-2 py-1 text-sm rounded-md"
         @click.stop
         >View Document
       </router-link>
@@ -163,7 +163,7 @@
             <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">
+            <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>
@@ -180,7 +180,7 @@
       </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>
+        <div class="text-content-secondary whitespace-pre-wrap break-words font-mono text-sm">{{truncatedString}}</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"

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

@@ -1,8 +1,9 @@
 <div class="w-full">
-  <!-- CodeMirror editor for the entire array -->
-  <textarea
-    ref="arrayEditor"
-    class="w-full border border-gray-300 p-2 font-mono"
-    :style="{ minHeight: '300px' }">
-  </textarea>
+  <ace-editor
+    :value="arrayStr"
+    @input="onEditorInput"
+    mode="json"
+    :line-numbers="true"
+    class="min-h-[300px]"
+  />
 </div>

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

@@ -1,7 +1,6 @@
 'use strict';
 
 const template = require('./edit-array.html');
-
 const { BSON } = require('mongodb/lib/bson');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
@@ -16,10 +15,14 @@ module.exports = app => app.component('edit-array', {
   props: ['value'],
   data() {
     return {
-      arrayValue: [],
-      arrayEditor: null
+      arrayValue: []
     };
   },
+  computed: {
+    arrayStr() {
+      return JSON.stringify(this.arrayValue, null, 2);
+    }
+  },
   methods: {
     initializeArray() {
       if (this.value == null) {
@@ -29,42 +32,13 @@ module.exports = app => app.component('edit-array', {
       } else {
         this.arrayValue = [];
       }
-      
-      // Update CodeMirror editor if it exists
-      this.$nextTick(() => {
-        if (this.arrayEditor) {
-          const arrayStr = JSON.stringify(this.arrayValue, null, 2);
-          this.arrayEditor.setValue(arrayStr);
-        }
-      });
-    },
-    initializeArrayEditor() {
-      this.$nextTick(() => {
-        const textareaRef = this.$refs.arrayEditor;
-        const textarea = Array.isArray(textareaRef) ? textareaRef[0] : textareaRef;
-        if (textarea && !this.arrayEditor) {
-          const arrayStr = JSON.stringify(this.arrayValue, null, 2);
-          textarea.value = arrayStr;
-          this.arrayEditor = CodeMirror.fromTextArea(textarea, {
-            mode: 'javascript',
-            lineNumbers: true
-          });
-          this.arrayEditor.on('change', () => {
-            this.updateArrayFromEditor();
-          });
-        }
-      });
     },
-    updateArrayFromEditor() {
-      if (!this.arrayEditor) {
-        return;
-      }
+    onEditorInput(str) {
       try {
-        const value = this.arrayEditor.getValue();
-        if (value.trim() === '') {
+        if (str.trim() === '') {
           this.arrayValue = [];
         } else {
-          this.arrayValue = JSON.parse(value);
+          this.arrayValue = JSON.parse(str);
         }
         this.emitUpdate();
       } catch (err) {
@@ -81,25 +55,11 @@ module.exports = app => app.component('edit-array', {
   },
   mounted() {
     this.initializeArray();
-    this.initializeArrayEditor();
-  },
-  beforeDestroy() {
-    if (this.arrayEditor) {
-      this.arrayEditor.toTextArea();
-    }
   },
   watch: {
     value: {
-      handler(newValue, oldValue) {
-        // Initialize array when value prop changes
+      handler() {
         this.initializeArray();
-        // Update array editor if it exists
-        if (this.arrayEditor) {
-          this.$nextTick(() => {
-            const arrayStr = JSON.stringify(this.arrayValue, null, 2);
-            this.arrayEditor.setValue(arrayStr);
-          });
-        }
       },
       deep: true,
       immediate: true

package/frontend/src/edit-boolean/edit-boolean.html

@@ -1,45 +1,45 @@
 <div class="edit-boolean">
   <div class="flex flex-wrap gap-2">
-    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50" 
-           :class="selectedValue === true ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-page" 
+           :class="selectedValue === true ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-edge-strong text-content-secondary'">
       <input
         type="radio"
         :checked="selectedValue === true"
         @change="selectValue(true)"
-        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        class="w-4 h-4 text-blue-600 border-edge-strong focus:ring-blue-500"
       />
       <span class="text-sm font-medium">true</span>
     </label>
     
-    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50"
-           :class="selectedValue === false ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-page"
+           :class="selectedValue === false ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-edge-strong text-content-secondary'">
       <input
         type="radio"
         :checked="selectedValue === false"
         @change="selectValue(false)"
-        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        class="w-4 h-4 text-blue-600 border-edge-strong focus:ring-blue-500"
       />
       <span class="text-sm font-medium">false</span>
     </label>
     
-    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50"
-           :class="selectedValue === null ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-page"
+           :class="selectedValue === null ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-edge-strong text-content-secondary'">
       <input
         type="radio"
         :checked="selectedValue === null"
         @change="selectValue(null)"
-        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        class="w-4 h-4 text-blue-600 border-edge-strong focus:ring-blue-500"
       />
       <span class="text-sm font-medium">null</span>
     </label>
     
-    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50"
-           :class="selectedValue === undefined ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-page"
+           :class="selectedValue === undefined ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-edge-strong text-content-secondary'">
       <input
         type="radio"
         :checked="selectedValue === undefined"
         @change="selectValue(undefined)"
-        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        class="w-4 h-4 text-blue-600 border-edge-strong focus:ring-blue-500"
       />
       <span class="text-sm font-medium">undefined</span>
     </label>

package/frontend/src/edit-date/edit-date.html

@@ -1,14 +1,14 @@
 <div>
   <input
     v-if="dateSelection == 'picker'"
-    class="w-64 h-8 border border-gray-300 outline-0"
+    class="w-64 h-8 border border-edge-strong outline-0"
     type="datetime-local"
     :value="valueAsLocalString"
     @input="$emit('input', $event.target.value)">
   <input
     v-if="dateSelection == 'iso'"
     type="text"
-    class="w-64 h-8 border border-gray-300 outline-0"
+    class="w-64 h-8 border border-edge-strong outline-0"
     :value="valueAsISOString"
     @input="updateFromISO">
 </div>

package/frontend/src/edit-default/edit-default.html

@@ -1,3 +1,3 @@
 <div>
-  <input type="text" :value="value" @input="$emit('input', $event.target.value)" class="w-full p-1 border border-gray-300 outline-0">
+  <input type="text" :value="value" @input="$emit('input', $event.target.value)" class="w-full p-1 border border-edge-strong outline-0">
 </div>

package/frontend/src/edit-string/edit-string.html

@@ -1,7 +1,7 @@
 <div>
   <div v-if="hasEnumValues" class="space-y-2">
     <select
-      class="w-full px-3 py-2 border border-gray-300 bg-white 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 bg-surface rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
       :value="selectedOption"
       @change="onSelectChange"
     >
@@ -14,7 +14,7 @@
     <input
       v-if="selectedOption === '__other'"
       type="text"
-      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"
       :value="otherValue"
       @input="onOtherInput"
       placeholder="Enter a value"
@@ -23,7 +23,7 @@
   <div v-else>
     <input
       type="text"
-      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"
       :value="value != null ? value : ''"
       @input="onTextInput"
       placeholder="Enter a value"

package/frontend/src/edit-subdocument/edit-subdocument.html

@@ -1,6 +1,8 @@
 <div class="edit-subdocument">
-  <textarea
-    ref="editor"
+  <ace-editor
     v-model="currentValue"
-    class="w-full border border-gray-300 p-1 h-[300px]"></textarea>
+    mode="javascript"
+    :line-numbers="true"
+    class="w-full h-[300px] min-h-[200px]"
+  />
 </div>