@mongoosejs/studio 0.2.13 → 0.3.0

package/frontend/src/tasks/tasks.html

@@ -1,41 +1,41 @@
 <div class="p-4 space-y-6">
     <div>
-        <h1 class="text-2xl font-bold text-gray-700 mb-4">Task Overview</h1>
+        <h1 class="text-2xl font-bold text-content-secondary mb-4">Task Overview</h1>
         <div v-if="status == 'init'">
             <img src="images/loader.gif" />
         </div>
         <!-- Task List -->
-        <div class="bg-white p-4 rounded-lg shadow" v-if="status == 'loaded'">
+        <div class="bg-surface p-4 rounded-lg shadow" v-if="status == 'loaded'">
             <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Date:</label>
-                <select v-model="selectedRange" @change="updateDateRange" class="border-gray-300 rounded-md shadow-sm w-full p-2">
+                <label class="block text-sm font-medium text-content-secondary mb-1">Filter by Date:</label>
+                <select v-model="selectedRange" @change="updateDateRange" class="border-edge-strong rounded-md shadow-sm w-full p-2">
                     <option v-for="option in dateFilters" :key="option.value" :value="option.value">
                     {{ option.label }}
                     </option>
                 </select>
             </div>
             <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Status:</label>
-                <select v-model="selectedStatus" @change="getTasks" class="border-gray-300 rounded-md shadow-sm w-full p-2">
+                <label class="block text-sm font-medium text-content-secondary mb-1">Filter by Status:</label>
+                <select v-model="selectedStatus" @change="getTasks" class="border-edge-strong rounded-md shadow-sm w-full p-2">
                     <option v-for="option in statusFilters" :key="option.value" :value="option.value">
                     {{ option.label }}
                     </option>
                 </select>
             </div>
             <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-1">Search by Task Name:</label>
+                <label class="block text-sm font-medium text-content-secondary mb-1">Search by Task Name:</label>
                 <input 
                     v-model="searchQuery" 
                     type="text" 
                     @input="onSearchInput"
-                    class="border-gray-300 rounded-md shadow-sm w-full p-2"
+                    class="border-edge-strong rounded-md shadow-sm w-full p-2"
                     placeholder="Enter task name to search..."
                 >
             </div>
             <div class="mb-4">
                 <button
                   @click="resetFilters"
-                  class="w-full bg-gray-200 text-gray-700 hover:bg-gray-300 font-medium py-2 px-4 rounded-md transition"
+                  class="w-full bg-gray-200 text-content-secondary hover:bg-gray-300 font-medium py-2 px-4 rounded-md transition"
                 >
                   Reset Filters
                 </button>
@@ -43,7 +43,7 @@
             <div class="mb-6">
                 <button
                   @click="openCreateTaskModal"
-                  class="w-full bg-ultramarine-600 text-white hover:bg-ultramarine-700 font-medium py-2 px-4 rounded-md transition"
+                  class="w-full bg-primary text-primary-text hover:bg-primary-hover font-medium py-2 px-4 rounded-md transition"
                 >
                   Create New Task
                 </button>
@@ -73,7 +73,7 @@
                 </button>
                 <button 
                     @click="setStatusFilter('cancelled')"
-                    :class="getStatusColor('cancelled') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-gray-200 hover:border-gray-300'"
+                    :class="getStatusColor('cancelled') + ' p-4 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 cursor-pointer border-2 border-edge hover:border-edge-strong'"
                 >
                     <div class="text-sm">Cancelled</div>
                     <div class="text-2xl font-bold">{{cancelledCount}}</div>
@@ -82,23 +82,23 @@
             
             <!-- Grouped Task List -->
             <div class="mt-6">
-                <h2 class="text-lg font-semibold text-gray-700 mb-4">Tasks by Name</h2>
+                <h2 class="text-lg font-semibold text-content-secondary mb-4">Tasks by Name</h2>
                 <ul class="divide-y divide-gray-200">
                     <li v-for="group in tasksByName" :key="group.name" class="p-4 group hover:border hover:rounded-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200">
                         <div class="flex items-center justify-between mb-3 ">
                             <div class="flex-1 cursor-pointer" @click="openTaskGroupDetails(group)">
                                 <div class="flex items-center gap-2">
-                                    <div class="font-medium text-lg group-hover:text-ultramarine-600 transition-colors">{{ group.name }}</div>
-                                    <svg class="w-4 h-4 text-gray-400 group-hover:text-ultramarine-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <div class="font-medium text-lg group-hover:text-primary transition-colors">{{ group.name }}</div>
+                                    <svg class="w-4 h-4 text-gray-400 group-hover:text-primary transition-colors" 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>
                                 </div>
-                                <div class="text-sm text-gray-500 group-hover:text-gray-700 transition-colors">Total: {{ group.totalCount }} tasks</div>
-                                <div class="text-xs text-ultramarine-600 opacity-0 group-hover:opacity-100 transition-opacity mt-1">
+                                <div class="text-sm text-content-tertiary group-hover:text-content-secondary transition-colors">Total: {{ group.totalCount }} tasks</div>
+                                <div class="text-xs text-primary opacity-0 group-hover:opacity-100 transition-opacity mt-1">
                                     Click to view details
                                 </div>
                             </div>
-                            <div class="text-sm text-gray-500">
+                            <div class="text-sm text-content-tertiary">
                                 Last run: {{ group.lastRun ? new Date(group.lastRun).toLocaleString() : 'Never' }}
                             </div>
                         </div>
@@ -128,10 +128,10 @@
                             </button>
                             <button 
                                 @click.stop="openTaskGroupDetailsWithFilter(group, 'cancelled')"
-                                class="bg-gray-50 border border-gray-200 rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-gray-300"
+                                class="bg-page border border-edge rounded-md p-2 text-center shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 cursor-pointer hover:border-edge-strong"
                             >
                                 <div class="text-xs text-gray-600 font-medium">Cancelled</div>
-                                <div class="text-lg font-bold text-gray-700">{{ group.statusCounts.cancelled || 0 }}</div>
+                                <div class="text-lg font-bold text-content-secondary">{{ group.statusCounts.cancelled || 0 }}</div>
                             </button>
                         </div>
                     </li>
@@ -145,59 +145,60 @@
         <template #body>
             <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="closeCreateTaskModal" role="button" aria-label="Close modal">&times;</div>
             <div class="space-y-4">
-                <h3 class="text-lg font-semibold text-gray-700 mb-4">Create New Task</h3>
+                <h3 class="text-lg font-semibold text-content-secondary mb-4">Create New Task</h3>
                 
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Task Name:</label>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Task Name:</label>
                     <input 
                         v-model="newTask.name" 
                         type="text" 
-                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+                        class="w-full border border-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
                         placeholder="Enter task name"
                     >
                 </div>
                 
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Scheduled Time:</label>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Scheduled Time:</label>
                     <input 
                         v-model="newTask.scheduledAt" 
                         type="datetime-local" 
-                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+                        class="w-full border border-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
                     >
                 </div>
                 
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Parameters (JSON):</label>
-                    <textarea 
-                        ref="parametersEditor"
-                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
-                        placeholder='{"key": "value"}'
-                    ></textarea>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Parameters (JSON):</label>
+                    <ace-editor
+                        v-model="newTask.parameters"
+                        mode="json"
+                        :line-numbers="true"
+                        class="min-h-[120px]"
+                    />
                 </div>
                 
                 <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Repeat Interval (ms):</label>
+                    <label class="block text-sm font-medium text-content-secondary mb-1">Repeat Interval (ms):</label>
                     <input 
                         v-model="newTask.repeatInterval" 
                         type="number" 
                         min="0"
                         step="1000"
-                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+                        class="w-full border border-edge-strong rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
                         placeholder="0 for no repetition"
                     >
-                    <p class="text-xs text-gray-500 mt-1">Enter 0 or leave empty for no repetition. Use 1000 for 1 second, 60000 for 1 minute, etc.</p>
+                    <p class="text-xs text-content-tertiary mt-1">Enter 0 or leave empty for no repetition. Use 1000 for 1 second, 60000 for 1 minute, etc.</p>
                 </div>
                 
                 <div class="flex gap-2 pt-4">
                     <button 
                         @click="createTask" 
-                        class="flex-1 bg-ultramarine-600 text-white px-4 py-2 rounded-md hover:bg-ultramarine-700"
+                        class="flex-1 bg-primary text-primary-text px-4 py-2 rounded-md hover:bg-primary-hover"
                     >
                         Create Task
                     </button>
                     <button 
                          @click="closeCreateTaskModal" 
-                         class="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400"
+                         class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400"
                      >
                          Cancel
                      </button>

package/frontend/src/tasks/tasks.js

@@ -39,8 +39,7 @@ module.exports = app => app.component('tasks', {
       scheduledAt: '',
       parameters: '',
       repeatInterval: ''
-    },
-    parametersEditor: null
+    }
   }),
   methods: {
     async getTasks() {
@@ -83,7 +82,7 @@ module.exports = app => app.component('tasks', {
     async createTask() {
       try {
         let parameters = {};
-        const parametersText = this.parametersEditor ? this.parametersEditor.getValue() : '';
+        const parametersText = this.newTask.parameters || '';
         if (parametersText.trim()) {
           try {
             parameters = JSON.parse(parametersText);
@@ -160,9 +159,6 @@ module.exports = app => app.component('tasks', {
         parameters: '',
         repeatInterval: ''
       };
-      if (this.parametersEditor) {
-        this.parametersEditor.setValue('');
-      }
     },
     setDefaultCreateTaskValues() {
       // Set default scheduled time to 1 hour from now
@@ -175,21 +171,8 @@ module.exports = app => app.component('tasks', {
       this.resetCreateTaskForm();
       this.setDefaultCreateTaskValues();
     },
-    initializeParametersEditor() {
-      if (this.$refs.parametersEditor && !this.parametersEditor) {
-        this.parametersEditor = CodeMirror.fromTextArea(this.$refs.parametersEditor, {
-          mode: 'javascript',
-          lineNumbers: true,
-          smartIndent: false,
-          theme: 'default'
-        });
-      }
-    },
     openCreateTaskModal() {
       this.showCreateTaskModal = true;
-      this.$nextTick(() => {
-        this.initializeParametersEditor();
-      });
     },
     getStatusColor(status) {
       if (status === 'succeeded') {
@@ -346,11 +329,5 @@ module.exports = app => app.component('tasks', {
     this.status = 'loaded';
     this.setDefaultCreateTaskValues();
   },
-  beforeDestroy() {
-    if (this.parametersEditor) {
-      this.parametersEditor.toTextArea();
-    }
-  },
-
   template: template
 });

package/frontend/src/team/new-invitation/new-invitation.html

@@ -5,33 +5,33 @@
     </div>
 
     <div>
-      <label for="githubUsername" class="block text-sm/6 font-medium text-gray-900">GitHub Username</label>
+      <label for="githubUsername" class="block text-sm/6 font-medium text-content">GitHub Username</label>
       <div class="mt-2">
-        <input type="githubUsername" name="githubUsername" id="githubUsername" v-model="githubUsername" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6" placeholder="johnsmith12">
+        <input type="githubUsername" name="githubUsername" id="githubUsername" v-model="githubUsername" class="block w-full rounded-md bg-surface px-3 py-1.5 text-base text-content outline outline-1 -outline-offset-1 outline-edge-strong placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-sm/6" placeholder="johnsmith12">
       </div>
     </div>
 
     <div>
-      <label for="email" class="block text-sm/6 font-medium text-gray-900">Email (Optional)</label>
+      <label for="email" class="block text-sm/6 font-medium text-content">Email (Optional)</label>
       <div class="mt-2">
-        <input type="email" name="email" id="email" v-model="email" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6" placeholder="you@example.com">
+        <input type="email" name="email" id="email" v-model="email" class="block w-full rounded-md bg-surface px-3 py-1.5 text-base text-content outline outline-1 -outline-offset-1 outline-edge-strong placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-sm/6" placeholder="you@example.com">
       </div>
     </div>
 
     <div>
-      <label for="location" class="block text-sm/6 font-medium text-gray-900">Role</label>
+      <label for="location" class="block text-sm/6 font-medium text-content">Role</label>
       <div class="mt-2 grid grid-cols-1">
-        <select id="role" :disabled="tier == null" name="role" v-model="role" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
+        <select id="role" :disabled="tier == null" name="role" v-model="role" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-surface py-1.5 pl-3 pr-8 text-base text-content outline outline-1 -outline-offset-1 outline-edge-strong focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
           <option value="admin">Admin</option>
           <option value="member">Member</option>
           <option value="readonly">Read-only</option>
           <option value="dashboards">Dashboards Only</option>
         </select>
-        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-content-tertiary sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
           <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
         </svg>
       </div>
-      <div v-if="tier == null" class="text-sm text-gray-700">
+      <div v-if="tier == null" class="text-sm text-content-secondary">
         You can only invite "Dashboards Only" users until you set up a subscription.
       </div>
     </div>

package/frontend/src/team/team.html

@@ -14,7 +14,7 @@
         <async-button
           type="submit"
           @click="getWorkspaceCustomerPortalLink"
-          class="inline-flex items-center justify-center rounded-md border border-transparent bg-ultramarine-600 py-1 px-2 text-sm font-medium text-white shadow-sm hover:bg-ultramarine-500 focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2">
+          class="inline-flex items-center justify-center rounded-md border border-transparent bg-primary py-1 px-2 text-sm font-medium text-primary-text shadow-sm hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-forest-green-500 focus:ring-offset-2">
           View in Stripe
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
             <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
@@ -25,7 +25,7 @@
     <div v-else-if="workspace && !workspace.subscriptionTier" class="mt-4 flex justify-between items-center">
       <div>
         <span class="font-bold">No active subscription</span>
-        <div class="text-sm text-gray-700">
+        <div class="text-sm text-content-secondary">
           You won't be able to invite your team until you activate a subscription
         </div>
       </div>
@@ -33,7 +33,7 @@
         <a
           :href="paymentLink"
           target="_blank"
-          class="inline-flex items-center justify-center rounded-md border border-transparent bg-ultramarine-600 py-1 px-2 text-sm font-medium text-white shadow-sm hover:bg-ultramarine-500 focus:outline-none focus:ring-2 focus:ring-ultramarine-500 focus:ring-offset-2">
+          class="inline-flex items-center justify-center rounded-md border border-transparent bg-primary py-1 px-2 text-sm font-medium text-primary-text shadow-sm hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
           Subscribe With Stripe
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
             <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
@@ -52,21 +52,21 @@
     <ul v-else role="list" class="divide-y divide-gray-100">
       <li class="flex justify-between gap-x-6 py-5" v-for="user in users">
         <div class="flex min-w-0 gap-x-4">
-          <img class="size-12 flex-none rounded-full bg-gray-50" :src="user.picture ?? 'images/logo.svg'" alt="">
+          <img class="size-12 flex-none rounded-full bg-page" :src="user.picture ?? 'images/logo.svg'" alt="">
           <div class="min-w-0 flex-auto">
-            <p class="text-sm/6 font-semibold text-gray-900">
+            <p class="text-sm/6 font-semibold text-content">
               {{user.name || user.githubUsername}}
               <span v-if="user.isFreeUser" class="ml-1 inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Free</span>
             </p>
-            <p class="mt-1 truncate text-xs/5 text-gray-500">{{user.email ?? 'No Email'}}</p>
+            <p class="mt-1 truncate text-xs/5 text-content-tertiary">{{user.email ?? 'No Email'}}</p>
           </div>
         </div>
         <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
-          <p class="text-sm/6 text-gray-900 capitalize">{{getRolesForUser(user).join(', ')}}</p>
+          <p class="text-sm/6 text-content capitalize">{{getRolesForUser(user).join(', ')}}</p>
           <div class="flex gap-3">
             <button
               type="button"
-              class="mt-1 text-xs/5 text-gray-500 cursor-pointer disabled:cursor-not-allowed disabled:text-gray-300"
+              class="mt-1 text-xs/5 text-content-tertiary cursor-pointer disabled:cursor-not-allowed disabled:text-gray-300"
               :disabled="getRolesForUser(user).includes('owner')"
               @click="openEditModal(user)">
               Edit
@@ -93,7 +93,7 @@
           @click="showNewInvitationModal = true"
           :disabled="status === 'loading'"
           :tier="workspace?.subscriptionTier"
-          class="block rounded-md bg-ultramarine-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 disabled:bg-gray-500 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
+          class="block rounded-md bg-primary px-3 py-2 text-center text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover disabled:bg-page0 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
           New Invitation
           <svg class="inline w-4 h-4 ml-1" v-if="workspace && !workspace.subscriptionTier" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
             <path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z" clip-rule="evenodd" />
@@ -110,26 +110,26 @@
           <table class="min-w-full divide-y divide-gray-300">
             <thead>
               <tr>
-                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">GitHub Username</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Email</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Role</th>
+                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-content sm:pl-0">GitHub Username</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-content">Email</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-content">Status</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-content">Role</th>
               </tr>
             </thead>
-            <tbody class="divide-y divide-gray-200 bg-white">
+            <tbody class="divide-y divide-gray-200 bg-surface">
               <tr v-for="invitation in invitations">
                 <td class="whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0">
                   {{invitation.githubUsername}}
                 </td>
-                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
+                <td class="whitespace-nowrap px-3 py-5 text-sm text-content-tertiary">
                   {{invitation.email}}
                 </td>
-                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
-                  <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20">
+                <td class="whitespace-nowrap px-3 py-5 text-sm text-content-tertiary">
+                  <span class="inline-flex items-center rounded-md bg-page px-2 py-1 text-xs font-medium text-content-secondary ring-1 ring-inset ring-gray-600/20">
                     Pending
                   </span>
                 </td>
-                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
+                <td class="whitespace-nowrap px-3 py-5 text-sm text-content-tertiary">
                   {{invitation.roles.join(', ')}}
                 </td>
               </tr>
@@ -143,8 +143,8 @@
         <svg class="mx-auto size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
           <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
         </svg>
-        <h3 class="mt-2 text-sm font-semibold text-gray-900">No invitations</h3>
-        <p class="mt-1 text-sm text-gray-500">You have no outstanding invitations</p>
+        <h3 class="mt-2 text-sm font-semibold text-content">No invitations</h3>
+        <p class="mt-1 text-sm text-content-tertiary">You have no outstanding invitations</p>
       </div>
     </div>
   </div>
@@ -165,32 +165,32 @@
         </div>
 
         <div>
-          <div class="text-sm/6 font-semibold text-gray-900">
+          <div class="text-sm/6 font-semibold text-content">
             {{showEditModal.user.name || showEditModal.user.githubUsername}}
           </div>
-          <div class="text-xs/5 text-gray-500">
+          <div class="text-xs/5 text-content-tertiary">
             {{showEditModal.user.email ?? 'No Email'}}
           </div>
         </div>
 
         <div>
-          <label for="editRole" class="block text-sm/6 font-medium text-gray-900">Role</label>
+          <label for="editRole" class="block text-sm/6 font-medium text-content">Role</label>
           <div class="mt-2 grid grid-cols-1">
             <select
               id="editRole"
               name="editRole"
               v-model="showEditModal.role"
-              class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-ultramarine-600 sm:text-sm/6">
+              class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-surface py-1.5 pl-3 pr-8 text-base text-content outline outline-1 -outline-offset-1 outline-edge-strong focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-sm/6">
               <option value="admin" :disabled="disableRoleOption('admin')">Admin</option>
               <option value="member" :disabled="disableRoleOption('member')">Member</option>
               <option value="readonly" :disabled="disableRoleOption('readonly')">Read-only</option>
               <option value="dashboards" :disabled="disableRoleOption('dashboards')">Dashboards Only</option>
             </select>
-            <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+            <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-content-tertiary sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
               <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
             </svg>
           </div>
-          <div v-if="!workspace?.subscriptionTier" class="mt-2 text-sm text-gray-700">
+          <div v-if="!workspace?.subscriptionTier" class="mt-2 text-sm text-content-secondary">
             You can only assign the "Dashboards Only" role until you activate a subscription.
           </div>
         </div>
@@ -199,7 +199,7 @@
           <async-button
             @click="updateWorkspaceMember"
             :disabled="showEditModal.role === showEditModal.originalRole"
-            class="border-0 mt-0 flex w-full items-center justify-center gap-3 rounded-md bg-ultramarine-600 hover:bg-ultramarine-500 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-500">
+            class="border-0 mt-0 flex w-full items-center justify-center gap-3 rounded-md bg-primary hover:bg-primary-hover px-3 py-1.5 text-primary-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
             <span class="text-sm font-semibold leading-6">Save</span>
           </async-button>
 

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

@@ -1,8 +1,13 @@
 <div>
     <div class="mb-2">
-      <textarea class="border border-gray-200 p-2 h-[300px] w-full" ref="codeEditor"></textarea>
+      <ace-editor
+        v-model="editorValue"
+        mode="javascript"
+        :line-numbers="true"
+        class="h-[300px] w-full"
+      />
     </div>
-    <button @click="updateDocument()" 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">Submit</button>
+    <button @click="updateDocument()" 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">Submit</button>
     <div v-if="errors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">
       <div class="flex">
         <div class="flex-shrink-0">

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

@@ -1,7 +1,6 @@
 'use strict';
 
 const api = require('../api');
-
 const { BSON, EJSON } = require('mongodb/lib/bson');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
@@ -21,13 +20,13 @@ module.exports = app => app.component('update-document', {
   template,
   data: function() {
     return {
-      editor: null,
+      editorValue: '{\n    \n}',
       errors: []
     };
   },
   methods: {
     async updateDocument() {
-      const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
+      const data = EJSON.serialize(eval(`(${this.editorValue})`));
       try {
         if (this.multiple) {
           const ids = this.document.map(x => x._id);
@@ -52,13 +51,5 @@ module.exports = app => app.component('update-document', {
         throw err;
       }
     }
-  },
-  mounted: function() {
-    this.$refs.codeEditor.value = '{\n    \n}';
-    this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
-      mode: 'javascript',
-      lineNumbers: true,
-      smartIndent: false
-    });
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.2.13",
+  "version": "0.3.0",
   "description": "A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {
@@ -12,6 +12,7 @@
     "@ai-sdk/anthropic": "2.x",
     "@ai-sdk/google": "2.x",
     "@ai-sdk/openai": "2.x",
+    "ace-builds": "^1.43.6",
     "ai": "5.x",
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",